tdesign-react 0.31.2-alpha.1 → 0.32.0

package/lib/color-picker/ColorPickerPanel.js

@@ -0,0 +1,170 @@
+/**
+ * tdesign v0.32.0
+ * (c) 2022 tdesign
+ * @license MIT
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var defineProperty = require('../_chunks/dep-59765535.js');
+var React = require('react');
+var colorPicker_components_panel_index = require('./components/panel/index.js');
+require('../_chunks/dep-495e820f.js');
+require('../_chunks/dep-2476807a.js');
+require('../_chunks/dep-28f89e64.js');
+require('classnames');
+require('../_util/useCommonClassName.js');
+require('../_util/useConfig.js');
+require('../_chunks/dep-160028a3.js');
+require('../_chunks/dep-f250efe9.js');
+require('../_chunks/dep-6b044992.js');
+require('../_chunks/dep-d78d4a02.js');
+require('../_chunks/dep-fb1b11ca.js');
+require('../_chunks/dep-9b448c2e.js');
+require('../_chunks/dep-e42b1d6f.js');
+require('../_chunks/dep-dbadac1a.js');
+require('../_chunks/dep-d04a9df9.js');
+require('../_chunks/dep-952e403b.js');
+require('../_chunks/dep-9920b2ff.js');
+require('../_chunks/dep-1d2db52a.js');
+require('../_chunks/dep-022a84e7.js');
+require('../_chunks/dep-b8481954.js');
+require('../_chunks/dep-83011b3b.js');
+require('../_chunks/dep-245fb652.js');
+require('../_chunks/dep-8fb6f912.js');
+require('../_chunks/dep-3d6fee40.js');
+require('../_chunks/dep-68031a17.js');
+require('../_chunks/dep-0c72eab7.js');
+require('../_common/js/global-config/locale/zh_CN.js');
+require('../config-provider/zh_CN_config.js');
+require('../_util/useDefault.js');
+require('../_util/noop.js');
+require('../locale/LocalReceiver.js');
+require('./hooks/useClassname.js');
+require('./components/panel/header.js');
+require('tdesign-icons-react');
+require('./const.js');
+require('../radio/index.js');
+require('../_chunks/dep-b96ba0bb.js');
+require('../_util/forwardRefWithStatics.js');
+require('hoist-non-react-statics');
+require('../common/Check.js');
+require('../_chunks/dep-fbb7cdca.js');
+require('../_util/helper.js');
+require('../_chunks/dep-e74f7a51.js');
+require('../_chunks/dep-92e7e8c4.js');
+require('../_chunks/dep-e08f0a55.js');
+require('../_chunks/dep-1de9cd59.js');
+require('../_chunks/dep-d3242103.js');
+require('../_util/useMutationObserver.js');
+require('../_chunks/dep-fea332a5.js');
+require('../_chunks/dep-726fb5a2.js');
+require('../_common/js/color-picker/color.js');
+require('../_chunks/dep-4809c698.js');
+require('tinycolor2');
+require('../_common/js/color-picker/cmyk.js');
+require('../_common/js/color-picker/gradient.js');
+require('./components/panel/linear-gradient.js');
+require('../_chunks/dep-fe74355d.js');
+require('../_chunks/dep-f11cc3e7.js');
+require('../_chunks/dep-f9d52ce8.js');
+require('../_chunks/dep-e2050934.js');
+require('../_chunks/dep-06909909.js');
+require('../input-number/index.js');
+require('../input-number/InputNumber.js');
+require('../_util/useUpdateEffect.js');
+require('../_util/useLayoutEffect.js');
+require('../_util/dom.js');
+require('raf');
+require('../_chunks/dep-f762ab0a.js');
+require('../_util/easing.js');
+require('../input-number/StepHandler.js');
+require('../button/index.js');
+require('../button/Button.js');
+require('../_util/useRipple.js');
+require('../_util/useAnimation.js');
+require('../_util/setStyle.js');
+require('../loading/index.js');
+require('../loading/Loading.js');
+require('../common/Portal.js');
+require('react-dom');
+require('../loading/gradient.js');
+require('../_common/js/loading/circle-adapter.js');
+require('../_common/js/utils/set-style.js');
+require('../_common/js/utils/helper.js');
+require('../loading/plugin.js');
+require('../input-number/utils/numberUtils.js');
+require('../input/index.js');
+require('../input/Input.js');
+require('../input/InputGroup.js');
+require('../_util/useDefaultValue.js');
+require('./components/panel/saturation.js');
+require('../_util/useDrag.js');
+require('./components/panel/hue.js');
+require('./components/panel/slider.js');
+require('./components/panel/alpha.js');
+require('./components/panel/format/index.js');
+require('lodash');
+require('../select/index.js');
+require('../select/base/Select.js');
+require('../_chunks/dep-2f797d69.js');
+require('../_chunks/dep-10876144.js');
+require('../select/util/helper.js');
+require('../select/base/OptionGroup.js');
+require('../select/base/Option.js');
+require('../_chunks/dep-453a6b38.js');
+require('../common/FakeArrow.js');
+require('../select-input/index.js');
+require('../select-input/SelectInput.js');
+require('../popup/index.js');
+require('../popup/Popup.js');
+require('react-transition-group');
+require('react-popper');
+require('../_util/composeRefs.js');
+require('../popup/hooks/useTriggerProps.js');
+require('../_util/useClickOutside.js');
+require('../popup/utils/getTransitionParams.js');
+require('../_util/useWindowSize.js');
+require('../select-input/useSingle.js');
+require('../_chunks/dep-87f59df3.js');
+require('../_chunks/dep-b7d6e904.js');
+require('../_chunks/dep-472f5215.js');
+require('../_chunks/dep-8c84b4fc.js');
+require('../select-input/useMultiple.js');
+require('../tag-input/index.js');
+require('../tag-input/TagInput.js');
+require('../_util/useDragSorter.js');
+require('../tag-input/useTagScroll.js');
+require('../tag-input/useTagList.js');
+require('../tag/index.js');
+require('../tag/Tag.js');
+require('../tag/CheckTag.js');
+require('../tag-input/useHover.js');
+require('../select-input/useOverlayStyle.js');
+require('../select/base/PopupContent.js');
+require('./components/panel/format/inputs.js');
+require('./components/panel/format/config.js');
+require('./components/panel/swatches.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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._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 ColorPickerPanel = function ColorPickerPanel(props) {
+  return /* @__PURE__ */React__default["default"].createElement(colorPicker_components_panel_index["default"], _objectSpread(_objectSpread({}, props), {}, {
+    popupProps: null,
+    closeBtn: false
+  }));
+};
+
+ColorPickerPanel.displayName = "ColorPickerPanel";
+var _ColorPickerPanel = /*#__PURE__*/React__default["default"].memo(ColorPickerPanel);
+
+exports["default"] = _ColorPickerPanel;
+//# sourceMappingURL=ColorPickerPanel.js.map

