@ant-design/pro-components 3.0.0-beta.1 → 3.0.0-beta.2

package/es/layout/components/SettingDrawer/index.js

@@ -1,63 +1,13 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-
-// src/layout/components/SettingDrawer/index.tsx
-import {
-  CloseOutlined,
-  CopyOutlined,
-  NotificationOutlined,
-  SettingOutlined
-} from "@ant-design/icons";
-import { useUrlSearchParams } from "@umijs/use-params";
-import {
-  Alert,
-  Button,
-  Divider,
-  Drawer,
-  List,
-  Switch,
-  message
-} from "antd";
-import useMergedState from "rc-util/lib/hooks/useMergedState";
-import omit from "rc-util/lib/omit";
-import React, { useEffect, useRef, useState } from "react";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { CloseOutlined, CopyOutlined, NotificationOutlined, SettingOutlined } from '@ant-design/icons';
+import { useUrlSearchParams } from '@umijs/use-params';
+import { Alert, Button, Divider, Drawer, List, Switch, message } from 'antd';
+import { useMergedState } from 'rc-util';
+import omit from 'rc-util/lib/omit';
+import React, { useEffect, useRef, useState } from 'react';
 import { isBrowser, merge } from "../../../utils";
 import { defaultSettings } from "../../defaultSettings";
 import { gLocaleObject, getLanguage } from "../../locales";
@@ -69,157 +19,220 @@ import { LayoutSetting, renderLayoutSettingItem } from "./LayoutChange";
 import { RegionalSetting } from "./RegionalChange";
 import { useStyle } from "./style/index";
 import { ThemeColor } from "./ThemeColor";
