@cloud-app-dev/vidc 3.2.14 → 3.2.15

package/es/List/index.d.ts

@@ -1,6 +1,29 @@
 import React from 'react';
-import { ListProps } from './interface';
 import './index.less';
+export interface ListProps<T> {
+    /**
+     * @description 列表数据
+     * @default []
+     */
+    list?: Array<T>;
+    /**
+     * @description 列表类名
+     * @default ''
+     */
+    className?: string;
+    /**
+     * @description 列表样式
+     * @default -
+     */
+    style?: React.CSSProperties;
+    /**
+     * @description 列表自定义渲染
+     * @default -
+     */
+    renderItem: (item: T, index: number) => JSX.Element;
+    rowHeight?: number;
+    renderHeaderExt?: () => JSX.Element;
+}
 declare function List<T>(props: ListProps<T>): JSX.Element;
 declare namespace List {
     var defaultProps: {
@@ -10,9 +33,9 @@ declare namespace List {
         itemNameKey: string;
         renderHeaderExt: () => JSX.Element;
     };
-    var VList: typeof import("./VList").default;
-    var DynamicList: typeof import("./DynamicList").default;
-    var GridList: React.ForwardRefExoticComponent<import("./GridList").GridListProps<unknown> & React.RefAttributes<HTMLDivElement>>;
-    var DynamicGridList: typeof import("./DynamicGridList").default;
+    var VList: typeof import("../VList").default;
+    var DynamicList: typeof import("../DynamicList").default;
+    var GridList: React.ForwardRefExoticComponent<import("../GridList").GridListProps<unknown> & React.RefAttributes<HTMLDivElement>>;
+    var DynamicGridList: typeof import("../DynamicGridList").default;
 }
 export default List;

package/es/List/index.js

@@ -1,8 +1,9 @@
 import React from 'react';
-import DynamicList from "./DynamicList";
-import GridList from "./GridList";
-import DynamicGridList from "./DynamicGridList";
-import VList from "./VList";
+import DynamicGridList from "../DynamicGridList";
+import DynamicList from "../DynamicList";
+import GridList from "../GridList";
+import VList from "../VList"; // style
+
 import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -20,7 +21,7 @@ function List(props) {
     style: style,
     children: [/*#__PURE__*/_jsx("div", {
       className: "lm-c-list-header",
-      children: renderHeaderExt()
+      children: renderHeaderExt === null || renderHeaderExt === void 0 ? void 0 : renderHeaderExt()
     }), /*#__PURE__*/_jsx("div", {
       className: "lm-c-base-list-layout",
       children: /*#__PURE__*/_jsx(VList, {

package/es/ListWithSizeAnimate/demo.js

@@ -1,6 +1,56 @@
+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 ListWithSizeAnimate 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);
+  });
+}
+
 export default function App() {
   return /*#__PURE__*/_jsx("div", {
     style: {
@@ -9,6 +59,77 @@ export default function App() {
     },
     children: /*#__PURE__*/_jsx(ListWithSizeAnimate, {
       headerSize: 400,
+      header: /*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/_jsxs("ul", {
+          children: [/*#__PURE__*/_jsx("li", {
+            children: "\u6761\u4EF61"
+          }), /*#__PURE__*/_jsx("li", {
+            children: "\u6761\u4EF62"
+          }), /*#__PURE__*/_jsx("li", {
+            children: "\u6761\u4EF63"
+          }), /*#__PURE__*/_jsx("li", {
+            children: "\u6761\u4EF63"
+          }), /*#__PURE__*/_jsx("li", {
+            children: "\u6761\u4EF63"
+          }), /*#__PURE__*/_jsx("li", {
+            children: "\u6761\u4EF63"
+          }), /*#__PURE__*/_jsx("li", {
+            children: "\u6761\u4EF63"
+          }), /*#__PURE__*/_jsx("li", {
+            children: "\u6761\u4EF63"
+          }), /*#__PURE__*/_jsx("li", {
+            children: "\u6761\u4EF63"
+          }), /*#__PURE__*/_jsx("li", {
+            children: "\u6761\u4EF63"
+          }), /*#__PURE__*/_jsx("li", {
+            children: "\u6761\u4EF63"
+          }), /*#__PURE__*/_jsx("li", {
+            children: "\u6761\u4EF63"
+          }), /*#__PURE__*/_jsx("li", {
+            children: "\u6761\u4EF63"
+          }), /*#__PURE__*/_jsx("li", {
+            children: "\u6761\u4EF63"
+          }), /*#__PURE__*/_jsx("li", {
+            children: "\u6761\u4EF63"
+          }), /*#__PURE__*/_jsx("li", {
+            children: "\u6761\u4EF63"
+          })]
+        })
+      }),
+      itemKey: "url",
+      itemHeight: 300,
+      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,
       children: /*#__PURE__*/_jsx("div", {
         style: {
           height: 800

package/es/ListWithSizeAnimate/index.d.ts

@@ -1,9 +1,14 @@
 import React from 'react';
+import { IDynamicGridListProps } from '../DynamicGridList';
 import './index.less';
-interface IListWithSizeAnimateProps {
+interface IListWithSizeAnimateProps<T> extends IDynamicGridListProps<T> {
     headerSize: number;
     children?: React.ReactNode;
     header?: React.ReactNode;
 }
-declare function ListWithSizeAnimate({ headerSize, children, header }: IListWithSizeAnimateProps): JSX.Element;
+interface IListWithSizeAnimateRef {
+    open: () => void;
+    close: () => void;
+}
+declare const ListWithSizeAnimate: React.ForwardRefExoticComponent<IListWithSizeAnimateProps<unknown> & React.RefAttributes<IListWithSizeAnimateRef>>;
 export default ListWithSizeAnimate;

package/es/ListWithSizeAnimate/index.js

@@ -1,4 +1,11 @@
 import _useEventListener from "ahooks/es/useEventListener";
+var _excluded = ["headerSize", "header"];
+
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -12,16 +19,22 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useMemo, useRef } from 'react';
+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 React, { useImperativeHandle, useMemo, useRef } from 'react';
+import DynamicGridList from "../DynamicGridList";
 import useSimpleState from "../useSimpleState";
 import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var ListWithSizeAnimate = /*#__PURE__*/React.forwardRef(function ListWithSizeAnimate(_ref, forwardRef) {
+  var _ref$current;
 
-function ListWithSizeAnimate(_ref) {
   var headerSize = _ref.headerSize,
-      children = _ref.children,
-      header = _ref.header;
+      header = _ref.header,
+      props = _objectWithoutProperties(_ref, _excluded);
 
   var _useSimpleState = useSimpleState({
     open: true
@@ -39,20 +52,49 @@ function ListWithSizeAnimate(_ref) {
   }, [headerHeight]);
 
   _useEventListener('wheel', function (event) {
-    updateState({
-      open: event.deltaY < 0
-    });
+    if (event.deltaY > 0 && state.open) {
+      updateState({
+        open: false
+      });
+    }
   }, {
     target: ref
   });
 
+  _useEventListener('scroll', function (event) {
+    var _event$currentTarget;
+
+    if (((_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : _event$currentTarget.scrollTop) === 0) {
+      updateState({
+        open: true
+      });
+    }
+  }, {
+    target: (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector('.cloudapp-dynamic-grid-list')
+  });
+
+  useImperativeHandle(forwardRef, function () {
+    return {
+      open: function open() {
+        return updateState({
+          open: true
+        });
+      },
+      close: function close() {
+        return updateState({
+          open: false
+        });
+      }
+    };
+  }, []);
   return /*#__PURE__*/_jsxs("div", {
     className: "list-with-size-animate-layout",
     ref: ref,
     children: [/*#__PURE__*/_jsx("div", {
       className: "list-animate-header",
       style: {
-        height: headerHeight
+        height: headerHeight,
+        overflow: !state.open ? 'hidden' : undefined
       },
       children: /*#__PURE__*/_jsx("div", {
         className: "list-animate-header-content",
@@ -63,9 +105,8 @@ function ListWithSizeAnimate(_ref) {
       style: {
         height: contentHeight
       },
-      children: children
+      children: /*#__PURE__*/_jsx(DynamicGridList, _objectSpread({}, props))
     })]
   });
-}
-
+});
 export default ListWithSizeAnimate;

package/es/ListWithSizeAnimate/index.less

@@ -9,5 +9,6 @@
   .list-animate-content {
     background-color: blue;
     overflow: hidden;
+    transition: height 0.3s;
   }
 }

package/es/ScreenPlayer/Live.js

@@ -80,7 +80,7 @@ function LivePlayer(_ref) {
     var _playerRef$current, _playerRef$current$ci;
 
     var item = list ? list[state.selectIndex] : {};
-    var cid = item.cid;
+    var cid = item === null || item === void 0 ? void 0 : item.cid;
     return cid ? (_playerRef$current = playerRef.current) === null || _playerRef$current === void 0 ? void 0 : (_playerRef$current$ci = _playerRef$current[cid]) === null || _playerRef$current$ci === void 0 ? void 0 : _playerRef$current$ci.current : undefined;
   }; // 更新状态
 

package/es/ScreenPlayer/ScreenSelect.js

@@ -2,8 +2,8 @@ import "antd/lib/select/style";
 import _Select from "antd/lib/select";
 import React, { useMemo } from 'react';
 import CustomRenderSelect from "../CustomRenderSelect";
-import { ScreenType } from "./utils";
 import IconFont from "../Player/iconfont";
+import { ScreenType } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 

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

@@ -11,17 +11,18 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React, { useRef } from 'react';
-import useVirtualList from "../../useVirtualList";
+import useVirtualList from "../useVirtualList";
 import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 
 function VList(_ref) {
   var className = _ref.className,
       rowHeight = _ref.rowHeight,
-      data = _ref.data,
+      _ref$data = _ref.data,
+      data = _ref$data === void 0 ? [] : _ref$data,
       renderItem = _ref.renderItem;
-  var containerRef = useRef();
-  var wrapperRef = useRef();
+  var containerRef = useRef(null);
+  var wrapperRef = useRef(null);
 
   var _useVirtualList = useVirtualList(data, {
     containerTarget: containerRef,

package/es/index.d.ts

@@ -11,9 +11,12 @@ export { default as DisableMark } from './DisableMark';
 export { default as DomMove } from './DomMove';
 export { default as Drag } from './Drag';
 export { default as Drawer } from './Drawer';
+export { default as DynamicGridList } from './DynamicGridList';
+export { default as DynamicList } from './DynamicList';
 export { default as ErrorFallback } from './ErrorFallback';
 export { default as FrontendPlayer } from './FrontendPlayer';
 export { default as FullScreen } from './FullScreen';
+export { default as GridList } from './GridList';
 export { default as HightLevel } from './HightLevel';
 export { default as IconFont } from './IconFont';
 export { default as ImageView } from './ImageView';
@@ -38,6 +41,7 @@ export { default as TableLayout } from './TableLayout';
 export { default as ThemeAntd } from './ThemeAntd';
 export { default as Timeout } from './Timeout';
 export { default as Tree } from './Tree';
+export { default as VList } from './VList';
 export { default as useDrawROI } from './useDrawROI';
 export { default as useEventEmitterHandle } from './useEventEmitterHandle';
 export { default as useFullscreen } from './useFullscreen';

package/es/index.js

@@ -11,9 +11,12 @@ export { default as DisableMark } from "./DisableMark";
 export { default as DomMove } from "./DomMove";
 export { default as Drag } from "./Drag";
 export { default as Drawer } from "./Drawer";
+export { default as DynamicGridList } from "./DynamicGridList";
+export { default as DynamicList } from "./DynamicList";
 export { default as ErrorFallback } from "./ErrorFallback";
 export { default as FrontendPlayer } from "./FrontendPlayer";
 export { default as FullScreen } from "./FullScreen";
+export { default as GridList } from "./GridList";
 export { default as HightLevel } from "./HightLevel";
 export { default as IconFont } from "./IconFont";
 export { default as ImageView } from "./ImageView";
@@ -38,6 +41,7 @@ export { default as TableLayout } from "./TableLayout";
 export { default as ThemeAntd } from "./ThemeAntd";
 export { default as Timeout } from "./Timeout";
 export { default as Tree } from "./Tree";
+export { default as VList } from "./VList";
 export { default as useDrawROI } from "./useDrawROI";
 export { default as useEventEmitterHandle } from "./useEventEmitterHandle";
 export { default as useFullscreen } from "./useFullscreen";

package/package.json

@@ -2,7 +2,7 @@
   "private": false,
   "name": "@cloud-app-dev/vidc",
   "description": "Video Image Data Componennts",
-  "version": "3.2.14",
+  "version": "3.2.15",
   "scripts": {
     "docs:deploy": "gh-pages -d docs-dist",
     "build": "npm run entry && father build",