@pisell/materials 3.0.61 → 6.0.1

package/es/components/filter/components/Dropdown/index.d.ts

@@ -4,5 +4,6 @@ import { DropdownProps } from './types';
 declare const Dropdown: React.FC<DropdownProps & {
     onOpen: () => void;
     onClose: () => void;
+    renderItem?: (item: any, otherProps?: any) => React.ReactNode;
 }>;
 export default Dropdown;

package/es/components/filter/components/Dropdown/index.js

@@ -49,7 +49,8 @@ var Dropdown = function Dropdown(props) {
     quickFilterMaxLength = props.quickFilterMaxLength,
     formFiltersPrefix = props.formFiltersPrefix,
     _onOpen = props.onOpen,
-    _onClose = props.onClose;
+    _onClose = props.onClose,
+    renderItem = props.renderItem;
   var list = useMemo(function () {
     return {
       quickFilter: quickFilter || [],
@@ -104,7 +105,10 @@ var Dropdown = function Dropdown(props) {
       setActivatorNodeRef: setActivatorNodeRef,
       listeners: listeners,
       style: style
-    }), /*#__PURE__*/React.createElement(FilterItem, {
+    }), renderItem ? renderItem(item, {
+      onOpen: _onOpen,
+      onClose: _onClose
+    }) : /*#__PURE__*/React.createElement(FilterItem, {
       key: name.join('-'),
       name: name,
       label: item.label,

package/es/components/filter/components/FilterButton/index.js

@@ -20,7 +20,8 @@ var Filter = function Filter(_ref) {
   var value = _ref.value,
     onChange = _ref.onChange,
     quickFilterMaxLength = _ref.quickFilterMaxLength,
-    formFiltersPrefix = _ref.formFiltersPrefix;
+    formFiltersPrefix = _ref.formFiltersPrefix,
+    renderItem = _ref.renderItem;
   var ref = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -52,9 +53,10 @@ var Filter = function Filter(_ref) {
       },
       onClose: function onClose() {
         return setDateRangeOpen(false);
-      }
+      },
+      renderItem: renderItem
     });
-  }, [quickFilter, otherFilter, quickFilterMaxLength, formFiltersPrefix]);
+  }, [quickFilter, otherFilter, quickFilterMaxLength, formFiltersPrefix, renderItem]);
   var isMobileBool = isMobile();
   return /*#__PURE__*/React.createElement("div", {
     ref: ref

package/es/components/filter/components/FilterButton/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FilterItemProps } from "../../types";
 export declare type FilterValueType = {
     quickFilter: FilterItemProps[];
@@ -8,4 +9,5 @@ export declare type FilterListProps = {
     onChange?: (value: FilterValueType) => void;
     quickFilterMaxLength: number;
     formFiltersPrefix: string;
+    renderItem?: (item: any, otherProps?: any) => React.ReactNode;
 };

package/es/components/form/index.d.ts

@@ -1,8 +1,2 @@
-import React, { Component } from 'react';
-declare class Form extends Component<any, any> {
-    formRef: React.RefObject<any>;
-    componentDidUpdate(prevProps: any): void;
-    componentDidMount(): void;
-    render(): React.JSX.Element;
-}
-export default Form;
+declare const _default: any;
+export default _default;

package/es/components/form/index.js

@@ -20,6 +20,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 import React, { Component, createRef } from 'react';
 import { Form as OriginalForm } from 'antd';
 import { withSingleFunctionChild } from "../../utils/hoc";
+import { isArr } from '@pisell/utils';
 var Form = /*#__PURE__*/function (_Component) {
   _inherits(Form, _Component);
   var _super = _createSuper(Form);
@@ -87,12 +88,13 @@ var Form = /*#__PURE__*/function (_Component) {
 }(Component);
 Form.Item = function (props) {
   var name = props.name,
+    propsRules = props.rules,
     requiredobj = props.requiredobj,
     typeobj = props.typeobj,
     patternobj = props.patternobj,
     lenobj = props.lenobj,
     _validator = props.validator;
-  var rules = [];
+  var rules = isArr(propsRules) ? propsRules : [];
   if (requiredobj && requiredobj.required) {
     rules.push(requiredobj);
   }

package/es/components/iconfont/index.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import { createFromIconfontCN } from '@ant-design/icons';
 import React from 'react';
 var MyIcon = createFromIconfontCN({
-  scriptUrl: 'https://static.pisellcdn.com/pisell2iconfont.js' // 在 iconfont.cn 上生成
+  scriptUrl: 'https://static.pisellcdn.com/pisell2iconfont1.0.js' // 在 iconfont.cn 上生成
 });
 
 var IconFont = function IconFont(props) {

package/es/components/page/index.js

@@ -11,6 +11,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { useMemo } from 'react';
 import ConfigProvider from "../config-provider";
 import { AdapterDayjs } from '@pisell/date-picker/es/AdapterDayjs';
+import VariablesProvider from "../dataSourceComponents/provider/variables/VariablesProvider";
 import { LocalizationProvider, createTheme, ThemeProvider, LocaleProvider } from '@pisell/date-picker';
 import { App } from 'antd';
 import enUS from 'antd/locale/en_US';
@@ -59,6 +60,7 @@ var Page = function Page(props) {
     if (props !== null && props !== void 0 && props.theme) {
       var _props$theme, _props$theme$token;
       return _objectSpread(_objectSpread({}, props.theme), {}, {
+        // cssVar: { key: 'app' },
         token: _objectSpread(_objectSpread({}, props.theme.token), {}, {
           // 外部透传主题时，如果没有传入colorPrimary 默认使用主项目内主题色
           colorPrimary: (props === null || props === void 0 ? void 0 : (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : (_props$theme$token = _props$theme.token) === null || _props$theme$token === void 0 ? void 0 : _props$theme$token.colorPrimary) || themeColor || '#7F56D9'
@@ -66,6 +68,7 @@ var Page = function Page(props) {
       });
     }
     return {
+      // cssVar: { key: 'app' },
       components: {
         Table: {
           colorFillContent: '#EAECF0',
@@ -250,11 +253,11 @@ var Page = function Page(props) {
     }
   }, /*#__PURE__*/React.createElement(PisellConfigProvider, {
     locale: locale
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(VariablesProvider, null, /*#__PURE__*/React.createElement("div", {
     style: _objectSpread(_objectSpread({}, style), {}, {
       '--theme-color': themeColor || '#7F56D9'
     }),
     className: className
-  }, children)))))));
+  }, children))))))));
 };
 export default Page;

