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

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Proportion = _interopRequireDefault(require("../Proportion"));
var _utils = require("./utils");
var _constants = require("./constants");
var _FillPreviewSt = require("./FillPreview.st.css");
var _ButtonCore = _interopRequireDefault(require("../Button/ButtonCore"));
var _excluded = ["fill", "onClick", "selected", "disabled", "dataHook", "aspectRatio", "as", "className"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/FillPreview/FillPreview.js";
class FillPreview extends _react.default.PureComponent {
  constructor() {
    super(...arguments);
    this._getBackground = fill => {
      var {
        disabled
      } = this.props;
      if ((0, _utils.parseUrl)(fill) && !disabled) {
        return {
          backgroundImage: "url('".concat(fill, "')"),
          backgroundSize: 'cover',
          backgroundPosition: 'center center',
          backgroundRepeat: 'no-repeat'
        };
      }
      if ((0, _utils.parseColor)(fill) && !disabled) {
        return {
          backgroundColor: fill
        };
      }
      if ((0, _utils.parseGradient)(fill) && !disabled) {
        return {
          backgroundImage: fill
        };
      }
      if ((0, _utils.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%)"
      };
    };
  }
  render() {
    var _this$props = this.props,
      {
        fill,
        onClick,
        selected,
        disabled,
        dataHook,
        aspectRatio,
        as,
        className
      } = _this$props,
      rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
    var background = this._getBackground(fill);
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _FillPreviewSt.st)(_FillPreviewSt.classes.root, {
        selected
      }, className),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 69,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement(_Proportion.default, {
      dataHook: dataHook,
      aspectRatio: aspectRatio,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 70,
        columnNumber: 9
      }
    }, /*#__PURE__*/_react.default.createElement(_ButtonCore.default, (0, _extends2.default)({}, rest, {
      as: as,
      "data-selected": selected,
      className: _FillPreviewSt.classes.button,
      "data-hook": _constants.dataHooks.button,
      style: background,
      onClick: onClick,
      disabled: disabled,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 71,
        columnNumber: 11
      }
    }), !background && /*#__PURE__*/_react.default.isValidElement(fill) && fill)));
  }
}
FillPreview.displayName = 'FillPreview';
FillPreview.propTypes = {
  /** Applies a data-hook HTML attribute that can be used in the tests */
  dataHook: _propTypes.default.string,
  /** Specify a CSS class name to be appended to the component’s root element */
  className: _propTypes.default.string,
  /** Render fill preview as another component or DOM tag (i.e. anchor element <a/>) */
  as: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.string]),
  /** Indicates that element can be focused and where it participates in sequential keyboard navigation. */
  tabIndex: _propTypes.default.number,
  /** Specify a color, a gradient, image URL or SVG to be rendered as a preview content */
  fill: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
  /** Specifies whether preview is selected or not. Selected item receives an outline border style. */
  selected: _propTypes.default.bool,
  /** Defines a callback handler. Handler is called whenever a preview is clicked.  */
  onClick: _propTypes.default.func,
  /** Specify whether preview should be disabled or not */
  disabled: _propTypes.default.bool,
  /** Control elements aspect ratio value  */
  aspectRatio: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
};
FillPreview.defaultProps = {
  selected: false
};
var _default = exports.default = FillPreview;
//# sourceMappingURL=FillPreview.js.map