feat: add main buttom functionality

sample/web/src/App.js

@@ -11,7 +11,12 @@ import {
     PATH_MAIN,
     PATH_FUNCTIONS_BASIC,
     PATH_FUNCTIONS_ALERTS,
-    PATH_FUNCTIONS_EVENTS, PATH_FUNCTIONS_BOT, PATH_FUNCTIONS_LINKS, PATH_FUNCTIONS_THEME, PATH_FUNCTIONS_QR
+    PATH_FUNCTIONS_EVENTS,
+    PATH_FUNCTIONS_BOT,
+    PATH_FUNCTIONS_LINKS,
+    PATH_FUNCTIONS_THEME,
+    PATH_FUNCTIONS_QR,
+    PATH_BUTTONS_MAIN, PATH_BUTTONS_BACK
 } from "./constants/Paths";
 import BasicFunctionsScreen from "./screens/functions/basic/BasicFunctionsScreen";
 import AlertFunctionsScreen from "./screens/functions/alerts/AlertFunctionsScreen";
@@ -20,6 +25,7 @@ import BotFunctionsScreen from "./screens/functions/bot/BotFunctionsScreen";
 import LinkFunctionsScreen from "./screens/functions/links/LinkFunctionsScreen";
 import ThemeFunctionsScreen from "./screens/functions/theme/ThemeFunctionsScreen";
 import QrFunctionsScreen from "./screens/functions/qr/QrFunctionsScreen";
+import MainButtonScreen from "./screens/buttons/main/MainButtonScreen";
 
 function App() {
     const {webApp} = useTelegram()
@@ -29,11 +35,17 @@ function App() {
         navigate(-1)
     }, [navigate])
 
+    const onMainClick = useCallback(() => {
+        webApp.showAlert("Main button click")
+    }, [webApp])
+
     useEffect(() => {
         webApp.ready()
         webApp.BackButton.onClick(onBackClick)
+        webApp.MainButton.onClick(onMainClick)
         return () => {
             webApp.BackButton.offClick(onBackClick)
+            webApp.MainButton.offClick(onMainClick)
         };
     }, [webApp])
 
@@ -51,6 +63,8 @@ function App() {
                 <Route path={PATH_FUNCTIONS_LINKS} element={<LinkFunctionsScreen/>}/>
                 <Route path={PATH_FUNCTIONS_THEME} element={<ThemeFunctionsScreen/>}/>
                 <Route path={PATH_FUNCTIONS_QR} element={<QrFunctionsScreen/>}/>
+                <Route path={PATH_BUTTONS_MAIN} element={<MainButtonScreen/>}/>
+                <Route path={PATH_BUTTONS_BACK} element={<MainButtonScreen/>}/>
             </Routes>
         </div>
     );

sample/web/src/components/app/button/DisableMainButton.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import TelegramDetailedButton from "../../kit/DetailedButton/TelegramDetailedButton";
+import {useTelegram} from "../../../hooks/useTelegram";
+
+/**
+ * MainButton.disable() is a method to disable the button.
+ *
+ * @see https://core.telegram.org/bots/webapps#mainbutton
+ */
+const DisableMainButton = () => {
+    const {webApp, executeMethod} = useTelegram()
+
+    const onDisable = () => {
+        executeMethod('MainButton.disable', webApp.MainButton.disable)
+    }
+
+    return (
+        <TelegramDetailedButton
+            buttontitle={'MainButton.disable()'}
+            buttondescription={
+                'A method to disable the button.'
+            }
+            buttonlabel={'Execute'}
+            onButtomClick={onDisable}
+        />
+    );
+};
+
+export default DisableMainButton;

sample/web/src/components/app/button/EnableMainButton.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import TelegramDetailedButton from "../../kit/DetailedButton/TelegramDetailedButton";
+import {useTelegram} from "../../../hooks/useTelegram";
+
+/**
+ * MainButton.enable() is a method to enable the button.
+ *
+ * @see https://core.telegram.org/bots/webapps#mainbutton
+ */
+const EnableMainButton = () => {
+    const {webApp, executeMethod} = useTelegram()
+
+    const onEnable = () => {
+        executeMethod('MainButton.enable', webApp.MainButton.enable)
+    }
+
+    return (
+        <TelegramDetailedButton
+            buttontitle={'MainButton.enable()'}
+            buttondescription={
+                'A method to enable the button.'
+            }
+            buttonlabel={'Execute'}
+            onButtomClick={onEnable}
+        />
+    );
+};
+
+export default EnableMainButton;

