@wix/design-system
Version:
@wix/design-system
31 lines • 1.96 kB
JavaScript
import React, { forwardRef, useCallback, useImperativeHandle, useState, } from 'react';
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';
export default ComposerButton;
//# sourceMappingURL=ComposerButton.js.map