@cloud-app-dev/vidc 4.0.19 → 4.0.21

package/es/DisableMark/index.less

@@ -0,0 +1,9 @@
+.disable-mark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  cursor: not-allowed;
+}

package/es/DomMove/demo.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function App(): React.JSX.Element;

package/es/DomMove/demo.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import DomMove from "./index";
+export default function App() {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 800,
+      height: 800
+    }
+  }, /*#__PURE__*/React.createElement(DomMove, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 30,
+      height: 30,
+      background: 'red'
+    }
+  })));
+}

package/es/DomMove/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { PositionType, SizeType } from '../Picture/interface';
+interface IDomMoveProps {
+    children: React.ReactNode;
+    onDrag?: (e: MouseEvent, position: PositionType) => void;
+    onDragChange?: (position: PositionType) => void;
+    onDragEnd?: (e: MouseEvent, position: PositionType) => void;
+    position?: PositionType;
+    size?: SizeType;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    forwordRef?: React.MutableRefObject<any>;
+}
+declare const _default: React.ForwardRefExoticComponent<IDomMoveProps & React.RefAttributes<unknown>>;
+export default _default;

package/es/DomMove/index.js

@@ -0,0 +1,139 @@
+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); }
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import { useEventListener, useSize, useUpdate } from 'ahooks';
+import React, { useEffect, useImperativeHandle, useRef } from 'react';
+import { getMouseXY, getPosition } from "./utils";
+function DomMove(_ref) {
+  var onDrag = _ref.onDrag,
+    position = _ref.position,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? {
+      width: '100%',
+      height: '100%'
+    } : _ref$size,
+    children = _ref.children,
+    onDragChange = _ref.onDragChange,
+    onDragEnd = _ref.onDragEnd,
+    forwordRef = _ref.forwordRef,
+    disabled = _ref.disabled;
+  var dragRef = useRef(null);
+  var ref = useRef({
+    position: {
+      x: 0,
+      y: 0
+    },
+    DA: {
+      x: 0,
+      y: 0
+    },
+    isDrag: false,
+    deviation: {
+      offsetX: 0,
+      offsetY: 0,
+      width: 0,
+      height: 0
+    }
+  });
+  var reSize = useSize(dragRef) || {};
+  var update = useUpdate();
+  var updatePosition = function updatePosition(_ref2) {
+    var x = _ref2.x,
+      y = _ref2.y;
+    ref.current.position = {
+      x: x,
+      y: y
+    };
+    update();
+    onDragChange === null || onDragChange === void 0 || onDragChange({
+      x: x,
+      y: y
+    });
+  };
+  useEffect(function () {
+    var offset = getPosition(dragRef === null || dragRef === void 0 ? void 0 : dragRef.current);
+    ref.current.deviation = {
+      offsetX: offset.left,
+      offsetY: offset.top,
+      width: reSize.width,
+      height: reSize.height
+    };
+  }, [reSize.width, reSize.height]);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useImperativeHandle(forwordRef, function () {
+    return {
+      updatePosition: updatePosition
+    };
+  }, []);
+  useEventListener('mousemove', function (event) {
+    if (ref.current.isDrag) {
+      // let maxX, maxY;
+      var moveX, moveY;
+      var _getMouseXY = getMouseXY(event),
+        _x = _getMouseXY.x,
+        _y = _getMouseXY.y;
+      moveX = _x - ref.current.deviation.offsetX;
+      moveY = _y - ref.current.deviation.offsetY;
+
+      // 计算可移动位置的大小， 保证元素不会超过可移动范围
+      // maxX = document.documentElement.clientWidth - this.deviation.width;
+      // maxY = document.documentElement.clientHeight - this.deviation.height;
+
+      // min方法保证不会超过右边界，max保证不会超过左边界
+      // moveX = Math.min(Math.max(0, moveX), maxX);
+      // moveY = Math.min(Math.max(0, moveY), maxY);
+      var _position = {
+        x: moveX,
+        y: moveY
+      };
+      onDrag ? onDrag(event, _position) : updatePosition(_position);
+    }
+  }, {
+    target: document.body
+  });
+  useEventListener('mouseup', function (event) {
+    if (ref.current.isDrag) {
+      ref.current.isDrag = false;
+      onDragEnd === null || onDragEnd === void 0 || onDragEnd(event, ref.current.position);
+    }
+  }, {
+    target: document.body
+  });
+  useEventListener('mousedown', function (event) {
+    if (!disabled) {
+      var _getMouseXY2 = getMouseXY(event),
+        _x2 = _getMouseXY2.x,
+        _y2 = _getMouseXY2.y;
+      ref.current.deviation.offsetX = _x2 - ref.current.position.x;
+      ref.current.deviation.offsetY = _y2 - ref.current.position.y;
+      ref.current.isDrag = true;
+    }
+  }, {
+    target: dragRef
+  });
+  var _ref3 = onDrag ? {
+      x: position === null || position === void 0 ? void 0 : position.x,
+      y: position === null || position === void 0 ? void 0 : position.y
+    } : {
+      x: ref.current.position.x,
+      y: ref.current.position.y
+    },
+    x = _ref3.x,
+    y = _ref3.y;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: dragRef,
+    className: "drag-move-Content ".concat(className),
+    style: {
+      transform: "translate(".concat(x, "px,").concat(y, "px)"),
+      width: size === null || size === void 0 ? void 0 : size.width,
+      height: size === null || size === void 0 ? void 0 : size.height
+    }
+  }, children);
+}
+export default /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(DomMove, _extends({}, props, {
+    forwordRef: ref
+  }));
+});