sample/web/src/components/app/button/HideMainButton.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import TelegramDetailedButton from "../../kit/DetailedButton/TelegramDetailedButton";
+import {useTelegram} from "../../../hooks/useTelegram";
+
+/**
+ * MainButton.hide() is a method to hide the button.
+ *
+ * @see https://core.telegram.org/bots/webapps#mainbutton
+ */
+const HideMainButton = () => {
+    const {webApp, executeMethod} = useTelegram()
+
+    const onHide = () => {
+        executeMethod('MainButton.hide', webApp.MainButton.hide)
+    }
+
+    return (
+        <TelegramDetailedButton
+            buttontitle={'MainButton.hide()'}
+            buttondescription={
+                'A method to hide the button.'
+            }
+            buttonlabel={'Execute'}
+            onButtomClick={onHide}
+        />
+    );
+};
+
+export default HideMainButton;

sample/web/src/components/app/button/HideProgressMainButton.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import TelegramDetailedButton from "../../kit/DetailedButton/TelegramDetailedButton";
+import {useTelegram} from "../../../hooks/useTelegram";
+
+/**
+ * MainButton.hideProgress() is a method to hide the loading indicator.
+ *
+ * @see https://core.telegram.org/bots/webapps#mainbutton
+ */
+const HideProgressMainButton = () => {
+    const {webApp, executeMethod} = useTelegram()
+
+    const onHideProgress = () => {
+        executeMethod('MainButton.hideProgress', webApp.MainButton.hideProgress)
+    }
+
+    return (
+        <TelegramDetailedButton
+            buttontitle={'MainButton.hideProgress()'}
+            buttondescription={
+                'A method to hide the loading indicator.'
+            }
+            buttonlabel={'Execute'}
+            onButtomClick={onHideProgress}
+        />
+    );
+};
+
+export default HideProgressMainButton;

sample/web/src/components/app/button/SetColorMainButton.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import TelegramDetailedButton from "../../kit/DetailedButton/TelegramDetailedButton";
+import {useTelegram} from "../../../hooks/useTelegram";
+import TelegramMiniForm from "../../kit/MiniForm/TelegramMiniForm";
+
+/**
+ * MainButton.color is the current button color. Set to themeParams.button_color by default.
+ *
+ * @see https://core.telegram.org/bots/webapps#mainbutton
+ */
+const SetColorMainButton = () => {
+    const {webApp, executeMethod} = useTelegram()
+
+    const onSetColor = (color) => {
+        executeMethod(
+            'MainButton.setColor',
+            () => { webApp.MainButton.color = color }
+        )
+    }
+
+    return (
+        <TelegramMiniForm
+            fieldlabel={'MainButton.color'}
+            fielddescription={'Current button color. Set to themeParams.button_color by default.'}
+            fieldhint={`#RRGGBB color, e.g ${webApp.MainButton.color}`}
+            buttonlabel={'Execute'}
+            onSubmit={onSetColor}
+        />
+    );
+};
+
+export default SetColorMainButton;

sample/web/src/components/app/button/SetParamsMainButton.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import TelegramDetailedButton from "../../kit/DetailedButton/TelegramDetailedButton";
+import {useTelegram} from "../../../hooks/useTelegram";
+import TelegramMiniForm from "../../kit/MiniForm/TelegramMiniForm";
+
+/**
+ * MainButton.setParams(params) is a method to set the button parameters.
+ *
+ * The params parameter is an object containing one or several fields that need to be changed:
+ * text - button text;
+ * color - button color;
+ * text_color - button text color;
+ * is_active - enable the button;
+ * is_visible - show the button.
+ *
+ * @see https://core.telegram.org/bots/webapps#mainbutton
+ */
+const SetParamsMainButton = () => {
+    const {webApp, executeMethod} = useTelegram()
+
+    const onSetParams = (text) => {
+        const json = JSON.parse(text)
+        executeMethod(
+            'MainButton.setParams',
+            () => webApp.MainButton.setParams(json)
+        )
+    }
+
+    return (
+        <TelegramMiniForm
+            fieldlabel={'MainButton.setParams(params)'}
+            fielddescription={'A method to set the button parameters. The params parameter is an object containing one or several fields that need to be changed:\n' +
+                'text - button text;\n' +
+                'color - button color;\n' +
+                'text_color - button text color;\n' +
+                'is_active - enable the button;\n' +
+                'is_visible - show the button.'}
+            fieldhint={`Enter valid json of main button params`}
+            buttonlabel={'Execute'}
+            onSubmit={onSetParams}
+        />
+    );
+};
+
+export default SetParamsMainButton;

