@cloud-app-dev/vidc 2.2.0-alpha.7 → 3.0.0

package/es/DomMove/index.js

@@ -0,0 +1,145 @@
+import _useEventListener from "ahooks/es/useEventListener";
+import _useUpdate from "ahooks/es/useUpdate";
+import _useSize from "ahooks/es/useSize";
+import React, { useEffect, useImperativeHandle, useRef } from 'react';
+import { getPosition, getMouseXY } from './utils';
+
+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;
+  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 && 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]);
+  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) {
+    ref.current.isDrag = false;
+    onDragEnd && onDragEnd(event, ref.current.position);
+  }, {
+    target: document.body
+  });
+
+  _useEventListener('mousedown', function (event) {
+    var _getMouseXY2 = getMouseXY(event),
+        x = _getMouseXY2.x,
+        y = _getMouseXY2.y;
+
+    ref.current.deviation.offsetX = x - ref.current.position.x;
+    ref.current.deviation.offsetY = y - ref.current.position.y;
+    ref.current.isDrag = true;
+  }, {
+    target: dragRef
+  });
+
+  var _ref3 = onDrag ? {
+    x: position.x,
+    y: 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.width,
+      height: size.height
+    }
+  }, children);
+}
+
+DomMove.defaultProps = {
+  className: '',
+  size: {
+    width: '100%',
+    height: '100%'
+  }
+};
+export default /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(DomMove, Object.assign({}, 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/{Picture/component/MoveContent → DomMove}/utils.js

@@ -16,4 +16,23 @@ export function getPosition(obj) {
     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/Drawer/index.d.ts

@@ -1,7 +1,7 @@
-import { DrawerProps } from './interface';
+import { IDrawerProps } from './interface';
 import React from 'react';
 import './index.less';
-declare function Drawer({ style, getContainer, onClose, className, onOk, cancelText, okText, children, ...props }: DrawerProps): JSX.Element;
+declare function Drawer({ style, getContainer, onClose, className, onOk, cancelText, okText, children, ...props }: IDrawerProps): JSX.Element;
 declare namespace Drawer {
     var defaultProps: {
         getContainer: boolean;

package/es/Drawer/interface.d.ts

@@ -1,180 +1,10 @@
-import * as React from 'react';
-declare type EventType = React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement | HTMLButtonElement>;
-declare type getContainerFunc = () => HTMLElement;
-declare const PlacementTypes: ['top', 'right', 'bottom', 'left'];
-declare type placementType = typeof PlacementTypes[number];
-export interface PushState {
-  distance: string | number;
-}
-export interface DrawerProps {
-  children?: React.ReactNode;
-  /**
-   * @description 是否显示右上角的关闭按钮
-   * @default true
-   */
-  closable?: boolean;
-
-  /**
-   * @description 自定义关闭图标
-   * @default <CloseOutlined />
-   */
-  closeIcon?: React.ReactNode;
-
-  /**
-   * @description 关闭时销毁 Drawer 里的子元素
-   * @default false
-   */
-  destroyOnClose?: boolean;
-
-  /**
-   * @description 预渲染 Drawer 内元素
-   * @default false
-   */
-  forceRender?: boolean;
-
-  /**
-   * @description 指定 Drawer 挂载的 HTML 节点, false 为挂载在当前 dom
-   * @default body
-   * @type HTMLElement | () => HTMLElement | Selectors | false
-   */
-  getContainer?: string | HTMLElement | getContainerFunc | false;
-
-  /**
-   * @description 点击蒙层是否允许关闭
-   * @default true
-   */
-  maskClosable?: boolean;
-
-  /**
-   * @description 是否展示遮罩
-   * @default true
-   */
-  mask?: boolean;
-
-  /**
-   * @description 遮罩样式
-   * @default -
-   */
-  maskStyle?: React.CSSProperties;
-
-  /**
-   * @description 可用于设置 Drawer 最外层容器的样式，和 drawerStyle 的区别是作用节点包括 mask
-   * @default -
-   */
-  style?: React.CSSProperties;
-
-  /**
-   * @description 用于设置 Drawer 弹出层的样式
-   * @default -
-   */
-  drawerStyle?: React.CSSProperties;
-
-  /**
-   * @description 用于设置 Drawer 头部的样式
-   * @default -
-   */
-  headerStyle?: React.CSSProperties;
-
-  /**
-   * @description 可用于设置 Drawer 内容部分的样式
-   * @default -
-   */
-  bodyStyle?: React.CSSProperties;
-
-  /**
-   * @description 标题
-   * @default -
-   */
-  title?: React.ReactNode;
-
-  /**
-   * @description Drawer 是否可见
-   * @default -
-   */
-  visible?: boolean;
-
-  /**
-   * @description 	宽度
-   * @default 256
-   */
-  width?: number | string;
+import type { DrawerProps } from 'antd';
 
-  /**
-   * @description 	高度
-   * @default 256
-   */
-  height?: number | string;
-
-  /**
-   * @description 设置 Drawer 的 z-index
-   * @default 1000
-   */
-  zIndex?: number;
-
-  /**
-   * @description 用于设置多层 Drawer 的推动行为
-   * @type boolean | { distance: string | number }
-   * @default { distance: 180 }
-   */
-  push?: boolean | PushState;
-
-  /**
-   * @description 抽屉的方向
-   * @default right
-   */
-  placement?: 'top' | 'right' | 'bottom' | 'left';
-
-  /**
-   * @description 点击遮罩层或右上角叉或取消按钮的回调
-   * @default -
-   */
-  onClose?: (e: EventType) => void;
-
-  /**
-   * @description 点击footer下的确定按钮
-   * @default -
-   */
-  onOk?: (e: EventType) => void;
-
-  /**
-   * @description 切换抽屉时动画结束后的回调
-   * @default -
-   */
-  afterVisibleChange?: (visible: boolean) => void;
-
-  /**
-   * @description 对话框外层容器的类名
-   * @default -
-   */
-  className?: string;
-
-  /**
-   * @description 是否支持键盘 esc 关闭
-   * @default true
-   */
-  keyboard?: boolean;
-
-  /**
-   * @description 抽屉的页脚 可以设为 footer={null}
-   * @type ReactNode
-   * @default (确定取消按钮)
-   */
-  footer?: React.ReactNode | false;
-
-  /**
-   * @description 抽屉页脚部件的样式
-   * @default -
-   * @type CSSProperties
-   */
-  footerStyle?: React.CSSProperties;
-
-  /**
-   * @description 取消按钮文本
-   * @default 取消
-   * @type string
-   */
+export interface IDrawerProps extends DrawerProps {
   cancelText?: string;
 
+  onOk?: (e: any) => void;
+
   /**
    * @description 确认按钮文本
    * @default 确定

package/es/ErrorBoundary/index.d.ts

@@ -0,0 +1,18 @@
+import React, { Component, ErrorInfo } from 'react';
+export declare type IErrorBoundaryProps = {
+    fallback?: (() => JSX.Element) | React.ReactNode;
+    children?: React.ReactNode;
+};
+declare type State = {
+    error: boolean;
+};
+declare class ErrorBoundary extends Component<IErrorBoundaryProps, State> {
+    state: State;
+    static defaultProps: {
+        fallback: () => JSX.Element;
+    };
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    render(): string | number | boolean | JSX.Element | React.ReactFragment;
+}
+export default ErrorBoundary;

package/es/ErrorBoundary/index.js

@@ -0,0 +1,84 @@
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+import React, { Component } from 'react';
+
+var ErrorBoundary = /*#__PURE__*/function (_Component) {
+  _inherits(ErrorBoundary, _Component);
+
+  var _super = _createSuper(ErrorBoundary);
+
+  function ErrorBoundary() {
+    var _this;
+
+    _classCallCheck(this, ErrorBoundary);
+
+    _this = _super.apply(this, arguments);
+    _this.state = {
+      error: false
+    };
+    return _this;
+  }
+
+  _createClass(ErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, info) {
+      console.error('ErrorBoundary:', error, info);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var error = this.state.error;
+      var _this$props = this.props,
+          children = _this$props.children,
+          fallback = _this$props.fallback;
+
+      if (error) {
+        if ( /*#__PURE__*/React.isValidElement(fallback)) {
+          return fallback;
+        }
+
+        if (typeof fallback === 'function') {
+          return fallback();
+        }
+      }
+
+      return children;
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError(error) {
+      return {
+        error: true
+      };
+    }
+  }]);
+
+  return ErrorBoundary;
+}(Component);
+
+ErrorBoundary.defaultProps = {
+  fallback: function fallback() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
+};
+export default ErrorBoundary;

package/es/List/DynamicGridList/Demo.js

@@ -1,3 +1,15 @@
+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; }
+
 import React from 'react';
 import GridList from './index';
 
@@ -5,33 +17,36 @@ 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 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
+    };
+  });
+};
 