package/es/DomMove/utils.d.ts

@@ -0,0 +1,8 @@
+export declare function getPosition(obj: any): {
+    left: any;
+    top: any;
+};
+export declare function getMouseXY(e: MouseEvent): {
+    x: number;
+    y: number;
+};

package/es/DomMove/utils.js

@@ -0,0 +1,32 @@
+export function getPosition(obj) {
+  //获取某元素以浏览器左上角为原点的坐标
+  var t = obj.offsetTop; //获取该元素对应父容器的上边距
+  var l = obj.offsetLeft; //对应父容器的上边距
+  //判断是否有父容器，如果存在则累加其边距
+  while (obj = obj.offsetParent) {
+    //等效 obj = obj.offsetParent;while (obj != undefined)
+    t += obj.offsetTop; //叠加父容器的上边距
+    l += obj.offsetLeft; //叠加父容器的左边距
+  }
+  return {
+    left: l,
+    top: t
+  };
+}
+// 函数用于获取鼠标的位置
+export function getMouseXY(e) {
+  var x = 0,
+    y = 0;
+  e = e || window.event;
+  if (e.pageX) {
+    x = e.pageX;
+    y = e.pageY;
+  } else {
+    x = e.clientX + document.body.scrollLeft - document.body.clientLeft;
+    y = e.clientY + document.body.scrollTop - document.body.clientTop;
+  }
+  return {
+    x: x,
+    y: y
+  };
+}

package/es/Drag/DragAndDropItem.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IDragAndDropItemProps } from './interface';
+declare function DragAndDropItem<T>({ children, dragData, dragId, style, onDropEnd, disabledCopyElement }: IDragAndDropItemProps<T>): React.FunctionComponentElement<any>;
+export default DragAndDropItem;

package/es/Drag/DragAndDropItem.js

