@teamix/pro 1.6.0-beta.4 → 1.6.0-beta.6

package/es/table/components/ToolBar/RefreshIcon.js

@@ -1,44 +1,180 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 /**
  * 刷新
  */
-import { Button, Balloon } from '@alicloudfe/components';
+import { Button, Balloon, Menu, Dropdown } from '@alicloudfe/components';
 import TeamixIcon from '@teamix/icon';
 import { usePrefixCls, getMessage } from '@teamix/utils';
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { on } from '../../utils';
 import './index.scss';
 var cls = usePrefixCls('teamix-pro-table-toolbar-icon');
 var LayoutIcon = function LayoutIcon(props) {
-  var actionRef = props.actionRef;
-  // const [fullscreen, setFullscreen] = useState<boolean>(false);
-  // // 销毁监听函数
-  // useEffect(() => {
-  //   return () => {
-  //     actionRef.current?.off?.('refreshIcon');
-  //   };
-  // }, []);
-
-  // // 监听全屏变化
-  // actionRef.current?.on?.(
-  //   (state: boolean) => {
-  //     setFullscreen(state);
-  //   },
-  //   'fullScreenState',
-  //   'refreshIcon',
-  // );
+  var _autoRefreshProps$dat;
+  var actionRef = props.actionRef,
+    autoRefresh = props.autoRefresh,
+    autoRefreshProps = props.autoRefreshProps;
+  var autoRefreshRadio = (_autoRefreshProps$dat = autoRefreshProps === null || autoRefreshProps === void 0 ? void 0 : autoRefreshProps.dataSource) !== null && _autoRefreshProps$dat !== void 0 ? _autoRefreshProps$dat : [{
+    label: '每 1 分钟',
+    value: 60000
+  }, {
+    label: '每 3 分钟',
+    value: 180000
+  }, {
+    label: '每 5 分钟',
+    value: 300000
+  }];
+  // dropdown 开关
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    dropdownVisible = _useState2[0],
+    setDropdownVisible = _useState2[1];
+  // 自动刷新状态
+  var _useState3 = useState(!!autoRefresh),
+    _useState4 = _slicedToArray(_useState3, 2),
+    autoRefreshVisible = _useState4[0],
+    setAutoRefreshVisible = _useState4[1];
+  // 间隔时间 ms
+  var _useState5 = useState(60000),
+    _useState6 = _slicedToArray(_useState5, 2),
+    times = _useState6[0],
+    setTimes = _useState6[1];
+  // 展示计时器时间 s
+  var _useState7 = useState(60),
+    _useState8 = _slicedToArray(_useState7, 2),
+    remainTime = _useState8[0],
+    setRemainTime = _useState8[1];
+  // 循环计时器
+  var timerRef = useRef({
+    timer: undefined,
+    remain: 60
+  });
+  useEffect(function () {
+    on(function (timer) {
+      setTimes(timer);
+      timerRef.current.remain = timer / 1000;
+      if (timerRef.current.timer) {
+        clearInterval(timerRef.current.timer);
+        timerRef.current.timer = undefined;
+      }
+      timerRef.current.timer = setInterval(function () {
+        var remainTime = timerRef.current.remain - 1;
+        if (remainTime >= 0) {
+          setRemainTime(remainTime);
+          timerRef.current.remain = remainTime;
+        }
+      }, 1000);
+    }, 'PRO_TABLE_REFRESH_TIMER_FLAG');
+  }, []);
+  // 下拉菜单显示隐藏回调
+  var onDropdownVisibleChange = function onDropdownVisibleChange(state) {
+    setDropdownVisible(state);
+  };
+  // 自动刷新开启关闭回调
+  var onAutoRefreshChange = function onAutoRefreshChange(visible) {
+    if (visible) {
+      var _actionRef$current, _actionRef$current$se;
+      (_actionRef$current = actionRef.current) === null || _actionRef$current === void 0 ? void 0 : (_actionRef$current$se = _actionRef$current.setAutoRefreshTimers) === null || _actionRef$current$se === void 0 ? void 0 : _actionRef$current$se.call(_actionRef$current, times);
+    } else {
+      var _actionRef$current2, _actionRef$current2$c;
+      (_actionRef$current2 = actionRef.current) === null || _actionRef$current2 === void 0 ? void 0 : (_actionRef$current2$c = _actionRef$current2.clearAutoRefreshTimers) === null || _actionRef$current2$c === void 0 ? void 0 : _actionRef$current2$c.call(_actionRef$current2);
+      if (timerRef.current.timer) {
+        clearInterval(timerRef.current.timer);
+        timerRef.current.timer = undefined;
+        timerRef.current.remain = times / 1000;
+        setRemainTime(times / 1000);
+      }
+    }
+    setAutoRefreshVisible(visible);
+  };
+  // 手动刷新回调
+  var onManualRefresh = function onManualRefresh() {
+    var _actionRef$current3, _actionRef$current3$r;
+    (_actionRef$current3 = actionRef.current) === null || _actionRef$current3 === void 0 ? void 0 : (_actionRef$current3$r = _actionRef$current3.refresh) === null || _actionRef$current3$r === void 0 ? void 0 : _actionRef$current3$r.call(_actionRef$current3);
+    onDropdownVisibleChange(false);
+  };
+  // 选择间隔时间回调
+  var onTimeRadioChange = function onTimeRadioChange(timer) {
+    var _actionRef$current4, _actionRef$current4$s;
+    setTimes(timer);
+    (_actionRef$current4 = actionRef.current) === null || _actionRef$current4 === void 0 ? void 0 : (_actionRef$current4$s = _actionRef$current4.setAutoRefreshTimers) === null || _actionRef$current4$s === void 0 ? void 0 : _actionRef$current4$s.call(_actionRef$current4, timer);
+  };
+  // 渲染刷新图标
+  var renderRefreshIcon = function renderRefreshIcon() {
+    if (!!autoRefresh && autoRefreshVisible && typeof autoRefresh !== 'function') {
+      return /*#__PURE__*/React.createElement(TeamixIcon, {
+        size: "small",
+        type: "auto-refresh-on-line"
+      });
+    }
+    if (!!autoRefresh && !autoRefreshVisible && typeof autoRefresh !== 'function') {
+      return /*#__PURE__*/React.createElement(TeamixIcon, {
+        size: "small",
+        type: "auto-refresh-off-line"
+      });
+    }
+    return /*#__PURE__*/React.createElement(TeamixIcon, {
+      size: "small",
+      type: "refresh-line"
+    });
+  };
+  // 渲染 Radio
+  var renderRadio = autoRefreshRadio.map(function (item) {
+    return /*#__PURE__*/React.createElement(Menu.RadioItem, {
+      className: cls('time-radio'),
+      key: item.value,
+      disabled: !autoRefreshVisible,
+      checked: times === item.value,
+      onChange: function onChange() {
+        var _item$value;
+        return onTimeRadioChange((_item$value = item === null || item === void 0 ? void 0 : item.value) !== null && _item$value !== void 0 ? _item$value : 0);
+      }
+    }, item.label);
+  });
+  if (autoRefresh && typeof autoRefresh !== 'function') {
+    return /*#__PURE__*/React.createElement(Dropdown, {
+      trigger: /*#__PURE__*/React.createElement(Button, {
+        iconSize: "small",
+        className: cls()
+      }, renderRefreshIcon()),
+      visible: dropdownVisible,
+      onVisibleChange: onDropdownVisibleChange,
+      followTrigger: true,
+      cache: true,
+      triggerType: ['click'],
+      align: "tr br"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cls()
+    }, /*#__PURE__*/React.createElement(Menu, {
+      className: cls('auto-refresh')
+    }, /*#__PURE__*/React.createElement(Menu.CheckboxItem, {
+      checked: autoRefreshVisible,
+      onChange: onAutoRefreshChange
+    }, getMessage('autoRefresh'), autoRefreshVisible && /*#__PURE__*/React.createElement("span", null, "\uFF08", remainTime, "s\uFF09")), renderRadio, /*#__PURE__*/React.createElement(Menu.Divider, {
+      key: "divider"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: cls('manual-refresh')
+    }, /*#__PURE__*/React.createElement(Button, {
+      type: "primary",
+      text: true,
+      onClick: onManualRefresh
+    }, getMessage('manualRefresh'))))));
+  }
   return /*#__PURE__*/React.createElement(Balloon.Tooltip, {
     trigger: /*#__PURE__*/React.createElement(Button, {
       iconSize: "small",
       className: cls(),
       onClick: function onClick() {
-        var _actionRef$current, _actionRef$current$re;
-        return (_actionRef$current = actionRef.current) === null || _actionRef$current === void 0 ? void 0 : (_actionRef$current$re = _actionRef$current.refresh) === null || _actionRef$current$re === void 0 ? void 0 : _actionRef$current$re.call(_actionRef$current);
+        var _actionRef$current5, _actionRef$current5$r;
+        return (_actionRef$current5 = actionRef.current) === null || _actionRef$current5 === void 0 ? void 0 : (_actionRef$current5$r = _actionRef$current5.refresh) === null || _actionRef$current5$r === void 0 ? void 0 : _actionRef$current5$r.call(_actionRef$current5);
       }
-    }, /*#__PURE__*/React.createElement(TeamixIcon, {
-      size: "small",
-      type: "refresh-line"
-    })),
+    }, renderRefreshIcon()),
     align: "t"
