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

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

@@ -1,15 +1,10 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getFormatMessage = exports.SettingDrawer = void 0;
-var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _icons = require("@ant-design/icons");
 var _util = require("@rc-component/util");
 var _useParams = require("@umijs/use-params");
@@ -27,24 +22,23 @@ var _RegionalChange = require("./RegionalChange");
 var _index = require("./style/index");
 var _ThemeColor = require("./ThemeColor");
 var _jsxRuntime = require("react/jsx-runtime");
-var Body = function Body(_ref) {
-  var children = _ref.children,
-    hashId = _ref.hashId,
-    prefixCls = _ref.prefixCls,
-    title = _ref.title;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    style: {
-      marginBlockEnd: 12
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)("div", {
+  style: {
+    marginBlockEnd: 12
+  },
+  children: [/*#__PURE__*/(0, _jsxRuntime.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.defaultSettings[key] &&
     //@ts-ignore
     key !== 'collapse') {
@@ -57,10 +51,11 @@ var getDifferentSetting = function getDifferentSetting(state) {
   stateObj.menu = undefined;
   return stateObj;
 };
-var getFormatMessage = exports.getFormatMessage = function getFormatMessage() {
-  var formatMessage = function formatMessage(_ref2) {
-    var id = _ref2.id;
-    var locales = (0, _locales.gLocaleObject)();
+const getFormatMessage = () => {
+  const formatMessage = ({
+    id
+  }) => {
+    const locales = (0, _locales.gLocaleObject)();
     return locales[id];
   };
   return formatMessage;
@@ -71,10 +66,11 @@ var getFormatMessage = exports.getFormatMessage = function getFormatMessage() {
  *
  * @param param0
  */
-var initState = function initState(urlParams, settings, onSettingChange) {
+exports.getFormatMessage = getFormatMessage;
+const initState = (urlParams, settings, onSettingChange) => {
   if (!(0, _utils.isBrowser)()) return;
-  var replaceSetting = {};
-  Object.keys(urlParams).forEach(function (key) {
+  const replaceSetting = {};
+  Object.keys(urlParams).forEach(key => {
     if (_defaultSettings.defaultSettings[key] || _defaultSettings.defaultSettings[key] === undefined) {
       if (key === 'colorPrimary') {
         replaceSetting[key] = (0, _utils2.genStringToTheme)(urlParams[key]);
@@ -83,38 +79,39 @@ var initState = function initState(urlParams, settings, onSettingChange) {
       replaceSetting[key] = urlParams[key];
     }
   });
-  var newSettings = (0, _utils.merge)({}, settings, replaceSetting);
+  const newSettings = (0, _utils.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 (!(0, _utils.isBrowser)()) return _defaultSettings.defaultSettings;
-  return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, _defaultSettings.defaultSettings), settings || {}), urlParams);
-};
-var genCopySettingJson = function genCopySettingJson(settingState) {
-  return JSON.stringify((0, _util.omit)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, settingState), {}, {
-    colorPrimary: settingState.colorPrimary
-  }), ['colorWeak']), null, 2);
+  return {
+    ..._defaultSettings.defaultSettings,
+    ...(settings || {}),
+    ...urlParams
+  };
 };
+const genCopySettingJson = settingState => JSON.stringify((0, _util.omit)({
+  ...settingState,
+  colorPrimary: settingState.colorPrimary
+}, ['colorWeak']), null, 2);
 
 /**
  * 可视化配置组件
  *
  * @param props
  */
-var SettingDrawer = exports.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 ? [{
+const SettingDrawer = props => {
+  const {
+    defaultSettings: propsDefaultSettings = undefined,
+    settings: propsSettings = undefined,
+    hideHintAlert,
+    hideCopyButton,
+    colorList = [{
       key: 'techBlue',
       color: '#1677FF'
     }, {
@@ -141,70 +138,59 @@ var SettingDrawer = exports.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 ? (0, _utils.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 = (0, _react.useRef)(true);
-  var _useMergedState = (0, _util.useMergedState)(false, {
-      value: props.collapse,
-      onChange: props.onCollapseChange
-    }),
-    _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
-    open = _useMergedState2[0],
-    setOpen = _useMergedState2[1];
-  var _useState = (0, _react.useState)((0, _locales.getLanguage)()),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    language = _useState2[0],
-    setLanguage = _useState2[1];
-  var _useUrlSearchParams = (0, _useParams.useUrlSearchParams)({}, {
-      disabled: disableUrlParams
-    }),
-    _useUrlSearchParams2 = (0, _slicedToArray2.default)(_useUrlSearchParams, 2),
-    urlParams = _useUrlSearchParams2[0],
-    setUrlParams = _useUrlSearchParams2[1];
-  var _useMergedState3 = (0, _util.useMergedState)(function () {
-      return getParamsFromUrl(urlParams, propsSettings || propsDefaultSettings);
-    }, {
-      value: propsSettings,
-      onChange: onSettingChange
-    }),
-    _useMergedState4 = (0, _slicedToArray2.default)(_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;
-  (0, _react.useEffect)(function () {
+    }],
+    getContainer,
+    onSettingChange,
+    enableDarkTheme,
+    prefixCls = 'ant-pro',
+    pathname = (0, _utils.isBrowser)() ? window.location.pathname : '',
+    disableUrlParams = true,
+    themeOnly,
+    drawerProps
+  } = props;
+  const firstRender = (0, _react.useRef)(true);
+  const [open, setOpenInner] = (0, _util.useControlledState)(false, props.collapse);
+  const setOpen = (0, _react.useCallback)(updater => {
+    setOpenInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      props.onCollapseChange?.(next);
+      return next;
+    });
+  }, [props.onCollapseChange]);
+  const [language, setLanguage] = (0, _react.useState)((0, _locales.getLanguage)());
+  const [urlParams, setUrlParams] = (0, _useParams.useUrlSearchParams)({}, {
+    disabled: disableUrlParams
+  });
+  const [settingState, setSettingStateInner] = (0, _util.useControlledState)(() => getParamsFromUrl(urlParams, propsSettings || propsDefaultSettings), propsSettings);
+  const setSettingState = (0, _react.useCallback)(updater => {
+    setSettingStateInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      onSettingChange?.(next);
+      return next;
+    });
+  }, [onSettingChange]);
+  const {
+    navTheme,
+    colorPrimary,
+    siderMenuType,
+    layout,
+    colorWeak
+  } = settingState || {};
+  (0, _react.useEffect)(() => {
     // 语言修改，这个是和 locale 是配置起来的
-    var onLanguageChange = function onLanguageChange() {
+    const onLanguageChange = () => {
       if (language !== (0, _locales.getLanguage)()) {
         setLanguage((0, _locales.getLanguage)());
       }
     };
 
     /** 如果不是浏览器 都没有必要做了 */
-    if (!(0, _utils.isBrowser)()) return function () {
-      return null;
-    };
+    if (!(0, _utils.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
   }, []);
 
@@ -214,8 +200,8 @@ var SettingDrawer = exports.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';
@@ -227,17 +213,17 @@ var SettingDrawer = exports.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;
@@ -245,10 +231,13 @@ var SettingDrawer = exports.SettingDrawer = function SettingDrawer(props) {
     delete nextState.iconfontUrl;
     delete nextState.logo;
     delete nextState.pwa;
-    setSettingState((0, _objectSpread2.default)((0, _objectSpread2.default)({}, settingState), nextState));
+    setSettingState({
+      ...settingState,
+      ...nextState
+    });
   };
-  var formatMessage = getFormatMessage();
-  (0, _react.useEffect)(function () {
+  const formatMessage = getFormatMessage();
+  (0, _react.useEffect)(() => {
     /** 如果不是浏览器 都没有必要做了 */
     if (!(0, _utils.isBrowser)()) return;
     if (disableUrlParams) return;
@@ -258,9 +247,12 @@ var SettingDrawer = exports.SettingDrawer = function SettingDrawer(props) {
     }
 
     /** 每次从url拿最新的防止记忆 */
-    var urlSearchParams = new URLSearchParams(window.location.search);
-    var params = Object.fromEntries(urlSearchParams.entries());
-    var diffParams = getDifferentSetting((0, _objectSpread2.default)((0, _objectSpread2.default)({}, 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;
@@ -268,16 +260,15 @@ var SettingDrawer = exports.SettingDrawer = function SettingDrawer(props) {
     delete diffParams.pwa;
     setUrlParams(diffParams);
   }, [setUrlParams, settingState, urlParams, pathname, disableUrlParams]);
-  var baseClassName = "".concat(prefixCls, "-setting-drawer");
-  var _useStyle = (0, _index.useStyle)(baseClassName),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
+  const baseClassName = `${prefixCls}-setting-drawer`;
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _index.useStyle)(baseClassName);
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.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
@@ -293,21 +284,19 @@ var SettingDrawer = exports.SettingDrawer = function SettingDrawer(props) {
           fontSize: 20
         }
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Drawer, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Drawer, {
       open: open,
-      width: 300,
-      onClose: function onClose() {
-        return setOpen(false);
-      },
+      size: 300,
+      onClose: () => setOpen(false),
       closable: false,
       placement: "right",
       getContainer: getContainer,
       style: {
         zIndex: 999
-      }
-    }, drawerProps), {}, {
+      },
+      ...drawerProps,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "".concat(baseClassName, "-drawer-content ").concat(hashId).trim(),
+        className: `${baseClassName}-drawer-content ${hashId}`.trim(),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Body, {
           title: formatMessage({
             id: 'app.setting.pagestyle',
@@ -330,16 +319,14 @@ var SettingDrawer = exports.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__*/(0, _jsxRuntime.jsx)(Body, {
           hashId: hashId,
@@ -354,9 +341,7 @@ var SettingDrawer = exports.SettingDrawer = function SettingDrawer(props) {
             colorList: colorList,
             value: (0, _utils2.genStringToTheme)(colorPrimary),
             formatMessage: formatMessage,
-            onChange: function onChange(color) {
-              return changeSetting('colorPrimary', color);
-            }
+            onChange: color => changeSetting('colorPrimary', color)
           })
         }), !themeOnly && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Body, {
@@ -386,9 +371,7 @@ var SettingDrawer = exports.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__*/(0, _jsxRuntime.jsx)(Body, {
             hashId: hashId,
@@ -414,9 +397,7 @@ var SettingDrawer = exports.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__*/(0, _jsxRuntime.jsx)(_LayoutChange.LayoutSetting, {
             prefixCls: baseClassName,
@@ -442,7 +423,7 @@ var SettingDrawer = exports.SettingDrawer = function SettingDrawer(props) {
               id: 'app.setting.othersettings'
             }),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.List, {
-              className: "".concat(baseClassName, "-list ").concat(hashId).trim(),
+              className: `${baseClassName}-list ${hashId}`.trim(),
               split: false,
               size: "small",
               renderItem: _LayoutChange.renderLayoutSettingItem,
@@ -454,7 +435,7 @@ var SettingDrawer = exports.SettingDrawer = function SettingDrawer(props) {
                   size: "small",
                   className: "color-weak",
                   checked: !!colorWeak,
-                  onChange: function onChange(checked) {
+                  onChange: checked => {
                     changeSetting('colorWeak', checked);
                   }
                 })
@@ -462,7 +443,7 @@ var SettingDrawer = exports.SettingDrawer = function SettingDrawer(props) {
             })
           }), hideHintAlert && hideCopyButton ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Divider, {}), hideHintAlert ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Alert, {
             type: "warning",
-            message: formatMessage({
+            title: formatMessage({
               id: 'app.setting.production.hint'
             }),
             icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.NotificationOutlined, {}),
@@ -476,34 +457,23 @@ var SettingDrawer = exports.SettingDrawer = function SettingDrawer(props) {
             style: {
               marginBlockEnd: 24
             },
-            onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
-              return (0, _regeneratorRuntime2.default)().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:
-                    _antd.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));
+                _antd.message.success(formatMessage({
+                  id: 'app.setting.copyinfo'
+                }));
+              } catch (error) {
+                // console.log(error);
+              }
+            },
             children: formatMessage({
               id: 'app.setting.copy'
             })
           })]
         })]
       })
-    }))]
+    })]
   }));
-};
+};
+exports.SettingDrawer = SettingDrawer;

package/lib/layout/components/SettingDrawer/style/index.d.ts

@@ -4,6 +4,6 @@ export interface SettingDrawerToken extends ProAliasToken {
     componentCls: string;
 }
 export declare function useStyle(prefixCls: string): {
-    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     hashId: string;
 };