@tma.js/sdk 1.4.4 → 1.4.7

package/src/main-button/MainButton.ts

@@ -1,239 +0,0 @@
-import {
-  off,
-  on,
-  type PostEvent,
-  postEvent as defaultPostEvent,
-} from '~/bridge/index.js';
-import { EventEmitter } from '~/event-emitter/index.js';
-import { State } from '~/state/index.js';
-import type { RGB } from '~/colors/index.js';
-
-import type {
-  MainButtonEvents,
-  MainButtonParams,
-  MainButtonProps,
-  MainButtonState,
-} from './types.js';
-
-type Emitter = EventEmitter<MainButtonEvents>;
-
-/**
- * Controls the main button, which is displayed at the bottom
- * of the Mini App in the Telegram interface.
- */
-export class MainButton {
-  private readonly ee: Emitter = new EventEmitter();
-
-  private readonly state: State<MainButtonState>;
-
-  private readonly postEvent: PostEvent;
-
-  constructor(props: MainButtonProps) {
-    const {
-      postEvent = defaultPostEvent,
-      text,
-      textColor,
-      backgroundColor,
-      isEnabled,
-      isVisible,
-      isLoaderVisible,
-    } = props;
-
-    this.postEvent = postEvent;
-    this.state = new State({
-      backgroundColor,
-      isEnabled,
-      isVisible,
-      isLoaderVisible,
-      text,
-      textColor,
-    }, this.ee);
-  }
-
-  /**
-   * Sends current local state to Telegram application.
-   */
-  private commit(): void {
-    // We should not commit changes until payload is correct. We could
-    // have some invalid values in case, button instance was created
-    // with empty values. Otherwise, an unexpected behaviour could be received.
-    if (this.text === '') {
-      return;
-    }
-
-    this.postEvent('web_app_setup_main_button', {
-      is_visible: this.isVisible,
-      is_active: this.isEnabled,
-      is_progress_visible: this.isLoaderVisible,
-      text: this.text,
-      color: this.backgroundColor,
-      text_color: this.textColor,
-    });
-  }
-
-  private set isEnabled(isEnabled: boolean) {
-    this.setParams({ isEnabled });
-  }
-
-  /**
-   * True if the Main Button is currently enabled.
-   */
-  get isEnabled(): boolean {
-    return this.state.get('isEnabled');
-  }
-
-  private set isLoaderVisible(isLoaderVisible: boolean) {
-    this.setParams({ isLoaderVisible });
-  }
-
-  /**
-   * True if the Main Button loader is currently visible.
-   */
-  get isLoaderVisible(): boolean {
-    return this.state.get('isLoaderVisible');
-  }
-
-  private set isVisible(isVisible: boolean) {
-    this.setParams({ isVisible });
-  }
-
-  /**
-   * True if the Main Button is currently visible.
-   */
-  get isVisible(): boolean {
-    return this.state.get('isVisible');
-  }
-
-  /**
-   * The Main Button background color.
-   */
-  get backgroundColor(): RGB {
-    return this.state.get('backgroundColor');
-  }
-
-  /**
-   * The Main Button text.
-   */
-  get text(): string {
-    return this.state.get('text');
-  }
-
-  /**
-   * The Main Button text color.
-   */
-  get textColor(): RGB {
-    return this.state.get('textColor');
-  }
-
-  /**
-   * Disables the Main Button.
-   */
-  disable(): this {
-    // FIXME: This method does not work on Android. Event "main_button_pressed"
-    //  keeps getting received even in case, button is disabled.
-    //  Issue: https://github.com/Telegram-Mini-Apps/documentation/issues/1
-    this.isEnabled = false;
-    return this;
-  }
-
-  /**
-   * Enables the Main Button.
-   */
-  enable(): this {
-    this.isEnabled = true;
-    return this;
-  }
-
-  /**
-   * Hides the Main Button.
-   */
-  hide(): this {
-    this.isVisible = false;
-    return this;
-  }
-
-  /**
-   * Hides the Main Button loader.
-   */
-  hideLoader(): this {
-    this.isLoaderVisible = false;
-    return this;
-  }
-
-  /**
-   * Adds new event listener.
-   * @param event - event name.
-   * @param listener - event listener.
-   */
-  on: Emitter['on'] = (event, listener) => (
-    // FIXME: Event 'main_button_pressed' is still being received on Android
-    //  even if the main button is disabled.
-    //  Issue: https://github.com/Telegram-Mini-Apps/tma.js/issues/3
-    event === 'click'
-      ? on('main_button_pressed', listener)
-      : this.ee.on(event, listener)
-  );
-
-  /**
-   * Removes event listener.
-   * @param event - event name.
-   * @param listener - event listener.
-   */
-  off: Emitter['off'] = (event, listener) => (
-    event === 'click'
-      ? off('main_button_pressed', listener)
-      : this.ee.off(event, listener)
-  );
-
-  /**
-   * Shows the Main Button. Note that opening the Mini App from the attachment menu hides the
-   * main button until the user interacts with the Mini App interface.
-   */
-  show(): this {
-    this.isVisible = true;
-    return this;
-  }
-
-  /**
-   * A method to show a loading indicator on the Main Button. It is recommended to display
-   * loader if the action tied to the button may take a long time.
-   */
-  showLoader(): this {
-    this.isLoaderVisible = true;
-    return this;
-  }
-
-  /**
-   * Sets new Main Button text. Minimal length for text is 1 symbol, and maximum is 64 symbols.
-   * @param text - new text.
-   */
-  setText(text: string): this {
-    return this.setParams({ text });
-  }
-
-  /**
-   * Sets new Main Button text color.
-   * @param textColor - new text color.
-   */
-  setTextColor(textColor: RGB): this {
-    return this.setParams({ textColor });
-  }
-
-  /**
-   * Updates current Main Button color.
-   * @param backgroundColor - color to set.
-   */
-  setBackgroundColor(backgroundColor: RGB): this {
-    return this.setParams({ backgroundColor });
-  }
-
-  /**
-   * Allows setting multiple Main Button parameters.
-   * @param params - Main Button parameters.
-   */
-  setParams(params: MainButtonParams): this {
-    this.state.set(params);
-    this.commit();
-    return this;
-  }
-}