-    // align={fullscreen ? 'b' : 't'}
   }, getMessage('refresh'));
 };
 export default LayoutIcon;

package/es/table/components/ToolBar/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ProTableLayoutProps } from '../../typing';
+import './index.scss';
+declare const ToolBar: React.FC<ProTableLayoutProps>;
+export default ToolBar;

package/es/table/components/ToolBar/index.js

@@ -1,3 +1,5 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -6,7 +8,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { usePrefixCls } from '@teamix/utils';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import { Button, Balloon } from '@alicloudfe/components';
 import TeamixIcon from '@teamix/icon';
 import FullScreenIcon from './FullScreenIcon';
@@ -16,12 +18,15 @@ import RefreshIcon from './RefreshIcon';
 import { useSize, useSafeState } from '@teamix/hooks';
 import debounce from 'lodash.debounce';
 import './index.scss';
+import CardSwitch from './CardSwitch';
+import cloneDeep from 'lodash.clonedeep';
 var cls = usePrefixCls('teamix-pro-table-toolbar');
 var presetToolBarMap = {
   refresh: RefreshIcon,
   density: DensityIcon,
   filtercolumn: FilterColumnIcon,
-  fullscreen: FullScreenIcon
+  fullscreen: FullScreenIcon,
+  switchcard: CardSwitch
 };
 var presetToolBarName = ['refresh', 'density', 'filtercolumn', 'fullscreen'];
 var presetToolBar = [{
@@ -44,7 +49,10 @@ var presetToolBar = [{
 var ToolBar = function ToolBar(props) {
   var _toolBarRef$current, _toolBarRef$current$p, _toolBarRef$current$p2;
   var toolBar = props.toolBar,
-    fullScreenState = props.fullScreenState;
+    fullScreenState = props.fullScreenState,
+    switchCardView = props.switchCardView,
+    _props$toolBarAutoWid = props.toolBarAutoWidth,
+    toolBarAutoWidth = _props$toolBarAutoWid === void 0 ? true : _props$toolBarAutoWid;
   var toolBarRef = useRef(null);
   // const toolBarSize = useSize(toolBarRef);
   // 用于获取内容宽度
@@ -56,7 +64,6 @@ var ToolBar = function ToolBar(props) {
   // '.teamix-pro-form-query-filter-layout-left' 元素
   var layoutLeftDom = layoutInlineDom === null || layoutInlineDom === void 0 ? void 0 : layoutInlineDom.firstElementChild;
   var leftWidth = layoutLeftDom === null || layoutLeftDom === void 0 ? void 0 : layoutLeftDom.clientWidth;
-
   // 展示形式，是否平铺
   var _useSafeState = useSafeState(),
     _useSafeState2 = _slicedToArray(_useSafeState, 2),
@@ -64,40 +71,62 @@ var ToolBar = function ToolBar(props) {
     setFlat = _useSafeState2[1];
   // 监听高度，> 32px则切换形态
   useEffect(debounce(function () {
-    // console.log(
-    //   layoutInlineSize?.width,
-    //   leftWidth,
-    //   toolBarContentRef.current?.clientWidth,
-    // );
-    if ((layoutInlineSize === null || layoutInlineSize === void 0 ? void 0 : layoutInlineSize.width) && leftWidth && toolBarContentRef.current) {
+    if ((layoutInlineSize === null || layoutInlineSize === void 0 ? void 0 : layoutInlineSize.width) && leftWidth && toolBarContentRef.current && toolBarAutoWidth) {
       var _toolBarContentRef$cu;
       var width = layoutInlineSize.width;
-      // console.log('layoutInlineSize-width', width);
-      if (width - leftWidth <= ((_toolBarContentRef$cu = toolBarContentRef.current) === null || _toolBarContentRef$cu === void 0 ? void 0 : _toolBarContentRef$cu.clientWidth) + 8) {
+      // 60 为容错
+      if (width - leftWidth - 60 <= ((_toolBarContentRef$cu = toolBarContentRef.current) === null || _toolBarContentRef$cu === void 0 ? void 0 : _toolBarContentRef$cu.clientWidth) + 8) {
         setFlat(false);
       } else {
         setFlat(true);
       }
     }
   }, 300));
-  var toolBarList = toolBar !== false ? presetToolBar : [];
-  if (Array.isArray(toolBar)) {
-    toolBarList = toolBar.map(function (item, index) {
-      if (typeof item === 'string' && presetToolBarName.includes(item.toLowerCase())) {
+  // 初始态
+  useEffect(function () {
+    if (!((layoutInlineSize === null || layoutInlineSize === void 0 ? void 0 : layoutInlineSize.width) && leftWidth)) {
+      setFlat(true);
+    }
+  }, []);
+  var toolBarList = useMemo(function () {
+    var result = toolBar !== false ? cloneDeep(presetToolBar) : [];
+    if (switchCardView && !result.find(function (item) {
+      return item.name === 'switchCard';
+    })) {
+      result.push({
+        type: 'preset',
+        name: 'switchCard',
+        component: presetToolBarMap['switchcard']
+      });
+    }
+    if (Array.isArray(toolBar)) {
+      result = toolBar.map(function (item, index) {
+        if (typeof item === 'string' && presetToolBarName.includes(item.toLowerCase())) {
+          return {
+            type: 'preset',
+            name: item,
+            component: presetToolBarMap[item.toLowerCase()]
+          };
+        }
         return {
-          type: 'preset',
-          name: item,
-          component: presetToolBarMap[item.toLowerCase()]
+          type: 'custom',
+          name: "custom".concat(index),
+          component: item
         };
+      });
+      if (!toolBar.includes('switchCard') && switchCardView && !result.find(function (item) {
+        return item.name === 'switchCard';
+      })) {
+        result.push({
+          type: 'preset',
+          name: 'switchCard',
+          component: presetToolBarMap['switchcard']
+        });
       }
-      return {
-        type: 'custom',
-        name: "custom".concat(index),
-        component: item
-      };
-    });
-  }
-  var renderFlatShape = function renderFlatShape() {
+    }
+    return result;
+  }, [toolBar]);
+  var renderFlatShape = useMemo(function () {
     return /*#__PURE__*/React.createElement("div", {
       className: cls('content')
     }, toolBarList.map(function (_ref) {
@@ -107,15 +136,18 @@ var ToolBar = function ToolBar(props) {
       return /*#__PURE__*/React.createElement("span", {
         className: cls('item', _defineProperty({}, name, true)),
         key: name
-      }, type === 'preset' && /*#__PURE__*/React.createElement(Component, props), type === 'custom' && /*#__PURE__*/React.createElement("div", {
+      }, type === 'preset' && /*#__PURE__*/React.createElement(Component, _objectSpread({}, props)), type === 'custom' && /*#__PURE__*/React.createElement("div", {
         className: cls({
           custom: true
         })
       }, Component));
     }));
-  };
+  }, [toolBarList, props.columns]);
   var renderUnFlatShape = function renderUnFlatShape() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Balloon.Tooltip, {
+    if (toolBar === false) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+    return /*#__PURE__*/React.createElement(Balloon.Tooltip, {
       triggerType: ['click'],
       popupProps: {
         cache: true
@@ -127,16 +159,16 @@ var ToolBar = function ToolBar(props) {
         type: "more-line"
       })),
       align: "tr"
-    }, renderFlatShape()));
+    }, renderFlatShape);
   };
   return /*#__PURE__*/React.createElement("div", {
     className: cls('', {
       flat: flat
     }),
     ref: toolBarRef
-  }, !flat && !fullScreenState ? renderUnFlatShape() : renderFlatShape(), /*#__PURE__*/React.createElement("div", {
+  }, !flat && !fullScreenState ? renderUnFlatShape() : renderFlatShape, /*#__PURE__*/React.createElement("div", {
     className: cls('shadow'),
     ref: toolBarContentRef
-  }, renderFlatShape()));
+  }, renderFlatShape));
 };
 export default ToolBar;

package/es/table/components/ToolBar/index.scss

@@ -1,7 +1,7 @@
 .teamix-pro-table-toolbar {
   width: 100%;
   text-align: right;
-  margin-bottom: 8px;
+  // margin-bottom: 8px;
   &-flat {
     margin-left: 8px;
   }
@@ -149,3 +149,29 @@
     }
   }
 }
+
+// switch card
+.teamix-pro-table-toolbar-switch-card {
+  margin-left: 8px;
+  label {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+}
+
+// refresh
+.teamix-pro-table-toolbar-icon {
+  &-auto-refresh {
+    width: 145px;
+  }
+
+  &-manual-refresh {
+    text-align: center;
+    line-height: 1;
+    margin-bottom: 2px;
+  }
+
+  .teamix-pro-table-toolbar-icon-time-radio.teamix-pro-table-toolbar-icon-time-radio.teamix-pro-table-toolbar-icon-time-radio {
+    padding-left: 32px;
+  }
+}

package/es/table/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import './index.scss';
+import { ProTableProps } from './typing';
+export * from './typing';
+declare const _default: React.FC<ProTableProps>;
+export default _default;