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

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,11 +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, uniq } from 'lodash';
-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) {
@@ -50,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;
   }, []);
@@ -84,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,
@@ -111,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]);
@@ -119,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]);
   /**
    * 同步选中更新
    */
@@ -146,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
   })));
 }
 
@@ -167,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.d.ts

@@ -12,7 +12,6 @@ interface ILoaderAppProps {
      * @default {}
      */
     appProps: {
-        updateTime?: number;
         [key: string]: any;
     };
     /**
@@ -26,6 +25,7 @@ declare namespace LoaderApp {
     var defaultProps: {
         appConfig: {};
         appProps: {};
+        style: {};
     };
 }
 export default LoaderApp;

package/es/LoaderApp/index.js

@@ -41,18 +41,29 @@ function LoaderApp(_ref) {
     var config = getMicroConfig(appConfig, appProps, domRef.current);
 
     if (!config) {
-      console.debug('微应用不存在', 'config ->', appConfig, 'appProps ->', appProps);
+      console.error('微应用不存在', 'config ->', appConfig, 'appProps ->', appProps);
+      return undefined;
+    }
+
+    if (!domRef.current || !styleRef.current) {
+      console.error('LoaderApp组件未正常初始化！', 'config ->', appConfig, 'appProps ->', appProps);
       return undefined;
     }
 
     var props = Object.assign(Object.assign({}, appProps), {
       container: domRef.current
     });
+    var routerPrefix = config.routerPrefix;
+
+    var _appConfig$resource = _slicedToArray(appConfig.resource, 2),
+        script = _appConfig$resource[0],
+        style = _appConfig$resource[1];
+
     var options = {
-      script: appConfig.resource[0],
-      style: appConfig.resource[1],
-      name: config.name,
-      prefix: ".".concat(appConfig.name, "-").concat(id),
+      script: script,
+      style: style,
+      name: routerPrefix,
+      prefix: ".".concat(routerPrefix, "-").concat(id),
       styleNode: styleRef.current
     };
     LoaderModule(options).then(function (mod) {
@@ -98,18 +109,6 @@ function LoaderApp(_ref) {
       }
     };
   }, []);
-  useEffect(function () {
-    var currentId = appProps.currentId,
-        tabId = appProps.tabId;
-
-    if (currentId === tabId && loadedAppRef.current) {
-      var props = Object.assign(Object.assign({}, appProps), {
-        container: domRef.current
-      });
-      console.debug('执行更新！', appProps);
-      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),
@@ -127,6 +126,7 @@ function LoaderApp(_ref) {
 
 LoaderApp.defaultProps = {
   appConfig: {},
-  appProps: {}
+  appProps: {},
+  style: {}
 };
 export default LoaderApp;

package/es/LoaderApp/utils.d.ts

@@ -1,6 +1,7 @@
 import { AppItemType } from '../Config/interface';
 export declare const getMicroConfig: (appConfig: AppItemType, appProps: any, container: HTMLDivElement) => {
-    name: string;
+    title: string;
+    routerPrefix: string;
     container: HTMLDivElement;
     props: any;
     entry: {

package/es/LoaderApp/utils.js

@@ -3,14 +3,16 @@ export var getMicroConfig = function getMicroConfig() {
   var appProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var container = arguments.length > 2 ? arguments[2] : undefined;
   var routerPrefix = appConfig.routerPrefix,
-      resource = appConfig.resource;
+      resource = appConfig.resource,
+      name = appConfig.name;
   var microAppEntry = {
     scripts: [resource[0]],
     styles: [resource[1]],
     html: "<div id=\"".concat(routerPrefix, "\" style=\"height:100%\"></div>")
   };
   return {
-    name: routerPrefix,
+    title: name,
+    routerPrefix: routerPrefix,
     container: container,
     props: appProps,
     entry: microAppEntry
@@ -68,7 +70,8 @@ function ruleStyle(rule, prefix) {
   // handle :root { ... }
 
   if (selector === 'html' || selector === 'body' || selector === ':root') {
-    return cssText.replace(rootSelectorRE, prefix);
+    return ''; //微应用模式下清楚顶层样式
+    // return cssText.replace(rootSelectorRE, prefix);
   } // handle html body { ... }
   // handle html > body { ... }