package/lib/color-picker/ColorPickerPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerPanel.js","sources":["../../src/color-picker/ColorPickerPanel.tsx"],"sourcesContent":["import React from 'react';\nimport ColorPanel from './components/panel';\nimport { ColorPickerProps } from './interface';\n\nconst ColorPickerPanel = (props: ColorPickerProps) => <ColorPanel {...props} popupProps={null} closeBtn={false} />;\n\nColorPickerPanel.displayName = 'ColorPickerPanel';\n\nexport default React.memo(ColorPickerPanel);\n"],"names":["ColorPickerPanel","props","React","createElement","ColorPanel","popupProps","closeBtn","displayName","memo"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD,EAAA;AAAA,EAAA,sBAA2BC,yBAAK,CAACC,aAAN,CAAoBC,6CAApB,kCAC/CH,KAD+C,CAAA,EAAA,EAAA,EAAA;AAElDI,IAAAA,UAAU,EAAE,IAFsC;AAGlDC,IAAAA,QAAQ,EAAE,KAAA;AAHwC,GAA3B,CAAA,CAAA,CAAA;AAAA,CAAzB,CAAA;;AAKAN,gBAAgB,CAACO,WAAjB,GAA+B,kBAA/B,CAAA;AACA,wBAAA,aAAeL,yBAAK,CAACM,IAAN,CAAWR,gBAAX,CAAf;;;;"}

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

