@sheinx/base 3.5.8 → 3.6.0-beta.10

package/esm/tree/tree-simple-node.js

@@ -0,0 +1,282 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useRef, createElement } from 'react';
+import classNames from 'classnames';
+import TreeContent from "./tree-content";
+import { useTreeContext } from "./tree-context";
+import { useTreeNode, util } from '@sheinx/hooks';
+import { useConfig } from "../config";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var placeElement = null;
+var innerPlaceElement = null;
+var placeInfo = {
+  start: '',
+  target: ''
+};
+var dragLock = false;
+var initPlaceElement = function initPlaceElement() {
+  if (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,
+    doubleClickExpand = props.doubleClickExpand,
+    iconClass = props.iconClass,
+    leafClass = props.leafClass,
+    nodeClass = props.nodeClass,
+    contentClass = props.contentClass,
+    expandIcons = props.expandIcons,
+    keygen = props.keygen,
+    mode = props.mode,
+    childrenKey = props.childrenKey,
+    inlineNode = props.inlineNode,
+    highlight = props.highlight,
+    dragSibling = props.dragSibling,
+    dragHoverExpand = props.dragHoverExpand,
+    dragImageSelector = props.dragImageSelector,
+    dragImageStyle = props.dragImageStyle,
+    childrenClass = props.childrenClass,
+    bindNode = props.bindNode,
+    loader = props.loader,
+    onChange = props.onChange,
+    onNodeClick = props.onNodeClick,
+    onToggle = props.onToggle,
+    onDrop = props.onDrop,
+    onDragOver = props.onDragOver,
+    onDragLeave = props.onDragLeave,
+    onDragStart = props.onDragStart,
+    onDragEnd = props.onDragEnd,
+    List = props.listComponent;
+  initPlaceElement();
+  var config = useConfig();
+  var element = useRef(null);
+  var content = useRef(null);
+  var dragImage = useRef(null);
+  var _useTreeContext = useTreeContext(),
+    getPath = _useTreeContext.getPath;
+  var _useTreeNode = useTreeNode({
+      id: id,
+      data: data,
+      bindNode: bindNode,
+      loader: loader,
+      onToggle: onToggle,
+      childrenKey: childrenKey,
+      element: element,
+      content: content.current,
+      dragImageSelector: dragImageSelector,
+      dragImageStyle: dragImageStyle
+    }),
+    active = _useTreeNode.active,
+    isLeaf = _useTreeNode.isLeaf,
+    fetching = _useTreeNode.fetching,
+    setFetching = _useTreeNode.setFetching,
+    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 = classNames(contentStyle.node, isLeaf() && (util.isString(leafClass) ? leafClass : util.isFunc(leafClass) && leafClass(data)), util.isString(nodeClass) && nodeClass, util.isFunc(nodeClass) && nodeClass(data), _defineProperty({}, contentStyle.leaf, !hasChildren));
+  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);
+    var target = getPath(id);
+    if (!current || !target) return;
+    var currentPathStr = current.path.join('/');
+    var targetPathStr = target.path.join('/');
+    if (dragSibling && targetPathStr !== currentPathStr) return;
+    if (dragHoverExpand && !expanded) {
+      onToggle === null || onToggle === void 0 || onToggle(id);
+    }
+    var hover = element.current;
+    var rect = hover.getBoundingClientRect();
+    var clientHeight = e.target.getBoundingClientRect().height || 20;
+    var hoverMiddleY = (rect.bottom - rect.top) / 2;
+    var hoverClientY = e.clientY - rect.top;
+    var position = index;
+    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);
+      }
+      placeInfo.target = id;
+      // @ts-ignore
+      placeElement.setAttribute('data-position', position);
+    }
+    if (onDragOver) onDragOver(e, data);
+  };
+  var handleDragStart = function handleDragStart(e) {
+    if (dragLock) return;
+    dragLock = true;
+    e.dataTransfer.effectAllowed = 'copyMove';
+    e.dataTransfer.setData('text/plain', id);
+    placeInfo.start = id;
+    var el = document.querySelector(dragImageSelector(data));
+    var dragEl = el || content.current;
+    var rect = dragEl.getBoundingClientRect();
+    dragImage.current = dragEl.cloneNode(true);
+    document.body.appendChild(dragImage.current);
+    dragImage.current.style.position = 'absolute';
+    dragImage.current.style.top = '-1000px';
+    dragImage.current.style.left = '-1000px';
+    dragImage.current.style.width = "".concat(rect.width, "px");
+    dragImage.current.style.background = '#fff';
+    dragImage.current.style.boxShadow = '0 0 5px 0 rgba(0, 0, 0, 0.1)';
+    if (dragImageStyle) {
+      Object.keys(dragImageStyle).forEach(function (k) {
+        var _dragImage$current;
+        var styleKey = k;
+        ((_dragImage$current = dragImage.current) === null || _dragImage$current === void 0 ? void 0 : _dragImage$current.style)[styleKey] = dragImageStyle[styleKey];
+      });
+    }
+    e.dataTransfer.setDragImage(dragImage.current, e.clientX - rect.left, e.clientY - rect.top);
+    setTimeout(function () {
+      element.current.style.display = 'none';
+    }, 0);
+    if (onDragStart) onDragStart(e, data);
+  };
+  var handleDragEnd = function handleDragEnd(e) {
+    element.current.style.display = '';
+    if (!dragLock) return;
+    dragLock = false;
+    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;
+    placeElement.parentNode.removeChild(placeElement);
+    if (onDrop && (target !== id || index !== position)) {
+      onDrop(id, target, position);
+    }
+    if (onDragEnd) onDragEnd(e, data);
+  };
+  var handleDragLeave = function handleDragLeave(e) {
+    if (onDragLeave) onDragLeave(e, data);
+  };
+  var getChildrenListProps = function getChildrenListProps() {
+    return {
+      id: id,
+      keygen: keygen,
+      jssStyle: jssStyle,
+      renderItem: renderItem,
+      expandIcons: expandIcons,
+      iconClass: iconClass,
+      leafClass: leafClass,
+      nodeClass: nodeClass,
+      isControlled: isControlled,
+      contentClass: contentClass,
+      parentClickExpand: parentClickExpand,
+      doubleClickExpand: doubleClickExpand,
+      expanded: expanded,
+      line: line,
+      data: children,
+      mode: mode,
+      index: index,
+      loader: loader,
+      inlineNode: inlineNode,
+      highlight: highlight,
+      onDrop: onDrop,
+      onChange: onChange,
+      onToggle: onToggle,
+      onNodeClick: onNodeClick,
+      onDragOver: onDragOver,
+      onDragLeave: onDragLeave,
+      onDragStart: onDragStart,
+      onDragEnd: onDragEnd,
+      bindNode: bindNode,
+      childrenClassName: util.isFunc(childrenClass) ? childrenClass === null || childrenClass === void 0 ? void 0 : childrenClass(data) : childrenClass,
+      childrenKey: childrenKey,
+      childrenClass: childrenClass,
+      dragSibling: dragSibling,
+      dragHoverExpand: dragHoverExpand,
+      dragImageStyle: dragImageStyle,
+      dragImageSelector: dragImageSelector
+    };
+  };
+  var getDropProps = function getDropProps() {
+    var dropEvents = {};
+    if (onDrop) {
+      Object.assign(dropEvents, {
+        draggable: true,
+        onDragStart: handleDragStart,
+        onDragEnd: handleDragEnd,
+        onDragLeave: handleDragLeave
+      });
+    }
+    return dropEvents;
+  };
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, getDropProps()), {}, {
+    ref: element,
+    className: rootClass,
+    dir: config.direction,
+    children: [/*#__PURE__*/_jsx(TreeContent, {
+      jssStyle: jssStyle,
+      isControlled: isControlled,
+      id: id,
+      line: line,
+      data: data,
+      mode: mode,
+      contentClass: contentClass,
+      active: active,
+      fetching: fetching,
+      expanded: expanded,
+      keygen: keygen,
+      bindNode: bindNode,
+      bindContent: content,
+      childrenKey: childrenKey,
+      renderItem: renderItem,
+      iconClass: iconClass,
+      leafClass: leafClass,
+      expandIcons: expandIcons,
+      parentClickExpand: parentClickExpand,
+      doubleClickExpand: doubleClickExpand,
+      loader: loader,
+      inlineNode: inlineNode,
+      highlight: highlight,
+      setFetching: setFetching,
+      onChange: onChange,
+      onFetch: handleFetch,
+      onNodeClick: onNodeClick,
+      onDragOver: handleDragOver,
+      onToggle: handleToggle
+    }), hasChildren && /*#__PURE__*/createElement(List, getChildrenListProps())]
+  }));
+};
+export default Node;

