@cloud-app-dev/vidc 2.0.0-alpha.1 → 2.0.0-alpha.2

package/es/Drawer/interface.d.ts

@@ -0,0 +1,191 @@
+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;
+
+  /**
+   * @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
+   */
+  cancelText?: string;
+
+  /**
+   * @description 确认按钮文本
+   * @default 确定
+   * @type string
+   */
+  okText?: string;
+}
+
+export interface IFooterProps {
+  onClose: (e: any) => void;
+  cancelText: string;
+  okText: string;
+  onOk: (e: any) => void;
+}

package/es/DynamicDeviceList/CheckExt.js

@@ -1,7 +1,7 @@
-import _IconFont from "@cloud-app-dev/basic-components/es/IconFont";
 import "antd/lib/tooltip/style";
 import _Tooltip from "antd/lib/tooltip";
 import React from 'react';
+import IconFont from '../IconFont';
 
 function CheckExt(_ref) {
   var selectCount = _ref.selectCount,
@@ -14,12 +14,12 @@ function CheckExt(_ref) {
     className: "select-group"
   }, /*#__PURE__*/React.createElement(_Tooltip, {
     title: "\u9009\u4E2D\u6240\u6709\u5DF2\u52A0\u8F7D"
-  }, /*#__PURE__*/React.createElement(_IconFont, {
+  }, /*#__PURE__*/React.createElement(IconFont, {
     type: "icon-S_Photo_MarkYes",
     onClick: onCheck
   })), /*#__PURE__*/React.createElement(_Tooltip, {
     title: "\u53D6\u6D88\u9009\u4E2D\u6240\u6709\u5DF2\u52A0\u8F7D\u9879"
-  }, /*#__PURE__*/React.createElement(_IconFont, {
+  }, /*#__PURE__*/React.createElement(IconFont, {
     type: "icon-MarkNo",
     onClick: onCancel
   }))), /*#__PURE__*/React.createElement("span", null, "\u5DF2\u9009 ", /*#__PURE__*/React.createElement("span", {

package/es/DynamicDeviceList/index.js

@@ -1,6 +1,5 @@
 import "antd/lib/checkbox/style";
 import _Checkbox from "antd/lib/checkbox";
-import _DynamicList from "@cloud-app-dev/basic-components/es/DynamicList";
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
@@ -24,6 +23,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import { __awaiter } from "tslib";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import DynamicList from '../DynamicList';
 import { queryDeviceList } from './utils';
 import DeviceIcon from '../DeviceIcon';
 import TreeTitle from '../TreeTitle';
@@ -185,7 +185,7 @@ function DynamicDeviceList(_ref) {
     selectCount: state.checkedKeys.length,
     onCancel: onCancelAll,
     onCheck: onSelectAll
-  }), /*#__PURE__*/React.createElement(_DynamicList, {
+  }), /*#__PURE__*/React.createElement(DynamicList, {
     list: state.list,
     loadMore: loadNextPage,
     rowCount: state.count,

package/es/DynamicDeviceList/utils.js

@@ -1,8 +1,8 @@
-import _Service from "@cloud-app-dev/basic-components/es/Service";
+import Service from '../Service';
 import { getHeader } from '../utils';
 export function queryDeviceList() {
   var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return _Service.$http({
+  return Service.$http({
     method: 'post',
     url: '/api/udm-api/device/queryList',
     requestId: 'queryDeviceList',

package/es/DynamicList/demo.d.ts

@@ -0,0 +1,2 @@
+declare const App: () => JSX.Element;
+export default App;

package/es/DynamicList/demo.js

@@ -0,0 +1,71 @@
+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 _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 _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 React, { useCallback, useState } from 'react';
+import DynamicList from './index';
+var defaultList = Array.from(new Array(20)).map(function (_, i) {
+  return {
+    name: "\u6211\u662F\u5217\u8868".concat(i),
+    id: i
+  };
+});
+
+var App = function App() {
+  var _useState = useState(defaultList),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var loadMore = useCallback(function () {
+    console.log(11111);
+    return new Promise(function (resolve) {
+      setTimeout(function () {
+        setState(function (old) {
+          return [].concat(_toConsumableArray(old), _toConsumableArray(defaultList));
+        });
+        resolve(true);
+      }, 500);
+    });
+  }, [state]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: 400,
+      width: 300
+    }
+  }, /*#__PURE__*/React.createElement(DynamicList, {
+    list: state,
+    rowCount: 300,
+    renderItem: function renderItem(item, index) {
+      return /*#__PURE__*/React.createElement("span", {
+        style: {
+          padding: '0 20px',
+          lineHeight: '40px'
+        }
+      }, item.name, "-", index);
+    },
+    loadMore: loadMore
+  })));
+};
+
+export default App;

package/es/DynamicList/index.css

@@ -0,0 +1,7 @@
+.lm-c-dynamiclist {
+  position: relative;
+  background-color: transparent;
+  width: 100%;
+  height: 100%;
+  border: 1px solid var(--bd-color);
+}

package/es/DynamicList/index.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import './index.less';
+interface IDynamicListProps {
+    /**
+     * @description 列表数据
+     */
+    list: any[];
+    /**
+     * @description 懒加载触发触发条件
+     */
+    threshold?: number;
+    /**
+     * @description 列表渲染函数
+     */
+    renderItem: (item: any, index: number) => JSX.Element;
+    className?: string;
+    /**
+     * @description 单个列表高度
+     */
+    itemHeight?: number;
+    /**
+     * @description 懒加载方法，注意需要自己手动控制节流
+     */
+    loadMore: () => Promise<any>;
+    /**
+     * @description 列表总数
+     */
+    rowCount: number;
+}
+declare const DynamicList: React.ForwardRefExoticComponent<IDynamicListProps & React.RefAttributes<any>>;
+export default DynamicList;

package/es/DynamicList/index.js

@@ -0,0 +1,132 @@
+import "antd/lib/skeleton/style";
+import _Skeleton from "antd/lib/skeleton";
+import { __awaiter } from "tslib";
+import React, { useRef, useImperativeHandle, forwardRef, useCallback } from 'react';
+import { AutoSizer, InfiniteLoader, List } from 'react-virtualized';
+import "./index.css";
+var DynamicList = /*#__PURE__*/forwardRef(function InfiniteScrollLayout(props, ref) {
+  var _this = this;
+
+  var list = props.list,
+      itemHeight = props.itemHeight,
+      threshold = props.threshold,
+      rowCount = props.rowCount,
+      loadMore = props.loadMore,
+      _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      renderItem = props.renderItem;
+  var infiniteRef = useRef(null);
+  var loadRef = useRef(false);
+
+  function forceUpdateGrid() {
+    infiniteRef.current && infiniteRef.current._registeredChild.forceUpdateGrid();
+  }
+
+  function scrollToPosition() {
+    var _infiniteRef$current$;
+
+    infiniteRef.current && (_infiniteRef$current$ = infiniteRef.current._registeredChild).scrollToPosition.apply(_infiniteRef$current$, arguments);
+  }
+
+  function scrollToRow() {
+    var _infiniteRef$current$2;
+
+    infiniteRef.current && (_infiniteRef$current$2 = infiniteRef.current._registeredChild).scrollToRow.apply(_infiniteRef$current$2, arguments);
+  }
+
+  useImperativeHandle(ref, function () {
+    return {
+      forceUpdateGrid: forceUpdateGrid,
+      scrollToRow: scrollToRow,
+      scrollToPosition: scrollToPosition
+    };
+  });
+
+  var _isRowLoaded = useCallback(function (_ref) {
+    var index = _ref.index;
+    return !!list[index];
+  }, []);
+
+  var loadMoreAction = useCallback(function (params) {
+    return __awaiter(_this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!loadRef.current) {
+                _context.next = 2;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 2:
+              loadRef.current = true;
+
+              if (params.stopIndex < list.length || list.length >= rowCount) {
+                _context.next = 6;
+                break;
+              }
+
+              _context.next = 6;
+              return loadMore();
+
+            case 6:
+              loadRef.current = false;
+
+            case 7:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+  }, [list, rowCount]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "lm-c-dynamiclist  ".concat(className)
+  }, /*#__PURE__*/React.createElement(InfiniteLoader, {
+    isRowLoaded: _isRowLoaded,
+    loadMoreRows: loadMoreAction,
+    rowCount: rowCount,
+    ref: infiniteRef,
+    threshold: threshold
+  }, function (_ref2) {
+    var onRowsRendered = _ref2.onRowsRendered,
+        registerChild = _ref2.registerChild;
+    return /*#__PURE__*/React.createElement(AutoSizer, null, function (_ref3) {
+      var width = _ref3.width,
+          height = _ref3.height;
+      return /*#__PURE__*/React.createElement(List, {
+        width: width,
+        onRowsRendered: onRowsRendered,
+        ref: registerChild,
+        height: height,
+        rowCount: rowCount,
+        rowHeight: itemHeight,
+        rowRenderer: function rowRenderer(_ref4) {
+          var key = _ref4.key,
+              index = _ref4.index,
+              style = _ref4.style;
+          return /*#__PURE__*/React.createElement("div", {
+            key: key,
+            style: Object.assign(Object.assign({}, style), {
+              padding: '0 10px'
+            }),
+            className: "dynamic-list-item"
+          }, list[index] ? renderItem(list[index], index) : /*#__PURE__*/React.createElement(_Skeleton, {
+            paragraph: false,
+            loading: true,
+            active: true
+          }));
+        }
+      });
+    });
+  }));
+});
+DynamicList.defaultProps = {
+  itemHeight: 40,
+  threshold: 5,
+  list: [],
+  rowCount: 100
+};
+export default DynamicList;

package/es/FullScreen/index.css

@@ -0,0 +1,16 @@
+.tools-screen-layer {
+  flex: 1;
+  align-self: center;
+  text-align: center;
+  font-size: var(--fs-small);
+  position: relative;
+  cursor: pointer;
+}
+.tools-screen-layer .anticon {
+  padding-right: 5px;
+}
+.tools-screen-layer .defualt-fullscreen-icon {
+  position: relative;
+  top: 1px;
+  font-size: 16px;
+}

package/es/FullScreen/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './index.less';
+interface IFullScrenProps {
+    className?: string;
+    getContainer: () => HTMLElement | Element;
+    fullScreenChange?: (flag: boolean) => void;
+    children?: (flag: boolean) => React.ReactNode;
+}
+declare function FullScreen({ children, className, getContainer, fullScreenChange }: IFullScrenProps): JSX.Element;
+export default FullScreen;

package/es/FullScreen/index.js

@@ -0,0 +1,68 @@
+import _fullScreenHelper from "@cloud-app-dev/utils/es/fullScreenHelper";
+
+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 React, { useState, useEffect } from 'react';
+import IconFont from '../IconFont';
+import "./index.css";
+
+function FullScreen(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      getContainer = _ref.getContainer,
+      fullScreenChange = _ref.fullScreenChange;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      screenState = _useState2[0],
+      setScreenState = _useState2[1];
+
+  useEffect(function () {
+    var onfullscreenchange = function onfullscreenchange() {
+      var fullScreenEle = _fullScreenHelper.isFullscreen();
+
+      var container = getContainer();
+      var flag = container === fullScreenEle;
+      setScreenState(flag);
+      fullScreenChange && fullScreenChange(flag);
+    };
+
+    document.addEventListener('webkitfullscreenchange', onfullscreenchange, false);
+    return function () {
+      return document.removeEventListener('webkitfullscreenchange', onfullscreenchange, false);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [screenState]);
+
+  function onClickFullScreen() {
+    var container = getContainer();
+
+    var fullScreenEle = _fullScreenHelper.isFullscreen();
+
+    var flag = fullScreenEle === container;
+    flag ? _fullScreenHelper.exitFullscreen() : _fullScreenHelper.fullscreen(container);
+    setScreenState(!flag);
+    fullScreenChange && fullScreenChange(!flag);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "tools-screen-layer ".concat(className ? className : ''),
+    onClick: function onClick() {
+      return onClickFullScreen();
+    }
+  }, children ? children(screenState) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconFont, {
+    className: "defualt-fullscreen-icon icon-primary",
+    type: !screenState ? 'icon-S_View_ScreenViewFull' : 'icon-S_View_ScreenViewExit'
+  }), !screenState ? '全屏' : '窗口'));
+}
+
+export default FullScreen;

package/es/HightLevel/index.css

@@ -0,0 +1,3 @@
+.high-level {
+  color: var(--primary-dark);
+}

package/es/HightLevel/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './index.less';
+interface HightLevelProps {
+    keyword: string;
+    name: string;
+}
+declare function HighLevel({ keyword, name }: HightLevelProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof HighLevel>;
+export default _default;

package/es/HightLevel/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { replace, escapeRegExp } from 'lodash';
+import "./index.css";
+
+function HighLevel(_ref) {
+  var keyword = _ref.keyword,
+      name = _ref.name;
+
+  if (!keyword) {
+    return /*#__PURE__*/React.createElement("span", null, name);
+  }
+
+  var reg = new RegExp(escapeRegExp(keyword), 'g');
+  var html = replace(name, reg, "<span class=\"high-level\">".concat(keyword, "</span>"));
+  return /*#__PURE__*/React.createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: html
+    }
+  });
+}
+
+export default /*#__PURE__*/React.memo(HighLevel);

package/es/IconFont/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './index.less';
+interface IconFontProps extends React.HTMLAttributes<HTMLSpanElement> {
+    type?: string;
+    className?: string;
+    title?: string;
+    style?: React.CSSProperties;
+}
+declare function IconFont({ type, className, title, style, ...props }: IconFontProps): JSX.Element;
+declare namespace IconFont {
+    var registerIconFont: (scriptUrl: string) => void;
+}
+export default IconFont;