zp-bee/es/org-tree/TreeNode.js

zp-bee，是一款基于 Dumi，由 React + TypeScript 开发的组件库 🎉。

import React from 'react';
import { defaultPrefixCls } from '../_utils/config'; // 判断是否叶子节点

var isLeaf = function isLeaf(data, prop) {
  var node = prop.node;
  return !(Array.isArray(data[node.children]) && data[node.children].length > 0);
}; // 创建 node 节点


export var renderNode = function renderNode(data, prop) {
  var node = prop.node;
  var cls = ['org-tree-node'];

  if (isLeaf(data, prop)) {
    cls.push('is-leaf');
  } else if (prop.collapsable && !data[node.expand]) {
    cls.push('collapsed');
  }

  return /*#__PURE__*/React.createElement("div", {
    key: data[node.id],
    className: cls.join(' ')
  }, renderLabel(data, prop), !prop.collapsable || data[node.expand] ? renderChildren(data.children, prop) : null);
}; // 创建展开折叠按钮

export var renderBtn = function renderBtn(data, prop) {
  var onExpand = prop.onExpand;
  var node = prop.node;
  var cls = ['org-tree-node-btn'];

  if (data[node.expand]) {
    cls.push('expanded');
  }

  return /*#__PURE__*/React.createElement("span", {
    key: data[node.id],
    className: cls.join(' '),
    onClick: function onClick(e) {
      e.stopPropagation();
      typeof onExpand === 'function' && onExpand(e, data);
    }
  });
}; // 创建 label 节点

export var renderLabel = function renderLabel(data, prop) {
  var node = prop.node;
  var label = data[node.label];
  var renderContent = prop.renderContent;
  var _onClick = prop.onClick;
  var childNodes = [];

  if (typeof renderContent === 'function') {
    var vnode = renderContent(data);
    vnode && childNodes.push(vnode);
  } else {
    childNodes.push(label);
  }

  if (prop.collapsable && !isLeaf(data, prop)) {
    childNodes.push(renderBtn(data, prop));
  }

  var cls = ['org-tree-node-label-inner', 'org-tree-node-cursor', "".concat(defaultPrefixCls, "-inline-block")];
  var dls = ['org-tree-node-label-inner', 'org-tree-node-condition'];
  var labelWidth = prop.labelWidth,
      labelClassName = prop.labelClassName,
      conditionClassName = prop.conditionClassName,
      activeId = prop.activeId,
      onConditionClick = prop.onConditionClick;
  labelClassName && cls.push(labelClassName);
  activeId === data[node.id] ? cls.push('org-tree-node-active') : null;
  conditionClassName && dls.push(conditionClassName);
  return /*#__PURE__*/React.createElement("div", {
    key: "label_".concat(data[node.id]),
    className: 'org-tree-node-label'
  }, data.conditionList ? /*#__PURE__*/React.createElement("div", {
    key: "label_inner_condition_".concat(data[node.id]),
    className: dls.join(' '),
    onClick: function onClick(e) {
      return typeof onConditionClick === 'function' && onConditionClick(e, data);
    }
  }, data.conditionList) : null, /*#__PURE__*/React.createElement("div", {
    key: "label_inner_".concat(data[node.id]),
    className: cls.join(' '),
    style: {
      width: labelWidth ? parseInt(labelWidth) + 'px' : 'auto'
    },
    onClick: function onClick(e) {
      return typeof _onClick === 'function' && _onClick(e, data);
    }
  }, childNodes.map(function (item, index) {
    return /*#__PURE__*/React.createElement("div", {
      key: index
    }, item);
  })));
}; // 创建 node 子节点

export var renderChildren = function renderChildren(list, prop) {
  if (Array.isArray(list) && list.length) {
    var children = list.map(function (item) {
      return renderNode(item, prop);
    });
    return /*#__PURE__*/React.createElement("div", {
      key: "children_".concat(children[0].key),
      className: 'org-tree-node-children'
    }, children);
  }

  return '';
};
export var render = function render(props) {
  return renderNode(props.data, props);
};
export default render;