tdesign-react 0.31.2-alpha.1 → 0.32.0

package/es/color-picker/components/panel/linear-gradient.js

@@ -0,0 +1,360 @@
+/**
+ * tdesign v0.32.0
+ * (c) 2022 tdesign
+ * @license MIT
+ */
+
+import { _ as _toConsumableArray } from '../../../_chunks/dep-69f31e90.js';
+import React, { useRef, useEffect, useCallback } from 'react';
+import { c as cloneDeep_1 } from '../../../_chunks/dep-d73689a0.js';
+import classNames from 'classnames';
+import useClassname from '../../hooks/useClassname.js';
+import { genGradientPoint, gradientColors2string } from '../../../_common/js/color-picker/color.js';
+import useCommonClassName from '../../../_util/useCommonClassName.js';
+import { GRADIENT_SLIDER_DEFAULT_WIDTH } from '../../const.js';
+import { InputNumber } from '../../../input-number/index.js';
+import '../../../_chunks/dep-36c251e6.js';
+import '../../../_chunks/dep-20942df6.js';
+import '../../../_chunks/dep-a014746f.js';
+import '../../../_chunks/dep-c39c78cd.js';
+import '../../../_chunks/dep-ae758695.js';
+import '../../../_chunks/dep-8e097b2f.js';
+import '../../../_chunks/dep-a92150b2.js';
+import '../../../_chunks/dep-43f5f41f.js';
+import '../../../_chunks/dep-6bbd82f0.js';
+import '../../../_chunks/dep-e2a56b9c.js';
+import '../../../_chunks/dep-6cb0cfa2.js';
+import '../../../_chunks/dep-5045c746.js';
+import '../../../_chunks/dep-7ff49a9f.js';
+import '../../../_chunks/dep-ea4575dc.js';
+import '../../../_chunks/dep-9002343b.js';
+import '../../../_chunks/dep-45feb6ec.js';
+import '../../../_chunks/dep-bb5a950d.js';
+import '../../../_chunks/dep-5828c847.js';
+import '../../../_chunks/dep-92d9fa2a.js';
+import '../../../_chunks/dep-78d039c7.js';
+import '../../../_chunks/dep-770e3cfb.js';
+import '../../../_chunks/dep-75238982.js';
+import '../../../_chunks/dep-91c5c936.js';
+import '../../../_chunks/dep-b39004e6.js';
+import '../../../_chunks/dep-ec6b2066.js';
+import '../../../_chunks/dep-1f375d3f.js';
+import '../../../_util/useConfig.js';
+import '../../../_chunks/dep-26b9f3d5.js';
+import '../../../_chunks/dep-8a61427d.js';
+import '../../../_chunks/dep-15f50fa2.js';
+import '../../../locale/zh_CN.js';
+import '../../../_common/js/global-config/locale/zh_CN.js';
+import '../../../config-provider/zh_CN_config.js';
+import '../../../_chunks/dep-1e5b43b6.js';
+import '../../../_chunks/dep-63119f70.js';
+import 'tinycolor2';
+import '../../../_common/js/color-picker/cmyk.js';
+import '../../../_common/js/color-picker/gradient.js';
+import '../../../input-number/InputNumber.js';
+import '../../../_chunks/dep-3ccea244.js';
+import '../../../_util/useUpdateEffect.js';
+import '../../../_util/useLayoutEffect.js';
+import '../../../_util/dom.js';
+import 'raf';
+import '../../../_chunks/dep-69b6a53c.js';
+import '../../../_util/easing.js';
+import '../../../input-number/StepHandler.js';
+import 'tdesign-icons-react';
+import '../../../button/index.js';
+import '../../../button/Button.js';
+import '../../../_util/noop.js';
+import '../../../_util/useRipple.js';
+import '../../../_util/useAnimation.js';
+import '../../../_util/setStyle.js';
+import '../../../loading/index.js';
+import '../../../loading/Loading.js';
+import '../../../common/Portal.js';
+import 'react-dom';
+import '../../../loading/gradient.js';
+import '../../../_common/js/loading/circle-adapter.js';
+import '../../../_common/js/utils/set-style.js';
+import '../../../_common/js/utils/helper.js';
+import '../../../loading/plugin.js';
+import './style/css.js';
+import '../../../loading/type.js';
+import '../../../button/type.js';
+import '../../../input-number/utils/numberUtils.js';
+import '../../../input/index.js';
+import '../../../input/Input.js';
+import '../../../_util/forwardRefWithStatics.js';
+import 'hoist-non-react-statics';
+import '../../../_util/helper.js';
+import '../../../_chunks/dep-6d1a8abd.js';
+import '../../../_chunks/dep-266d4260.js';
+import '../../../_chunks/dep-f27cf3cb.js';
+import '../../../_chunks/dep-53a6daf2.js';
+import '../../../_chunks/dep-87f75a09.js';
+import '../../../input/InputGroup.js';
+import '../../../_util/useDefaultValue.js';
+import '../../../_util/useDefault.js';
+import '../../../locale/LocalReceiver.js';
+import '../../../config-provider/index.js';
+import '../../../config-provider/ConfigProvider.js';
+import '../../../input/type.js';
+import '../../../input-number/type.js';
+
+var DELETE_KEYS = ["delete", "backspace"];
+
+var LinearGradient = function LinearGradient(props) {
+  var onChange = props.onChange,
+      color = props.color,
+      disabled = props.disabled;
+  var baseClassName = useClassname();
+
+  var _useCommonClassName = useCommonClassName(),
+      statusClassNames = _useCommonClassName.STATUS;
+
+  var refSlider = useRef(null);
+  var sliderRectRef = useRef({
+    left: 0,
+    width: GRADIENT_SLIDER_DEFAULT_WIDTH
+  });
+  var isDragging = useRef(false);
+  var isMoved = useRef(false);
+  var degree = useRef(props.color.gradientDegree);
+  var selectedId = useRef(props.color.gradientSelectedId);
+  var colors = useRef(cloneDeep_1(color.gradientColors));
+  useEffect(function () {
+    degree.current = color === null || color === void 0 ? void 0 : color.gradientDegree;
+    selectedId.current = color.gradientSelectedId;
+    colors.current = cloneDeep_1(color.gradientColors);
+  }, [color]);
+
+  var updateSliderRect = function updateSliderRect() {
+    var rect = refSlider.current.getBoundingClientRect();
+    sliderRectRef.current = {
+      left: rect.left,
+      width: rect.width || GRADIENT_SLIDER_DEFAULT_WIDTH
+    };
+  };
+
+  var handleChange = useCallback(function (key, payload, addUsedColor) {
+    if (disabled) {
+      return;
+    }
+
+    onChange({
+      key: key,
+      payload: payload,
+      addUsedColor: addUsedColor
+    });
+  }, [onChange, disabled]);
+
+  var handleDegreeChange = function handleDegreeChange(value) {
+    if (props.disabled || value === props.color.gradientDegree) {
+      return;
+    }
+
+    degree.current = value;
+    handleChange("degree", value, true);
+  };
+
+  var handleSelectedIdChange = function handleSelectedIdChange(value) {
+    if (props.disabled) {
+      return;
+    }
+
+    selectedId.current = value;
+    handleChange("selectedId", value);
+  };
+
+  var handleColorsChange = useCallback(function (value, isEnded) {
+    if (props.disabled) {
+      return;
+    }
+
+    colors.current = value;
+    handleChange("colors", value, isEnded);
+  }, [props.disabled, handleChange]);
+  var updateActiveThumbLeft = useCallback(function (left) {
+    var index = colors.current.findIndex(function (c) {
+      return c.id === selectedId.current;
+    });
+
+    if (index === -1) {
+      return;
+    }
+
+    var point = colors.current[index];
+    var formatLeft = Math.max(0, Math.min(sliderRectRef.current.width, left));
+    var percentLeft = formatLeft / sliderRectRef.current.width * 100;
+    var newColors = colors.current.map(function (item, i) {
+      return index !== i ? item : {
+        color: point.color,
+        left: percentLeft,
+        id: point.id
+      };
+    });
+    handleColorsChange(newColors);
+  }, [handleColorsChange]);
+
+  var handleStart = function handleStart(id, e) {
+    if (isDragging.current || props.disabled) {
+      return;
+    }
+
+    isMoved.current = false;
+    isDragging.current = true;
+    e.preventDefault();
+    e.stopPropagation();
+    refSlider.current.focus();
+  };
+
+  var handleMove = useCallback(function (e) {
+    if (!isDragging.current || disabled) {
+      return;
+    }
+
+    var rect = refSlider.current.getBoundingClientRect();
+    var left = e.clientX - rect.x;
+    isMoved.current = true;
+    updateActiveThumbLeft(left);
+  }, [disabled, updateActiveThumbLeft]);
+  var handleEnd = useCallback(function () {
+    if (!isDragging.current) {
+      return;
+    }
+
+    setTimeout(function () {
+      isDragging.current = false;
+    }, 0);
+
+    if (isMoved.current) {
+      handleColorsChange(colors.current, true);
+      isMoved.current = false;
+    }
+  }, [handleColorsChange]);
+
+  var handleKeyup = function handleKeyup(e) {
+    if (props.disabled) {
+      return;
+    }
+
+    var points = _toConsumableArray(colors.current);
+
+    var pos = points.findIndex(function (c) {
+      return c.id === selectedId.current;
+    });
+    var length = points.length;
+
+    if (DELETE_KEYS.includes(e.key.toLocaleLowerCase()) && length > 2 && pos >= 0 && pos <= length - 1) {
+      points.splice(pos, 1);
+
+      if (!points[pos]) {
+        pos = points[pos + 1] ? pos + 1 : points[pos - 1] ? pos - 1 : 0;
+      }
+
+      var current = points[pos];
+      handleColorsChange(points, true);
+      handleSelectedIdChange(current === null || current === void 0 ? void 0 : current.id);
+    }
+  };
+
+  var handleThumbBarClick = function handleThumbBarClick(e) {
+    if (props.disabled) {
+      return;
+    }
+
+    updateSliderRect();
+    var left = e.clientX - sliderRectRef.current.left;
+    left = Math.max(0, Math.min(sliderRectRef.current.width, left));
+    var percentLeft = left / sliderRectRef.current.width * 100;
+    var newPoint = genGradientPoint(percentLeft, props.color.rgba);
+
+    var newColors = _toConsumableArray(colors.current);
+
+    newColors.push(newPoint);
+    handleColorsChange(newColors, true);
+    handleSelectedIdChange(newPoint.id);
+  };
+
+  useEffect(function () {
+    updateSliderRect();
+    window.addEventListener("mousemove", handleMove, false);
+    window.addEventListener("mouseup", handleEnd, false);
+    window.addEventListener("contextmenu", handleEnd, false);
+    return function () {
+      window.removeEventListener("mousemove", handleMove, false);
+      window.removeEventListener("mouseup", handleEnd, false);
+      window.removeEventListener("contextmenu", handleEnd, false);
+    };
+  }, []);
+  var _props$color = props.color,
+      linearGradient = _props$color.linearGradient,
+      gradientColors = _props$color.gradientColors;
+  var thumbBackground = gradientColors2string({
+    points: gradientColors,
+    degree: 90
+  });
+
+  var handleClickThumb = function handleClickThumb(e) {
+    return e.stopPropagation();
+  };
+
+  return /* @__PURE__ */React.createElement("div", {
+    className: "".concat(baseClassName, "__gradient")
+  }, /* @__PURE__ */React.createElement("div", {
+    className: "".concat(baseClassName, "__gradient-slider")
+  }, /* @__PURE__ */React.createElement("div", {
+    className: classNames("".concat(baseClassName, "__slider"), "".concat(baseClassName, "--bg-alpha")),
+    onKeyUp: handleKeyup,
+    tabIndex: 0,
+    ref: refSlider
+  }, /* @__PURE__ */React.createElement("ul", {
+    className: "gradient-thumbs",
+    onClick: handleThumbBarClick,
+    style: {
+      background: thumbBackground
+    }
+  }, colors.current.map(function (t) {
+    var left = "".concat(Math.round(t.left * 100) / 100, "%");
+    return /* @__PURE__ */React.createElement("li", {
+      className: classNames(["".concat(baseClassName, "__thumb"), "gradient-thumbs__item", selectedId.current === t.id ? statusClassNames.active : ""]),
+      key: t.id,
+      title: "".concat(t.color, " ").concat(left),
+      style: {
+        color: t.color,
+        left: left
+      },
+      onClick: handleClickThumb,
+      onMouseDown: function onMouseDown(e) {
+        return handleStart(t.id, e);
+      }
+    }, /* @__PURE__ */React.createElement("span", {
+      className: classNames(["gradient-thumbs__item-inner", "".concat(baseClassName, "--bg-alpha")])
+    }));
+  })))), /* @__PURE__ */React.createElement("div", {
+    className: "".concat(baseClassName, "__gradient-degree"),
+    title: "".concat(degree, "deg")
+  }, /* @__PURE__ */React.createElement(InputNumber, {
+    theme: "normal",
+    min: 0,
+    max: 360,
+    step: 1,
+    format: function format(value) {
+      return "".concat(value, "\xB0");
+    },
+    value: degree.current,
+    onBlur: handleDegreeChange,
+    onEnter: handleDegreeChange,
+    disabled: props.disabled
+  })), /* @__PURE__ */React.createElement("div", {
+    className: classNames(["".concat(baseClassName, "__gradient-preview"), "".concat(baseClassName, "--bg-alpha")])
+  }, /* @__PURE__ */React.createElement("span", {
+    className: "preview-inner",
+    style: {
+      background: linearGradient
+    }
+  })));
+};
+
+var LinearGradient$1 = /*#__PURE__*/React.memo(LinearGradient);
+
+export { LinearGradient$1 as default };
+//# sourceMappingURL=linear-gradient.js.map