package/esm/tree/tree-virtual-content.d.ts

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

package/esm/tree/tree-virtual-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-virtual-content.d.ts","sourceRoot":"","sources":["tree-virtual-content.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAmB,MAAM,eAAe,CAAC;AAE9D,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAO9D,QAAA,MAAM,kBAAkB,0GA6NvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/esm/tree/tree-virtual-content.js

@@ -0,0 +1,196 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useRef } from 'react';
+import classNames from 'classnames';
+import { util, useRender } from '@sheinx/hooks';
+import Checkbox from "./tree-checkbox";
+import { useTreeContext } from "./tree-context";
+import Icons from "../icons";
+import Spin from "../spin";
+import { useConfig } from "../config";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var NodeVirtualContent = function NodeVirtualContent(props) {
+  var jssStyle = props.jssStyle,
+    id = props.id,
+    level = props.level,
+    active = props.active,
+    data = props.data,
+    line = props.line,
+    iconClass = props.iconClass,
+    contentClassProp = props.contentClass,
+    expandIcons = props.expandIcons,
+    renderItem = props.renderItem,
+    expanded = props.expanded,
+    fetching = props.fetching,
+    inlineNode = props.inlineNode,
+    childrenKey = props.childrenKey,
+    parentClickExpand = props.parentClickExpand,
+    doubleClickExpand = props.doubleClickExpand,
+    bindContent = props.bindContent,
+    highlight = props.highlight,
+    setFetching = props.setFetching,
+    loader = props.loader,
+    onChange = props.onChange,
+    onToggle = props.onToggle,
+    onNodeClick = props.onNodeClick;
+  var forceUpdate = useRender();
+  var _useTreeContext = useTreeContext(),
+    isDisabled = _useTreeContext.isDisabled,
+    bindUpdate = _useTreeContext.bindUpdate;
+  var clickLock = useRef(false);
+  var config = useConfig();
+  var disabled = isDisabled(id);
+  bindUpdate(id, forceUpdate);
+  var contentStyle = (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.tree()) || {};
+  var rootClass = classNames(contentStyle.contentWrapper, _defineProperty(_defineProperty(_defineProperty({}, contentStyle.childnode, data[childrenKey] && data[childrenKey].length > 0), contentStyle.inlineContent, inlineNode), contentStyle.contentDisabled, disabled));
+  var contentClass = classNames(contentStyle.content, util.isString(contentClassProp) && contentClassProp, util.isFunc(contentClassProp) && contentClassProp(data));
+  // const textClass = classNames(contentStyle.text, disabled ? contentStyle.textDisabled : '');
+  var textClass = classNames(contentStyle.text);
+  var hasExpandIcons = expandIcons !== undefined;
+  var children = data[childrenKey];
+  var hasChildren = children && children.length > 0;
+  var contentDataProps = function contentDataProps() {
+    var dataProps = {};
+    if (highlight) {
+      dataProps['data-active'] = active;
+    }
+    // if (disabled) {
+    //   dataProps['data-disabled'] = disabled;
+    // }
+    return dataProps;
+  };
+  var handleIndicatorClick = function handleIndicatorClick() {
+    onToggle === null || onToggle === void 0 || onToggle(id);
+    if (data[childrenKey] !== undefined) return;
+    if (loader) {
+      setFetching(true);
+      var result = loader(id, data);
+      if (util.isPromise(result)) {
+        result.then(function () {
+          setFetching(false);
+        });
+      }
+    }
+  };
+  var handleNodeClick = function handleNodeClick() {
+    if (parentClickExpand && hasChildren) {
+      if (clickLock.current) {
+        clickLock.current = false;
+        return;
+      }
+      handleIndicatorClick();
+    } else {
+      onNodeClick(data, id);
+    }
+  };
+  var handleClick = function handleClick() {
+    clickLock.current = true;
+  };
+  var handleNodeExpand = function handleNodeExpand() {
+    if (!doubleClickExpand) return;
+    if (hasChildren) handleIndicatorClick();
+  };
+  var renderLoading = function renderLoading() {
+    return /*#__PURE__*/_jsx("span", {
+      style: {
+        left: (level - 1) * 24
+      },
+      className: contentStyle.iconWrapper,
+      "data-expanded": expanded,
+      "data-icon": hasExpandIcons,
+      dir: config.direction,
+      children: /*#__PURE__*/_jsx(Spin, {
+        size: 12,
+        jssStyle: jssStyle,
+        ignoreConfig: true,
+        name: "ring"
+      })
+    });
+  };
+  var renderIndicator = function renderIndicator() {
+    var children = data[childrenKey];
+    var icon = expandIcons ? expandIcons[expanded ? 1 : 0] : expanded ? Icons.tree.LineExpand : Icons.tree.LineCollapse;
+    var indicator;
+    if (line) {
+      indicator = /*#__PURE__*/_jsx("span", {
+        className: contentStyle.iconWrapper,
+        "data-expanded": expanded,
+        "data-icon": hasExpandIcons,
+        dir: config.direction,
+        children: /*#__PURE__*/_jsx("span", {
+          className: classNames(contentStyle.icon, iconClass),
+          onClick: handleIndicatorClick,
+          dir: config.direction,
+          children: util.isFunc(icon) ? icon(data) : icon
+        })
+      });
+    } else {
+      indicator = /*#__PURE__*/_jsx("span", {
+        style: {
+          left: (level - 1) * 24
+        },
+        className: contentStyle.iconWrapper,
+        "data-expanded": expanded,
+        "data-icon": hasExpandIcons,
+        dir: config.direction,
+        children: /*#__PURE__*/_jsx("span", {
+          className: classNames(contentStyle.icon, iconClass),
+          onClick: handleIndicatorClick,
+          dir: config.direction,
+          children: util.isFunc(icon) ? icon(data) : hasExpandIcons ? icon : Icons.tree.Expand
+        })
+      });
+    }
+    if (children && children.length > 0) return indicator;
+    if (Array.isArray(children) || children === null) return null;
+    if (fetching && !children) return renderLoading();
+    if (loader && children === undefined) return indicator;
+    return null;
+  };
+  var renderCheckbox = function renderCheckbox() {
+    return /*#__PURE__*/_jsx(Checkbox, {
+      jssStyle: jssStyle,
+      id: id,
+      disabled: disabled,
+      className: contentStyle.checkbox,
+      onChange: onChange,
+      onClick: handleClick
+    });
+  };
+  var renderNode = function renderNode() {
+    var render = util.isFunc(renderItem) ? renderItem : function (item) {
+      return item[renderItem];
+    };
+    return render(data, expanded, active, id);
+  };
+  var contentEvent = {
+    onClick: inlineNode ? undefined : handleNodeClick
+  };
+  var textEvent = {
+    onClick: inlineNode ? handleNodeClick : undefined
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: rootClass,
+    dir: config.direction,
+    children: [renderIndicator(), /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+      dir: config.direction,
+      "data-expanded": expanded,
+      ref: bindContent,
+      className: contentClass
+    }, contentDataProps()), contentEvent), {}, {
+      children: [onChange && renderCheckbox(), /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+        dir: config.direction,
+        className: textClass,
+        onDoubleClick: handleNodeExpand
+      }, textEvent), {}, {
+        children: renderNode()
+      }))]
+    }))]
+  });
+};
+export default NodeVirtualContent;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-virtual-node.d.ts","sourceRoot":"","sources":["tree-virtual-node.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,OAAO,EAA4B,YAAY,EAAE,MAAM,eAAe,CAAC;AAKvE,QAAA,MAAM,WAAW,uGAyHhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/esm/tree/tree-virtual-node.js

