@pisell/materials 1.0.233 → 1.0.235

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

@@ -1,10 +1,12 @@
 .filter-dropdown-wrap {
   width: 400px;
-  max-width: calc(100vw - 24px);
   min-width: 250px;
   padding: 4px;
   display: flex;
   flex-direction: column;
+  max-height: 60vh;
+  max-width: 80vw;
+  overflow: auto;
   .filter-dropdown-wrap-content {
     flex: 1;
   }

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

@@ -9,6 +9,7 @@ import { Button, Popover } from "antd";
 import FilterLines from "@pisell/icon/es/FilterLines";
 import Dropdown from "../Dropdown";
 import { getText } from "../../../../locales";
+import { isMobile } from "../../../../utils/platform";
 var Filter = function Filter(_ref) {
   var value = _ref.value,
     onChange = _ref.onChange,
@@ -33,6 +34,7 @@ var Filter = function Filter(_ref) {
       formFiltersPrefix: formFiltersPrefix
     });
   }, [quickFilter, otherFilter, quickFilterMaxLength, formFiltersPrefix]);
+  var isMobileBool = isMobile();
   return /*#__PURE__*/React.createElement("div", {
     ref: ref
   }, /*#__PURE__*/React.createElement(Popover, {
@@ -45,6 +47,6 @@ var Filter = function Filter(_ref) {
   }, /*#__PURE__*/React.createElement(Button, {
     icon: /*#__PURE__*/React.createElement(FilterLines, null),
     size: "large"
-  }, getText("table-action-filter-button"))));
+  }, isMobileBool ? null : getText("table-action-filter-button"))));
 };
 export default Filter;

package/es/components/filter/index.js