package/es/color-picker/components/panel/linear-gradient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"linear-gradient.js","sources":["../../../../src/color-picker/components/panel/linear-gradient.tsx"],"sourcesContent":["import React, { KeyboardEvent, MouseEvent as ReactMouseEvent, useCallback, useEffect, useRef } from 'react';\nimport cloneDeep from 'lodash/cloneDeep';\nimport classNames from 'classnames';\nimport useClassname from '../../hooks/useClassname';\nimport { genGradientPoint, gradientColors2string } from '../../../_common/js/color-picker/color';\nimport { GradientColorPoint } from '../../../_common/js/color-picker/gradient';\nimport useCommonClassName from '../../../_util/useCommonClassName';\nimport { GRADIENT_SLIDER_DEFAULT_WIDTH } from '../../const';\nimport InputNumber from '../../../input-number';\n\nconst DELETE_KEYS: string[] = ['delete', 'backspace'];\n\ntype TSliderRect = {\n  left: number;\n  width: number;\n};\n\nconst LinearGradient = (props) => {\n  const { onChange, color, disabled } = props;\n  const baseClassName = useClassname();\n  const { STATUS: statusClassNames } = useCommonClassName();\n  const refSlider = useRef<HTMLDivElement>(null);\n  const sliderRectRef = useRef<TSliderRect>({\n    left: 0,\n    width: GRADIENT_SLIDER_DEFAULT_WIDTH,\n  });\n  const isDragging = useRef<Boolean>(false);\n  const isMoved = useRef<Boolean>(false);\n  const degree = useRef(props.color.gradientDegree);\n  const selectedId = useRef(props.color.gradientSelectedId);\n  const colors = useRef<GradientColorPoint[]>(cloneDeep(color.gradientColors));\n\n  useEffect(() => {\n    degree.current = color?.gradientDegree;\n    selectedId.current = color.gradientSelectedId;\n    colors.current = cloneDeep(color.gradientColors);\n  }, [color]);\n\n  const updateSliderRect = () => {\n    const rect = refSlider.current.getBoundingClientRect();\n    sliderRectRef.current = {\n      left: rect.left,\n      width: rect.width || GRADIENT_SLIDER_DEFAULT_WIDTH,\n    };\n  };\n\n  const handleChange = useCallback(\n    (key: 'degree' | 'selectedId' | 'colors', payload: any, addUsedColor?: boolean) => {\n      if (disabled) {\n        return;\n      }\n      onChange({\n        key,\n        payload,\n        addUsedColor,\n      });\n    },\n    [onChange, disabled],\n  );\n\n  const handleDegreeChange = (value: number) => {\n    if (props.disabled || value === props.color.gradientDegree) {\n      return;\n    }\n    degree.current = value;\n    handleChange('degree', value, true);\n  };\n\n  const handleSelectedIdChange = (value: string) => {\n    if (props.disabled) {\n      return;\n    }\n    selectedId.current = value;\n    handleChange('selectedId', value);\n  };\n\n  const handleColorsChange = useCallback(\n    (value: GradientColorPoint[], isEnded?: boolean) => {\n      if (props.disabled) {\n        return;\n      }\n      colors.current = value;\n      handleChange('colors', value, isEnded);\n    },\n    [props.disabled, handleChange],\n  );\n\n  /**\n   * 设置bar的位置\n   * @param left\n   * @returns\n   */\n  const updateActiveThumbLeft = useCallback(\n    (left: number) => {\n      const index = colors.current.findIndex((c) => c.id === selectedId.current);\n      if (index === -1) {\n        return;\n      }\n      const point = colors.current[index];\n      const formatLeft = Math.max(0, Math.min(sliderRectRef.current.width, left));\n\n      const percentLeft = (formatLeft / sliderRectRef.current.width) * 100;\n\n      const newColors = colors.current.map((item, i) =>\n        index !== i\n          ? item\n          : {\n              color: point.color,\n              left: percentLeft,\n              id: point.id,\n            },\n      );\n\n      handleColorsChange(newColors);\n    },\n    [handleColorsChange],\n  );\n\n  // 移动开始\n  const handleStart = (id: string, e: ReactMouseEvent) => {\n    if (isDragging.current || props.disabled) {\n      return;\n    }\n    isMoved.current = false;\n    isDragging.current = true;\n    e.preventDefault();\n    e.stopPropagation();\n    // handleSelectedIdChange(id);\n    // 让slider获取焦点，以便键盘事件生效。\n    refSlider.current.focus();\n  };\n\n  // 移动中\n  const handleMove = useCallback(\n    (e: MouseEvent) => {\n      if (!isDragging.current || disabled) {\n        return;\n      }\n\n      const rect = refSlider.current.getBoundingClientRect();\n      const left = e.clientX - rect.x;\n      isMoved.current = true;\n      updateActiveThumbLeft(left);\n    },\n    [disabled, updateActiveThumbLeft],\n  );\n\n  // 移动结束\n  const handleEnd = useCallback(() => {\n    if (!isDragging.current) {\n      return;\n    }\n    setTimeout(() => {\n      isDragging.current = false;\n    }, 0);\n    if (isMoved.current) {\n      handleColorsChange(colors.current, true);\n      isMoved.current = false;\n    }\n  }, [handleColorsChange]);\n\n  const handleKeyup = (e: KeyboardEvent) => {\n    if (props.disabled) {\n      return;\n    }\n    const points = [...colors.current];\n    let pos = points.findIndex((c) => c.id === selectedId.current);\n    const { length } = points;\n    // 必须保证有两个点\n    if (DELETE_KEYS.includes(e.key.toLocaleLowerCase()) && length > 2 && pos >= 0 && pos <= length - 1) {\n      points.splice(pos, 1);\n      if (!points[pos]) {\n        // eslint-disable-next-line no-nested-ternary\n        pos = points[pos + 1] ? pos + 1 : points[pos - 1] ? pos - 1 : 0;\n      }\n      const current = points[pos];\n      handleColorsChange(points, true);\n      handleSelectedIdChange(current?.id);\n    }\n  };\n\n  const handleThumbBarClick = (e: ReactMouseEvent) => {\n    if (props.disabled) {\n      return;\n    }\n    updateSliderRect();\n\n    let left = e.clientX - sliderRectRef.current.left;\n    left = Math.max(0, Math.min(sliderRectRef.current.width, left));\n    const percentLeft = (left / sliderRectRef.current.width) * 100;\n\n    const newPoint = genGradientPoint(percentLeft, props.color.rgba);\n    const newColors = [...colors.current];\n    newColors.push(newPoint);\n    handleColorsChange(newColors, true);\n    handleSelectedIdChange(newPoint.id);\n  };\n\n  useEffect(() => {\n    updateSliderRect();\n\n    window.addEventListener('mousemove', handleMove, false);\n    window.addEventListener('mouseup', handleEnd, false);\n    window.addEventListener('contextmenu', handleEnd, false);\n\n    return () => {\n      window.removeEventListener('mousemove', handleMove, false);\n      window.removeEventListener('mouseup', handleEnd, false);\n      window.removeEventListener('contextmenu', handleEnd, false);\n    };\n    // eslint-disable-next-line\n  }, []);\n\n  const { linearGradient, gradientColors } = props.color;\n\n  const thumbBackground = gradientColors2string({\n    points: gradientColors,\n    degree: 90,\n  });\n\n  const handleClickThumb = (e: ReactMouseEvent) => e.stopPropagation();\n\n  return (\n    <div className={`${baseClassName}__gradient`}>\n      <div className={`${baseClassName}__gradient-slider`}>\n        <div\n          className={classNames(`${baseClassName}__slider`, `${baseClassName}--bg-alpha`)}\n          onKeyUp={handleKeyup}\n          tabIndex={0}\n          ref={refSlider}\n        >\n          <ul\n            className=\"gradient-thumbs\"\n            onClick={handleThumbBarClick}\n            style={{\n              background: thumbBackground,\n            }}\n          >\n            {colors.current.map((t) => {\n              const left = `${Math.round(t.left * 100) / 100}%`;\n              return (\n                <li\n                  className={classNames([\n                    `${baseClassName}__thumb`,\n                    'gradient-thumbs__item',\n                    selectedId.current === t.id ? statusClassNames.active : '',\n                  ])}\n                  key={t.id}\n                  title={`${t.color} ${left}`}\n                  style={{\n                    color: t.color,\n                    left,\n                  }}\n                  onClick={handleClickThumb}\n                  onMouseDown={(e: ReactMouseEvent) => handleStart(t.id, e)}\n                >\n                  <span className={classNames(['gradient-thumbs__item-inner', `${baseClassName}--bg-alpha`])}></span>\n                </li>\n              );\n            })}\n          </ul>\n        </div>\n      </div>\n      <div className={`${baseClassName}__gradient-degree`} title={`${degree}deg`}>\n        <InputNumber\n          theme=\"normal\"\n          min={0}\n          max={360}\n          step={1}\n          format={(value: number) => `${value}°`}\n          value={degree.current}\n          onBlur={handleDegreeChange}\n          onEnter={handleDegreeChange}\n          disabled={props.disabled}\n        />\n      </div>\n      <div className={classNames([`${baseClassName}__gradient-preview`, `${baseClassName}--bg-alpha`])}>\n        <span\n          className=\"preview-inner\"\n          style={{\n            background: linearGradient,\n          }}\n        ></span>\n      </div>\n    </div>\n  );\n};\n\nexport default React.memo(LinearGradient);\n"],"names":["DELETE_KEYS","LinearGradient","props","onChange","color","disabled","baseClassName","useClassname","useCommonClassName","statusClassNames","STATUS","refSlider","useRef","sliderRectRef","left","width","GRADIENT_SLIDER_DEFAULT_WIDTH","isDragging","isMoved","degree","gradientDegree","selectedId","gradientSelectedId","colors","cloneDeep","gradientColors","useEffect","current","updateSliderRect","rect","getBoundingClientRect","handleChange","useCallback","key","payload","addUsedColor","handleDegreeChange","value","handleSelectedIdChange","handleColorsChange","isEnded","updateActiveThumbLeft","index","findIndex","c","id","point","formatLeft","Math","max","min","percentLeft","newColors","map","item","i","handleStart","e","preventDefault","stopPropagation","focus","handleMove","clientX","x","handleEnd","setTimeout","handleKeyup","points","pos","length","includes","toLocaleLowerCase","splice","handleThumbBarClick","newPoint","genGradientPoint","rgba","push","window","addEventListener","removeEventListener","linearGradient","thumbBackground","gradientColors2string","handleClickThumb","React","createElement","className","classNames","onKeyUp","tabIndex","ref","onClick","style","background","t","round","active","title","onMouseDown","InputNumber","theme","step","format","onBlur","onEnter","memo"],"mappings":"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"}