@@ -0,0 +1,57 @@
+/**
+ * tdesign v0.32.0
+ * (c) 2022 tdesign
+ * @license MIT
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var defineProperty = require('../../../_chunks/dep-59765535.js');
+var objectWithoutProperties = require('../../../_chunks/dep-fbb7cdca.js');
+var React = require('react');
+var classNames = require('classnames');
+var colorPicker_components_panel_slider = require('./slider.js');
+require('../../const.js');
+require('../../../_util/useDrag.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+
+var _excluded = ["color", "baseClassName", "onChange"];
+
+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._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 Alpha = function Alpha(props) {
+  var color = props.color,
+      baseClassName = props.baseClassName,
+      onChange = props.onChange,
+      rest = objectWithoutProperties._objectWithoutProperties(props, _excluded);
+
+  var handleChange = function handleChange(v, isDragEnd) {
+    onChange(v / 100, isDragEnd);
+  };
+
+  var railStyle = {
+    background: "linear-gradient(to right, rgba(0, 0, 0, 0), ".concat(props.color.rgb, ")")
+  };
+  return /* @__PURE__ */React__default["default"].createElement(colorPicker_components_panel_slider["default"], _objectSpread({
+    baseClassName: baseClassName,
+    className: classNames__default["default"](["".concat(baseClassName, "__alpha"), "".concat(baseClassName, "--bg-alpha")]),
+    color: color,
+    value: color.alpha * 100,
+    onChange: handleChange,
+    railStyle: railStyle,
+    maxValue: 100
+  }, rest));
+};
+
+var AlphaSlider = /*#__PURE__*/React__default["default"].memo(Alpha);
+
+exports["default"] = AlphaSlider;
+//# sourceMappingURL=alpha.js.map

package/lib/color-picker/components/panel/alpha.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alpha.js","sources":["../../../../src/color-picker/components/panel/alpha.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport ColorSlider from './slider';\nimport { TdColorBaseProps } from '../../interface';\n\nconst Alpha = (props: TdColorBaseProps) => {\n  const { color, baseClassName, onChange, ...rest } = props;\n  const handleChange = (v: number, isDragEnd?: boolean) => {\n    onChange(v / 100, isDragEnd);\n  };\n  const railStyle = {\n    background: `linear-gradient(to right, rgba(0, 0, 0, 0), ${props.color.rgb})`,\n  };\n\n  return (\n    <ColorSlider\n      baseClassName={baseClassName}\n      className={classNames([`${baseClassName}__alpha`, `${baseClassName}--bg-alpha`])}\n      color={color}\n      value={color.alpha * 100}\n      onChange={handleChange}\n      railStyle={railStyle}\n      maxValue={100}\n      {...rest}\n    />\n  );\n};\n\nexport default React.memo(Alpha);\n"],"names":["Alpha","props","color","baseClassName","onChange","rest","handleChange","v","isDragEnd","railStyle","background","rgb","React","createElement","ColorSlider","className","classNames","value","alpha","maxValue","memo"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,IAAMA,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD,EAAW;AACvB,EAAA,IAAQC,KAAR,GAAoDD,KAApD,CAAQC,KAAR;AAAA,MAAeC,aAAf,GAAoDF,KAApD,CAAeE,aAAf;AAAA,MAA8BC,QAA9B,GAAoDH,KAApD,CAA8BG,QAA9B;AAAA,MAA2CC,IAA3C,oDAAoDJ,KAApD,EAAA,SAAA,CAAA,CAAA;;AACA,EAAMK,IAAAA,YAAY,GAAG,SAAfA,YAAe,CAACC,CAAD,EAAIC,SAAJ,EAAkB;AACrCJ,IAAAA,QAAQ,CAACG,CAAC,GAAG,GAAL,EAAUC,SAAV,CAAR,CAAA;AACD,GAFD,CAAA;;AAGA,EAAA,IAAMC,SAAS,GAAG;AAChBC,IAAAA,UAAU,EAAiDT,8CAAAA,CAAAA,MAAAA,CAAAA,KAAK,CAACC,KAAN,CAAYS,GAA7D,EAAA,GAAA,CAAA;AADM,GAAlB,CAAA;AAGA,EAAA,sBAAuBC,yBAAK,CAACC,aAAN,CAAoBC,8CAApB,EAAA,aAAA,CAAA;AACrBX,IAAAA,aAAa,EAAbA,aADqB;AAErBY,IAAAA,SAAS,EAAEC,8BAAU,CAAC,WAAIb,aAAJ,EAAA,SAAA,CAAA,EAAA,EAAA,CAAA,MAAA,CAA+BA,aAA/B,EAAA,YAAA,CAAA,CAAD,CAFA;AAGrBD,IAAAA,KAAK,EAALA,KAHqB;AAIrBe,IAAAA,KAAK,EAAEf,KAAK,CAACgB,KAAN,GAAc,GAJA;AAKrBd,IAAAA,QAAQ,EAAEE,YALW;AAMrBG,IAAAA,SAAS,EAATA,SANqB;AAOrBU,IAAAA,QAAQ,EAAE,GAAA;AAPW,GAAA,EAQlBd,IARkB,CAAvB,CAAA,CAAA;AAUD,CAlBD,CAAA;;AAmBA,kBAAA,aAAeO,yBAAK,CAACQ,IAAN,CAAWpB,KAAX,CAAf;;;;"}

