wix-style-react
Version:
wix-style-react
79 lines • 3.96 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { withFocusable } from '../common/Focusable';
import { Add as IconAdd, AddSmall as IconAddSmall, } from '@wix/wix-ui-icons-common';
import { TooltipCommonProps } from '../common/PropTypes/TooltipCommon';
import { st, classes } from './FillButton.st.css';
import Tooltip from '../Tooltip';
import Proportion from '../Proportion';
import { dataHooks } from './constants';
import { parseColor, parseGradient, parseContrastColor } from './utils';
import { WixStyleReactContext } from '../WixStyleReactProvider/context';
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 = () => {
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' ? IconAddSmall : 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(WixStyleReactContext.Consumer, null, ({ newColorsBranding }) => (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, newColorsBranding }, className), style: { ...background }, "data-hook": dataHooks.button, onFocus: focusableOnFocus, onBlur: focusableOnBlur, disabled: disabled }, this._renderIcon()))))));
}
}
FillButton.displayName = 'FillButton';
FillButton.propTypes = {
/** Applies a data-hook HTML attribute that can be used in the tests */
dataHook: PropTypes.string,
/** Specifies a CSS class name to be appended to the component’s root element */
className: PropTypes.string,
/** Defines a callback handler. Handler is called whenever a button is clicked. */
onClick: PropTypes.func,
/** Controls the size of a plus icon. */
iconSize: PropTypes.oneOf(['small', 'medium']),
/** Specify whether button should be disabled or not */
disabled: PropTypes.bool,
/** Defines button fill value in string format. Accepts HEX colors and gradients. */
fill: PropTypes.string,
/** Specifies a message to display on button hover. */
tooltipContent: PropTypes.node,
/** Allows to pass tooltip common props.
* @linkTypeTo components-overlays--tooltip
* @setTypeName TooltipCommonProps
*/
tooltipProps: PropTypes.shape(TooltipCommonProps),
/** Overrides a default plus icon to any WSR icon. Do not work together with `iconSize`. Icon size has to be controlled manually.*/
icon: PropTypes.node,
};
FillButton.defaultProps = {
iconSize: 'small',
};
export default withFocusable(FillButton);
//# sourceMappingURL=FillButton.js.map