@cloud-app-dev/vidc 4.0.17 → 4.1.0

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,148 @@
+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); }
+/* 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";
+import { jsx as _jsx } from "react/jsx-runtime";
+function DomMove(_ref) {
+  var onDrag = _ref.onDrag,
+    position = _ref.position,
+    className = _ref.className,
+    size = _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 ? 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 ? 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__*/_jsx("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: children
+  });
+}
+DomMove.defaultProps = {
+  className: '',
+  size: {
+    width: '100%',
+    height: '100%'
+  }
+};
+export default /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/_jsx(DomMove, _objectSpread(_objectSpread({}, 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,33 @@
+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,133 @@
+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); }
+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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+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;
+  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(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); }
+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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+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,2 @@
+declare const App: () => import("react/jsx-runtime").JSX.Element;
+export default App;

package/es/DynamicGridList/demo.js

@@ -0,0 +1,86 @@
+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";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+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__*/_jsx("div", {
+    style: {
+      height: 400
+    },
+    children: /*#__PURE__*/_jsx(GridList, {
+      itemKey: "url",
+      itemHeight: 400,
+      itemWidth: 250,
+      renderItem: function renderItem(image) {
+        return /*#__PURE__*/_jsxs("div", {
+          style: {
+            border: '1px solid gray',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column'
+          },
+          children: [/*#__PURE__*/_jsx("div", {
+            style: {
+              flex: 1,
+              overflow: 'hidden'
+            },
+            children: /*#__PURE__*/_jsx("img", {
+              src: image.url,
+              alt: "",
+              style: {
+                objectFit: 'cover',
+                display: 'block',
+                width: '100%',
+                height: '100%'
+              }
+            })
+          }), /*#__PURE__*/_jsx("p", {
+            children: "\u6807\u9898"
+          }), /*#__PURE__*/_jsx("p", {
+            children: "\u63CF\u8FF0"
+          })]
+        });
+      },
+      loadPage: loadPage
+    })
+  });
+};
+export default App;

package/es/DynamicGridList/index.d.ts

@@ -0,0 +1,27 @@
+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>): import("react/jsx-runtime").JSX.Element;
+declare namespace DynamicGridList {
+    var defaultProps: any;
+}
+export default DynamicGridList;

package/es/DynamicGridList/index.js

@@ -0,0 +1,71 @@
+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";
+import { jsx as _jsx } from "react/jsx-runtime";
+function DynamicGridList(_ref) {
+  var renderItem = _ref.renderItem,
+    itemHeight = _ref.itemHeight,
+    itemKey = _ref.itemKey,
+    itemWidth = _ref.itemWidth,
+    reloadDeps = _ref.reloadDeps,
+    getGridGap = _ref.getGridGap,
+    loadPage = _ref.loadPage,
+    isNoMore = _ref.isNoMore,
+    threshold = _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__*/_jsx(GridList, {
+    className: "dynamic-grid-list ".concat(props.className),
+    items: dataList,
+    ref: containerRef,
+    getItemData: getItemData,
+    getColumnCount: getColumnCount,
+    getWindowMargin: getWindowMargin,
+    renderItem: renderItem,
+    getGridGap: getGridGap
+  });
+}
+DynamicGridList.defaultProps = {
+  reloadDeps: [],
+  className: '',
+  getGridGap: function getGridGap() {
+    return 20;
+  },
+  itemHeight: 300,
+  itemWidth: 250,
+  threshold: 50
+};
+export default DynamicGridList;

package/es/DynamicList/demo.d.ts

@@ -0,0 +1 @@
+export default function (): import("react/jsx-runtime").JSX.Element;