feat(sdk,secondary-button): add position-related functionality

Telegram-Mini-Apps · Oct 1, 2024 · 77afbbf · 77afbbf
1 parent c0ba6a7
commit 77afbbf
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 14 deletions.
diff --git a/packages/sdk/src/scopes/components/secondary-button/methods.ts b/packages/sdk/src/scopes/components/secondary-button/methods.ts
@@ -76,12 +76,13 @@ function onStateChanged(s: State): void {
   // crash due to the empty value of the text.
   if (s.text) {
     postEvent(MINI_APPS_METHOD, {
+      color: s.backgroundColor,
       has_shine_effect: s.hasShineEffect,
-      is_visible: s.isVisible,
       is_active: s.isEnabled,
       is_progress_visible: s.isLoaderVisible,
+      is_visible: s.isVisible,
+      position: s.position,
       text: s.text,
-      color: s.backgroundColor,
       text_color: s.textColor,
     });
   }

diff --git a/packages/sdk/src/scopes/components/secondary-button/signals.ts b/packages/sdk/src/scopes/components/secondary-button/signals.ts
@@ -2,8 +2,6 @@ import { computed, type Computed, signal } from '@telegram-apps/signals';
 
 import type { State } from './types.js';
 
-/* USUAL */
-
 /**
  * Complete component state.
  */
@@ -13,6 +11,7 @@ export const state = signal<State>({
   isEnabled: true,
   isLoaderVisible: false,
   isVisible: false,
+  position: 'left',
   text: 'Cancel',
   textColor: '#2481cc',
 });
@@ -22,43 +21,46 @@ export const state = signal<State>({
  */
 export const isMounted = signal(false);
 
-/* COMPUTED */
-
-function createStateComputed<K extends keyof State>(key: K): Computed<State[K]> {
+function fromState<K extends keyof State>(key: K): Computed<State[K]> {
   return computed(() => state()[key]);
 }
 
 /**
  * @see State.backgroundColor
  */
-export const backgroundColor = createStateComputed('backgroundColor');
+export const backgroundColor = fromState('backgroundColor');
 
 /**
  * @see State.hasShineEffect
  */
-export const hasShineEffect = createStateComputed('hasShineEffect');
+export const hasShineEffect = fromState('hasShineEffect');
 
 /**
  * @see State.isEnabled
  */
-export const isEnabled = createStateComputed('isEnabled');
+export const isEnabled = fromState('isEnabled');
 
 /**
  * @see State.isLoaderVisible
  */
-export const isLoaderVisible = createStateComputed('isLoaderVisible');
+export const isLoaderVisible = fromState('isLoaderVisible');
 
 /**
  * @see State.isVisible
  */
-export const isVisible = createStateComputed('isVisible');
+export const isVisible = fromState('isVisible');
+
+/**
+ * @see State.position
+ */
+export const position = fromState('position');
 
 /**
  * @see State.text
  */
-export const text = createStateComputed('text');
+export const text = fromState('text');
 
 /**
  * @see State.textColor
  */
-export const textColor = createStateComputed('textColor');
+export const textColor = fromState('textColor');