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

package/es/ProTabs/components/Card/index.js

@@ -1,14 +1,20 @@
-import { Space, Tag, Spin } from 'antd';
+import "antd/es/tag/style";
+import _Tag from "antd/es/tag";
+import "antd/es/space/style";
+import _Space from "antd/es/space";
+import "antd/es/spin/style";
+import _Spin from "antd/es/spin";
 import { LoadingOutlined } from '@ant-design/icons';
 import { tools } from '@zat-design/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Card = function Card(props) {
+var Card = props => {
   var total = props.total,
     label = props.label,
     icon = props.icon,
     mode = props.mode,
-    loading = props.loading;
+    loading = props.loading,
+    size = props.size;
   var antIcon = /*#__PURE__*/_jsx(LoadingOutlined, {
     style: {
       fontSize: 24
@@ -17,14 +23,14 @@ var Card = function Card(props) {
   });
   return /*#__PURE__*/_jsx("div", {
     className: "pro-tabs-card",
-    children: mode === 'card' ? /*#__PURE__*/_jsxs(Space, {
+    children: mode === 'card' ? /*#__PURE__*/_jsxs(_Space, {
       size: 8,
-      align: "center",
+      align: size === 'small' ? 'start' : 'center',
       children: [/*#__PURE__*/_jsxs("div", {
         className: "pro-tabs-card-left",
         children: [/*#__PURE__*/_jsx("div", {
           className: "pro-tabs-card-left-total",
-          children: loading ? /*#__PURE__*/_jsx(Spin, {
+          children: loading ? /*#__PURE__*/_jsx(_Spin, {
             indicator: antIcon
           }) : tools.formatAmount(total, 0) || 0
         }), /*#__PURE__*/_jsx("div", {
@@ -35,10 +41,10 @@ var Card = function Card(props) {
         className: "pro-tabs-card-right",
         children: icon || '-'
       })]
-    }) : /*#__PURE__*/_jsxs(Space, {
+    }) : /*#__PURE__*/_jsxs(_Space, {
       size: 8,
       align: "center",
-      children: [label, /*#__PURE__*/_jsx(Tag, {
+      children: [label, /*#__PURE__*/_jsx(_Tag, {
         color: "#FF5050",
         children: total >= 100 ? '99+' : total || 0
       })]

package/es/ProTabs/index.js

@@ -1,17 +1,17 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import "antd/es/tabs/style";
+import _Tabs from "antd/es/tabs";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["style", "className", "dataSource", "onChange", "transformResponse", "useRequest", "tabSearch", "mode"];
 /* eslint-disable @typescript-eslint/consistent-type-assertions */
 import React, { useMemo, useState, forwardRef, useImperativeHandle } from 'react';
-import { Tabs } from 'antd';
 import { useDeepCompareEffect, useRequest as useRequestFunc } from 'ahooks';
 import classNames from 'classnames';
 import { omit } from 'lodash';
 import { Card } from "./components";
 import { jsx as _jsx } from "react/jsx-runtime";
-var ProTabs = function ProTabs(props, ref) {
+var ProTabs = (props, ref) => {
   var style = props.style,
     className = props.className,
     _props$dataSource = props.dataSource,
@@ -30,7 +30,7 @@ var ProTabs = function ProTabs(props, ref) {
     setSelectList = _useState2[1];
   var fetchFunction = useRequestFunc(useRequest === null || useRequest === void 0 ? void 0 : useRequest.service, _objectSpread({
     manual: true,
-    onSuccess: function onSuccess(data) {
+    onSuccess: data => {
       var responseData;
       if (transformResponse && typeof transformResponse === 'function') {
         // 转换数据
@@ -42,7 +42,7 @@ var ProTabs = function ProTabs(props, ref) {
       if (!Array.isArray(responseData)) {
         return console.error('transformResponse must return a number array, like [1, 2, 3]');
       }
-      var result = selectList.map(function (item, index) {
+      var result = selectList.map((item, index) => {
         return _objectSpread(_objectSpread({}, item), {}, {
           total: responseData[index] || 0
         });
@@ -52,26 +52,30 @@ var ProTabs = function ProTabs(props, ref) {
     debounceWait: 300,
     loadingDelay: 1000
   }, useRequest === null || useRequest === void 0 ? void 0 : useRequest.options));
-  var _items = useMemo(function () {
-    return selectList.map(function (itemProps) {
+  var _items = useMemo(() => {
+    return selectList.map(itemProps => {
       var cardItemProps = {
         total: itemProps.total,
         label: itemProps.label,
         icon: itemProps.icon,
-        mode: mode,
+        mode,
         title: itemProps.title || itemProps.label,
-        loading: fetchFunction === null || fetchFunction === void 0 ? void 0 : fetchFunction.loading
+        loading: fetchFunction === null || fetchFunction === void 0 ? void 0 : fetchFunction.loading,
+        size: rest === null || rest === void 0 ? void 0 : rest.size
       };
       return _objectSpread(_objectSpread({}, omit(itemProps, ['total', 'label', 'icon'])), {}, {
         label: /*#__PURE__*/_jsx(Card, _objectSpread({}, cardItemProps))
       });
     });
   }, [selectList, fetchFunction === null || fetchFunction === void 0 ? void 0 : fetchFunction.loading]);
-  var cls = classNames(_defineProperty({
+  var cls = classNames({
     'pro-tabs': mode === 'card',
-    'pro-tabs-tab': mode !== 'card'
-  }, className, className));
-  var handleChange = function handleChange(key) {
+    'pro-tabs-mode-card': mode === 'card',
+    'pro-tabs-tab': mode !== 'card',
+    'pro-tabs-size-small': (rest === null || rest === void 0 ? void 0 : rest.size) === 'small',
+    [className]: className
+  });
+  var handleChange = key => {
     var onChange = props.onChange;
     // 开启tab切换查询
     if (tabSearch) {
@@ -81,7 +85,7 @@ var ProTabs = function ProTabs(props, ref) {
   };
 
   // manual为false时，自动执行
-  useDeepCompareEffect(function () {
+  useDeepCompareEffect(() => {
     var _ref = (useRequest === null || useRequest === void 0 ? void 0 : useRequest.options) || {},
       defaultParams = _ref.defaultParams,
       manual = _ref.manual;
@@ -91,15 +95,21 @@ var ProTabs = function ProTabs(props, ref) {
     }
     fetchFunction.run(params);
   }, [useRequest === null || useRequest === void 0 ? void 0 : useRequest.options]);
-  useImperativeHandle(ref, function () {
-    return {
-      useRequestRef: fetchFunction
-    };
-  });
+
+  // dataSource变化时，更新selectList
+  useDeepCompareEffect(() => {
+    if (!(dataSource !== null && dataSource !== void 0 && dataSource.length)) {
+      return;
+    }
+    setSelectList(dataSource);
+  }, [dataSource]);
+  useImperativeHandle(ref, () => ({
+    useRequestRef: fetchFunction
+  }));
   return /*#__PURE__*/_jsx("div", {
     style: style,
     className: cls,
-    children: /*#__PURE__*/_jsx(Tabs, _objectSpread(_objectSpread({
+    children: /*#__PURE__*/_jsx(_Tabs, _objectSpread(_objectSpread({
       animated: false
     }, rest), {}, {
       items: _items,

package/es/ProTabs/propType.d.ts

@@ -85,6 +85,11 @@ export interface ProTabsType extends Omit<TabsProps, 'items' | 'onChange'> {
         service: Service<any, any>;
         options?: Options<any, any>;
     };
+    /**
+     * @description       卡片大小
+     * @default           default
+     */
+    size?: 'small' | 'middle' | 'large';
     [key: string]: any;
 }
 export type ProTabsProps = ProTabsType;

package/es/ProTabs/style/index.less

@@ -1,7 +1,42 @@
-/* @root-entry-name: 'default'; */
-/* @import (reference) '~antd/es/style/themes/index.less'; */
 
 .pro-tabs {
+  &.pro-tabs-mode-card {
+    &.pro-tabs-size-small {
+      .pro-tabs-card {
+        .pro-tabs-card-left {
+          width: 84px !important;
+        }
+        .pro-tabs-card-right img {
+          width: 24px !important;
+        }
+      }
+    }
+    .@{ant-prefix}-tabs-nav-list {
+      div[data-node-key='1'] {
+        margin-left: 0 !important;
+      }
+    }
+    .@{ant-prefix}-tabs-tab {
+      margin-left: 10px !important;
+      background: #ffffff !important;
+      border-radius: 8px !important;
+      &.@{ant-prefix}-tabs-tab-active {
+        background: var(--ant-primary-1) !important;
+        .pro-tabs-card {
+          border-color: var(--ant-primary-color) !important;
+        }
+      }
+      .pro-tabs-card {
+        width: 100%;
+        padding: 8px 12px !important;
+        border: 1px solid #e7e7e7 !important;
+        border-radius: 8px !important;
+      }
+    }
+    .@{ant-prefix}-tabs-ink-bar {
+      display: none !important;
+    }
+  }
   .@{ant-prefix}-tabs .@{ant-prefix}-tabs-nav-list .@{ant-prefix}-tabs-tab {
     padding: 0 !important;
   }
@@ -35,7 +70,7 @@
   }
 
   .pro-tabs-card {
-    width: 200px;
+    width: 192px;
     padding: calc(9px * var(--zaui-size; 1)) 16px calc(9px * var(--zaui-size; 1)) 24px;
     border: 1px solid var(--zaui-line, #dddddd);
     border-left: none;
@@ -47,11 +82,11 @@
       .pro-tabs-card-left-total {
         color: var(--zaui-text, #343434);
         font-weight: 600;
-        font-size: var(--zaui-font-size-lg-title, 24px);
+        font-size: var(--zaui-font-size-lg, 16px);
       }
 
       .pro-tabs-card-left-label {
-        color: var(--aui-text, #343434);
+        color: #626366;
         font-weight: 400;
         font-size: var(--zaui-font-size, 14px);
       }

package/es/ProThemeTools/component/ProTools/index.js

@@ -1,7 +1,14 @@
+import "antd/es/button/style";
+import _Button from "antd/es/button";
+import "antd/es/switch/style";
+import _Switch from "antd/es/switch";
+import "antd/es/radio/style";
+import _Radio from "antd/es/radio";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import "antd/es/drawer/style";
+import _Drawer from "antd/es/drawer";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
-import { Button, Drawer, Radio, Switch } from 'antd';
 import React, { useState, useEffect } from 'react';
 import { setThemes } from "../../utils/index";
 import { useProConfig } from "../../../ProConfigProvider";
@@ -14,8 +21,8 @@ var connect = function connect(Component) {
   };
   return ComponentWrapper;
 };
-var NewDrawer = connect(Drawer);
-var ProTools = function ProTools(_ref) {
+var NewDrawer = connect(_Drawer);
+var ProTools = _ref => {
   var onReset = _ref.onReset,
     onClose = _ref.onClose,
     setState = _ref.setState,
@@ -45,7 +52,7 @@ var ProTools = function ProTools(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     active = _useState2[0],
     setActive = _useState2[1];
-  useEffect(function () {
+  useEffect(() => {
     var themeConfig = localStorage.getItem('themeConfig');
     var curThemeConfig = themeConfig ? JSON.parse(themeConfig) : {};
     var _ref2 = curThemeConfig.data || {},
@@ -53,7 +60,7 @@ var ProTools = function ProTools(_ref) {
       zauiBrand = _ref2$zauiBrand === void 0 ? '#006AFF' : _ref2$zauiBrand;
     if (zauiBrand) {
       var _config$theme;
-      var newArray = active.map(function (activeItem) {
+      var newArray = active.map(activeItem => {
         activeItem.active = false;
         return {
           color: activeItem.color,
@@ -76,7 +83,7 @@ var ProTools = function ProTools(_ref) {
   return /*#__PURE__*/_jsxs(NewDrawer, {
     className: "pro-theme-prd-tools-drawer",
     width: 400,
-    title: "".concat(locale.ProThemeTools.title),
+    title: `${locale.ProThemeTools.title}`,
     placement: "right",
     onClose: onClose,
     open: open,
@@ -90,14 +97,14 @@ var ProTools = function ProTools(_ref) {
     }), /*#__PURE__*/_jsxs("div", {
       className: "pro-theme-tools-space",
       children: [/*#__PURE__*/_jsx("p", {
-        children: "".concat(locale.ProThemeTools.themeColor)
+        children: `${locale.ProThemeTools.themeColor}`
       }), /*#__PURE__*/_jsx("ul", {
         className: "pro-theme-color",
-        children: active.map(function (item, index) {
+        children: active.map((item, index) => {
           return /*#__PURE__*/_jsx("li", {
             className: item.active ? 'active' : '',
-            onClick: function onClick() {
-              var array = active.map(function (activeItem) {
+            onClick: () => {
+              var array = active.map(activeItem => {
                 activeItem.active = false;
                 return {
                   color: activeItem.color,
@@ -131,13 +138,13 @@ var ProTools = function ProTools(_ref) {
       children: [/*#__PURE__*/_jsx("div", {
         className: "pro-theme-tools-item",
         children: /*#__PURE__*/_jsx("p", {
-          children: "".concat(locale.ProThemeTools.layout)
+          children: `${locale.ProThemeTools.layout}`
         })
       }), /*#__PURE__*/_jsx("div", {
         className: "pro-theme-tools-item",
-        children: /*#__PURE__*/_jsxs(Radio.Group, {
+        children: /*#__PURE__*/_jsxs(_Radio.Group, {
           value: state.zauiSize,
-          onChange: function onChange(e) {
+          onChange: e => {
             setState(_objectSpread(_objectSpread({}, state), {}, {
               zauiSize: e.target.value
             }));
@@ -145,15 +152,15 @@ var ProTools = function ProTools(_ref) {
               'zaui-size': e.target.value
             });
           },
-          children: [/*#__PURE__*/_jsx(Radio.Button, {
+          children: [/*#__PURE__*/_jsx(_Radio.Button, {
             value: 0.5,
-            children: "".concat(locale.ProThemeTools.layoutMode[0])
-          }), /*#__PURE__*/_jsx(Radio.Button, {
+            children: `${locale.ProThemeTools.layoutMode[0]}`
+          }), /*#__PURE__*/_jsx(_Radio.Button, {
             value: 1,
-            children: "".concat(locale.ProThemeTools.layoutMode[1])
-          }), /*#__PURE__*/_jsx(Radio.Button, {
+            children: `${locale.ProThemeTools.layoutMode[1]}`
+          }), /*#__PURE__*/_jsx(_Radio.Button, {
             value: 1.5,
-            children: "".concat(locale.ProThemeTools.layoutMode[2])
+            children: `${locale.ProThemeTools.layoutMode[2]}`
           })]
         })
       })]
@@ -162,13 +169,13 @@ var ProTools = function ProTools(_ref) {
       children: [/*#__PURE__*/_jsx("div", {
         className: "pro-theme-tools-item",
         children: /*#__PURE__*/_jsx("p", {
-          children: "".concat(locale.ProThemeTools.formLabel)
+          children: `${locale.ProThemeTools.formLabel}`
         })
       }), /*#__PURE__*/_jsx("div", {
         className: "pro-theme-tools-item",
-        children: /*#__PURE__*/_jsxs(Radio.Group, {
+        children: /*#__PURE__*/_jsxs(_Radio.Group, {
           value: state.zauiFormAlign,
-          onChange: function onChange(e) {
+          onChange: e => {
             setState(_objectSpread(_objectSpread({}, state), {}, {
               zauiFormAlign: e.target.value
             }));
@@ -185,12 +192,12 @@ var ProTools = function ProTools(_ref) {
               }
             });
           },
-          children: [/*#__PURE__*/_jsx(Radio.Button, {
+          children: [/*#__PURE__*/_jsx(_Radio.Button, {
             value: "left",
-            children: "".concat(locale.ProThemeTools.flex[0])
-          }), /*#__PURE__*/_jsx(Radio.Button, {
+            children: `${locale.ProThemeTools.flex[0]}`
+          }), /*#__PURE__*/_jsx(_Radio.Button, {
             value: "right",
-            children: "".concat(locale.ProThemeTools.flex[1])
+            children: `${locale.ProThemeTools.flex[1]}`
           })]
         })
       })]
@@ -199,15 +206,15 @@ var ProTools = function ProTools(_ref) {
       children: [/*#__PURE__*/_jsx("div", {
         className: "pro-theme-tools-item",
         children: /*#__PURE__*/_jsx("p", {
-          children: "".concat(locale.ProThemeTools.tableBorder)
+          children: `${locale.ProThemeTools.tableBorder}`
         })
       }), /*#__PURE__*/_jsx("div", {
         className: "pro-theme-tools-item",
-        children: /*#__PURE__*/_jsx(Switch, {
-          checkedChildren: "".concat(locale.ProThemeTools.switchText[0]),
-          unCheckedChildren: "".concat(locale.ProThemeTools.switchText[1]),
+        children: /*#__PURE__*/_jsx(_Switch, {
+          checkedChildren: `${locale.ProThemeTools.switchText[0]}`,
+          unCheckedChildren: `${locale.ProThemeTools.switchText[1]}`,
           checked: state.zauiTableBorder,
-          onClick: function onClick(value) {
+          onClick: value => {
             setState(_objectSpread(_objectSpread({}, state), {}, {
               zauiTableBorder: value
             }));
@@ -222,15 +229,15 @@ var ProTools = function ProTools(_ref) {
       children: [/*#__PURE__*/_jsx("div", {
         className: "pro-theme-tools-item",
         children: /*#__PURE__*/_jsx("p", {
-          children: "".concat(locale.ProThemeTools.tableStripe)
+          children: `${locale.ProThemeTools.tableStripe}`
         })
       }), /*#__PURE__*/_jsx("div", {
         className: "pro-theme-tools-item",
-        children: /*#__PURE__*/_jsx(Switch, {
-          checkedChildren: "".concat(locale.ProThemeTools.switchText[0]),
-          unCheckedChildren: "".concat(locale.ProThemeTools.switchText[1]),
+        children: /*#__PURE__*/_jsx(_Switch, {
+          checkedChildren: `${locale.ProThemeTools.switchText[0]}`,
+          unCheckedChildren: `${locale.ProThemeTools.switchText[1]}`,
           checked: state.zauiStripe,
-          onClick: function onClick(value) {
+          onClick: value => {
             setState(_objectSpread(_objectSpread({}, state), {}, {
               zauiStripe: value
             }));
@@ -241,9 +248,9 @@ var ProTools = function ProTools(_ref) {
           }
         })
       })]
-    }), /*#__PURE__*/_jsx(Button, {
+    }), /*#__PURE__*/_jsx(_Button, {
       className: "copy-btn",
-      onClick: function onClick() {
+      onClick: () => {
         setActive([{
           color: '#006AFF',
           active: true
@@ -259,7 +266,7 @@ var ProTools = function ProTools(_ref) {
         }]);
         onReset();
       },
-      children: "".concat(locale.ProThemeTools.reset)
+      children: `${locale.ProThemeTools.reset}`
     })]
   });
 };

package/es/ProThemeTools/context/ThemeContext.js

@@ -74,48 +74,48 @@ var ThemeContext = /*#__PURE__*/createContext(undefined);
 
 // Provider 组件
 
-export var ThemeProvider = function ThemeProvider(_ref) {
+export var ThemeProvider = _ref => {
   var children = _ref.children;
   var _useReducer = useReducer(themeReducer, initialState),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     state = _useReducer2[0],
     dispatch = _useReducer2[1];
-  var updateLocalConfig = useCallback(function (config) {
+  var updateLocalConfig = useCallback(config => {
     dispatch({
       type: 'UPDATE_LOCAL_CONFIG',
       payload: config
     });
   }, []);
-  var updateAntdConfig = useCallback(function (config) {
+  var updateAntdConfig = useCallback(config => {
     dispatch({
       type: 'UPDATE_ANTD_CONFIG',
       payload: config
     });
   }, []);
-  var updateCssVariables = useCallback(function (variables) {
+  var updateCssVariables = useCallback(variables => {
     dispatch({
       type: 'UPDATE_CSS_VARIABLES',
       payload: variables
     });
   }, []);
-  var resetTheme = useCallback(function () {
+  var resetTheme = useCallback(() => {
     dispatch({
       type: 'RESET_THEME'
     });
   }, []);
-  var loadFromCache = useCallback(function (cacheState) {
+  var loadFromCache = useCallback(cacheState => {
     dispatch({
       type: 'LOAD_FROM_CACHE',
       payload: cacheState
     });
   }, []);
   var contextValue = {
-    state: state,
-    updateLocalConfig: updateLocalConfig,
-    updateAntdConfig: updateAntdConfig,
-    updateCssVariables: updateCssVariables,
-    resetTheme: resetTheme,
-    loadFromCache: loadFromCache
+    state,
+    updateLocalConfig,
+    updateAntdConfig,
+    updateCssVariables,
+    resetTheme,
+    loadFromCache
   };
   return /*#__PURE__*/_jsx(ThemeContext.Provider, {
     value: contextValue,
@@ -124,7 +124,7 @@ export var ThemeProvider = function ThemeProvider(_ref) {
 };
 
 // Hook for using theme context
-export var useTheme = function useTheme() {
+export var useTheme = () => {
   var context = useContext(ThemeContext);
   if (context === undefined) {
     throw new Error('useTheme must be used within a ThemeProvider');

package/es/ProThemeTools/index.d.ts

@@ -1,13 +1,6 @@
 import type { ProThemeToolsType } from './propsType';
 declare const ProThemeTools: {
     ({ size, className, cacheTime, color, mode, iconFollowTheme, prefixCls, tableBorder, tableStripe, theme, onChange, ...props }: ProThemeToolsType): import("react/jsx-runtime").JSX.Element;
-    defaultProps: {
-        size: number;
-        mode: string;
-        color: string;
-        iconFollowTheme: boolean;
-        cacheTime: boolean;
-    };
     setThemes: (themes: import("./utils/index").ThemesProps) => boolean;
 };
 export default ProThemeTools;