@aloudata/aloudata-design 1.10.4 → 1.10.6

package/dist/Icon/components/Loading2Line.d.ts

@@ -0,0 +1,11 @@
+import type { SVGProps } from 'react';
+import * as React from 'react';
+interface SVGRProps {
+    size?: number;
+    title?: string;
+    titleId?: string;
+    desc?: string;
+    descId?: string;
+}
+declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
+export default Memo;

package/dist/Icon/components/Loading2Line.js

@@ -0,0 +1,35 @@
+var _excluded = ["title", "titleId", "desc", "descId"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import * as React from 'react';
+import { forwardRef, memo } from 'react';
+var Loading2Line = function Loading2Line(_ref, ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    desc = _ref.desc,
+    descId = _ref.descId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: props.width || props.size || 16,
+    height: props.height || props.size || 16,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ref: ref,
+    "aria-labelledby": titleId,
+    "aria-describedby": descId
+  }, props), desc ? /*#__PURE__*/React.createElement("desc", {
+    id: descId
+  }, desc) : null, title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    fill: props.color || 'currentColor',
+    fillRule: "evenodd",
+    d: "M11.5 7V3h1v4h-1Zm0 14v-4h1v4h-1Zm5.5-9.5h4v1h-4v-1Zm-14 0h4v1H3v-1Zm15.718 6.51-2.829-2.828-.707.707 2.828 2.829.707-.708Zm-9.9-9.9L5.99 5.283l-.708.708 2.829 2.828.707-.707Zm0 7.78L5.99 18.717l-.708-.708 2.829-2.828.707.707Zm9.9-9.9-2.829 2.828-.707-.707 2.828-2.829.707.708Z",
+    clipRule: "evenodd"
+  }));
+};
+var ForwardRef = /*#__PURE__*/forwardRef(Loading2Line);
+var Memo = /*#__PURE__*/memo(ForwardRef);
+export default Memo;

package/dist/Icon/index.d.ts

@@ -15,6 +15,7 @@ export { default as FoldUpFill } from './components/FoldUpFill';
 export type { IBaseIconProps } from './components/Icon';
 export { default as InfoCircleDuotone } from './components/InfoCircleDuotone';
 export { default as InfoCircleLine } from './components/InfoCircleLine';
+export { default as Loading2Line } from './components/Loading2Line';
 export { default as LoadingLine } from './components/LoadingLine';
 export { default as MoreVerticalLine } from './components/MoreVerticalLine';
 export { default as SearchLine } from './components/SearchLine';

package/dist/Icon/index.js

@@ -14,6 +14,7 @@ export { default as FoldDownFill } from "./components/FoldDownFill";
 export { default as FoldUpFill } from "./components/FoldUpFill";
 export { default as InfoCircleDuotone } from "./components/InfoCircleDuotone";
 export { default as InfoCircleLine } from "./components/InfoCircleLine";
+export { default as Loading2Line } from "./components/Loading2Line";
 export { default as LoadingLine } from "./components/LoadingLine";
 export { default as MoreVerticalLine } from "./components/MoreVerticalLine";
 export { default as SearchLine } from "./components/SearchLine";

package/dist/Icon/svg/loading-2-line.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g id="loading2-line">
+  <path id="Icon" fill-rule="evenodd" clip-rule="evenodd" d="M11.5 7V3H12.5V7H11.5ZM11.5 21V17H12.5V21H11.5ZM17 11.5H21V12.5H17V11.5ZM3 11.5H7V12.5H3V11.5ZM18.7175 18.0104L15.8891 15.1819L15.182 15.8891L18.0104 18.7175L18.7175 18.0104ZM8.81802 8.11088L5.98959 5.28245L5.28249 5.98956L8.11091 8.81799L8.81802 8.11088ZM8.81802 15.8891L5.98959 18.7175L5.28249 18.0104L8.11091 15.182L8.81802 15.8891ZM18.7175 5.98961L15.8891 8.81803L15.182 8.11093L18.0104 5.2825L18.7175 5.98961Z" fill="black"/>
+  </g>
+  </svg>
+  

package/dist/MemberPicker/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import MemberPanel from './components/PanelWrapper';
 import { IMemberPickerProps } from './interface';
-declare const MemberSelector: React.FC<IMemberPickerProps>;
+declare const MemberSelector: React.FC<IMemberPickerProps> & {
+    MemberPanel: typeof MemberPanel;
+};
 export default MemberSelector;
-export { MemberPanel };

package/dist/MemberPicker/index.js