@@ -0,0 +1,134 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import uuid from "../uuid";
+function DragAndDropItem(_ref) {
+  var children = _ref.children,
+    dragData = _ref.dragData,
+    dragId = _ref.dragId,
+    style = _ref.style,
+    onDropEnd = _ref.onDropEnd,
+    _ref$disabledCopyElem = _ref.disabledCopyElement,
+    disabledCopyElement = _ref$disabledCopyElem === void 0 ? true : _ref$disabledCopyElem;
+  //@ts-ignore
+  var id = useMemo(function () {
+    return dragId || "dragId-".concat(uuid());
+  }, [dragId]);
+  var _useState = useState(['', '']),
+    _useState2 = _slicedToArray(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
+  var _useState3 = useState([0, 0]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    offset = _useState4[0],
+    setOffset = _useState4[1];
+  var domRef = useRef(null);
+  var dragDomTemp = useRef(null);
+  var onDrop = useCallback(function (event) {
+    event.stopPropagation();
+    setStatus(function (old) {
+      return [old[0], 'droped'];
+    });
+    var data = JSON.parse(event.dataTransfer.getData('DATA'));
+    onDropEnd && onDropEnd(data);
+  }, [onDropEnd]);
+  var onDragEnter = useCallback(function (event) {
+    event.stopPropagation();
+    setStatus(function (old) {
+      return [old[0], 'dragenter'];
+    });
+  }, []);
+  var onDragLeave = useCallback(function (event) {
+    event.stopPropagation();
+    setStatus(function (old) {
+      return [old[0], 'dragleave'];
+    });
+  }, []);
+  var allowDrop = useCallback(function (event) {
+    return event.preventDefault();
+  }, []);
+  var onDragStart = useCallback(function (event) {
+    if (!domRef.current) {
+      return;
+    }
+    if (!disabledCopyElement) {
+      var pageX = event.pageX,
+        pageY = event.pageY;
+      var _domRef$current$getBo = domRef.current.getBoundingClientRect(),
+        x = _domRef$current$getBo.x,
+        y = _domRef$current$getBo.y,
+        width = _domRef$current$getBo.width,
+        height = _domRef$current$getBo.height;
+      var offsetX = pageX - x;
+      var offsetY = pageY - y;
+      dragDomTemp.current = domRef.current.cloneNode(true);
+      domRef.current.after(dragDomTemp.current);
+      //初始化缓存dom位置
+      dragDomTemp.current.style.position = 'fixed';
+      dragDomTemp.current.style.left = "".concat(event.pageX - offsetX, "px");
+      dragDomTemp.current.style.top = "".concat(event.pageY - offsetY, "px");
+      dragDomTemp.current.style.draggable = false;
+      dragDomTemp.current.style.pointerEvents = 'none';
+      dragDomTemp.current.style.opacity = 0.5;
+      dragDomTemp.current.style.zIndex = 99;
+      dragDomTemp.current.style.width = "".concat(width, "px");
+      dragDomTemp.current.style.height = "".concat(height, "px");
+      setOffset([offsetX, offsetY]);
+      event.dataTransfer.setDragImage(new Image(), 0, 0);
+    }
+    setStatus(function (old) {
+      return ['draging', old[1]];
+    });
+    var res = {
+      data: dragData,
+      _id: id
+    };
+    event.dataTransfer.setData('DATA', JSON.stringify(res));
+  }, [disabledCopyElement, dragData, id]);
+  var onDragEnd = useCallback(function () {
+    dragDomTemp.current && dragDomTemp.current.remove();
+    setStatus(function (old) {
+      return ['dragEnd', old[1]];
+    });
+  }, []);
+  var onDrag = useCallback(function (e) {
+    if (dragDomTemp.current) {
+      if (e.pageX === 0 && e.pageY === 0) {
+        return;
+      }
+      if (e.pageX < offset[2] || e.pageY < offset[3]) {
+        return;
+      }
+      dragDomTemp.current.style.position = 'fixed';
+      dragDomTemp.current.style.left = "".concat(e.pageX - offset[0], "px");
+      dragDomTemp.current.style.top = "".concat(e.pageY - offset[1], "px");
+    }
+  }, [offset]);
+  return /*#__PURE__*/React.cloneElement(children, {
+    ref: domRef,
+    onDragStart: onDragStart,
+    onDrag: onDrag,
+    'data-dragId': id,
+    draggable: true,
+    onDragEnd: onDragEnd,
+    onDrop: onDrop,
+    onDragOver: allowDrop,
+    onDragEnter: onDragEnter,
+    onDragLeave: onDragLeave,
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      opacity: status[0] === 'draging' || status[1] === 'dragenter' ? 0.5 : 1
+    })
+  });
+}
+export default DragAndDropItem;

