@cloud-app-dev/vidc 2.0.0-alpha.8 → 2.1.0-alpha.3

package/es/Tree/BaseTree/demo.js

@@ -0,0 +1,69 @@
+import "antd/lib/config-provider/style";
+import _ConfigProvider from "antd/lib/config-provider";
+
+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 } from 'react';
+import Tree from './index';
+import IconFont from '../../IconFont';
+var treeData = [{
+  id: '1',
+  name: 'test',
+  children: [{
+    id: '11',
+    name: 'test11'
+  }, {
+    id: '22',
+    name: 'test22'
+  }]
+}];
+
+function App() {
+  var _useState = useState({
+    keyword: 'te'
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(_ConfigProvider, {
+    prefixCls: "cloudapp"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    value: state.keyword,
+    onChange: function onChange(e) {
+      return setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          keyword: e.target.value
+        });
+      });
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: 20,
+      width: 300,
+      height: 400
+    }
+  }, /*#__PURE__*/React.createElement(Tree, {
+    key: state.keyword,
+    treeData: treeData,
+    virtual: false,
+    icon: function icon(node) {
+      return /*#__PURE__*/React.createElement(IconFont, {
+        type: "".concat(treeData.length > 0 && node.id === treeData[0].id ? 'icon-S_Bar_Home' : 'icon-S_Photo_ListTree')
+      });
+    }
+  })));
+}
+
+export default App;

package/es/Tree/BaseTree/index.css

@@ -0,0 +1,64 @@
+.cloudapp-c-base-tree-component {
+  padding: 10px 0;
+  user-select: none;
+}
+.cloudapp-c-base-tree-component .cloudapp-tree-switcher {
+  position: relative;
+  top: -2px;
+  left: 8px;
+  z-index: 2;
+  margin-right: 5px;
+}
+.cloudapp-c-base-tree-component .cloudapp-tree-title {
+  font-size: var(--fs-small);
+  flex: 1 1;
+}
+.cloudapp-c-base-tree-component .cloudapp-tree-treenode {
+  width: 100%;
+  white-space: nowrap;
+  font-size: var(--fs-small);
+  min-width: max-content;
+  position: relative;
+  display: inline-flex;
+  width: calc(100% - 32px);
+}
+.cloudapp-c-base-tree-component .cloudapp-tree-treenode span.cloudapp-tree-node-content-wrapper {
+  font-size: var(--fs-small);
+  min-width: max-content;
+  position: relative;
+  display: inline-flex;
+  width: calc(100% - 32px);
+}
+.cloudapp-c-base-tree-component .cloudapp-tree-treenode span.cloudapp-tree-node-content-wrapper:hover,
+.cloudapp-c-base-tree-component .cloudapp-tree-treenode span.cloudapp-tree-node-content-wrapper.cloudapp-tree-node-selected {
+  background: transparent;
+  color: var(--primary);
+  position: relative;
+}
+.cloudapp-c-base-tree-component .cloudapp-tree-treenode span.cloudapp-tree-node-content-wrapper:hover:after,
+.cloudapp-c-base-tree-component .cloudapp-tree-treenode span.cloudapp-tree-node-content-wrapper.cloudapp-tree-node-selected:after {
+  content: '';
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  border-bottom: 1px solid var(--primary);
+}
+.cloudapp-c-base-tree-component .cloudapp-tree-treenode span.cloudapp-tree-node-content-wrapper:hover .cloudapp-tree-switcher,
+.cloudapp-c-base-tree-component .cloudapp-tree-treenode span.cloudapp-tree-node-content-wrapper.cloudapp-tree-node-selected .cloudapp-tree-switcher,
+.cloudapp-c-base-tree-component .cloudapp-tree-treenode span.cloudapp-tree-node-content-wrapper:hover .cloudapp-tree-iconEle,
+.cloudapp-c-base-tree-component .cloudapp-tree-treenode span.cloudapp-tree-node-content-wrapper.cloudapp-tree-node-selected .cloudapp-tree-iconEle {
+  color: var(--primary);
+}
+.cloudapp-c-base-tree-component .cloudapp-tree-treenode span.cloudapp-tree-node-content-wrapper:hover .cloudapp-tree-switcher .anticon,
+.cloudapp-c-base-tree-component .cloudapp-tree-treenode span.cloudapp-tree-node-content-wrapper.cloudapp-tree-node-selected .cloudapp-tree-switcher .anticon,
+.cloudapp-c-base-tree-component .cloudapp-tree-treenode span.cloudapp-tree-node-content-wrapper:hover .cloudapp-tree-iconEle .anticon,
+.cloudapp-c-base-tree-component .cloudapp-tree-treenode span.cloudapp-tree-node-content-wrapper.cloudapp-tree-node-selected .cloudapp-tree-iconEle .anticon {
+  color: var(--primary);
+}
+.cloudapp-c-base-tree-component .cloudapp-tree-treenode-switcher-open .cloudapp-tree-switcher,
+.cloudapp-c-base-tree-component .cloudapp-tree-treenode-switcher-close .cloudapp-tree-switcher,
+.cloudapp-c-base-tree-component .cloudapp-tree-treenode-switcher-open .cloudapp-tree-iconEle,
+.cloudapp-c-base-tree-component .cloudapp-tree-treenode-switcher-close .cloudapp-tree-iconEle {
+  color: var(--icon);
+}

