diff --git a/.changeset/lemon-apes-hunt.md b/.changeset/lemon-apes-hunt.md new file mode 100644 index 0000000..6aeffb8 --- /dev/null +++ b/.changeset/lemon-apes-hunt.md @@ -0,0 +1,5 @@ +--- +'@vkruglikov/react-telegram-web-app': minor +--- + +Add SettingsButton diff --git a/docs/README.md b/docs/README.md index 4adb5a5..5594d9c 100644 --- a/docs/README.md +++ b/docs/README.md @@ -9,6 +9,7 @@ - [BackButtonProps](interfaces/BackButtonProps.md) - [MainButtonProps](interfaces/MainButtonProps.md) - [ScanQrPopupParams](interfaces/ScanQrPopupParams.md) +- [SettingsButtonProps](interfaces/SettingsButtonProps.md) - [ShowPopupButton](interfaces/ShowPopupButton.md) - [ShowPopupParams](interfaces/ShowPopupParams.md) - [ThemeParams](interfaces/ThemeParams.md) @@ -55,6 +56,7 @@ - [BackButton](README.md#backbutton) - [MainButton](README.md#mainbutton) +- [SettingsButton](README.md#settingsbutton) - [WebAppProvider](README.md#webappprovider) ## Type Aliases @@ -245,6 +247,7 @@ This object describe options be able to set through WebAppProvider | Name | Type | Description | | :--------------------------- | :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `async?` | `boolean` | - | | `smoothButtonsTransition?` | `boolean` | When is `true`, we can smooth button transitions due to show(), hide() calls. So when you use MainButton or BackButton on multiple pages, there will be no noticeable flickering of the button during transitions **`Default Value`** `false` | | `smoothButtonsTransitionMs?` | `number` | **`Default Value`** `10` **`Remarks`** | @@ -493,9 +496,10 @@ You have to look original description switchInlineQuery in [telegram!WebApp](htt | `first_name` | `string` | | `id` | `number` | | `is_bot?` | `boolean` | +| `is_premium?` | `boolean` | | `language_code?` | `string` | | `last_name?` | `string` | -| `photo_url?` | `true` | +| `photo_url?` | `string` | | `username?` | `string` | ## Hooks @@ -574,7 +578,7 @@ readonly [[`ImpactOccurredFunction`](README.md#impactoccurredfunction), [`Notifi ### useInitData -▸ **useInitData**(): readonly [[`InitDataUnsafe`](README.md#initdataunsafe), `string`] +▸ **useInitData**(): readonly [`undefined` \| [`InitDataUnsafe`](README.md#initdataunsafe), `undefined` \| `string`] This hook provides `initDataUnsafe` and `initData` You have to look original description in [telegram!WebApp](https://core.telegram.org/bots/webapps#initializing-mini-apps), because hook just return this. @@ -588,7 +592,7 @@ const [initDataUnsafe, initData] = useInitData(); #### Returns -readonly [[`InitDataUnsafe`](README.md#initdataunsafe), `string`] +readonly [`undefined` \| [`InitDataUnsafe`](README.md#initdataunsafe), `undefined` \| `string`] --- @@ -757,6 +761,30 @@ import { MainButton } from '@vkruglikov/react-telegram-web-app'; --- +### SettingsButton + +▸ **SettingsButton**(`props`): `null` + +Renders a [telegram!SettingsButton](https://core.telegram.org/bots/webapps#settingsbutton) component in React app as [react!Component](https://reactjs.org/docs/react-component.html) + +```tsx +import { SettingsButton } from '@vkruglikov/react-telegram-web-app'; + + console.log('Hello, I am settings button!')} />; +``` + +#### Parameters + +| Name | Type | +| :------ | :--------------------------------------------------------- | +| `props` | [`SettingsButtonProps`](interfaces/SettingsButtonProps.md) | + +#### Returns + +`null` + +--- + ### WebAppProvider ▸ **WebAppProvider**(`props`): `ReactElement`<`any`, `string` \| `JSXElementConstructor`<`any`\>\> diff --git a/docs/interfaces/SettingsButtonProps.md b/docs/interfaces/SettingsButtonProps.md index 609273c..eb7c6ed 100644 --- a/docs/interfaces/SettingsButtonProps.md +++ b/docs/interfaces/SettingsButtonProps.md @@ -20,8 +20,6 @@ The props type of [`SettingsButton`](../README.md#settingsbutton). ▸ (): `void` -The settings button press event handler - ##### Returns `void` diff --git a/src/SettingsButton.tsx b/src/SettingsButton.tsx index 5c8de48..bb4219b 100644 --- a/src/SettingsButton.tsx +++ b/src/SettingsButton.tsx @@ -1,13 +1,27 @@ -import { useContext, useEffect, useId } from 'react'; -import { useWebApp, useSmoothButtonsTransition, systemContext } from './core'; +import { useEffect } from 'react'; +import { useWebApp } from './core'; +/** + * The props type of {@link SettingsButton | `SettingsButton`}. + */ export interface SettingsButtonProps { onClick?: () => void; } +/** + * Renders a {@link telegram!SettingsButton} component in React app as {@link react!Component} + * + * ```tsx + * import { SettingsButton } from "@vkruglikov/react-telegram-web-app"; + * + * console.log('Hello, I am settings button!')} + * /> + * ``` + * @param props + * @group React Components + */ const SettingsButton = ({ onClick }: SettingsButtonProps): null => { - const system = useContext(systemContext); - const buttonId = useId(); const WebApp = useWebApp(); useEffect(() => { @@ -21,12 +35,17 @@ const SettingsButton = ({ onClick }: SettingsButtonProps): null => { }; }, [onClick, WebApp]); - useSmoothButtonsTransition({ - show: WebApp?.SettingsButton?.show, - hide: WebApp?.SettingsButton?.hide, - currentShowedIdRef: system.SettingsButton, - id: buttonId, - }); + useEffect(() => { + if (!WebApp?.SettingsButton) { + return; + } + + WebApp.SettingsButton.show?.(); + + return () => { + WebApp.SettingsButton.hide?.(); + }; + }, [WebApp]); return null; }; diff --git a/src/core/context.ts b/src/core/context.ts index 2eec51e..81f2909 100644 --- a/src/core/context.ts +++ b/src/core/context.ts @@ -38,13 +38,11 @@ export const optionsContext = createContext(DEFAULT_OPTIONS); type SystemContext = { MainButton: MutableRefObject; BackButton: MutableRefObject; - SettingsButton: MutableRefObject; }; export const createSystemContextValue = () => ({ MainButton: { current: null }, BackButton: { current: null }, - SettingsButton: { current: null }, }); export const systemContext = createContext( diff --git a/src/core/twa-types/WebApp.d.ts b/src/core/twa-types/WebApp.d.ts index 837658d..50b0945 100644 --- a/src/core/twa-types/WebApp.d.ts +++ b/src/core/twa-types/WebApp.d.ts @@ -56,7 +56,7 @@ export declare namespace TelegramWebApp { last_name?: string; username?: string; language_code?: string; - photo_url?: true; + photo_url?: string; } /** diff --git a/src/core/twa-types/WebAppVersion_7.0.d.ts b/src/core/twa-types/WebAppVersion_7.0.d.ts new file mode 100644 index 0000000..ef0a3a8 --- /dev/null +++ b/src/core/twa-types/WebAppVersion_7.0.d.ts @@ -0,0 +1,6 @@ +export declare namespace TelegramWebAppVersion7_0 { + interface WebApp extends TelegramWebAppVersion6_9.WebApp { + // TODO Fix types SettingsButton + SettingsButton?: any; + } +} diff --git a/src/core/twa-types/index.d.ts b/src/core/twa-types/index.d.ts index e25f534..2d2784f 100644 --- a/src/core/twa-types/index.d.ts +++ b/src/core/twa-types/index.d.ts @@ -4,10 +4,12 @@ import { TelegramWebAppVersion6_2 } from './WebAppVersion_6.2'; import { TelegramWebAppVersion6_4 } from './WebAppVersion_6.4'; import { TelegramWebAppVersion6_7 } from './WebAppVersion_6.7'; import { TelegramWebAppVersion6_9 } from './WebAppVersion_6.9'; +import { TelegramWebAppVersion7_0 } from './WebAppVersion_7.0'; export type WebApp = TelegramWebApp.WebApp & Partial & Partial & Partial & Partial & - Partial; + Partial & + Partial; diff --git a/typedoc.json b/typedoc.json index 54fcdca..52f530c 100644 --- a/typedoc.json +++ b/typedoc.json @@ -9,6 +9,7 @@ "telegram": { "CloudStorage": "https://core.telegram.org/bots/webapps#cloudstorage", "MainButton": "https://core.telegram.org/bots/webapps#mainbutton", + "SettingsButton": "https://core.telegram.org/bots/webapps#settingsbutton", "ScanQrPopupParams": "https://core.telegram.org/bots/webapps#scanqrpopupparams", "BackButton": "https://core.telegram.org/bots/webapps#backbutton", "PopupParams": "https://core.telegram.org/bots/webapps#popupparams",