1 line
18 KiB
JSON
1 line
18 KiB
JSON
|
{"ast":null,"code":"\"use client\";\n\nimport _toConsumableArray from \"@babel/runtime/helpers/esm/toConsumableArray\";\nvar __rest = this && this.__rest || function (s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n }\n return t;\n};\nimport React, { useContext } from 'react';\nimport RcColorPicker from '@rc-component/color-picker';\nimport useLayoutEffect from \"rc-util/es/hooks/useLayoutEffect\";\nimport Segmented from '../../../segmented';\nimport { AggregationColor } from '../../color';\nimport { PanelPickerContext } from '../../context';\nimport { genAlphaColor, generateColor } from '../../util';\nimport ColorClear from '../ColorClear';\nimport ColorInput from '../ColorInput';\nimport ColorSlider from '../ColorSlider';\nimport GradientColorBar from './GradientColorBar';\nconst components = {\n slider: ColorSlider\n};\nconst PanelPicker = () => {\n const panelPickerContext = useContext(PanelPickerContext);\n const {\n mode,\n onModeChange,\n modeOptions,\n prefixCls,\n allowClear,\n value,\n disabledAlpha,\n onChange,\n onClear,\n onChangeComplete,\n activeIndex,\n gradientDragging\n } = panelPickerContext,\n injectProps = __rest(panelPickerContext, [\"mode\", \"onModeChange\", \"modeOptions\", \"prefixCls\", \"allowClear\", \"value\", \"disabledAlpha\", \"onChange\", \"onClear\", \"onChangeComplete\", \"activeIndex\", \"gradientDragging\"]);\n // ============================ Colors ============================\n const colors = React.useMemo(() => {\n if (!value.cleared) {\n return value.getColors();\n }\n return [{\n percent: 0,\n color: new AggregationColor('')\n }, {\n percent: 100,\n color: new AggregationColor('')\n }];\n }, [value]);\n // ========================= Single Color =========================\n const isSingle = !value.isGradient();\n // We cache the point color in case user drag the gradient point across another one\n const [lockedColor, setLockedColor] = React.useState(value);\n // Use layout effect here since `useEffect` will cause a blink when mouseDown\n useLayoutEffect(() => {\n var _a;\n if (!isSingle) {\n setLockedColor((_a = colors[activeIndex]) === null || _a === void 0 ? void 0 : _a.color);\n }\n }, [gradientDragging, activeIndex]);\n const activeColor = React.useMemo(() => {\n var _a;\n if (isSingle) {\n return value;\n }\n // Use cache when dragging. User can not operation panel when dragging.\n if (gradientDragging) {\n return lockedColor;\n }\n return (_a = colors[activeIndex]) === null || _a === void 0 ? void 0 : _a.color;\n }, [value, activeIndex, isSingle, lockedColor, gradientDragging]);\n // ============================ Change ============================\n const fillColor = nextColor => {\n if (mode === 'single') {\n return nextColor;\n }\n const nextColors = _toConsumableArray(colors);\n nextColors[activeIndex] = Object.assign(Object.assign({}, nextColors[activeIndex]), {\n color: nextColor\n });\n return new AggregationColor(nextColors);\n };\n const onInternalChange = (colorValue, fromPicker, info) => {\n const nextColor = generateColor(colorValue);\n let submitColor = nextColor;\n if (value.cleared) {\n const rgb = submitColor.toRgb();\n // Auto fill color if origin is `0/0/0` to enhance user experience\n if (!rgb.r && !rgb.g && !rgb.b && info) {\n const {\n type: infoType,\n value: infoValue = 0\n } = info;\n submitColor = new AggregationColor({\n h: infoType === 'hue' ? infoValue : 0,\n s: 1,\n b: 1,\n a: infoType === 'alpha' ? infoValue / 100 : 1\n })
|