@sheinx/base 3.0.0-alpha.2 → 3.0.0-alpha.20

package/esm/tree/tree-node.js

@@ -17,19 +17,27 @@ var _hooks = require("@sheinx/hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 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) { (0, _defineProperty2.default)(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; }
-var placeElement = document.createElement('div');
-var innerPlaceElement = document.createElement('div');
-placeElement.appendChild(innerPlaceElement);
+var placeElement = null;
+var innerPlaceElement = null;
 var placeInfo = {
   start: '',
   target: ''
 };
 var dragLock = false;
+var initPlaceElement = function initPlaceElement() {
+  if (_hooks.util.isBrowser() && !(placeElement && innerPlaceElement)) {
+    placeElement = document.createElement('div');
+    innerPlaceElement = document.createElement('div');
+    placeElement.appendChild(innerPlaceElement);
+  }
+};
+initPlaceElement();
 var Node = function Node(props) {
   var jssStyle = props.jssStyle,
     id = props.id,
     data = props.data,
     line = props.line,
+    isControlled = props.isControlled,
     index = props.index,
     renderItem = props.renderItem,
     parentClickExpand = props.parentClickExpand,
@@ -37,6 +45,7 @@ var Node = function Node(props) {
     iconClass = props.iconClass,
     leafClass = props.leafClass,
     nodeClass = props.nodeClass,
+    contentClass = props.contentClass,
     expandIcons = props.expandIcons,
     keygen = props.keygen,
     mode = props.mode,
@@ -59,9 +68,9 @@ var Node = function Node(props) {
     onDragStart = props.onDragStart,
     onDragEnd = props.onDragEnd,
     List = props.listComponent;
+  initPlaceElement();
   var element = (0, _react.useRef)(null);
   var content = (0, _react.useRef)(null);
-  // const dragLock = useRef(false);
   var dragImage = (0, _react.useRef)(null);
   var _useTreeContext = (0, _treeContext.useTreeContext)(),
     getPath = _useTreeContext.getPath;
@@ -78,17 +87,24 @@ var Node = function Node(props) {
       dragImageStyle: dragImageStyle
     }),
     active = _useTreeNode.active,
-    expanded = _useTreeNode.expanded,
     isLeaf = _useTreeNode.isLeaf,
     fetching = _useTreeNode.fetching,
     setFetching = _useTreeNode.setFetching,
-    handleToggle = _useTreeNode.onToggle;
+    expanded = _useTreeNode.expanded,
+    setExpanded = _useTreeNode.setExpanded;
   var children = data[childrenKey];
   var hasChildren = children && children.length > 0;
   var contentStyle = (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.tree()) || {};
   var rootClass = (0, _classnames.default)(contentStyle.node, isLeaf() && leafClass, _hooks.util.isString(nodeClass) && nodeClass, _hooks.util.isFunc(nodeClass) && nodeClass(data), (0, _defineProperty2.default)({}, contentStyle.leaf, !hasChildren));
-  placeElement.className = contentStyle.placement;
+  if (placeElement) {
+    placeElement.className = contentStyle.placement;
+  }
   var handleFetch = function handleFetch() {};
+  var handleToggle = function handleToggle() {
+    var nextExpanded = !expanded;
+    setExpanded(nextExpanded);
+    if (onToggle) onToggle(id, nextExpanded);
+  };
   var handleDragOver = function handleDragOver(e) {
     if (!dragLock) return;
     var current = getPath(placeInfo.start);
@@ -98,7 +114,7 @@ var Node = function Node(props) {
     var targetPathStr = target.path.join('/');
     if (dragSibling && targetPathStr !== currentPathStr) return;
     if (dragHoverExpand && !expanded) {
-      handleToggle();
+      onToggle === null || onToggle === void 0 ? void 0 : onToggle(id);
     }
     var hover = element.current;
     var rect = hover.getBoundingClientRect();
@@ -106,25 +122,29 @@ var Node = function Node(props) {
     var hoverMiddleY = (rect.bottom - rect.top) / 2;
     var hoverClientY = e.clientY - rect.top;
     var position = index;
-    innerPlaceElement.style.height = '0px';
-    if (hoverClientY < hoverMiddleY + clientHeight * 0.2) {
-      hover.parentNode.insertBefore(placeElement, hover);
-      if (hoverClientY > clientHeight * 0.3) {
-        if (!dragSibling) {
-          position = -1;
-          innerPlaceElement.style.height = "".concat(rect.height, "px");
-        } else {
-          position += 1;
-          hover.parentNode.insertBefore(placeElement, hover.nextElementSibling);
+    if (innerPlaceElement) {
+      innerPlaceElement.style.height = '0px';
+    }
+    if (placeElement && innerPlaceElement) {
+      if (hoverClientY < hoverMiddleY + clientHeight * 0.2) {
+        hover.parentNode.insertBefore(placeElement, hover);
+        if (hoverClientY > clientHeight * 0.3) {
+          if (!dragSibling) {
+            position = -1;
+            innerPlaceElement.style.height = "".concat(rect.height, "px");
+          } else {
+            position += 1;
+            hover.parentNode.insertBefore(placeElement, hover.nextElementSibling);
+          }
         }
+      } else {
+        position += 1;
+        hover.parentNode.insertBefore(placeElement, hover.nextElementSibling);
       }
-    } else {
-      position += 1;
-      hover.parentNode.insertBefore(placeElement, hover.nextElementSibling);
+      placeInfo.target = id;
+      // @ts-ignore
+      placeElement.setAttribute('data-position', position);
     }
-    placeInfo.target = id;
-    // @ts-ignore
-    placeElement.setAttribute('data-position', position);
     if (onDragOver) onDragOver(e, data);
   };
   var handleDragStart = function handleDragStart(e) {
@@ -161,7 +181,7 @@ var Node = function Node(props) {
     element.current.style.display = '';
     if (!dragLock) return;
     dragLock = false;
-    if (!placeElement.parentNode) return;
+    if (!placeElement || !placeElement.parentNode) return;
     if (dragImage.current && dragImage.current.parentNode) dragImage.current.parentNode.removeChild(dragImage.current);
     var position = parseInt(placeElement.getAttribute('data-position') || '', 10);
     var target = placeInfo.target;
@@ -185,6 +205,8 @@ var Node = function Node(props) {
       iconClass: iconClass,
       leafClass: leafClass,
       nodeClass: nodeClass,
+      isControlled: isControlled,
+      contentClass: contentClass,
       parentClickExpand: parentClickExpand,
       expanded: expanded,
       line: line,
@@ -224,10 +246,12 @@ var Node = function Node(props) {
     className: rootClass,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_treeContent.default, {
       jssStyle: jssStyle,
+      isControlled: isControlled,
       id: id,
       line: line,
       data: data,
       mode: mode,
+      contentClass: contentClass,
       active: active,
       fetching: fetching,
       expanded: expanded,

package/esm/tree/tree-node.type.d.ts

@@ -3,22 +3,23 @@ import { CommonType } from '../common/type';
 import { BaseTreeProps, KeygenResult, UpdateFunc } from '@sheinx/hooks';
 import { JsstyleType, TreeRenderItemType } from './tree.type';
 import { TreeListProps } from './tree-list.type';
-export interface TreeNodeProps<DataItem> extends Omit<BaseTreeProps<DataItem>, 'data' | 'childrenKey' | 'expanded'>, Pick<CommonType, 'className'> {
-    jssStyle: JsstyleType;
-    id: string;
+export interface TreeNodeProps<DataItem, Value extends KeygenResult> extends Omit<BaseTreeProps<DataItem>, 'data' | 'childrenKey' | 'expanded'>, Pick<CommonType, 'className'> {
+    jssStyle?: JsstyleType;
+    id: KeygenResult;
     data: DataItem;
     index: number;
     line: boolean;
-    expanded?: boolean;
+    expanded: boolean;
     doubleClickExpand?: boolean;
     parentClickExpand?: boolean;
     childrenKey: keyof DataItem;
     onChange?: (value: KeygenResult[]) => void;
-    onDrop?: (id: KeygenResult, targetId: KeygenResult, position: number) => void;
-    onToggle?: (id: KeygenResult, expanded: boolean) => void;
+    onDrop?: (id: KeygenResult, targetId: Value, position: number) => void;
+    onToggle?: (id: KeygenResult, expanded?: boolean) => void;
     iconClass?: string;
     leafClass?: string;
     nodeClass?: string | ((data: DataItem) => string);
+    contentClass?: string | ((data: DataItem) => string);
     expandIcons?: (React.ReactNode | ((d: DataItem) => React.ReactNode))[];
     childrenClass: (data: DataItem) => string | undefined;
     bindNode: (id: KeygenResult, update: UpdateFunc) => {
@@ -27,7 +28,7 @@ export interface TreeNodeProps<DataItem> extends Omit<BaseTreeProps<DataItem>, '
     };
     onNodeClick: (data: DataItem, id: KeygenResult) => void;
     renderItem: TreeRenderItemType<DataItem>;
-    listComponent: (props: TreeListProps<DataItem>) => JSX.Element | null;
+    listComponent: (props: TreeListProps<DataItem, Value>) => JSX.Element | null;
     dragImageSelector: (data?: DataItem) => string | undefined;
     dragImageStyle?: React.CSSProperties;
     dragSibling?: boolean;

package/esm/tree/tree-node.type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree-node.type.d.ts","sourceRoot":"","sources":["tree-node.type.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tree-node.type.d.ts","sourceRoot":"","sources":["tree-node.type.ts"],"names":[],"mappings":"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"}

package/esm/tree/tree-root.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
+import { KeygenResult } from '@sheinx/hooks';
 import { TreeRootProps } from './tree-root.type';
-declare const Root: <DataItem>(props: TreeRootProps<DataItem>) => JSX.Element;
+declare const Root: <DataItem, Value extends KeygenResult>(props: TreeRootProps<DataItem, Value>) => JSX.Element;
 export default Root;
 //# sourceMappingURL=tree-root.d.ts.map

package/esm/tree/tree-root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree-root.d.ts","sourceRoot":"","sources":["tree-root.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIjD,QAAA,MAAM,IAAI,2DAMT,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"tree-root.d.ts","sourceRoot":"","sources":["tree-root.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIjD,QAAA,MAAM,IAAI,8FAMT,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/esm/tree/tree-root.type.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { JsstyleType, TreeRenderItemType } from './tree.type';
-import { BaseTreeProps, KeygenResult, UpdateFunc } from '@sheinx/hooks';
-export interface TreeRootProps<DataItem> extends Omit<BaseTreeProps<DataItem>, 'chilrdrenKey'> {
-    jssStyle: JsstyleType;
+import { BaseTreeProps, KeygenResult, UpdateFunc, ObjectKey } from '@sheinx/hooks';
+export interface TreeRootProps<DataItem, Value extends KeygenResult> extends Omit<BaseTreeProps<DataItem>, 'chilrdrenKey'> {
+    jssStyle?: JsstyleType;
     line: boolean;
     childrenClass: (data: DataItem) => string | undefined;
     bindNode: (id: KeygenResult, update: UpdateFunc) => {
@@ -11,20 +11,21 @@ export interface TreeRootProps<DataItem> extends Omit<BaseTreeProps<DataItem>, '
     };
     parentClickExpand?: boolean;
     doubleClickExpand?: boolean;
-    childrenKey: keyof DataItem;
+    childrenKey: ObjectKey<DataItem>;
     renderItem: TreeRenderItemType<DataItem>;
     iconClass?: string;
     leafClass?: string;
     nodeClass?: string | ((data: DataItem) => string);
+    contentClass?: string | ((data: DataItem) => string);
     expandIcons?: (React.ReactNode | ((d: DataItem) => React.ReactNode))[];
     dragImageSelector: (data?: DataItem) => string | undefined;
     dragImageStyle?: React.CSSProperties;
     dragSibling?: boolean;
     dragHoverExpand?: boolean;
-    onToggle?: (id: KeygenResult, expanded: boolean) => void;
+    onToggle?: (id: KeygenResult, expanded?: boolean) => void;
     onNodeClick: (data: DataItem, id: KeygenResult) => void;
     onChange?: (value: KeygenResult[]) => void;
-    onDrop?: (id: KeygenResult, targetId: KeygenResult, position: number) => void;
+    onDrop?: (id: KeygenResult, targetId: Value, position: number) => void;
     loader?: (key: KeygenResult, data: DataItem) => void;
     inlineNode?: boolean;
     highlight?: boolean;

package/esm/tree/tree-root.type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree-root.type.d.ts","sourceRoot":"","sources":["tree-root.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAExE,MAAM,WAAW,aAAa,CAAC,QAAQ,CAAE,SAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC5F,QAAQ,EAAE,WAAW,CAAC;IACtB,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,GAAG,SAAS,CAAC;IACtD,QAAQ,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,KAAK;QAAE,QAAQ,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,OAAO,CAAA;KAAE,CAAC;IAC3F,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,MAAM,QAAQ,CAAC;IAC5B,UAAU,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC,CAAC;IAClD,WAAW,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,QAAQ,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC;IACvE,iBAAiB,EAAE,CAAC,IAAI,CAAC,EAAE,QAAQ,KAAK,MAAM,GAAG,SAAS,CAAC;IAC3D,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD,WAAW,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,YAAY,KAAK,IAAI,CAAC;IACxD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAC3C,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9E,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACzD,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1D,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC5D"}
+{"version":3,"file":"tree-root.type.d.ts","sourceRoot":"","sources":["tree-root.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAEnF,MAAM,WAAW,aAAa,CAAC,QAAQ,EAAE,KAAK,SAAS,YAAY,CACjE,SAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,cAAc,CAAC;IACrD,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,GAAG,SAAS,CAAC;IACtD,QAAQ,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,KAAK;QAAE,QAAQ,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,OAAO,CAAA;KAAE,CAAC;IAC3F,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;IACjC,UAAU,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC,CAAC;IACrD,WAAW,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,QAAQ,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC;IACvE,iBAAiB,EAAE,CAAC,IAAI,CAAC,EAAE,QAAQ,KAAK,MAAM,GAAG,SAAS,CAAC;IAC3D,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1D,WAAW,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,YAAY,KAAK,IAAI,CAAC;IACxD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAC3C,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvE,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACzD,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1D,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC5D"}

package/esm/tree/tree.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { TreeProps } from './tree.type';
-declare const Tree: <DataItem>(props: TreeProps<DataItem>) => JSX.Element;
+declare const Tree: <DataItem, Value extends any[]>(props: TreeProps<DataItem, Value>) => JSX.Element;
 export default Tree;
 //# sourceMappingURL=tree.d.ts.map

package/esm/tree/tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["tree.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAe,MAAM,aAAa,CAAC;AAMrD,QAAA,MAAM,IAAI,uDAgNT,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["tree.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAMxC,QAAA,MAAM,IAAI,mFA0OT,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/esm/tree/tree.js

@@ -6,6 +6,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.set.js");
+require("core-js/modules/web.dom-collections.iterator.js");
 require("core-js/modules/web.dom-collections.for-each.js");
 require("core-js/modules/es.array.index-of.js");
 require("core-js/modules/es.array.filter.js");
@@ -14,15 +17,16 @@ require("core-js/modules/es.array.splice.js");
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _hooks = require("@sheinx/hooks");
 var _treeRoot = _interopRequireDefault(require("./tree-root"));
-var _immer = require("immer");
 var _treeContext = require("./tree-context");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["jssStyle", "line", "childrenKey", "data", "value", "mode", "keygen", "expanded", "expandIcons", "iconClass", "leafClass", "nodeClass", "renderItem", "defaultValue", "dataUpdate", "childrenClass", "defaultExpandAll", "defaultExpanded", "parentClickExpand", "doubleClickExpand", "dragImageSelector", "dragImageStyle", "dragSibling", "dragHoverExpand", "active", "disabled", "inlineNode", "highlight", "className", "onClick", "loader", "onDrop", "onExpand", "onChange", "onDragEnd", "onDragLeave", "onDragOver", "onDragStart"];
+var _excluded = ["jssStyle", "line", "childrenKey", "data", "value", "mode", "keygen", "expanded", "expandIcons", "iconClass", "leafClass", "nodeClass", "contentClass", "renderItem", "defaultValue", "dataUpdate", "childrenClass", "defaultExpandAll", "defaultExpanded", "parentClickExpand", "doubleClickExpand", "dragImageSelector", "dragImageStyle", "dragSibling", "unmatch", "dragHoverExpand", "active", "disabled", "inlineNode", "highlight", "className", "onClick", "loader", "onRef", "onDrop", "onExpand", "onChange", "onDragEnd", "onDragLeave", "onDragOver", "onDragStart"];
 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) { (0, _defineProperty2.default)(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; }
+var produce = _hooks.util.produce;
 var Tree = function Tree(props) {
   var _classNames;
   var jssStyle = props.jssStyle,
@@ -35,11 +39,12 @@ var Tree = function Tree(props) {
     _props$mode = props.mode,
     mode = _props$mode === void 0 ? 1 : _props$mode,
     keygen = props.keygen,
-    expanded = props.expanded,
+    expandedProp = props.expanded,
     expandIcons = props.expandIcons,
     iconClass = props.iconClass,
     leafClass = props.leafClass,
     nodeClass = props.nodeClass,
+    contentClass = props.contentClass,
     renderItem = props.renderItem,
     defaultValue = props.defaultValue,
     _props$dataUpdate = props.dataUpdate,
@@ -52,6 +57,7 @@ var Tree = function Tree(props) {
     dragImageSelector = props.dragImageSelector,
     dragImageStyle = props.dragImageStyle,
     dragSibling = props.dragSibling,
+    unmatch = props.unmatch,
     dragHoverExpand = props.dragHoverExpand,
     active = props.active,
     disabled = props.disabled,
@@ -60,44 +66,49 @@ var Tree = function Tree(props) {
     className = props.className,
     onClick = props.onClick,
     loader = props.loader,
+    onRef = props.onRef,
     onDrop = props.onDrop,
-    onExpand = props.onExpand,
+    onExpandProp = props.onExpand,
     onChange = props.onChange,
     onDragEnd = props.onDragEnd,
     onDragLeave = props.onDragLeave,
     onDragOver = props.onDragOver,
     onDragStart = props.onDragStart,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-
-  // [TODO] - Props: dataUpdate
-  // [TODO] - This is a workaround for the issue of data not updating when dataProps changes.
-  // const [data, setData] = useState<DataItem[]>(dataProps);
-  // useEffect(() => {
-  //   if (dataProps !== data && dataUpdate) setData(dataProps);
-  // }, [dataProps])
-
+  var prevData = (0, _hooks.usePrevious)(data);
   var _useTree = (0, _hooks.useTree)({
       mode: mode,
       value: value,
       data: data,
       dataUpdate: dataUpdate,
       active: active,
-      expanded: expanded,
+      unmatch: unmatch,
+      isControlled: 'expanded' in props,
+      expanded: expandedProp,
       disabled: disabled,
       defaultValue: defaultValue,
       defaultExpandAll: defaultExpandAll,
       defaultExpanded: defaultExpanded,
       childrenKey: childrenKey,
-      keygen: keygen
+      keygen: keygen,
+      onExpand: onExpandProp
     }),
-    func = _useTree.func,
-    updateMap = _useTree.updateMap;
+    datum = _useTree.datum,
+    updateMap = _useTree.updateMap,
+    expanded = _useTree.expanded,
+    onExpand = _useTree.onExpand;
   var treeStyle = (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.tree()) || {};
   var rootClass = (0, _classnames.default)(treeStyle.tree, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, treeStyle.line, line), (0, _defineProperty2.default)(_classNames, treeStyle.noline, !line), _classNames));
   var getDragImageSelector = function getDragImageSelector(data) {
     if (_hooks.util.isFunc(dragImageSelector)) return dragImageSelector(data);
     return dragImageSelector;
   };
+  var handleUpdateExpanded = function handleUpdateExpanded(expanded) {
+    var tempExpandMap = new Set(expanded);
+    updateMap.forEach(function (update, id) {
+      update('expanded', tempExpandMap.has(id));
+    });
+  };
   var handleUpdateActive = function handleUpdateActive(active) {
     updateMap.forEach(function (update, id) {
       update('active', id === active);
@@ -108,7 +119,7 @@ var Tree = function Tree(props) {
       handleUpdateActive(id);
     }
     if (onClick) {
-      onClick(node, id, func.getPath(id));
+      onClick(node, id, datum.getPath(id));
     }
   };
   var handleToggle = function handleToggle(id) {
@@ -130,10 +141,10 @@ var Tree = function Tree(props) {
   var handleDrop = function handleDrop(id, targetId, position) {
     var targetIdCopy = targetId;
     var positionCopy = position;
-    var current = func.getPath(id);
-    var target = func.getPath(targetIdCopy);
+    var current = datum.getPath(id);
+    var target = datum.getPath(targetIdCopy);
     if (!current || !target) return;
-    var newData = (0, _immer.produce)(data, function (draft) {
+    var newData = produce(data, function (draft) {
       var node = draft;
       var temp;
       var removeNode = function removeNode() {};
@@ -179,13 +190,29 @@ var Tree = function Tree(props) {
       onDrop(newData, id, targetId, position);
     }
   };
-  var onToggle = onExpand ? handleToggle : undefined;
+  (0, _react.useEffect)(function () {
+    handleUpdateExpanded(expanded);
+  }, [expanded]);
+  (0, _react.useEffect)(function () {
+    if (!prevData) return;
+    if (prevData !== data && dataUpdate) {
+      datum.setData(data);
+    }
+  }, [data]);
+  (0, _react.useEffect)(function () {
+    if (!value) return;
+    datum.setValue(value);
+  }, [value]);
+  (0, _react.useEffect)(function () {
+    if (onRef) onRef(datum);
+  }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
     className: rootClass
   }, rest), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_treeContext.Provider, {
-      value: func,
+      value: datum,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_treeRoot.default, {
+        isControlled: 'expanded' in props,
         jssStyle: jssStyle,
         data: data,
         mode: mode,
@@ -195,19 +222,20 @@ var Tree = function Tree(props) {
         iconClass: iconClass,
         leafClass: leafClass,
         nodeClass: nodeClass,
+        contentClass: contentClass,
         expanded: expanded,
         expandIcons: expandIcons,
         childrenClass: _hooks.util.isFunc(childrenClass) ? childrenClass : function () {
           return childrenClass;
         },
-        bindNode: func.bindNode,
+        bindNode: datum.bindNode,
         childrenKey: childrenKey,
         onNodeClick: handleNodeClick,
         renderItem: renderItem,
         loader: loader,
         inlineNode: inlineNode,
         highlight: highlight,
-        onToggle: onToggle,
+        onToggle: handleToggle,
         onDrop: onDrop && handleDrop,
         onDragOver: onDragOver,
         onDragStart: onDragStart,