src/button/button.ts - master - GreenBankSdk/button-sdk

src/button/button.ts
58 строк2 KB
22110408
initial commit
28 июл 2025, 19:57
28 июл 2025, 19:57da27b6f
import { IButtonElementProps } from 'button/types';
import { sbbidLogo } from 'common/assets/logo';
import { Logger } from 'common/logger';
import { SBBID_BUTTON_ID } from 'const';
import { filterUndefinedProps } from 'utils/utils';
import styles from './button.module.less';

export class Button {
    private props: Required<IButtonElementProps> & { loading: boolean };
    private button?: HTMLDivElement;
    private readonly buttonWrapper: HTMLDivElement;
    private defaultText: string = 'Войти по СберБизнес ID';

    constructor() {
        this.props = {
            loading: false,
            size: 'lg',
            theme: 'light',
            style: 'general',
            stretched: false,
        };
        this.buttonWrapper = document.createElement('div');
        this.buttonWrapper.id = SBBID_BUTTON_ID;
    }

    public getHtmlElement() {
        return this.buttonWrapper;
    }

    public renderButton(props: IButtonElementProps) {
        Logger.debug(['current props: ', this.props]);
        this.props = {
            ...this.props,
            ...filterUndefinedProps(props),
        };
        Logger.debug(['after change: ', this.props]);

        if (!this.button) {
            this.button = document.createElement('div');
            this.buttonWrapper.appendChild(this.button);
        }

        this.button.innerHTML = this.getSbbIdButtonText();
        this.button.classList.add(String(styles.sbbid_button));

        this.button.setAttribute('data-size', String(this.props.size));
        this.button.setAttribute('data-stretched', String(this.props.stretched));
        this.button.setAttribute('data-style', String(this.props.style));
        this.button.setAttribute('data-theme', String(this.props.theme));
    }

    private getSbbIdButtonText() {
        return `
            ${sbbidLogo(styles.sbbid_button_logo)}
            <span class='${styles.sbbid_button_text}' data-theme='${String(this.props.theme)}' data-style='${String(this.props.style)}'>${this.defaultText}</span>
        `;
    }
}