tdesign-react 0.31.2-alpha.1 → 0.31.2-alpha.2

package/esm/color-picker/components/panel/header.js

@@ -0,0 +1,100 @@
+/**
+ * tdesign v0.31.1
+ * (c) 2022 tdesign
+ * @license MIT
+ */
+
+import React from 'react';
+import classNames from 'classnames';
+import { CloseIcon } from 'tdesign-icons-react';
+import { COLOR_MODES } from '../../const.js';
+import { Radio } from '../../../radio/index.js';
+import '../../../_chunks/dep-07385e51.js';
+import '../../../_chunks/dep-1628aaec.js';
+import '../../../_util/forwardRefWithStatics.js';
+import 'hoist-non-react-statics';
+import '../../../common/Check.js';
+import '../../../_chunks/dep-aca05d9d.js';
+import '../../../_chunks/dep-85a9595a.js';
+import '../../../_chunks/dep-ea842483.js';
+import '../../../_util/helper.js';
+import '../../../_chunks/dep-e0790d2e.js';
+import '../../../_chunks/dep-8702aba9.js';
+import '../../../_chunks/dep-020d9062.js';
+import '../../../_chunks/dep-db8880c0.js';
+import '../../../_chunks/dep-8efaaac0.js';
+import '../../../_chunks/dep-ae52f85e.js';
+import '../../../_chunks/dep-63ed508e.js';
+import '../../../_chunks/dep-fd1b4e24.js';
+import '../../../_chunks/dep-9b67144e.js';
+import '../../../_chunks/dep-0d23bb2c.js';
+import '../../../_chunks/dep-db65b23a.js';
+import '../../../_util/useConfig.js';
+import '../../../_chunks/dep-bbad8591.js';
+import '../../../_chunks/dep-e9e7c24f.js';
+import '../../../_chunks/dep-c47502ef.js';
+import '../../../_chunks/dep-3a2f4bdf.js';
+import '../../../_chunks/dep-d51fd958.js';
+import '../../../_chunks/dep-d539b435.js';
+import '../../../_chunks/dep-2b0021c1.js';
+import '../../../_chunks/dep-09299e3f.js';
+import '../../../_chunks/dep-23b2574f.js';
+import '../../../_chunks/dep-a1403158.js';
+import '../../../_chunks/dep-c03c5f48.js';
+import '../../../_chunks/dep-d038aaf3.js';
+import '../../../_chunks/dep-00728537.js';
+import '../../../_chunks/dep-32abd81f.js';
+import '../../../_chunks/dep-f3e5eb4b.js';
+import '../../../_chunks/dep-155571ca.js';
+import '../../../_chunks/dep-81670ae9.js';
+import '../../../locale/zh_CN.js';
+import '../../../_common/js/global-config/locale/zh_CN.js';
+import '../../../config-provider/zh_CN_config.js';
+import '../../../_util/useDefault.js';
+import '../../../_util/noop.js';
+import '../../../_util/useCommonClassName.js';
+import '../../../_util/useMutationObserver.js';
+import '../../../_chunks/dep-be94af1f.js';
+import '../../../_chunks/dep-5e457cfd.js';
+import '../../../radio/style/index.js';
+import '../../../radio/type.js';
+
+var Header = function Header(props) {
+  var baseClassName = props.baseClassName,
+      _props$mode = props.mode,
+      mode = _props$mode === void 0 ? "monochrome" : _props$mode,
+      colorModes = props.colorModes,
+      togglePopup = props.togglePopup,
+      _props$closeBtn = props.closeBtn,
+      closeBtn = _props$closeBtn === void 0 ? true : _props$closeBtn,
+      onModeChange = props.onModeChange;
+
+  var handleClosePopup = function handleClosePopup() {
+    togglePopup === null || togglePopup === void 0 ? void 0 : togglePopup(false);
+  };
+
+  return /* @__PURE__ */React.createElement("div", {
+    className: "".concat(baseClassName, "__head")
+  }, /* @__PURE__ */React.createElement("div", {
+    className: "".concat(baseClassName, "__mode")
+  }, (colorModes === null || colorModes === void 0 ? void 0 : colorModes.length) === 1 ? COLOR_MODES[colorModes[0]] : /* @__PURE__ */React.createElement(Radio.Group, {
+    variant: "default-filled",
+    size: "small",
+    value: mode,
+    onChange: onModeChange
+  }, Object.keys(COLOR_MODES).map(function (key) {
+    return /* @__PURE__ */React.createElement(Radio.Button, {
+      key: key,
+      value: key
+    }, COLOR_MODES[key]);
+  }))), closeBtn ? /* @__PURE__ */React.createElement("span", {
+    role: "button",
+    className: classNames("".concat(baseClassName, "__icon"), "".concat(baseClassName, "__close")),
+    onClick: handleClosePopup
+  }, /* @__PURE__ */React.createElement(CloseIcon, null)) : null);
+};
+
+var PanelHeader = /*#__PURE__*/React.memo(Header);
+
+export { PanelHeader as default };
+//# sourceMappingURL=header.js.map

