@wix/design-system
Version:
@wix/design-system
56 lines • 2.83 kB
JavaScript
import React from 'react';
import { withFocusable } from '../common/Focusable';
import { Add as IconAdd, AddSmall as IconAddSmall, } from '@wix/wix-ui-icons-common';
import { st, classes } from './FillButton.st.css.js';
import Tooltip from '../Tooltip';
import Proportion from '../Proportion';
import { dataHooks } from './constants';
import { parseColor, parseGradient, parseContrastColor } from './utils';
import { IconThemeContext } from '../WixDesignSystemIconThemeProvider/IconThemeContext';
const { iconSmall, iconMedium } = dataHooks;
/** FillButton */
class FillButton extends React.PureComponent {
constructor() {
super(...arguments);
this._getBackground = fill => {
const { disabled } = this.props;
if (parseColor(fill) && !disabled) {
return { backgroundColor: fill };
}
if (parseGradient(fill) && !disabled) {
return {
backgroundImage: fill,
};
}
return undefined;
};
this._renderIcon = (icons = {}) => {
const { iconSize, fill, disabled, icon } = this.props;
const iconStyle = { color: !disabled && parseContrastColor(fill) };
if (icon) {
return React.cloneElement(icon, {
style: iconStyle,
});
}
const AddIcon = iconSize === 'small'
? icons.FillButton?.AddSmall || IconAddSmall
: icons.FillButton?.Add || IconAdd;
return (React.createElement(AddIcon, { style: iconStyle, "data-hook": iconSize === 'small' ? iconSmall : iconMedium }));
};
}
render() {
const { disabled, focusableOnBlur, focusableOnFocus, dataHook, fill, iconSize, tooltipContent, tooltipProps = {}, className, ...rest } = this.props;
const background = this._getBackground(fill);
// For backwards compatibility
const content = tooltipProps.content || tooltipContent;
return (React.createElement(IconThemeContext.Consumer, null, ({ icons = {} }) => (React.createElement(Tooltip, { appendTo: "window", disabled: disabled, ...tooltipProps, content: content, dataHook: dataHook, size: "small" },
React.createElement(Proportion, { className: classes.proportion },
React.createElement("button", { ...rest, className: st(classes.root, { disabled, fill: !!background }, className), style: { ...background }, "data-hook": dataHooks.button, onFocus: focusableOnFocus, onBlur: focusableOnBlur, disabled: disabled, type: "button" }, this._renderIcon(icons)))))));
}
}
FillButton.displayName = 'FillButton';
FillButton.defaultProps = {
iconSize: 'small',
};
export default withFocusable(FillButton);
//# sourceMappingURL=FillButton.js.map