package/es/Tree/BaseTree/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * tree 基础组件支持各种自定义其他tree可用过它来拓展
+ */
+import React from 'react';
+import { DataNode, TreeProps } from 'antd/lib/tree';
+import './index.less';
+export interface ITreeNodeProps {
+    prefix?: (node: DataNode) => JSX.Element;
+    suffix?: (node: DataNode) => JSX.Element;
+    keyword?: string;
+    key?: string;
+    nameKey?: string;
+    RenderTreeTitle?: (node: DataNode) => JSX.Element;
+}
+export interface BaseTreeProps extends TreeProps {
+    checkable?: boolean;
+    className?: string;
+    treeData?: DataNode[] | any[];
+    showIcon?: boolean;
+    treeNodeProps?: ITreeNodeProps;
+    icon?: (node: DataNode) => JSX.Element;
+}
+declare const BTree: React.ForwardRefExoticComponent<BaseTreeProps & React.RefAttributes<any>>;
+export default BTree;

package/es/Tree/BaseTree/index.js

@@ -0,0 +1,83 @@
+import "antd/lib/tree/style";
+import _Tree from "antd/lib/tree";
+import { __rest } from "tslib";
+/**
+ * tree 基础组件支持各种自定义其他tree可用过它来拓展
+ */
+
+import React, { useImperativeHandle, useMemo, useRef } from 'react';
+import IconFont from '../../IconFont';
+import HightLevel from '../../HightLevel';
+import "./index.css";
+
+function BaseTree(_a, ref) {
+  var treeData = _a.treeData,
+      className = _a.className,
+      showIcon = _a.showIcon,
+      treeNodeProps = _a.treeNodeProps,
+      icon = _a.icon,
+      props = __rest(_a, ["treeData", "className", "showIcon", "treeNodeProps", "icon"]);
+
+  var _useMemo = useMemo(function () {
+    return treeNodeProps;
+  }, []),
+      prefix = _useMemo.prefix,
+      suffix = _useMemo.suffix,
+      keyword = _useMemo.keyword,
+      _useMemo$key = _useMemo.key,
+      key = _useMemo$key === void 0 ? 'id' : _useMemo$key,
+      _useMemo$nameKey = _useMemo.nameKey,
+      nameKey = _useMemo$nameKey === void 0 ? 'name' : _useMemo$nameKey,
+      RenderTreeTitle = _useMemo.RenderTreeTitle;
+
+  var treeRef = useRef(null);
+  useImperativeHandle(ref, function () {
+    return {
+      getCheckedKeys: function getCheckedKeys() {
+        if (!props.checkable || !treeRef.current) {
+          return [];
+        }
+
+        return treeRef.current.tree.state.checkedKeys;
+      }
+    };
+  }, [props.checkable]);
+  return /*#__PURE__*/React.createElement(_Tree, Object.assign({
+    className: "cloudapp-c-base-tree-component ".concat(className),
+    ref: treeRef,
+    showIcon: showIcon,
+    switcherIcon: /*#__PURE__*/React.createElement(IconFont, {
+      style: {
+        fontSize: 20,
+        verticalAlign: '-0.4em'
+      },
+      type: "icon-S_Arrow_SmallDown"
+    }),
+    treeData: treeData,
+    fieldNames: {
+      key: key,
+      title: nameKey
+    },
+    key: keyword,
+    titleRender: RenderTreeTitle ? RenderTreeTitle : function (node) {
+      return /*#__PURE__*/React.createElement("span", {
+        title: node[nameKey],
+        className: "tree-item-title"
+      }, /*#__PURE__*/React.createElement("span", null, showIcon && icon && icon(node), prefix && prefix(node), /*#__PURE__*/React.createElement(HightLevel, {
+        keyword: keyword,
+        name: node[nameKey]
+      })), suffix && suffix(node));
+    }
+  }, props));
+}
+
+var BTree = /*#__PURE__*/React.forwardRef(BaseTree);
+BTree.defaultProps = {
+  treeData: [],
+  className: '',
+  treeNodeProps: {
+    nameKey: 'name',
+    key: 'id'
+  }
+};
+export default BTree;

