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

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

@@ -1,12 +1,8 @@
-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 { omit, useMergedState } from '@rc-component/util';
+import { omit, useControlledState } from '@rc-component/util';
 import { useUrlSearchParams } from '@umijs/use-params';
 import { Alert, Button, Divider, Drawer, List, Switch, message } from 'antd';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { isBrowser, merge } from "../../../utils";
 import { defaultSettings } from "../../defaultSettings";
 import { gLocaleObject, getLanguage } from "../../locales";
@@ -21,24 +17,23 @@ import { ThemeColor } from "./ThemeColor";
 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) {
+const Body = ({
+  children,
+  hashId,
+  prefixCls,
+  title
+}) => /*#__PURE__*/_jsxs("div", {
+  style: {
+    marginBlockEnd: 12
+  },
+  children: [/*#__PURE__*/_jsx("h3", {
+    className: `${prefixCls}-body-title ${hashId}`.trim(),
+    children: title
+  }), children]
+});
+const getDifferentSetting = state => {
+  const stateObj = {};
+  Object.keys(state).forEach(key => {
     if (state[key] !== defaultSettings[key] &&
     //@ts-ignore
     key !== 'collapse') {
@@ -51,10 +46,11 @@ var getDifferentSetting = function getDifferentSetting(state) {
   stateObj.menu = undefined;
   return stateObj;
 };
-export var getFormatMessage = function getFormatMessage() {
-  var formatMessage = function formatMessage(_ref2) {
-    var id = _ref2.id;
-    var locales = gLocaleObject();
+export const getFormatMessage = () => {
+  const formatMessage = ({
+    id
+  }) => {
+    const locales = gLocaleObject();
     return locales[id];
   };
   return formatMessage;
@@ -65,10 +61,10 @@ export var getFormatMessage = function getFormatMessage() {
  *
  * @param param0
  */
-var initState = function initState(urlParams, settings, onSettingChange) {
+const initState = (urlParams, settings, onSettingChange) => {
   if (!isBrowser()) return;
-  var replaceSetting = {};
-  Object.keys(urlParams).forEach(function (key) {
+  const replaceSetting = {};
+  Object.keys(urlParams).forEach(key => {
     if (defaultSettings[key] || defaultSettings[key] === undefined) {
       if (key === 'colorPrimary') {
         replaceSetting[key] = genStringToTheme(urlParams[key]);
@@ -77,38 +73,39 @@ var initState = function initState(urlParams, settings, onSettingChange) {
       replaceSetting[key] = urlParams[key];
     }
   });
-  var newSettings = merge({}, settings, replaceSetting);
+  const newSettings = merge({}, settings, replaceSetting);
   delete newSettings.menu;
   delete newSettings.title;
   delete newSettings.iconfontUrl;
 
   // 同步数据到外部
-  onSettingChange === null || onSettingChange === void 0 || onSettingChange(newSettings);
+  onSettingChange?.(newSettings);
 };
-var getParamsFromUrl = function getParamsFromUrl(urlParams, settings) {
+const getParamsFromUrl = (urlParams, settings) => {
   if (!isBrowser()) return defaultSettings;
-  return _objectSpread(_objectSpread(_objectSpread({}, defaultSettings), settings || {}), urlParams);
-};
-var genCopySettingJson = function genCopySettingJson(settingState) {
-  return JSON.stringify(omit(_objectSpread(_objectSpread({}, settingState), {}, {
-    colorPrimary: settingState.colorPrimary
-  }), ['colorWeak']), null, 2);
+  return {
+    ...defaultSettings,
+    ...(settings || {}),
+    ...urlParams
+  };
 };
+const genCopySettingJson = settingState => JSON.stringify(omit({
+  ...settingState,
+  colorPrimary: settingState.colorPrimary
+}, ['colorWeak']), null, 2);
 
 /**
  * 可视化配置组件
  *
  * @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 ? [{
+export const SettingDrawer = props => {
+  const {
+    defaultSettings: propsDefaultSettings = undefined,
+    settings: propsSettings = undefined,
+    hideHintAlert,
+    hideCopyButton,
+    colorList = [{
       key: 'techBlue',
       color: '#1677FF'
     }, {
@@ -135,70 +132,59 @@ export var SettingDrawer = function SettingDrawer(props) {
     }, {
       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
-    }),
-    _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
-    }),
-    _useUrlSearchParams2 = _slicedToArray(_useUrlSearchParams, 2),
-    urlParams = _useUrlSearchParams2[0],
-    setUrlParams = _useUrlSearchParams2[1];
-  var _useMergedState3 = useMergedState(function () {
-      return getParamsFromUrl(urlParams, propsSettings || propsDefaultSettings);
-    }, {
-      value: propsSettings,
-      onChange: onSettingChange
-    }),
-    _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 () {
+    }],
+    getContainer,
+    onSettingChange,
+    enableDarkTheme,
+    prefixCls = 'ant-pro',
+    pathname = isBrowser() ? window.location.pathname : '',
+    disableUrlParams = true,
+    themeOnly,
+    drawerProps
+  } = props;
+  const firstRender = useRef(true);
+  const [open, setOpenInner] = useControlledState(false, props.collapse);
+  const setOpen = useCallback(updater => {
+    setOpenInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      props.onCollapseChange?.(next);
+      return next;
+    });
+  }, [props.onCollapseChange]);
+  const [language, setLanguage] = useState(getLanguage());
+  const [urlParams, setUrlParams] = useUrlSearchParams({}, {
+    disabled: disableUrlParams
+  });
+  const [settingState, setSettingStateInner] = useControlledState(() => getParamsFromUrl(urlParams, propsSettings || propsDefaultSettings), propsSettings);
+  const setSettingState = useCallback(updater => {
+    setSettingStateInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      onSettingChange?.(next);
+      return next;
+    });
+  }, [onSettingChange]);
+  const {
+    navTheme,
+    colorPrimary,
+    siderMenuType,
+    layout,
+    colorWeak
+  } = settingState || {};
+  useEffect(() => {
     // 语言修改，这个是和 locale 是配置起来的
-    var onLanguageChange = function onLanguageChange() {
+    const onLanguageChange = () => {
       if (language !== getLanguage()) {
         setLanguage(getLanguage());
       }
     };
 
     /** 如果不是浏览器 都没有必要做了 */
-    if (!isBrowser()) return function () {
-      return null;
-    };
+    if (!isBrowser()) return () => null;
     initState(getParamsFromUrl(urlParams, propsSettings), settingState, setSettingState);
     window.document.addEventListener('languagechange', onLanguageChange, {
       passive: true
     });
-    return function () {
-      return window.document.removeEventListener('languagechange', onLanguageChange);
-    };
+    return () => window.document.removeEventListener('languagechange', onLanguageChange);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -208,8 +194,8 @@ export var SettingDrawer = function SettingDrawer(props) {
    * @param key
    * @param value
    */
-  var changeSetting = function changeSetting(key, value) {
-    var nextState = {};
+  const changeSetting = (key, value) => {
+    const nextState = {};
     nextState[key] = value;
     if (key === 'layout') {
       nextState.contentWidth = value === 'top' ? 'Fixed' : 'Fluid';
@@ -221,17 +207,17 @@ export var SettingDrawer = function SettingDrawer(props) {
       nextState.navTheme = 'light';
     }
     if (key === 'colorWeak' && value === true) {
-      var dom = document.querySelector('body');
+      const dom = document.querySelector('body');
       if (dom) {
         dom.dataset.prosettingdrawer = dom.style.filter;
         dom.style.filter = 'invert(80%)';
       }
     }
     if (key === 'colorWeak' && value === false) {
-      var _dom = document.querySelector('body');
-      if (_dom) {
-        _dom.style.filter = _dom.dataset.prosettingdrawer || 'none';
-        delete _dom.dataset.prosettingdrawer;
+      const dom = document.querySelector('body');
+      if (dom) {
+        dom.style.filter = dom.dataset.prosettingdrawer || 'none';
+        delete dom.dataset.prosettingdrawer;
       }
     }
     delete nextState.menu;
@@ -239,10 +225,13 @@ export var SettingDrawer = function SettingDrawer(props) {
     delete nextState.iconfontUrl;
     delete nextState.logo;
     delete nextState.pwa;
-    setSettingState(_objectSpread(_objectSpread({}, settingState), nextState));
+    setSettingState({
+      ...settingState,
+      ...nextState
+    });
   };
-  var formatMessage = getFormatMessage();
-  useEffect(function () {
+  const formatMessage = getFormatMessage();
+  useEffect(() => {
     /** 如果不是浏览器 都没有必要做了 */
     if (!isBrowser()) return;
     if (disableUrlParams) return;
@@ -252,9 +241,12 @@ export var SettingDrawer = function SettingDrawer(props) {
     }
 
     /** 每次从url拿最新的防止记忆 */
-    var urlSearchParams = new URLSearchParams(window.location.search);
-    var params = Object.fromEntries(urlSearchParams.entries());
-    var diffParams = getDifferentSetting(_objectSpread(_objectSpread({}, params), settingState));
+    const urlSearchParams = new URLSearchParams(window.location.search);
+    const params = Object.fromEntries(urlSearchParams.entries());
+    const diffParams = getDifferentSetting({
+      ...params,
+      ...settingState
+    });
     delete diffParams.logo;
     delete diffParams.menu;
     delete diffParams.title;
@@ -262,16 +254,15 @@ export var SettingDrawer = function SettingDrawer(props) {
     delete diffParams.pwa;
     setUrlParams(diffParams);
   }, [setUrlParams, settingState, urlParams, pathname, disableUrlParams]);
-  var baseClassName = "".concat(prefixCls, "-setting-drawer");
-  var _useStyle = useStyle(baseClassName),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
+  const baseClassName = `${prefixCls}-setting-drawer`;
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(baseClassName);
   return wrapSSR( /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("div", {
-      className: "".concat(baseClassName, "-handle ").concat(hashId).trim(),
-      onClick: function onClick() {
-        return setOpen(!open);
-      },
+      className: `${baseClassName}-handle ${hashId}`.trim(),
+      onClick: () => setOpen(!open),
       style: {
         width: 48,
         height: 48
@@ -287,21 +278,19 @@ export var SettingDrawer = function SettingDrawer(props) {
           fontSize: 20
         }
       })
-    }), /*#__PURE__*/_jsx(Drawer, _objectSpread(_objectSpread({
+    }), /*#__PURE__*/_jsx(Drawer, {
       open: open,
       size: 300,
-      onClose: function onClose() {
-        return setOpen(false);
-      },
+      onClose: () => setOpen(false),
       closable: false,
       placement: "right",
       getContainer: getContainer,
       style: {
         zIndex: 999
-      }
-    }, drawerProps), {}, {
+      },
+      ...drawerProps,
       children: /*#__PURE__*/_jsxs("div", {
-        className: "".concat(baseClassName, "-drawer-content ").concat(hashId).trim(),
+        className: `${baseClassName}-drawer-content ${hashId}`.trim(),
         children: [/*#__PURE__*/_jsx(Body, {
           title: formatMessage({
             id: 'app.setting.pagestyle',
@@ -324,16 +313,14 @@ export var SettingDrawer = function SettingDrawer(props) {
                 id: 'app.setting.pagestyle.realdark',
                 defaultMessage: '暗色菜单风格'
               })
-            }].filter(function (item) {
+            }].filter(item => {
               if (item.key === 'dark' && settingState.layout === 'mix') return false;
               if (item.key === 'realDark' && !enableDarkTheme) return false;
               return true;
             }),
             value: navTheme,
             configType: "theme",
-            onChange: function onChange(value) {
-              return changeSetting('navTheme', value);
-            }
+            onChange: value => changeSetting('navTheme', value)
           }, "navTheme")
         }), colorList !== false && /*#__PURE__*/_jsx(Body, {
           hashId: hashId,
@@ -348,9 +335,7 @@ export var SettingDrawer = function SettingDrawer(props) {
             colorList: colorList,
             value: genStringToTheme(colorPrimary),
             formatMessage: formatMessage,
-            onChange: function onChange(color) {
-              return changeSetting('colorPrimary', color);
-            }
+            onChange: color => changeSetting('colorPrimary', color)
           })
         }), !themeOnly && /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(Body, {
@@ -380,9 +365,7 @@ export var SettingDrawer = function SettingDrawer(props) {
                   id: 'app.setting.mixmenu'
                 })
               }],
-              onChange: function onChange(value) {
-                return changeSetting('layout', value);
-              }
+              onChange: value => changeSetting('layout', value)
             }, "layout")
           }), settingState.layout == 'side' || settingState.layout == 'mix' ? /*#__PURE__*/_jsx(Body, {
             hashId: hashId,
@@ -408,9 +391,7 @@ export var SettingDrawer = function SettingDrawer(props) {
                   id: 'app.setting.sidermenutype-group'
                 })
               }],
-              onChange: function onChange(value) {
-                return changeSetting('siderMenuType', value);
-              }
+              onChange: value => changeSetting('siderMenuType', value)
             }, "siderMenuType")
           }) : null, /*#__PURE__*/_jsx(LayoutSetting, {
             prefixCls: baseClassName,
@@ -436,7 +417,7 @@ export var SettingDrawer = function SettingDrawer(props) {
               id: 'app.setting.othersettings'
             }),
             children: /*#__PURE__*/_jsx(List, {
-              className: "".concat(baseClassName, "-list ").concat(hashId).trim(),
+              className: `${baseClassName}-list ${hashId}`.trim(),
               split: false,
               size: "small",
               renderItem: renderLayoutSettingItem,
@@ -448,7 +429,7 @@ export var SettingDrawer = function SettingDrawer(props) {
                   size: "small",
                   className: "color-weak",
                   checked: !!colorWeak,
-                  onChange: function onChange(checked) {
+                  onChange: checked => {
                     changeSetting('colorWeak', checked);
                   }
                 })
@@ -470,34 +451,22 @@ export var SettingDrawer = function SettingDrawer(props) {
             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]]);
-            })),
+            onClick: async () => {
+              try {
+                await navigator.clipboard.writeText(genCopySettingJson(settingState));
+                message.success(formatMessage({
+                  id: 'app.setting.copyinfo'
+                }));
+              } catch (error) {
+                // console.log(error);
+              }
+            },
             children: formatMessage({
               id: 'app.setting.copy'
             })
           })]
         })]
       })
-    }))]
+    })]
   }));
 };