@ant-design/pro-components 3.1.0-0 → 3.1.1-1

package/lib/layout/components/PageHeader/style/index.js

@@ -1,136 +1,155 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useStyle;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectSpread5 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _utils = require("../../../../utils");
-var textOverflowEllipsis = function textOverflowEllipsis() {
+const textOverflowEllipsis = () => ({
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis'
+});
+const genPageHeaderStyle = token => {
   return {
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis'
+    [token.componentCls]: {
+      ...(0, _utils.resetComponent)?.(token),
+      position: 'relative',
+      backgroundColor: token.colorWhite,
+      paddingBlock: token.pageHeaderPaddingVertical + 2,
+      paddingInline: token.pageHeaderPadding,
+      '&&-ghost': {
+        backgroundColor: token.pageHeaderBgGhost
+      },
+      '&-no-children': {
+        height: token.layout?.pageContainer?.paddingBlockPageContainerContent
+      },
+      '&&-has-breadcrumb': {
+        paddingBlockStart: token.pageHeaderPaddingBreadCrumb
+      },
+      '&&-has-footer': {
+        paddingBlockEnd: 0
+      },
+      '& &-back': {
+        marginInlineEnd: token.margin,
+        fontSize: 16,
+        lineHeight: 1,
+        '&-button': {
+          fontSize: 16,
+          ...(0, _utils.operationUnit)?.(token),
+          color: token.pageHeaderColorBack,
+          cursor: 'pointer'
+        },
+        [`${token.componentCls}-rlt &`]: {
+          float: 'right',
+          marginInlineEnd: 0,
+          marginInlineStart: 0
+        }
+      },
+      [`& ${'ant'}-divider-vertical`]: {
+        height: 14,
+        marginBlock: 0,
+        marginInline: token.marginSM,
+        verticalAlign: 'middle'
+      },
+      [`& &-breadcrumb + &-heading`]: {
+        marginBlockStart: token.marginXS
+      },
+      '& &-heading': {
+        display: 'flex',
+        justifyContent: 'space-between',
+        '&-left': {
+          display: 'flex',
+          alignItems: 'center',
+          marginBlock: token.marginXS / 2,
+          marginInlineEnd: 0,
+          marginInlineStart: 0,
+          overflow: 'hidden'
+        },
+        '&-title': {
+          marginInlineEnd: token.marginSM,
+          marginBlockEnd: 0,
+          color: token.colorTextHeading,
+          fontWeight: 600,
+          fontSize: token.pageHeaderFontSizeHeaderTitle,
+          lineHeight: token.controlHeight + 'px',
+          ...textOverflowEllipsis(),
+          [`${token.componentCls}-rlt &`]: {
+            marginInlineEnd: 0,
+            marginInlineStart: token.marginSM
+          }
+        },
+        '&-avatar': {
+          marginInlineEnd: token.marginSM,
+          [`${token.componentCls}-rlt &`]: {
+            float: 'right',
+            marginInlineEnd: 0,
+            marginInlineStart: token.marginSM
+          }
+        },
+        '&-tags': {
+          [`${token.componentCls}-rlt &`]: {
+            float: 'right'
+          }
+        },
+        '&-sub-title': {
+          marginInlineEnd: token.marginSM,
+          color: token.colorTextSecondary,
+          fontSize: token.pageHeaderFontSizeHeaderSubTitle,
+          lineHeight: token.lineHeight,
+          ...textOverflowEllipsis(),
+          [`${token.componentCls}-rlt &`]: {
+            float: 'right',
+            marginInlineEnd: 0,
+            marginInlineStart: 12
+          }
+        },
+        '&-extra': {
+          marginBlock: token.marginXS / 2,
+          marginInlineEnd: 0,
+          marginInlineStart: 0,
+          whiteSpace: 'nowrap',
+          '> *': {
+            'white-space': 'unset',
+            [`${token.componentCls}-rlt &`]: {
+              marginInlineEnd: token.marginSM,
+              marginInlineStart: 0
+            }
+          },
+          [`${token.componentCls}-rlt &`]: {
+            float: 'left'
+          },
+          '*:first-child': {
+            [`${token.componentCls}-rlt &`]: {
+              marginInlineEnd: 0
+            }
+          }
+        }
+      },
+      '&-content': {
+        paddingBlockStart: token.pageHeaderPaddingContentPadding
+      },
+      '&-footer': {
+        marginBlockStart: token.margin
+      },
+      '&-compact &-heading': {
+        flexWrap: 'wrap'
+      },
+      '&-wide': {
+        maxWidth: 1152,
+        margin: '0 auto'
+      },
+      '&-rtl': {
+        direction: 'rtl'
+      }
+    }
   };
 };
-var genPageHeaderStyle = function genPageHeaderStyle(token) {
-  var _token$layout;
-  return (0, _defineProperty2.default)({}, token.componentCls, (0, _objectSpread5.default)((0, _objectSpread5.default)({}, _utils.resetComponent === null || _utils.resetComponent === void 0 ? void 0 : (0, _utils.resetComponent)(token)), {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-    position: 'relative',
-    backgroundColor: token.colorWhite,
-    paddingBlock: token.pageHeaderPaddingVertical + 2,
-    paddingInline: token.pageHeaderPadding,
-    '&&-ghost': {
-      backgroundColor: token.pageHeaderBgGhost
-    },
-    '&-no-children': {
-      height: (_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.pageContainer) === null || _token$layout === void 0 ? void 0 : _token$layout.paddingBlockPageContainerContent
-    },
-    '&&-has-breadcrumb': {
-      paddingBlockStart: token.pageHeaderPaddingBreadCrumb
-    },
-    '&&-has-footer': {
-      paddingBlockEnd: 0
-    },
-    '& &-back': (0, _defineProperty2.default)({
-      marginInlineEnd: token.margin,
-      fontSize: 16,
-      lineHeight: 1,
-      '&-button': (0, _objectSpread5.default)((0, _objectSpread5.default)({
-        fontSize: 16
-      }, _utils.operationUnit === null || _utils.operationUnit === void 0 ? void 0 : (0, _utils.operationUnit)(token)), {}, {
-        color: token.pageHeaderColorBack,
-        cursor: 'pointer'
-      })
-    }, "".concat(token.componentCls, "-rlt &"), {
-      float: 'right',
-      marginInlineEnd: 0,
-      marginInlineStart: 0
-    })
-  }, "& ".concat('ant', "-divider-vertical"), {
-    height: 14,
-    marginBlock: 0,
-    marginInline: token.marginSM,
-    verticalAlign: 'middle'
-  }), "& &-breadcrumb + &-heading", {
-    marginBlockStart: token.marginXS
-  }), '& &-heading', {
-    display: 'flex',
-    justifyContent: 'space-between',
-    '&-left': {
-      display: 'flex',
-      alignItems: 'center',
-      marginBlock: token.marginXS / 2,
-      marginInlineEnd: 0,
-      marginInlineStart: 0,
-      overflow: 'hidden'
-    },
-    '&-title': (0, _objectSpread5.default)((0, _objectSpread5.default)({
-      marginInlineEnd: token.marginSM,
-      marginBlockEnd: 0,
-      color: token.colorTextHeading,
-      fontWeight: 600,
-      fontSize: token.pageHeaderFontSizeHeaderTitle,
-      lineHeight: token.controlHeight + 'px'
-    }, textOverflowEllipsis()), {}, (0, _defineProperty2.default)({}, "".concat(token.componentCls, "-rlt &"), {
-      marginInlineEnd: 0,
-      marginInlineStart: token.marginSM
-    })),
-    '&-avatar': (0, _defineProperty2.default)({
-      marginInlineEnd: token.marginSM
-    }, "".concat(token.componentCls, "-rlt &"), {
-      float: 'right',
-      marginInlineEnd: 0,
-      marginInlineStart: token.marginSM
-    }),
-    '&-tags': (0, _defineProperty2.default)({}, "".concat(token.componentCls, "-rlt &"), {
-      float: 'right'
-    }),
-    '&-sub-title': (0, _objectSpread5.default)((0, _objectSpread5.default)({
-      marginInlineEnd: token.marginSM,
-      color: token.colorTextSecondary,
-      fontSize: token.pageHeaderFontSizeHeaderSubTitle,
-      lineHeight: token.lineHeight
-    }, textOverflowEllipsis()), {}, (0, _defineProperty2.default)({}, "".concat(token.componentCls, "-rlt &"), {
-      float: 'right',
-      marginInlineEnd: 0,
-      marginInlineStart: 12
-    })),
-    '&-extra': (0, _defineProperty2.default)((0, _defineProperty2.default)({
-      marginBlock: token.marginXS / 2,
-      marginInlineEnd: 0,
-      marginInlineStart: 0,
-      whiteSpace: 'nowrap',
-      '> *': (0, _defineProperty2.default)({
-        'white-space': 'unset'
-      }, "".concat(token.componentCls, "-rlt &"), {
-        marginInlineEnd: token.marginSM,
-        marginInlineStart: 0
-      })
-    }, "".concat(token.componentCls, "-rlt &"), {
-      float: 'left'
-    }), '*:first-child', (0, _defineProperty2.default)({}, "".concat(token.componentCls, "-rlt &"), {
-      marginInlineEnd: 0
-    }))
-  }), '&-content', {
-    paddingBlockStart: token.pageHeaderPaddingContentPadding
-  }), '&-footer', {
-    marginBlockStart: token.margin
-  }), '&-compact &-heading', {
-    flexWrap: 'wrap'
-  }), '&-wide', {
-    maxWidth: 1152,
-    margin: '0 auto'
-  }), '&-rtl', {
-    direction: 'rtl'
-  })));
-};
 function useStyle(prefixCls) {
-  return (0, _utils.useStyle)('ProLayoutPageHeader', function (token) {
-    var proCardToken = (0, _objectSpread5.default)((0, _objectSpread5.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls),
+  return (0, _utils.useStyle)('ProLayoutPageHeader', token => {
+    const proCardToken = {
+      ...token,
+      componentCls: `.${prefixCls}`,
       pageHeaderBgGhost: 'transparent',
       pageHeaderPadding: 16,
       pageHeaderPaddingVertical: 4,
@@ -139,7 +158,7 @@ function useStyle(prefixCls) {
       pageHeaderFontSizeHeaderTitle: token.fontSizeHeading4,
       pageHeaderFontSizeHeaderSubTitle: 14,
       pageHeaderPaddingContentPadding: token.paddingSM
-    });
+    };
     return [genPageHeaderStyle(proCardToken)];
   });
 }

package/lib/layout/components/PageLoading/index.js

@@ -5,26 +5,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PageLoading = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _antd = require("antd");
 var _react = _interopRequireDefault(require("react"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["isLoading", "pastDelay", "timedOut", "error", "retry"];
-var PageLoading = exports.PageLoading = function PageLoading(_ref) {
-  var isLoading = _ref.isLoading,
-    pastDelay = _ref.pastDelay,
-    timedOut = _ref.timedOut,
-    error = _ref.error,
-    retry = _ref.retry,
-    reset = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    style: {
-      paddingBlockStart: 100,
-      textAlign: 'center'
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Spin, (0, _objectSpread2.default)({
-      size: "large"
-    }, reset))
-  });
-};
+const PageLoading = ({
+  isLoading,
+  pastDelay,
+  timedOut,
+  error,
+  retry,
+  ...reset
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  style: {
+    paddingBlockStart: 100,
+    textAlign: 'center'
+  },
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Spin, {
+    size: "large",
+    ...reset
+  })
+});
+exports.PageLoading = PageLoading;

package/lib/layout/components/SettingDrawer/BlockCheckbox.js

@@ -1,49 +1,46 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BlockCheckbox = void 0;
 var _icons = require("@ant-design/icons");
 var _antd = require("antd");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _react = require("react");
 var _jsxRuntime = require("react/jsx-runtime");
-var BlockCheckbox = exports.BlockCheckbox = function BlockCheckbox(_ref) {
-  var value = _ref.value,
-    configType = _ref.configType,
-    onChange = _ref.onChange,
-    list = _ref.list,
-    prefixCls = _ref.prefixCls,
-    hashId = _ref.hashId;
-  var baseClassName = "".concat(prefixCls, "-block-checkbox");
-  var dom = (0, _react.useMemo)(function () {
-    var domList = (list || []).map(function (item) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
-        title: item.title,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: (0, _classnames.default)(hashId, "".concat(baseClassName, "-item"), "".concat(baseClassName, "-item-").concat(item.key), "".concat(baseClassName, "-").concat(configType, "-item")),
-          onClick: function onClick() {
-            return onChange(item.key);
-          },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CheckOutlined, {
-            className: "".concat(baseClassName, "-selectIcon ").concat(hashId).trim(),
-            style: {
-              display: value === item.key ? 'block' : 'none'
-            }
-          }), item !== null && item !== void 0 && item.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "".concat(baseClassName, "-icon ").concat(hashId).trim(),
-            children: item.icon
-          }) : null]
-        })
-      }, item.key);
-    });
+const BlockCheckbox = ({
+  value,
+  configType,
+  onChange,
+  list,
+  prefixCls,
+  hashId
+}) => {
+  const baseClassName = `${prefixCls}-block-checkbox`;
+  const dom = (0, _react.useMemo)(() => {
+    const domList = (list || []).map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
+      title: item.title,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _clsx.clsx)(hashId, `${baseClassName}-item`, `${baseClassName}-item-${item.key}`, `${baseClassName}-${configType}-item`),
+        onClick: () => onChange(item.key),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CheckOutlined, {
+          className: `${baseClassName}-selectIcon ${hashId}`.trim(),
+          style: {
+            display: value === item.key ? 'block' : 'none'
+          }
+        }), item?.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: `${baseClassName}-icon ${hashId}`.trim(),
+          children: item.icon
+        }) : null]
+      })
+    }, item.key));
     return domList;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value, list === null || list === void 0 ? void 0 : list.length, onChange]);