package/es/Tree/demo.js

@@ -1,68 +1,31 @@
 import "antd/lib/config-provider/style";
 import _ConfigProvider from "antd/lib/config-provider";
-
-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 } from 'react';
-import Tree from './index';
-import IconFont from '../IconFont';
-var treeData = [{
-  id: '1',
-  name: 'test',
-  children: [{
-    id: '11',
-    name: 'test11'
-  }, {
-    id: '22',
-    name: 'test22'
-  }]
-}];
+import React from 'react';
+import BsTree from './index';
 
 function App() {
-  var _useState = useState({
-    keyword: 'te'
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      state = _useState2[0],
-      setState = _useState2[1];
-
   return /*#__PURE__*/React.createElement(_ConfigProvider, {
     prefixCls: "cloudapp"
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    value: state.keyword,
-    onChange: function onChange(e) {
-      return setState(function (old) {
-        return Object.assign(Object.assign({}, old), {
-          keyword: e.target.value
-        });
-      });
-    }
-  }), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
       padding: 20,
-      width: 300,
-      height: 400
-    }
-  }, /*#__PURE__*/React.createElement(Tree, {
-    key: state.keyword,
-    treeData: treeData,
-    virtual: false,
-    icon: function icon(node) {
-      return /*#__PURE__*/React.createElement(IconFont, {
-        type: "".concat(treeData.length > 0 && node.id === treeData[0].id ? 'icon-S_Bar_Home' : 'icon-S_Photo_ListTree')
-      });
+      height: 400,
+      display: 'flex'
     }
+  }, /*#__PURE__*/React.createElement(BsTree, {
+    title: "\u8BBE\u5907\u4E1A\u52A1\u6811",
+    mode: "Bz"
+  }), /*#__PURE__*/React.createElement(BsTree, {
+    title: "\u81EA\u5B9A\u4E49\u5206\u7EC4",
+    mode: "Custom"
+  }), /*#__PURE__*/React.createElement(BsTree, {
+    title: "\u884C\u653F\u533A\u5212",
+    mode: "Place",
+    checkable: true,
+    checkStrictly: true
+  }), /*#__PURE__*/React.createElement(BsTree, {
+    title: "\u7EC4\u7EC7\u673A\u6784",
+    mode: "Org"
   })));
 }
 

package/es/Tree/index.css

@@ -1,64 +1,38 @@
-.bc-base-tree-component {
-  padding: 10px 0;
-  user-select: none;
+.bc-type-tree-layout {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--bd-color);
+  margin-left: -1px;
 }