package/es/color-picker/components/panel/saturation.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TdColorBaseProps } from '../../interface';
+declare const _default: React.MemoExoticComponent<(props: TdColorBaseProps) => JSX.Element>;
+export default _default;

package/es/color-picker/components/panel/saturation.js

@@ -0,0 +1,124 @@
+/**
+ * tdesign v0.32.0
+ * (c) 2022 tdesign
+ * @license MIT
+ */
+
+import { _ as _defineProperty } from '../../../_chunks/dep-8a61427d.js';
+import React, { useRef, useCallback, useEffect } from 'react';
+import { SATURATION_PANEL_DEFAULT_WIDTH, SATURATION_PANEL_DEFAULT_HEIGHT } from '../../const.js';
+import useDrag from '../../../_util/useDrag.js';
+
+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 Saturation = function Saturation(props) {
+  var color = props.color,
+      disabled = props.disabled,
+      onChange = props.onChange,
+      baseClassName = props.baseClassName;
+  var panelRef = useRef(null);
+  var thumbRef = useRef(null);
+  var panelRectRef = useRef({
+    width: SATURATION_PANEL_DEFAULT_WIDTH,
+    height: SATURATION_PANEL_DEFAULT_HEIGHT
+  });
+
+  var styles = function styles() {
+    var saturation = color.saturation,
+        value = color.value,
+        rgb = color.rgb;
+    var _panelRectRef$current = panelRectRef.current,
+        width = _panelRectRef$current.width,
+        height = _panelRectRef$current.height;
+    var top = Math.round((1 - value) * height);
+    var left = Math.round(saturation * width);
+    return {
+      color: rgb,
+      left: "".concat(left, "px"),
+      top: "".concat(top, "px")
+    };
+  };
+
+  var getSaturationAndValueByCoordinate = function getSaturationAndValueByCoordinate(coordinate) {
+    var _panelRectRef$current2 = panelRectRef.current,
+        width = _panelRectRef$current2.width,
+        height = _panelRectRef$current2.height;
+    var x = coordinate.x,
+        y = coordinate.y;
+    var saturation = Math.round(x / width * 100);
+    var value = Math.round((1 - y / height) * 100);
+    return {
+      saturation: saturation,
+      value: value
+    };
+  };
+
+  var isDragging = useRef(false);
+  var handleDrag = useCallback(function (_ref, isEnd) {
+    var x = _ref.x,
+        y = _ref.y;
+
+    if (disabled) {
+      return;
+    }
+
+    isDragging.current = true;
+
+    var _getSaturationAndValu = getSaturationAndValueByCoordinate({
+      x: x,
+      y: y
+    }),
+        saturation = _getSaturationAndValu.saturation,
+        value = _getSaturationAndValu.value;
+
+    onChange({
+      saturation: saturation / 100,
+      value: value / 100,
+      addUsedColor: isEnd
+    });
+  }, [disabled, onChange]);
+  var handleDragEnd = useCallback(function (coordinate) {
+    if (disabled) {
+      return;
+    }
+
+    isDragging.current = false;
+    handleDrag(coordinate, true);
+  }, []);
+  useDrag(panelRef, {
+    start: function start() {
+      panelRectRef.current.width = panelRef.current.offsetWidth;
+      panelRectRef.current.height = panelRef.current.offsetHeight;
+    },
+    end: function end(coordinate) {
+      handleDragEnd(coordinate);
+    },
+    drag: function drag(coordinate) {
+      handleDrag(coordinate);
+    }
+  });
+  useEffect(function () {
+    panelRectRef.current.width = panelRef.current.offsetWidth || SATURATION_PANEL_DEFAULT_WIDTH;
+    panelRectRef.current.height = panelRef.current.offsetHeight || SATURATION_PANEL_DEFAULT_HEIGHT;
+  }, [handleDrag, handleDragEnd]);
+  return /* @__PURE__ */React.createElement("div", {
+    className: "".concat(baseClassName, "__saturation"),
+    ref: panelRef,
+    style: {
+      background: "hsl(".concat(color.hue, ", 100%, 50%)")
+    }
+  }, /* @__PURE__ */React.createElement("span", {
+    className: "".concat(baseClassName, "__thumb"),
+    role: "slider",
+    tabIndex: 0,
+    ref: thumbRef,
+    style: _objectSpread({}, styles())
+  }));
+};
+
+var SaturationPanel = /*#__PURE__*/React.memo(Saturation);
+
+export { SaturationPanel as default };
+//# sourceMappingURL=saturation.js.map

