@teamix/pro 1.2.22 → 1.2.27

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

@@ -1,4 +1,4 @@
-var _excluded = ["className", "onChange", "total", "totalRender", "pageSize", "current", "pageSizeList", "pageSizeSelector", "type", "onPageSizeChange"];
+var _excluded = ["className", "onChange", "total", "totalRender", "pageSize", "current", "pageSizeList", "pageSizeSelector", "onPageSizeChange", "responsivePaginationType"];
 
 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; }
 
@@ -24,22 +24,22 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 // 自适应宽度的翻页器
 import React, { useState } from 'react';
-import { Pagination, Balloon, Select, Button } from '@alicloudfe/components';
+import { Pagination, Balloon, Select, Button, Input, Icon } from '@alicloudfe/components';
 import { getMessage, baseClass } from '@teamix/utils';
 import { useResponsiveProps } from '@teamix/hooks';
 import './index.scss';
 var cls = baseClass('teamix-pro-pagination');
 export default (function (props) {
   var className = props.className,
-      onChange = props.onChange,
+      propsOnChange = props.onChange,
       total = props.total,
       totalRender = props.totalRender,
       pageSize = props.pageSize,
       current = props.current,
       pageSizeList = props.pageSizeList,
       pageSizeSelector = props.pageSizeSelector,
-      type = props.type,
       onPageSizeChange = props.onPageSizeChange,
+      responsivePaginationType = props.responsivePaginationType,
       otherProps = _objectWithoutProperties(props, _excluded);
 
   var _useResponsiveProps = useResponsiveProps([480, 590, 700], ['mini', 'small', 'simple', 'normal']),
@@ -51,17 +51,23 @@ export default (function (props) {
       visible = _useState2[0],
       setVisible = _useState2[1];
 
+  var _useState3 = useState(current),
+      _useState4 = _slicedToArray(_useState3, 2),
+      currentPage = _useState4[0],
+      setCurrentPage = _useState4[1];
+
   var commonPaginationProps = {
     className: className,
-    onChange: onChange,
+    onChange: propsOnChange,
     total: total,
     pageSize: pageSize,
+    current: current,
     shape: 'arrow-only',
     pageSizeList: pageSizeList,
     pageSizeSelector: pageSizeSelector,
     pageSizePosition: 'end',
     onPageSizeChange: onPageSizeChange
-  };
+  }; // 自定义总数，用于 small、mini
 
   var customTotalRender = function customTotalRender(total) {
     return /*#__PURE__*/React.createElement(Balloon, {
@@ -94,13 +100,104 @@ export default (function (props) {
       },
       onChange: function onChange(value) {
         setVisible(false);
+        setCurrentPage(1);
         onPageSizeChange === null || onPageSizeChange === void 0 ? void 0 : onPageSizeChange(value);
       }
     })));
+  }; // 获取页总数
+
+
+  function getTotalPage(total, currentPageSize) {
+    var totalPage = Math.ceil(total / currentPageSize);
+    return totalPage <= 0 ? 1 : totalPage;
+  } // 自定义翻页，用于 mini
+
+
+  var customJumpRender = function customJumpRender() {
+    var handleInputChange = function handleInputChange(value, e) {
+      setCurrentPage(value);
+    }; // 回车触发跳转
+
+
+    var handleJump = function handleJump(e) {
+      var totalPage = getTotalPage(total, pageSize);
+      var value = Number(currentPage);
+
+      if (isNaN(value)) {
+        value = '';
+      } else if (value < 1) {
+        value = 1;
+      } else if (value > totalPage) {
+        value = totalPage;
+      }
+
+      if (value && value !== current) {
+        setCurrentPage(value);
+        propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange(value, e);
+      }
+    };
+
+    var handlePrevClick = function handlePrevClick(e) {
+      setCurrentPage(currentPage - 1);
+      propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange(currentPage - 1, e);
+    };
+
+    var handleNextClick = function handleNextClick(e) {
+      setCurrentPage(currentPage + 1);
+      propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange(currentPage + 1, e);
+    };
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: cls('custom-jumper')
+    }, /*#__PURE__*/React.createElement(Button, {
+      className: "next-prev next-pagination-item",
+      onClick: handlePrevClick,
+      disabled: Number(currentPage) <= 1
+    }, /*#__PURE__*/React.createElement(Icon, {
+      size: "small",
+      type: "arrow-left"
+    })), /*#__PURE__*/React.createElement(Input, {
+      className: "jump-input",
+      value: currentPage,
+      onChange: handleInputChange,
+      onKeyDown: function onKeyDown(e) {
+        if (e.keyCode === 13) {
+          handleJump(e);
+        }
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "total"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 4
+      }
+    }, "/"), getTotalPage(total, pageSize)), /*#__PURE__*/React.createElement(Button, {
+      className: "next-next next-pagination-item",
+      onClick: handleNextClick,
+      //@ts-ignore
+      disabled: total && Number(currentPage) >= getTotalPage(total, pageSize)
+    }, /*#__PURE__*/React.createElement(Icon, {
+      size: "small",
+      type: "arrow-right"
+    })));
+  };
+
+  var renderMiniPagination = function renderMiniPagination() {
+    if (total && pageSize) {
+      if (total / pageSize <= 2) {
+        return /*#__PURE__*/React.createElement(Pagination, _objectSpread(_objectSpread({}, commonPaginationProps), {}, {
+          type: "simple"
+        }, otherProps));
+      } else {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "".concat(cls('custom-mini-pagination'), "  next-pagination")
+        }, customTotalRender(total), customJumpRender());
+      }
+    }
   };
 
   var renderPagination = function renderPagination() {
-    switch (responsiveProps) {
+    switch (responsivePaginationType || responsiveProps) {
       case 'normal':
         return /*#__PURE__*/React.createElement(Pagination, _objectSpread(_objectSpread({}, commonPaginationProps), {}, {
           totalRender: function totalRender(total) {
@@ -130,13 +227,7 @@ export default (function (props) {
         }, otherProps));
 
       case 'mini':
-        return /*#__PURE__*/React.createElement(Pagination, _objectSpread(_objectSpread({}, commonPaginationProps), {}, {
-          pageSizeSelector: false,
-          totalRender: function totalRender(total) {
-            return customTotalRender(total);
-          },
-          type: "simple"
-        }, otherProps));
+        return renderMiniPagination();
 
       default:
         return /*#__PURE__*/React.createElement(Pagination, _objectSpread(_objectSpread({}, commonPaginationProps), otherProps));

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

@@ -1,6 +1,11 @@
 $prefix: 'teamix-pro-pagination';
 
 .#{$prefix} {
+  &-wrapper {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+  }
   &-custom-total {
     &-content {
       display: flex;
@@ -13,6 +18,34 @@ $prefix: 'teamix-pro-pagination';
       }
     }
   }
+  &-custom-mini-pagination {
+    display: flex;
+    align-items: center;
+  }
+  &-custom-jumper {
+    display: flex;
+    align-items: center;
+    .jump-input {
+      width: 36px;
+      input {
+        padding: 0 3px;
+        text-align: center;
+        line-height: 30px;
+      }
+    }
+    .total {
+      margin-left: 8px;
+      margin-right: 4px;
+      color: var(--color-text1-2);
+    }
+    .next-prev {
+      margin-left: 8px;
+      margin-right: 4px;
+    }
+    .next-pagination-item:disabled i {
+      color: var(--btn-pure-normal-color-disabled, #CCCCCC) !important;
+    }
+  }
   &-custom-page-size-selector.next-select-trigger {
     min-width: 56px;
     .next-select-inner {

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

@@ -27,17 +27,11 @@ var FullScreenIcon = function FullScreenIcon(props) {
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      visible = _useState2[0],
-      setVisible = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      fullscreen = _useState4[0],
-      setFullscreen = _useState4[1]; // 点击全屏
+      fullscreen = _useState2[0],
+      setFullscreen = _useState2[1]; // 点击全屏
 
 
   var allScreenHandle = function allScreenHandle() {
-    setVisible(false);
     setTimeout(function () {
       var _actionRef$current, _actionRef$current$fu;
 
@@ -55,7 +49,8 @@ var FullScreenIcon = function FullScreenIcon(props) {
   }, []); // 监听全屏变化
 
   (_actionRef$current3 = actionRef.current) === null || _actionRef$current3 === void 0 ? void 0 : (_actionRef$current3$o = _actionRef$current3.on) === null || _actionRef$current3$o === void 0 ? void 0 : _actionRef$current3$o.call(_actionRef$current3, function (state) {
-    setFullscreen(state);
+    // console.log('dataFilterForm', actionRef.current?.dataFilterForm);
+    setFullscreen(state); // actionRef.current?.dataFilterForm?.setValues(formValues);
   }, 'fullScreenState', 'fullscreenIcon');
   return /*#__PURE__*/React.createElement(Button, {
     iconSize: "small",

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

@@ -7,28 +7,37 @@ var FullScreen = function FullScreen(props) {
   var children = props.children,
       visible = props.visible,
       actionRef = props.actionRef;
+  var _actionRef$current = actionRef.current,
+      normalDataFilterForm = _actionRef$current.normalDataFilterForm,
+      fullscreenDataFilterForm = _actionRef$current.fullscreenDataFilterForm;
 
   function closeByESC(e) {
     if (visible && e.code === 'Escape') {
-      var _actionRef$current, _actionRef$current$se, _actionRef$current2, _actionRef$current2$f;
+      var _actionRef$current2, _actionRef$current2$s, _actionRef$current3, _actionRef$current3$f;
 
-      actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current = actionRef.current) === null || _actionRef$current === void 0 ? void 0 : (_actionRef$current$se = _actionRef$current.setFullScreenState) === null || _actionRef$current$se === void 0 ? void 0 : _actionRef$current$se.call(_actionRef$current, false);
-      actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current2 = actionRef.current) === null || _actionRef$current2 === void 0 ? void 0 : (_actionRef$current2$f = _actionRef$current2.fullScreen) === null || _actionRef$current2$f === void 0 ? void 0 : _actionRef$current2$f.call(_actionRef$current2);
+      actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current2 = actionRef.current) === null || _actionRef$current2 === void 0 ? void 0 : (_actionRef$current2$s = _actionRef$current2.setFullScreenState) === null || _actionRef$current2$s === void 0 ? void 0 : _actionRef$current2$s.call(_actionRef$current2, false);
+      actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current3 = actionRef.current) === null || _actionRef$current3 === void 0 ? void 0 : (_actionRef$current3$f = _actionRef$current3.fullScreen) === null || _actionRef$current3$f === void 0 ? void 0 : _actionRef$current3$f.call(_actionRef$current3);
     }
   } // 监听esc按钮
 
 
   useEffect(function () {
-    var _actionRef$current3, _actionRef$current3$s;
+    var _actionRef$current4, _actionRef$current4$s;
 
-    actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current3 = actionRef.current) === null || _actionRef$current3 === void 0 ? void 0 : (_actionRef$current3$s = _actionRef$current3.setFullScreenState) === null || _actionRef$current3$s === void 0 ? void 0 : _actionRef$current3$s.call(_actionRef$current3, visible);
+    actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current4 = actionRef.current) === null || _actionRef$current4 === void 0 ? void 0 : (_actionRef$current4$s = _actionRef$current4.setFullScreenState) === null || _actionRef$current4$s === void 0 ? void 0 : _actionRef$current4$s.call(_actionRef$current4, visible);
     window.addEventListener('keydown', closeByESC);
     return function () {
       window.removeEventListener('keydown', closeByESC);
     };
-  }, [visible]); // 全屏开启之后
+  }, [visible]);
+
+  var afterClose = function afterClose() {
+    normalDataFilterForm === null || normalDataFilterForm === void 0 ? void 0 : normalDataFilterForm.setValues(fullscreenDataFilterForm.values);
+  }; // 全屏开启之后
+
 
   var afterOpen = function afterOpen() {
+    fullscreenDataFilterForm.setValues(normalDataFilterForm.values);
     Message.show({
       type: 'notice',
       content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, getMessage('press')), /*#__PURE__*/React.createElement("span", {
@@ -40,13 +49,15 @@ var FullScreen = function FullScreen(props) {
     });
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children, /*#__PURE__*/React.createElement(Overlay, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children(false), /*#__PURE__*/React.createElement(Overlay, {
     canCloseByOutSideClick: false,
     align: "cc cc",
     cache: true,
     v2: false,
     disableScroll: true,
     shouldUpdatePosition: true,
+    afterClose: afterClose,
+    afterOpen: afterOpen,
     animation: {
       in: 'fadeIn',
       out: 'fadeOut'
@@ -55,15 +66,14 @@ var FullScreen = function FullScreen(props) {
     wrapperStyle: {
       zIndex: 999
     },
-    afterOpen: afterOpen,
     onRequestClose: function onRequestClose() {
-      var _actionRef$current4, _actionRef$current4$f;
+      var _actionRef$current5, _actionRef$current5$f;
 
-      actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current4 = actionRef.current) === null || _actionRef$current4 === void 0 ? void 0 : (_actionRef$current4$f = _actionRef$current4.fullScreen) === null || _actionRef$current4$f === void 0 ? void 0 : _actionRef$current4$f.call(_actionRef$current4);
+      actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current5 = actionRef.current) === null || _actionRef$current5 === void 0 ? void 0 : (_actionRef$current5$f = _actionRef$current5.fullScreen) === null || _actionRef$current5$f === void 0 ? void 0 : _actionRef$current5$f.call(_actionRef$current5);
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: "teamix-pro-table-full-screen"
-  }, children)));
+  }, children(true))));
 };
 
 export default FullScreen;