ultra-design
Version:
299 lines (263 loc) • 12.1 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var _pt = require('prop-types');
var clsx = require('clsx');
var React = require('react');
var button = require('../button/button.js');
var input = require('../input/input.js');
var popover = require('../popover/popover.js');
var mergeProps = require('../utils/mergeProps.js');
var withStyle = require('../utils/withStyle.js');
var colorPickerStyles = require('./color-picker-styles.js');
var colorTransform = require('./color-transform.js');
var moveContainer = require('./move-container.js');
var utils = require('./utils.js');
var jsxRuntime = require('@emotion/react/jsx-runtime');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
var _pt__default = /*#__PURE__*/_interopDefaultLegacy(_pt);
var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
var _excluded = ["children", "className", "layerClassName", "value", "colorFormat", "onChange", "showOpacity"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var defaultProps = {
value: '#13c2c2',
colorFormat: 'HEX'
};
var basicColors = ['#d0021b', '#f5a623', '#f8e71c', '#8b572a', '#7ed321', '#417505', '#bd10e0', '#9013fe', '#4a90e2', '#50e3c2', '#b8e986', '#000000', '#4a4a4a', '#9b9b9b', '#ffffff'];
var WIDTH = 200;
var HEIGHT = 150;
var ColorPicker = function ColorPicker(p) {
var props = mergeProps.useMergeProps(defaultProps, p);
var children = props.children,
className = props.className,
layerClassName = props.layerClassName,
value = props.value,
colorFormat = props.colorFormat,
onChange = props.onChange,
showOpacity = props.showOpacity,
rest = _objectWithoutProperties__default["default"](props, _excluded);
var _useState = React.useState(colorTransform.transformColor('hex', value)),
_useState2 = _slicedToArray__default["default"](_useState, 2),
selfColor = _useState2[0],
setSelfColor = _useState2[1];
var saturationPosition = React.useMemo(function () {
return {
x: selfColor.hsv.s / 100 * WIDTH,
y: (100 - selfColor.hsv.v) / 100 * HEIGHT
};
}, [selfColor.hsv.s, selfColor.hsv.v]);
var huePosition = React.useMemo(function () {
return {
x: selfColor.hsv.h / 360 * WIDTH
};
}, [selfColor.hsv.h]);
var opacityPosition = React.useMemo(function () {
var _selfColor$hsv$a;
return {
x: ((_selfColor$hsv$a = selfColor.hsv.a) !== null && _selfColor$hsv$a !== void 0 ? _selfColor$hsv$a : 1) * WIDTH
};
}, [selfColor.hsv.a]);
var rgb = React.useMemo(function () {
return "".concat(selfColor.rgb.r, ", ").concat(selfColor.rgb.g, ", ").concat(selfColor.rgb.b);
}, [selfColor.rgb]);
var rgba = React.useMemo(function () {
var _selfColor$rgb$a$toFi, _selfColor$rgb$a;
return "".concat(rgb, ", ").concat((_selfColor$rgb$a$toFi = (_selfColor$rgb$a = selfColor.rgb.a) === null || _selfColor$rgb$a === void 0 ? void 0 : _selfColor$rgb$a.toFixed(3)) !== null && _selfColor$rgb$a$toFi !== void 0 ? _selfColor$rgb$a$toFi : 1);
}, [rgb, selfColor.rgb]);
var getValueRGB = React.useMemo(function () {
var _selfColor$rgb$a2;
return {
value: "".concat(selfColor.rgb.r, ", ").concat(selfColor.rgb.g, ", ").concat(selfColor.rgb.b).concat(showOpacity && selfColor.rgb.a !== undefined ? ", ".concat((_selfColor$rgb$a2 = selfColor.rgb.a) === null || _selfColor$rgb$a2 === void 0 ? void 0 : _selfColor$rgb$a2.toFixed(3)) : ''),
inputted: false
};
}, [selfColor.rgb, showOpacity]);
var _useState3 = React.useState(getValueRGB),
_useState4 = _slicedToArray__default["default"](_useState3, 2),
valueRGB = _useState4[0],
setValueRGB = _useState4[1];
var getValueHEX = React.useCallback(function () {
return {
value: selfColor.hex,
inputted: false
};
}, [selfColor]);
var _useState5 = React.useState(getValueHEX),
_useState6 = _slicedToArray__default["default"](_useState5, 2),
valueHEX = _useState6[0],
setValueHEX = _useState6[1];
React.useEffect(function () {
if (!valueHEX.inputted) {
setValueHEX(getValueHEX);
}
}, [valueHEX.inputted, getValueHEX]);
React.useEffect(function () {
if (!valueRGB.inputted) {
setValueRGB(getValueRGB);
}
}, [valueRGB.inputted, getValueRGB]);
var changeHEX = function changeHEX(value) {
if (utils.validHex(value)) {
setSelfColor(colorTransform.transformColor('hex', value));
setValueHEX(_objectSpread(_objectSpread({}, valueHEX), {}, {
value: value
}));
}
};
var changeRGB = function changeRGB(v) {
var value = v.match(/\d+(?:\.\d+)?/g);
if (value && (value.length === 3 || showOpacity && value.length === 4)) {
var _rgb = colorTransform.toRgb(value);
setSelfColor(colorTransform.transformColor('rgb', _rgb));
}
setValueRGB(_objectSpread(_objectSpread({}, valueRGB), {}, {
value: v
}));
};
var onSaturationChange = function onSaturationChange(_ref) {
var x = _ref.x,
y = _ref.y;
var newHsv = _objectSpread(_objectSpread({}, selfColor.hsv), {}, {
s: x / WIDTH * 100,
v: 100 - y / HEIGHT * 100
});
var newColor = colorTransform.transformColor('hsv', newHsv);
setSelfColor(newColor);
};
var onHUEChange = function onHUEChange(_ref2) {
var x = _ref2.x;
var newHsv = _objectSpread(_objectSpread({}, selfColor.hsv), {}, {
h: x / WIDTH * 360
});
var newColor = colorTransform.transformColor('hsv', newHsv);
setSelfColor(newColor);
};
var onOpacityChange = function onOpacityChange(_ref3) {
var x = _ref3.x;
var newHsv = _objectSpread(_objectSpread({}, selfColor.hsv), {}, {
a: x / WIDTH
});
var newColor = colorTransform.transformColor('hsv', newHsv);
setSelfColor(newColor);
};
React.useEffect(function () {
var color = colorFormat === 'RGB' ? "rgb".concat(showOpacity ? 'a' : '', "(").concat(valueRGB.value, ")") : selfColor.hex;
onChange === null || onChange === void 0 ? void 0 : onChange(color);
}, [selfColor, valueRGB.value, colorFormat, showOpacity]);
React.useEffect(function () {
if (value === undefined) return;
setSelfColor(colorTransform.transformColor('hex', value));
}, [value]);
return jsxRuntime.jsx(popover["default"], {
layerClassName: layerClassName,
content: jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
className: clsx__default["default"]('ultra-color-picker', className)
}, rest), {}, {
css: colorPickerStyles.colorPickerStyles(props),
children: [jsxRuntime.jsx("div", {
className: "ultra-color-picker__basic_color",
children: basicColors.map(function (color) {
return jsxRuntime.jsx("div", {
className: "ultra-color-picker__basic_color-item",
style: {
backgroundColor: color
},
onClick: function onClick() {
return setSelfColor(colorTransform.transformColor('hex', color));
}
}, color);
})
}), jsxRuntime.jsx(moveContainer["default"], {
onChange: onSaturationChange,
className: "ultra-color-picker_saturation",
style: {
backgroundColor: "hsl(".concat(colorTransform.transformColor('hsv', selfColor.hsv).hsv.h, ", 100%, 50%)")
},
children: jsxRuntime.jsx("div", {
className: "ultra-color-picker_saturation_cursor",
style: {
left: saturationPosition.x,
top: saturationPosition.y,
backgroundColor: selfColor.hex
}
})
}), jsxRuntime.jsx(moveContainer["default"], {
onChange: onHUEChange,
className: "ultra-color-picker_hue",
children: jsxRuntime.jsx("div", {
className: "ultra-color-picker_hue_cursor",
style: {
left: huePosition.x,
backgroundColor: "hsl(".concat(colorTransform.transformColor('hsv', selfColor.hsv).hsv.h, ", 100%, 50%)")
}
})
}), showOpacity && jsxRuntime.jsx(moveContainer["default"], {
onChange: onOpacityChange,
className: "ultra-color-picker_opacity",
style: {
background: "linear-gradient(to right, rgba(".concat(rgb, ", 0), rgba(").concat(rgb, ", 1)) top left / auto auto,\n conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) top left / 12px 12px\n repeat")
},
children: jsxRuntime.jsx("div", {
className: "ultra-color-picker_opacity_cursor",
style: {
left: opacityPosition.x,
background: "linear-gradient(to right, rgba(".concat(rgba, "), rgba(").concat(rgba, ")) top left / auto auto,\n conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) ").concat(-opacityPosition - 2, "px 2px / 12px 12px\n repeat")
}
})
}), jsxRuntime.jsxs("div", {
className: "ultra-color-picker_input",
children: [jsxRuntime.jsx(input["default"], {
label: "HEX",
value: valueHEX.value,
onChange: changeHEX,
onFocus: function onFocus() {
return setValueHEX(_objectSpread(_objectSpread({}, valueHEX), {}, {
inputted: true
}));
},
onBlur: function onBlur() {
return setValueHEX(_objectSpread(_objectSpread({}, valueHEX), {}, {
inputted: false
}));
}
}), jsxRuntime.jsx(input["default"], {
label: "RGB",
value: valueRGB.value,
onFocus: function onFocus() {
return setValueRGB(_objectSpread(_objectSpread({}, valueRGB), {}, {
inputted: true
}));
},
onChange: changeRGB,
onBlur: function onBlur() {
return setValueRGB(_objectSpread(_objectSpread({}, valueRGB), {}, {
inputted: false
}));
}
})]
})]
})),
children: children || jsxRuntime.jsx(button["default"], {
style: {
backgroundColor: selfColor.hex
}
})
});
};
ColorPicker.propTypes = {
value: _pt__default["default"].string,
onChange: _pt__default["default"].func,
colorFormat: _pt__default["default"].oneOf(['HEX', 'RGB']),
showOpacity: _pt__default["default"].bool,
children: _pt__default["default"].node,
className: _pt__default["default"].string,
layerClassName: _pt__default["default"].string
};
ColorPicker.displayName = 'UltraColorPicker';
var ColorPicker$1 = withStyle["default"](ColorPicker);
exports["default"] = ColorPicker$1;