@bigbinary/neetoui
Version:
neetoUI drives the experience at all neeto products
322 lines (314 loc) • 14.5 kB
JavaScript
'use strict';
var _extends = require('@babel/runtime/helpers/extends');
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 neetoIcons = require('@bigbinary/neeto-icons');
var reactColorful = require('react-colorful');
var reactI18next = require('react-i18next');
var useRecentlyUsedColors = require('./useRecentlyUsedColors-3cKx-eDH.js');
var Button = require('./Button.js');
var Dropdown = require('./Dropdown.js');
var Typography = require('./Typography.js');
var index = require('./index--BeRLo6L.js');
require('@babel/runtime/helpers/objectWithoutProperties');
require('react-router-dom');
require('./Spinner.js');
require('./Tooltip.js');
require('@tippyjs/react');
require('tippy.js');
require('ramda');
require('@bigbinary/neeto-cist');
require('@babel/runtime/helpers/classCallCheck');
require('@babel/runtime/helpers/createClass');
require('qs');
require('./en-K2ZIAV2F.js');
require('dayjs');
require('dayjs/plugin/localeData');
require('dayjs/plugin/utc');
require('dayjs/plugin/weekday');
require('dayjs/plugin/weekOfYear');
const s=()=>"undefined"!=typeof window&&"EyeDropper"in window,i=()=>Promise.reject(new Error("Unsupported browser.")),c=()=>{const r=React.useRef(),[i,c]=React.useState(!1);React.useEffect(()=>(r.current=!0,c(s()),()=>{r.current=!1;}),[]);const u=React.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=React.useMemo(()=>u(e),[e]),[i,p]=c(),a=React.useRef(),f=React.useCallback(()=>{void 0!==a.current&&a.current.abort();},[a]),d=React.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 React.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.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 = 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__*/React.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.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 ? 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,
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 _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 = useRecentlyUsedColors.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.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.createElement("span", {
className: "neeto-ui-colorpicker-target__code"
}, color), /*#__PURE__*/React.createElement("span", {
className: "neeto-ui-colorpicker-target__color-wrapper"
}, /*#__PURE__*/React.createElement("span", {
className: "neeto-ui-colorpicker-target__color neeto-ui-border-gray-200",
style: {
backgroundColor: colorValue
}
}), /*#__PURE__*/React.createElement("span", {
className: "neeto-ui-colorpicker-target__icon"
}, /*#__PURE__*/React.createElement(neetoIcons.Down, {
size: 16
}))));
};
return /*#__PURE__*/React.createElement(Dropdown, _extends({
className: "neeto-ui-colorpicker__dropdown",
closeOnSelect: false,
customTarget: /*#__PURE__*/React.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.createElement("div", {
className: "neeto-ui-colorpicker__popover"
}, showPicker && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: "neeto-ui-colorpicker__pointer",
"data-testid": "neeto-color-picker-section"
}, /*#__PURE__*/React.createElement(PickerComponent, {
color: colorValue,
onChange: onColorChange
})), /*#__PURE__*/React.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.createElement(Button, {
className: "neeto-ui-colorpicker__eyedropper-btn",
icon: neetoIcons.ColorPicker,
size: "small",
style: "text",
type: "button",
onClick: pickColor
}), /*#__PURE__*/React.createElement("div", {
className: "neeto-ui-input__wrapper"
}, /*#__PURE__*/React.createElement("div", {
className: "neeto-ui-colorpicker__input neeto-ui-input neeto-ui-input--small",
"data-cy": "colorpicker-editable-input"
}, /*#__PURE__*/React.createElement(reactColorful.HexColorInput, {
onBlur: onBlur,
prefixed: true,
alpha: !!showTransparencyControl,
color: colorValue,
"data-cy": "colorpicker-editable-input-textbox",
onChange: onColorInputChange
}))))), /*#__PURE__*/React.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.createElement(Palette, {
color: color,
colorList: colorPalette,
onChange: onColorChange
})), showRecentlyUsedColors && recentlyUsedColors.length > 0 && /*#__PURE__*/React.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.createElement(Typography, {
className: "neeto-ui-text-gray-600 mb-2",
style: "body3",
weight: "medium"
}, index.getLocale(i18n, t, "neetoui.colorPicker.recentlyUsed")), /*#__PURE__*/React.createElement(Palette, {
colorList: recentlyUsedColors,
onChange: onColorChange
}))));
};
module.exports = ColorPicker;
//# sourceMappingURL=ColorPicker.js.map