@zat-design/sisyphus-react 4.0.0-beta.4 → 4.0.0-beta.5

package/lib/ProThemeTools/index.js

@@ -1,233 +1,268 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ThemeProvider", {
+  enumerable: true,
+  get: function get() {
+    return _ThemeContext.ThemeProvider;
   }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/ProThemeTools/index.tsx
-var ProThemeTools_exports = {};
-__export(ProThemeTools_exports, {
-  ThemeProvider: () => import_ThemeContext2.ThemeProvider,
-  default: () => ProThemeTools_default,
-  useTheme: () => import_ThemeContext2.useTheme
 });
-module.exports = __toCommonJS(ProThemeTools_exports);
-var import_antd = require("antd");
-var import_react = require("react");
-var import_ahooks = require("ahooks");
-var import_react_svg = require("react-svg");
-var import_lodash = require("lodash");
-var import_classnames = __toESM(require("classnames"));
-var import_utils = require("./utils/index");
-var import_setting = __toESM(require("../assets/setting.svg"));
-var import_component = require("./component");
-var import_locale = __toESM(require("../locale"));
-var import_ThemeContext = require("./context/ThemeContext");
-var import_ThemeContext2 = require("./context/ThemeContext");
-var defaultCacheTime = 1;
+exports.default = void 0;
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function get() {
+    return _ThemeContext.useTheme;
+  }
+});
+require("antd/es/message/style");
+var _message2 = _interopRequireDefault(require("antd/es/message"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _ahooks = require("ahooks");
+var _reactSvg = require("react-svg");
+var _lodash = require("lodash");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _index = require("./utils/index");
+var _setting = _interopRequireDefault(require("../assets/setting.svg"));
+var _component = require("./component");
+var _locale = _interopRequireDefault(require("../locale"));
+var _ThemeContext = require("./context/ThemeContext");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["size", "className", "cacheTime", "color", "mode", "iconFollowTheme", "prefixCls", "tableBorder", "tableStripe", "theme", "onChange"];
+/* eslint-disable prefer-const */
+var defaultCacheTime = 1; // 配置保存时间为一天
+
 var defaultThemeConfig = {
-  zauiBrand: "#006AFF",
+  zauiBrand: '#006AFF',
   // 主题颜色
-  zauiText: "#343434",
-  zauiFontSize: "14px",
-  zauiFormAlign: "left",
+  zauiText: '#343434',
+  zauiFontSize: '14px',
+  zauiFormAlign: 'left',
   // 表单左对齐
-  zauiFormRequiredBefore: "none",
+  zauiFormRequiredBefore: 'none',
   // 前面*display
-  zauiFormRequiredAfter: "inline",
+  zauiFormRequiredAfter: 'inline',
   // 后面*display
   zauiSize: 1,
   // 间距倍数
-  zauiSpaceSizeLg: "32px",
+  zauiSpaceSizeLg: '32px',
   // 卡片行间距
-  zauiSpaceSizeMd: "16px",
+  zauiSpaceSizeMd: '16px',
   // 控件行间距
   zauiBigText: false,
-  zauiBaseFontSize: "0px",
+  zauiBaseFontSize: '0px',
   zauiTableBorder: false,
   zauiStripe: true
 };
-var ProThemeTools = ({
-  size = 24,
-  className,
-  cacheTime = false,
-  color = "#343434",
-  mode = "prd",
-  iconFollowTheme = false,
-  prefixCls = "ant",
-  tableBorder = false,
-  tableStripe = false,
-  theme = {},
-  onChange,
-  ...props
-}) => {
-  const [visible, { toggle }] = (0, import_ahooks.useToggle)(false);
-  const { updateLocalConfig, updateAntdConfig, updateCssVariables } = (0, import_ThemeContext.useTheme)();
-  const [state, setState] = (0, import_react.useState)({
-    ...defaultThemeConfig,
-    ...(0, import_utils.getMapHumpCase)(theme)
-  });
-  const previousState = (0, import_ahooks.usePrevious)(state);
-  const { zauiBrand, zauiStripe, zauiTableBorder } = state;
-  const onReset = () => {
-    const resetConfig = {
-      ...state,
-      ...defaultThemeConfig
-    };
+var ProThemeTools = _ref => {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 24 : _ref$size,
+    className = _ref.className,
+    _ref$cacheTime = _ref.cacheTime,
+    cacheTime = _ref$cacheTime === void 0 ? false : _ref$cacheTime,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? '#343434' : _ref$color,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? 'prd' : _ref$mode,
+    _ref$iconFollowTheme = _ref.iconFollowTheme,
+    iconFollowTheme = _ref$iconFollowTheme === void 0 ? false : _ref$iconFollowTheme,
+    _ref$prefixCls = _ref.prefixCls,
+    prefixCls = _ref$prefixCls === void 0 ? 'ant' : _ref$prefixCls,
+    _ref$tableBorder = _ref.tableBorder,
+    tableBorder = _ref$tableBorder === void 0 ? false : _ref$tableBorder,
+    _ref$tableStripe = _ref.tableStripe,
+    tableStripe = _ref$tableStripe === void 0 ? false : _ref$tableStripe,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? {} : _ref$theme,
+    onChange = _ref.onChange,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useToggle = (0, _ahooks.useToggle)(false),
+    _useToggle2 = (0, _slicedToArray2.default)(_useToggle, 2),
+    visible = _useToggle2[0],
+    toggle = _useToggle2[1].toggle;
+  var _useTheme = (0, _ThemeContext.useTheme)(),
+    updateLocalConfig = _useTheme.updateLocalConfig,
+    updateAntdConfig = _useTheme.updateAntdConfig,
+    updateCssVariables = _useTheme.updateCssVariables;
+  var _useState = (0, _react.useState)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultThemeConfig), (0, _index.getMapHumpCase)(theme))),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var previousState = (0, _ahooks.usePrevious)(state);
+  var zauiBrand = state.zauiBrand,
+    zauiStripe = state.zauiStripe,
+    zauiTableBorder = state.zauiTableBorder;
+
+  // 重置
+  var onReset = () => {
+    var resetConfig = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), defaultThemeConfig);
     setState(resetConfig);
+
+    // 更新 Context
     updateLocalConfig(resetConfig);
-    const antdConfig = (0, import_utils.getAntd5ThemeConfig)({
-      "zaui-brand": "#006AFF"
+
+    // 更新 antd 主题
+    var antdConfig = (0, _index.getAntd5ThemeConfig)({
+      'zaui-brand': '#006AFF'
     });
     updateAntdConfig(antdConfig);
-    const cssVars = {
-      "zaui-brand": "#006AFF",
-      "zaui-text": "#343434",
-      "zaui-form-required-after": "inline",
-      "zaui-form-required-before": "none",
-      "zaui-size": 1,
-      "zaui-space-size-lg": "32px",
-      "zaui-font-size": "14px",
-      "zaui-space-size-md": "16px",
-      "zaui-base-font-size": 0,
-      "zaui-big-text": false,
-      "zaui-table-border": false,
-      "zaui-stripe": true
+
+    // 设置 CSS 变量
+    var cssVars = {
+      'zaui-brand': '#006AFF',
+      'zaui-text': '#343434',
+      'zaui-form-required-after': 'inline',
+      'zaui-form-required-before': 'none',
+      'zaui-size': 1,
+      'zaui-space-size-lg': '32px',
+      'zaui-font-size': '14px',
+      'zaui-space-size-md': '16px',
+      'zaui-base-font-size': 0,
+      'zaui-big-text': false,
+      'zaui-table-border': false,
+      'zaui-stripe': true
     };
-    (0, import_utils.setThemes)(cssVars);
+    (0, _index.setThemes)(cssVars);
     updateCssVariables(cssVars);
   };
-  const onCopy = () => {
-    const data = JSON.stringify((0, import_utils.getMapKebabCase)(state, "@"));
-    const input = document.createElement("input");
+
+  // 复制
+  var onCopy = () => {
+    var data = JSON.stringify((0, _index.getMapKebabCase)(state, '@'));
+    var input = document.createElement('input');
     document.body.appendChild(input);
-    input.setAttribute("value", data);
+    input.setAttribute('value', data);
     input.select();
-    if (document.execCommand("copy")) {
-      document.execCommand("copy");
-      import_antd.message.success(`${import_locale.default.ProThemeTools.copySuccess}`);
+    if (document.execCommand('copy')) {
+      document.execCommand('copy');
+      _message2.default.success(`${_locale.default.ProThemeTools.copySuccess}`);
     }
     document.body.removeChild(input);
   };
-  (0, import_react.useEffect)(() => {
-    const themeConfig = localStorage.getItem("themeConfig");
-    const curThemeConfig = themeConfig ? JSON.parse(themeConfig) : {};
-    const startTime = curThemeConfig == null ? void 0 : curThemeConfig.startTime;
-    const duration = (typeof cacheTime === "number" ? cacheTime : defaultCacheTime) * 864e5;
-    if (cacheTime && startTime && (/* @__PURE__ */ new Date()).getTime() - startTime < duration) {
-      let localThemeConfig;
+
+  // 首次从缓存中读取主题配置
+  (0, _react.useEffect)(() => {
+    var themeConfig = localStorage.getItem('themeConfig');
+    var curThemeConfig = themeConfig ? JSON.parse(themeConfig) : {};
+    var startTime = curThemeConfig === null || curThemeConfig === void 0 ? void 0 : curThemeConfig.startTime;
+    // 默认时间间隔
+    var duration = (typeof cacheTime === 'number' ? cacheTime : defaultCacheTime) * 86400000;
+    if (cacheTime && startTime && new Date().getTime() - startTime < duration) {
+      var _localThemeConfig;
+      var localThemeConfig;
       localThemeConfig = curThemeConfig.data;
-      const cssVariables = Object.fromEntries(
-        Object.entries(localThemeConfig).map((item) => [
-          `${(0, import_utils.getKebabCase)(item == null ? void 0 : item[0])}`,
-          ["zauiSize"].includes(item == null ? void 0 : item[0]) || typeof (item == null ? void 0 : item[1]) !== "number" ? item == null ? void 0 : item[1] : `${item == null ? void 0 : item[1]}px`
-          // zauiSize取数字
-        ])
-      );
-      setState({ ...state, ...localThemeConfig });
-      (0, import_utils.setThemes)(cssVariables);
+      var cssVariables = Object.fromEntries(Object.entries(localThemeConfig).map(item => [`${(0, _index.getKebabCase)(item === null || item === void 0 ? void 0 : item[0])}`, ['zauiSize'].includes(item === null || item === void 0 ? void 0 : item[0]) || typeof (item === null || item === void 0 ? void 0 : item[1]) !== 'number' ? item === null || item === void 0 ? void 0 : item[1] : `${item === null || item === void 0 ? void 0 : item[1]}px` // zauiSize取数字
+      ]));
+      setState((0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), localThemeConfig));
+      (0, _index.setThemes)(cssVariables);
+
+      // 更新 Context
       updateLocalConfig(localThemeConfig);
       updateCssVariables(cssVariables);
-      const antdConfig = (0, import_utils.getAntd5ThemeConfig)({
-        "zaui-brand": localThemeConfig == null ? void 0 : localThemeConfig.zauiBrand
+
+      // 更新 antd 主题
+      var antdConfig = (0, _index.getAntd5ThemeConfig)({
+        'zaui-brand': (_localThemeConfig = localThemeConfig) === null || _localThemeConfig === void 0 ? void 0 : _localThemeConfig.zauiBrand
       });
       updateAntdConfig(antdConfig);
     } else {
-      const cssVars = (0, import_utils.getMapKebabCase)(state);
-      (0, import_utils.setThemes)(cssVars);
+      var cssVars = (0, _index.getMapKebabCase)(state);
+      (0, _index.setThemes)(cssVars);
       updateCssVariables(cssVars);
-      const antdConfig = (0, import_utils.getAntd5ThemeConfig)({
-        "zaui-brand": state == null ? void 0 : state.zauiBrand
+
+      // 更新 antd 主题
+      var _antdConfig = (0, _index.getAntd5ThemeConfig)({
+        'zaui-brand': state === null || state === void 0 ? void 0 : state.zauiBrand
       });
-      updateAntdConfig(antdConfig);
+      updateAntdConfig(_antdConfig);
     }
   }, []);
-  (0, import_react.useEffect)(() => {
+
+  // 主题色动态切换
+  (0, _react.useEffect)(() => {
     if (visible && zauiBrand) {
-      const antdConfig = (0, import_utils.getAntd5ThemeConfig)({
-        "zaui-brand": zauiBrand
+      // 更新 antd 主题
+      var antdConfig = (0, _index.getAntd5ThemeConfig)({
+        'zaui-brand': zauiBrand
       });
       updateAntdConfig(antdConfig);
     }
   }, [zauiBrand, visible]);
-  (0, import_react.useEffect)(() => {
-    const cssVar = {
-      "zaui-table-strip-bg": zauiStripe ? "#fafafa" : "#ffffff"
+
+  // 斑马纹设置
+  (0, _react.useEffect)(() => {
+    var cssVar = {
+      'zaui-table-strip-bg': zauiStripe ? '#fafafa' : '#ffffff'
     };
-    (0, import_utils.setThemes)(cssVar);
+    (0, _index.setThemes)(cssVar);
     updateCssVariables(cssVar);
   }, [zauiStripe]);
-  (0, import_react.useEffect)(() => {
-    (0, import_utils.setTableBorder)(zauiTableBorder);
+
+  // 表格边框设置
+  (0, _react.useEffect)(() => {
+    (0, _index.setTableBorder)(zauiTableBorder);
   }, [zauiTableBorder]);
-  (0, import_react.useEffect)(() => {
+
+  // 主题配置缓存
+  (0, _react.useEffect)(() => {
     if (cacheTime) {
-      const newThemeConfig = {
-        startTime: (/* @__PURE__ */ new Date()).getTime(),
-        data: { ...state }
+      var newThemeConfig = {
+        startTime: new Date().getTime(),
+        data: (0, _objectSpread2.default)({}, state)
       };
-      localStorage.setItem("themeConfig", JSON.stringify(newThemeConfig));
+      localStorage.setItem('themeConfig', JSON.stringify(newThemeConfig));
     }
   }, [state, cacheTime]);
-  (0, import_ahooks.useUpdateEffect)(() => {
-    if (!(0, import_lodash.isEqual)(state, previousState) && visible) {
+
+  // 状态变化时同步到 Context
+  (0, _ahooks.useUpdateEffect)(() => {
+    if (!(0, _lodash.isEqual)(state, previousState) && visible) {
+      // 更新本地配置
       updateLocalConfig(state);
-      const cssVars = (0, import_utils.getMapKebabCase)(state);
-      (0, import_utils.setThemes)(cssVars);
+
+      // 更新 CSS 变量
+      var cssVars = (0, _index.getMapKebabCase)(state);
+      (0, _index.setThemes)(cssVars);
       updateCssVariables(cssVars);
-      const antdConfig = (0, import_utils.getAntd5ThemeConfig)({
-        "zaui-brand": state.zauiBrand
+
+      // 更新 antd 主题
+      var antdConfig = (0, _index.getAntd5ThemeConfig)({
+        'zaui-brand': state.zauiBrand
       });
       updateAntdConfig(antdConfig);
-      onChange == null ? void 0 : onChange(state);
+      onChange === null || onChange === void 0 || onChange(state);
     }
   }, [state]);
-  const cls = (0, import_classnames.default)({
-    "pro-theme-tools": true,
-    "pro-theme-tools-follow": iconFollowTheme,
+  var cls = (0, _classnames.default)({
+    'pro-theme-tools': true,
+    'pro-theme-tools-follow': iconFollowTheme,
     [className]: className
   });
-  return /* @__PURE__ */ React.createElement("div", { ...props }, /* @__PURE__ */ React.createElement("div", { className: cls, onClick: toggle }, /* @__PURE__ */ React.createElement(import_react_svg.ReactSVG, { className: "setting-icon", src: import_setting.default })), /* @__PURE__ */ React.createElement(
-    import_component.ProTools,
-    {
-      prefixCls,
-      onReset,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: cls,
+      onClick: toggle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, {
+        className: "setting-icon",
+        src: _setting.default
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_component.ProTools, {
+      prefixCls: prefixCls,
+      onReset: onReset,
       onClose: toggle,
-      onCopy,
-      setState,
+      onCopy: onCopy,
+      setState: setState,
       open: visible,
-      state,
-      tableBorder,
-      tableStripe
-    }
-  ));
+      state: state,
+      tableBorder: tableBorder,
+      tableStripe: tableStripe
+    })]
+  }));
 };
-ProThemeTools.setThemes = import_utils.setThemes;
-var ProThemeTools_default = ProThemeTools;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ThemeProvider,
-  useTheme
-});
+ProThemeTools.setThemes = _index.setThemes;
+var _default = exports.default = ProThemeTools; // 导出主题相关组件和类型

package/lib/ProThemeTools/propsType.js

@@ -1,17 +1,5 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/ProThemeTools/propsType.ts
-var propsType_exports = {};
-module.exports = __toCommonJS(propsType_exports);
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});