package/lib/color-picker/components/panel/format/config.d.ts

@@ -0,0 +1,19 @@
+import { TdColorPickerProps } from '../../../type';
+export interface FormatInput {
+    key: string;
+    type: 'input';
+    flex?: number;
+}
+export interface FormatInputNumber {
+    key: string;
+    min: number;
+    max: number;
+    type: 'inputNumber';
+    flex?: number;
+    format?: Function;
+}
+export declare type FormatInputsConfig = {
+    [propName in TdColorPickerProps['format']]?: Array<FormatInput | FormatInputNumber>;
+};
+export declare const FORMAT_INPUT_CONFIG: FormatInputsConfig;
+export default FORMAT_INPUT_CONFIG;

package/lib/color-picker/components/panel/format/config.js

@@ -0,0 +1,95 @@
+/**
+ * tdesign v0.32.0
+ * (c) 2022 tdesign
+ * @license MIT
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var FORMAT_INPUT_CONFIG = {
+  RGB: [{
+    key: "r",
+    min: 0,
+    max: 255,
+    type: "inputNumber"
+  }, {
+    key: "g",
+    min: 0,
+    max: 255,
+    type: "inputNumber"
+  }, {
+    key: "b",
+    min: 0,
+    max: 255,
+    type: "inputNumber"
+  }],
+  HSV: [{
+    key: "h",
+    min: 0,
+    max: 360,
+    type: "inputNumber"
+  }, {
+    key: "s",
+    min: 0,
+    max: 100,
+    type: "inputNumber"
+  }, {
+    key: "v",
+    min: 0,
+    max: 100,
+    type: "inputNumber"
+  }],
+  HSL: [{
+    key: "h",
+    min: 0,
+    max: 360,
+    type: "inputNumber"
+  }, {
+    key: "s",
+    min: 0,
+    max: 100,
+    type: "inputNumber"
+  }, {
+    key: "l",
+    min: 0,
+    max: 100,
+    type: "inputNumber"
+  }],
+  CMYK: [{
+    key: "c",
+    min: 0,
+    max: 255,
+    type: "inputNumber"
+  }, {
+    key: "m",
+    min: 0,
+    max: 255,
+    type: "inputNumber"
+  }, {
+    key: "y",
+    min: 0,
+    max: 255,
+    type: "inputNumber"
+  }, {
+    key: "k",
+    min: 0,
+    max: 255,
+    type: "inputNumber"
+  }],
+  CSS: [{
+    key: "css",
+    type: "input",
+    flex: 3
+  }],
+  HEX: [{
+    key: "hex",
+    type: "input",
+    flex: 3
+  }]
+};
+
+exports.FORMAT_INPUT_CONFIG = FORMAT_INPUT_CONFIG;
+exports["default"] = FORMAT_INPUT_CONFIG;
+//# sourceMappingURL=config.js.map

package/lib/color-picker/components/panel/format/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sources":["../../../../../src/color-picker/components/panel/format/config.ts"],"sourcesContent":["import { TdColorPickerProps } from '../../../type';\n\nexport interface FormatInput {\n  key: string;\n  type: 'input';\n  flex?: number;\n}\n\nexport interface FormatInputNumber {\n  key: string;\n  min: number;\n  max: number;\n  type: 'inputNumber';\n  flex?: number;\n  format?: Function;\n}\n\nexport type FormatInputsConfig = {\n  [propName in TdColorPickerProps['format']]?: Array<FormatInput | FormatInputNumber>;\n};\n\nexport const FORMAT_INPUT_CONFIG: FormatInputsConfig = {\n  RGB: [\n    {\n      key: 'r',\n      min: 0,\n      max: 255,\n      type: 'inputNumber',\n    },\n    {\n      key: 'g',\n      min: 0,\n      max: 255,\n      type: 'inputNumber',\n    },\n    {\n      key: 'b',\n      min: 0,\n      max: 255,\n      type: 'inputNumber',\n    },\n  ],\n  HSV: [\n    {\n      key: 'h',\n      min: 0,\n      max: 360,\n      type: 'inputNumber',\n    },\n    {\n      key: 's',\n      min: 0,\n      max: 100,\n      type: 'inputNumber',\n    },\n    {\n      key: 'v',\n      min: 0,\n      max: 100,\n      type: 'inputNumber',\n    },\n  ],\n  HSL: [\n    {\n      key: 'h',\n      min: 0,\n      max: 360,\n      type: 'inputNumber',\n    },\n    {\n      key: 's',\n      min: 0,\n      max: 100,\n      type: 'inputNumber',\n    },\n    {\n      key: 'l',\n      min: 0,\n      max: 100,\n      type: 'inputNumber',\n    },\n  ],\n  CMYK: [\n    {\n      key: 'c',\n      min: 0,\n      max: 255,\n      type: 'inputNumber',\n    },\n    {\n      key: 'm',\n      min: 0,\n      max: 255,\n      type: 'inputNumber',\n    },\n    {\n      key: 'y',\n      min: 0,\n      max: 255,\n      type: 'inputNumber',\n    },\n    {\n      key: 'k',\n      min: 0,\n      max: 255,\n      type: 'inputNumber',\n    },\n  ],\n  CSS: [\n    {\n      key: 'css',\n      type: 'input',\n      flex: 3,\n    },\n  ],\n  HEX: [\n    {\n      key: 'hex',\n      type: 'input',\n      flex: 3,\n    },\n  ],\n};\n\nexport default FORMAT_INPUT_CONFIG;\n"],"names":["FORMAT_INPUT_CONFIG","RGB","key","min","max","type","HSV","HSL","CMYK","CSS","flex","HEX"],"mappings":"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"}

package/lib/color-picker/components/panel/format/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import Color from '../../../../_common/js/color-picker/color';
+import { TdColorPickerProps } from '../../../type';
+export interface TdColorFormatProps extends TdColorPickerProps {
+    onModeChange: Function;
+    onInputChange: Function;
+    baseClassName: string;
+    color: Color;
+}
+declare const _default: React.MemoExoticComponent<(props: TdColorFormatProps) => JSX.Element>;
+export default _default;

package/lib/color-picker/components/panel/format/index.js

@@ -0,0 +1,189 @@
+/**
+ * tdesign v0.32.0
+ * (c) 2022 tdesign
+ * @license MIT
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var defineProperty = require('../../../../_chunks/dep-59765535.js');
+var toConsumableArray = require('../../../../_chunks/dep-495e820f.js');
+var slicedToArray = require('../../../../_chunks/dep-28f89e64.js');
+var React = require('react');
+var lodash = require('lodash');
+var select_index = require('../../../../select/index.js');
+var colorPicker_components_panel_format_inputs = require('./inputs.js');
+var colorPicker_const = require('../../../const.js');
+require('../../../../_chunks/dep-2476807a.js');
+require('../../../../select/base/Select.js');
+require('../../../../_chunks/dep-fbb7cdca.js');
+require('classnames');
+require('../../../../_chunks/dep-fb1b11ca.js');
+require('../../../../_chunks/dep-9b448c2e.js');
+require('../../../../_chunks/dep-e42b1d6f.js');
+require('../../../../_chunks/dep-dbadac1a.js');
+require('../../../../_chunks/dep-2f797d69.js');
+require('../../../../_chunks/dep-10876144.js');
+require('../../../../_chunks/dep-3d6fee40.js');
+require('../../../../_chunks/dep-e08f0a55.js');
+require('../../../../_chunks/dep-022a84e7.js');
+require('../../../../_chunks/dep-6b044992.js');
+require('../../../../_chunks/dep-d78d4a02.js');
+require('../../../../_chunks/dep-d04a9df9.js');
+require('../../../../_chunks/dep-92e7e8c4.js');
+require('../../../../_util/useDefault.js');
+require('../../../../_util/noop.js');
+require('../../../../locale/LocalReceiver.js');
+require('../../../../_chunks/dep-160028a3.js');
+require('../../../../_chunks/dep-f250efe9.js');
+require('../../../../_chunks/dep-952e403b.js');
+require('../../../../_chunks/dep-9920b2ff.js');
+require('../../../../_chunks/dep-1d2db52a.js');
+require('../../../../_chunks/dep-b8481954.js');
+require('../../../../_chunks/dep-83011b3b.js');
+require('../../../../_chunks/dep-245fb652.js');
+require('../../../../_chunks/dep-8fb6f912.js');
+require('../../../../_chunks/dep-68031a17.js');
+require('../../../../_chunks/dep-0c72eab7.js');
+require('../../../../_common/js/global-config/locale/zh_CN.js');
+require('../../../../config-provider/zh_CN_config.js');
+require('../../../../_util/useConfig.js');
+require('../../../../_util/forwardRefWithStatics.js');
+require('hoist-non-react-statics');
+require('../../../../select/util/helper.js');
+require('../../../../select/base/OptionGroup.js');
+require('../../../../select/base/Option.js');
+require('../../../../_chunks/dep-453a6b38.js');
+require('../../../../_chunks/dep-f762ab0a.js');
+require('../../../../_util/useRipple.js');
+require('../../../../_util/useAnimation.js');
+require('../../../../_util/setStyle.js');
+require('../../../../_util/dom.js');
+require('raf');
+require('../../../../_util/easing.js');
+require('../../../../common/FakeArrow.js');
+require('../../../../loading/index.js');
+require('../../../../loading/Loading.js');
+require('../../../../common/Portal.js');
+require('react-dom');
+require('../../../../loading/gradient.js');
+require('../../../../_common/js/loading/circle-adapter.js');
+require('../../../../_common/js/utils/set-style.js');
+require('../../../../_common/js/utils/helper.js');
+require('../../../../loading/plugin.js');
+require('../../../../select-input/index.js');
+require('../../../../select-input/SelectInput.js');
+require('../../../../popup/index.js');
+require('../../../../popup/Popup.js');
+require('react-transition-group');
+require('react-popper');
+require('../../../../_util/composeRefs.js');
+require('../../../../popup/hooks/useTriggerProps.js');
+require('../../../../_util/useClickOutside.js');
+require('../../../../popup/utils/getTransitionParams.js');
+require('../../../../_util/useMutationObserver.js');
+require('../../../../_chunks/dep-fea332a5.js');
+require('../../../../_chunks/dep-726fb5a2.js');
+require('../../../../_util/useWindowSize.js');
+require('../../../../select-input/useSingle.js');
+require('../../../../_chunks/dep-87f59df3.js');
+require('../../../../_chunks/dep-b7d6e904.js');
+require('../../../../_chunks/dep-472f5215.js');
+require('../../../../_chunks/dep-8c84b4fc.js');
+require('../../../../_chunks/dep-e2050934.js');
+require('../../../../input/index.js');
+require('../../../../input/Input.js');
+require('tdesign-icons-react');
+require('../../../../_util/helper.js');
+require('../../../../_chunks/dep-e74f7a51.js');
+require('../../../../_chunks/dep-1de9cd59.js');
+require('../../../../_chunks/dep-d3242103.js');
+require('../../../../input/InputGroup.js');
+require('../../../../_util/useDefaultValue.js');
+require('../../../../select-input/useMultiple.js');
+require('../../../../tag-input/index.js');
+require('../../../../tag-input/TagInput.js');
+require('../../../../_util/useDragSorter.js');
+require('../../../../tag-input/useTagScroll.js');
+require('../../../../tag-input/useTagList.js');
+require('../../../../tag/index.js');
+require('../../../../tag/Tag.js');
+require('../../../../tag/CheckTag.js');
+require('../../../../tag-input/useHover.js');
+require('../../../../select-input/useOverlayStyle.js');
+require('../../../../select/base/PopupContent.js');
+require('../../../../_common/js/color-picker/color.js');
+require('../../../../_chunks/dep-4809c698.js');
+require('tinycolor2');
+require('../../../../_common/js/color-picker/cmyk.js');
+require('../../../../_common/js/color-picker/gradient.js');
+require('../../../../input-number/index.js');
+require('../../../../input-number/InputNumber.js');
+require('../../../../_util/useCommonClassName.js');
+require('../../../../_util/useUpdateEffect.js');
+require('../../../../_util/useLayoutEffect.js');
+require('../../../../input-number/StepHandler.js');
+require('../../../../button/index.js');
+require('../../../../button/Button.js');
+require('../../../../input-number/utils/numberUtils.js');
+require('./config.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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._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 FormatPanel = function FormatPanel(props) {
+  var baseClassName = props.baseClassName,
+      format = props.format,
+      onModeChange = props.onModeChange;
+
+  var _useState = React.useState(format),
+      _useState2 = slicedToArray._slicedToArray(_useState, 2),
+      formatMode = _useState2[0],
+      setFormatMode = _useState2[1];
+
+  var handleModeChange = function handleModeChange(v) {
+    setFormatMode(v);
+    onModeChange(v);
+  };
+
+  var formats = toConsumableArray._toConsumableArray(colorPicker_const.FORMATS);
+
+  return /* @__PURE__ */React__default["default"].createElement("div", {
+    className: "".concat(baseClassName, "__format")
+  }, /* @__PURE__ */React__default["default"].createElement("div", {
+    className: "".concat(baseClassName, "__format--item")
+  }, /* @__PURE__ */React__default["default"].createElement(select_index.Select, {
+    size: "medium",
+    className: "".concat(baseClassName, "__format-mode-select"),
+    popupProps: {
+      overlayClassName: "".concat(baseClassName, "__select-options")
+    },
+    value: formatMode,
+    onChange: handleModeChange
+  }, formats.map(function (item) {
+    return /* @__PURE__ */React__default["default"].createElement(select_index.Select.Option, {
+      key: item,
+      value: item,
+      label: lodash.upperCase(item),
+      style: {
+        fontSize: "12px"
+      }
+    });
+  }))), /* @__PURE__ */React__default["default"].createElement("div", {
+    className: "".concat(baseClassName, "__format--item")
+  }, /* @__PURE__ */React__default["default"].createElement(colorPicker_components_panel_format_inputs["default"], _objectSpread(_objectSpread({}, props), {}, {
+    format: formatMode
+  }))));
+};
+
+var FormatPanel$1 = /*#__PURE__*/React__default["default"].memo(FormatPanel);
+
+exports["default"] = FormatPanel$1;
+//# sourceMappingURL=index.js.map

