@pisell/materials 1.0.215 → 1.0.217

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

@@ -1,28 +1,66 @@
 import React, { useMemo } from "react";
-import Filter from "../../filter";
 import { Form } from "antd";
-import Sort from "./Sort";
+import Filter from "../../filter";
+import Sort from "../../sort";
+import ColumnsSetting from "./component/ColumnsSetting";
+import Group from "./component/Group";
+import Buttons from "../Header/Buttons";
+import ViewMode from "./component/ViewMode";
+import GallerySetting from "./component/GallerySetting";
 import "./index.less";
 var Actions = function Actions(_ref) {
   var filter = _ref.filter,
-    sort = _ref.sort;
+    sort = _ref.sort,
+    columnSetting = _ref.columnSetting,
+    dataSourceGroup = _ref.dataSourceGroup,
+    tableId = _ref.tableId,
+    localPagination = _ref.localPagination,
+    buttons = _ref.buttons,
+    view = _ref.view,
+    gallery = _ref.gallery;
+  var form = Form.useFormInstance();
+  var viewMode = Form.useWatch("view_mode", {
+    form: form,
+    preserve: true
+  });
   var showActions = useMemo(function () {
-    return (filter === null || filter === void 0 ? void 0 : filter.show) || (sort === null || sort === void 0 ? void 0 : sort.show);
-  }, [filter === null || filter === void 0 ? void 0 : filter.show, sort === null || sort === void 0 ? void 0 : sort.show]);
+    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]);
   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
+    isRenderFormContent: false,
+    tableId: tableId,
+    viewMode: viewMode
   })), /*#__PURE__*/React.createElement("div", {
     className: "right-wrap"
-  }, sort !== null && sort !== void 0 && sort.show ? /*#__PURE__*/React.createElement(Form.Item, {
+  }, view.multiple && /*#__PURE__*/React.createElement(Form.Item, {
+    name: "view_mode",
+    noStyle: true
+  }, /*#__PURE__*/React.createElement(ViewMode, {
+    view: view
+  })), (dataSourceGroup === null || dataSourceGroup === void 0 ? void 0 : dataSourceGroup.show) && viewMode === "grid" && /*#__PURE__*/React.createElement(Form.Item, {
+    name: "group_by",
+    noStyle: true
+  }, /*#__PURE__*/React.createElement(Group, {
+    setting: dataSourceGroup
+  })), (columnSetting === null || columnSetting === void 0 ? void 0 : columnSetting.show) && viewMode === "grid" && /*#__PURE__*/React.createElement(Form.Item, {
+    name: ["column_setting"],
+    noStyle: true
+  }, /*#__PURE__*/React.createElement(ColumnsSetting, null)), (columnSetting === null || columnSetting === void 0 ? void 0 : columnSetting.show) && viewMode === "gallery" && /*#__PURE__*/React.createElement(GallerySetting, {
+    setting: gallery,
+    currentViewMode: viewMode
+  }), sort !== null && sort !== void 0 && sort.show ? /*#__PURE__*/React.createElement(Form.Item, {
     name: "order_by",
     noStyle: true
   }, /*#__PURE__*/React.createElement(Sort, {
-    list: (sort === null || sort === void 0 ? void 0 : sort.list) || []
-  })) : null)) : null;
+    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
+  }))) : null;
 };
 export default Actions;

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

