@pisell/materials 1.0.283 → 1.0.285

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

@@ -5,7 +5,7 @@ export declare const paginationConfig: {
     className: string;
     defaultCurrent: number;
     showTotal: (total: number, range: [number, number]) => string;
-    itemRender: (page: number, type: "page" | "next" | "prev" | "jump-prev" | "jump-next", element: React.ReactNode) => React.ReactNode;
+    itemRender: (page: number, type: "next" | "page" | "prev" | "jump-prev" | "jump-next", element: React.ReactNode) => React.ReactNode;
     responsive: boolean;
     size: string;
 };

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/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

@@ -158,7 +158,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") {
@@ -128,6 +131,14 @@ var GridView = Provider( /*#__PURE__*/forwardRef(function (props, ref) {
       */
     }
   }, [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.d.ts

@@ -5,7 +5,7 @@ export declare const paginationConfig: {
     className: string;
     defaultCurrent: number;
     showTotal: (total: number, range: [number, number]) => string;
-    itemRender: (page: number, type: "page" | "next" | "prev" | "jump-prev" | "jump-next", element: React.ReactNode) => React.ReactNode;
+    itemRender: (page: number, type: "next" | "page" | "prev" | "jump-prev" | "jump-next", element: React.ReactNode) => React.ReactNode;
     responsive: boolean;
     size: string;
 };

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/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

@@ -158,7 +158,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 };
     }
   }
 });

package/lowcode/drawer/meta.ts

@@ -226,7 +226,7 @@ export default {
             name: 'showPin',
             title: { label: '展示pin按钮', tip: 'showPin | 展示pin按钮, 点击可以展示和内容并列展示' },
             propType: 'bool',
-            defaultValue: true,
+            defaultValue: false,
             setter: 'BoolSetter',
           },
           {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "1.0.283",
+  "version": "1.0.285",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",