@@ -25,7 +25,7 @@ import MemberPanel from "./components/PanelWrapper";
 import { EMemberPicker } from "./interface";
 import { getId, getPhoto } from "./utils";
 import { isUser, isUserGroup } from "./utils/getUsersWithUserId";
-var MemberSelector = function MemberSelector(_ref) {
+var Component = function Component(_ref) {
   var value = _ref.value,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? EMemberPicker.USER : _ref$type,
@@ -137,6 +137,7 @@ var MemberSelector = function MemberSelector(_ref) {
   var onSelectedChange = useCallback(function (users) {
     if (multiple) {
       onChange === null || onChange === void 0 ? void 0 : onChange(users);
+      setSelectedUserList(users);
     } else {
       onChange === null || onChange === void 0 ? void 0 : onChange(users[0]);
     }
@@ -229,5 +230,6 @@ var MemberSelector = function MemberSelector(_ref) {
     fill: "#858585"
   }))));
 };
-export default MemberSelector;
-export { MemberPanel };
+var MemberSelector = Component;
+MemberSelector.MemberPanel = MemberPanel;
+export default MemberSelector;

package/dist/Tree/Tree.js

@@ -12,7 +12,6 @@ import * as React from 'react';
 import { ConfigContext } from "../ConfigProvider";
 import { ChevronDownLine, DragLine } from "../Icon";
 import collapseMotion from "../_utils/motion";
-import theme from "../style/themes/default/themeColor.module.less";
 import dropIndicatorRender from "./utils/dropIndicator";
 import renderSwitcherIcon from "./utils/iconUtil";
 var TREE_SWITCH_LARGE_ICON_SIZE = 20;
@@ -69,7 +68,7 @@ var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     var newIcon = /*#__PURE__*/React.createElement(DragLine, {
       size: TREE_SWITCH_CION_SIZE,
-      color: theme.NL50
+      color: "#a2a2a2"
     });
     var mergedDraggable = {
       icon: newIcon
@@ -123,8 +122,8 @@ var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
     switcherIcon: function switcherIcon(nodeProps) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, renderIndent(nodeProps), renderSwitcherIcon(prefixCls, /*#__PURE__*/React.createElement(ChevronDownLine, {
         size: size === 'small' ? TREE_SWITCH_CION_SIZE : TREE_SWITCH_LARGE_ICON_SIZE,
-        color: '#B1B1B1'
-      }, "\u5C55\u5F00"), showLine, nodeProps));
+        color: '#a2a2a2'
+      }, "\u5C55\u5F00"), showLine, nodeProps, size === 'small' ? TREE_SWITCH_CION_SIZE : TREE_SWITCH_LARGE_ICON_SIZE));
     },
     draggable: draggableConfig
   }), children);

package/dist/Tree/demo/asyncLoad/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/dist/Tree/demo/asyncLoad/index.js

@@ -0,0 +1,76 @@
+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); }
+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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { Tree } from "../../..";
+import React, { useState } from 'react';
+var initTreeData = [{
+  title: 'Expand to load',
+  key: '0'
+}, {
+  title: 'Expand to load',
+  key: '1'
+}, {
+  title: 'Tree Node',
+  key: '2',
+  isLeaf: true
+}];
+
+// It's just a simple demo. You can use tree map to optimize update perf.
+var updateTreeData = function updateTreeData(list, key, children) {
+  return list.map(function (node) {
+    if (node.key === key) {
+      return _objectSpread(_objectSpread({}, node), {}, {
+        children: children
+      });
+    }
+    if (node.children) {
+      return _objectSpread(_objectSpread({}, node), {}, {
+        children: updateTreeData(node.children, key, children)
+      });
+    }
+    return node;
+  });
+};
+var App = function App() {
+  var _useState = useState(initTreeData),
+    _useState2 = _slicedToArray(_useState, 2),
+    treeData = _useState2[0],
+    setTreeData = _useState2[1];
+  var onLoadData = function onLoadData(_ref) {
+    var key = _ref.key,
+      children = _ref.children;
+    return new Promise(function (resolve) {
+      if (children) {
+        resolve();
+        return;
+      }
+      setTimeout(function () {
+        setTreeData(function (origin) {
+          return updateTreeData(origin, key, [{
+            title: 'Child Node',
+            key: "".concat(key, "-0")
+          }, {
+            title: 'Child Node',
+            key: "".concat(key, "-1")
+          }]);
+        });
+        resolve();
+      }, 100000);
+    });
+  };
+  return /*#__PURE__*/React.createElement(Tree, {
+    size: "large",
+    loadData: onLoadData,
+    treeData: treeData
+  });
+};
+export default App;

package/dist/Tree/demo/basic/index.js