sample/web/src/components/app/button/SetTextColorMainButton.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import TelegramDetailedButton from "../../kit/DetailedButton/TelegramDetailedButton";
+import {useTelegram} from "../../../hooks/useTelegram";
+import TelegramMiniForm from "../../kit/MiniForm/TelegramMiniForm";
+
+/**
+ * MainButton.textColor is the current button text color. Set to themeParams.button_text_color by default.
+ *
+ * @see https://core.telegram.org/bots/webapps#mainbutton
+ */
+const SetTextColorMainButton = () => {
+    const {webApp, executeMethod} = useTelegram()
+
+    const onSetTextColor = (color) => {
+        executeMethod(
+            'MainButton.setTextColor',
+            () => { webApp.MainButton.textColor = color }
+        )
+    }
+
+    return (
+        <TelegramMiniForm
+            fieldlabel={'MainButton.textColor'}
+            fielddescription={'Current button text color. Set to themeParams.button_text_color by default.'}
+            fieldhint={`#RRGGBB color, e.g ${webApp.MainButton.textColor}`}
+            buttonlabel={'Execute'}
+            onSubmit={onSetTextColor}
+        />
+    );
+};
+
+export default SetTextColorMainButton;

sample/web/src/components/app/button/SetTextMainButton.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import TelegramDetailedButton from "../../kit/DetailedButton/TelegramDetailedButton";
+import {useTelegram} from "../../../hooks/useTelegram";
+import TelegramMiniForm from "../../kit/MiniForm/TelegramMiniForm";
+
+/**
+ * MainButton.setText(text) is a method to set the button text.
+ *
+ * @see https://core.telegram.org/bots/webapps#mainbutton
+ */
+const SetTextMainButton = () => {
+    const {webApp, executeMethod} = useTelegram()
+
+    const onSetText = (text) => {
+        executeMethod(
+            'MainButton.setText',
+            () => webApp.MainButton.setText(text)
+        )
+    }
+
+    return (
+        <TelegramMiniForm
+            fieldlabel={'MainButton.setText(text)'}
+            fielddescription={'A method to set the button text.'}
+            fieldhint={`Enter button label`}
+            buttonlabel={'Execute'}
+            onSubmit={onSetText}
+        />
+    );
+};
+
+export default SetTextMainButton;

sample/web/src/components/app/button/ShowMainButton.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import TelegramDetailedButton from "../../kit/DetailedButton/TelegramDetailedButton";
+import {useTelegram} from "../../../hooks/useTelegram";
+
+/**
+ * MainButton.show() is a method to make the button visible.
+ *
+ * Note that opening the Mini App from the attachment menu hides the main button until the user interacts with the
+ * Mini App interface.
+ *
+ * @see https://core.telegram.org/bots/webapps#mainbutton
+ */
+const ShowMainButton = () => {
+    const {webApp, executeMethod} = useTelegram()
+
+    const onShow = () => {
+        executeMethod('MainButton.show', webApp.MainButton.show)
+    }
+
+    return (
+        <TelegramDetailedButton
+            buttontitle={'MainButton.show()'}
+            buttondescription={
+                'A method to make the button visible.' +
+                'Note that opening the Mini App from the attachment menu hides the main button until the user interacts with the Mini App interface.'
+            }
+            buttonlabel={'Execute'}
+            onButtomClick={onShow}
+        />
+    );
+};
+
+export default ShowMainButton;

sample/web/src/components/app/button/ShowProgressMainButton.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import TelegramDetailedButton from "../../kit/DetailedButton/TelegramDetailedButton";
+import {useTelegram} from "../../../hooks/useTelegram";
+import TelegramMiniForm from "../../kit/MiniForm/TelegramMiniForm";
+import TelegramMiniFormWithOptions from "../../kit/MiniFormWithOptions/TelegramMiniFormWithOptions";
+import TelegramOptionsForm from "../../kit/OptionsForm/TelegramOptionsForm";
+
+/**
+ * MainButton.showProgress(leaveActive) is a method to show a loading indicator on the button.
+ * It is recommended to display loading progress if the action tied to the button may take a long time.
+ *
+ * By default, the button is disabled while the action is in progress.
+ * If the parameter leaveActive=true is passed, the button remains enabled.
+ *
+ * @see https://core.telegram.org/bots/webapps#mainbutton
+ */
+const ShowProgressMainButton = () => {
+    const {webApp, executeMethod} = useTelegram()
+
+    const onShowProgress = (options) => {
+        const leaveActive= options[0] === 'true'
+        executeMethod(
+            'MainButton.showProgress',
+            () => webApp.MainButton.showProgress(leaveActive)
+        )
+    }
+
+    const options = ['true', 'false']
+
+    return (
+        <TelegramOptionsForm
+            formlabel={'MainButton.showProgress(leaveActive)'}
+            formdescription={
+                'A method to show a loading indicator on the button.' +
+                'It is recommended to display loading progress if the action tied to the button may take a long time. By default, the button is disabled while the action is in progress. If the parameter leaveActive=true is passed, the button remains enabled.'
+            }
+            optionsmultiple={false}
+            optionslabel={'leaveActive'}
+            options={options}
+            buttonlabel={'Execute'}
+            onSubmit={onShowProgress}
+        />
+    );
+};
+
+export default ShowProgressMainButton;