@cloud-app-dev/vidc 2.0.0-alpha.7 → 2.1.0-alpha.2

package/es/List/CheckExt.js

@@ -1,20 +1,28 @@
-import "antd/lib/checkbox/style";
-import _Checkbox from "antd/lib/checkbox";
+import "antd/lib/tooltip/style";
+import _Tooltip from "antd/lib/tooltip";
 import React from 'react';
+import IconFont from '../IconFont';
 
 function CheckExt(_ref) {
-  var checkHalfStatus = _ref.checkHalfStatus,
-      checkAllStatus = _ref.checkAllStatus,
-      selectCount = _ref.selectCount,
-      onChange = _ref.onChange,
-      count = _ref.count;
+  var selectCount = _ref.selectCount,
+      onCheck = _ref.onCheck,
+      count = _ref.count,
+      onCancel = _ref.onCancel;
   return /*#__PURE__*/React.createElement("div", {
-    className: "c-check-list-checkext"
-  }, /*#__PURE__*/React.createElement(_Checkbox, {
-    indeterminate: checkHalfStatus,
-    checked: checkAllStatus,
-    onChange: onChange
-  }, "\u5168\u9009"), /*#__PURE__*/React.createElement("span", null, "\u5DF2\u9009 ", /*#__PURE__*/React.createElement("span", {
+    className: "cloudapp-c-check-list-checkext"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "select-group"
+  }, /*#__PURE__*/React.createElement(_Tooltip, {
+    title: "\u9009\u4E2D\u6240\u6709\u5DF2\u52A0\u8F7D"
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "icon-S_Photo_MarkYes",
+    onClick: onCheck
+  })), /*#__PURE__*/React.createElement(_Tooltip, {
+    title: "\u53D6\u6D88\u9009\u4E2D\u6240\u6709\u5DF2\u52A0\u8F7D\u9879"
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "icon-MarkNo",
+    onClick: onCancel
+  }))), /*#__PURE__*/React.createElement("span", null, "\u5DF2\u9009 ", /*#__PURE__*/React.createElement("span", {
     style: {
       color: 'var(--success)'
     }

package/es/List/DeviceList/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { IListProps } from '../ListExt';
+import { DeviceItemType } from '../../core';
+import './index.less';
+interface DeviceListProps extends Exclude<IListProps<DeviceItemType>, 'list' | 'itemKey' | 'itemNameKey' | 'whatIcon' | 'inputPlaceholder' | 'rowHeight'> {
+    deviceList?: Array<DeviceItemType>;
+    deleteItem?: (item: DeviceItemType) => void;
+    getIconStyle?: (item: DeviceItemType) => React.CSSProperties;
+}
+declare function DeviceList({ getIconStyle, className, deleteItem, deviceList, renderItemExt, ...props }: DeviceListProps): JSX.Element;
+export default DeviceList;

package/es/{DeviceList → List/DeviceList}/index.js

@@ -1,9 +1,8 @@
 import { __rest } from "tslib";
 import React, { useCallback } from 'react';
-import List from '../List';
-import IconFont from '../IconFont';
-import DeviceIcon from '../DeviceIcon';
-import TreeTitle from '../TreeTitle';
+import List from '../ListExt';
+import IconFont from '../../IconFont';
+import DeviceIcon from '../../DeviceIcon';
 import "./index.css";
 
 function DeviceList(_a) {
@@ -11,12 +10,8 @@ function DeviceList(_a) {
       className = _a.className,
       deleteItem = _a.deleteItem,
       deviceList = _a.deviceList,
-      onMouseOverItem = _a.onMouseOverItem,
       _renderItemExt = _a.renderItemExt,
-      title = _a.title,
-      onKeywordChange = _a.onKeywordChange,
-      itemKey = _a.itemKey,
-      props = __rest(_a, ["getIconStyle", "className", "deleteItem", "deviceList", "onMouseOverItem", "renderItemExt", "title", "onKeywordChange", "itemKey"]);
+      props = __rest(_a, ["getIconStyle", "className", "deleteItem", "deviceList", "renderItemExt"]);
 
   var whatIcon = useCallback(function (item) {
     return /*#__PURE__*/React.createElement(DeviceIcon, {
@@ -34,17 +29,10 @@ function DeviceList(_a) {
     className: "lm-c-device-list-wrapper ".concat(className),
     list: deviceList,
     itemNameKey: "deviceName",
-    itemKey: itemKey,
+    itemKey: "cid",
     rowHeight: 30,
-    renderHeader: function renderHeader() {
-      return /*#__PURE__*/React.createElement(TreeTitle, {
-        title: title,
-        onChange: onKeywordChange,
-        inputPlaceholder: "\u8BF7\u8F93\u5165\u8BBE\u5907\u540D\u79F0"
-      });
-    },
+    inputPlaceholder: "\u8BF7\u8F93\u5165\u8BBE\u5907\u540D\u79F0",
     whatIcon: whatIcon,
-    onMouseOverItem: onMouseOverItem,
     renderItemExt: function renderItemExt(item) {
       return _renderItemExt ? _renderItemExt(item) : deleteItem ? /*#__PURE__*/React.createElement("span", {
         className: "clear-item",

package/es/{DynamicList/demo.js → List/DynamicDeviceList/Demo.js}

@@ -1,10 +1,5 @@
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+import "antd/lib/config-provider/style";
+import _ConfigProvider from "antd/lib/config-provider";
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -18,33 +13,20 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useCallback, useState } from 'react';
-import DynamicList from './index';
-var defaultList = Array.from(new Array(20)).map(function (_, i) {
-  return {
-    name: "\u6211\u662F\u5217\u8868".concat(i),
-    id: i
-  };
-});
+import React, { useState } from 'react';
+import DynamicDeviceList from './index';
 
-var App = function App() {
-  var _useState = useState(defaultList),
+function App() {
+  var _useState = useState({
+    keyword: ''
+  }),
       _useState2 = _slicedToArray(_useState, 2),
       state = _useState2[0],
       setState = _useState2[1];
 
-  var loadMore = useCallback(function () {
-    console.log(11111);
-    return new Promise(function (resolve) {
-      setTimeout(function () {
-        setState(function (old) {
-          return [].concat(_toConsumableArray(old), _toConsumableArray(defaultList));
-        });
-        resolve(true);
-      }, 500);
-    });
-  }, [state]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(_ConfigProvider, {
+    prefixCls: "cloudapp"
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex'
     }
@@ -53,19 +35,20 @@ var App = function App() {
       height: 400,
       width: 300
     }
-  }, /*#__PURE__*/React.createElement(DynamicList, {
-    list: state,
-    rowCount: 300,
-    renderItem: function renderItem(item, index) {
-      return /*#__PURE__*/React.createElement("span", {
-        style: {
-          padding: '0 20px',
-          lineHeight: '40px'
-        }
-      }, item.name, "-", index);
+  }, /*#__PURE__*/React.createElement(DynamicDeviceList, {
+    onChecked: console.log,
+    params: {
+      keywords: state.keyword
     },
-    loadMore: loadMore
-  })));
-};
+    title: "\u5217\u8868",
+    onKeywordChange: function onKeywordChange(e) {
+      return setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          keyword: e
+        });
+      });
+    }
+  }))));
+}
 
 export default App;

package/es/{DynamicDeviceList → List/DynamicDeviceList}/index.css

@@ -3,17 +3,21 @@
   flex-direction: column;
   width: 100%;
   height: 100%;
+  border: 1px solid var(--bd-color);
 }
 .zenview-c-dynamic-device-list-layout .dynamic-list-item {
   padding: 0 10px;
 }
-.zenview-c-dynamic-device-list-layout .lm-c-dynamiclist {
+.zenview-c-dynamic-device-list-layout .zenview-c-dynamic-device-box {
   flex: 1;
+  overflow: auto;
+  contain: strict;
 }
 .zenview-c-dynamic-device-list-layout .device-item-box {
   height: 40px;
   line-height: 40px;
   display: flex;
+  padding: 0 10px;
 }
 .zenview-c-dynamic-device-list-layout .device-item-box .device-name {
   flex: 1;
@@ -33,19 +37,3 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.zenview-c-dynamic-device-list-layout .c-check-list-checkext {
-  font-size: var(--fs-small);
-  padding: 5px 12px;
-  display: flex;
-  justify-content: space-between;
-  border-bottom: 1px solid var(--bd-color);
-}
-.zenview-c-dynamic-device-list-layout .c-check-list-checkext .select-group .anticon {
-  font-size: 16px;
-  cursor: pointer;
-  padding-right: 8px;
-  color: var(--icon);
-}
-.zenview-c-dynamic-device-list-layout .c-check-list-checkext .select-group .anticon:hover {
-  color: var(--primary);
-}

package/es/List/DynamicDeviceList/index.d.ts

@@ -0,0 +1,11 @@
+import { IDynamicDeviceListProps } from './interface';
+import './index.less';
+declare function DynamicDeviceList({ onClick, checkedKeys, defaultCheckedIds, onChecked, params, title, onKeywordChange, limit, itemHeight }: IDynamicDeviceListProps): JSX.Element;
+declare namespace DynamicDeviceList {
+    var defaultProps: {
+        limit: number;
+        itemHeight: number;
+        params: {};
+    };
+}
+export default DynamicDeviceList;

package/es/List/DynamicDeviceList/index.js

@@ -0,0 +1,205 @@
+import "antd/lib/skeleton/style";
+import _Skeleton from "antd/lib/skeleton";
+import "antd/lib/checkbox/style";
+import _Checkbox from "antd/lib/checkbox";
+import _useMemoizedFn from "ahooks/es/useMemoizedFn";
+import _useUpdateEffect from "ahooks/es/useUpdateEffect";
+import _useVirtualList3 from "ahooks/es/useVirtualList";
+import _useInfiniteScroll2 from "ahooks/es/useInfiniteScroll";
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import DeviceIcon from '../../DeviceIcon';
+import Title from '../../Title';
+import CheckExt from '../CheckExt';
+import { loadNextPage, LIMIT, skeletonList } from './utils';
+import "./index.css";
+
+function DynamicDeviceList(_ref) {
+  var onClick = _ref.onClick,
+      checkedKeys = _ref.checkedKeys,
+      defaultCheckedIds = _ref.defaultCheckedIds,
+      onChecked = _ref.onChecked,
+      params = _ref.params,
+      title = _ref.title,
+      onKeywordChange = _ref.onKeywordChange,
+      limit = _ref.limit,
+      itemHeight = _ref.itemHeight;
+
+  var _useState = useState({
+    checkedKeys: defaultCheckedIds || checkedKeys || []
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var containerRef = useRef();
+  var wrapperRef = useRef();
+
+  var _useInfiniteScroll = _useInfiniteScroll2(function (d) {
+    return loadNextPage(d, limit, params);
+  }, {
+    target: containerRef,
+    threshold: 50,
+    isNoMore: function isNoMore(d) {
+      var _a;
+
+      return ((_a = d === null || d === void 0 ? void 0 : d.list) === null || _a === void 0 ? void 0 : _a.length) >= (d === null || d === void 0 ? void 0 : d.count);
+    },
+    reloadDeps: [params.placeIds, params.buzGroupId]
+  }),
+      data = _useInfiniteScroll.data,
+      loadingMore = _useInfiniteScroll.loadingMore,
+      noMore = _useInfiniteScroll.noMore;
+
+  var isSkeleton = useMemo(function () {
+    return !noMore && loadingMore;
+  }, [noMore, loadingMore]);
+  var dataList = useMemo(function () {
+    return data ? (data === null || data === void 0 ? void 0 : data.list) || [] : [];
+  }, [data]);
+
+  var _useVirtualList = _useVirtualList3(dataList, {
+    containerTarget: containerRef,
+    wrapperTarget: wrapperRef,
+    itemHeight: itemHeight,
+    overscan: 10
+  }),
+      _useVirtualList2 = _slicedToArray(_useVirtualList, 2),
+      list = _useVirtualList2[0],
+      scrollTo = _useVirtualList2[1];
+  /**
+   * 列表选中处理
+   */
+
+
+  var onCheckedAction = useCallback(function (item) {
+    var ids = state.checkedKeys || [];
+    var id = item.cid;
+    var checked = !ids.includes(item.cid);
+
+    if (checked) {
+      ids.push(id);
+    } else {
+      ids = ids.filter(function (v) {
+        return v !== id;
+      });
+    }
+
+    setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        checkedKeys: _toConsumableArray(ids)
+      });
+    });
+    onChecked && onChecked(ids, [item], checked);
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [state.checkedKeys]);
+
+  _useUpdateEffect(function () {
+    return scrollTo(0);
+  }, [params.placeIds, params.buzGroupId]);
+
+  var onSelectAll = _useMemoizedFn(function () {
+    var ids = dataList.map(function (v) {
+      return v.cid;
+    });
+    setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        checkedKeys: ids
+      });
+    });
+    onChecked && onChecked(ids, dataList, true);
+  });
+
+  var onCancelAll = function onCancelAll() {
+    setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        checkedKeys: []
+      });
+    });
+    onChecked && onChecked([], [], false);
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "zenview-c-dynamic-device-list-layout"
+  }, /*#__PURE__*/React.createElement(Title, {
+    title: title,
+    onChange: onKeywordChange,
+    inputPlaceholder: "\u8BF7\u8F93\u5165\u8BBE\u5907\u540D\u79F0"
+  }), onChecked && /*#__PURE__*/React.createElement(CheckExt, {
+    count: data === null || data === void 0 ? void 0 : data.count,
+    selectCount: state.checkedKeys.length,
+    onCancel: onCancelAll,
+    onCheck: onSelectAll
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "zenview-c-dynamic-device-box",
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: wrapperRef
+  }, list.map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.index,
+      className: "device-item-box ".concat(state.checkedKeys.includes(item.data.cid) ? 'device-item-selected' : '')
+    }, onChecked ? /*#__PURE__*/React.createElement(_Checkbox, {
+      className: "device-name device-checkbox-name",
+      checked: state.checkedKeys.includes(item.data.cid),
+      value: item.data.cid,
+      onClick: function onClick() {
+        return onCheckedAction(item.data);
+      }
+    }, /*#__PURE__*/React.createElement(DeviceIcon, {
+      type: item.data.deviceType,
+      status: item.data.deviceStatus
+    }), /*#__PURE__*/React.createElement("span", {
+      title: item.data.deviceName
+    }, item.data.deviceName)) : /*#__PURE__*/React.createElement("span", {
+      className: "device-name",
+      onClick: onClick ? function () {
+        return onClick(item);
+      } : undefined
+    }, /*#__PURE__*/React.createElement(DeviceIcon, {
+      type: item.data.deviceType,
+      status: item.data.deviceStatus
+    }), /*#__PURE__*/React.createElement("span", {
+      title: item.data.deviceName
+    }, item.data.deviceName)));
+  })), isSkeleton && skeletonList.map(function (_, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      style: {
+        padding: '0 10px'
+      },
+      className: "dynamic-list-item"
+    }, /*#__PURE__*/React.createElement(_Skeleton, {
+      paragraph: false,
+      loading: true,
+      active: true
+    }));
+  })));
+}
+
+DynamicDeviceList.defaultProps = {
+  limit: LIMIT,
+  itemHeight: 40,
+  params: {}
+};
+export default DynamicDeviceList;

