@bigbinary/neetoui
Version:
neetoUI drives the experience at all neeto products
320 lines (313 loc) • 14.5 kB
JavaScript
import _extends from '@babel/runtime/helpers/extends';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _regeneratorRuntime from '@babel/runtime/regenerator';
import React__default, { useMemo, useRef, useCallback, useEffect, useState } from 'react';
import classnames from 'classnames';
import { ColorPicker as ColorPicker$1, Down } from '@bigbinary/neeto-icons';
import { HexColorInput, HexAlphaColorPicker, HexColorPicker } from 'react-colorful';
import { useTranslation } from 'react-i18next';
import { t as tinycolor, u as useRecentlyUsedColors } from './useRecentlyUsedColors-CqUfqfck.js';
import Button from './Button.js';
import Dropdown from './Dropdown.js';
import Typography from './Typography.js';
import { g as getLocale, n as noop } from './index-Dxaw6gl9.js';
import '@babel/runtime/helpers/objectWithoutProperties';
import 'react-router-dom';
import './Spinner.js';
import './Tooltip.js';
import '@tippyjs/react';
import 'tippy.js';
import 'ramda';
import '@bigbinary/neeto-cist';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import 'qs';
import './en-CIkXIYyl.js';
import 'dayjs';
import 'dayjs/plugin/localeData';
import 'dayjs/plugin/utc';
import 'dayjs/plugin/weekday';
import 'dayjs/plugin/weekOfYear';
const s=()=>"undefined"!=typeof window&&"EyeDropper"in window,i=()=>Promise.reject(new Error("Unsupported browser.")),c=()=>{const r=useRef(),[i,c]=useState(!1);useEffect(()=>(r.current=!0,c(s()),()=>{r.current=!1;}),[]);const u=useCallback(()=>i,[i]);return [r,u]},u=r=>{const o=(r=>s()&&new EyeDropper(r))(r);var n;return (n=o)?EyeDropper.prototype.open.bind(n):i},p=e=>{const s=useMemo(()=>u(e),[e]),[i,p]=c(),a=useRef(),f=useCallback(()=>{void 0!==a.current&&a.current.abort();},[a]),d=useCallback(function(r){void 0===r&&(r={});try{f();const{signal:o,...n}=r,t=new AbortController;a.current=t;const e=void 0!==o?(r=>{const o=new AbortController,n=()=>{o.abort();for(const o of r)o.removeEventListener("abort",n);};for(const o of r){if(o.aborted){n();break}o.addEventListener("abort",n);}return o.signal})([o,t.signal]):t.signal;return Promise.resolve(function(r,o){try{var t=Promise.resolve(s({...n,signal:e}));}catch(r){return o(r)}return t&&t.then?t.then(void 0,o):t}(0,function(r){throw i.current||(r.canceled=!0),r}))}catch(r){return Promise.reject(r)}},[a,i,f,s]);return useEffect(()=>f,[f]),{open:d,close:f,isSupported:p}};
var useEyeDropper = p
var DEFAULT_PALETTE_COLORS = [{
hex: "#FFFFFF"
}, {
hex: "#D6D6D6"
}, {
hex: "#0A0E13"
}, {
hex: "#FECE1E"
}, {
hex: "#F32E48"
}, {
hex: "#02C39A"
}, {
hex: "#2A79C4"
}, {
hex: "#B3E5FC"
}, {
hex: "#C3C6F9"
}, {
hex: "#8064CE"
}, {
hex: "#FE861E"
}, {
hex: "#FF7DC9"
}, {
hex: "#028090"
}, {
hex: "#095482"
}];
var Palette = function Palette(_ref) {
var color = _ref.color,
_ref$colorList = _ref.colorList,
colorList = _ref$colorList === void 0 ? DEFAULT_PALETTE_COLORS : _ref$colorList,
onChange = _ref.onChange;
return /*#__PURE__*/React__default.createElement("div", {
className: "neeto-ui-flex neeto-ui-flex-row neeto-ui-flex-wrap neeto-ui-items-start neeto-ui-justify-start neeto-ui-color-palette neeto-ui-gap-1"
}, colorList.map(function (item) {
var hex = item.hex,
rgb = item.rgb;
var colorObject = tinycolor(hex !== null && hex !== void 0 ? hex : rgb);
var isTransparent = colorObject.getAlpha() === 0;
var isActive = Boolean(
// hex is case insensitive.
(color === null || color === void 0 ? void 0 : color.toLocaleLowerCase()) === (hex === null || hex === void 0 ? void 0 : hex.toLocaleLowerCase()) || color === rgb);
return /*#__PURE__*/React__default.createElement("div", {
"data-testid": "color-palette-item",
key: hex !== null && hex !== void 0 ? hex : rgb,
className: classnames("neeto-ui-color-palette__item neeto-ui-border", {
active: isActive
}),
onClick: function onClick() {
return onChange(hex !== null && hex !== void 0 ? hex : rgb);
}
}, /*#__PURE__*/React__default.createElement("div", {
style: {
backgroundColor: hex !== null && hex !== void 0 ? hex : rgb
},
className: classnames({
"transparent-bg-pattern": isTransparent
})
}));
}));
};
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var TARGET_SIZES = {
large: "large",
medium: "medium",
small: "small"
};
var ColorPicker = function ColorPicker(_ref) {
var _ref2;
var _ref$color = _ref.color,
color = _ref$color === void 0 ? "" : _ref$color,
_ref$size = _ref.size,
size = _ref$size === void 0 ? TARGET_SIZES.large : _ref$size,
_ref$onChange = _ref.onChange,
onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
dropdownProps = _ref.dropdownProps,
_ref$showEyeDropper = _ref.showEyeDropper,
showEyeDropper = _ref$showEyeDropper === void 0 ? true : _ref$showEyeDropper,
_ref$showHexValue = _ref.showHexValue,
showHexValue = _ref$showHexValue === void 0 ? false : _ref$showHexValue,
_ref$showTransparency = _ref.showTransparencyControl,
showTransparencyControl = _ref$showTransparency === void 0 ? false : _ref$showTransparency,
_ref$showPicker = _ref.showPicker,
showPicker = _ref$showPicker === void 0 ? true : _ref$showPicker,
portalProps = _ref.portalProps,
colorPalette = _ref.colorPalette,
_ref$showRecentlyUsed = _ref.showRecentlyUsedColors,
showRecentlyUsedColors = _ref$showRecentlyUsed === void 0 ? showPicker : _ref$showRecentlyUsed;
var _useTranslation = useTranslation(),
t = _useTranslation.t,
i18n = _useTranslation.i18n;
var _useState = useState(color),
_useState2 = _slicedToArray(_useState, 2),
colorInternal = _useState2[0],
setColorInternal = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
isColorSelected = _useState4[0],
setIsColorSelected = _useState4[1];
var hexColorInputValue = useRef("");
var _useEyeDropper = useEyeDropper({
pickRadius: 3
}),
open = _useEyeDropper.open,
isSupported = _useEyeDropper.isSupported;
var _useRecentlyUsedColor = useRecentlyUsedColors(),
_useRecentlyUsedColor2 = _slicedToArray(_useRecentlyUsedColor, 2),
recentlyUsedColors = _useRecentlyUsedColor2[0],
setRecentlyUsedColors = _useRecentlyUsedColor2[1];
var PickerComponent = showTransparencyControl ? HexAlphaColorPicker : HexColorPicker;
var colorValue = (_ref2 = color !== null && color !== void 0 ? color : colorInternal) !== null && _ref2 !== void 0 ? _ref2 : "";
var getColor = function getColor(colorValue) {
var color = tinycolor(colorValue);
if (color.isValid()) {
var hex = color.toHexString();
// return `transparent` for transparent colors.
if (color.getAlpha() === 0) hex = colorValue;else if (showTransparencyControl) hex = color.toHex8String();
return {
hex: hex,
rgb: color.toRgb()
};
}
return {
hex: colorValue,
rgb: colorValue
};
};
var onColorChange = function onColorChange(color) {
setIsColorSelected(true);
var changeHandler = onChange !== null && onChange !== void 0 ? onChange : setColorInternal;
changeHandler(getColor(color));
};
var onColorInputChange = function onColorInputChange(hex) {
// HexColorInput onChange will trigger only if the input value is a valid color
hexColorInputValue.current = hex;
if (hex.length !== (showTransparencyControl ? 9 : 7)) return;
onColorChange(hex);
hexColorInputValue.current = "";
};
var onBlur = function onBlur() {
if (!hexColorInputValue.current) return;
onColorChange(hexColorInputValue.current);
hexColorInputValue.current = "";
};
var pickColor = /*#__PURE__*/function () {
var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var colorResponse, hex;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.prev = 0;
_context.next = 3;
return open();
case 3:
colorResponse = _context.sent;
hex = tinycolor(colorResponse.sRGBHex).toHexString();
onColorChange(hex);
_context.next = 10;
break;
case 8:
_context.prev = 8;
_context.t0 = _context["catch"](0);
case 10:
case "end":
return _context.stop();
}
}, _callee, null, [[0, 8]]);
}));
return function pickColor() {
return _ref3.apply(this, arguments);
};
}();
var onClose = function onClose() {
if (!showRecentlyUsedColors || !isColorSelected) return;
var newColor = getColor(colorValue);
var recentColorsExcludingNew = recentlyUsedColors.filter(function (_ref4) {
var hex = _ref4.hex;
return hex !== newColor.hex;
});
var updatedColors = [newColor].concat(_toConsumableArray(recentColorsExcludingNew));
if (updatedColors.length > 14) updatedColors.pop();
setRecentlyUsedColors(updatedColors);
setIsColorSelected(false);
};
var Target = function Target(_ref5) {
var size = _ref5.size;
return /*#__PURE__*/React__default.createElement("button", {
"data-cy": "color-picker-target",
"data-testid": "neeto-color-picker",
type: "button",
className: classnames("neeto-ui-colorpicker__target", {
"neeto-ui-colorpicker__target-size--large": size === TARGET_SIZES.large,
"neeto-ui-colorpicker__target-size--medium": size === TARGET_SIZES.medium,
"neeto-ui-colorpicker__target-size--small": size === TARGET_SIZES.small
})
}, showHexValue && /*#__PURE__*/React__default.createElement("span", {
className: "neeto-ui-colorpicker-target__code"
}, color), /*#__PURE__*/React__default.createElement("span", {
className: "neeto-ui-colorpicker-target__color-wrapper"
}, /*#__PURE__*/React__default.createElement("span", {
className: "neeto-ui-colorpicker-target__color neeto-ui-border-gray-200",
style: {
backgroundColor: colorValue
}
}), /*#__PURE__*/React__default.createElement("span", {
className: "neeto-ui-colorpicker-target__icon"
}, /*#__PURE__*/React__default.createElement(Down, {
size: 16
}))));
};
return /*#__PURE__*/React__default.createElement(Dropdown, _extends({
className: "neeto-ui-colorpicker__dropdown",
closeOnSelect: false,
customTarget: /*#__PURE__*/React__default.createElement(Target, {
size: size
}),
label: colorValue,
position: "bottom-start"
}, _objectSpread(_objectSpread({}, dropdownProps), {}, {
onClose: onClose
}), {
dropdownProps: _objectSpread(_objectSpread({}, dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.dropdownProps), portalProps)
}), /*#__PURE__*/React__default.createElement("div", {
className: "neeto-ui-colorpicker__popover"
}, showPicker && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
className: "neeto-ui-colorpicker__pointer",
"data-testid": "neeto-color-picker-section"
}, /*#__PURE__*/React__default.createElement(PickerComponent, {
color: colorValue,
onChange: onColorChange
})), /*#__PURE__*/React__default.createElement("div", {
className: "neeto-ui-flex neeto-ui-items-center neeto-ui-justify-center neeto-ui-mt-3 neeto-ui-gap-2"
}, showEyeDropper && isSupported() && /*#__PURE__*/React__default.createElement(Button, {
className: "neeto-ui-colorpicker__eyedropper-btn",
icon: ColorPicker$1,
size: "small",
style: "text",
type: "button",
onClick: pickColor
}), /*#__PURE__*/React__default.createElement("div", {
className: "neeto-ui-input__wrapper"
}, /*#__PURE__*/React__default.createElement("div", {
className: "neeto-ui-colorpicker__input neeto-ui-input neeto-ui-input--small",
"data-cy": "colorpicker-editable-input"
}, /*#__PURE__*/React__default.createElement(HexColorInput, {
onBlur: onBlur,
prefixed: true,
alpha: !!showTransparencyControl,
color: colorValue,
"data-cy": "colorpicker-editable-input-textbox",
onChange: onColorInputChange
}))))), /*#__PURE__*/React__default.createElement("div", {
"data-testid": "color-palette",
className: classnames("neeto-ui-colorpicker__palette-wrapper", {
"neeto-ui-colorpicker__palette-wrapper--hidden-picker": !showPicker,
"neeto-ui-pt-3 neeto-ui-border-t neeto-ui-border-gray-200": showPicker
})
}, /*#__PURE__*/React__default.createElement(Palette, {
color: color,
colorList: colorPalette,
onChange: onColorChange
})), showRecentlyUsedColors && recentlyUsedColors.length > 0 && /*#__PURE__*/React__default.createElement("div", {
className: "neeto-ui-colorpicker__palette-wrapper neeto-ui-border-t neeto-ui-border-gray-200 neeto-ui-pt-3",
"data-testid": "color-palette-recently-used"
}, /*#__PURE__*/React__default.createElement(Typography, {
className: "neeto-ui-text-gray-600 mb-2",
style: "body3",
weight: "medium"
}, getLocale(i18n, t, "neetoui.colorPicker.recentlyUsed")), /*#__PURE__*/React__default.createElement(Palette, {
colorList: recentlyUsedColors,
onChange: onColorChange
}))));
};
export { ColorPicker as default };
//# sourceMappingURL=ColorPicker.js.map