@cloud-app-dev/vidc 2.3.0 → 3.0.2

package/es/{useHttp → useInfiniteScroll}/index.js

@@ -1,3 +1,6 @@
+import _useUpdateEffect from "ahooks/es/useUpdateEffect";
+import _useEventListener from "ahooks/es/useEventListener";
+
 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."); }
@@ -10,69 +13,102 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-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); }
-
-import { useCallback, useEffect, useMemo, useState } from 'react';
-var cacheMemory = {};
+import { useEffect, useMemo, useState } from 'react';
+import { getTargetElement } from 'ahooks/es/utils/domTarget';
+import { getClientHeight, getScrollHeight, getScrollTop } from 'ahooks/es/utils/rect';
 
-function useHttp(key, fetcher) {
-  var cacheKey = useMemo(function () {
-    return Array.isArray(key) ? key.map(function (v) {
-      return _typeof(v) === 'object' ? JSON.stringify(v) : v;
-    }).join('-') : JSON.stringify(key);
-  }, [key]);
+function useInfiniteScroll(fetcher, options) {
+  var target = options.target,
+      isNoMore = options.isNoMore,
+      threshold = options.threshold,
+      reloadDeps = options.reloadDeps;
 
   var _useState = useState({
-    data: cacheMemory[cacheKey],
-    error: undefined,
-    loadding: true,
-    httpKey: Date.now()
+    data: {
+      list: []
+    },
+    loadding: false
   }),
       _useState2 = _slicedToArray(_useState, 2),
       state = _useState2[0],
       setState = _useState2[1]; // eslint-disable-next-line react-hooks/exhaustive-deps
 
 
-  var promiseFetcher = useMemo(function () {
-    return fetcher(key);
-  }, [cacheKey, state.httpKey]);
-  var update = useCallback(function () {
-    delete cacheMemory[cacheKey];
+  var noMore = useMemo(function () {
+    return !isNoMore ? false : isNoMore(state.data);
+  }, [state.data]);
+
+  var loadMore = function loadMore(flag) {
+    if (noMore) {
+      return;
+    }
+
     setState(function (old) {
       return Object.assign(Object.assign({}, old), {
-        httpKey: Date.now()
-      });
-    });
-  }, [cacheKey]);
-  useEffect(function () {
-    setState(function (old) {
-      return old.loadding ? old : Object.assign(Object.assign({}, old), {
         loadding: true
       });
     });
-    promiseFetcher.then(function (res) {
-      cacheMemory[cacheKey] = res;
-      setState(function (old) {
+    fetcher(flag ? {
+      list: []
+    } : state.data).then(function (res) {
+      return setState(function (old) {
         return Object.assign(Object.assign({}, old), {
-          data: res,
+          data: Object.assign({}, res),
           loadding: false
         });
       });
-    }).catch(function (e) {
-      setState(function (old) {
-        return Object.assign(Object.assign({}, old), {
-          error: e,
-          loadding: false
-        });
-      });
-    }); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [promiseFetcher, cacheKey]);
+    });
+  }; // eslint-disable-next-line react-hooks/exhaustive-deps
+
+
+  useEffect(function () {
+    return loadMore(true);
+  }, reloadDeps ? reloadDeps : [reloadDeps]);
+
+  var scrollMethod = function scrollMethod() {
+    var el = getTargetElement(target);
+
+    if (!el) {
+      return;
+    }
+
+    var scrollTop = getScrollTop(el);
+    var scrollHeight = getScrollHeight(el);
+    var clientHeight = getClientHeight(el);
+
+    if (scrollHeight - scrollTop <= clientHeight + (threshold || 50)) {
+      loadMore();
+    }
+  };
+
+  _useEventListener('scroll', function () {
+    if (state.loadding) {
+      return;
+    }
+
+    scrollMethod();
+  }, {
+    target: target
+  });
+
+  _useUpdateEffect(function () {
+    var el = getTargetElement(target);
+
+    if (!el) {
+      return;
+    }
+
+    el.scrollTo({
+      left: 0,
+      top: 0
+    });
+  }, reloadDeps ? reloadDeps : []);
+
   return {
-    update: update,
+    noMore: noMore,
     data: state.data,
-    error: state.error,
-    loadding: state.loadding
+    loading: state.loadding
   };
 }
 
-export default useHttp;
+export default useInfiniteScroll;

package/es/useVirtualList/index.d.ts

@@ -0,0 +1,13 @@
+import type { BasicTarget } from 'ahooks/es/utils/domTarget';
+declare type ItemHeight<T> = (index: number, data: T) => number;
+export interface Options<T> {
+    containerTarget: BasicTarget;
+    wrapperTarget: BasicTarget;
+    itemHeight: number | ItemHeight<T>;
+    overscan?: number;
+}
+declare const useVirtualList: <T = any>(list: T[], options: Options<T>) => readonly [{
+    index: number;
+    data: T;
+}[], (index: number) => void];
+export default useVirtualList;

package/es/useVirtualList/index.js

@@ -0,0 +1,175 @@
+import _useMemoizedFn from "ahooks/es/useMemoizedFn";
+import _useEventListener from "ahooks/es/useEventListener";
+import _useSize from "ahooks/es/useSize";
+import _useLatest from "ahooks/es/useLatest";
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import { useEffect, useMemo, useState, useRef, useLayoutEffect } from 'react';
+import { getTargetElement } from 'ahooks/es/utils/domTarget';
+import { isNumber } from 'ahooks/es/utils';
+
+var useVirtualList = function useVirtualList(list, options) {
+  var containerTarget = options.containerTarget,
+      wrapperTarget = options.wrapperTarget,
+      itemHeight = options.itemHeight,
+      _options$overscan = options.overscan,
+      overscan = _options$overscan === void 0 ? 5 : _options$overscan;
+
+  var itemHeightRef = _useLatest(itemHeight);
+
+  var size = _useSize(containerTarget);
+
+  var scrollTriggerByScrollToFunc = useRef(false);
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      targetList = _useState2[0],
+      setTargetList = _useState2[1];
+
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      offsetTop = _useState4[0],
+      setOffsetTop = _useState4[1];
+
+  var getVisibleCount = function getVisibleCount(containerHeight, fromIndex) {
+    if (isNumber(itemHeightRef.current)) {
+      return Math.ceil(containerHeight / itemHeightRef.current);
+    }
+
+    var sum = 0;
+    var endIndex = 0;
+
+    for (var i = fromIndex; i < list.length; i++) {
+      var height = itemHeightRef.current(i, list[i]);
+      sum += height;
+      endIndex = i;
+
+      if (sum >= containerHeight) {
+        break;
+      }
+    }
+
+    return endIndex - fromIndex;
+  };
+
+  var getOffset = function getOffset(scrollTop) {
+    if (isNumber(itemHeightRef.current)) {
+      return Math.floor(scrollTop / itemHeightRef.current) + 1;
+    }
+
+    var sum = 0;
+    var offset = 0;
+
+    for (var i = 0; i < list.length; i++) {
+      var height = itemHeightRef.current(i, list[i]);
+      sum += height;
+
+      if (sum >= scrollTop) {
+        offset = i;
+        break;
+      }
+    }
+
+    return offset + 1;
+  }; // 获取上部高度
+
+
+  var getDistanceTop = function getDistanceTop(index) {
+    if (isNumber(itemHeightRef.current)) {
+      var _height = index * itemHeightRef.current;
+
+      return _height;
+    }
+
+    var height = list.slice(0, index).reduce(function (sum, _, i) {
+      return sum + itemHeightRef.current(i, list[i]);
+    }, 0);
+    return height;
+  };
+
+  var totalHeight = useMemo(function () {
+    if (isNumber(itemHeightRef.current)) {
+      return list.length * itemHeightRef.current;
+    }
+
+    return list.reduce(function (sum, _, index) {
+      return sum + itemHeightRef.current(index, list[index]);
+    }, 0); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [list]);
+  useLayoutEffect(function () {
+    var wrapper = getTargetElement(wrapperTarget);
+    wrapper.style.height = totalHeight - offsetTop + 'px';
+    wrapper.style.marginTop = offsetTop + 'px';
+  }, [totalHeight, wrapperTarget, offsetTop]);
+
+  var calculateRange = function calculateRange() {
+    var container = getTargetElement(containerTarget);
+    var wrapper = getTargetElement(wrapperTarget);
+
+    if (container && wrapper) {
+      var scrollTop = container.scrollTop,
+          clientHeight = container.clientHeight;
+      var offset = getOffset(scrollTop);
+      var visibleCount = getVisibleCount(clientHeight, offset);
+      var start = Math.max(0, offset - overscan);
+      var end = Math.min(list.length, offset + visibleCount + overscan);
+
+      var _offsetTop = getDistanceTop(start);
+
+      setOffsetTop(_offsetTop); // wrapper.style.height = totalHeight - offsetTop + 'px';
+      // wrapper.style.marginTop = offsetTop + 'px';
+
+      setTargetList(list.slice(start, end).map(function (ele, index) {
+        return {
+          data: ele,
+          index: index + start
+        };
+      }));
+    }
+  };
+
+  useEffect(function () {
+    if (!(size === null || size === void 0 ? void 0 : size.width) || !(size === null || size === void 0 ? void 0 : size.height)) {
+      return;
+    }
+
+    calculateRange(); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [size === null || size === void 0 ? void 0 : size.width, size === null || size === void 0 ? void 0 : size.height, list]);
+
+  _useEventListener('scroll', function (e) {
+    if (scrollTriggerByScrollToFunc.current) {
+      scrollTriggerByScrollToFunc.current = false;
+      return;
+    }
+
+    e.preventDefault();
+    calculateRange();
+  }, {
+    target: containerTarget
+  });
+
+  var scrollTo = function scrollTo(index) {
+    var container = getTargetElement(containerTarget);
+
+    if (container) {
+      scrollTriggerByScrollToFunc.current = true;
+      container.scrollTop = getDistanceTop(index);
+      calculateRange();
+    }
+  };
+
+  return [targetList, _useMemoizedFn(scrollTo)];
+};
+
+export default useVirtualList;

package/es/withErrorBoundary/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IErrorBoundaryProps } from '../ErrorBoundary';
+/**
+ * HOC
+ * @param Component 业务组件
+ * @param errorBoundaryProps error boundary的props
+ */
+declare function withErrorBoundary<P>(Component: React.ComponentType<P>, errorBoundaryProps?: IErrorBoundaryProps): React.ComponentType<P>;
+export default withErrorBoundary;

package/es/withErrorBoundary/index.js

@@ -0,0 +1,45 @@
+import "antd/lib/button/style";
+import _Button from "antd/lib/button";
+import "antd/lib/result/style";
+import _Result from "antd/lib/result";
+import React from 'react';
+import ErrorBoundary from '../ErrorBoundary';
+
+var Fallback = function Fallback() {
+  return /*#__PURE__*/React.createElement(_Result, {
+    status: "warning",
+    title: "\u7EC4\u4EF6\u65E0\u6CD5\u6210\u529F\u6E32\u67D3\uFF0C\u8BF7\u5237\u65B0\u91CD\u8BD5",
+    style: {
+      width: '100%',
+      height: '100%'
+    },
+    extra: /*#__PURE__*/React.createElement(_Button, {
+      type: "primary",
+      key: "refresh",
+      onClick: function onClick() {
+        return window.location.reload();
+      }
+    }, "\u5237\u65B0\uFF0C\u91CD\u8BD5")
+  });
+};
+/**
+ * HOC
+ * @param Component 业务组件
+ * @param errorBoundaryProps error boundary的props
+ */
+
+
+function withErrorBoundary(Component, errorBoundaryProps) {
+  var Wrapped = function Wrapped(props) {
+    return /*#__PURE__*/React.createElement(ErrorBoundary, Object.assign({
+      fallback: /*#__PURE__*/React.createElement(Fallback, null)
+    }, errorBoundaryProps), /*#__PURE__*/React.createElement(Component, Object.assign({}, props)));
+  }; // DevTools 显示的组件名
+
+
+  var name = Component.displayName || Component.name || 'Unknown';
+  Wrapped.displayName = "withErrorBoundary(".concat(name, ")");
+  return Wrapped;
+}
+
+export default withErrorBoundary;

package/package.json

@@ -2,7 +2,7 @@
   "private": false,
   "name": "@cloud-app-dev/vidc",
   "description": "Video Image Data Componennts",
-  "version": "2.3.0",
+  "version": "3.0.2",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -30,39 +30,36 @@
     ]
   },
   "dependencies": {
-    "add-dom-event-listener": "^1.1.0",
-    "ahooks": "^3.1.0",
+    "ahooks": "^3.7.0",
     "axios": "^0.27.2",
-    "chroma-js": "^2.1.2",
     "flv.zv.js": "^2.2.0",
-    "hls.js": "^1.1.5",
-    "immer": "^9.0.5",
+    "hls.js": "^1.2.1",
+    "immer": "^9.0.15",
     "lodash-es": "^4.17.21",
-    "rc-queue-anim": "^2.0.0"
+    "moment": "^2.29.4"
   },
   "devDependencies": {
-    "@cloud-app-dev/utils": "^3.0.8",
-    "@types/add-dom-event-listener": "^1.1.0",
-    "@types/chroma-js": "^2.1.3",
+    "@cloud-app-dev/utils": "^4.0.1",
+    "@types/leaflet": "^1.7.11",
     "@types/lodash-es": "^4.17.6",
-    "@types/node": "^17.0.5",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.4",
-    "@umijs/test": "^3.5.26",
-    "antd": "^4.21.0",
-    "babel-plugin-import": "^1.13.3",
-    "dumi": "^1.1.42",
+    "@types/node": "^18.7.6",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "@umijs/test": "^4.0.12",
+    "antd": "^4.22.6",
+    "babel-plugin-import": "^1.13.5",
+    "dumi": "^1.1.47",
     "eslint-config-react-app": "^7.0.1",
     "father-build": "^1.22.3",
-    "gh-pages": "^3.0.0",
+    "gh-pages": "^4.0.0",
     "history": "^5.3.0",
     "lint-staged": "^10.0.7",
     "prettier": "^2.2.1",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
     "tslib": "^2.4.0",
-    "typescript": "^4.5.4",
+    "typescript": "^4.7.4",
     "yorkie": "^2.0.0"
   },
   "repository": {

package/release-build.sh

@@ -0,0 +1,44 @@
+#! /bin/sh
+
+pnpm install
+if [ $? -eq 0 ]; then
+  echo "packages install success!"
+else
+  echo "packages install failed!"
+  exit 1
+fi
+
+npm run build
+if [ $? -eq 0 ]; then
+  echo "build success!"
+else
+  echo "build failed!"
+  exit 1
+fi
+
+npm run deploy
+if [ $? -eq 0 ]; then
+  echo "deploy success!"
+else
+  echo "deploy failed!"
+  exit 1
+fi
+
+nrm use npm
+npm publish
+if [ $? -eq 0 ]; then
+  echo "publish success!"
+else
+  echo "publish failed!"
+  exit 1
+fi
+
+git add .
+
+git commit -m "新版本构建发布"
+
+git pull
+
+git push
+
+exit 1

package/test.js

@@ -0,0 +1,48 @@
+const data = [
+  { beginTime: 1660492800000, endTime: 1660495901000 },
+  { beginTime: 1660495901000, endTime: 1660500078000 },
+  { beginTime: 1660500078000, endTime: 1660504255000 },
+  { beginTime: 1660504255000, endTime: 1660508434000 },
+  { beginTime: 1660508434000, endTime: 1660512614000 },
+  { beginTime: 1660512614000, endTime: 1660516805000 },
+  { beginTime: 1660516805000, endTime: 1660520999000 },
+  { beginTime: 1660520999000, endTime: 1660525198000 },
+  { beginTime: 1660525198000, endTime: 1660529393000 },
+  { beginTime: 1660529393000, endTime: 1660533595000 },
+  { beginTime: 1660533595000, endTime: 1660537792000 },
+  { beginTime: 1660537792000, endTime: 1660541987000 },
+  { beginTime: 1660541987000, endTime: 1660546174000 },
+  { beginTime: 1660546174000, endTime: 1660550358000 },
+  { beginTime: 1660550358000, endTime: 1660554546000 },
+  { beginTime: 1660554546000, endTime: 1660557065000 },
+  { beginTime: 1660557065000, endTime: 1660554546000 },
+  { beginTime: 1660558743000, endTime: 1660562938000 },
+  { beginTime: 1660562938000, endTime: 1660567141000 },
+  { beginTime: 1660567141000, endTime: 1660571333000 },
+  { beginTime: 1660571333000, endTime: 1660575521000 },
+  { beginTime: 1660575521000, endTime: 1660579199000 },
+];
+
+function completionSegments(start, end, segments) {
+  const arr = [];
+  if (segments.length > 0 && start < +segments[0].beginTime) {
+    arr.push({ beginTime: start, endTime: +segments[0].beginTime - start });
+  }
+  segments.reduce((prev, current, idx) => {
+    if (arr.length === 0) {
+      prev.push(current);
+    } else if (segments[idx - 1].endTime !== current.beginTime) {
+      prev.push({ beginTime: segments[idx - 1].endTime, endTime: current.beginTime }, current);
+    } else {
+      prev.push(current);
+    }
+
+    return prev;
+  }, arr);
+
+  if (end > +segments[segments.length - 1].endTime) {
+    arr.push({ beginTime: segments[segments.length - 1].endTime, endTime: end });
+  }
+  return arr;
+}
+console.log(completionSegments(1660492800000, 1660579199000, data))

package/es/DeviceIcon/icon.d.ts

@@ -1,9 +0,0 @@
-export interface IOptionsProps {
-    url?: string;
-    color: string;
-    bgColor: string;
-    icon: string;
-    isOnline: boolean;
-}
-/**根据设备类型和状态获取设备展示图标 */
-export declare const getCameraTypeIcon: (type: any, status: any) => IOptionsProps;