package/es/List/DynamicDeviceList/interface.d.ts

@@ -0,0 +1,37 @@
+export interface IDynamicDeviceListProps {
+  /**
+   * @description 列表点击事件
+   */
+  onClick?: (item: DeviceItemType) => void;
+
+  /**
+   * @description 选中设备cid集合
+   */
+  checkedKeys?: string[];
+
+  /**
+   * @description 传入onSelect列表默认渲染为checkbox模式
+   */
+  onChecked?: (ids: string[], list: DeviceItemType[], checked: boolean) => void;
+
+  /**
+   * @description 传入queryList需要的参数，例如业务树ID，场所id等，分页参数除外
+   */
+  params?: { [key: string]: any };
+
+  title?: string;
+
+  onKeywordChange?: (v: string) => void;
+
+  defaultCheckedIds?: string[];
+
+  limit?: number;
+
+  itemHeight?: number;
+}
+
+export interface IDynamicDeviceListResult<T> {
+  list: T[];
+  offset: number;
+  [key: string]: any;
+}

package/es/List/DynamicDeviceList/utils.d.ts

@@ -0,0 +1,16 @@
+import { DeviceItemType, HttpPageResult2 } from '../../core';
+import { IDynamicDeviceListResult } from './interface';
+export declare function queryDeviceList(params?: any): Promise<HttpPageResult2<DeviceItemType>>;
+export declare const LIMIT = 30;
+/**
+ * @desc 懒加载方法
+ */
+export declare const loadNextPage: (d?: IDynamicDeviceListResult<DeviceItemType>, defaultLimit?: number, params?: any) => Promise<{
+    list: DeviceItemType[];
+    count: number;
+    offset: number;
+    limit: number;
+}>;
+export declare const skeletonList: {
+    skeleton: boolean;
+}[];