package/es/Drag/DropItem.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IDropItemProps } from './interface';
+declare function DropItem<T>({ children, style, onDropEnd }: IDropItemProps<T>): React.FunctionComponentElement<any>;
+export default DropItem;

package/es/Drag/DropItem.js

@@ -0,0 +1,50 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import React, { useCallback, useRef, useState } from 'react';
+function DropItem(_ref) {
+  var children = _ref.children,
+    style = _ref.style,
+    onDropEnd = _ref.onDropEnd;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
+  var domRef = useRef(null);
+  var onDrop = useCallback(function (event) {
+    event.stopPropagation();
+    setStatus('droped');
+    var data = JSON.parse(event.dataTransfer.getData('DATA'));
+    onDropEnd && onDropEnd(data);
+  }, [onDropEnd]);
+  var onDragEnter = useCallback(function (event) {
+    event.stopPropagation();
+    setStatus('dragenter');
+  }, []);
+  var onDragLeave = useCallback(function (event) {
+    event.stopPropagation();
+    setStatus('dragleave');
+  }, []);
+  var allowDrop = useCallback(function (event) {
+    return event.preventDefault();
+  }, []);
+  return /*#__PURE__*/React.cloneElement(children, {
+    ref: domRef,
+    onDrop: onDrop,
+    onDragOver: allowDrop,
+    onDragEnter: onDragEnter,
+    onDragLeave: onDragLeave,
+    style: status === 'dragenter' ? _objectSpread({}, style) : undefined
+  });
+}
+export default DropItem;

package/es/Drag/index.d.ts

@@ -0,0 +1,7 @@
+import DragAndDropItem from './DragAndDropItem';
+import DropItem from './DropItem';
+declare const Drag: {
+    DragAndDropItem: typeof DragAndDropItem;
+    DropItem: typeof DropItem;
+};
+export default Drag;

package/es/Drag/index.js

@@ -0,0 +1,7 @@
+import DragAndDropItem from "./DragAndDropItem";
+import DropItem from "./DropItem";
+var Drag = {
+  DragAndDropItem: DragAndDropItem,
+  DropItem: DropItem
+};
+export default Drag;

package/es/Drag/interface.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export interface IDragAndDropItemProps<T> {
+  children: JSX.Element;
+  dragData: T;
+  dragId?: string;
+  style?: React.CSSProperties;
+  onDropEnd: (params: { data: T; _id: string }) => void;
+  disabledCopyElement?: boolean;
+}
+
+export interface IDropItemProps<T> {
+  children: JSX.Element;
+  style?: React.CSSProperties;
+  onDropEnd: (params: { data: T; _id?: string }) => void;
+}

package/es/DynamicGridList/Demo.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const App: () => React.JSX.Element;
+export default App;

package/es/DynamicGridList/Demo.js

@@ -0,0 +1,77 @@
+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 _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 _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 _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; }
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import React from 'react';
+import GridList from "./index";
+function random(low, high) {
+  return Math.floor(Math.random() * high) + low;
+}
+var IMAGES = function IMAGES() {
+  return Array.from({
+    length: 20
+  }, 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
+    };
+  });
+};
+function loadPage(d) {
+  if (!d) {
+    // eslint-disable-next-line no-param-reassign
+    d = {};
+  }
+  var resultData = IMAGES();
+  d.page ? d.page++ : d.page = 1;
+  d.list ? d.list = [].concat(_toConsumableArray(d.list), _toConsumableArray(resultData)) : d.list = resultData;
+  return new Promise(function (resolve) {
+    console.log(d.page);
+    setTimeout(function () {
+      return resolve(d);
+    }, 10);
+  });
+}
+var App = function App() {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: 400
+    }
+  }, /*#__PURE__*/React.createElement(GridList, {
+    itemKey: "url",
+    itemHeight: 400,
+    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,
+        alt: "",
+        style: {
+          objectFit: 'cover',
+          display: 'block',
+          width: '100%',
+          height: '100%'
+        }
+      })), /*#__PURE__*/React.createElement("p", null, "\u6807\u9898"), /*#__PURE__*/React.createElement("p", null, "\u63CF\u8FF0"));
+    },
+    loadPage: loadPage
+  }));
+};
+export default App;