package/es/color-picker/components/panel/saturation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"saturation.js","sources":["../../../../src/color-picker/components/panel/saturation.tsx"],"sourcesContent":["import React, { useRef, useEffect, useCallback } from 'react';\nimport { SATURATION_PANEL_DEFAULT_HEIGHT, SATURATION_PANEL_DEFAULT_WIDTH } from '../../const';\nimport { TdColorBaseProps } from '../../interface';\nimport useDrag, { Coordinate } from '../../../_util/useDrag';\n\nconst Saturation = (props: TdColorBaseProps) => {\n  const { color, disabled, onChange, baseClassName } = props;\n  const panelRef = useRef<HTMLDivElement>(null);\n  const thumbRef = useRef<HTMLElement>(null);\n  const panelRectRef = useRef({\n    width: SATURATION_PANEL_DEFAULT_WIDTH,\n    height: SATURATION_PANEL_DEFAULT_HEIGHT,\n  });\n\n  const styles = () => {\n    const { saturation, value, rgb } = color;\n    const { width, height } = panelRectRef.current;\n    const top = Math.round((1 - value) * height);\n    const left = Math.round(saturation * width);\n    return {\n      color: rgb,\n      left: `${left}px`,\n      top: `${top}px`,\n    };\n  };\n\n  const getSaturationAndValueByCoordinate = (coordinate: Coordinate) => {\n    const { width, height } = panelRectRef.current;\n    const { x, y } = coordinate;\n    const saturation = Math.round((x / width) * 100);\n    const value = Math.round((1 - y / height) * 100);\n    return {\n      saturation,\n      value,\n    };\n  };\n\n  const isDragging = useRef<Boolean>(false);\n\n  const handleDrag = useCallback(\n    ({ x, y }: Coordinate, isEnd?: boolean) => {\n      if (disabled) {\n        return;\n      }\n      isDragging.current = true;\n      const { saturation, value } = getSaturationAndValueByCoordinate({ x, y });\n      onChange({\n        saturation: saturation / 100,\n        value: value / 100,\n        addUsedColor: isEnd,\n      });\n    },\n    [disabled, onChange],\n  );\n\n  const handleDragEnd = useCallback((coordinate: Coordinate) => {\n    if (disabled) {\n      return;\n    }\n    isDragging.current = false;\n    handleDrag(coordinate, true);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useDrag(panelRef, {\n    start: () => {\n      panelRectRef.current.width = panelRef.current.offsetWidth;\n      panelRectRef.current.height = panelRef.current.offsetHeight;\n    },\n    end: (coordinate: Coordinate) => {\n      handleDragEnd(coordinate);\n    },\n    drag: (coordinate: Coordinate) => {\n      handleDrag(coordinate);\n    },\n  });\n\n  useEffect(() => {\n    panelRectRef.current.width = panelRef.current.offsetWidth || SATURATION_PANEL_DEFAULT_WIDTH;\n    panelRectRef.current.height = panelRef.current.offsetHeight || SATURATION_PANEL_DEFAULT_HEIGHT;\n  }, [handleDrag, handleDragEnd]);\n\n  return (\n    <div\n      className={`${baseClassName}__saturation`}\n      ref={panelRef}\n      style={{\n        background: `hsl(${color.hue}, 100%, 50%)`,\n      }}\n    >\n      <span\n        className={`${baseClassName}__thumb`}\n        role=\"slider\"\n        tabIndex={0}\n        ref={thumbRef}\n        style={{ ...styles() }}\n      ></span>\n    </div>\n  );\n};\n\nexport default React.memo(Saturation);\n"],"names":["Saturation","props","color","disabled","onChange","baseClassName","panelRef","useRef","thumbRef","panelRectRef","width","SATURATION_PANEL_DEFAULT_WIDTH","height","SATURATION_PANEL_DEFAULT_HEIGHT","styles","saturation","value","rgb","current","top","Math","round","left","getSaturationAndValueByCoordinate","coordinate","x","y","isDragging","handleDrag","useCallback","isEnd","addUsedColor","handleDragEnd","useDrag","start","offsetWidth","offsetHeight","end","drag","useEffect","React","createElement","className","ref","style","background","hue","role","tabIndex","memo"],"mappings":"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"}

package/es/color-picker/components/panel/slider.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TdColorBaseProps } from '../../interface';
+export interface TdColorSliderProps extends TdColorBaseProps {
+    className?: string;
+    value?: Number;
+    maxValue?: Number;
+    railStyle?: Object;
+}
+declare const _default: React.MemoExoticComponent<(props: TdColorSliderProps) => JSX.Element>;
+export default _default;