package/es/List/DynamicDeviceList/utils.js

@@ -0,0 +1,61 @@
+import { __awaiter } from "tslib";
+import Service from '../../Service';
+import { getHeader } from '../../utils';
+export function queryDeviceList() {
+  var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return Service.http({
+    method: 'post',
+    url: '/api/udm-api/device/queryList',
+    requestId: 'queryDeviceList',
+    headers: getHeader(),
+    data: Object.assign(Object.assign({}, params), {
+      includeSubOrganizations: 1,
+      isPagination: true
+    })
+  });
+}
+export var LIMIT = 30;
+/**
+ * @desc 懒加载方法
+ */
+
+export var loadNextPage = function loadNextPage(d, defaultLimit) {
+  var params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  return __awaiter(this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _ref, offset, limit, pageLimit, pageOffset, res;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _ref = d || {}, offset = _ref.offset, limit = _ref.limit;
+            pageLimit = typeof limit === 'number' ? limit : defaultLimit || LIMIT;
+            pageOffset = typeof offset === 'number' ? offset + pageLimit : 0;
+            _context.next = 5;
+            return queryDeviceList(Object.assign({
+              offset: pageOffset,
+              limit: pageLimit
+            }, params));
+
+          case 5:
+            res = _context.sent;
+            return _context.abrupt("return", {
+              list: res.data || [],
+              count: res.totalCount,
+              offset: pageOffset,
+              limit: pageLimit
+            });
+
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+};
+export var skeletonList = Array.from(new Array(LIMIT)).map(function () {
+  return {
+    skeleton: true
+  };
+});

package/es/List/DynamicGridList/Demo.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import GridList from './index';
+
+function random(low, high) {
+  return Math.floor(Math.random() * high) + low;
+}
+
+var IMAGES = Array.from({
+  length: 60
+}, function (_, index) {
+  var width = 300;
+  var height = random(200, 300);
+  return {
+    url: "https://picsum.photos/id/".concat(index + 1, "/").concat(width, "/").concat(height, ".jpg"),
+    width: width,
+    height: height
+  };
+});
+
+var App = function App() {
+  function loadNextPage(d) {
+    return new Promise(function (resolve) {
+      setTimeout(function () {
+        resolve({
+          list: IMAGES
+        });
+      });
+    });
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: 800,
+      overflow: 'auto'
+    }
+  }, /*#__PURE__*/React.createElement(GridList, {
+    itemKey: "url",
+    itemHeight: 300,
+    itemWidth: 250,
+    renderItem: function renderItem(image) {
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          border: '1px solid gray',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column'
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          flex: 1,
+          overflow: 'hidden'
+        }
+      }, /*#__PURE__*/React.createElement("img", {
+        src: image.url,
+        style: {
+          objectFit: 'cover',
+          display: 'block',
+          width: '100%',
+          height: '100%'
+        }
+      })), /*#__PURE__*/React.createElement("p", null, "\u6807\u9898"), /*#__PURE__*/React.createElement("p", null, "\u63CF\u8FF0"));
+    },
+    loadNextPage: loadNextPage,
+    isNoMore: function isNoMore() {
+      return false;
+    }
+  }));
+};
+
+export default App;

package/es/List/DynamicGridList/index.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export interface IDynamicGridListProps<T> {
+    itemKey: string;
+    itemHeight?: number;
+    itemWidth?: number;
+    loadNextPage: (d: IDynamicGridListResult<T>) => Promise<IDynamicGridListResult<T>>;
+    reloadDep?: any;
+    isNoMore: (d: any) => boolean;
+    renderItem: (item: T) => React.ReactNode;
+    className?: string;
+    getGridGap?: (elementWidth: number, windowHeight: number) => number;
+}
+export interface IDynamicGridListResult<T> {
+    list: T[];
+    [key: string]: any;
+}
+declare function DynamicGridList<T>({ itemKey, itemHeight, itemWidth, loadNextPage, reloadDep, isNoMore, renderItem, className, getGridGap }: IDynamicGridListProps<T>): JSX.Element;
+declare namespace DynamicGridList {
+    var defaultProps: {
+        itemWidth: number;
+        itemHeight: number;
+        className: string;
+        getGridGap: () => number;
+    };
+}
+export default DynamicGridList;