package/src/main-button/__tests__/MainButton.ts

@@ -1,346 +0,0 @@
-import { describe, expect, it, vi } from 'vitest';
-
-import { MainButton } from '../MainButton';
-
-describe('disable', () => {
-  it('should call "web_app_setup_main_button" method with parameter where "is_active" property equal to false', () => {
-    const postEvent = vi.fn();
-    const mainButton = new MainButton({
-      text: 'Test',
-      textColor: '#000000',
-      backgroundColor: '#ffffff',
-      postEvent,
-      isLoaderVisible: false,
-      isVisible: false,
-      isEnabled: false,
-    });
-
-    mainButton.disable();
-    expect(postEvent).toHaveBeenCalledTimes(1);
-    expect(postEvent.mock.calls[0][0]).toBe('web_app_setup_main_button');
-    expect(postEvent.mock.calls[0][1]).toHaveProperty('is_active', false);
-  });
-
-  it('should emit "change:isEnabled" event with false value', () => {
-    const listener = vi.fn();
-    const postEvent = vi.fn();
-    const mainButton = new MainButton({
-      text: 'Test',
-      textColor: '#000000',
-      backgroundColor: '#ffffff',
-      postEvent,
-      isLoaderVisible: false,
-      isVisible: false,
-      isEnabled: true,
-    });
-
-    mainButton.on('change:isEnabled', listener);
-    mainButton.disable();
-    expect(listener).toHaveBeenCalledTimes(1);
-    expect(listener).toHaveBeenCalledWith(false);
-  });
-});
-
-describe('enable', () => {
-  it('should call "web_app_setup_main_button" method with parameter where "is_active" property equal to true', () => {
-    const postEvent = vi.fn();
-    const mainButton = new MainButton({
-      text: 'Test',
-      textColor: '#000000',
-      backgroundColor: '#ffffff',
-      postEvent,
-      isLoaderVisible: false,
-      isVisible: false,
-      isEnabled: false,
-    });
-
-    mainButton.enable();
-    expect(postEvent).toHaveBeenCalledTimes(1);
-    expect(postEvent.mock.calls[0][0]).toBe('web_app_setup_main_button');
-    expect(postEvent.mock.calls[0][1]).toHaveProperty('is_active', true);
-  });
-
-  it('should emit "change:isEnabled" event with true value', () => {
-    const listener = vi.fn();
-    const mainButton = new MainButton({
-      text: 'Test',
-      textColor: '#000000',
-      backgroundColor: '#ffffff',
-      postEvent: vi.fn(),
-      isLoaderVisible: false,
-      isVisible: false,
-      isEnabled: false,
-    });
-
-    mainButton.on('change:isEnabled', listener);
-    mainButton.enable();
-    expect(listener).toHaveBeenCalledTimes(1);
-    expect(listener).toHaveBeenCalledWith(true);
-  });
-});
-
-describe('hide', () => {
-  it('should call "web_app_setup_main_button" method with parameter where "is_visible" property equal to false', () => {
-    const postEvent = vi.fn();
-    const mainButton = new MainButton({
-      text: 'Test',
-      textColor: '#000000',
-      backgroundColor: '#ffffff',
-      postEvent,
-      isLoaderVisible: false,
-      isVisible: true,
-      isEnabled: false,
-    });
-
-    mainButton.hide();
-    expect(postEvent).toHaveBeenCalledTimes(1);
-    expect(postEvent.mock.calls[0][0]).toBe('web_app_setup_main_button');
-    expect(postEvent.mock.calls[0][1]).toHaveProperty('is_visible', false);
-  });
-
-  it('should emit "change:isVisible" event with false value', () => {
-    const listener = vi.fn();
-    const mainButton = new MainButton({
-      text: 'Test',
-      textColor: '#000000',
-      backgroundColor: '#ffffff',
-      postEvent: vi.fn(),
-      isLoaderVisible: false,
-      isVisible: true,
-      isEnabled: false,
-    });
-
-    mainButton.on('change:isVisible', listener);
-    mainButton.hide();
-    expect(listener).toHaveBeenCalledTimes(1);
-    expect(listener).toHaveBeenCalledWith(false);
-  });
-});
-
-describe('hideLoader', () => {
-  it('should call "web_app_setup_main_button" method with parameter where "is_progress_visible" property equal to false', () => {
-    const postEvent = vi.fn();
-    const mainButton = new MainButton({
-      text: 'Test',
-      textColor: '#000000',
-      backgroundColor: '#ffffff',
-      postEvent,
-      isLoaderVisible: true,
-      isVisible: false,
-      isEnabled: false,
-    });
-
-    mainButton.hideLoader();
-    expect(postEvent).toHaveBeenCalledTimes(1);
-    expect(postEvent.mock.calls[0][0]).toBe('web_app_setup_main_button');
-    expect(postEvent.mock.calls[0][1]).toHaveProperty('is_progress_visible', false);
-  });
-
-  it('should emit "change:isLoaderVisible" event with false value', () => {
-    const listener = vi.fn();
-    const mainButton = new MainButton({
-      text: 'Test',
-      textColor: '#000000',
-      backgroundColor: '#ffffff',
-      postEvent: vi.fn(),
-      isLoaderVisible: true,
-      isVisible: false,
-      isEnabled: false,
-    });
-
-    mainButton.on('change:isLoaderVisible', listener);
-    mainButton.hideLoader();
-    expect(listener).toHaveBeenCalledTimes(1);
-    expect(listener).toHaveBeenCalledWith(false);
-  });
-});
-
-describe('show', () => {
-  it('should call "web_app_setup_main_button" method with parameter where "is_visible" property equal to true', () => {
-    const postEvent = vi.fn();
-    const mainButton = new MainButton({
-      text: 'Test',
-      textColor: '#000000',
-      backgroundColor: '#ffffff',
-      postEvent,
-      isLoaderVisible: false,
-      isVisible: false,
-      isEnabled: false,
-    });
-
-    mainButton.show();
-    expect(postEvent).toHaveBeenCalledTimes(1);
-    expect(postEvent.mock.calls[0][0]).toBe('web_app_setup_main_button');
-    expect(postEvent.mock.calls[0][1]).toHaveProperty('is_visible', true);
-  });
-
-  it('should emit "change:isVisible" event with true value', () => {
-    const listener = vi.fn();
-    const mainButton = new MainButton({
-      text: 'Test',
-      textColor: '#000000',
-      backgroundColor: '#ffffff',
-      postEvent: vi.fn(),
-      isLoaderVisible: false,
-      isVisible: false,
-      isEnabled: false,
-    });
-
-    mainButton.on('change:isVisible', listener);
-    mainButton.show();
-    expect(listener).toHaveBeenCalledTimes(1);
-    expect(listener).toHaveBeenCalledWith(true);
-  });
-});
-
-describe('showLoader', () => {
-  it('should call "web_app_setup_main_button" method with parameter where "is_progress_visible" property equal to true', () => {
-    const postEvent = vi.fn();
-    const mainButton = new MainButton({
-      text: 'Test',
-      textColor: '#000000',
-      backgroundColor: '#ffffff',
-      postEvent,
-      isLoaderVisible: false,
-      isVisible: false,
-      isEnabled: false,
-    });
-
-    mainButton.showLoader();
-    expect(postEvent).toHaveBeenCalledTimes(1);
-    expect(postEvent.mock.calls[0][0]).toBe('web_app_setup_main_button');
-    expect(postEvent.mock.calls[0][1]).toHaveProperty('is_progress_visible', true);
-  });
-
-  it('should emit "change:isLoaderVisible" event with true value', () => {
-    const listener = vi.fn();
-    const mainButton = new MainButton({
-      text: 'Test',
-      textColor: '#000000',
-      backgroundColor: '#ffffff',
-      postEvent: vi.fn(),
-      isLoaderVisible: false,
-      isVisible: false,
-      isEnabled: false,
-    });
-
-    mainButton.on('change:isLoaderVisible', listener);
-    mainButton.showLoader();
-    expect(listener).toHaveBeenCalledTimes(1);
-    expect(listener).toHaveBeenCalledWith(true);
-  });
-});
-
-describe('setText', () => {
-  it('should call "web_app_setup_main_button" method with parameter where "text" property equal to specified value', () => {
-    const postEvent = vi.fn();
-    const mainButton = new MainButton({
-      text: 'Test',
-      textColor: '#000000',
-      backgroundColor: '#ffffff',
-      postEvent,
-      isLoaderVisible: false,
-      isVisible: false,
-      isEnabled: false,
-    });
-
-    mainButton.setText('WOW');
-    expect(postEvent).toHaveBeenCalledTimes(1);
-    expect(postEvent.mock.calls[0][0]).toBe('web_app_setup_main_button');
-    expect(postEvent.mock.calls[0][1]).toHaveProperty('text', 'WOW');
-  });
-
-  it('should emit "change:text" event with specified value', () => {
-    const listener = vi.fn();
-    const mainButton = new MainButton({
-      text: 'Test',
-      textColor: '#000000',
-      backgroundColor: '#ffffff',
-      postEvent: vi.fn(),
-      isLoaderVisible: false,
-      isVisible: false,
-      isEnabled: false,
-    });
-
-    mainButton.on('change:text', listener);
-    mainButton.setText('Punch');
-    expect(listener).toHaveBeenCalledTimes(1);
-    expect(listener).toHaveBeenCalledWith('Punch');
-  });
-});
-
-describe('setTextColor', () => {
-  it('should call "web_app_setup_main_button" method with parameter where "text_color" property equal to specified value', () => {
-    const postEvent = vi.fn();
-    const mainButton = new MainButton({
-      text: 'Test',
-      textColor: '#000000',
-      backgroundColor: '#ffffff',
-      postEvent,
-      isLoaderVisible: false,
-      isVisible: false,
-      isEnabled: false,
-    });
-
-    mainButton.setTextColor('#ffaacc');
-    expect(postEvent).toHaveBeenCalledTimes(1);
-    expect(postEvent.mock.calls[0][0]).toBe('web_app_setup_main_button');
-    expect(postEvent.mock.calls[0][1]).toHaveProperty('text_color', '#ffaacc');
-  });
-
-  it('should emit "change:textColor" event with specified value', () => {
-    const listener = vi.fn();
-    const mainButton = new MainButton({
-      text: 'Test',
-      textColor: '#000000',
-      backgroundColor: '#ffffff',
-      postEvent: vi.fn(),
-      isLoaderVisible: false,
-      isVisible: false,
-      isEnabled: false,
-    });
-
-    mainButton.on('change:textColor', listener);
-    mainButton.setTextColor('#aaaaaa');
-    expect(listener).toHaveBeenCalledTimes(1);
-    expect(listener).toHaveBeenCalledWith('#aaaaaa');
-  });
-});
-
-describe('setColor', () => {
-  it('should call "web_app_setup_main_button" method with parameter where "color" property equal to specified value', () => {
-    const postEvent = vi.fn();
-    const mainButton = new MainButton({
-      text: 'Test',
-      textColor: '#000000',
-      backgroundColor: '#ffffff',
-      postEvent,
-      isLoaderVisible: false,
-      isVisible: false,
-      isEnabled: false,
-    });
-
-    mainButton.setBackgroundColor('#ffaacc');
-    expect(postEvent).toHaveBeenCalledTimes(1);
-    expect(postEvent.mock.calls[0][0]).toBe('web_app_setup_main_button');
-    expect(postEvent.mock.calls[0][1]).toHaveProperty('color', '#ffaacc');
-  });
-
-  it('should emit "change:backgroundColor" event with specified value', () => {
-    const listener = vi.fn();
-    const mainButton = new MainButton({
-      text: 'Test',
-      textColor: '#000000',
-      backgroundColor: '#ffffff',
-      postEvent: vi.fn(),
-      isLoaderVisible: false,
-      isVisible: false,
-      isEnabled: false,
-    });
-
-    mainButton.on('change:backgroundColor', listener);
-    mainButton.setBackgroundColor('#aaaaaa');
-    expect(listener).toHaveBeenCalledTimes(1);
-    expect(listener).toHaveBeenCalledWith('#aaaaaa');
-  });
-});

package/src/main-button/index.ts

@@ -1,2 +0,0 @@
-export * from './MainButton.js';
-export * from './types.js';

package/src/main-button/types.ts

@@ -1,26 +0,0 @@
-import type { PostEvent } from '~/bridge/index.js';
-import type { RGB } from '~/colors/index.js';
-import type { StateEvents } from '~/state/index.js';
-
-export interface MainButtonParams {
-  backgroundColor?: RGB;
-  isEnabled?: boolean;
-  isLoaderVisible?: boolean;
-  isVisible?: boolean;
-  text?: string;
-  textColor?: RGB;
-}
-
-export interface MainButtonProps extends Required<MainButtonParams> {
-  postEvent?: PostEvent;
-}
-
-export type MainButtonState = Required<MainButtonParams>;
-
-export interface MainButtonEvents extends StateEvents<MainButtonState> {
-  click: () => void;
-}
-
-export type MainButtonEventName = keyof MainButtonEvents;
-
-export type MainButtonEventListener<E extends MainButtonEventName> = MainButtonEvents[E];