@pisell/materials 3.0.7 → 3.0.8

package/es/components/Pagination/index.js

@@ -14,9 +14,9 @@ import ArrowRight from "@pisell/icon/es/ArrowRight";
 import ArrowLeft from "@pisell/icon/es/ArrowLeft";
 import { Pagination as OriginPagination } from "antd";
 import classNames from "classnames";
-import { useResponsive } from "../../hooks";
 import "./index.less";
 import { getText } from "../../locales";
+import useIsMobileTable from "../table/hooks/useIsMobileTable";
 
 /**
  * @title: 自定义渲染
@@ -59,21 +59,21 @@ export var paginationConfig = {
   size: "small"
 };
 var Pagination = function Pagination(props) {
-  var responsive = useResponsive();
   var show = useMemo(function () {
     return Object.keys(props).length;
   }, [props]);
+  var isMiniPagination = useIsMobileTable();
   var content = useMemo(function () {
     if (!show) {
       return null;
     }
     var Com = OriginPagination;
     // 移动端使用简单分页
-    if (responsive === "phone" || responsive === "ipad") {
+    if (isMiniPagination) {
       Com = MiniPagination;
     }
     return /*#__PURE__*/React.createElement(Com, _extends({}, paginationConfig, props));
-  }, [show, paginationConfig, props, responsive]);
+  }, [show, paginationConfig, props, isMiniPagination]);
   return content;
 };
 export default Pagination;

package/es/components/drawer/index.js

@@ -1,21 +1,43 @@
 var _excluded = ["others"];
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 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); }
+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 = 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; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { useMemo } from "react";
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import React, { useLayoutEffect, useMemo } from "react";
 import { Drawer as OriginalDrawer } from "antd";
+import { useControllableValue, useUpdateEffect } from "ahooks";
+import classNames from "classnames";
+import { isBoolean, isUndefined } from "@pisell/utils";
 import XClose from "@pisell/icon/es/XClose";
+import Pin02 from "@pisell/icon/es/Pin02";
 import "./index.less";
 var prefix = "pisell-lowcode-";
 var Title = function Title(props) {
   var placement = props.placement,
-    onClose = props.onClose;
+    onClose = props.onClose,
+    showPin = props.showPin,
+    persistentState = props.persistentState,
+    setPersistentState = props.setPersistentState;
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefix, "drawer-outside-wrap ").concat(prefix, "drawer-outside-wrap-").concat(placement)
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefix, "drawer-outside-action-wrap"),
     onClick: onClose
-  }, /*#__PURE__*/React.createElement(XClose, null)));
+  }, /*#__PURE__*/React.createElement(XClose, null)), showPin && /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefix, "drawer-outside-action-wrap"), _defineProperty({}, "".concat(prefix, "drawer-outside-action-active"), persistentState)),
+    onClick: function onClick() {
+      return setPersistentState(!persistentState);
+    }
+  }, /*#__PURE__*/React.createElement(Pin02, null)));
 };
 var Drawer = function Drawer(props) {
   var others = props.others,
@@ -23,12 +45,45 @@ var Drawer = function Drawer(props) {
   var operateMode = props.operateMode,
     headerStyle = props.headerStyle,
     placement = props.placement,
-    onClose = props.onClose;
+    onClose = props.onClose,
+    showPin = props.showPin,
+    width = props.width,
+    getContainer = props.getContainer,
+    open = props.open;
+  var _useControllableValue = useControllableValue(props, {
+      trigger: "onPersistentChange",
+      valuePropName: "persistent"
+    }),
+    _useControllableValue2 = _slicedToArray(_useControllableValue, 2),
+    persistentState = _useControllableValue2[0],
+    setPersistentState = _useControllableValue2[1];
+  var currentDrawerId = props.__id;
+  var storageKey = "drawer-".concat(currentDrawerId);
   var innerProps = {};
   if (props.__designMode === "design") {
     // 低代码编辑态中强制显示，将控制权交给引擎侧
     innerProps.open = true;
   }
+  useLayoutEffect(function () {
+    if (isBoolean(persistentState) && isUndefined(getContainer) && showPin) {
+      document.body.style.transition = 'all 0.3s';
+      document.body.style["padding-".concat(placement)] = persistentState && open ? "".concat(width || 378, "px") : "0";
+    }
+    return function () {
+      document.body.style["padding-".concat(placement)] = "0";
+      document.body.style.transition = 'none';
+    };
+  }, [persistentState, width, showPin, placement, open]);
+  useUpdateEffect(function () {
+    if (isBoolean(persistentState) && showPin) {
+      localStorage.setItem(storageKey, "".concat(persistentState));
+    }
+  }, [persistentState, storageKey, showPin]);
+  useLayoutEffect(function () {
+    if (!isBoolean(persistentState) && showPin) {
+      setPersistentState(localStorage.getItem(storageKey) === "true");
+    }
+  }, [persistentState, storageKey, showPin]);
   var otherProps = useMemo(function () {
     if (operateMode === "outside") {
       return {
@@ -39,12 +94,15 @@ var Drawer = function Drawer(props) {
         },
         title: /*#__PURE__*/React.createElement(Title, {
           placement: placement,
-          onClose: onClose
+          onClose: onClose,
+          showPin: showPin,
+          persistentState: persistentState,
+          setPersistentState: setPersistentState
         })
       };
     }
     return headerStyle;
-  }, [operateMode, placement, onClose]);
+  }, [operateMode, placement, onClose, persistentState, setPersistentState]);
   return /*#__PURE__*/React.createElement(OriginalDrawer, _extends({}, resetProps, innerProps, otherProps, others));
 };
 export default Drawer;