-var Body = ({ children, hashId, prefixCls, title }) => /* @__PURE__ */ React.createElement("div", { style: { marginBlockEnd: 12 } }, /* @__PURE__ */ React.createElement("h3", { className: `${prefixCls}-body-title ${hashId}`.trim() }, title), children);
-var getDifferentSetting = (state) => {
-  const stateObj = {};
-  Object.keys(state).forEach((key) => {
-    if (state[key] !== defaultSettings[key] && //@ts-ignore
-    key !== "collapse") {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var Body = function Body(_ref) {
+  var children = _ref.children,
+    hashId = _ref.hashId,
+    prefixCls = _ref.prefixCls,
+    title = _ref.title;
+  return /*#__PURE__*/_jsxs("div", {
+    style: {
+      marginBlockEnd: 12
+    },
+    children: [/*#__PURE__*/_jsx("h3", {
+      className: "".concat(prefixCls, "-body-title ").concat(hashId).trim(),
+      children: title
+    }), children]
+  });
+};
+var getDifferentSetting = function getDifferentSetting(state) {
+  var stateObj = {};
+  Object.keys(state).forEach(function (key) {
+    if (state[key] !== defaultSettings[key] &&
+    //@ts-ignore
+    key !== 'collapse') {
       stateObj[key] = state[key];
     } else {
-      stateObj[key] = void 0;
+      stateObj[key] = undefined;
     }
-    if (key.includes("Render"))
-      stateObj[key] = state[key] === false ? false : void 0;
+    if (key.includes('Render')) stateObj[key] = state[key] === false ? false : undefined;
   });
-  stateObj.menu = void 0;
+  stateObj.menu = undefined;
   return stateObj;
 };
-var getFormatMessage = () => {
-  const formatMessage = ({
-    id
-  }) => {
-    const locales = gLocaleObject();
+export var getFormatMessage = function getFormatMessage() {
+  var formatMessage = function formatMessage(_ref2) {
+    var id = _ref2.id;
+    var locales = gLocaleObject();
     return locales[id];
   };
   return formatMessage;
 };
-var initState = (urlParams, settings, onSettingChange) => {
-  if (!isBrowser())
-    return;
-  const replaceSetting = {};
-  Object.keys(urlParams).forEach((key) => {
-    if (defaultSettings[key] || defaultSettings[key] === void 0) {
-      if (key === "colorPrimary") {
+
+/**
+ * 初始化的时候需要做的工作
+ *
+ * @param param0
+ */
+var initState = function initState(urlParams, settings, onSettingChange) {
+  if (!isBrowser()) return;
+  var replaceSetting = {};
+  Object.keys(urlParams).forEach(function (key) {
+    if (defaultSettings[key] || defaultSettings[key] === undefined) {
+      if (key === 'colorPrimary') {
         replaceSetting[key] = genStringToTheme(urlParams[key]);
         return;
       }
       replaceSetting[key] = urlParams[key];
     }
   });
-  const newSettings = merge(
-    {},
-    settings,
-    replaceSetting
-  );
+  var newSettings = merge({}, settings, replaceSetting);
   delete newSettings.menu;
   delete newSettings.title;
   delete newSettings.iconfontUrl;
-  onSettingChange == null ? void 0 : onSettingChange(newSettings);
+
+  // 同步数据到外部
+  onSettingChange === null || onSettingChange === void 0 || onSettingChange(newSettings);
+};
+var getParamsFromUrl = function getParamsFromUrl(urlParams, settings) {
+  if (!isBrowser()) return defaultSettings;
+  return _objectSpread(_objectSpread(_objectSpread({}, defaultSettings), settings || {}), urlParams);
 };
-var getParamsFromUrl = (urlParams, settings) => {
-  if (!isBrowser())
-    return defaultSettings;
-  return __spreadValues(__spreadValues(__spreadValues({}, defaultSettings), settings || {}), urlParams);
+var genCopySettingJson = function genCopySettingJson(settingState) {
+  return JSON.stringify(omit(_objectSpread(_objectSpread({}, settingState), {}, {
+    colorPrimary: settingState.colorPrimary
+  }), ['colorWeak']), null, 2);
 };
-var genCopySettingJson = (settingState) => JSON.stringify(
-  omit(
-    __spreadProps(__spreadValues({}, settingState), {
-      colorPrimary: settingState.colorPrimary
+
+/**
+ * 可视化配置组件
+ *
+ * @param props
+ */
+export var SettingDrawer = function SettingDrawer(props) {
+  var _props$defaultSetting = props.defaultSettings,
+    propsDefaultSettings = _props$defaultSetting === void 0 ? undefined : _props$defaultSetting,
+    _props$settings = props.settings,
+    propsSettings = _props$settings === void 0 ? undefined : _props$settings,
+    hideHintAlert = props.hideHintAlert,
+    hideCopyButton = props.hideCopyButton,
+    _props$colorList = props.colorList,
+    colorList = _props$colorList === void 0 ? [{
+      key: 'techBlue',
+      color: '#1677FF'
+    }, {
+      key: 'daybreak',
+      color: '#1890ff'
+    }, {
+      key: 'dust',
+      color: '#F5222D'
+    }, {
+      key: 'volcano',
+      color: '#FA541C'
+    }, {
+      key: 'sunset',
+      color: '#FAAD14'
+    }, {
+      key: 'cyan',
+      color: '#13C2C2'
+    }, {
+      key: 'green',
+      color: '#52C41A'
+    }, {
+      key: 'geekblue',
+      color: '#2F54EB'
+    }, {
+      key: 'purple',
+      color: '#722ED1'
+    }] : _props$colorList,
+    getContainer = props.getContainer,
+    onSettingChange = props.onSettingChange,
+    enableDarkTheme = props.enableDarkTheme,
+    _props$prefixCls = props.prefixCls,
+    prefixCls = _props$prefixCls === void 0 ? 'ant-pro' : _props$prefixCls,
+    _props$pathname = props.pathname,
+    pathname = _props$pathname === void 0 ? isBrowser() ? window.location.pathname : '' : _props$pathname,
+    _props$disableUrlPara = props.disableUrlParams,
+    disableUrlParams = _props$disableUrlPara === void 0 ? true : _props$disableUrlPara,
+    themeOnly = props.themeOnly,
+    drawerProps = props.drawerProps;
+  var firstRender = useRef(true);
+  var _useMergedState = useMergedState(false, {
+      value: props.collapse,
+      onChange: props.onCollapseChange
     }),
-    ["colorWeak"]
-  ),
-  null,
-  2
-);
-var SettingDrawer = (props) => {
-  const {
-    defaultSettings: propsDefaultSettings = void 0,
-    settings: propsSettings = void 0,
-    hideHintAlert,
-    hideCopyButton,
-    colorList = [
-      { key: "techBlue", color: "#1677FF" },
-      { key: "daybreak", color: "#1890ff" },
-      { key: "dust", color: "#F5222D" },
-      { key: "volcano", color: "#FA541C" },
-      { key: "sunset", color: "#FAAD14" },
-      { key: "cyan", color: "#13C2C2" },
-      { key: "green", color: "#52C41A" },
-      { key: "geekblue", color: "#2F54EB" },
-      { key: "purple", color: "#722ED1" }
-    ],
-    getContainer,
-    onSettingChange,
-    enableDarkTheme,
-    prefixCls = "ant-pro",
-    pathname = isBrowser() ? window.location.pathname : "",
-    disableUrlParams = true,
-    themeOnly,
-    drawerProps
-  } = props;
-  const firstRender = useRef(true);
-  const [open, setOpen] = useMergedState(false, {
-    value: props.collapse,
-    onChange: props.onCollapseChange
-  });
-  const [language, setLanguage] = useState(getLanguage());
-  const [urlParams, setUrlParams] = useUrlSearchParams(
-    {},
-    {
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    open = _useMergedState2[0],
+    setOpen = _useMergedState2[1];
+  var _useState = useState(getLanguage()),
+    _useState2 = _slicedToArray(_useState, 2),
+    language = _useState2[0],
+    setLanguage = _useState2[1];
+  var _useUrlSearchParams = useUrlSearchParams({}, {
       disabled: disableUrlParams
-    }
-  );
-  const [settingState, setSettingState] = useMergedState(
-    () => getParamsFromUrl(urlParams, propsSettings || propsDefaultSettings),
-    {
+    }),
+    _useUrlSearchParams2 = _slicedToArray(_useUrlSearchParams, 2),
+    urlParams = _useUrlSearchParams2[0],
+    setUrlParams = _useUrlSearchParams2[1];
+  var _useMergedState3 = useMergedState(function () {
+      return getParamsFromUrl(urlParams, propsSettings || propsDefaultSettings);
+    }, {
       value: propsSettings,
       onChange: onSettingChange
-    }
-  );
-  const { navTheme, colorPrimary, siderMenuType, layout, colorWeak } = settingState || {};
-  useEffect(() => {
-    const onLanguageChange = () => {
+    }),
+    _useMergedState4 = _slicedToArray(_useMergedState3, 2),
+    settingState = _useMergedState4[0],
+    setSettingState = _useMergedState4[1];
+  var _ref3 = settingState || {},
+    navTheme = _ref3.navTheme,
+    colorPrimary = _ref3.colorPrimary,
+    siderMenuType = _ref3.siderMenuType,
+    layout = _ref3.layout,
+    colorWeak = _ref3.colorWeak;
+  useEffect(function () {
+    // 语言修改，这个是和 locale 是配置起来的
+    var onLanguageChange = function onLanguageChange() {
       if (language !== getLanguage()) {
         setLanguage(getLanguage());
       }
     };
-    if (!isBrowser())
-      return () => null;
-    initState(
-      getParamsFromUrl(urlParams, propsSettings),
-      settingState,
-      setSettingState
-    );
-    window.document.addEventListener("languagechange", onLanguageChange, {
+
+    /** 如果不是浏览器 都没有必要做了 */
+    if (!isBrowser()) return function () {
+      return null;
+    };
+    initState(getParamsFromUrl(urlParams, propsSettings), settingState, setSettingState);
+    window.document.addEventListener('languagechange', onLanguageChange, {
       passive: true
     });
-    return () => window.document.removeEventListener("languagechange", onLanguageChange);
+    return function () {
+      return window.document.removeEventListener('languagechange', onLanguageChange);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  const changeSetting = (key, value) => {
-    const nextState = {};
+
+  /**
+   * 修改设置
+   *
+   * @param key
+   * @param value
+   */
+  var changeSetting = function changeSetting(key, value) {
+    var nextState = {};
     nextState[key] = value;
-    if (key === "layout") {
-      nextState.contentWidth = value === "top" ? "Fixed" : "Fluid";
+    if (key === 'layout') {
+      nextState.contentWidth = value === 'top' ? 'Fixed' : 'Fluid';
     }
-    if (key === "layout" && value !== "mix") {
+    if (key === 'layout' && value !== 'mix') {
       nextState.splitMenus = false;
     }
-    if (key === "layout" && value === "mix") {
-      nextState.navTheme = "light";
+    if (key === 'layout' && value === 'mix') {
+      nextState.navTheme = 'light';
     }
-    if (key === "colorWeak" && value === true) {
-      const dom = document.querySelector("body");
+    if (key === 'colorWeak' && value === true) {
+      var dom = document.querySelector('body');
       if (dom) {
         dom.dataset.prosettingdrawer = dom.style.filter;
-        dom.style.filter = "invert(80%)";
+        dom.style.filter = 'invert(80%)';
       }
     }
-    if (key === "colorWeak" && value === false) {
-      const dom = document.querySelector("body");
-      if (dom) {
-        dom.style.filter = dom.dataset.prosettingdrawer || "none";
-        delete dom.dataset.prosettingdrawer;
+    if (key === 'colorWeak' && value === false) {
+      var _dom = document.querySelector('body');
+      if (_dom) {
+        _dom.style.filter = _dom.dataset.prosettingdrawer || 'none';
+        delete _dom.dataset.prosettingdrawer;
       }
     }
     delete nextState.menu;
@@ -227,21 +240,22 @@ var SettingDrawer = (props) => {
     delete nextState.iconfontUrl;
     delete nextState.logo;
     delete nextState.pwa;
-    setSettingState(__spreadValues(__spreadValues({}, settingState), nextState));
+    setSettingState(_objectSpread(_objectSpread({}, settingState), nextState));
   };
-  const formatMessage = getFormatMessage();
-  useEffect(() => {
-    if (!isBrowser())
-      return;
-    if (disableUrlParams)
-      return;
+  var formatMessage = getFormatMessage();
+  useEffect(function () {
+    /** 如果不是浏览器 都没有必要做了 */
+    if (!isBrowser()) return;
+    if (disableUrlParams) return;
     if (firstRender.current) {
       firstRender.current = false;
       return;
     }
-    const urlSearchParams = new URLSearchParams(window.location.search);
-    const params = Object.fromEntries(urlSearchParams.entries());
-    const diffParams = getDifferentSetting(__spreadValues(__spreadValues({}, params), settingState));
+
+    /** 每次从url拿最新的防止记忆 */
+    var urlSearchParams = new URLSearchParams(window.location.search);
+    var params = Object.fromEntries(urlSearchParams.entries());
+    var diffParams = getDifferentSetting(_objectSpread(_objectSpread({}, params), settingState));
     delete diffParams.logo;
     delete diffParams.menu;
     delete diffParams.title;
@@ -249,270 +263,242 @@ var SettingDrawer = (props) => {
     delete diffParams.pwa;
     setUrlParams(diffParams);
   }, [setUrlParams, settingState, urlParams, pathname, disableUrlParams]);
-  const baseClassName = `${prefixCls}-setting-drawer`;
-  const { wrapSSR, hashId } = useStyle(baseClassName);
-  return wrapSSR(
-    /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: `${baseClassName}-handle ${hashId}`.trim(),
-        onClick: () => setOpen(!open),
-        style: {
-          width: 48,
-          height: 48
-        }
+  var baseClassName = "".concat(prefixCls, "-setting-drawer");
+  var _useStyle = useStyle(baseClassName),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+  return wrapSSR( /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "".concat(baseClassName, "-handle ").concat(hashId).trim(),
+      onClick: function onClick() {
+        return setOpen(!open);
       },
-      open ? /* @__PURE__ */ React.createElement(
-        CloseOutlined,
-        {
-          style: {
-            color: "#fff",
-            fontSize: 20
-          }
-        }
-      ) : /* @__PURE__ */ React.createElement(
-        SettingOutlined,
-        {
-          style: {
-            color: "#fff",
-            fontSize: 20
-          }
+      style: {
+        width: 48,
+        height: 48
+      },
+      children: open ? /*#__PURE__*/_jsx(CloseOutlined, {
+        style: {
+          color: '#fff',
+          fontSize: 20
         }
-      )
-    ), /* @__PURE__ */ React.createElement(
-      Drawer,
-      __spreadValues({
-        open,
-        width: 300,
-        onClose: () => setOpen(false),
-        closable: false,
-        placement: "right",
-        getContainer,
+      }) : /*#__PURE__*/_jsx(SettingOutlined, {
         style: {
-          zIndex: 999
+          color: '#fff',
+          fontSize: 20
         }
-      }, drawerProps),
-      /* @__PURE__ */ React.createElement("div", { className: `${baseClassName}-drawer-content ${hashId}`.trim() }, /* @__PURE__ */ React.createElement(
-        Body,
-        {
+      })
+    }), /*#__PURE__*/_jsx(Drawer, _objectSpread(_objectSpread({
+      open: open,
+      width: 300,
+      onClose: function onClose() {
+        return setOpen(false);
+      },
+      closable: false,
+      placement: "right",
+      getContainer: getContainer,
+      style: {
+        zIndex: 999
+      }
+    }, drawerProps), {}, {
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "".concat(baseClassName, "-drawer-content ").concat(hashId).trim(),
+        children: [/*#__PURE__*/_jsx(Body, {
           title: formatMessage({
-            id: "app.setting.pagestyle",
-            defaultMessage: "Page style setting"
+            id: 'app.setting.pagestyle',
+            defaultMessage: 'Page style setting'
           }),
-          hashId,
-          prefixCls: baseClassName
-        },
-        /* @__PURE__ */ React.createElement(
-          BlockCheckbox,
-          {
-            hashId,
+          hashId: hashId,
+          prefixCls: baseClassName,
+          children: /*#__PURE__*/_jsx(BlockCheckbox, {
+            hashId: hashId,
             prefixCls: baseClassName,
-            list: [
-              {
-                key: "light",
-                title: formatMessage({
-                  id: "app.setting.pagestyle.light",
-                  defaultMessage: "亮色菜单风格"
-                })
-              },
-              {
-                key: "realDark",
-                title: formatMessage({
-                  id: "app.setting.pagestyle.realdark",
-                  defaultMessage: "暗色菜单风格"
-                })
-              }
-            ].filter((item) => {
-              if (item.key === "dark" && settingState.layout === "mix")
-                return false;
-              if (item.key === "realDark" && !enableDarkTheme)
-                return false;
+            list: [{
+              key: 'light',
+              title: formatMessage({
+                id: 'app.setting.pagestyle.light',
+                defaultMessage: '亮色菜单风格'
+              })
+            }, {
+              key: 'realDark',
+              title: formatMessage({
+                id: 'app.setting.pagestyle.realdark',
+                defaultMessage: '暗色菜单风格'
+              })
+            }].filter(function (item) {
+              if (item.key === 'dark' && settingState.layout === 'mix') return false;
+              if (item.key === 'realDark' && !enableDarkTheme) return false;
               return true;
             }),
             value: navTheme,
             configType: "theme",
-            key: "navTheme",
-            onChange: (value) => changeSetting("navTheme", value)
-          }
-        )
-      ), colorList !== false && /* @__PURE__ */ React.createElement(
-        Body,
-        {
-          hashId,
+            onChange: function onChange(value) {
+              return changeSetting('navTheme', value);
+            }
+          }, "navTheme")
+        }), colorList !== false && /*#__PURE__*/_jsx(Body, {
+          hashId: hashId,
           title: formatMessage({
-            id: "app.setting.themecolor",
-            defaultMessage: "Theme color"
+            id: 'app.setting.themecolor',
+            defaultMessage: 'Theme color'
           }),
-          prefixCls: baseClassName
-        },
-        /* @__PURE__ */ React.createElement(
-          ThemeColor,
-          {
-            hashId,
+          prefixCls: baseClassName,
+          children: /*#__PURE__*/_jsx(ThemeColor, {
+            hashId: hashId,
             prefixCls: baseClassName,
-            colorList,
+            colorList: colorList,
             value: genStringToTheme(colorPrimary),
-            formatMessage,
-            onChange: (color) => changeSetting("colorPrimary", color)
-          }
-        )
-      ), !themeOnly && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(
-        Body,
-        {
-          hashId,
-          prefixCls: baseClassName,
-          title: formatMessage({ id: "app.setting.navigationmode" })
-        },
-        /* @__PURE__ */ React.createElement(
-          BlockCheckbox,
-          {
+            formatMessage: formatMessage,
+            onChange: function onChange(color) {
+              return changeSetting('colorPrimary', color);
+            }
+          })
+        }), !themeOnly && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(Body, {
+            hashId: hashId,
             prefixCls: baseClassName,
-            value: layout,
-            key: "layout",
-            hashId,
-            configType: "layout",
-            list: [
-              {
-                key: "side",
-                title: formatMessage({ id: "app.setting.sidemenu" })
-              },
-              {
-                key: "top",
-                title: formatMessage({ id: "app.setting.topmenu" })
-              },
-              {
-                key: "mix",
-                title: formatMessage({ id: "app.setting.mixmenu" })
+            title: formatMessage({
+              id: 'app.setting.navigationmode'
+            }),
+            children: /*#__PURE__*/_jsx(BlockCheckbox, {
+              prefixCls: baseClassName,
+              value: layout,
+              hashId: hashId,
+              configType: "layout",
+              list: [{
+                key: 'side',
+                title: formatMessage({
+                  id: 'app.setting.sidemenu'
+                })
+              }, {
+                key: 'top',
+                title: formatMessage({
+                  id: 'app.setting.topmenu'
+                })
+              }, {
+                key: 'mix',
+                title: formatMessage({
+                  id: 'app.setting.mixmenu'
+                })
+              }],
+              onChange: function onChange(value) {
+                return changeSetting('layout', value);
               }
-            ],
-            onChange: (value) => changeSetting("layout", value)
-          }
-        )
-      ), settingState.layout == "side" || settingState.layout == "mix" ? /* @__PURE__ */ React.createElement(
-        Body,
-        {
-          hashId,
-          prefixCls: baseClassName,
-          title: formatMessage({ id: "app.setting.sidermenutype" })
-        },
-        /* @__PURE__ */ React.createElement(
-          BlockCheckbox,
-          {
+            }, "layout")
+          }), settingState.layout == 'side' || settingState.layout == 'mix' ? /*#__PURE__*/_jsx(Body, {
+            hashId: hashId,
             prefixCls: baseClassName,
-            value: siderMenuType,
-            key: "siderMenuType",
-            hashId,
-            configType: "siderMenuType",
-            list: [
-              {
-                key: "sub",
-                icon: /* @__PURE__ */ React.createElement(SubIcon, null),
+            title: formatMessage({
+              id: 'app.setting.sidermenutype'
+            }),
+            children: /*#__PURE__*/_jsx(BlockCheckbox, {
+              prefixCls: baseClassName,
+              value: siderMenuType,
+              hashId: hashId,
+              configType: "siderMenuType",
+              list: [{
+                key: 'sub',
+                icon: /*#__PURE__*/_jsx(SubIcon, {}),
                 title: formatMessage({
-                  id: "app.setting.sidermenutype-sub"
+                  id: 'app.setting.sidermenutype-sub'
                 })
-              },
-              {
-                key: "group",
-                icon: /* @__PURE__ */ React.createElement(GroupIcon, null),
+              }, {
+                key: 'group',
+                icon: /*#__PURE__*/_jsx(GroupIcon, {}),
                 title: formatMessage({
-                  id: "app.setting.sidermenutype-group"
+                  id: 'app.setting.sidermenutype-group'
                 })
+              }],
+              onChange: function onChange(value) {
+                return changeSetting('siderMenuType', value);
               }
-            ],
-            onChange: (value) => changeSetting("siderMenuType", value)
-          }
-        )
-      ) : null, /* @__PURE__ */ React.createElement(
-        LayoutSetting,
-        {
-          prefixCls: baseClassName,
-          hashId,
-          settings: settingState,
-          changeSetting
-        }
-      ), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(
-        Body,
-        {
-          hashId,
-          prefixCls: baseClassName,
-          title: formatMessage({ id: "app.setting.regionalsettings" })
-        },
-        /* @__PURE__ */ React.createElement(
-          RegionalSetting,
-          {
-            hashId,
+            }, "siderMenuType")
+          }) : null, /*#__PURE__*/_jsx(LayoutSetting, {
             prefixCls: baseClassName,
+            hashId: hashId,
             settings: settingState,
-            changeSetting
-          }
-        )
-      ), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(
-        Body,
-        {
-          hashId,
-          prefixCls: baseClassName,
-          title: formatMessage({ id: "app.setting.othersettings" })
-        },
-        /* @__PURE__ */ React.createElement(
-          List,
-          {
-            className: `${baseClassName}-list ${hashId}`.trim(),
-            split: false,
-            size: "small",
-            renderItem: renderLayoutSettingItem,
-            dataSource: [
-              {
-                title: formatMessage({ id: "app.setting.weakmode" }),
-                action: /* @__PURE__ */ React.createElement(
-                  Switch,
-                  {
-                    size: "small",
-                    className: "color-weak",
-                    checked: !!colorWeak,
-                    onChange: (checked) => {
-                      changeSetting("colorWeak", checked);
-                    }
+            changeSetting: changeSetting
+          }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(Body, {
+            hashId: hashId,
+            prefixCls: baseClassName,
+            title: formatMessage({
+              id: 'app.setting.regionalsettings'
+            }),
+            children: /*#__PURE__*/_jsx(RegionalSetting, {
+              hashId: hashId,
+              prefixCls: baseClassName,
+              settings: settingState,
+              changeSetting: changeSetting
+            })
+          }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(Body, {
+            hashId: hashId,
+            prefixCls: baseClassName,
+            title: formatMessage({
+              id: 'app.setting.othersettings'
+            }),
+            children: /*#__PURE__*/_jsx(List, {
+              className: "".concat(baseClassName, "-list ").concat(hashId).trim(),
+              split: false,
+              size: "small",
+              renderItem: renderLayoutSettingItem,
+              dataSource: [{
+                title: formatMessage({
+                  id: 'app.setting.weakmode'
+                }),
+                action: /*#__PURE__*/_jsx(Switch, {
+                  size: "small",
+                  className: "color-weak",
+                  checked: !!colorWeak,
+                  onChange: function onChange(checked) {
+                    changeSetting('colorWeak', checked);
                   }
-                )
-              }
-            ]
-          }
-        )
-      ), hideHintAlert && hideCopyButton ? null : /* @__PURE__ */ React.createElement(Divider, null), hideHintAlert ? null : /* @__PURE__ */ React.createElement(
-        Alert,
-        {
-          type: "warning",
-          message: formatMessage({
-            id: "app.setting.production.hint"
-          }),
-          icon: /* @__PURE__ */ React.createElement(NotificationOutlined, null),
-          showIcon: true,
-          style: { marginBlockEnd: 16 }
-        }
-      ), hideCopyButton ? null : /* @__PURE__ */ React.createElement(
-        Button,
-        {
-          block: true,
-          icon: /* @__PURE__ */ React.createElement(CopyOutlined, null),
-          style: { marginBlockEnd: 24 },
-          onClick: () => __async(void 0, null, function* () {
-            try {
-              yield navigator.clipboard.writeText(
-                genCopySettingJson(settingState)
-              );
-              message.success(
-                formatMessage({ id: "app.setting.copyinfo" })
-              );
-            } catch (error) {
+                })
+              }]
+            })
+          }), hideHintAlert && hideCopyButton ? null : /*#__PURE__*/_jsx(Divider, {}), hideHintAlert ? null : /*#__PURE__*/_jsx(Alert, {
+            type: "warning",
+            message: formatMessage({
+              id: 'app.setting.production.hint'
+            }),
+            icon: /*#__PURE__*/_jsx(NotificationOutlined, {}),
+            showIcon: true,
+            style: {
+              marginBlockEnd: 16
             }
-          })
-        },
-        formatMessage({ id: "app.setting.copy" })
-      )))
-    ))
-  );
-};
-export {
-  SettingDrawer,
-  getFormatMessage
-};
+          }), hideCopyButton ? null : /*#__PURE__*/_jsx(Button, {
+            block: true,
+            icon: /*#__PURE__*/_jsx(CopyOutlined, {}),
+            style: {
+              marginBlockEnd: 24
+            },
+            onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+              return _regeneratorRuntime().wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    _context.prev = 0;
+                    _context.next = 3;
+                    return navigator.clipboard.writeText(genCopySettingJson(settingState));
+                  case 3:
+                    message.success(formatMessage({
+                      id: 'app.setting.copyinfo'
+                    }));
+                    _context.next = 8;
+                    break;
+                  case 6:
+                    _context.prev = 6;
+                    _context.t0 = _context["catch"](0);
+                  case 8:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee, null, [[0, 6]]);
+            })),
+            children: formatMessage({
+              id: 'app.setting.copy'
+            })
+          })]
+        })]
+      })
+    }))]
+  }));
+};