@cloud-app-dev/vidc 2.0.0-alpha.11 → 2.0.0-alpha.12

package/es/List/GridList/interface.d.ts

@@ -0,0 +1,59 @@
+import React, { useRef, useMemo, useState, useEffect, RefObject, MutableRefObject } from 'react';
+
+export type ConstRef<T> = Readonly<MutableRefObject<T>>;
+
+export interface ElementSize {
+  width: number;
+  height: number;
+}
+
+export interface ElementScroll {
+  x: number;
+  y: number;
+}
+
+export interface GridListItemData {
+  key: string;
+  height: number;
+  width: number;
+}
+
+export interface GridListEntry<P> {
+  item: P;
+  data: GridListItemData;
+}
+
+export interface GridListConfigData<P> {
+  windowMargin: number;
+  gridGap: number;
+  columnCount: number;
+  entries: GridListEntry<P>[];
+}
+
+export interface GridListContainerData {
+  windowSize: ElementSize;
+  elementSize: ElementSize | null;
+  windowScroll: ElementScroll;
+  elementWindowOffset: number | null;
+}
+
+export interface GridListCell<P> {
+  key: string;
+  columnNumber: number;
+  rowNumber: number;
+  offset: number;
+  height: number;
+  width: number;
+  item: P;
+}
+
+export interface GridListLayoutData<P> {
+  totalHeight: number;
+  cells: GridListCell<P>[];
+}
+
+export interface GridListRenderData<P> {
+  cellsToRender: GridListCell<P>[];
+  firstRenderedRowNumber: number | null;
+  firstRenderedRowOffset: number | null;
+}

package/es/List/GridList/utils.d.ts

@@ -0,0 +1,9 @@
+import { ElementScroll, ElementSize, GridListCell, GridListRenderData } from './interface';
+export declare function isSameElementSize(a: ElementSize, b: ElementSize): boolean;
+export declare function getWindowSize(): ElementSize;
+export declare function getElementSize(element: Element): ElementSize;
+export declare function isSameElementScroll(a: ElementScroll, b: ElementScroll): boolean;
+export declare function getWindowScroll(): ElementScroll;
+export declare function getElementOffset(element: Element): number;
+export declare function getColumnWidth(columnCount: number | null, gridGap: number | null, elementWidth: number | null): number;
+export declare function getGridRowStart<P>(cell: GridListCell<P>, renderData: GridListRenderData<P> | null): string;

package/es/List/GridList/utils.js

@@ -0,0 +1,43 @@
+export function isSameElementSize(a, b) {
+  return a.width === b.width && a.height === b.height;
+}
+export function getWindowSize() {
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight
+  };
+}
+export function getElementSize(element) {
+  var rect = element.getBoundingClientRect();
+  return {
+    width: rect.width,
+    height: rect.height
+  };
+}
+export function isSameElementScroll(a, b) {
+  return a.x === b.x && a.y === b.y;
+}
+export function getWindowScroll() {
+  return {
+    x: window.scrollX,
+    y: window.scrollY
+  };
+}
+export function getElementOffset(element) {
+  return window.scrollY + element.getBoundingClientRect().top;
+}
+export function getColumnWidth(columnCount, gridGap, elementWidth) {
+  if (columnCount === null || gridGap === null || elementWidth === null) {
+    return null;
+  }
+
+  var totalGapSpace = (columnCount - 1) * gridGap;
+  var columnWidth = Math.round((elementWidth - totalGapSpace) / columnCount);
+  return columnWidth;
+}
+export function getGridRowStart(cell, renderData) {
+  if (renderData === null) return undefined;
+  var offset = renderData.firstRenderedRowNumber !== null ? renderData.firstRenderedRowNumber - 1 : 0;
+  var gridRowStart = cell.rowNumber - offset;
+  return "".concat(gridRowStart);
+}

package/es/List/ListExt/index.css

@@ -0,0 +1,3 @@
+.vidc-list-component {
+  margin-left: -1px;
+}

