@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
62 lines (61 loc) • 3.86 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColorPicker = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("react");
const debounce_1 = tslib_1.__importDefault(require("../../Utilities/utils/debounce"));
const Input_1 = tslib_1.__importDefault(require("../Input"));
const StyleHelper_1 = require("../../Utilities/Helpers/StyleHelper");
const tinycolor2_1 = tslib_1.__importDefault(require("tinycolor2"));
const Flex_1 = require("../Flex");
const twMerge_1 = require("../../twMerge");
const clsx_1 = tslib_1.__importDefault(require("clsx"));
exports.ColorPicker = React.forwardRef((props, ref) => {
const ColorPalette = props.api.userInterfaceApi.getColorPalette();
let { api, value, includeAlpha = true, ...restProps } = props;
// Create a debounced version of onChange
// we need this because moving the mouse A LOT in the custom color picker can break the React rendering
const debouncedOnChange = (0, react_1.useCallback)((0, debounce_1.default)((color) => {
props.onChange(color);
}, 30), [props.onChange]);
// Clean up the debounce on unmount
(0, react_1.useEffect)(() => {
return () => {
debouncedOnChange.cancel();
};
}, [debouncedOnChange]);
const optionsMap = ColorPalette.reduce((acc, colorItem) => ({ ...acc, [(0, StyleHelper_1.getVariableColor)(colorItem)]: colorItem }), {});
const ABcolorChoicesOptions = Object.keys(optionsMap).map((x) => {
return (React.createElement("option", { key: x, value: x }, x));
});
const ABcolorChoices = React.createElement("datalist", { id: 'ABcolorChoices' }, ABcolorChoicesOptions);
const preparedValue = React.useMemo(() => {
const color = (0, StyleHelper_1.getVariableColor)(value);
return (0, tinycolor2_1.default)(color).toHexString();
}, [value]);
const preparedAlphaColor = React.useMemo(() => {
const color = (0, StyleHelper_1.getVariableColor)(value);
return [(0, tinycolor2_1.default)(color).setAlpha(0).toRgbString(), (0, tinycolor2_1.default)(color).setAlpha(1).toRgbString()];
}, [value]);
const rangeBackround = `linear-gradient(90deg, ${preparedAlphaColor[0]} 0%, ${preparedAlphaColor[1]} 100%)`;
const alpha = (0, tinycolor2_1.default)(value).getAlpha();
return (React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)('ColorPicker twa:items-center twa:gap-2', {
'twa:opacity-30': props.disabled,
}, props.className) },
React.createElement(Input_1.default, { ...restProps, disabled: props.disabled, className: (0, twMerge_1.twMerge)('twa:w-[70px] twa:p-0', restProps.className), onChange: (event) => {
/**
* The value is not in the map when the color is not in the palette.
*/
const color = optionsMap[event.target.value] ?? event.target.value;
debouncedOnChange(color);
}, value: preparedValue, ref: ref, type: "color", list: "ABcolorChoices", title: props.title }),
ABcolorChoices,
includeAlpha && (React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1" },
React.createElement(Flex_1.Box, null, "Opacity"),
React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:min-h-input" },
React.createElement(Input_1.default, { disabled: props.disabled, className: "ab-ColorPicker-range", style: { background: rangeBackround }, value: alpha, onChange: (event) => {
const color = (0, tinycolor2_1.default)(value).setAlpha(event.target.value).toRgbString();
debouncedOnChange(color);
}, min: 0, max: 1, step: 0.01, type: "range" }))))));
});