package/es/components/drawer/index.less

@@ -31,4 +31,7 @@
       font-size: 20px;
     }
   }
+  &-drawer-outside-action-active {
+    background: var(--Primary-200, #E9D7FE) !important;
+  }
 }

package/es/components/filter/index.js

@@ -8,13 +8,13 @@ import React, { useEffect, useMemo } from "react";
 import { Form } from "antd";
 import FilterButton from "./components/FilterButton";
 import QuickFilter from "./components/QuickFilter";
-import { isMobile } from "../../utils/platform";
 var formFiltersPrefix = "filters";
 var Filter = function Filter(props) {
   var filter = props.filter,
     _props$isRenderFormCo = props.isRenderFormContent,
     isRenderFormContent = _props$isRenderFormCo === void 0 ? true : _props$isRenderFormCo,
-    onValuesChange = props.onValuesChange;
+    onValuesChange = props.onValuesChange,
+    isMobileBool = props.isMobile;
   var _ref = filter || {},
     show = _ref.show,
     quickFilterMaxLength = _ref.quickFilterMaxLength,
@@ -23,7 +23,6 @@ var Filter = function Filter(props) {
   var _Form$useForm = Form.useForm(),
     _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
     form = _Form$useForm2[0];
-  var isMobileBool = isMobile();
   var isShowQuickFilter = useMemo(function () {
     // 移动端 并且 开启filter按钮 并且 开启filter排序时 不显示快速筛选
     if (isMobileBool && show && sortButtonShow) {

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

@@ -38,4 +38,5 @@ export interface FilterProps {
     onValuesChange?: () => void;
     tableId?: string;
     viewMode?: ModeType;
+    isMobile?: boolean;
 }

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

@@ -8,7 +8,7 @@ import Buttons from "../Header/Buttons";
 import ViewMode from "./component/ViewMode";
 import GallerySetting from "./component/GallerySetting";
 import "./index.less";
-import { isMobile } from "../../../utils/platform";
+import useIsMobileTable from "../hooks/useIsMobileTable";
 var Actions = function Actions(_ref) {
   var filter = _ref.filter,
     sort = _ref.sort,
@@ -20,6 +20,7 @@ var Actions = function Actions(_ref) {
     view = _ref.view,
     gallery = _ref.gallery;
   var form = Form.useFormInstance();
+  var isMobileBool = useIsMobileTable();
   var viewMode = Form.useWatch("view_mode", {
     form: form,
     preserve: true
@@ -27,7 +28,6 @@ var Actions = function Actions(_ref) {
   var showActions = useMemo(function () {
     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;
   }, [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]);
-  var isMobileBool = isMobile();
   return showActions ? /*#__PURE__*/React.createElement("div", {
     className: "materials-grid-actions"
   }, /*#__PURE__*/React.createElement("div", {
@@ -36,7 +36,8 @@ var Actions = function Actions(_ref) {
     filter: filter,
     isRenderFormContent: false,
     tableId: tableId,
-    viewMode: viewMode
+    viewMode: viewMode,
+    isMobile: isMobileBool
   })), /*#__PURE__*/React.createElement("div", {
     className: "right-wrap",
     style: {

package/es/components/table/Table/utils.d.ts

@@ -146,7 +146,7 @@ export declare const getSettingKeyArrByMode: ({ filter, columnSetting, dataSourc
     sort?: SortType | undefined;
     mode: "" | "localStorage" | "remote";
     currentViewMode: ModeType;
-}) => ("view_mode" | "column_setting" | "order_by" | "group_by" | "gallery_setting" | "filter_setting")[];
+}) => ("filter_setting" | "column_setting" | "gallery_setting" | "view_mode" | "group_by" | "order_by")[];
 export declare const omit: (obj: Record<string, any>, keys: string[]) => Record<string, any>;
 export declare const stringify: (obj: Record<string, any>) => string;
 export {};

package/es/components/table/hooks/useIsMobileTable.d.ts

@@ -0,0 +1,2 @@
+declare const useIsMobileTable: () => boolean;
+export default useIsMobileTable;

package/es/components/table/hooks/useIsMobileTable.js

@@ -0,0 +1,9 @@
+import { useSharedState } from "../../../hooks";
+import { Context } from "../model";
+var useIsMobileTable = function useIsMobileTable() {
+  var modal = useSharedState(Context);
+  var _ref = (modal === null || modal === void 0 ? void 0 : modal.state) || {},
+    tableWidth = _ref.tableWidth;
+  return !!(tableWidth && (tableWidth || 0) < 600);
+};
+export default useIsMobileTable;

package/es/components/table/index.js

@@ -16,6 +16,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { useEffect, useImperativeHandle, useMemo, forwardRef, useRef } from "react";
 import { Form } from "antd";
+import { useSize } from "ahooks";
 import View from "./View";
 import Header from "./Header";
 import Actions from "./Actions";
@@ -70,6 +71,8 @@ var GridView = Provider( /*#__PURE__*/forwardRef(function (props, ref) {
   var tableSettingRef = useRef({});
   var filterDefaultRef = useRef({});
   var initialValuesRef = useRef({});
+  var _ref = useSize(wrapRef) || {},
+    width = _ref.width;
   var utils = context === null || context === void 0 ? void 0 : (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.utils;
   var tableId = useMemo(function () {
     if (props.__designMode === "design") {
@@ -116,6 +119,14 @@ var GridView = Provider( /*#__PURE__*/forwardRef(function (props, ref) {
       clearTableSettingToLocalStorage(tableId);
     }
   }, [currentSettingHash, tableId]);
+  useEffect(function () {
+    if (width) {
+      modal.dispatch({
+        type: "setTableWidth",
+        payload: width || {}
+      });
+    }
+  }, [width]);
   var _useTableSetting = useTableSetting({
       tableId: tableId,
       filter: filter,

package/es/components/table/model.d.ts

@@ -13,6 +13,7 @@ interface FormState {
     otherFilter: FilterItemProps[];
     utils: any;
     localPagination: boolean;
+    tableWidth: number;
 }
 export declare const Provider: (ComponentUi: any) => (props: any, ref: any) => import("react").JSX.Element, Context: import("react").Context<{
     state: FormState;

package/es/components/table/model.js

@@ -28,7 +28,8 @@ var defaultState = {
     data: {
       edit: 0
     }
-  }
+  },
+  tableWidth: 500
 };
 var _getContext = getContext({
     namespace: "state",
@@ -99,6 +100,11 @@ var _getContext = getContext({
         return _objectSpread(_objectSpread({}, state), {}, {
           localPagination: payload
         });
+      },
+      setTableWidth: function setTableWidth(state, payload) {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          tableWidth: payload
+        });
       }
     }
   }),

package/lib/components/Pagination/index.js

@@ -39,9 +39,9 @@ var import_ArrowRight = __toESM(require("@pisell/icon/es/ArrowRight"));
 var import_ArrowLeft = __toESM(require("@pisell/icon/es/ArrowLeft"));
 var import_antd = require("antd");
 var import_classnames = __toESM(require("classnames"));
-var import_hooks = require("../../hooks");
 var import_index = require("./index.less");
 var import_locales = require("../../locales");
+var import_useIsMobileTable = __toESM(require("../table/hooks/useIsMobileTable"));
 var itemRender = (_, type, originalElement) => {
   if (type === "prev") {
     return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("paginator-page-btn", "left") }, /* @__PURE__ */ import_react.default.createElement(import_ArrowLeft.default, { className: "paginator-page-btn-left-icon" }), /* @__PURE__ */ import_react.default.createElement("span", { className: "paginator-page-btn-text" }, (0, import_locales.getText)("table-pagination-previous")));
@@ -60,20 +60,20 @@ var paginationConfig = {
   size: "small"
 };
 var Pagination = (props) => {
-  const responsive = (0, import_hooks.useResponsive)();
   const show = (0, import_react.useMemo)(() => {
     return Object.keys(props).length;
   }, [props]);
+  const isMiniPagination = (0, import_useIsMobileTable.default)();
   const content = (0, import_react.useMemo)(() => {
     if (!show) {
       return null;
     }
     let Com = import_antd.Pagination;
-    if (responsive === "phone" || responsive === "ipad") {
+    if (isMiniPagination) {
       Com = MiniPagination;
     }
     return /* @__PURE__ */ import_react.default.createElement(Com, { ...paginationConfig, ...props });
-  }, [show, paginationConfig, props, responsive]);
+  }, [show, paginationConfig, props, isMiniPagination]);
   return content;
 };
 var Pagination_default = Pagination;

package/lib/components/drawer/index.js

@@ -34,26 +34,78 @@ __export(drawer_exports, {
 module.exports = __toCommonJS(drawer_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
+var import_ahooks = require("ahooks");
+var import_classnames = __toESM(require("classnames"));
+var import_utils = require("@pisell/utils");
 var import_XClose = __toESM(require("@pisell/icon/es/XClose"));
+var import_Pin02 = __toESM(require("@pisell/icon/es/Pin02"));
 var import_index = require("./index.less");
 var prefix = "pisell-lowcode-";
 var Title = (props) => {
-  const { placement, onClose } = props;
+  const { placement, onClose, showPin, persistentState, setPersistentState } = props;
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
       className: `${prefix}drawer-outside-wrap ${prefix}drawer-outside-wrap-${placement}`
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}drawer-outside-action-wrap`, onClick: onClose }, /* @__PURE__ */ import_react.default.createElement(import_XClose.default, null))
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}drawer-outside-action-wrap`, onClick: onClose }, /* @__PURE__ */ import_react.default.createElement(import_XClose.default, null)),
+    showPin && /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: (0, import_classnames.default)(`${prefix}drawer-outside-action-wrap`, {
+          [`${prefix}drawer-outside-action-active`]: persistentState
+        }),
+        onClick: () => setPersistentState(!persistentState)
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_Pin02.default, null)
+    )
   );
 };
 var Drawer = (props) => {
   const { others, ...resetProps } = props;
-  const { operateMode, headerStyle, placement, onClose } = props;
+  const {
+    operateMode,
+    headerStyle,
+    placement,
+    onClose,
+    showPin,
+    width,
+    getContainer,
+    open
+  } = props;
+  const [persistentState, setPersistentState] = (0, import_ahooks.useControllableValue)(
+    props,
+    {
+      trigger: "onPersistentChange",
+      valuePropName: "persistent"
+    }
+  );
+  const currentDrawerId = props.__id;
+  const storageKey = `drawer-${currentDrawerId}`;
   const innerProps = {};
   if (props.__designMode === "design") {
     innerProps.open = true;
   }
+  (0, import_react.useLayoutEffect)(() => {
+    if ((0, import_utils.isBoolean)(persistentState) && (0, import_utils.isUndefined)(getContainer) && showPin) {
+      document.body.style.transition = "all 0.3s";
+      document.body.style[`padding-${placement}`] = persistentState && open ? `${width || 378}px` : "0";
+    }
+    return () => {
+      document.body.style[`padding-${placement}`] = "0";
+      document.body.style.transition = "none";
+    };
+  }, [persistentState, width, showPin, placement, open]);
+  (0, import_ahooks.useUpdateEffect)(() => {
+    if ((0, import_utils.isBoolean)(persistentState) && showPin) {
+      localStorage.setItem(storageKey, `${persistentState}`);
+    }
+  }, [persistentState, storageKey, showPin]);
+  (0, import_react.useLayoutEffect)(() => {
+    if (!(0, import_utils.isBoolean)(persistentState) && showPin) {
+      setPersistentState(localStorage.getItem(storageKey) === "true");
+    }
+  }, [persistentState, storageKey, showPin]);
   const otherProps = (0, import_react.useMemo)(() => {
     if (operateMode === "outside") {
       return {
@@ -62,11 +114,20 @@ var Drawer = (props) => {
           height: 0,
           padding: 0
         },
-        title: /* @__PURE__ */ import_react.default.createElement(Title, { placement, onClose })
+        title: /* @__PURE__ */ import_react.default.createElement(
+          Title,
+          {
+            placement,
+            onClose,
+            showPin,
+            persistentState,
+            setPersistentState
+          }
+        )
       };
     }
     return headerStyle;
-  }, [operateMode, placement, onClose]);
+  }, [operateMode, placement, onClose, persistentState, setPersistentState]);
   return /* @__PURE__ */ import_react.default.createElement(
     import_antd.Drawer,
     {

package/lib/components/drawer/index.less

@@ -31,4 +31,7 @@
       font-size: 20px;
     }
   }
+  &-drawer-outside-action-active {
+    background: var(--Primary-200, #E9D7FE) !important;
+  }
 }

package/lib/components/filter/index.js

@@ -36,13 +36,11 @@ var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_FilterButton = __toESM(require("./components/FilterButton"));
 var import_QuickFilter = __toESM(require("./components/QuickFilter"));
-var import_platform = require("../../utils/platform");
 var formFiltersPrefix = "filters";
 var Filter = (props) => {
-  const { filter, isRenderFormContent = true, onValuesChange } = props;
+  const { filter, isRenderFormContent = true, onValuesChange, isMobile: isMobileBool } = props;
   const { show, quickFilterMaxLength, sortButtonShow, list } = filter || {};
   const [form] = import_antd.Form.useForm();
-  const isMobileBool = (0, import_platform.isMobile)();
   const isShowQuickFilter = (0, import_react.useMemo)(() => {
     if (isMobileBool && show && sortButtonShow) {
       return false;

package/lib/components/filter/types.d.ts

@@ -38,4 +38,5 @@ export interface FilterProps {
     onValuesChange?: () => void;
     tableId?: string;
     viewMode?: ModeType;
+    isMobile?: boolean;
 }

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

@@ -42,7 +42,7 @@ var import_Buttons = __toESM(require("../Header/Buttons"));
 var import_ViewMode = __toESM(require("./component/ViewMode"));
 var import_GallerySetting = __toESM(require("./component/GallerySetting"));
 var import_index = require("./index.less");
-var import_platform = require("../../../utils/platform");
+var import_useIsMobileTable = __toESM(require("../hooks/useIsMobileTable"));
 var Actions = ({
   filter,
   sort,
@@ -55,6 +55,7 @@ var Actions = ({
   gallery
 }) => {
   const form = import_antd.Form.useFormInstance();
+  const isMobileBool = (0, import_useIsMobileTable.default)();
   const viewMode = import_antd.Form.useWatch("view_mode", {
     form,
     preserve: true
@@ -68,14 +69,14 @@ var Actions = ({
     dataSourceGroup == null ? void 0 : dataSourceGroup.show,
     view.multiple
   ]);
-  const isMobileBool = (0, import_platform.isMobile)();
   return showActions ? /* @__PURE__ */ import_react.default.createElement("div", { className: "materials-grid-actions" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "left-wrap" }, /* @__PURE__ */ import_react.default.createElement(
     import_filter.default,
     {
       filter,
       isRenderFormContent: false,
       tableId,
-      viewMode
+      viewMode,
+      isMobile: isMobileBool
     }
   )), /* @__PURE__ */ import_react.default.createElement(
     "div",

package/lib/components/table/Table/utils.d.ts

@@ -146,7 +146,7 @@ export declare const getSettingKeyArrByMode: ({ filter, columnSetting, dataSourc
     sort?: SortType | undefined;
     mode: "" | "localStorage" | "remote";
     currentViewMode: ModeType;
-}) => ("view_mode" | "column_setting" | "order_by" | "group_by" | "gallery_setting" | "filter_setting")[];
+}) => ("filter_setting" | "column_setting" | "gallery_setting" | "view_mode" | "group_by" | "order_by")[];
 export declare const omit: (obj: Record<string, any>, keys: string[]) => Record<string, any>;
 export declare const stringify: (obj: Record<string, any>) => string;
 export {};

package/lib/components/table/hooks/useIsMobileTable.d.ts

@@ -0,0 +1,2 @@
+declare const useIsMobileTable: () => boolean;
+export default useIsMobileTable;

package/lib/components/table/hooks/useIsMobileTable.js

@@ -0,0 +1,32 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/table/hooks/useIsMobileTable.ts
+var useIsMobileTable_exports = {};
+__export(useIsMobileTable_exports, {
+  default: () => useIsMobileTable_default
+});
+module.exports = __toCommonJS(useIsMobileTable_exports);
+var import_hooks = require("../../../hooks");
+var import_model = require("../model");
+var useIsMobileTable = () => {
+  const modal = (0, import_hooks.useSharedState)(import_model.Context);
+  const { tableWidth } = (modal == null ? void 0 : modal.state) || {};
+  return !!(tableWidth && (tableWidth || 0) < 600);
+};
+var useIsMobileTable_default = useIsMobileTable;

package/lib/components/table/index.js

@@ -34,6 +34,7 @@ __export(table_exports, {
 module.exports = __toCommonJS(table_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
+var import_ahooks = require("ahooks");
 var import_View = __toESM(require("./View"));
 var import_Header = __toESM(require("./Header"));
 var import_Actions = __toESM(require("./Actions"));
@@ -85,6 +86,7 @@ var GridView = (0, import_model.Provider)(
     const tableSettingRef = (0, import_react.useRef)({});
     const filterDefaultRef = (0, import_react.useRef)({});
     const initialValuesRef = (0, import_react.useRef)({});
+    const { width } = (0, import_ahooks.useSize)(wrapRef) || {};
     const utils = (_a = context == null ? void 0 : context.appHelper) == null ? void 0 : _a.utils;
     const tableId = (0, import_react.useMemo)(() => {
       if (props.__designMode === "design") {
@@ -129,6 +131,14 @@ var GridView = (0, import_model.Provider)(
         (0, import_utils.clearTableSettingToLocalStorage)(tableId);
       }
     }, [currentSettingHash, tableId]);
+    (0, import_react.useEffect)(() => {
+      if (width) {
+        modal.dispatch({
+          type: "setTableWidth",
+          payload: width || {}
+        });
+      }
+    }, [width]);
     const { setTableSetting, tableSetting } = (0, import_useTableSetting.default)({
       tableId,
       filter,

package/lib/components/table/model.d.ts

@@ -13,6 +13,7 @@ interface FormState {
     otherFilter: FilterItemProps[];
     utils: any;
     localPagination: boolean;
+    tableWidth: number;
 }
 export declare const Provider: (ComponentUi: any) => (props: any, ref: any) => import("react").JSX.Element, Context: import("react").Context<{
     state: FormState;

package/lib/components/table/model.js

@@ -58,7 +58,8 @@ var defaultState = {
     data: {
       edit: 0
     }
-  }
+  },
+  tableWidth: 500
 };
 var { Provider, Context } = (0, import_miniRedux.default)({
   namespace: "state",
@@ -110,6 +111,9 @@ var { Provider, Context } = (0, import_miniRedux.default)({
     },
     setLocalPagination(state, payload) {
       return { ...state, localPagination: payload };
+    },
+    setTableWidth(state, payload) {
+      return { ...state, tableWidth: payload };
     }
   }
 });