package/es/DynamicGridList/index.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { GridListCell } from '../GridList/interface';
+import { TData } from '../useInfiniteScroll';
+export interface IDynamicGridListProps<T> {
+    itemHeight?: number;
+    className?: string;
+    /**
+     * 重载条件
+     */
+    reloadDeps?: any[];
+    /**
+     * render列表
+     * @param options
+     */
+    renderItem: (item: T, cell: GridListCell<T>) => React.ReactNode;
+    loadPage(d?: TData<T>): Promise<TData<T>>;
+    itemWidth?: number;
+    itemKey: string;
+    getGridGap?: (...args: any) => number;
+    isNoMore?: (data?: TData<T>) => boolean;
+    threshold?: number;
+}
+declare function DynamicGridList<T>({ renderItem, itemHeight, itemKey, itemWidth, reloadDeps, getGridGap, loadPage, isNoMore, threshold, ...props }: IDynamicGridListProps<T>): React.JSX.Element;
+export default DynamicGridList;

package/es/DynamicGridList/index.js

@@ -0,0 +1,67 @@
+var _excluded = ["renderItem", "itemHeight", "itemKey", "itemWidth", "reloadDeps", "getGridGap", "loadPage", "isNoMore", "threshold"];
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { useUpdateEffect } from 'ahooks';
+import React, { useMemo, useRef } from 'react';
+import GridList from "../GridList";
+import useInfiniteScroll from "../useInfiniteScroll";
+function DynamicGridList(_ref) {
+  var renderItem = _ref.renderItem,
+    _ref$itemHeight = _ref.itemHeight,
+    itemHeight = _ref$itemHeight === void 0 ? 300 : _ref$itemHeight,
+    itemKey = _ref.itemKey,
+    _ref$itemWidth = _ref.itemWidth,
+    itemWidth = _ref$itemWidth === void 0 ? 250 : _ref$itemWidth,
+    _ref$reloadDeps = _ref.reloadDeps,
+    reloadDeps = _ref$reloadDeps === void 0 ? [] : _ref$reloadDeps,
+    _ref$getGridGap = _ref.getGridGap,
+    getGridGap = _ref$getGridGap === void 0 ? function () {
+      return 20;
+    } : _ref$getGridGap,
+    loadPage = _ref.loadPage,
+    isNoMore = _ref.isNoMore,
+    _ref$threshold = _ref.threshold,
+    threshold = _ref$threshold === void 0 ? 50 : _ref$threshold,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var containerRef = useRef(null);
+  var _useInfiniteScroll = useInfiniteScroll(loadPage, {
+      target: containerRef,
+      threshold: threshold,
+      isNoMore: isNoMore,
+      reloadDeps: reloadDeps
+    }),
+    data = _useInfiniteScroll.data,
+    noMore = _useInfiniteScroll.noMore;
+  useUpdateEffect(function () {
+    if (noMore) {
+      console.warn('数据已全部加载完成');
+    }
+  }, [noMore]);
+  function getItemData(data) {
+    return {
+      key: data[itemKey],
+      height: itemHeight,
+      width: itemWidth
+    };
+  }
+  function getColumnCount(elementWidth, gridGap) {
+    return Math.floor((elementWidth + gridGap) / ((itemWidth !== null && itemWidth !== void 0 ? itemWidth : 0) + gridGap));
+  }
+  function getWindowMargin(windowHeight) {
+    return Math.round(windowHeight * 1.5);
+  }
+  var dataList = useMemo(function () {
+    return data ? data.list || [] : [];
+  }, [data]);
+  return /*#__PURE__*/React.createElement(GridList, {
+    className: "cloudapp-dynamic-grid-list ".concat(props.className || ''),
+    items: dataList,
+    ref: containerRef,
+    getItemData: getItemData,
+    getColumnCount: getColumnCount,
+    getWindowMargin: getWindowMargin,
+    renderItem: renderItem,
+    getGridGap: getGridGap
+  });
+}
+export default DynamicGridList;

package/es/DynamicList/demo.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function (): React.JSX.Element;