wix-style-react/dist/src/ColorPicker/ColorPickerConverterRGB.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 _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Input = _interopRequireDefault(require("../Input"));
var _ColorPickerConverterSt = require("./ColorPickerConverter.st.css");
var _ColorPickerConverterViewer = _interopRequireDefault(require("./ColorPickerConverterViewer"));
var _utils = require("./utils");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/ColorPicker/ColorPickerConverterRGB.js";
class ColorPickerConverterRGB extends _react.default.PureComponent {
  constructor() {
    super(...arguments);
    this.state = (0, _utils.getRgbOrEmpty)(this.props.current);
  }
  isInputsEmpty() {
    var {
      r,
      g,
      b
    } = this.state;
    return [r, g, b].every(value => value === '');
  }
  render() {
    var {
      dataHook
    } = this.props;
    return /*#__PURE__*/_react.default.createElement("div", {
      className: _ColorPickerConverterSt.classes.root,
      "data-hook": dataHook,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 27,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: _ColorPickerConverterSt.classes.distribute,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 28,
        columnNumber: 9
      }
    }, /*#__PURE__*/_react.default.createElement(_Input.default, {
      size: "small",
      value: this.state.r,
      onChange: e => this.change('r', e),
      placeholder: "R",
      className: _ColorPickerConverterSt.classes.distributedItem,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 29,
        columnNumber: 11
      }
    }), /*#__PURE__*/_react.default.createElement(_Input.default, {
      size: "small",
      value: this.state.g,
      onChange: e => this.change('g', e),
      placeholder: "G",
      className: _ColorPickerConverterSt.classes.distributedItem,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 36,
        columnNumber: 11
      }
    }), /*#__PURE__*/_react.default.createElement(_Input.default, {
      size: "small",
      value: this.state.b,
      onChange: e => this.change('b', e),
      placeholder: "B",
      className: _ColorPickerConverterSt.classes.distributedItem,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 43,
        columnNumber: 11
      }
    })), /*#__PURE__*/_react.default.createElement(_ColorPickerConverterViewer.default, (0, _extends2.default)({}, this.props, {
      color: this.props.current,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 51,
        columnNumber: 9
      }
    })));
  }
  UNSAFE_componentWillReceiveProps(props) {
    this.setState((0, _utils.getRgbOrEmpty)(props.current));
  }
  change(part, _ref) {
    var {
      target: {
        value
      }
    } = _ref;
    this.setState({
      [part]: value
    }, () => {
      var isMissingData = this.state.r === '' || this.state.g === '' || this.state.b === '';
      var _color = (0, _utils.safeColor)(isMissingData && this.props.allowEmpty ? '' : this.state, this.props.allowEmpty);
      if (!isMissingData || this.isInputsEmpty()) {
        this.props.onChange(_color);
      }
    });
  }
}
exports.default = ColorPickerConverterRGB;
ColorPickerConverterRGB.propTypes = {
  dataHook: _propTypes.default.string,
  current: _propTypes.default.object.isRequired,
  onChange: _propTypes.default.func.isRequired,
  onAdd: _propTypes.default.func
};
//# sourceMappingURL=ColorPickerConverterRGB.js.map