@@ -2,6 +2,7 @@ import React 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,
@@ -13,7 +14,7 @@ var Filter = function Filter(props) {
     quickFilterMaxLength = _ref.quickFilterMaxLength,
     sortButtonShow = _ref.sortButtonShow,
     list = _ref.list;
-  var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form.Item, {
+  var content = /*#__PURE__*/React.createElement(React.Fragment, null, !isMobile() && /*#__PURE__*/React.createElement(Form.Item, {
     name: "filter_setting",
     noStyle: true
   }, /*#__PURE__*/React.createElement(QuickFilter, {

package/es/components/sort/index.js

@@ -105,7 +105,7 @@ var Sort = function Sort(_ref2) {
       style: style,
       className: classNames(_defineProperty({}, "".concat(prefix, "sort-button-active"), !!value)),
       size: "large"
-    }, getText("sort-button-text"));
+    }, isMobile() ? null : getText("sort-button-text"));
   }, [button, style, value]);
   var content = useMemo(function () {
     return /*#__PURE__*/React.createElement(InlineMenu, {

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

@@ -8,6 +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";
 var Actions = function Actions(_ref) {
   var filter = _ref.filter,
     sort = _ref.sort,
@@ -26,6 +27,7 @@ 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 +38,10 @@ var Actions = function Actions(_ref) {
     tableId: tableId,
     viewMode: viewMode
   })), /*#__PURE__*/React.createElement("div", {
-    className: "right-wrap"
+    className: "right-wrap",
+    style: {
+      gap: isMobileBool ? 0 : 12
+    }
   }, view.multiple && /*#__PURE__*/React.createElement(Form.Item, {
     name: "view_mode",
     noStyle: true
@@ -60,7 +65,10 @@ var Actions = function Actions(_ref) {
     list: (sort === null || sort === void 0 ? void 0 : sort.list) || [],
     localPagination: localPagination
   })) : null, !!(buttons !== null && buttons !== void 0 && buttons.length) && /*#__PURE__*/React.createElement(Buttons, {
-    list: buttons
+    list: buttons,
+    style: isMobileBool ? {
+      marginLeft: 8
+    } : {}
   }))) : null;
 };
 export default Actions;

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

@@ -9,6 +9,7 @@ import { FixedSizeGrid as Grid } from "react-window";
 import AutoSizer from "react-virtualized-auto-sizer";
 import useGenGridProps from "./useGenGridProps";
 import useGapSize from "./useGapSize";
+import { Empty } from "antd";
 var Cell = function Cell(props) {
   var columnIndex = props.columnIndex,
     rowIndex = props.rowIndex,
@@ -92,6 +93,14 @@ var VirtualGrid = function VirtualGrid(props) {
     rowHeight = props.rowHeight,
     _props$paddingTop = props.paddingTop,
     paddingTop = _props$paddingTop === void 0 ? 0 : _props$paddingTop;
+  if (dataSource.length === 0) {
+    return /*#__PURE__*/React.createElement(Empty, {
+      style: {
+        marginTop: 32
+      },
+      image: Empty.PRESENTED_IMAGE_SIMPLE
+    });
+  }
   return /*#__PURE__*/React.createElement(AutoSizer, null, function (_ref) {
     var height = _ref.height,
       width = _ref.width;

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

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

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

@@ -1,3 +1,3 @@
 import "./index.less";
-declare const Buttons: ({ list }: any) => any;
+declare const Buttons: ({ list, style }: any) => any;
 export default Buttons;

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

@@ -1,10 +1,20 @@
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { 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 from "react";
 import { Button } from "antd";
 import "./index.less";
 var Buttons = function Buttons(_ref) {
-  var list = _ref.list;
+  var list = _ref.list,
+    style = _ref.style;
   return (list || []).map(function (d) {
-    return /*#__PURE__*/React.createElement(Button, d, d.title);
+    return /*#__PURE__*/React.createElement(Button, _extends({}, d, {
+      style: _objectSpread(_objectSpread({}, d.style || {}), style || {})
+    }), d.title);
   });
 };
 export default Buttons;

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

@@ -146,6 +146,6 @@ export declare const getSettingKeyArrByMode: ({ filter, columnSetting, dataSourc
     sort?: SortType | undefined;
     mode: "" | "localStorage" | "remote";
     currentViewMode: ModeType;
-}) => ("column_setting" | "gallery_setting" | "filter_setting" | "view_mode" | "group_by" | "order_by")[];
+}) => ("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 {};

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

@@ -5,6 +5,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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 { useMemo } from "react";
+import { isMobile } from "../../../utils/platform";
 var useTransFilterSetting = function useTransFilterSetting(params) {
   var filter = params.filter,
     originColumnsMap = params.originColumnsMap;
@@ -23,7 +24,8 @@ var useTransFilterSetting = function useTransFilterSetting(params) {
           }
           return _objectSpread(_objectSpread({}, item), {}, {
             name: name,
-            label: label
+            label: label,
+            sort: isMobile() ? true : item.sort
           });
         })
       });

package/lib/components/filter/components/Dropdown/index.less

@@ -1,10 +1,12 @@
 .filter-dropdown-wrap {
   width: 400px;
-  max-width: calc(100vw - 24px);
   min-width: 250px;
   padding: 4px;
   display: flex;
   flex-direction: column;
+  max-height: 60vh;
+  max-width: 80vw;
+  overflow: auto;
   .filter-dropdown-wrap-content {
     flex: 1;
   }

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

@@ -37,6 +37,7 @@ var import_antd = require("antd");
 var import_FilterLines = __toESM(require("@pisell/icon/es/FilterLines"));
 var import_Dropdown = __toESM(require("../Dropdown"));
 var import_locales = require("../../../../locales");
+var import_platform = require("../../../../utils/platform");
 var Filter = ({
   value,
   onChange,
@@ -65,6 +66,7 @@ var Filter = ({
       }
     );
   }, [quickFilter, otherFilter, quickFilterMaxLength, formFiltersPrefix]);
+  const isMobileBool = (0, import_platform.isMobile)();
   return /* @__PURE__ */ import_react.default.createElement("div", { ref }, /* @__PURE__ */ import_react.default.createElement(
     import_antd.Popover,
     {
@@ -73,7 +75,7 @@ var Filter = ({
       arrow: false,
       getPopupContainer: () => ref.current
     },
-    /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { icon: /* @__PURE__ */ import_react.default.createElement(import_FilterLines.default, null), size: "large" }, (0, import_locales.getText)("table-action-filter-button"))
+    /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { icon: /* @__PURE__ */ import_react.default.createElement(import_FilterLines.default, null), size: "large" }, isMobileBool ? null : (0, import_locales.getText)("table-action-filter-button"))
   ));
 };
 var FilterButton_default = Filter;

package/lib/components/filter/index.js

@@ -36,11 +36,17 @@ 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 { show, quickFilterMaxLength, sortButtonShow, list } = filter || {};
-  const content = /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "filter_setting", noStyle: true }, /* @__PURE__ */ import_react.default.createElement(import_QuickFilter.default, { formFiltersPrefix: isRenderFormContent ? "" : formFiltersPrefix })), show && sortButtonShow ? /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "filter_setting", noStyle: true }, /* @__PURE__ */ import_react.default.createElement(
+  const content = /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, !(0, import_platform.isMobile)() && /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "filter_setting", noStyle: true }, /* @__PURE__ */ import_react.default.createElement(
+    import_QuickFilter.default,
+    {
+      formFiltersPrefix: isRenderFormContent ? "" : formFiltersPrefix
+    }
+  )), show && sortButtonShow ? /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "filter_setting", noStyle: true }, /* @__PURE__ */ import_react.default.createElement(
     import_FilterButton.default,
     {
       formFiltersPrefix,

package/lib/components/sort/index.js

@@ -125,7 +125,7 @@ var Sort = ({
         }),
         size: "large"
       },
-      (0, import_locales.getText)("sort-button-text")
+      (0, import_platform.isMobile)() ? null : (0, import_locales.getText)("sort-button-text")
     );
   }, [button, style, value]);
   const content = (0, import_react.useMemo)(() => {

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

@@ -42,6 +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 Actions = ({
   filter,
   sort,
@@ -67,6 +68,7 @@ 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,
     {
@@ -75,6 +77,26 @@ var Actions = ({
       tableId,
       viewMode
     }
-  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "right-wrap" }, view.multiple && /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "view_mode", noStyle: true }, /* @__PURE__ */ import_react.default.createElement(import_ViewMode.default, { view })), (dataSourceGroup == null ? void 0 : dataSourceGroup.show) && viewMode === "grid" && /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "group_by", noStyle: true }, /* @__PURE__ */ import_react.default.createElement(import_Group.default, { setting: dataSourceGroup })), (columnSetting == null ? void 0 : columnSetting.show) && viewMode === "grid" && /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: ["column_setting"], noStyle: true }, /* @__PURE__ */ import_react.default.createElement(import_ColumnsSetting.default, null)), (columnSetting == null ? void 0 : columnSetting.show) && viewMode === "gallery" && /* @__PURE__ */ import_react.default.createElement(import_GallerySetting.default, { setting: gallery, currentViewMode: viewMode }), (sort == null ? void 0 : sort.show) ? /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "order_by", noStyle: true }, /* @__PURE__ */ import_react.default.createElement(import_sort.default, { list: (sort == null ? void 0 : sort.list) || [], localPagination })) : null, !!(buttons == null ? void 0 : buttons.length) && /* @__PURE__ */ import_react.default.createElement(import_Buttons.default, { list: buttons }))) : null;
+  )), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "right-wrap",
+      style: {
+        gap: isMobileBool ? 0 : 12
+      }
+    },
+    view.multiple && /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "view_mode", noStyle: true }, /* @__PURE__ */ import_react.default.createElement(import_ViewMode.default, { view })),
+    (dataSourceGroup == null ? void 0 : dataSourceGroup.show) && viewMode === "grid" && /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "group_by", noStyle: true }, /* @__PURE__ */ import_react.default.createElement(import_Group.default, { setting: dataSourceGroup })),
+    (columnSetting == null ? void 0 : columnSetting.show) && viewMode === "grid" && /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: ["column_setting"], noStyle: true }, /* @__PURE__ */ import_react.default.createElement(import_ColumnsSetting.default, null)),
+    (columnSetting == null ? void 0 : columnSetting.show) && viewMode === "gallery" && /* @__PURE__ */ import_react.default.createElement(import_GallerySetting.default, { setting: gallery, currentViewMode: viewMode }),
+    (sort == null ? void 0 : sort.show) ? /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: "order_by", noStyle: true }, /* @__PURE__ */ import_react.default.createElement(import_sort.default, { list: (sort == null ? void 0 : sort.list) || [], localPagination })) : null,
+    !!(buttons == null ? void 0 : buttons.length) && /* @__PURE__ */ import_react.default.createElement(
+      import_Buttons.default,
+      {
+        list: buttons,
+        style: isMobileBool ? { marginLeft: 8 } : {}
+      }
+    )
+  )) : null;
 };
 var Actions_default = Actions;

