1 line
15 KiB
JSON
1 line
15 KiB
JSON
|
{"ast":null,"code":"\"use client\";\n\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 * as React from 'react';\nimport classNames from 'classnames';\nimport { UnstableContext } from 'rc-slider';\nimport { useEvent } from 'rc-util';\nimport Slider from '../../slider';\nimport SliderInternalContext from '../../slider/Context';\nimport { getGradientPercentColor } from '../util';\nexport const GradientColorSlider = props => {\n const {\n prefixCls,\n colors,\n type,\n color,\n range = false,\n className,\n activeIndex,\n onActive,\n onDragStart,\n onDragChange,\n onKeyDelete\n } = props,\n restProps = __rest(props, [\"prefixCls\", \"colors\", \"type\", \"color\", \"range\", \"className\", \"activeIndex\", \"onActive\", \"onDragStart\", \"onDragChange\", \"onKeyDelete\"]);\n const sliderProps = Object.assign(Object.assign({}, restProps), {\n track: false\n });\n // ========================== Background ==========================\n const linearCss = React.useMemo(() => {\n const colorsStr = colors.map(c => `${c.color} ${c.percent}%`).join(', ');\n return `linear-gradient(90deg, ${colorsStr})`;\n }, [colors]);\n const pointColor = React.useMemo(() => {\n if (!color || !type) {\n return null;\n }\n if (type === 'alpha') {\n return color.toRgbString();\n }\n return `hsl(${color.toHsb().h}, 100%, 50%)`;\n }, [color, type]);\n // ======================= Context: Slider ========================\n const onInternalDragStart = useEvent(onDragStart);\n const onInternalDragChange = useEvent(onDragChange);\n const unstableContext = React.useMemo(() => ({\n onDragStart: onInternalDragStart,\n onDragChange: onInternalDragChange\n }), []);\n // ======================= Context: Render ========================\n const handleRender = useEvent((ori, info) => {\n const {\n onFocus,\n style,\n className: handleCls,\n onKeyDown\n } = ori.props;\n // Point Color\n const mergedStyle = Object.assign({}, style);\n if (type === 'gradient') {\n mergedStyle.background = getGradientPercentColor(colors, info.value);\n }\n return /*#__PURE__*/React.cloneElement(ori, {\n onFocus: e => {\n onActive === null || onActive === void 0 ? void 0 : onActive(info.index);\n onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);\n },\n style: mergedStyle,\n className: classNames(handleCls, {\n [`${prefixCls}-slider-handle-active`]: activeIndex === info.index\n }),\n onKeyDown: e => {\n if ((e.key === 'Delete' || e.key === 'Backspace') && onKeyDelete) {\n onKeyDelete(info.index);\n }\n onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);\n }\n });\n });\n const sliderContext = React.useMemo(() => ({\n direction: 'ltr',\n handleRender\n }), []);\n // ============================ Render ============================\n return /*#__PURE__*/React.createElement(SliderInternalContext.Provider, {\n value: sliderContext\n }, /*#__PURE__*/React.createElement(UnstableContext.Provider, {\n value: unstableContext\n }, /*#__PURE__*/React.createElement(Slider, Object.assign({}, sliderProps, {\n className: classNames(className, `${prefixCls}-slider`),\n tooltip: {\n open: false\n },\n range: {\n editable: range,\n minCount: 2\n },\n styles: {\n rail: {\n background: linearCss\n },\n handle: pointColor ? {\n background: pointColor\n } : {}\n },\n classNames: {\n rail: `${prefixCls}-slider-rail`,\n handle: `${prefixCls}-slid
|