+  }, [value, list?.length, onChange]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _classnames.default)(baseClassName, hashId),
+    className: (0, _clsx.clsx)(baseClassName, hashId),
     children: dom
   });
-};
+};
+exports.BlockCheckbox = BlockCheckbox;

package/lib/layout/components/SettingDrawer/LayoutChange.js

@@ -10,8 +10,8 @@ var _react = _interopRequireDefault(require("react"));
 var _defaultSettings = require("../../defaultSettings");
 var _index = require("./index");
 var _jsxRuntime = require("react/jsx-runtime");
-var renderLayoutSettingItem = exports.renderLayoutSettingItem = function renderLayoutSettingItem(item) {
-  var action = /*#__PURE__*/_react.default.cloneElement(item.action, {
+const renderLayoutSettingItem = item => {
+  const action = /*#__PURE__*/_react.default.cloneElement(item.action, {
     disabled: item.disabled
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
@@ -28,20 +28,23 @@ var renderLayoutSettingItem = exports.renderLayoutSettingItem = function renderL
     })
   });
 };
-var LayoutSetting = exports.LayoutSetting = function LayoutSetting(_ref) {
-  var settings = _ref.settings,
-    prefixCls = _ref.prefixCls,
-    changeSetting = _ref.changeSetting,
-    hashId = _ref.hashId;
-  var formatMessage = (0, _index.getFormatMessage)();
-  var _ref2 = settings || _defaultSettings.defaultSettings,
-    contentWidth = _ref2.contentWidth,
-    splitMenus = _ref2.splitMenus,
-    fixedHeader = _ref2.fixedHeader,
-    layout = _ref2.layout,
-    fixSiderbar = _ref2.fixSiderbar;
+exports.renderLayoutSettingItem = renderLayoutSettingItem;
+const LayoutSetting = ({
+  settings,
+  prefixCls,
+  changeSetting,
+  hashId
+}) => {
+  const formatMessage = (0, _index.getFormatMessage)();
+  const {
+    contentWidth,
+    splitMenus,
+    fixedHeader,
+    layout,
+    fixSiderbar
+  } = settings || _defaultSettings.defaultSettings;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.List, {
-    className: "".concat(prefixCls, "-list ").concat(hashId).trim(),
+    className: `${prefixCls}-list ${hashId}`.trim(),
     split: false,
     dataSource: [{
       title: formatMessage({
@@ -51,8 +54,8 @@ var LayoutSetting = exports.LayoutSetting = function LayoutSetting(_ref) {
       action: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Select, {
         value: contentWidth || 'Fixed',
         size: "small",
-        className: "content-width ".concat(hashId).trim(),
-        onSelect: function onSelect(value) {
+        className: `content-width ${hashId}`.trim(),
+        onSelect: value => {
           changeSetting('contentWidth', value);
         },
         style: {
@@ -81,7 +84,7 @@ var LayoutSetting = exports.LayoutSetting = function LayoutSetting(_ref) {
         size: "small",
         className: "fixed-header",
         checked: !!fixedHeader,
-        onChange: function onChange(checked) {
+        onChange: checked => {
           changeSetting('fixedHeader', checked);
         }
       })
@@ -99,9 +102,7 @@ var LayoutSetting = exports.LayoutSetting = function LayoutSetting(_ref) {
         size: "small",
         className: "fix-siderbar",
         checked: !!fixSiderbar,
-        onChange: function onChange(checked) {
-          return changeSetting('fixSiderbar', checked);
-        }
+        onChange: checked => changeSetting('fixSiderbar', checked)
       })
     }, {
       title: formatMessage({
@@ -112,11 +113,12 @@ var LayoutSetting = exports.LayoutSetting = function LayoutSetting(_ref) {
         size: "small",
         checked: !!splitMenus,
         className: "split-menus",
-        onChange: function onChange(checked) {
+        onChange: checked => {
           changeSetting('splitMenus', checked);
         }
       })
     }],
     renderItem: renderLayoutSettingItem
   });
-};
+};
+exports.LayoutSetting = LayoutSetting;

package/lib/layout/components/SettingDrawer/RegionalChange.js

@@ -10,31 +10,31 @@ var _react = _interopRequireDefault(require("react"));
 var _index = require("./index");
 var _LayoutChange = require("./LayoutChange");
 var _jsxRuntime = require("react/jsx-runtime");
-var RegionalSetting = exports.RegionalSetting = function RegionalSetting(_ref) {
-  var settings = _ref.settings,
-    prefixCls = _ref.prefixCls,
-    changeSetting = _ref.changeSetting,
-    hashId = _ref.hashId;
-  var formatMessage = (0, _index.getFormatMessage)();
-  var regionalSetting = ['header', 'footer', 'menu', 'menuHeader'];
+const RegionalSetting = ({
+  settings,
+  prefixCls,
+  changeSetting,
+  hashId
+}) => {
+  const formatMessage = (0, _index.getFormatMessage)();
+  const regionalSetting = ['header', 'footer', 'menu', 'menuHeader'];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.List, {
-    className: "".concat(prefixCls, "-list ").concat(hashId).trim(),
+    className: `${prefixCls}-list ${hashId}`.trim(),
     split: false,
     renderItem: _LayoutChange.renderLayoutSettingItem,
-    dataSource: regionalSetting.map(function (key) {
+    dataSource: regionalSetting.map(key => {
       return {
         title: formatMessage({
-          id: "app.setting.regionalsettings.".concat(key)
+          id: `app.setting.regionalsettings.${key}`
         }),
         action: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Switch, {
           size: "small",
-          className: "regional-".concat(key, " ").concat(hashId).trim(),
-          checked: settings["".concat(key, "Render")] || settings["".concat(key, "Render")] === undefined,
-          onChange: function onChange(checked) {
-            return changeSetting("".concat(key, "Render"), checked === true ? undefined : false);
-          }
+          className: `regional-${key} ${hashId}`.trim(),
+          checked: settings[`${key}Render`] || settings[`${key}Render`] === undefined,
+          onChange: checked => changeSetting(`${key}Render`, checked === true ? undefined : false)
         })
       };
     })
   });
-};
+};
+exports.RegionalSetting = RegionalSetting;

package/lib/layout/components/SettingDrawer/ThemeColor.js

@@ -5,56 +5,54 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ThemeColor = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _icons = require("@ant-design/icons");
 var _antd = require("antd");
 var _react = _interopRequireDefault(require("react"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["color", "check"];
-var Tag = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var color = _ref.color,
-    check = _ref.check,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, rest), {}, {
-    style: {
-      backgroundColor: color
-    },
-    ref: ref,
-    children: check ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CheckOutlined, {}) : ''
-  }));
-});
-var ThemeColor = exports.ThemeColor = function ThemeColor(_ref2) {
-  var value = _ref2.value,
-    colorList = _ref2.colorList,
-    onChange = _ref2.onChange,
-    prefixCls = _ref2.prefixCls,
-    formatMessage = _ref2.formatMessage,
-    hashId = _ref2.hashId;
-  if (!colorList || (colorList === null || colorList === void 0 ? void 0 : colorList.length) < 1) {
+const Tag = /*#__PURE__*/_react.default.forwardRef(({
+  color,
+  check,
+  ...rest
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  ...rest,
+  style: {
+    backgroundColor: color
+  },
+  ref: ref,
+  children: check ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CheckOutlined, {}) : ''
+}));
+const ThemeColor = ({
+  value,
+  colorList,
+  onChange,
+  prefixCls,
+  formatMessage,
+  hashId
+}) => {
+  if (!colorList || colorList?.length < 1) {
     return null;
   }
-  var baseClassName = "".concat(prefixCls, "-theme-color");
+  const baseClassName = `${prefixCls}-theme-color`;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "".concat(baseClassName, " ").concat(hashId).trim(),
-    children: colorList === null || colorList === void 0 ? void 0 : colorList.map(function (_ref3) {
-      var key = _ref3.key,
-        color = _ref3.color,
-        title = _ref3.title;
+    className: `${baseClassName} ${hashId}`.trim(),
+    children: colorList?.map(({
+      key,
+      color,
+      title
+    }) => {
       if (!key) return null;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
-        title: title !== null && title !== void 0 ? title : formatMessage({
-          id: "app.setting.themecolor.".concat(key)
+        title: title ?? formatMessage({
+          id: `app.setting.themecolor.${key}`
         }),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Tag, {
-          className: "".concat(baseClassName, "-block ").concat(hashId).trim(),
+          className: `${baseClassName}-block ${hashId}`.trim(),
           color: color,
           check: value === color,
-          onClick: function onClick() {
-            return onChange && onChange(color);
-          }
+          onClick: () => onChange && onChange(color)
         })
       }, color);
     })
   });
-};
+};
+exports.ThemeColor = ThemeColor;