package/esm/color-picker/components/panel/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","sources":["../../../../src/color-picker/components/panel/header.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { CloseIcon } from 'tdesign-icons-react';\nimport { COLOR_MODES } from '../../const';\nimport Radio, { RadioValue } from '../../../radio';\nimport { TdColorModes } from '../../interface';\nimport { TdColorPickerProps } from '../../type';\n\nexport interface ColorPanelHeaderProps extends TdColorPickerProps {\n  mode?: TdColorModes;\n  togglePopup?: Function;\n  onModeChange?: (value: RadioValue, context: { e: React.ChangeEvent<HTMLInputElement> }) => void;\n  baseClassName?: string;\n}\n\nconst Header = (props: ColorPanelHeaderProps) => {\n  const { baseClassName, mode = 'monochrome', colorModes, togglePopup, closeBtn = true, onModeChange } = props;\n\n  const handleClosePopup = () => {\n    togglePopup?.(false);\n  };\n\n  return (\n    <div className={`${baseClassName}__head`}>\n      <div className={`${baseClassName}__mode`}>\n        {colorModes?.length === 1 ? (\n          COLOR_MODES[colorModes[0]]\n        ) : (\n          <Radio.Group variant=\"default-filled\" size=\"small\" value={mode} onChange={onModeChange}>\n            {Object.keys(COLOR_MODES).map((key) => (\n              <Radio.Button key={key} value={key}>\n                {COLOR_MODES[key]}\n              </Radio.Button>\n            ))}\n          </Radio.Group>\n        )}\n      </div>\n      {closeBtn ? (\n        <span\n          role=\"button\"\n          className={classNames(`${baseClassName}__icon`, `${baseClassName}__close`)}\n          onClick={handleClosePopup}\n        >\n          <CloseIcon />\n        </span>\n      ) : null}\n    </div>\n  );\n};\n\nexport default React.memo(Header);\n"],"names":["Header","props","baseClassName","mode","colorModes","togglePopup","closeBtn","onModeChange","handleClosePopup","React","createElement","className","length","COLOR_MODES","Radio","Group","variant","size","value","onChange","Object","keys","map","key","Button","role","classNames","onClick","CloseIcon","memo"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD,EAAW;AACxB,EAAA,IAAQC,aAAR,GAAuGD,KAAvG,CAAQC,aAAR;AAAA,MAAuGD,WAAAA,GAAAA,KAAvG,CAAuBE,IAAvB;AAAA,MAAuBA,IAAvB,4BAA8B,YAA9B,GAAA,WAAA;AAAA,MAA4CC,UAA5C,GAAuGH,KAAvG,CAA4CG,UAA5C;AAAA,MAAwDC,WAAxD,GAAuGJ,KAAvG,CAAwDI,WAAxD;AAAA,MAAuGJ,eAAAA,GAAAA,KAAvG,CAAqEK,QAArE;AAAA,MAAqEA,QAArE,gCAAgF,IAAhF,GAAA,eAAA;AAAA,MAAsFC,YAAtF,GAAuGN,KAAvG,CAAsFM,YAAtF,CAAA;;AACA,EAAA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAM;AAC7BH,IAAAA,WAAW,SAAX,IAAAA,WAAW,WAAX,GAAAA,KAAAA,CAAAA,GAAAA,WAAW,CAAG,KAAH,CAAX,CAAA;AACD,GAFD,CAAA;;AAGA,EAAA,sBAAuBI,KAAK,CAACC,aAAN,CAAoB,KAApB,EAA2B;AAChDC,IAAAA,SAAS,YAAKT,aAAL,EAAA,QAAA,CAAA;AADuC,GAA3B,iBAEJO,KAAK,CAACC,aAAN,CAAoB,KAApB,EAA2B;AAC5CC,IAAAA,SAAS,YAAKT,aAAL,EAAA,QAAA,CAAA;AADmC,GAA3B,EAEhB,CAAAE,UAAU,KAAA,IAAV,IAAAA,UAAU,KAAV,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,UAAU,CAAEQ,MAAZ,MAAuB,CAAvB,GAA2BC,WAAW,CAACT,UAAU,CAAC,CAAD,CAAX,CAAtC,kBAAwEK,KAAK,CAACC,aAAN,CAAoBI,KAAK,CAACC,KAA1B,EAAiC;AAC1GC,IAAAA,OAAO,EAAE,gBADiG;AAE1GC,IAAAA,IAAI,EAAE,OAFoG;AAG1GC,IAAAA,KAAK,EAAEf,IAHmG;AAI1GgB,IAAAA,QAAQ,EAAEZ,YAAAA;AAJgG,GAAjC,EAKxEa,MAAM,CAACC,IAAP,CAAYR,WAAZ,CAAyBS,CAAAA,GAAzB,CAA6B,UAACC,GAAD,EAAA;AAAA,IAAS,sBAAgBd,KAAK,CAACC,aAAN,CAAoBI,KAAK,CAACU,MAA1B,EAAkC;AACzFD,MAAAA,GAAG,EAAHA,GADyF;AAEzFL,MAAAA,KAAK,EAAEK,GAAAA;AAFkF,KAAlC,EAGtDV,WAAW,CAACU,GAAD,CAH2C,CAAzB,CAAA;AAAA,GAA7B,CALwE,CAFxD,CAFI,EAYEjB,QAAQ,kBAAmBG,KAAK,CAACC,aAAN,CAAoB,MAApB,EAA4B;AAC9Ee,IAAAA,IAAI,EAAE,QADwE;AAE9Ed,IAAAA,SAAS,EAAEe,UAAU,WAAIxB,aAAJ,EAAA,QAAA,CAAA,EAAA,EAAA,CAAA,MAAA,CAA8BA,aAA9B,EAFyD,SAAA,CAAA,CAAA;AAG9EyB,IAAAA,OAAO,EAAEnB,gBAAAA;AAHqE,GAA5B,iBAIjCC,KAAK,CAACC,aAAN,CAAoBkB,SAApB,EAA+B,IAA/B,CAJiC,CAAnB,GAI0B,IAhBpC,CAAvB,CAAA;AAiBD,CAtBD,CAAA;;AAuBA,kBAAA,aAAenB,KAAK,CAACoB,IAAN,CAAW7B,MAAX,CAAf;;;;"}

package/esm/color-picker/components/panel/hue.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/esm/color-picker/components/panel/hue.js

@@ -0,0 +1,32 @@
+/**
+ * tdesign v0.31.1
+ * (c) 2022 tdesign
+ * @license MIT
+ */
+
+import React from 'react';
+import ColorSlider from './slider.js';
+import '../../../_chunks/dep-1628aaec.js';
+import 'classnames';
+import '../../const.js';
+import '../../../_util/useDrag.js';
+
+var HUESlider = function HUESlider(props) {
+  var color = props.color,
+      baseClassName = props.baseClassName,
+      disabled = props.disabled,
+      onChange = props.onChange;
+  return /* @__PURE__ */React.createElement(ColorSlider, {
+    disabled: disabled,
+    baseClassName: baseClassName,
+    className: "".concat(baseClassName, "__hue"),
+    color: color,
+    value: color.hue,
+    onChange: onChange
+  });
+};
+
+var HUESlider$1 = /*#__PURE__*/React.memo(HUESlider);
+
+export { HUESlider$1 as default };
+//# sourceMappingURL=hue.js.map

package/esm/color-picker/components/panel/hue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hue.js","sources":["../../../../src/color-picker/components/panel/hue.tsx"],"sourcesContent":["import React from 'react';\nimport ColorSlider from './slider';\nimport { TdColorBaseProps } from '../../interface';\n\nconst HUESlider = (props: TdColorBaseProps) => {\n  const { color, baseClassName, disabled, onChange } = props;\n  return (\n    <ColorSlider\n      disabled={disabled}\n      baseClassName={baseClassName}\n      className={`${baseClassName}__hue`}\n      color={color}\n      value={color.hue}\n      onChange={onChange}\n    />\n  );\n};\n\nexport default React.memo(HUESlider);\n"],"names":["HUESlider","props","color","baseClassName","disabled","onChange","React","createElement","ColorSlider","className","value","hue","memo"],"mappings":";;;;;;;;;;;;;AAEA,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,KAAD,EAAW;AAC3B,EAAA,IAAQC,KAAR,GAAqDD,KAArD,CAAQC,KAAR;AAAA,MAAeC,aAAf,GAAqDF,KAArD,CAAeE,aAAf;AAAA,MAA8BC,QAA9B,GAAqDH,KAArD,CAA8BG,QAA9B;AAAA,MAAwCC,QAAxC,GAAqDJ,KAArD,CAAwCI,QAAxC,CAAA;AACA,EAAA,sBAAuBC,KAAK,CAACC,aAAN,CAAoBC,WAApB,EAAiC;AACtDJ,IAAAA,QAAQ,EAARA,QADsD;AAEtDD,IAAAA,aAAa,EAAbA,aAFsD;AAGtDM,IAAAA,SAAS,EAAKN,EAAAA,CAAAA,MAAAA,CAAAA,aAAL,EAH6C,OAAA,CAAA;AAItDD,IAAAA,KAAK,EAALA,KAJsD;AAKtDQ,IAAAA,KAAK,EAAER,KAAK,CAACS,GALyC;AAMtDN,IAAAA,QAAQ,EAARA,QAAAA;AANsD,GAAjC,CAAvB,CAAA;AAQD,CAVD,CAAA;;AAWA,kBAAA,aAAeC,KAAK,CAACM,IAAN,CAAWZ,SAAX,CAAf;;;;"}

package/esm/color-picker/components/panel/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ColorPickerProps } from '../../interface';
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<ColorPickerProps, "value" | "style" | "className" | "disabled" | "multiple" | "defaultValue" | "format" | "onChange" | "popupProps" | "inputProps" | "selectInputProps" | "closeBtn" | "togglePopup" | "colorModes" | "enableAlpha" | "recentColors" | "defaultRecentColors" | "swatchColors" | "onPaletteBarChange" | "onRecentColorsChange"> & React.RefAttributes<HTMLDivElement>>>;
+export default _default;

package/esm/color-picker/components/panel/index.js

@@ -0,0 +1,465 @@
+/**
+ * tdesign v0.31.1
+ * (c) 2022 tdesign
+ * @license MIT
+ */
+
+import { _ as _defineProperty } from '../../../_chunks/dep-1628aaec.js';
+import { _ as _toConsumableArray } from '../../../_chunks/dep-3cf23cb4.js';
+import { _ as _slicedToArray } from '../../../_chunks/dep-aca05d9d.js';
+import React, { forwardRef, useRef, useEffect, useState } from 'react';
+import classNames from 'classnames';
+import useCommonClassName from '../../../_util/useCommonClassName.js';
+import useDefault from '../../../_util/useDefault.js';
+import { useLocaleReceiver } from '../../../locale/LocalReceiver.js';
+import useClassname from '../../hooks/useClassname.js';
+import PanelHeader from './header.js';
+import { Color, getColorObject } from '../../../_common/js/color-picker/color.js';
+import { DEFAULT_COLOR, DEFAULT_LINEAR_GRADIENT, TD_COLOR_USED_COLORS_MAX_SIZE, DEFAULT_SYSTEM_SWATCH_COLORS } from '../../const.js';
+import LinearGradient from './linear-gradient.js';
+import SaturationPanel from './saturation.js';
+import HUESlider from './hue.js';
+import AlphaSlider from './alpha.js';
+import FormatPanel from './format/index.js';
+import SwatchesPanel from './swatches.js';
+import '../../../_chunks/dep-85a9595a.js';
+import '../../../_util/useConfig.js';
+import '../../../_chunks/dep-bbad8591.js';
+import '../../../_chunks/dep-8702aba9.js';
+import '../../../_chunks/dep-e9e7c24f.js';
+import '../../../_chunks/dep-c47502ef.js';
+import '../../../_chunks/dep-3a2f4bdf.js';
+import '../../../_chunks/dep-d51fd958.js';
+import '../../../_chunks/dep-db8880c0.js';
+import '../../../_chunks/dep-8efaaac0.js';
+import '../../../_chunks/dep-d539b435.js';
+import '../../../_chunks/dep-2b0021c1.js';
+import '../../../_chunks/dep-09299e3f.js';
+import '../../../_chunks/dep-23b2574f.js';
+import '../../../_chunks/dep-a1403158.js';
+import '../../../_chunks/dep-c03c5f48.js';
+import '../../../_chunks/dep-9b67144e.js';
+import '../../../_chunks/dep-d038aaf3.js';
+import '../../../_chunks/dep-00728537.js';
+import '../../../_chunks/dep-32abd81f.js';
+import '../../../_chunks/dep-f3e5eb4b.js';
+import '../../../_chunks/dep-ae52f85e.js';
+import '../../../_chunks/dep-63ed508e.js';
+import '../../../_chunks/dep-155571ca.js';
+import '../../../_chunks/dep-81670ae9.js';
+import '../../../locale/zh_CN.js';
+import '../../../_common/js/global-config/locale/zh_CN.js';
+import '../../../config-provider/zh_CN_config.js';
+import '../../../_util/noop.js';
+import '../../../config-provider/index.js';
+import '../../../config-provider/ConfigProvider.js';
+import 'tdesign-icons-react';
+import '../../../radio/index.js';
+import '../../../_chunks/dep-07385e51.js';
+import '../../../_util/forwardRefWithStatics.js';
+import 'hoist-non-react-statics';
+import '../../../common/Check.js';
+import '../../../_chunks/dep-ea842483.js';
+import '../../../_util/helper.js';
+import '../../../_chunks/dep-e0790d2e.js';
+import '../../../_chunks/dep-020d9062.js';
+import '../../../_chunks/dep-fd1b4e24.js';
+import '../../../_chunks/dep-0d23bb2c.js';
+import '../../../_chunks/dep-db65b23a.js';
+import '../../../_util/useMutationObserver.js';
+import '../../../_chunks/dep-be94af1f.js';
+import '../../../_chunks/dep-5e457cfd.js';
+import '../../../radio/style/index.js';
+import '../../../radio/type.js';
+import '../../../_chunks/dep-926c2765.js';
+import 'tinycolor2';
+import '../../../_common/js/color-picker/cmyk.js';
+import '../../../_common/js/color-picker/gradient.js';
+import '../../../_chunks/dep-9926d76f.js';
+import '../../../_chunks/dep-cdbc448f.js';
+import '../../../_chunks/dep-d17dffc0.js';
+import '../../../_chunks/dep-6bf856c2.js';
+import '../../../_chunks/dep-d820193b.js';
+import '../../../input-number/index.js';
+import '../../../input-number/InputNumber.js';
+import '../../../_util/useUpdateEffect.js';
+import '../../../_util/useLayoutEffect.js';
+import '../../../_util/dom.js';
+import 'raf';
+import '../../../_chunks/dep-c9e242b1.js';
+import '../../../_util/easing.js';
+import '../../../input-number/StepHandler.js';
+import '../../../button/index.js';
+import '../../../button/Button.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 '../../../loading/style/index.js';
+import '../../../loading/type.js';
+import '../../../button/style/index.js';
+import '../../../button/type.js';
+import '../../../input-number/utils/numberUtils.js';
+import '../../../input/index.js';
+import '../../../input/Input.js';
+import '../../../input/InputGroup.js';
+import '../../../_util/useDefaultValue.js';
+import '../../../input/style/index.js';
+import '../../../input/type.js';
+import '../../../input-number/style/index.js';
+import '../../../input-number/type.js';
+import '../../../_util/useDrag.js';
+import './slider.js';
+import 'lodash';
+import '../../../select/index.js';
+import '../../../select/base/Select.js';
+import '../../../_chunks/dep-83cb7911.js';
+import '../../../_chunks/dep-83177e8d.js';
+import '../../../select/util/helper.js';
+import '../../../select/base/OptionGroup.js';
+import '../../../select/base/Option.js';
+import '../../../_chunks/dep-cf0a5e4d.js';
+import '../../../common/FakeArrow.js';
+import '../../../select-input/index.js';
+import '../../../select-input/SelectInput.js';
+import '../../../popup/index.js';
+import '../../../popup/Popup.js';
+import 'react-transition-group';
+import 'react-popper';
+import '../../../_util/composeRefs.js';
+import '../../../popup/hooks/useTriggerProps.js';
+import '../../../_util/useClickOutside.js';
+import '../../../popup/utils/getTransitionParams.js';
+import '../../../_util/useWindowSize.js';
+import '../../../popup/style/index.js';
+import '../../../popup/type.js';
+import '../../../select-input/useSingle.js';
+import '../../../_chunks/dep-41ddaf4d.js';
+import '../../../_chunks/dep-3ce0d185.js';
+import '../../../_chunks/dep-b1d1fc8a.js';
+import '../../../_chunks/dep-65dde75f.js';
+import '../../../select-input/useMultiple.js';
+import '../../../tag-input/index.js';
+import '../../../tag-input/TagInput.js';
+import '../../../_util/useDragSorter.js';
+import '../../../tag-input/useTagScroll.js';
+import '../../../tag-input/useTagList.js';
+import '../../../tag/index.js';
+import '../../../tag/Tag.js';
+import '../../../tag/CheckTag.js';
+import '../../../tag/style/index.js';
+import '../../../tag/type.js';
+import '../../../tag-input/useHover.js';
+import '../../../tag-input/style/index.js';
+import '../../../tag-input/type.js';
+import '../../../select-input/useOverlayStyle.js';
+import '../../../select-input/style/index.js';
+import '../../../select-input/type.js';
+import '../../../select/base/PopupContent.js';
+import '../../../select/style/index.js';
+import '../../../select/type.js';
+import './format/inputs.js';
+import './format/config.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 Panel = /*#__PURE__*/forwardRef(function (props, ref) {
+  var baseClassName = useClassname();
+
+  var _useCommonClassName = useCommonClassName(),
+      STATUS = _useCommonClassName.STATUS;
+
+  var _useLocaleReceiver = useLocaleReceiver("colorPicker"),
+      _useLocaleReceiver2 = _slicedToArray(_useLocaleReceiver, 2),
+      local = _useLocaleReceiver2[0],
+      t = _useLocaleReceiver2[1];
+
+  var disabled = props.disabled,
+      value = props.value,
+      defaultValue = props.defaultValue,
+      onChange = props.onChange,
+      _props$enableAlpha = props.enableAlpha,
+      enableAlpha = _props$enableAlpha === void 0 ? false : _props$enableAlpha,
+      format = props.format,
+      onPaletteBarChange = props.onPaletteBarChange,
+      swatchColors = props.swatchColors,
+      className = props.className,
+      _props$style = props.style,
+      style = _props$style === void 0 ? {} : _props$style,
+      togglePopup = props.togglePopup,
+      closeBtn = props.closeBtn,
+      _props$colorModes = props.colorModes,
+      colorModes = _props$colorModes === void 0 ? ["linear-gradient", "monochrome"] : _props$colorModes;
+
+  var _useDefault = useDefault(value, defaultValue, onChange),
+      _useDefault2 = _slicedToArray(_useDefault, 2),
+      innerValue = _useDefault2[0],
+      setInnerValue = _useDefault2[1];
+
+  var colorInstanceRef = useRef(new Color(innerValue || DEFAULT_COLOR));
+  useEffect(function () {
+    colorInstanceRef.current.update(defaultValue || DEFAULT_COLOR);
+  }, [defaultValue]);
+  var getmodeByColor = colorInstanceRef.current.isGradient ? "linear-gradient" : "monochrome";
+
+  var _useState = useState("monochrome"),
+      _useState2 = _slicedToArray(_useState, 2),
+      mode = _useState2[0],
+      setMode = _useState2[1];
+
+  useEffect(function () {
+    if (colorModes.length === 1) {
+      setMode(colorModes[0]);
+    } else {
+      setMode(getmodeByColor);
+    }
+  }, [colorModes, getmodeByColor]);
+  var formatRef = useRef(colorInstanceRef.current.isGradient ? "CSS" : "RGB");
+  var recentColors = props.recentColors,
+      defaultRecentColors = props.defaultRecentColors,
+      onRecentColorsChange = props.onRecentColorsChange;
+
+  var _useDefault3 = useDefault(recentColors, defaultRecentColors, onRecentColorsChange),
+      _useDefault4 = _slicedToArray(_useDefault3, 2),
+      recentlyUsedColors = _useDefault4[0],
+      setRecentlyUsedColors = _useDefault4[1];
+
+  var baseProps = {
+    color: colorInstanceRef.current,
+    disabled: disabled,
+    baseClassName: baseClassName
+  };
+
+  var handleModeChange = function handleModeChange(value2) {
+    setMode(value2);
+    var _colorInstanceRef$cur = colorInstanceRef.current,
+        rgba = _colorInstanceRef$cur.rgba,
+        gradientColors = _colorInstanceRef$cur.gradientColors,
+        linearGradient = _colorInstanceRef$cur.linearGradient;
+
+    if (value2 === "linear-gradient") {
+      colorInstanceRef.current = new Color(gradientColors.length > 0 ? linearGradient : DEFAULT_LINEAR_GRADIENT);
+      return;
+    }
+
+    colorInstanceRef.current = new Color(rgba);
+  };
+
+  var formatValue = function formatValue() {
+    if (mode === "linear-gradient") {
+      return colorInstanceRef.current.linearGradient;
+    }
+
+    return colorInstanceRef.current.getFormatsColorMap()[format] || colorInstanceRef.current.css;
+  };
+
+  var handleRecentlyUsedColorsChange = function handleRecentlyUsedColorsChange(colors) {
+    setRecentlyUsedColors(colors);
+  };
+
+  var addRecentlyUsedColor = function addRecentlyUsedColor() {
+    if (recentlyUsedColors === null || recentlyUsedColors === false) {
+      return;
+    }
+
+    var colors = _toConsumableArray(recentlyUsedColors || []);
+
+    var _colorInstanceRef$cur2 = colorInstanceRef.current,
+        isGradient = _colorInstanceRef$cur2.isGradient,
+        linearGradient = _colorInstanceRef$cur2.linearGradient,
+        rgba = _colorInstanceRef$cur2.rgba;
+    var currentColor = isGradient ? linearGradient : rgba;
+    var index = colors.indexOf(currentColor);
+
+    if (index > -1) {
+      colors.splice(index, 1);
+    }
+
+    colors.unshift(currentColor);
+
+    if (colors.length > TD_COLOR_USED_COLORS_MAX_SIZE) {
+      colors.length = TD_COLOR_USED_COLORS_MAX_SIZE;
+    }
+
+    handleRecentlyUsedColorsChange(colors);
+  };
+
+  var emitColorChange = function emitColorChange(trigger) {
+    setInnerValue(formatValue(), {
+      color: getColorObject(colorInstanceRef.current),
+      trigger: trigger || "palette-saturation-brightness"
+    });
+  };
+
+  var handleSaturationChange = function handleSaturationChange(_ref) {
+    var saturation = _ref.saturation,
+        value2 = _ref.value;
+    var _colorInstanceRef$cur3 = colorInstanceRef.current,
+        sat = _colorInstanceRef$cur3.saturation,
+        val = _colorInstanceRef$cur3.value;
+    var changeTrigger = "palette-saturation-brightness";
+    colorInstanceRef.current.saturation = saturation;
+    colorInstanceRef.current.value = value2;
+
+    if (value2 !== val && saturation !== sat) {
+      changeTrigger = "palette-saturation-brightness";
+    } else if (saturation !== sat) {
+      changeTrigger = "palette-saturation";
+    } else if (value2 !== val) {
+      changeTrigger = "palette-brightness";
+    } else {
+      return;
+    }
+
+    emitColorChange(changeTrigger);
+  };
+
+  var handleHUEChange = function handleHUEChange(hue) {
+    colorInstanceRef.current.hue = hue;
+    emitColorChange("palette-hue-bar");
+    onPaletteBarChange === null || onPaletteBarChange === void 0 ? void 0 : onPaletteBarChange({
+      color: getColorObject(colorInstanceRef.current)
+    });
+  };
+
+  var handleAlphaChange = function handleAlphaChange(alpha) {
+    colorInstanceRef.current.alpha = alpha;
+    emitColorChange("palette-alpha-bar");
+    onPaletteBarChange === null || onPaletteBarChange === void 0 ? void 0 : onPaletteBarChange({
+      color: getColorObject(colorInstanceRef.current)
+    });
+  };
+
+  var handleGradientChange = function handleGradientChange(_ref2) {
+    var key = _ref2.key,
+        payload = _ref2.payload;
+    var trigger = "palette-saturation-brightness";
+
+    switch (key) {
+      case "degree":
+        colorInstanceRef.current.gradientDegree = payload;
+        trigger = "input";
+        break;
+
+      case "selectedId":
+        colorInstanceRef.current.gradientSelectedId = payload;
+        break;
+
+      case "colors":
+        colorInstanceRef.current.gradientColors = payload;
+        break;
+    }
+
+    emitColorChange(trigger);
+  };
+
+  var handleFormatModeChange = function handleFormatModeChange(format2) {
+    return formatRef.current = format2;
+  };
+
+  var handleInputChange = function handleInputChange(input, alpha) {
+    colorInstanceRef.current.update(input);
+    colorInstanceRef.current.alpha = alpha;
+    emitColorChange("input");
+  };
+
+  var SwatchesArea = /*#__PURE__*/React.memo(function () {
+    var _systemColors;
+
+    var showUsedColors = recentColors !== null && recentColors !== false;
+    var systemColors = swatchColors;
+
+    if (systemColors === void 0) {
+      systemColors = _toConsumableArray(DEFAULT_SYSTEM_SWATCH_COLORS);
+    }
+
+    var showSystemColors = ((_systemColors = systemColors) === null || _systemColors === void 0 ? void 0 : _systemColors.length) > 0;
+
+    if (!showSystemColors && !showUsedColors) {
+      return null;
+    }
+
+    var handleSetColor = function handleSetColor(value2) {
+      var isGradientValue = Color.isGradientColor(value2);
+      var color = colorInstanceRef.current;
+
+      if (isGradientValue) {
+        if (colorModes.includes("linear-gradient")) {
+          setMode("linear-gradient");
+          color.update(value2);
+          color.updateCurrentGradientColor();
+        } else {
+          console.warn("\u8BE5\u6A21\u5F0F\u4E0D\u652F\u6301\u6E10\u53D8\u8272");
+        }
+      } else if (mode === "linear-gradient") {
+        color.updateStates(value2);
+        color.updateCurrentGradientColor();
+      } else {
+        color.update(value2);
+      }
+
+      emitColorChange();
+    };
+
+    return /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("div", {
+      className: "".concat(baseClassName, "__swatches-wrap")
+    }, showUsedColors && /* @__PURE__ */React.createElement(SwatchesPanel, _objectSpread(_objectSpread({}, baseProps), {}, {
+      title: t(local.recentColorTitle),
+      editable: true,
+      handleAddColor: addRecentlyUsedColor,
+      colors: recentlyUsedColors,
+      onSetColor: function onSetColor(color) {
+        return handleSetColor(color);
+      },
+      onChange: handleRecentlyUsedColorsChange
+    })), showSystemColors && /* @__PURE__ */React.createElement(SwatchesPanel, _objectSpread(_objectSpread({}, baseProps), {}, {
+      title: t(local.swatchColorTitle),
+      colors: systemColors,
+      onSetColor: function onSetColor(color) {
+        return handleSetColor(color);
+      }
+    }))));
+  });
+  return /* @__PURE__ */React.createElement("div", {
+    className: classNames("".concat(baseClassName, "__panel"), disabled ? STATUS.disabled : false, className),
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    style: _objectSpread({}, style),
+    ref: ref
+  }, /* @__PURE__ */React.createElement(PanelHeader, {
+    baseClassName: baseClassName,
+    mode: mode,
+    colorModes: colorModes,
+    closeBtn: closeBtn,
+    togglePopup: togglePopup,
+    onModeChange: handleModeChange
+  }), /* @__PURE__ */React.createElement("div", {
+    className: "".concat(baseClassName, "__body")
+  }, mode === "linear-gradient" && /* @__PURE__ */React.createElement(LinearGradient, _objectSpread(_objectSpread({}, baseProps), {}, {
+    onChange: handleGradientChange
+  })), /* @__PURE__ */React.createElement(SaturationPanel, _objectSpread(_objectSpread({}, baseProps), {}, {
+    onChange: handleSaturationChange
+  })), /* @__PURE__ */React.createElement(HUESlider, _objectSpread(_objectSpread({}, baseProps), {}, {
+    onChange: handleHUEChange
+  })), enableAlpha && /* @__PURE__ */React.createElement(AlphaSlider, _objectSpread(_objectSpread({}, baseProps), {}, {
+    onChange: handleAlphaChange
+  })), /* @__PURE__ */React.createElement(FormatPanel, _objectSpread(_objectSpread(_objectSpread({}, props), baseProps), {}, {
+    format: formatRef.current,
+    onModeChange: handleFormatModeChange,
+    onInputChange: handleInputChange
+  })), /* @__PURE__ */React.createElement(SwatchesArea, null)));
+});
+var ColorPanel = /*#__PURE__*/React.memo(Panel);
+
+export { ColorPanel as default };
+//# sourceMappingURL=index.js.map