package/lib/color-picker/components/panel/format/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/color-picker/components/panel/format/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { upperCase } from 'lodash';\nimport Select from '../../../../select';\nimport FormatInput from './inputs';\nimport Color from '../../../../_common/js/color-picker/color';\nimport { FORMATS } from '../../../const';\nimport { TdColorPickerProps } from '../../../type';\n\nexport interface TdColorFormatProps extends TdColorPickerProps {\n  onModeChange: Function;\n  onInputChange: Function;\n  baseClassName: string;\n  color: Color;\n}\n\nconst FormatPanel = (props: TdColorFormatProps) => {\n  const { baseClassName, format, onModeChange } = props;\n  const [formatMode, setFormatMode] = useState(format);\n\n  const handleModeChange = (v: TdColorPickerProps['format']) => {\n    setFormatMode(v);\n    onModeChange(v);\n  };\n\n  const formats: TdColorPickerProps['format'][] = [...FORMATS];\n\n  return (\n    <div className={`${baseClassName}__format`}>\n      <div className={`${baseClassName}__format--item`}>\n        <Select\n          size=\"medium\"\n          className={`${baseClassName}__format-mode-select`}\n          popupProps={{\n            overlayClassName: `${baseClassName}__select-options`,\n          }}\n          value={formatMode}\n          onChange={handleModeChange}\n        >\n          {formats.map((item) => (\n            <Select.Option key={item} value={item} label={upperCase(item)} style={{ fontSize: '12px' }} />\n          ))}\n        </Select>\n      </div>\n      <div className={`${baseClassName}__format--item`}>\n        <FormatInput {...props} format={formatMode} />\n      </div>\n    </div>\n  );\n};\n\nexport default React.memo(FormatPanel);\n"],"names":["FormatPanel","props","baseClassName","format","onModeChange","useState","_slicedToArray","formatMode","setFormatMode","handleModeChange","v","formats","FORMATS","React","createElement","className","Select","size","popupProps","overlayClassName","value","onChange","map","item","Option","key","label","upperCase","style","fontSize","FormatInput","memo"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAACC,KAAD,EAAW;AAC7B,EAAA,IAAQC,aAAR,GAAgDD,KAAhD,CAAQC,aAAR;AAAA,MAAuBC,MAAvB,GAAgDF,KAAhD,CAAuBE,MAAvB;AAAA,MAA+BC,YAA/B,GAAgDH,KAAhD,CAA+BG,YAA/B,CAAA;;AACA,EAAoCC,IAAAA,SAAAA,GAAAA,cAAQ,CAACF,MAAD,CAA5C;AAAA,MAAA,UAAA,GAAAG,4BAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAA,MAAOC,UAAP,GAAA,UAAA,CAAA,CAAA,CAAA;AAAA,MAAmBC,aAAnB,GAAA,UAAA,CAAA,CAAA,CAAA,CAAA;;AACA,EAAA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,CAAD,EAAO;AAC9BF,IAAAA,aAAa,CAACE,CAAD,CAAb,CAAA;AACAN,IAAAA,YAAY,CAACM,CAAD,CAAZ,CAAA;AACD,GAHD,CAAA;;AAIA,EAAMC,IAAAA,OAAO,GAAOC,oCAAAA,CAAAA,yBAAP,CAAb,CAAA;;AACA,EAAA,sBAAuBC,yBAAK,CAACC,aAAN,CAAoB,KAApB,EAA2B;AAChDC,IAAAA,SAAS,YAAKb,aAAL,EAAA,UAAA,CAAA;AADuC,GAA3B,iBAEJW,yBAAK,CAACC,aAAN,CAAoB,KAApB,EAA2B;AAC5CC,IAAAA,SAAS,YAAKb,aAAL,EAAA,gBAAA,CAAA;AADmC,GAA3B,iBAEAW,yBAAK,CAACC,aAAN,CAAoBE,mBAApB,EAA4B;AAC7CC,IAAAA,IAAI,EAAE,QADuC;AAE7CF,IAAAA,SAAS,EAAKb,EAAAA,CAAAA,MAAAA,CAAAA,aAAL,EAFoC,sBAAA,CAAA;AAG7CgB,IAAAA,UAAU,EAAE;AACVC,MAAAA,gBAAgB,YAAKjB,aAAL,EAAA,kBAAA,CAAA;AADN,KAHiC;AAM7CkB,IAAAA,KAAK,EAAEb,UANsC;AAO7Cc,IAAAA,QAAQ,EAAEZ,gBAAAA;AAPmC,GAA5B,EAQhBE,OAAO,CAACW,GAAR,CAAY,UAACC,IAAD,EAAA;AAAA,IAAU,sBAAgBV,yBAAK,CAACC,aAAN,CAAoBE,mBAAM,CAACQ,MAA3B,EAAmC;AAC1EC,MAAAA,GAAG,EAAEF,IADqE;AAE1EH,MAAAA,KAAK,EAAEG,IAFmE;AAG1EG,MAAAA,KAAK,EAAEC,gBAAS,CAACJ,IAAD,CAH0D;AAI1EK,MAAAA,KAAK,EAAE;AAAEC,QAAAA,QAAQ,EAAE,MAAA;AAAZ,OAAA;AAJmE,KAAnC,CAA1B,CAAA;AAAA,GAAZ,CARgB,CAFA,CAFI,iBAiBAhB,yBAAK,CAACC,aAAN,CAAoB,KAApB,EAA2B;AAChDC,IAAAA,SAAS,YAAKb,aAAL,EAAA,gBAAA,CAAA;AADuC,GAA3B,iBAEJW,yBAAK,CAACC,aAAN,CAAoBgB,qDAApB,kCACd7B,KADc,CAAA,EAAA,EAAA,EAAA;AAEjBE,IAAAA,MAAM,EAAEI,UAAAA;AAFS,GAAA,CAAA,CAFI,CAjBA,CAAvB,CAAA;AAuBD,CA/BD,CAAA;;AAgCA,oBAAA,aAAeM,yBAAK,CAACkB,IAAN,CAAW/B,WAAX,CAAf;;;;"}

package/lib/color-picker/components/panel/format/inputs.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.MemoExoticComponent<(props: any) => JSX.Element>;
+export default _default;