@@ -1,6 +1,6 @@
 .materials-grid-actions {
   display: flex;
-  align-items: center;
+  align-items: start;
   justify-content: space-between;
   margin-bottom: 16px;
   gap: 16px;
@@ -8,7 +8,8 @@
   .left-wrap {
     flex: 1;
     display: flex;
-    align-items: center;
+    align-items: start;
+    gap: 8px;
 
     .pisell-lowcode-form-item {
       margin-bottom: 0;
@@ -18,7 +19,7 @@
   .right-wrap {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 12px;
 
     .icon {
       cursor: pointer;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
 import { TableProps } from "antd";
-declare const BasicTable: (props: TableProps<any>) => JSX.Element;
+import React from "react";
+declare const BasicTable: (props: TableProps<any>) => React.JSX.Element;
 export default BasicTable;

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

@@ -1,5 +1,5 @@
 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); }
-var _excluded = ["dataSource", "pagination", "value"];
+var _excluded = ["dataSource", "pagination", "value", "virtual"];
 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; }
@@ -23,6 +23,7 @@ var BasicTable = function BasicTable(props) {
   var dataSource = props.dataSource,
     pagination = props.pagination,
     value = props.value,
+    virtual = props.virtual,
     other = _objectWithoutProperties(props, _excluded);
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
@@ -78,7 +79,20 @@ var BasicTable = function BasicTable(props) {
     }
     return (pagination === null || pagination === void 0 ? void 0 : pagination.total) || (_dataSource === null || _dataSource === void 0 ? void 0 : _dataSource.total) || 0;
   }, [_dataSource, pagination, localPagination]);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Table, _extends({}, other, {
+  var defaultExpandedRowKeys = useMemo(function () {
+    var _dataSource$list;
+    var _expandedRowKeys = [];
+    _dataSource === null || _dataSource === void 0 ? void 0 : (_dataSource$list = _dataSource.list) === null || _dataSource$list === void 0 ? void 0 : _dataSource$list.forEach(function (item) {
+      if (item.__is_group) {
+        _expandedRowKeys.push(item["__rowKey"]);
+      }
+    });
+    return _expandedRowKeys;
+  }, [_dataSource === null || _dataSource === void 0 ? void 0 : _dataSource.list]);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Table, _extends({
+    key: defaultExpandedRowKeys.join("-")
+  }, other, {
+    virtual: virtual,
     onChange: function onChange(pagination, filters, sorter) {
       form.setFieldsValue({
         pagination: _objectSpread(_objectSpread({}, formPagination), {}, {
@@ -89,7 +103,17 @@ var BasicTable = function BasicTable(props) {
       setSort(sorter);
     },
     pagination: false,
-    dataSource: _dataSource === null || _dataSource === void 0 ? void 0 : _dataSource.list
+    dataSource: _dataSource.list,
+    onRow: function onRow(record, index) {
+      var _other$onRow;
+      return _objectSpread(_objectSpread({}, (other === null || other === void 0 ? void 0 : (_other$onRow = other.onRow) === null || _other$onRow === void 0 ? void 0 : _other$onRow.call(other, record, index)) || {}), {}, {
+        __is_group: record.__is_group,
+        className: record.__is_group ? "pisell-lowcode-table-group-row-wrap" : ""
+      });
+    },
+    expandable: {
+      defaultExpandAllRows: true
+    }
   })), total > ((pagination === null || pagination === void 0 ? void 0 : (_pagination$pageSizeO = pagination.pageSizeOptions) === null || _pagination$pageSizeO === void 0 ? void 0 : _pagination$pageSizeO[0]) || 10) ? /*#__PURE__*/React.createElement(Form.Item, {
     name: "pagination"
   }, /*#__PURE__*/React.createElement(FormPagination, _extends({}, pagination, {

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { GallerySettingType, GallerySettingValueType } from "../../../../../types";
+declare type CoverProps = {
+    cover?: GallerySettingType["cover"];
+    record: Record<string, any>;
+    coverField: GallerySettingValueType["coverField"];
+    coverObjectFit: GallerySettingValueType["coverObjectFit"];
+};
+declare const Cover: (props: CoverProps) => React.JSX.Element;
+export default Cover;

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

@@ -0,0 +1,26 @@
+import React, { useMemo } from "react";
+import { Image } from "antd";
+import { getValueByKeys } from "../../../../../Table/fields/utils";
+var Cover = function Cover(props) {
+  var cover = props.cover,
+    record = props.record,
+    coverField = props.coverField,
+    coverObjectFit = props.coverObjectFit;
+  var _ref = cover || {},
+    height = _ref.height;
+  var imageHeight = useMemo(function () {
+    return height || 230;
+  }, [height]);
+  var src = getValueByKeys(record, coverField);
+  return /*#__PURE__*/React.createElement(Image, {
+    preview: false,
+    height: imageHeight,
+    width: "100%",
+    src: src,
+    fallback: "data:image/png;base64,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",
+    style: {
+      objectFit: coverObjectFit || "cover"
+    }
+  });
+};
+export default Cover;

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

@@ -0,0 +1,11 @@
+import React from "react";
+import "./index.less";
+declare type RenderFieldsProps = {
+    fields: string[];
+    columnsMap: Map<string, Record<string, any>>;
+    record: Record<string, any>;
+    showMode: "inline" | "block";
+    isShowLabel?: boolean;
+};
+declare const RenderFields: (props: RenderFieldsProps) => React.JSX.Element;
+export default RenderFields;

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

@@ -0,0 +1,46 @@
+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 _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, { useMemo } from "react";
+import classNames from "classnames";
+import { Tooltip } from "antd";
+import { isFunction } from "@pisell/utils";
+import { getValueByKeys } from "../../../../../Table/fields/utils";
+import "./index.less";
+var prefix = "pisell-lowcode-";
+var RenderFields = function RenderFields(props) {
+  var _classNames;
+  var fields = props.fields,
+    columnsMap = props.columnsMap,
+    showMode = props.showMode,
+    record = props.record,
+    isShowLabel = props.isShowLabel;
+  var fieldContent = useMemo(function () {
+    var fieldsList = fields.filter(function (item) {
+      return columnsMap.has(item);
+    }).map(function (field) {
+      var column = columnsMap.get(field);
+      var title = column.title;
+      var value = isFunction(column.render) ? column.render(getValueByKeys(record, column.dataIndex), record) : getValueByKeys(record, column.dataIndex);
+      var valueSpan = /*#__PURE__*/React.createElement("span", {
+        className: "".concat(prefix, "gallery-render-fields-item-value")
+      }, value);
+      var valueDom = isShowLabel ? valueSpan : /*#__PURE__*/React.createElement(Tooltip, {
+        title: title,
+        destroyTooltipOnHide: true
+      }, valueSpan);
+      return /*#__PURE__*/React.createElement("div", {
+        key: field,
+        className: "".concat(prefix, "gallery-render-fields-item-wrap")
+      }, isShowLabel && /*#__PURE__*/React.createElement("span", {
+        className: "".concat(prefix, "gallery-render-fields-item-label")
+      }, title), valueDom);
+    });
+    return fieldsList;
+  }, [fields, columnsMap, record, isShowLabel]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefix, "gallery-render-fields-wrap"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "gallery-render-fields-wrap-inline"), showMode === "inline"), _defineProperty(_classNames, "".concat(prefix, "gallery-render-fields-wrap-block"), showMode === "block"), _classNames))
+  }, fieldContent);
+};
+export default RenderFields;

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

@@ -0,0 +1,37 @@
+@pisell-prefix: pisell-lowcode;
+
+.@{pisell-prefix} {
+  &-gallery-render-fields-wrap {
+    display: flex;
+    padding: 0 22px;
+    gap: 16px;
+    &-inline {
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+    &-block {
+      flex-direction: column;
+    }
+  }
+  &-gallery-render-fields-item-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  &-gallery-render-fields-item-label {
+    color: rgba(0, 0, 0, 0.45);
+    &:after {
+      content: ":";
+      position: relative;
+      top: -0.5px;
+      margin:0 8px 0 2px;
+    }
+  }
+  &-gallery-render-fields-item-value {
+    color: rgba(0, 0, 0, 0.88);
+    //display: -webkit-box;
+    //overflow: hidden;
+    //-webkit-line-clamp: 2;
+    //-webkit-box-orient: vertical;
+  }
+}

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { GallerySettingType } from "../../../../../types";
+import "./index.less";
+declare type TitleProps = GallerySettingType["title"] & {
+    record: Record<string, any>;
+    columnsMap: Map<string, Record<string, any>>;
+};
+declare const Title: (props: TitleProps) => React.JSX.Element;
+export default Title;

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

@@ -0,0 +1,24 @@
+import React, { useMemo } from "react";
+import { getValueByKeys } from "../../../../../Table/fields/utils";
+import "./index.less";
+var prefix = "pisell-lowcode-";
+var Title = function Title(props) {
+  var line = props.line,
+    field = props.field,
+    record = props.record,
+    columnsMap = props.columnsMap;
+  var value = useMemo(function () {
+    var column = columnsMap.get(field);
+    if (column && column.dataIndex) {
+      return getValueByKeys(record, column.dataIndex);
+    }
+    return "-";
+  }, [columnsMap, record, field]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "gallery-item-title"),
+    style: {
+      WebkitLineClamp: line
+    }
+  }, value);
+};
+export default Title;

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

@@ -0,0 +1,17 @@
+@pisell-prefix: pisell-lowcode;
+
+.@{pisell-prefix} {
+  &-gallery-item-title {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    padding: 18px 22px 0;
+    color: var(--Base-Black, #000);
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 32px; /* 133.333% */
+    margin-bottom: 18px;
+  }
+}

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

@@ -0,0 +1,14 @@
+import React from "react";
+import { GallerySettingType, GallerySettingValueType } from "../../../types";
+import "./index.less";
+declare type GalleryItemProps = {
+    record: Record<string, any>;
+    gallery: GallerySettingType;
+    columnsMap: Map<string, Record<string, any>>;
+    index: number;
+    gallerySetting: GallerySettingValueType;
+    columns: Record<string, any>[];
+    onClick: React.MouseEventHandler<HTMLDivElement>;
+};
+declare const GalleryItem: (props: GalleryItemProps) => React.JSX.Element;
+export default GalleryItem;

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

@@ -0,0 +1,126 @@
+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, { useMemo } from "react";
+import { isFunction } from "@pisell/utils";
+import Cover from "./components/Cover";
+import Title from "./components/Title";
+import ClassicLayout from "../../../../classicLayout";
+import RenderFields from "./components/RenderFields";
+import "./index.less";
+var prefix = "pisell-lowcode-";
+var GalleryItem = function GalleryItem(props) {
+  var record = props.record,
+    gallery = props.gallery,
+    columnsMap = props.columnsMap,
+    index = props.index,
+    gallerySetting = props.gallerySetting,
+    columns = props.columns,
+    onClick = props.onClick;
+  var _ref = gallerySetting || {},
+    coverField = _ref.coverField,
+    coverObjectFit = _ref.coverObjectFit,
+    compactMode = _ref.compactMode,
+    propsIsShowLabel = _ref.isShowLabel;
+  var cover = gallery.cover,
+    title = gallery.title,
+    header = gallery.header,
+    content = gallery.content,
+    footer = gallery.footer;
+  var _ref2 = header || {},
+    headerFields = _ref2.fields,
+    slot = _ref2.slot;
+  var _ref3 = content || {},
+    contentFields = _ref3.fields;
+  var _ref4 = footer || {},
+    render = _ref4.render,
+    height = _ref4.height;
+  var coverDom = useMemo(function () {
+    return cover.show && coverField !== "noCover" && /*#__PURE__*/React.createElement(Cover, {
+      record: record,
+      cover: cover,
+      coverField: coverField,
+      coverObjectFit: coverObjectFit
+    });
+  }, [record, cover, coverField, coverObjectFit]);
+  var titleDom = useMemo(function () {
+    return /*#__PURE__*/React.createElement(Title, _extends({
+      columnsMap: columnsMap,
+      record: record
+    }, title));
+  }, [record, title, columnsMap]);
+  var Header = useMemo(function () {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefix, "header-wrap")
+    }, coverDom, titleDom, headerFields.show && /*#__PURE__*/React.createElement(RenderFields, {
+      record: record,
+      showMode: "block",
+      columnsMap: columnsMap,
+      fields: headerFields.list,
+      isShowLabel: true
+    }), slot && slot(record, index));
+  }, [coverDom, columnsMap, record, cover, title, headerFields.show, headerFields.list, slot, index]);
+  var _useMemo = useMemo(function () {
+      if (gallery.fixedHeight) {
+        return {
+          fixedHeader: gallery.fixedHeader,
+          fixedFooter: gallery.fixedFooter
+        };
+      }
+      return {
+        fixedHeader: false,
+        fixedFooter: false
+      };
+    }, [gallery.fixedHeight, gallery.fixedHeader, gallery.fixedFooter]),
+    fixedHeader = _useMemo.fixedHeader,
+    fixedFooter = _useMemo.fixedFooter;
+  var _useMemo2 = useMemo(function () {
+      if (compactMode === "compact") {
+        return {
+          showMode: "inline",
+          isShowLabel: false
+        };
+      } else if (compactMode === "default") {
+        return {
+          showMode: "block",
+          isShowLabel: propsIsShowLabel
+        };
+      }
+      return {
+        showMode: "block",
+        isShowLabel: propsIsShowLabel
+      };
+    }, [compactMode, propsIsShowLabel]),
+    showMode = _useMemo2.showMode,
+    isShowLabel = _useMemo2.isShowLabel;
+  var Content = useMemo(function () {
+    var showFieldList = [];
+    columns.forEach(function (item) {
+      if (item.isShow) {
+        showFieldList.push(item.key);
+      }
+    });
+    return /*#__PURE__*/React.createElement(RenderFields, {
+      record: record,
+      showMode: showMode,
+      columnsMap: columnsMap,
+      fields: showFieldList,
+      isShowLabel: isShowLabel
+    });
+  }, [contentFields, record, columnsMap, showMode, isShowLabel, columns]);
+  var Footer = useMemo(function () {
+    return render && render(record, index);
+  }, [record, index]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "gallery-item-wrap"),
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(ClassicLayout, {
+    fixedHeader: fixedHeader,
+    fixedFooter: fixedFooter,
+    header: Header,
+    content: Content,
+    footer: Footer,
+    footerStyle: {
+      height: isFunction(render) ? height : 0
+    }
+  }));
+};
+export default GalleryItem;

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

@@ -0,0 +1,29 @@
+@pisell-prefix: pisell-lowcode;
+
+.@{pisell-prefix} {
+  &-header-wrap {
+    background-color: #fff;
+  }
+  &-gallery-item-wrap {
+    height: 100%;
+    border-radius: 12px;
+    border: 2px solid var(--Gray-true-100, #f5f5f5);
+    background: var(--Base-White, #fff);
+    box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03),
+      0px 20px 24px -4px rgba(16, 24, 40, 0.08);
+    overflow: hidden;
+    transition: all 0.5s;
+    &:hover {
+      transform: translate3d(0, -3px, 0);
+    }
+    ::-webkit-scrollbar {
+      display: none;
+      //width: 5px;
+      //height: 5px;
+    }
+    ::-webkit-scrollbar-thumb {
+      background-color: rgba(0, 0, 0, 0.3);
+      border-radius: 5px;
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+import React from "react";
+declare type VirtualGridProps = {
+    dataSource: Record<string, any>[];
+    renderItem: (item: Record<string, any>, index: number) => React.ReactNode;
+    gap: number | number[];
+    itemMinWidth: number;
+    itemMaxWidth: number;
+    rowHeight: number;
+    paddingTop: number;
+};
+declare const VirtualGrid: (props: VirtualGridProps) => React.JSX.Element;
+export default VirtualGrid;

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

@@ -0,0 +1,111 @@
+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 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, { useMemo } from "react";
+import { FixedSizeGrid as Grid } from "react-window";
+import AutoSizer from "react-virtualized-auto-sizer";
+import useGenGridProps from "./useGenGridProps";
+import useGapSize from "./useGapSize";
+var Cell = function Cell(props) {
+  var columnIndex = props.columnIndex,
+    rowIndex = props.rowIndex,
+    style = props.style,
+    isScrolling = props.isScrolling,
+    data = props.data;
+  var renderItem = data.renderItem,
+    gap = data.gap,
+    columnCount = data.columnCount,
+    dataSource = data.dataSource,
+    paddingTop = data.paddingTop;
+  var dataIndex = useMemo(function () {
+    return columnCount * rowIndex + columnIndex;
+  }, [columnCount, rowIndex, columnIndex]);
+  var _useGapSize = useGapSize(gap),
+    horizontal = _useGapSize.horizontal,
+    vertical = _useGapSize.vertical;
+  var content = useMemo(function () {
+    if (dataIndex >= dataSource.length) {
+      return null;
+    }
+    return renderItem(dataSource[dataIndex], dataIndex);
+  }, [dataSource, dataIndex, renderItem]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      left: ((style === null || style === void 0 ? void 0 : style.left) || 0) + columnIndex * horizontal,
+      top: ((style === null || style === void 0 ? void 0 : style.top) || 0) + paddingTop,
+      paddingBottom: vertical
+    })
+  }, content);
+};
+var GridComponent = function GridComponent(props) {
+  var dataSource = props.dataSource,
+    width = props.width,
+    height = props.height,
+    renderItem = props.renderItem,
+    gap = props.gap,
+    itemMaxWidth = props.itemMaxWidth,
+    itemMinWidth = props.itemMinWidth,
+    rowHeight = props.rowHeight,
+    paddingTop = props.paddingTop;
+  var _useGapSize2 = useGapSize(gap),
+    horizontal = _useGapSize2.horizontal,
+    vertical = _useGapSize2.vertical;
+  var _useGenGridProps = useGenGridProps({
+      itemMinWidth: itemMinWidth,
+      itemMaxWidth: itemMaxWidth,
+      width: width,
+      dataSource: dataSource,
+      horizontal: horizontal,
+      vertical: vertical
+    }),
+    columnCount = _useGenGridProps.columnCount,
+    columnWidth = _useGenGridProps.columnWidth,
+    rowCount = _useGenGridProps.rowCount;
+  var itemData = useMemo(function () {
+    return {
+      dataSource: dataSource,
+      renderItem: renderItem,
+      columnCount: columnCount,
+      gap: gap,
+      paddingTop: paddingTop
+    };
+  }, [dataSource, columnCount, gap, renderItem, paddingTop]);
+  return /*#__PURE__*/React.createElement(Grid, {
+    columnCount: columnCount,
+    columnWidth: columnWidth,
+    height: height,
+    rowCount: rowCount,
+    rowHeight: rowHeight + vertical,
+    width: width,
+    itemData: itemData
+  }, Cell);
+};
+var VirtualGrid = function VirtualGrid(props) {
+  var dataSource = props.dataSource,
+    renderItem = props.renderItem,
+    gap = props.gap,
+    itemMinWidth = props.itemMinWidth,
+    itemMaxWidth = props.itemMaxWidth,
+    rowHeight = props.rowHeight,
+    _props$paddingTop = props.paddingTop,
+    paddingTop = _props$paddingTop === void 0 ? 0 : _props$paddingTop;
+  return /*#__PURE__*/React.createElement(AutoSizer, null, function (_ref) {
+    var height = _ref.height,
+      width = _ref.width;
+    return /*#__PURE__*/React.createElement(GridComponent, {
+      paddingTop: paddingTop,
+      rowHeight: rowHeight,
+      itemMinWidth: itemMinWidth,
+      itemMaxWidth: itemMaxWidth,
+      gap: gap,
+      width: width,
+      height: height,
+      dataSource: dataSource,
+      renderItem: renderItem
+    });
+  });
+};
+export default VirtualGrid;