-.bc-base-tree-component .cloudapp-tree-switcher {
-  position: relative;
-  top: -2px;
-  left: 8px;
-  z-index: 2;
-  margin-right: 5px;
-}
-.bc-base-tree-component .cloudapp-tree-title {
-  font-size: var(--fs-small);
-  flex: 1 1;
-}
-.bc-base-tree-component .cloudapp-tree-treenode {
-  width: 100%;
-  white-space: nowrap;
-  font-size: var(--fs-small);
-  min-width: max-content;
-  position: relative;
-  display: inline-flex;
-  width: calc(100% - 32px);
+.bc-type-tree-layout .lm-c-tree-title-part {
+  border-bottom: 1px solid var(--bd-color);
+  background-color: var(--form-bg-light);
 }
-.bc-base-tree-component .cloudapp-tree-treenode span.cloudapp-tree-node-content-wrapper {
-  font-size: var(--fs-small);
-  min-width: max-content;
-  position: relative;
-  display: inline-flex;
-  width: calc(100% - 32px);
+.bc-type-tree-layout > .cloudapp-c-base-tree-component {
+  flex: 1;
+  overflow: auto;
 }
-.bc-base-tree-component .cloudapp-tree-treenode span.cloudapp-tree-node-content-wrapper:hover,
-.bc-base-tree-component .cloudapp-tree-treenode span.cloudapp-tree-node-content-wrapper.cloudapp-tree-node-selected {
-  background: transparent;
-  color: var(--primary);
-  position: relative;
+.bc-type-tree-layout .cloudapp-tree {
+  height: 100%;
+  overflow: auto;
 }
-.bc-base-tree-component .cloudapp-tree-treenode span.cloudapp-tree-node-content-wrapper:hover:after,
-.bc-base-tree-component .cloudapp-tree-treenode span.cloudapp-tree-node-content-wrapper.cloudapp-tree-node-selected:after {
-  content: '';
-  width: 100%;
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  border-bottom: 1px solid var(--primary);
+.bc-type-tree-layout .anticon {
+  font-size: var(--fs);
 }
-.bc-base-tree-component .cloudapp-tree-treenode span.cloudapp-tree-node-content-wrapper:hover .cloudapp-tree-switcher,
-.bc-base-tree-component .cloudapp-tree-treenode span.cloudapp-tree-node-content-wrapper.cloudapp-tree-node-selected .cloudapp-tree-switcher,
-.bc-base-tree-component .cloudapp-tree-treenode span.cloudapp-tree-node-content-wrapper:hover .cloudapp-tree-iconEle,
-.bc-base-tree-component .cloudapp-tree-treenode span.cloudapp-tree-node-content-wrapper.cloudapp-tree-node-selected .cloudapp-tree-iconEle {
-  color: var(--primary);
+.bc-type-tree-layout .cloudapp-tree-title {
+  font-size: var(--fs-small);
+  flex: 1;
 }
-.bc-base-tree-component .cloudapp-tree-treenode span.cloudapp-tree-node-content-wrapper:hover .cloudapp-tree-switcher .anticon,
-.bc-base-tree-component .cloudapp-tree-treenode span.cloudapp-tree-node-content-wrapper.cloudapp-tree-node-selected .cloudapp-tree-switcher .anticon,
-.bc-base-tree-component .cloudapp-tree-treenode span.cloudapp-tree-node-content-wrapper:hover .cloudapp-tree-iconEle .anticon,
-.bc-base-tree-component .cloudapp-tree-treenode span.cloudapp-tree-node-content-wrapper.cloudapp-tree-node-selected .cloudapp-tree-iconEle .anticon {
-  color: var(--primary);
+.bc-type-tree-layout .cloudapp-tree-title > span {
+  min-width: 100%;
+  display: inline-flex;
+  justify-content: space-between;
 }
-.bc-base-tree-component .cloudapp-tree-treenode-switcher-open .cloudapp-tree-switcher,
-.bc-base-tree-component .cloudapp-tree-treenode-switcher-close .cloudapp-tree-switcher,
-.bc-base-tree-component .cloudapp-tree-treenode-switcher-open .cloudapp-tree-iconEle,
-.bc-base-tree-component .cloudapp-tree-treenode-switcher-close .cloudapp-tree-iconEle {
+.bc-type-tree-layout .cloudapp-tree-title > span .anticon {
+  font-size: 16px;
   color: var(--icon);
+  padding-right: 6px;
+  position: relative;
+  top: 1px;
 }

package/es/Tree/index.d.ts

@@ -1,24 +1,23 @@
-/**
- * tree 基础组件支持各种自定义其他tree可用过它来拓展
- */
 import React from 'react';
-import { DataNode, TreeProps } from 'antd/lib/tree';
+import { BaseTreeProps } from './BaseTree';
 import './index.less';
-export interface ITreeNodeProps {
-    prefix?: (node: DataNode) => JSX.Element;
-    suffix?: (node: DataNode) => JSX.Element;
-    keyword?: string;
-    key?: string;
-    nameKey?: string;
-    RenderTreeTitle?: (node: DataNode) => JSX.Element;
+interface IBsTreeProps extends BaseTreeProps {
+    title?: React.ReactNode;
+    inputPlaceholder?: string;
+    renderHeader?: () => JSX.Element;
+    /**
+     * @description 需要默认选中时触发 事件
+     */
+    onDefailtSelect?: (id?: string) => void;
+    mode?: 'Bz' | 'Custom' | 'Place' | 'Org';
 }
-export interface BaseTreeProps extends TreeProps {
-    checkable?: boolean;
-    className?: string;
-    treeData?: DataNode[] | any[];
-    showIcon?: boolean;
-    treeNodeProps?: ITreeNodeProps;
-    icon?: (node: DataNode) => JSX.Element;
+declare function TreeMode({ title, className, renderHeader, inputPlaceholder, treeNodeProps, onDefailtSelect, mode, showIcon, ...props }: IBsTreeProps): JSX.Element;
+declare namespace TreeMode {
+    var defaultProps: {
+        mode: string;
+        className: string;
+        treeNodeProps: {};
+        showIcon: boolean;
+    };
 }
-declare const BTree: React.ForwardRefExoticComponent<BaseTreeProps & React.RefAttributes<any>>;
-export default BTree;
+export default TreeMode;