@bigbinary/neetoui
Version:
neetoUI drives the experience at all neeto products
357 lines (348 loc) • 15.6 kB
JavaScript
'use strict';
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _regeneratorRuntime = require('@babel/runtime/regenerator');
var React = require('react');
var classnames = require('classnames');
var ColorPickerIcon = require('@bigbinary/neeto-icons/ColorPicker');
var reactColorful = require('react-colorful');
var reactI18next = require('react-i18next');
var useRecentlyUsedColors = require('./useRecentlyUsedColors-B9w5RTx0.js');
var Button = require('./Button.js');
var Dropdown = require('./Dropdown.js');
var Typography = require('./Typography.js');
var index = require('./index-DFhZ7eXY.js');
var jsxRuntime = require('react/jsx-runtime');
var Down = require('@bigbinary/neeto-icons/Down');
require('@babel/runtime/helpers/objectWithoutProperties');
require('react-router-dom');
require('./Spinner.js');
require('./Tooltip.js');
require('@tippyjs/react');
require('tippy.js');
require('@bigbinary/neeto-hotkeys');
require('./overlayManager.js');
require('@babel/runtime/helpers/classCallCheck');
require('@babel/runtime/helpers/createClass');
require('@bigbinary/neeto-cist');
require('qs');
require('ramda');
require('./index-D0rucYPS.js');
require('dayjs');
require('dayjs/plugin/localeData');
require('dayjs/plugin/utc');
require('dayjs/plugin/weekday');
require('dayjs/plugin/weekOfYear');
require('i18next');
require('./usePrefersReducedMotion-DIgi-Aj7.js');
require('./useId-DXHUzdxd.js');
require('./en-BfFI1Si2.js');
const i=()=>"undefined"!=typeof window&&"EyeDropper"in window,s=()=>{throw new Error("Unsupported browser.")},a=a=>{const c=React.useMemo(()=>{var r;return (r=i()&&new EyeDropper(a))?EyeDropper.prototype.open.bind(r):s},[a]),[p,w]=(()=>{const r=React.useRef(),[s,a]=React.useState(false);React.useEffect(()=>(r.current=true,a(i()),()=>{r.current=false;}),[]);const c=React.useCallback(()=>s,[s]);return [r,c]})(),f=React.useRef(),u=React.useCallback(()=>{ void 0!==f.current&&f.current.abort();},[f]),d=React.useCallback(async function(r){ void 0===r&&(r={}),u();const{signal:o,...n}=r,t=new AbortController;f.current=t;const e=void 0!==o?(r=>{if("any"in AbortSignal)return AbortSignal.any(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;try{return await c({...n,signal:e})}catch(r){throw p.current||(r.canceled=true),r}},[f,p,u,c]);return React.useEffect(()=>u,[u]),{open:d,close:u,isSupported:w}};
var useEyeDropper = a
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 TARGET_SIZES = {
large: "large",
medium: "medium",
small: "small"
};
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__*/jsxRuntime.jsx("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",
children: colorList.map(function (item) {
var hex = item.hex,
rgb = item.rgb;
var colorObject = useRecentlyUsedColors.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__*/jsxRuntime.jsx("div", {
"data-testid": "color-palette-item",
className: classnames("neeto-ui-color-palette__item neeto-ui-border", {
active: isActive
}),
onClick: function onClick() {
return onChange(hex !== null && hex !== void 0 ? hex : rgb);
},
children: /*#__PURE__*/jsxRuntime.jsx("div", {
style: {
backgroundColor: hex !== null && hex !== void 0 ? hex : rgb
},
className: classnames({
"transparent-bg-pattern": isTransparent
})
})
}, hex !== null && hex !== void 0 ? hex : rgb);
})
});
};
var Target = function Target(_ref) {
var size = _ref.size,
showHexValue = _ref.showHexValue,
color = _ref.color,
colorValue = _ref.colorValue;
return /*#__PURE__*/jsxRuntime.jsxs("button", {
"data-testid": "color-picker-target",
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
}),
children: [showHexValue && /*#__PURE__*/jsxRuntime.jsx("span", {
className: "neeto-ui-colorpicker-target__code",
children: color
}), /*#__PURE__*/jsxRuntime.jsxs("span", {
className: "neeto-ui-colorpicker-target__color-wrapper",
children: [/*#__PURE__*/jsxRuntime.jsx("span", {
className: "neeto-ui-colorpicker-target__color neeto-ui-border-gray-200",
style: {
backgroundColor: colorValue
}
}), /*#__PURE__*/jsxRuntime.jsx("span", {
className: "neeto-ui-colorpicker-target__icon",
children: /*#__PURE__*/jsxRuntime.jsx(Down, {
size: 16
})
})]
})]
});
};
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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 ? index.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,
_ref$showHexPicker = _ref.showHexPicker,
showHexPicker = _ref$showHexPicker === void 0 ? true : _ref$showHexPicker,
portalProps = _ref.portalProps,
colorPalette = _ref.colorPalette,
_ref$showRecentlyUsed = _ref.showRecentlyUsedColors,
showRecentlyUsedColors = _ref$showRecentlyUsed === void 0 ? showPicker : _ref$showRecentlyUsed;
var _useTranslation = reactI18next.useTranslation(),
t = _useTranslation.t,
i18n = _useTranslation.i18n;
var _useState = React.useState(color),
_useState2 = _slicedToArray(_useState, 2),
colorInternal = _useState2[0],
setColorInternal = _useState2[1];
var _useState3 = React.useState(false),
_useState4 = _slicedToArray(_useState3, 2),
isColorSelected = _useState4[0],
setIsColorSelected = _useState4[1];
var hexColorInputValue = React.useRef("");
var _useEyeDropper = useEyeDropper({
pickRadius: 3
}),
open = _useEyeDropper.open,
isSupported = _useEyeDropper.isSupported;
var _useRecentlyUsedColor = useRecentlyUsedColors.useRecentlyUsedColors(),
_useRecentlyUsedColor2 = _slicedToArray(_useRecentlyUsedColor, 2),
recentlyUsedColors = _useRecentlyUsedColor2[0],
setRecentlyUsedColors = _useRecentlyUsedColor2[1];
var PickerComponent = showTransparencyControl ? reactColorful.HexAlphaColorPicker : reactColorful.HexColorPicker;
var colorValue = (_ref2 = color !== null && color !== void 0 ? color : colorInternal) !== null && _ref2 !== void 0 ? _ref2 : "";
var getColor = function getColor(colorValue) {
var color = useRecentlyUsedColors.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 (_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.prev = 0;
_context.next = 1;
return open();
case 1:
colorResponse = _context.sent;
hex = useRecentlyUsedColors.tinycolor(colorResponse.sRGBHex).toHexString();
onColorChange(hex);
_context.next = 3;
break;
case 2:
_context.prev = 2;
_context["catch"](0);
case 3:
case "end":
return _context.stop();
}
}, _callee, null, [[0, 2]]);
}));
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);
};
return /*#__PURE__*/jsxRuntime.jsx(Dropdown, _objectSpread(_objectSpread({
closeOnSelect: false,
label: colorValue,
position: "bottom-start"
}, _objectSpread(_objectSpread({}, dropdownProps), {}, {
onClose: onClose
})), {}, {
customTarget: /*#__PURE__*/jsxRuntime.jsx(Target, {
color: color,
colorValue: colorValue,
showHexValue: showHexValue,
size: size
}),
dropdownProps: _objectSpread(_objectSpread({}, dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.dropdownProps), portalProps),
className: classnames("neeto-ui-colorpicker__dropdown", {
"neeto-ui-colorpicker__dropdown-size--small": size === TARGET_SIZES.small,
"neeto-ui-colorpicker__dropdown-size--medium": size === TARGET_SIZES.medium,
"neeto-ui-colorpicker__dropdown-size--large": size === TARGET_SIZES.large
}),
children: /*#__PURE__*/jsxRuntime.jsxs("div", {
className: "neeto-ui-colorpicker__popover",
children: [showPicker && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [showHexPicker && /*#__PURE__*/jsxRuntime.jsx("div", {
className: "neeto-ui-colorpicker__pointer",
"data-testid": "neeto-color-picker-section",
children: /*#__PURE__*/jsxRuntime.jsx(PickerComponent, {
color: colorValue,
onChange: onColorChange
})
}), /*#__PURE__*/jsxRuntime.jsxs("div", {
className: "neeto-ui-flex neeto-ui-items-center neeto-ui-justify-center neeto-ui-mt-3 neeto-ui-gap-2",
children: [showEyeDropper && isSupported() && /*#__PURE__*/jsxRuntime.jsx(Button, {
className: "neeto-ui-colorpicker__eyedropper-btn",
icon: ColorPickerIcon,
size: "small",
style: "text",
type: "button",
onClick: pickColor
}), /*#__PURE__*/jsxRuntime.jsx("div", {
className: "neeto-ui-input__wrapper",
children: /*#__PURE__*/jsxRuntime.jsx("div", {
className: "neeto-ui-colorpicker__input neeto-ui-input neeto-ui-input--small",
"data-testid": "colorpicker-editable-input",
children: /*#__PURE__*/jsxRuntime.jsx(reactColorful.HexColorInput, {
onBlur: onBlur,
prefixed: true,
alpha: !!showTransparencyControl,
color: colorValue,
"data-testid": "colorpicker-editable-input-textbox",
onChange: onColorInputChange
})
})
})]
})]
}), /*#__PURE__*/jsxRuntime.jsx("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
}),
children: /*#__PURE__*/jsxRuntime.jsx(Palette, {
color: color,
colorList: colorPalette,
onChange: onColorChange
})
}), showRecentlyUsedColors && recentlyUsedColors.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("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",
children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
className: "neeto-ui-text-gray-600 mb-2",
style: "body3",
weight: "medium",
children: index.getLocale(i18n, t, "neetoui.colorPicker.recentlyUsed")
}), /*#__PURE__*/jsxRuntime.jsx(Palette, {
colorList: recentlyUsedColors,
onChange: onColorChange
})]
})]
})
}));
};
module.exports = ColorPicker;
//# sourceMappingURL=ColorPicker.js.map