wix-style-react/src/FillButton/FillButton.js

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';
import { withFocusable } from 'wix-ui-core/dist/src/hocs/Focusable/FocusableHOC';
import IconAdd from 'wix-ui-icons-common/Add';
import IconAddSmall from 'wix-ui-icons-common/AddSmall';
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';

const { iconSmall, iconMedium } = dataHooks;

/** FillButton */
class FillButton extends React.PureComponent {
  static displayName = 'FillButton';

  static 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. Check [`<Tooltip/>`](https://www.wix-style-react.com/?activeTab=API&path=%2Fstory%2Fcomponents-api-components--tooltip) API for all available properties. */
    tooltipProps: PropTypes.shape(TooltipCommonProps),
  };

  static defaultProps = {
    iconSize: 'small',
  };

  _getBackground = fill => {
    const { disabled } = this.props;

    if (parseColor(fill) && !disabled) {
      return { backgroundColor: fill };
    }

    if (parseGradient(fill) && !disabled) {
      return {
        backgroundImage: fill,
      };
    }
    return undefined;
  };

  _renderIcon = () => {
    const { iconSize, fill, disabled } = this.props;
    const AddIcon = iconSize === 'small' ? IconAddSmall : IconAdd;
    return (
      <AddIcon
        style={{ color: !disabled && parseContrastColor(fill) }}
        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 (
      <Tooltip
        appendTo="window"
        disabled={disabled}
        {...tooltipProps}
        content={content}
        dataHook={dataHook}
        size="small"
      >
        <Proportion className={classes.proportion}>
          <button
            {...rest}
            className={st(
              classes.root,
              { disabled, fill: !!background },
              className,
            )}
            style={{ ...background }}
            data-hook={dataHooks.button}
            onFocus={focusableOnFocus}
            onBlur={focusableOnBlur}
            disabled={disabled}
          >
            {this._renderIcon()}
          </button>
        </Proportion>
      </Tooltip>
    );
  }
}

export default withFocusable(FillButton);