@wix/design-system
Version:
@wix/design-system
215 lines (214 loc) • 8.69 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
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 _Box = _interopRequireDefault(require("../Box"));
var _SegmentedToggle = _interopRequireDefault(require("../SegmentedToggle"));
var _ToggleButton = _interopRequireDefault(require("../ToggleButton"));
var _ColorPickerConverterSt = require("./ColorPickerConverter.st.css.js");
var _ColorPickerConverterHex = _interopRequireDefault(require("./ColorPickerConverterHex"));
var _ColorPickerConverterHsb = _interopRequireDefault(require("./ColorPickerConverterHsb"));
var _ColorPickerConverterRGB = _interopRequireDefault(require("./ColorPickerConverterRGB"));
var _utils = require("./utils");
var _ColorPickerEyeDropper = require("./ColorPickerEyeDropper");
var _constants = require("./constants");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/ColorPicker/ColorPickerConverter.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 HEX = 'HEX';
var RGB = 'RGB';
var HSB = 'HSB';
var ColorPickerConverter = exports["default"] = /*#__PURE__*/function (_React$PureComponent) {
function ColorPickerConverter(props) {
var _this;
(0, _classCallCheck2["default"])(this, ColorPickerConverter);
_this = _callSuper(this, ColorPickerConverter, [props]);
_this.state = {
activeConverter: HEX
};
_this.changeConverter = function (evt, value) {
_this.setState({
activeConverter: value
});
};
return _this;
}
(0, _inherits2["default"])(ColorPickerConverter, _React$PureComponent);
return (0, _createClass2["default"])(ColorPickerConverter, [{
key: "render",
value: function render() {
var _this2 = this;
var _this$props = this.props,
dataHook = _this$props.dataHook,
current = _this$props.current,
showConverter = _this$props.showConverter,
showInput = _this$props.showInput,
addTooltipContent = _this$props.addTooltipContent,
allowEmpty = _this$props.allowEmpty,
hexPlaceholder = _this$props.hexPlaceholder,
showEyeDropper = _this$props.showEyeDropper,
eyeDropperLabel = _this$props.eyeDropperLabel;
var dataHooks = {
hex: 'color-picker-hex-input',
rgb: 'color-picker-rgb-inputs',
hsb: 'color-picker-hsb-inputs'
};
var activeConverter = this.state.activeConverter;
if (!showConverter && !showInput) {
return null;
}
if (!showConverter) {
return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
direction: "horizontal",
gap: "small",
align: "center",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 51,
columnNumber: 9
}
}, showEyeDropper && /*#__PURE__*/_react["default"].createElement(_ColorPickerEyeDropper.EyeDropper, {
eyeDropperLabel: eyeDropperLabel,
allowEmpty: allowEmpty,
onChange: this.props.onChange,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 13
}
}), /*#__PURE__*/_react["default"].createElement(_ColorPickerConverterHex["default"], {
placeholder: hexPlaceholder,
dataHook: dataHooks.hex,
current: current,
onChange: this.props.onChange,
onEnter: this.props.onEnter,
onAdd: this.props.onAdd,
addTooltipContent: addTooltipContent,
allowEmpty: allowEmpty,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 11
}
}));
}
return /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _ColorPickerConverterSt.st)(_ColorPickerConverterSt.classes.root),
"data-hook": dataHook,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _ColorPickerConverterSt.st)(_ColorPickerConverterSt.classes.colorModelSwitcher),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 75,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement(_SegmentedToggle["default"], {
selected: activeConverter,
onClick: function onClick(evt, value) {
return _this2.changeConverter(evt, value);
},
size: "medium",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 11
}
}, /*#__PURE__*/_react["default"].createElement(_SegmentedToggle["default"].Button, {
value: HEX,
dataHook: _constants.DataHooks.hexConverterBtn,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 13
}
}, HEX), /*#__PURE__*/_react["default"].createElement(_SegmentedToggle["default"].Button, {
value: RGB,
dataHook: _constants.DataHooks.rgbConverterBtn,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 13
}
}, RGB), /*#__PURE__*/_react["default"].createElement(_SegmentedToggle["default"].Button, {
value: HSB,
dataHook: _constants.DataHooks.hsbConverterBtn,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 13
}
}, HSB)), showEyeDropper && /*#__PURE__*/_react["default"].createElement(_ColorPickerEyeDropper.EyeDropper, {
eyeDropperLabel: eyeDropperLabel,
allowEmpty: allowEmpty,
onChange: this.props.onChange,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 101,
columnNumber: 13
}
})), activeConverter === HEX && /*#__PURE__*/_react["default"].createElement(_ColorPickerConverterHex["default"], {
placeholder: hexPlaceholder,
dataHook: dataHooks.hex,
current: current,
onChange: this.props.onChange,
onAdd: this.props.onAdd,
onEnter: this.props.onEnter,
addTooltipContent: addTooltipContent,
allowEmpty: allowEmpty,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 110,
columnNumber: 11
}
}), activeConverter === RGB && /*#__PURE__*/_react["default"].createElement(_ColorPickerConverterRGB["default"], {
dataHook: dataHooks.rgb,
current: current,
onChange: this.props.onChange,
onAdd: this.props.onAdd,
addTooltipContent: addTooltipContent,
allowEmpty: allowEmpty,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 122,
columnNumber: 11
}
}), activeConverter === HSB && /*#__PURE__*/_react["default"].createElement(_ColorPickerConverterHsb["default"], {
dataHook: dataHooks.hsb,
current: current,
onChange: this.props.onChange,
onAdd: this.props.onAdd,
addTooltipContent: addTooltipContent,
allowEmpty: allowEmpty,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 132,
columnNumber: 11
}
}));
}
}]);
}(_react["default"].PureComponent);