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

wix-style-react

import React from 'react';

import { ButtonNext } from 'wix-ui-core/dist/src/components/button-next';
import PropTypes from 'prop-types';
import Proportion from '../Proportion';

import { parseColor, parseGradient, parseUrl, parseElement } from './utils';
import { dataHooks } from './constants';
import { st, classes } from './FillPreview.st.css';

class FillPreview extends React.PureComponent {
  static displayName = 'FillPreview';

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

    if (parseUrl(fill) && !disabled) {
      return {
        backgroundImage: `url('${fill}')`,
        backgroundSize: 'cover',
        backgroundPosition: 'center center',
        backgroundRepeat: 'no-repeat',
      };
    }

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

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

    if (parseElement(fill) && !disabled) {
      return;
    }

    if (disabled) {
      return;
    }

    return {
      background: `linear-gradient(
        to top left,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 1) calc(50% - 0.8px),
        rgba(214, 69, 61, 1) 50%,
        rgba(255, 255, 255, 1) calc(50% + 0.8px),
        rgba(255, 255, 255, 1) 100%)`,
    };
  };

  render() {
    const {
      fill,
      onClick,
      selected,
      disabled,
      dataHook,
      aspectRatio,
      as,
      className,
      ...rest
    } = this.props;
    const background = this._getBackground(fill);
    return (
      <div className={st(classes.root, { selected }, className)}>
        <Proportion dataHook={dataHook} aspectRatio={aspectRatio}>
          <ButtonNext
            {...rest}
            as={as}
            data-selected={selected}
            className={classes.button}
            data-hook={dataHooks.button}
            style={background}
            onClick={onClick}
            disabled={disabled}
          >
            {!background && React.isValidElement(fill) && fill}
          </ButtonNext>
        </Proportion>
      </div>
    );
  }
}

FillPreview.propTypes = {
  /** Applies a data-hook HTML attribute that can be used in the tests */
  dataHook: PropTypes.string,

  /** Specify a CSS class name to be appended to the component’s root element */
  className: PropTypes.string,

  /** Render fill preview as another component or DOM tag (i.e. anchor element <a/>) */
  as: PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.string]),

  /** Indicates that element can be focused and where it participates in sequential keyboard navigation. */
  tabIndex: PropTypes.number,

  /** Specify a color, a gradient, image URL or SVG to be rendered as a preview content */
  fill: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),

  /** Specifies whether preview is selected or not. Selected item receives an outline border style. */
  selected: PropTypes.bool,

  /** Defines a callback handler. Handler is called whenever a preview is clicked.  */
  onClick: PropTypes.func,

  /** Specify whether preview should be disabled or not */
  disabled: PropTypes.bool,

  /** Control elements aspect ratio value  */
  aspectRatio: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};

FillPreview.defaultProps = {
  selected: false,
};

export default FillPreview;