@wix/design-system/dist/cjs/ColorInput/ColorInput.js

@wix/design-system

"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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _Input = _interopRequireDefault(require("../Input"));
var _Hash = require("./components/Hash");
var _ColorViewer = require("./components/ColorViewer");
var _hexHelpers = require("./hex-helpers");
var _Box = _interopRequireDefault(require("../Box"));
var _excluded = ["placeholder", "size"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/ColorInput/ColorInput.jsx";
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var ColorInput = /*#__PURE__*/function (_React$Component) {
  function ColorInput(props) {
    var _this;
    (0, _classCallCheck2["default"])(this, ColorInput);
    _this = _callSuper(this, ColorInput, [props]);
    _this._renderPrefix = function () {
      var _this$props = _this.props,
        disabled = _this$props.disabled,
        size = _this$props.size;
      var _this$state = _this.state,
        active = _this$state.active,
        value = _this$state.value;
      var hash = /*#__PURE__*/_react["default"].createElement(_Input["default"].Affix, {
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 43,
          columnNumber: 7
        }
      }, /*#__PURE__*/_react["default"].createElement(_Hash.Hash, {
        disabled: disabled,
        size: size,
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 44,
          columnNumber: 9
        }
      }));
      return active || value ? hash : undefined;
    };
    _this.onTabOut = function (keyboardEvent) {
      if (!_this.input) {
        return;
      }
      var input = _this.input.input;
      var target = keyboardEvent.target;
      if (input === target) {
        return;
      }
      _this.cancel();
    };
    _this._renderSuffix = function () {
      var _this$state2 = _this.state,
        value = _this$state2.value,
        active = _this$state2.active;
      var _this$props2 = _this.props,
        size = _this$props2.size,
        popoverPlacement = _this$props2.popoverPlacement,
        popoverAppendTo = _this$props2.popoverAppendTo,
        disabled = _this$props2.disabled,
        colorPickerChildren = _this$props2.colorPickerChildren,
        onAddColor = _this$props2.onAddColor,
        addTooltipContent = _this$props2.addTooltipContent,
        placeholder = _this$props2.placeholder,
        popoverProps = _this$props2.popoverProps;
      return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
        verticalAlign: "middle",
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 79,
          columnNumber: 7
        }
      }, /*#__PURE__*/_react["default"].createElement(_ColorViewer.ColorViewer, {
        value: value,
        active: active,
        disabled: disabled,
        size: size,
        placement: popoverPlacement,
        appendTo: popoverAppendTo,
        onClick: _this.click,
        onChange: _this._onPickerChange,
        onCancel: _this.cancel,
        onConfirm: _this.confirm,
        onClickOutside: _this.confirm,
        children: colorPickerChildren,
        onAddColor: onAddColor,
        addTooltipContent: addTooltipContent,
        placeholder: placeholder,
        onTabOut: _this.onTabOut,
        popoverProps: popoverProps,
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 80,
          columnNumber: 9
        }
      }));
    };
    _this._onChange = function (evt) {
      var onChange = _this.props.onChange;
      var value = (0, _hexHelpers.normalizeHexInput)(evt.target.value);
      _this.setState({
        value: value
      }, function () {
        return onChange(value);
      });
    };
    _this._onPickerChange = function (value) {
      var onChange = _this.props.onChange;
      _this.setState({
        active: true,
        value: value
      }, function () {
        return onChange(value);
      });
    };
    _this._onFocus = function () {
      return _this.setState({
        active: true
      });
    };
    _this._keyDown = function (e) {
      e.stopPropagation();
      e.key === 'Enter' && _this.confirm();
      e.key === 'Escape' && _this.cancel();
    };
    /**
     * clicks the input element
     * @returns {Void}
     */
    _this.click = function () {
      _this.input.focus();
      _this.setState({
        active: true
      });
    };
    /**
     * sets the picked color
     * @returns {Void}
     */
    _this.confirm = function () {
      var _this$props3 = _this.props,
        onConfirm = _this$props3.onConfirm,
        onChange = _this$props3.onChange;
      var value = (0, _hexHelpers.validateHex)(_this.state.value);
      _this.setState({
        active: false,
        value: value,
        previous: value
      }, function () {
        onConfirm(value);
        onChange(value);
      });
    };
    /**
     * sets the previous color
     * @returns {Void}
     */
    _this.cancel = function () {
      var _this$props4 = _this.props,
        onCancel = _this$props4.onCancel,
        onChange = _this$props4.onChange;
      var previous = _this.state.previous;
      _this.setState({
        active: false,
        value: previous
      }, function () {
        onCancel(previous);
        onChange(previous);
      });
    };
    _this.state = {
      active: false,
      previous: props.value,
      value: ''
    };
    return _this;
  }
  (0, _inherits2["default"])(ColorInput, _React$Component);
  return (0, _createClass2["default"])(ColorInput, [{
    key: "render",
    value: function render() {
      var _this2 = this;
      var _this$props5 = this.props,
        placeholder = _this$props5.placeholder,
        size = _this$props5.size,
        rest = (0, _objectWithoutProperties2["default"])(_this$props5, _excluded);
      var _this$state3 = this.state,
        active = _this$state3.active,
        value = _this$state3.value;
      return /*#__PURE__*/_react["default"].createElement(_Input["default"], (0, _extends2["default"])({}, rest, {
        ref: function ref(input) {
          _this2.input = input;
        },
        placeholder: active ? '' : placeholder,
        size: size,
        onKeyDown: this._keyDown,
        onChange: this._onChange,
        onFocus: this._onFocus,
        onInputClicked: this.click,
        value: value.replace('#', ''),
        prefix: this._renderPrefix(),
        suffix: this._renderSuffix(),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 160,
          columnNumber: 7
        }
      }));
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(props, state) {
      if (!state.active && props.value !== state.value) {
        return {
          value: (0, _hexHelpers.normalizeHexInput)(props.value)
        };
      }
      return {};
    }
  }]);
}(_react["default"].Component);
ColorInput.displayName = 'ColorInput';
ColorInput.defaultProps = {
  placeholder: '',
  size: 'medium',
  onChange: function onChange() {},
  onConfirm: function onConfirm() {},
  onCancel: function onCancel() {},
  popoverProps: {},
  value: ''
};
var _default = exports["default"] = ColorInput;