@wix/design-system/dist/esm/ComposerButton/ComposerButton.js

@wix/design-system

import React, { forwardRef, useCallback, useImperativeHandle, useState, } from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './ComposerButton.st.css.js';
import ButtonCore from '../Button/ButtonCore';
import Tooltip from '../Tooltip';
import { COLORS, SHAPES, dataHooks } from './ComposerButton.constants';
import Text from '../Text';
import { generateDataAttr } from '../utils/generateDataAttr';
const ComposerButton = forwardRef((props, ref) => {
    const buttonRef = React.useRef(null);
    const [isEllipsisActive, setIsEllipsisActive] = useState(false);
    const { dataHook, label, children, shape = SHAPES.square, color = COLORS.standard, ellipsis = true, maxLines = 1, disabled, ...rest } = props;
    useImperativeHandle(ref, () => {
        return {
            focus() {
                buttonRef.current && buttonRef.current.focus();
            },
        };
    }, [buttonRef]);
    const onEllipsisStateChange = useCallback((_isEllipsisActive) => {
        if (isEllipsisActive !== _isEllipsisActive) {
            setIsEllipsisActive(_isEllipsisActive);
        }
    }, [isEllipsisActive]);
    return (React.createElement(Tooltip, { className: st(classes.tooltip), disabled: !isEllipsisActive, content: label, "data-hook": dataHook },
        React.createElement(ButtonCore, { ...rest, ref: buttonRef, className: st(classes.root, { color, disabled }), disabled: disabled, ...generateDataAttr(props, ['shape', 'color']), "data-hook": dataHooks.button },
            React.createElement("div", { className: st(classes.iconContainer, { disabled, shape, color }) }, children),
            React.createElement(Text, { size: "tiny", weight: "thin", className: st(classes.label), disabled: disabled, ellipsis: ellipsis, maxLines: maxLines, tooltipProps: { disabled: true }, onEllipsisStateChange: onEllipsisStateChange }, label))));
});
ComposerButton.displayName = 'ComposerButton';
ComposerButton.propTypes = {
    dataHook: PropTypes.string,
    label: PropTypes.node,
    children: PropTypes.node,
    shape: PropTypes.oneOf(['square', 'round']),
    color: PropTypes.oneOf([
        'standard',
        'blue',
        'cyan',
        'teal',
        'green',
        'purple',
        'violet',
        'pink',
        'orange',
        'red',
    ]),
    ellipsis: PropTypes.bool,
    maxLines: PropTypes.number,
    as: PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.string]),
    disabled: PropTypes.bool,
};
export default ComposerButton;
//# sourceMappingURL=ComposerButton.js.map