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

wix-style-react

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["fill", "onClick", "selected", "disabled", "dataHook", "aspectRatio", "as", "className"];

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

import React from 'react';
import { ButtonNext } from "wix-ui-core/dist/es/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';

var FillPreview = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(FillPreview, _React$PureComponent);

  var _super = _createSuper(FillPreview);

  function FillPreview() {
    var _this;

    _classCallCheck(this, FillPreview);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));

    _defineProperty(_assertThisInitialized(_this), "_getBackground", function (fill) {
      var disabled = _this.props.disabled;

      if (parseUrl(fill) && !disabled) {
        return {
          backgroundImage: "url('".concat(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(\n        to top left,\n        rgba(255, 255, 255, 1) 0%,\n        rgba(255, 255, 255, 1) calc(50% - 0.8px),\n        rgba(214, 69, 61, 1) 50%,\n        rgba(255, 255, 255, 1) calc(50% + 0.8px),\n        rgba(255, 255, 255, 1) 100%)"
      };
    });

    return _this;
  }

  _createClass(FillPreview, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          fill = _this$props.fill,
          onClick = _this$props.onClick,
          selected = _this$props.selected,
          disabled = _this$props.disabled,
          dataHook = _this$props.dataHook,
          aspectRatio = _this$props.aspectRatio,
          as = _this$props.as,
          className = _this$props.className,
          rest = _objectWithoutProperties(_this$props, _excluded);

      var background = this._getBackground(fill);

      return /*#__PURE__*/React.createElement("div", {
        className: st(classes.root, {
          selected: selected
        }, className)
      }, /*#__PURE__*/React.createElement(Proportion, {
        dataHook: dataHook,
        aspectRatio: aspectRatio
      }, /*#__PURE__*/React.createElement(ButtonNext, _extends({}, rest, {
        as: as,
        "data-selected": selected,
        className: classes.button,
        "data-hook": dataHooks.button,
        style: background,
        onClick: onClick,
        disabled: disabled
      }), !background && /*#__PURE__*/React.isValidElement(fill) && fill)));
    }
  }]);

  return FillPreview;
}(React.PureComponent);

_defineProperty(FillPreview, "displayName", 'FillPreview');

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;