@@ -0,0 +1,116 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useTreeContext } from "./tree-context";
+import { useRef } from 'react';
+import classNames from 'classnames';
+import TreeVirtualContent from "./tree-virtual-content";
+import { useTreeVirtualNode, util } from '@sheinx/hooks';
+import { useConfig } from "../config";
+import { jsx as _jsx } from "react/jsx-runtime";
+var placeElement = null;
+var VirtualNode = function VirtualNode(props) {
+  var jssStyle = props.jssStyle,
+    id = props.id,
+    data = props.data,
+    level = props.level,
+    line = props.line,
+    isControlled = props.isControlled,
+    renderItem = props.renderItem,
+    parentClickExpand = props.parentClickExpand,
+    doubleClickExpand = props.doubleClickExpand,
+    iconClass = props.iconClass,
+    leafClass = props.leafClass,
+    nodeClass = props.nodeClass,
+    contentClass = props.contentClass,
+    expandIcons = props.expandIcons,
+    keygen = props.keygen,
+    mode = props.mode,
+    childrenKey = props.childrenKey,
+    inlineNode = props.inlineNode,
+    highlight = props.highlight,
+    loader = props.loader,
+    onChange = props.onChange,
+    onNodeClick = props.onNodeClick,
+    onToggle = props.onToggle;
+  var config = useConfig();
+  var datum = useTreeContext();
+  var element = useRef(null);
+  var content = useRef(null);
+  var _useTreeVirtualNode = useTreeVirtualNode({
+      id: id,
+      data: data,
+      datum: datum,
+      bindNode: datum.bindVirtualNode,
+      loader: loader,
+      onToggle: onToggle,
+      childrenKey: childrenKey,
+      element: element,
+      content: content.current
+    }),
+    active = _useTreeVirtualNode.active,
+    isLeaf = _useTreeVirtualNode.isLeaf,
+    fetching = _useTreeVirtualNode.fetching,
+    setFetching = _useTreeVirtualNode.setFetching,
+    expanded = _useTreeVirtualNode.expanded,
+    setExpanded = _useTreeVirtualNode.setExpanded;
+  var children = data[childrenKey];
+  var hasChildren = children && children.length > 0;
+  var contentStyle = (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.tree()) || {};
+  var rootClass = classNames(contentStyle.node, isLeaf() && (util.isString(leafClass) ? leafClass : util.isFunc(leafClass) && leafClass(data)), util.isString(nodeClass) && nodeClass, util.isFunc(nodeClass) && nodeClass(data), _defineProperty({}, contentStyle.leaf, !hasChildren));
+  if (placeElement) {
+    placeElement.className = contentStyle.placement;
+  }
+  var handleFetch = function handleFetch() {};
+  var handleToggle = function handleToggle() {
+    var nextExpanded = !expanded;
+    setExpanded(nextExpanded);
+    var status = datum.dataFlatStatusMap.get(id);
+    datum.dataFlatStatusMap.set(id, {
+      active: (status === null || status === void 0 ? void 0 : status.active) || false,
+      fetching: (status === null || status === void 0 ? void 0 : status.fetching) || false,
+      expanded: nextExpanded
+    });
+    if (onToggle) onToggle(id, nextExpanded);
+  };
+  return /*#__PURE__*/_jsx("div", {
+    ref: element,
+    className: rootClass,
+    dir: config.direction,
+    style: {
+      paddingLeft: level * 24
+    },
+    children: /*#__PURE__*/_jsx(TreeVirtualContent, {
+      jssStyle: jssStyle,
+      isControlled: isControlled,
+      id: id,
+      level: level,
+      line: line,
+      data: data,
+      mode: mode,
+      contentClass: contentClass,
+      active: active,
+      fetching: fetching,
+      expanded: expanded,
+      keygen: keygen,
+      bindContent: content,
+      childrenKey: childrenKey,
+      renderItem: renderItem,
+      iconClass: iconClass,
+      leafClass: leafClass,
+      expandIcons: expandIcons,
+      parentClickExpand: parentClickExpand,
+      doubleClickExpand: doubleClickExpand,
+      loader: loader,
+      inlineNode: inlineNode,
+      highlight: highlight,
+      setFetching: setFetching,
+      onChange: onChange,
+      onFetch: handleFetch,
+      onNodeClick: onNodeClick,
+      onToggle: handleToggle
+    })
+  });
+};
+export default VirtualNode;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-virtual.d.ts","sourceRoot":"","sources":["tree-virtual.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,YAAY,EAAgB,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,QAAA,MAAM,WAAW,mGAwFhB,CAAC;AAEF,eAAe,WAAW,CAAC"}