package/es/components/pisellUpload/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { UploadProps } from 'antd';
+import './index.less';
+export interface PisellUploadProps extends UploadProps {
+    title?: string;
+    text1?: string;
+    text2?: string;
+    uploadType?: 'button' | 'drop' | 'custom';
+}
+declare const PisellUpload: (props: PisellUploadProps) => React.JSX.Element;
+export default PisellUpload;

package/es/components/pisellUpload/index.js

@@ -0,0 +1,33 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { useEffect } from 'react';
+import { Upload, Button } from 'antd';
+import { InboxOutlined, UploadOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
+var Dragger = Upload.Dragger;
+import "./index.less";
+var PisellUpload = function PisellUpload(props) {
+  var title = props.title,
+    text1 = props.text1,
+    text2 = props.text2,
+    uploadType = props.uploadType;
+  useEffect(function () {
+    document.body.id = 'body';
+  }, []);
+  if (uploadType === 'custom') {
+    return /*#__PURE__*/React.createElement(Upload, props, props.children);
+  }
+  return /*#__PURE__*/React.createElement("div", null, uploadType === 'button' ? /*#__PURE__*/React.createElement(Upload, props, /*#__PURE__*/React.createElement(Button, {
+    icon: /*#__PURE__*/React.createElement(UploadOutlined, null)
+  }, "Upload")) : /*#__PURE__*/React.createElement(Dragger, _extends({}, props, {
+    className: classNames('pisell-upload-wapper')
+  }), /*#__PURE__*/React.createElement("p", {
+    className: "ant-upload-drag-icon"
+  }, /*#__PURE__*/React.createElement(InboxOutlined, null)), /*#__PURE__*/React.createElement("p", {
+    className: "ant-upload-title"
+  }, title), /*#__PURE__*/React.createElement("p", {
+    className: "ant-upload-text1"
+  }, text1), /*#__PURE__*/React.createElement("p", {
+    className: "ant-upload-text2"
+  }, text2)));
+};
+export default PisellUpload;

package/es/components/pisellUpload/index.less

@@ -0,0 +1,15 @@
+.pisell-upload-wapper {
+  .ant-upload-drag-icon {
+    font-size: 16px;
+  }
+  .ant-upload-title {
+    font-size: 16px;
+    font-weight: bold;
+  }
+  .ant-upload-text {
+    font-size: 14px;
+  }
+  .ant-upload-text2 {
+    font-size: 14px;
+  }
+}

package/es/components/radio/index.js

@@ -20,10 +20,10 @@ var Group = function Group(props) {
     var RadioCpt = optionTypeMap[optionType || "default"];
     return options.map(function (option) {
       return /*#__PURE__*/React.createElement(RadioCpt, {
-        key: option.value,
-        value: option.value,
-        disabled: option.disabled
-      }, option.label);
+        key: option === null || option === void 0 ? void 0 : option.value,
+        value: option === null || option === void 0 ? void 0 : option.value,
+        disabled: option === null || option === void 0 ? void 0 : option.disabled
+      }, option === null || option === void 0 ? void 0 : option.label);
     });
   }, [options]);
   return /*#__PURE__*/React.createElement(OriginalRadio.Group, others, /*#__PURE__*/React.createElement(Space, {

package/es/components/select/index.d.ts

@@ -1,4 +1,9 @@
-/// <reference types="react" />
-import "./index.less";
-declare const Select: import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<unknown>>;
+import React from 'react';
+import { Select as OriginalSelect } from 'antd';
+import type { SelectProps } from 'antd';
+import './index.less';
+interface CompoundedComponent extends React.ForwardRefExoticComponent<SelectProps> {
+    Option: typeof OriginalSelect.Option;
+}
+declare const Select: CompoundedComponent;
 export default Select;

package/es/components/select/index.js

@@ -5,58 +5,123 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { Checkbox, Divider, Select as OriginalSelect } from "antd";
-import { useCallback, useMemo, forwardRef } from "react";
+import React, { useCallback, useMemo, useRef, forwardRef, useState } from 'react';
+import { Checkbox, Divider, Select as OriginalSelect, Input } from 'antd';
+import { useControllableValue, useMemoizedFn } from 'ahooks';
+import classNames from 'classnames';
+import Iconfont from "../iconfont";
 import { getText } from "../../locales";
-import { useControllableValue, useMemoizedFn } from "ahooks";
+import { withWrap } from "../../utils/hoc";
+import BrowserSelect from "../browserSelect";
+import usePisellConfig from "../pisell-config-provider/hooks/usePisellConfig";
 import "./index.less";
-var prefix = "pisell-lowcode-";
+var prefix = 'pisell-lowcode-';
 var SelectBase = /*#__PURE__*/forwardRef(function (props, ref) {
   var isShowDropdown = props.isShowDropdown,
     selectAll = props.selectAll,
     mode = props.mode,
     options = props.options,
-    propsDropdownRender = props.dropdownRender;
+    propsDropdownRender = props.dropdownRender,
+    showSearch = props.showSearch,
+    styleType = props.styleType,
+    _props$optionFilterPr = props.optionFilterProp,
+    optionFilterProp = _props$optionFilterPr === void 0 ? 'value' : _props$optionFilterPr,
+    popupClassName = props.popupClassName,
+    onDropdownVisibleChange = props.onDropdownVisibleChange;
+  var _usePisellConfig = usePisellConfig(),
+    platform = _usePisellConfig.platform;
+  var searchInputRef = useRef(null);
   var _useControllableValue = useControllableValue(props),
     _useControllableValue2 = _slicedToArray(_useControllableValue, 2),
     state = _useControllableValue2[0],
     setState = _useControllableValue2[1];
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchValue = _useState2[0],
+    setSearchValue = _useState2[1];
+  var filteredOptions = useMemo(function () {
+    if (!searchValue) return options;
+    return options.filter(function (option) {
+      var _option$optionFilterP;
+      var optionValue = ((_option$optionFilterP = option[optionFilterProp]) === null || _option$optionFilterP === void 0 ? void 0 : _option$optionFilterP.toString().toLowerCase()) || '';
+      return optionValue.includes(searchValue.toLowerCase());
+    });
+  }, [options, searchValue, optionFilterProp]);
   var onSelectAllChange = useMemoizedFn(function (e) {
     if (e.target.checked) {
-      setState(options.map(function (item) {
+      setState(filteredOptions.map(function (item) {
         return item.value;
-      }), options);
+      }), filteredOptions);
     } else {
       setState([], []);
     }
   });
+  var handleDropdownVisibleChange = useMemoizedFn(function (visible) {
+    if (!visible) {
+      setSearchValue('');
+    } else {
+      if (platform === 'pc') {
+        setTimeout(function () {
+          var _searchInputRef$curre;
+          (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.focus();
+        }, 200);
+      }
+    }
+    onDropdownVisibleChange === null || onDropdownVisibleChange === void 0 ? void 0 : onDropdownVisibleChange(visible);
+  });
   var isShowSelectAll = useMemo(function () {
-    return mode === "multiple" && isShowDropdown && selectAll;
+    return mode === 'multiple' && isShowDropdown && selectAll;
   }, [mode, selectAll, isShowDropdown]);
   var checkboxChecked = useMemo(function () {
-    if (mode !== "multiple") return false;
-    return (state === null || state === void 0 ? void 0 : state.length) === (options === null || options === void 0 ? void 0 : options.length) && state.sort().join("") === options.map(function (item) {
+    if (mode !== 'multiple') return false;
+    return (state === null || state === void 0 ? void 0 : state.length) === (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) && state.sort().join('') === filteredOptions.map(function (item) {
       return item.value;
-    }).sort().join("");
-  }, [state, options]);
+    }).sort().join('');
+  }, [state, filteredOptions]);
   var dropdownRender = useCallback(propsDropdownRender ? propsDropdownRender : function (originNode) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, originNode, isShowDropdown && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, showSearch && /*#__PURE__*/React.createElement(Input, {
+      ref: searchInputRef,
+      className: "pisell-select-search-input",
+      size: "middle",
+      placeholder: getText('select-dropdown-render-search'),
+      value: searchValue,
+      onChange: function onChange(e) {
+        return setSearchValue(e.target.value);
+      },
+      bordered: false,
+      allowClear: true,
+      prefix: /*#__PURE__*/React.createElement(Iconfont, {
+        style: {
+          color: '#98A2B3'
+        },
+        type: "pisell2-search-lg"
+      })
+    }), originNode, isShowDropdown && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
       className: "".concat(prefix, "select-dropdown-render-divider")
     }), /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefix, "select-dropdown-render-options-wrap")
     }, isShowSelectAll && /*#__PURE__*/React.createElement(Checkbox, {
       onChange: onSelectAllChange,
       checked: checkboxChecked
-    }, getText("select-dropdown-render-select-all")))));
-  }, [isShowDropdown, isShowSelectAll, checkboxChecked, propsDropdownRender]);
+    }, getText('select-dropdown-render-select-all')))));
+  }, [isShowDropdown, isShowSelectAll, checkboxChecked, propsDropdownRender, searchValue, showSearch]);
+  if (styleType === 'system') {
+    return /*#__PURE__*/React.createElement(BrowserSelect, props);
+  }
   return /*#__PURE__*/React.createElement(OriginalSelect, _extends({}, props, {
+    defaultActiveFirstOption: false,
+    onDropdownVisibleChange: handleDropdownVisibleChange,
+    showSearch: false,
     ref: ref,
     value: state,
     onChange: function onChange(value, option) {
       return setState(value, option);
     },
-    dropdownRender: dropdownRender
+    dropdownRender: dropdownRender,
+    options: filteredOptions,
+    popupClassName: classNames('pisell-base-select-dropdown', popupClassName)
   }));
 });