package/lib/components/table/Gallery/components/VirtualGrid/index.js

@@ -37,6 +37,7 @@ var import_react_window = require("react-window");
 var import_react_virtualized_auto_sizer = __toESM(require("react-virtualized-auto-sizer"));
 var import_useGenGridProps = __toESM(require("./useGenGridProps"));
 var import_useGapSize = __toESM(require("./useGapSize"));
+var import_antd = require("antd");
 var Cell = (props) => {
   const { columnIndex, rowIndex, style, isScrolling, data } = props;
   const { renderItem, gap, columnCount, dataSource, paddingTop } = data;
@@ -117,6 +118,9 @@ var VirtualGrid = (props) => {
     rowHeight,
     paddingTop = 0
   } = props;
+  if (dataSource.length === 0) {
+    return /* @__PURE__ */ import_react.default.createElement(import_antd.Empty, { style: { marginTop: 32 }, image: import_antd.Empty.PRESENTED_IMAGE_SIMPLE });
+  }
   return /* @__PURE__ */ import_react.default.createElement(import_react_virtualized_auto_sizer.default, null, ({ height, width }) => /* @__PURE__ */ import_react.default.createElement(
     GridComponent,
     {

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

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

package/lib/components/table/Header/Buttons/index.d.ts

@@ -1,3 +1,3 @@
 import "./index.less";
-declare const Buttons: ({ list }: any) => any;
+declare const Buttons: ({ list, style }: any) => any;
 export default Buttons;

package/lib/components/table/Header/Buttons/index.js

@@ -35,9 +35,9 @@ module.exports = __toCommonJS(Buttons_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_index = require("./index.less");
-var Buttons = ({ list }) => {
+var Buttons = ({ list, style }) => {
   return (list || []).map((d) => {
-    return /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { ...d }, d.title);
+    return /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { ...d, style: { ...d.style || {}, ...style || {} } }, d.title);
   });
 };
 var Buttons_default = Buttons;

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

@@ -146,6 +146,6 @@ export declare const getSettingKeyArrByMode: ({ filter, columnSetting, dataSourc
     sort?: SortType | undefined;
     mode: "" | "localStorage" | "remote";
     currentViewMode: ModeType;
-}) => ("column_setting" | "gallery_setting" | "filter_setting" | "view_mode" | "group_by" | "order_by")[];
+}) => ("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 {};

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

@@ -23,6 +23,7 @@ __export(useTransFilterSetting_exports, {
 });
 module.exports = __toCommonJS(useTransFilterSetting_exports);
 var import_react = require("react");
+var import_platform = require("../../../utils/platform");
 var useTransFilterSetting = (params) => {
   const { filter, originColumnsMap } = params;
   return (0, import_react.useMemo)(() => {
@@ -39,7 +40,8 @@ var useTransFilterSetting = (params) => {
           return {
             ...item,
             name,
-            label
+            label,
+            sort: (0, import_platform.isMobile)() ? true : item.sort
           };
         })
       };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "1.0.233",
+  "version": "1.0.235",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -64,7 +64,7 @@
     "crypto-js": "^4.2.0",
     "@pisell/utils": "1.0.23",
     "@pisell/icon": "0.0.8",
-    "@pisell/date-picker": "1.0.68"
+    "@pisell/date-picker": "1.0.69"
   },
   "peerDependencies": {
     "react": "^18.0.0",