1 line
11 KiB
JSON
1 line
11 KiB
JSON
|
{"ast":null,"code":"\"use client\";\n\nimport _toConsumableArray from \"@babel/runtime/helpers/esm/toConsumableArray\";\nimport * as React from 'react';\nimport { AggregationColor } from '../../color';\nimport { getGradientPercentColor } from '../../util';\nimport { GradientColorSlider } from '../ColorSlider';\nfunction sortColors(colors) {\n return _toConsumableArray(colors).sort((a, b) => a.percent - b.percent);\n}\n/**\n * GradientColorBar will auto show when the mode is `gradient`.\n */\nconst GradientColorBar = props => {\n const {\n prefixCls,\n mode,\n onChange,\n onChangeComplete,\n onActive,\n activeIndex,\n onGradientDragging,\n colors\n } = props;\n const isGradient = mode === 'gradient';\n // ============================= Colors =============================\n const colorList = React.useMemo(() => colors.map(info => ({\n percent: info.percent,\n color: info.color.toRgbString()\n })), [colors]);\n const values = React.useMemo(() => colorList.map(info => info.percent), [colorList]);\n // ============================== Drag ==============================\n const colorsRef = React.useRef(colorList);\n // Record current colors\n const onDragStart = _ref => {\n let {\n rawValues,\n draggingIndex,\n draggingValue\n } = _ref;\n if (rawValues.length > colorList.length) {\n // Add new node\n const newPointColor = getGradientPercentColor(colorList, draggingValue);\n const nextColors = _toConsumableArray(colorList);\n nextColors.splice(draggingIndex, 0, {\n percent: draggingValue,\n color: newPointColor\n });\n colorsRef.current = nextColors;\n } else {\n colorsRef.current = colorList;\n }\n onGradientDragging(true);\n onChange(new AggregationColor(sortColors(colorsRef.current)), true);\n };\n // Adjust color when dragging\n const onDragChange = _ref2 => {\n let {\n deleteIndex,\n draggingIndex,\n draggingValue\n } = _ref2;\n let nextColors = _toConsumableArray(colorsRef.current);\n if (deleteIndex !== -1) {\n nextColors.splice(deleteIndex, 1);\n } else {\n nextColors[draggingIndex] = Object.assign(Object.assign({}, nextColors[draggingIndex]), {\n percent: draggingValue\n });\n nextColors = sortColors(nextColors);\n }\n onChange(new AggregationColor(nextColors), true);\n };\n // ============================== Key ===============================\n const onKeyDelete = index => {\n const nextColors = _toConsumableArray(colorList);\n nextColors.splice(index, 1);\n const nextColor = new AggregationColor(nextColors);\n onChange(nextColor);\n onChangeComplete(nextColor);\n };\n // ============================= Change =============================\n const onInternalChangeComplete = nextValues => {\n onChangeComplete(new AggregationColor(colorList));\n // Reset `activeIndex` if out of range\n if (activeIndex >= nextValues.length) {\n onActive(nextValues.length - 1);\n }\n onGradientDragging(false);\n };\n // ============================= Render =============================\n if (!isGradient) {\n return null;\n }\n return /*#__PURE__*/React.createElement(GradientColorSlider, {\n min: 0,\n max: 100,\n prefixCls: prefixCls,\n className: `${prefixCls}-gradient-slider`,\n colors: colorList,\n color: null,\n value: values,\n range: true,\n onChangeComplete: onInternalChangeComplete,\n disabled: false,\n type: \"gradient\",\n // Active\n activeIndex: activeIndex,\n onActive: onActive,\n // Drag\n onDragStart: onDragStart,\n onDragChange: onDragChange,\n onKeyDelete: onKeyDelete\n });\n};\nexport default /*#__PURE__*/React.memo(GradientColorBar);","map":{"version":3,"names":["_toConsumableArray","React","AggregationColor","getGradientPercentColor","GradientColorSlider","sortColors","colors","sort","a","b","percent","GradientColorBar","props","prefixCls","mode","onChange","onChangeComplete","onActive","activeIndex","onGradientDragging","isGradie
|