package/es/{ListExt → List/ListExt}/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CheckListProps } from '../List';
+import { CheckListProps } from '../interface';
 import './index.less';
 export interface IListProps<T> extends CheckListProps<T>, IListExtProps {
 }

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

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import React from 'react';
-import List from '../List';
-import TreeTitle from '../TreeTitle';
+import List from '../index';
+import Title from '../../Title';
 import "./index.css";
 
 function ListExt(_a) {
@@ -28,7 +28,7 @@ function ListExtTitle(_ref) {
       inputPlaceholder = _ref.inputPlaceholder,
       onKeywordChange = _ref.onKeywordChange,
       titleExt = _ref.titleExt;
-  return /*#__PURE__*/React.createElement(TreeTitle, {
+  return /*#__PURE__*/React.createElement(Title, {
     title: title,
     inputPlaceholder: inputPlaceholder,
     onChange: onKeywordChange,

package/es/List/VList/index.css

@@ -0,0 +1,6 @@
+.vidc-simple-list-layout {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  contain: strict;
+}

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

@@ -0,0 +1,18 @@
+import './index.less';
+interface IVListProps<T> {
+    data?: Array<T>;
+    rowHeight?: number;
+    className?: string;
+    renderItem?(item: T, index: number): JSX.Element;
+    overscan?: number;
+}
+declare function VList<T>({ className, rowHeight, data, renderItem }: IVListProps<T>): JSX.Element;
+declare namespace VList {
+    var defaultProps: {
+        className: string;
+        rowHeight: number;
+        overscan: number;
+        data: any[];
+    };
+}
+export default VList;

package/es/List/VList/index.js

@@ -0,0 +1,51 @@
+import _useVirtualList3 from "ahooks/es/useVirtualList";
+
+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, { useRef } from 'react';
+import "./index.css";
+
+function VList(_ref) {
+  var className = _ref.className,
+      rowHeight = _ref.rowHeight,
+      data = _ref.data,
+      renderItem = _ref.renderItem;
+  var containerRef = useRef();
+  var wrapperRef = useRef();
+
+  var _useVirtualList = _useVirtualList3(data, {
+    containerTarget: containerRef,
+    wrapperTarget: wrapperRef,
+    itemHeight: rowHeight,
+    overscan: 10
+  }),
+      _useVirtualList2 = _slicedToArray(_useVirtualList, 1),
+      list = _useVirtualList2[0];
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "vidc-simple-list-layout ".concat(className),
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: wrapperRef
+  }, list.map(function (ele) {
+    return renderItem(ele.data, ele.index);
+  })));
+}
+
+VList.defaultProps = {
+  className: '',
+  rowHeight: 30,
+  overscan: 10,
+  data: []
+};
+export default VList;

package/es/List/VList/utils.d.ts

@@ -0,0 +1,14 @@
+import React, { Key } from 'react';
+export declare function renderRowItem(rowRenderer?: ({ data, index, style }: {
+    data: any;
+    index: number;
+    style?: React.CSSProperties;
+}) => JSX.Element, renderItem?: (item: any, index: number) => JSX.Element, data?: any[]): (({ data, index, style }: {
+    data: any;
+    index: number;
+    style?: React.CSSProperties;
+}) => JSX.Element) | (({ key, index, style }: {
+    key: Key;
+    index: number;
+    style?: React.CSSProperties;
+}) => JSX.Element);

package/es/List/index.css

@@ -11,10 +11,6 @@
   flex: 1;
   overflow: hidden;
 }
-.lm-c-check-list-wrapper .lm-c-virtual-layout {
-  width: calc(100% - 5px);
-  margin-right: 5px;
-}
 .lm-c-check-list-wrapper .list-item {
   cursor: pointer;
   height: 30px;
@@ -47,19 +43,22 @@
   color: var(--primary);
   border-bottom: 1px solid var(--primary);
 }
-.lm-c-check-list-wrapper .list-item.has-check-box {
-  padding: 0 10px;
-}
-.lm-c-check-list-wrapper .list-item.has-check-box label {
+.lm-c-check-list-wrapper .list-item.has-check-box > label {
   padding: 0 4px;
 }
-.lm-c-check-list-wrapper .c-check-list-checkext {
+.cloudapp-c-check-list-checkext {
   font-size: var(--fs-small);
-  padding: 5px 18px;
+  padding: 5px 15px;
   display: flex;
   justify-content: space-between;
   border-bottom: 1px solid var(--bd-color);
 }
-.lm-c-check-list-wrapper .c-check-list-checkext .cloudapp-checkbox-wrapper {
-  font-size: var(--fs);
+.cloudapp-c-check-list-checkext .select-group .anticon {
+  font-size: 16px;
+  cursor: pointer;
+  padding-right: 8px;
+  color: var(--icon);
+}
+.cloudapp-c-check-list-checkext .select-group .anticon:hover {
+  color: var(--primary);
 }

package/es/List/index.d.ts

@@ -1,74 +1,5 @@
-import React from 'react';
+import { CheckListProps } from './interface';
 import './index.less';
-export interface CheckListProps<T> {
-    /**
-     * @description 列表数据
-     * @default []
-     */
-    list?: Array<T>;
-    /**
-     * @description 列表类名
-     * @default ''
-     */
-    className?: string;
-    /**
-     * @description 列表样式
-     * @default -
-     */
-    style?: React.CSSProperties;
-    /**
-     * @description 列表自定义渲染
-     * @default -
-     */
-    CustomRender?: () => JSX.Element;
-    /**
-     * @description 列表渲染key字段
-     * @default id
-     */
-    itemKey?: string;
-    /**
-     * @description 列表渲染label字段
-     * @default name
-     */
-    itemNameKey?: string;
-    /**
-     * @description 激活列表key
-     * @default -
-     */
-    activeKey?: string;
-    /**
-     * @description 列表拓展内容
-     * @default -
-     */
-    checkExt?: React.ReactNode;
-    /**
-     * @description 选中事件，影响是否有checkbox
-     * @default -
-     */
-    onChecked?: (ids: Array<string>) => void;
-    /**
-     * @description 选中的key
-     * @default []
-     */
-    checkedKeys?: string[];
-    /**
-     * @description 默认选中的key
-     * @default []
-     */
-    defaultCheckedIds?: string[];
-    /**
-     * @description 高亮关键字
-     * @default -
-     */
-    keywords?: string;
-    rowHeight?: number;
-    whatIcon?: (item: T) => JSX.Element;
-    renderItemExt?: (item: T) => JSX.Element;
-    onClickItem?: (item: T) => void;
-    onMouseOutItem?: (item: T) => void;
-    onMouseOverItem?: (item: T) => void;
-    renderHeader?: () => JSX.Element;
-}
 declare function List(props: CheckListProps<any>): JSX.Element;
 declare namespace List {
     var defaultProps: {
@@ -77,5 +8,9 @@ declare namespace List {
         itemKey: string;
         itemNameKey: string;
     };
+    var VList: typeof import("./VList").default;
+    var DeviceList: typeof import("./DeviceList").default;
+    var ListExt: typeof import("./ListExt").default;
+    var DynamicDeviceList: typeof import("./DynamicDeviceList").default;
 }
 export default List;

package/es/List/index.js

@@ -21,12 +21,12 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import difference from 'lodash-es/difference';
-import uniq from 'lodash-es/uniq';
-import VList from '../VList';
+import VList from './VList';
 import { RenderItem } from './renderItem';
-import { computedCheckStatus } from './utils';
 import CheckExt from './CheckExt';
+import DeviceList from './DeviceList';
+import ListExt from './ListExt';
+import DynamicDeviceList from './DynamicDeviceList';
 import "./index.css";
 
 function List(props) {
@@ -51,13 +51,6 @@ function List(props) {
       state = _useState2[0],
       setState = _useState2[1];
 
-  var _useMemo = useMemo(function () {
-    return computedCheckStatus(list, state.checkedKeys, itemKey);
-  }, [itemKey, list, state.checkedKeys]),
-      checkHalfStatus = _useMemo.checkHalfStatus,
-      checkAllStatus = _useMemo.checkAllStatus,
-      listKey = _useMemo.listKey;
-
   var checkable = useMemo(function () {
     return !!onChecked;
   }, []);
@@ -85,17 +78,14 @@ function List(props) {
     });
     onChecked && onChecked(ids);
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [listKey, state.checkedKeys]);
+  [state.checkedKeys]);
   /**
    * 列表渲染
    */
 
-  var renderRow = useCallback(function (_ref) {
-    var key = _ref.key,
-        index = _ref.index,
-        style = _ref.style;
+  var renderRow = useCallback(function (data, index) {
     var options = Object.assign(Object.assign({}, state), {
-      item: list[index],
+      item: data,
       onChecked: onCheckedAction,
       checkable: !!onChecked,
       index: index,
@@ -112,7 +102,7 @@ function List(props) {
     });
     var ItemRender = CustomRender ? CustomRender : RenderItem;
     return /*#__PURE__*/React.createElement(ItemRender, Object.assign({
-      key: key
+      key: index
     }, options));
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
   [list, state, onChecked, CustomRender, activeKey]);
@@ -120,15 +110,29 @@ function List(props) {
    * 列表全选处理
    */
 
-  var onChangeCheckAll = useCallback(function () {
-    var ids = checkAllStatus ? difference(state.checkedKeys, listKey) : uniq([].concat(state.checkedKeys, listKey));
+  var onCheck = useCallback(function () {
+    var ids = list.map(function (v) {
+      return v[itemKey];
+    });
     setState(function (old) {
       return Object.assign(Object.assign({}, old), {
         checkedKeys: _toConsumableArray(ids)
       });
     });
     props.onChecked && props.onChecked(ids); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [checkAllStatus, state.checkedKeys, listKey]);
+  }, [itemKey, list]);
+  /**
+   * 列表取消
+   */
+
+  var onCancel = useCallback(function () {
+    setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        checkedKeys: []
+      });
+    });
+    props.onChecked && props.onChecked([]); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [itemKey, list]);
   /**
    * 同步选中更新
    */
@@ -147,18 +151,17 @@ function List(props) {
     className: "lm-c-check-list-wrapper ".concat(className),
     style: style
   }, renderHeader && renderHeader(), checkExt, checkable && /*#__PURE__*/React.createElement(CheckExt, {
-    checkHalfStatus: checkHalfStatus,
     selectCount: state.checkedKeys.length,
     count: list.length,
-    onChange: onChangeCheckAll,
-    checkAllStatus: checkAllStatus
+    onCheck: onCheck,
+    onCancel: onCancel
   }), /*#__PURE__*/React.createElement("div", {
     className: "lm-c-base-list-layout"
   }, /*#__PURE__*/React.createElement(VList, {
     className: "lm-c-virtual-layout",
     data: list,
     rowHeight: rowHeight || 30,
-    rowRenderer: renderRow
+    renderItem: renderRow
   })));
 }
 
@@ -168,4 +171,8 @@ List.defaultProps = {
   itemKey: 'id',
   itemNameKey: 'name'
 };
+List.VList = VList;
+List.DeviceList = DeviceList;
+List.ListExt = ListExt;
+List.DynamicDeviceList = DynamicDeviceList;
 export default List;

package/es/List/interface.d.ts

@@ -0,0 +1,87 @@
+export interface CheckListProps<T> {
+  /**
+   * @description 列表数据
+   * @default []
+   */
+  list?: Array<T>;
+
+  /**
+   * @description 列表类名
+   * @default ''
+   */
+  className?: string;
+
+  /**
+   * @description 列表样式
+   * @default -
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * @description 列表自定义渲染
+   * @default -
+   */
+  CustomRender?: () => JSX.Element;
+
+  /**
+   * @description 列表渲染key字段
+   * @default id
+   */
+  itemKey?: string;
+
+  /**
+   * @description 列表渲染label字段
+   * @default name
+   */
+  itemNameKey?: string;
+
+  /**
+   * @description 激活列表key
+   * @default -
+   */
+  activeKey?: string;
+
+  /**
+   * @description 列表拓展内容
+   * @default -
+   */
+  checkExt?: React.ReactNode;
+
+  /**
+   * @description 选中事件，影响是否有checkbox
+   * @default -
+   */
+  onChecked?: (ids: Array<string>) => void;
+
+  /**
+   * @description 选中的key
+   * @default []
+   */
+  checkedKeys?: string[];
+
+  /**
+   * @description 默认选中的key
+   * @default []
+   */
+  defaultCheckedIds?: string[];
+
+  /**
+   * @description 高亮关键字
+   * @default -
+   */
+  keywords?: string;
+
+  rowHeight?: number;
+
+  whatIcon?: (item: T) => JSX.Element;
+
+  renderItemExt?: (item: T) => JSX.Element;
+
+  onClickItem?: (item: T) => void;
+
+  onMouseOutItem?: (item: T) => void;
+
+  onMouseOverItem?: (item: T) => void;
+
+  renderHeader?: () => JSX.Element;
+}

package/es/List/renderItem.d.ts

@@ -16,5 +16,5 @@ interface IRenderItempProps<T> {
     onMouseOverItem?: (item: T) => void;
     onMouseOutItem?: (item: T) => void;
 }
-export declare function RenderItem(props: IRenderItempProps<any>): JSX.Element;
+export declare function RenderItem({ item, checkedKeys, activeKey, style, itemNameKey, itemKey, checkable, keywords, ...props }: IRenderItempProps<any>): JSX.Element;
 export {};

package/es/List/renderItem.js

@@ -1,18 +1,21 @@
 import "antd/lib/checkbox/style";
 import _Checkbox from "antd/lib/checkbox";
+import { __rest } from "tslib";
 import React, { useCallback, useMemo } from 'react';
 import HightLevel from '../HightLevel';
-export function RenderItem(props) {
-  var item = props.item,
-      checkedKeys = props.checkedKeys,
-      activeKey = props.activeKey,
-      style = props.style,
-      itemNameKey = props.itemNameKey,
-      renderItemExt = props.renderItemExt,
+export function RenderItem(_a) {
+  var item = _a.item,
+      checkedKeys = _a.checkedKeys,
+      activeKey = _a.activeKey,
+      style = _a.style,
+      itemNameKey = _a.itemNameKey,
+      itemKey = _a.itemKey,
+      checkable = _a.checkable,
+      keywords = _a.keywords,
+      props = __rest(_a, ["item", "checkedKeys", "activeKey", "style", "itemNameKey", "itemKey", "checkable", "keywords"]);
+
+  var renderItemExt = props.renderItemExt,
       whatIcon = props.whatIcon,
-      itemKey = props.itemKey,
-      checkable = props.checkable,
-      keywords = props.keywords,
       onChecked = props.onChecked,
       onClickItem = props.onClickItem,
       onMouseOverItem = props.onMouseOverItem,

package/es/LoaderApp/index.js

@@ -1,3 +1,4 @@
+import _useUpdateEffect from "ahooks/es/useUpdateEffect";
 import _uuid from "@cloud-app-dev/utils/es/uuid";
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -98,7 +99,8 @@ function LoaderApp(_ref) {
       }
     };
   }, []);
-  useEffect(function () {
+
+  _useUpdateEffect(function () {
     var currentId = appProps.currentId,
         tabId = appProps.tabId;
 
@@ -110,6 +112,7 @@ function LoaderApp(_ref) {
       loadedAppRef.current.update && loadedAppRef.current.update(props);
     }
   }, [appProps.currentId, appProps.tabId, appProps.updateTime]);
+
   return /*#__PURE__*/React.createElement("main", {
     ref: domRef,
     className: "loaded-app-layout ".concat(appConfig.routerPrefix, "-").concat(id),