@@ -2,6 +2,9 @@ import { App, Tree } from "../../..";
 import React from 'react';
 export default (function () {
   return /*#__PURE__*/React.createElement(App, null, /*#__PURE__*/React.createElement(Tree, {
+    size: "large",
+    showIcon: true,
+    icon: 'icon',
     treeData: [{
       title: 'Parent 1',
       key: '0-0',

package/dist/Tree/style/index.less

@@ -21,6 +21,12 @@
 
 .ald-tree.draggable-tree {
   padding: 3px 0;
+
+  .ald-tree-treenode {
+    .ald-tree-draggable-icon {
+      opacity: 1;
+    }
+  }
 }
 
 .ald-tree-treenode {
@@ -29,29 +35,48 @@
   font-size: @tree-font-size-default;
   font-weight: 400;
   color: #171717;
+  width: 100%;
 
   .ald-tree-draggable-icon {
     display: inline-flex;
     align-items: center;
+    cursor: pointer;
   }
 
   .ald-tree-switcher {
     display: inline-flex;
     align-items: center;
+    font-size: 16px;
+
+    .ald-tree-switcher-loading-icon {
+      animation: loading-circle 1s infinite linear;
+    }
   }
 
   .ald-tree-node-content-wrapper {
-    padding: 0;
+    padding: @tree-padding-default;
+    line-height: @tree-line-height-default;
     flex: 1;
+    display: flex;
+    align-items: center;
+    // stylelint-disable-next-line
+    .ald-tree-iconEle {
+      display: inline-flex;
+      align-items: center;
+      margin-right: 4px;
+      width: fit-content;
+      height: fit-content;
+      line-height: inherit;
+    }
 
     .ald-tree-title {
-      padding: @tree-padding-default;
       line-height: @tree-line-height-default;
       border-radius: 2px;
-      display: flex;
+      display: inline-flex;
       align-items: center;
       justify-content: space-between;
       color: #171717;
+      flex: 1;
 
       .ald-tree-tab-leader {
         flex: 1;
@@ -76,11 +101,16 @@
 .ald-tree-large {
   .ald-tree-treenode {
     font-size: @tree-font-size-large;
+    line-height: @tree-line-height-large;
+
+    .ald-tree-switcher {
+      font-size: 20px;
+    }
 
     .ald-tree-node-content-wrapper {
+      padding: @tree-padding-large;
+
       .ald-tree-title {
-        display: flex;
-        padding: @tree-padding-large;
         line-height: @tree-line-height-large;
       }
     }

package/dist/Tree/utils/iconUtil.d.ts

@@ -2,4 +2,4 @@ import * as React from 'react';
 import type { AldTreeNodeProps, SwitcherIcon, TreeLeafIcon } from '../Tree';
 export default function renderSwitcherIcon(prefixCls: string, switcherIcon: SwitcherIcon, showLine: boolean | {
     showLeafIcon: boolean | TreeLeafIcon;
-} | undefined, treeNodeProps: AldTreeNodeProps): React.ReactNode;
+} | undefined, treeNodeProps: AldTreeNodeProps, iconSize: number): React.ReactNode;

package/dist/Tree/utils/iconUtil.js

@@ -1,19 +1,21 @@
 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 CaretDownFilled from '@ant-design/icons/CaretDownFilled';
 import FileOutlined from '@ant-design/icons/FileOutlined';
-import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 import MinusSquareOutlined from '@ant-design/icons/MinusSquareOutlined';
 import PlusSquareOutlined from '@ant-design/icons/PlusSquareOutlined';
 import classNames from 'classnames';
 import * as React from 'react';
+import { Loading2Line } from "../../Icon";
 import { cloneElement, isValidElement } from "../../_utils/reactNode";
-export default function renderSwitcherIcon(prefixCls, switcherIcon, showLine, treeNodeProps) {
+export default function renderSwitcherIcon(prefixCls, switcherIcon, showLine, treeNodeProps, iconSize) {
   var isLeaf = treeNodeProps.isLeaf,
     expanded = treeNodeProps.expanded,
     loading = treeNodeProps.loading;
   if (loading) {
-    return /*#__PURE__*/React.createElement(LoadingOutlined, {
-      className: "".concat(prefixCls, "-switcher-loading-icon")
+    return /*#__PURE__*/React.createElement(Loading2Line, {
+      color: '#3271c9',
+      size: iconSize,
+      className: "".concat(prefixCls, "-switcher-loading-icon ")
     });
   }
   var showLeafIcon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aloudata/aloudata-design",
-  "version": "1.10.4",
+  "version": "1.10.6",
   "description": "",
   "license": "MIT",
   "module": "dist/index.js",