-var App = function App() {
-  function loadNextPage(d) {
-    return new Promise(function (resolve) {
-      setTimeout(function () {
-        resolve({
-          list: IMAGES
-        });
-      });
-    });
-  }
+function loadPage() {
+  var d = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  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) {
+    setTimeout(function () {
+      return resolve(d);
+    }, 500);
+  });
+}
 
+var App = function App() {
   return /*#__PURE__*/React.createElement("div", {
     style: {
-      height: 800,
-      overflow: 'auto'
+      height: 400
     }
   }, /*#__PURE__*/React.createElement(GridList, {
     itemKey: "url",
@@ -52,6 +67,7 @@ var App = function App() {
         }
       }, /*#__PURE__*/React.createElement("img", {
         src: image.url,
+        alt: "",
         style: {
           objectFit: 'cover',
           display: 'block',
@@ -60,10 +76,7 @@ var App = function App() {
         }
       })), /*#__PURE__*/React.createElement("p", null, "\u6807\u9898"), /*#__PURE__*/React.createElement("p", null, "\u63CF\u8FF0"));
     },
-    loadNextPage: loadNextPage,
-    isNoMore: function isNoMore() {
-      return false;
-    }
+    loadPage: loadPage
   }));
 };
 

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

@@ -1,26 +1,27 @@
 import React from 'react';
+import { GridListCell } from '../GridList/interface';
+import { TData } from '../../useInfiniteScroll';
 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;
+    /**
+     * 重载条件
+     */
+    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>({ itemKey, itemHeight, itemWidth, loadNextPage, reloadDep, isNoMore, renderItem, className, getGridGap }: IDynamicGridListProps<T>): JSX.Element;
+declare function DynamicGridList<T>({ renderItem, itemHeight, itemKey, itemWidth, reloadDeps, getGridGap, loadPage, isNoMore, threshold, ...props }: IDynamicGridListProps<T>): JSX.Element;
 declare namespace DynamicGridList {
-    var defaultProps: {
-        itemWidth: number;
-        itemHeight: number;
-        className: string;
-        getGridGap: () => number;
-    };
+    var defaultProps: any;
 }
 export default DynamicGridList;