packages/sdds-cs/src/components/Button/Button.tsx - dev - sdds/plasma

packages/sdds-cs/src/components/Button/Button.tsx

41 строка2 KB

Krivonos Aleksandr

feat: add MakePolymorphic to Button

16 апр 2026, 14:02

16 апр 2026, 14:0263556b8

import React, { ComponentProps, useCallback, MouseEvent, forwardRef } from 'react';
import { buttonConfig, component, mergeConfig, buttonClasses, buttonTokens } from '@salutejs/plasma-new-hope/emotion';
import { makePolymorphic } from '@salutejs/plasma-new-hope';
import styled from '@emotion/styled';

import { config } from './Button.config';

const mergedConfig = mergeConfig(buttonConfig, config);
const ButtonComponent = component(mergedConfig);

export type ButtonProps = ComponentProps<typeof ButtonComponent>;

// INFO: Данное поведение запрошено продуктом/командой `sdds-cs`
const StyledButton = styled(ButtonComponent)`
    &&.${String(buttonClasses.buttonLoading)} {
        color: var(${buttonTokens.buttonColorActive}, var(${buttonTokens.buttonColor}));
        background: var(${buttonTokens.buttonBackgroundColorActive}, var(${buttonTokens.buttonBackgroundColor}));

        pointer-events: none;
    }
`;

/**
 * Кнопка.
 */
export const Button = makePolymorphic(
    forwardRef<Omit<HTMLButtonElement, 'value'>, ButtonProps>(({ onClick, isLoading, value, ...props }, ref) => {
        const handleClick = useCallback(
            (event: MouseEvent<HTMLButtonElement>) => {
                if (!isLoading) {
                    onClick?.(event);
                }
            },
            [isLoading, onClick],
        );

        // @ts-ignore
        return <StyledButton value={value} ref={ref} onClick={handleClick} isLoading={isLoading} {...props} />;
    }),
    'button',
);