-var Select = SelectBase;
+var Select = withWrap(SelectBase);
+Select.Option = OriginalSelect.Option;
 export default Select;

package/es/components/select/index.less

@@ -9,3 +9,22 @@
     padding: 0 5px 5px;
   }
 }
+
+// 添加选项间距
+.pisell-base-select-dropdown {
+  .pisell-lowcode-select-item {
+    margin-bottom: 4px;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.pisell-select-search-input {
+  width: 100%;
+  margin-bottom: 4px;
+
+  box-shadow: none !important;
+  border-color: transparent !important;
+}

package/es/components/sort/index.js

@@ -87,7 +87,7 @@ var Sort = function Sort(_ref2) {
         key: d.name,
         label: d.label,
         children: sortChildrenMap[d.type](d.name, !!(d !== null && d !== void 0 && d.localFilter)),
-        popupClassName: "".concat(prefix, "sort-sub-menu-popup-wrap"),
+        popupClassName: "".concat(prefix, "sort-sub-menu-popup-wrap ").concat(prefix, "dropdown-css-var"),
         // 增加显示隐藏配置
         className: "".concat(d.isHidden ? "".concat(prefix, "sort-menu-wrap-hide") : '')
       };

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

@@ -28,19 +28,28 @@ var Actions = function Actions(_ref) {
     preserve: true
   });
   var showActions = useMemo(function () {
+    if ( /*#__PURE__*/React.isValidElement(filter)) {
+      return true;
+    }
     return (filter === null || filter === void 0 ? void 0 : filter.show) || (sort === null || sort === void 0 ? void 0 : sort.show) || (columnSetting === null || columnSetting === void 0 ? void 0 : columnSetting.show) || (dataSourceGroup === null || dataSourceGroup === void 0 ? void 0 : dataSourceGroup.show) || view.multiple || (exportImport === null || exportImport === void 0 ? void 0 : exportImport.show);
   }, [filter === null || filter === void 0 ? void 0 : filter.show, sort === null || sort === void 0 ? void 0 : sort.show, columnSetting === null || columnSetting === void 0 ? void 0 : columnSetting.show, dataSourceGroup === null || dataSourceGroup === void 0 ? void 0 : dataSourceGroup.show, view.multiple, exportImport === null || exportImport === void 0 ? void 0 : exportImport.show]);
+  var filterRender = useMemo(function () {
+    if ( /*#__PURE__*/React.isValidElement(filter)) {
+      return filter;
+    }
+    return /*#__PURE__*/React.createElement(Filter, {
+      filter: filter,
+      isRenderFormContent: false,
+      tableId: tableId,
+      viewMode: viewMode,
+      isMobile: isMobileBool
+    });
+  }, [filter, tableId, viewMode, isMobileBool]);
   return showActions ? /*#__PURE__*/React.createElement("div", {
     className: "materials-grid-actions"
   }, /*#__PURE__*/React.createElement("div", {
     className: "left-wrap"
-  }, /*#__PURE__*/React.createElement(Filter, {
-    filter: filter,
-    isRenderFormContent: false,
-    tableId: tableId,
-    viewMode: viewMode,
-    isMobile: isMobileBool
-  })), /*#__PURE__*/React.createElement("div", {
+  }, filterRender), /*#__PURE__*/React.createElement("div", {
     className: "right-wrap",
     style: {
       columnGap: isMobileBool ? 0 : 12

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

@@ -1,5 +1,5 @@
-import React from "react";
-import { GalleryProps } from "./types";
-import "./index.less";
+import React from 'react';
+import { GalleryProps } from './types';
+import './index.less';
 declare const _default: React.MemoExoticComponent<(props: GalleryProps) => React.JSX.Element>;
 export default _default;

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

@@ -1,6 +1,8 @@
-import React, { memo, useCallback, useEffect, useMemo } from "react";
-import { Form, Spin } from "antd";
-import { isFunction } from "@pisell/utils";
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { memo, useCallback, useEffect, useMemo } from 'react';
+import { Form, Spin } from 'antd';
+import { isFunction } from '@pisell/utils';
+import { FormPagination } from "../../Pagination";
 import useTransDataSource from "../hooks/useTransDataSource";
 import { useSharedState } from "../../../hooks";
 import { Context } from "../model";
@@ -8,7 +10,7 @@ import VirtualGrid from "./components/VirtualGrid";
 import GalleryItem from "./components/GalleryItem";
 import { FIELD_LABEL_HEIGHT, FIELD_VALUE_HEIGHT, TITLE_LENE_HEIGHT, TITLE_VERTICAL_SPACING } from "./constant";
 import "./index.less";
-var prefix = "pisell-lowcode-";
+var prefix = 'pisell-lowcode-';
 var Gallery = function Gallery(props) {
   var gallery = props.gallery,
     filter = props.filter,
@@ -31,11 +33,11 @@ var Gallery = function Gallery(props) {
   var _useSharedState = useSharedState(Context),
     state = _useSharedState.state;
   var form = Form.useFormInstance();
-  var column_setting = Form.useWatch("column_setting", {
+  var column_setting = Form.useWatch('column_setting', {
     form: form,
     preserve: true
   }) || [];
-  var gallery_setting = Form.useWatch(["gallery_setting"], {
+  var gallery_setting = Form.useWatch(['gallery_setting'], {
     form: form,
     preserve: true
   }) || {};
@@ -69,6 +71,11 @@ var Gallery = function Gallery(props) {
       index: index
     });
   }, [gallery_setting, gallery, columnsMap, column_setting]);
+
+  // 总数
+  var total = useMemo(function () {
+    return pagination === null || pagination === void 0 ? void 0 : pagination.total;
+  }, [pagination]);
   var gap = useMemo(function () {
     return [horizontalGutter, verticalGutter];
   }, [horizontalGutter, verticalGutter]);
@@ -82,7 +89,7 @@ var Gallery = function Gallery(props) {
     var headerFieldHeight = 0;
     var contentHeight = 0;
     var footerHeight = 0;
-    if (cover.show && (gallery_setting === null || gallery_setting === void 0 ? void 0 : gallery_setting.coverField) !== "noCover") {
+    if (cover.show && (gallery_setting === null || gallery_setting === void 0 ? void 0 : gallery_setting.coverField) !== 'noCover') {
       coverHeight = cover.height;
     }
     if (title.field) {
@@ -95,9 +102,9 @@ var Gallery = function Gallery(props) {
       var fieldCount = column_setting.filter(function (item) {
         return item.isShow;
       }).length;
-      var itemHeight = gallery_setting.isShowLabel && gallery_setting.compactMode !== "compact" ? FIELD_LABEL_HEIGHT + FIELD_VALUE_HEIGHT : FIELD_VALUE_HEIGHT;
+      var itemHeight = gallery_setting.isShowLabel && gallery_setting.compactMode !== 'compact' ? FIELD_LABEL_HEIGHT + FIELD_VALUE_HEIGHT : FIELD_VALUE_HEIGHT;
       contentHeight = itemHeight * fieldCount;
-      if (gallery_setting.compactMode === "compact") {
+      if (gallery_setting.compactMode === 'compact') {
         contentHeight = contentHeight * 0.8;
       }
     }
@@ -119,6 +126,17 @@ var Gallery = function Gallery(props) {
     renderItem: renderItem,
     gap: gap,
     rowHeight: rowHeight
-  })));
+  }), !pagination.localPagination && /*#__PURE__*/React.createElement(Form.Item, {
+    name: "pagination",
+    style: {
+      margin: 0,
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0
+    }
+  }, /*#__PURE__*/React.createElement(FormPagination, _extends({}, pagination, {
+    total: total
+  })))));
 };
 export default /*#__PURE__*/memo(Gallery);

package/es/components/table/Gallery/index.less

@@ -14,6 +14,7 @@
     flex: 1 1 auto;
     height: 100%;
     overflow: hidden;
+    position: relative;
   }
   &-gallery-item-wrap {
     cursor: pointer;

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

@@ -1,4 +1,11 @@
-import React from "react";
-import "./index.less";
-declare const Header: ({ buttons, title }: any) => React.JSX.Element | null;
+import React from 'react';
+import './index.less';
+export interface HeaderProps {
+    buttons: React.ReactNode | any[];
+    title: React.ReactNode | (() => React.ReactNode);
+    subTitle: React.ReactNode | (() => React.ReactNode);
+    showTitle?: boolean;
+    showSubTitle?: boolean;
+}
+declare const Header: ({ buttons, title, subTitle, showTitle, showSubTitle, }: HeaderProps) => React.JSX.Element | null;
 export default Header;

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

@@ -1,20 +1,46 @@
-import React, { useMemo } from "react";
+import React, { useMemo } from 'react';
+import { isFunction } from '@pisell/utils';
 import Buttons from "./Buttons";
 import "./index.less";
 var Header = function Header(_ref) {
   var buttons = _ref.buttons,
-    title = _ref.title;
+    title = _ref.title,
+    subTitle = _ref.subTitle,
+    showTitle = _ref.showTitle,
+    showSubTitle = _ref.showSubTitle;
   var showHeader = useMemo(function () {
-    return title || (buttons === null || buttons === void 0 ? void 0 : buttons.length);
-  }, [buttons, title]);
+    return title && showTitle || (Array.isArray(buttons) ? buttons.length > 0 : buttons) || subTitle && showSubTitle;
+  }, [buttons, title, subTitle, showTitle, showSubTitle]);
+  var titleNode = useMemo(function () {
+    if (isFunction(title)) {
+      return title();
+    }
+    return title;
+  }, [title]);
+  var buttonsNode = useMemo(function () {
+    if (Array.isArray(buttons)) {
+      return /*#__PURE__*/React.createElement(Buttons, {
+        list: buttons
+      });
+    }
+    return buttons;
+  }, [buttons]);
+  var subTitleNode = useMemo(function () {
+    if (isFunction(subTitle)) {
+      return subTitle();
+    }
+    return subTitle;
+  }, [subTitle]);
   return showHeader ? /*#__PURE__*/React.createElement("div", {
-    className: "materials-grid-header"
+    className: "materials-grid-header-wrap"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "left-wrap"
-  }, title && title()), /*#__PURE__*/React.createElement("div", {
-    className: "right-wrap"
-  }, /*#__PURE__*/React.createElement(Buttons, {
-    list: buttons
-  }))) : null;
+    className: 'materials-grid-header'
+  }, showTitle && /*#__PURE__*/React.createElement("div", {
+    className: 'left-wrap'
+  }, titleNode), /*#__PURE__*/React.createElement("div", {
+    className: 'right-wrap'
+  }, buttonsNode)), showSubTitle && subTitleNode && /*#__PURE__*/React.createElement("div", {
+    className: 'materials-grid-sub-title'
+  }, subTitleNode)) : null;
 };
 export default Header;