@douyinfe/semi-ui 2.1.0-beta.0 → 2.1.0-next.0

package/lib/cjs/tree/treeNode.js

@@ -0,0 +1,527 @@
+"use strict";
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/tree/constants");
+
+var _lodashEs = require("lodash-es");
+
+var _semiIcons = require("@douyinfe/semi-icons");
+
+var _checkbox = require("../checkbox");
+
+var _treeContext = _interopRequireDefault(require("./treeContext"));
+
+var _spin = _interopRequireDefault(require("../spin"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if ((0, _indexOf.default)(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+const prefixcls = _constants.cssClasses.PREFIX_OPTION;
+
+class TreeNode extends _react.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.onSelect = e => {
+      const {
+        onNodeSelect
+      } = this.context;
+      onNodeSelect(e, this.props);
+    };
+
+    this.onExpand = e => {
+      const {
+        onNodeExpand
+      } = this.context;
+      e && e.stopPropagation();
+      e.nativeEvent.stopImmediatePropagation();
+      onNodeExpand(e, this.props);
+    };
+
+    this.onCheck = e => {
+      if (this.isDisabled()) {
+        return;
+      }
+
+      const {
+        onNodeCheck
+      } = this.context;
+      e.stopPropagation();
+      e.nativeEvent.stopImmediatePropagation();
+      onNodeCheck(e, this.props);
+    };
+
+    this.onContextMenu = e => {
+      const {
+        onNodeRightClick
+      } = this.context;
+      e.stopPropagation();
+      e.nativeEvent.stopImmediatePropagation();
+      onNodeRightClick(e, this.props);
+    };
+
+    this.onClick = e => {
+      const {
+        expandAction
+      } = this.context;
+
+      if (expandAction === 'doubleClick') {
+        this.debounceSelect(e);
+        return;
+      }
+
+      this.onSelect(e);
+
+      if (expandAction === 'click') {
+        this.onExpand(e);
+      }
+    };
+
+    this.onDoubleClick = e => {
+      const {
+        expandAction,
+        onNodeDoubleClick
+      } = this.context;
+      e.stopPropagation();
+      e.nativeEvent.stopImmediatePropagation();
+
+      if ((0, _lodashEs.isFunction)(onNodeDoubleClick)) {
+        onNodeDoubleClick(e, this.props);
+      }
+
+      if (expandAction === 'doubleClick') {
+        this.onExpand(e);
+      }
+    };
+
+    this.onDragStart = e => {
+      const {
+        onNodeDragStart
+      } = this.context;
+      e.stopPropagation();
+      onNodeDragStart(e, (0, _assign.default)((0, _assign.default)({}, this.props), {
+        nodeInstance: this.refNode
+      }));
+
+      try {
+        // ie throw error
+        // firefox-need-it
+        e.dataTransfer.setData('text/plain', '');
+      } catch (error) {// empty
+      }
+    };
+
+    this.onDragEnter = e => {
+      const {
+        onNodeDragEnter
+      } = this.context;
+      e.preventDefault();
+      e.stopPropagation();
+      onNodeDragEnter(e, (0, _assign.default)((0, _assign.default)({}, this.props), {
+        nodeInstance: this.refNode
+      }));
+    };
+
+    this.onDragOver = e => {
+      const {
+        onNodeDragOver
+      } = this.context;
+      e.preventDefault();
+      e.stopPropagation();
+      onNodeDragOver(e, (0, _assign.default)((0, _assign.default)({}, this.props), {
+        nodeInstance: this.refNode
+      }));
+    };
+
+    this.onDragLeave = e => {
+      const {
+        onNodeDragLeave
+      } = this.context;
+      e.stopPropagation();
+      onNodeDragLeave(e, (0, _assign.default)((0, _assign.default)({}, this.props), {
+        nodeInstance: this.refNode
+      }));
+    };
+
+    this.onDragEnd = e => {
+      const {
+        onNodeDragEnd
+      } = this.context;
+      e.stopPropagation();
+      onNodeDragEnd(e, (0, _assign.default)((0, _assign.default)({}, this.props), {
+        nodeInstance: this.refNode
+      }));
+    };
+
+    this.onDrop = e => {
+      const {
+        onNodeDrop
+      } = this.context;
+      e.preventDefault();
+      e.stopPropagation();
+      onNodeDrop(e, (0, _assign.default)((0, _assign.default)({}, this.props), {
+        nodeInstance: this.refNode
+      }));
+    };
+
+    this.getNodeChildren = () => {
+      const {
+        children
+      } = this.props;
+      return children || [];
+    };
+
+    this.isLeaf = () => {
+      const {
+        isLeaf,
+        loaded
+      } = this.props;
+      const {
+        loadData
+      } = this.context;
+      const hasChildren = this.getNodeChildren().length !== 0;
+
+      if (isLeaf === false) {
+        return false;
+      }
+
+      return isLeaf || !loadData && !hasChildren || loadData && loaded && !hasChildren;
+    };
+
+    this.isDisabled = () => {
+      const {
+        disabled
+      } = this.props;
+      const {
+        treeDisabled
+      } = this.context;
+
+      if (disabled === false) {
+        return false;
+      }
+
+      return Boolean(treeDisabled || disabled);
+    };
+
+    this.renderRealLabel = () => {
+      const {
+        renderLabel
+      } = this.context;
+      const {
+        label,
+        keyword,
+        data,
+        filtered,
+        treeNodeFilterProp
+      } = this.props;
+
+      if ((0, _lodashEs.isFunction)(renderLabel)) {
+        return renderLabel(label, data);
+      } else if ((0, _lodashEs.isString)(label) && filtered && keyword && treeNodeFilterProp === 'label') {
+        var _context;
+
+        const content = [];
+        (0, _forEach.default)(_context = label.split(keyword)).call(_context, (node, index) => {
+          if (index > 0) {
+            content.push( /*#__PURE__*/_react.default.createElement("span", {
+              className: "".concat(prefixcls, "-highlight"),
+              key: index
+            }, keyword));
+          }
+
+          content.push(node);
+        });
+        return content;
+      } else {
+        return label;
+      }
+    };
+
+    this.setRef = node => {
+      this.refNode = node;
+    };
+
+    this.state = {};
+    this.debounceSelect = (0, _lodashEs.debounce)(this.onSelect, 500, {
+      leading: true,
+      trailing: false
+    });
+  }
+
+  renderArrow() {
+    const showIcon = !this.isLeaf();
+    const {
+      loading
+    } = this.props;
+
+    if (loading) {
+      return /*#__PURE__*/_react.default.createElement(_spin.default, {
+        wrapperClassName: "".concat(prefixcls, "-spin-icon")
+      });
+    }
+
+    if (showIcon) {
+      return /*#__PURE__*/_react.default.createElement(_semiIcons.IconTreeTriangleDown, {
+        className: "".concat(prefixcls, "-expand-icon"),
+        size: "small",
+        onClick: this.onExpand
+      });
+    }
+
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(prefixcls, "-empty-icon")
+    });
+  }
+
+  renderCheckbox() {
+    const {
+      checked,
+      halfChecked
+    } = this.props;
+    const disabled = this.isDisabled();
+    return /*#__PURE__*/_react.default.createElement("div", {
+      onClick: this.onCheck
+    }, /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
+      indeterminate: halfChecked,
+      checked: checked,
+      disabled: Boolean(disabled)
+    }));
+  }
+
+  renderIcon() {
+    const {
+      directory,
+      treeIcon
+    } = this.context;
+    const {
+      expanded,
+      icon
+    } = this.props;
+    const hasChild = !this.isLeaf();
+    const hasIcon = icon || treeIcon;
+    let itemIcon;
+
+    if (hasIcon || directory) {
+      if (hasIcon) {
+        itemIcon = icon || treeIcon;
+      } else {
+        if (!hasChild) {
+          itemIcon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconFile, {
+            className: "".concat(prefixcls, "-item-icon")
+          });
+        } else {
+          // eslint-disable-next-line max-len
+          itemIcon = expanded ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconFolderOpen, {
+            className: "".concat(prefixcls, "-item-icon")
+          }) : /*#__PURE__*/_react.default.createElement(_semiIcons.IconFolder, {
+            className: "".concat(prefixcls, "-item-icon")
+          });
+        }
+      }
+    }
+
+    return itemIcon;
+  }
+
+  renderEmptyNode() {
+    var _context2;
+
+    const {
+      emptyContent
+    } = this.props;
+    const wrapperCls = (0, _classnames.default)(prefixcls, {
+      ["".concat(prefixcls, "-empty")]: true
+    });
+    return /*#__PURE__*/_react.default.createElement("ul", {
+      className: wrapperCls
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _concat.default)(_context2 = "".concat(prefixcls, "-label ")).call(_context2, prefixcls, "-label-empty")
+    }, emptyContent));
+  } // eslint-disable-next-line max-lines-per-function
+
+
+  render() {
+    var _context3;
+
+    const _a = this.props,
+          {
+      eventKey,
+      expanded,
+      selected,
+      checked,
+      halfChecked,
+      loading,
+      active,
+      level,
+      empty,
+      filtered,
+      treeNodeFilterProp,
+      // eslint-disable-next-line no-unused-vars
+      display,
+      style
+    } = _a,
+          rest = __rest(_a, ["eventKey", "expanded", "selected", "checked", "halfChecked", "loading", "active", "level", "empty", "filtered", "treeNodeFilterProp", "display", "style"]);
+
+    if (empty) {
+      return this.renderEmptyNode();
+    }
+
+    const {
+      multiple,
+      draggable,
+      renderFullLabel,
+      dragOverNodeKey,
+      dropPosition,
+      labelEllipsis
+    } = this.context;
+    const disabled = this.isDisabled();
+    const dragOver = dragOverNodeKey === eventKey && dropPosition === 0;
+    const dragOverGapTop = dragOverNodeKey === eventKey && dropPosition === -1;
+    const dragOverGapBottom = dragOverNodeKey === eventKey && dropPosition === 1;
+    const nodeCls = (0, _classnames.default)(prefixcls, {
+      [(0, _concat.default)(_context3 = "".concat(prefixcls, "-level-")).call(_context3, level + 1)]: true,
+      ["".concat(prefixcls, "-collapsed")]: !expanded,
+      ["".concat(prefixcls, "-disabled")]: Boolean(disabled),
+      ["".concat(prefixcls, "-selected")]: selected,
+      ["".concat(prefixcls, "-active")]: !multiple && active,
+      ["".concat(prefixcls, "-ellipsis")]: labelEllipsis,
+      ["".concat(prefixcls, "-filtered")]: filtered && treeNodeFilterProp !== 'label',
+      ["".concat(prefixcls, "-drag-over")]: !disabled && dragOver,
+      ["".concat(prefixcls, "-draggable")]: !disabled && draggable && !renderFullLabel,
+      // When draggable + renderFullLabel is enabled, the default style
+      ["".concat(prefixcls, "-fullLabel-draggable")]: !disabled && draggable && renderFullLabel,
+      // When draggable + renderFullLabel is turned on, the style of dragover
+      ["".concat(prefixcls, "-fullLabel-drag-over-gap-top")]: !disabled && dragOverGapTop && renderFullLabel,
+      ["".concat(prefixcls, "-fullLabel-drag-over-gap-bottom")]: !disabled && dragOverGapBottom && renderFullLabel
+    });
+    const labelProps = {
+      onClick: this.onClick,
+      onContextMenu: this.onContextMenu,
+      onDoubleClick: this.onDoubleClick,
+      className: nodeCls,
+      onExpand: this.onExpand,
+      data: rest.data,
+      level,
+      onCheck: this.onCheck,
+      style,
+      expandIcon: this.renderArrow(),
+      checkStatus: {
+        checked,
+        halfChecked
+      },
+      expandStatus: {
+        expanded,
+        loading
+      }
+    };
+    const dragProps = {
+      onDoubleClick: this.onDoubleClick,
+      onDragStart: draggable ? this.onDragStart : undefined,
+      onDragEnter: draggable ? this.onDragEnter : undefined,
+      onDragOver: draggable ? this.onDragOver : undefined,
+      onDragLeave: draggable ? this.onDragLeave : undefined,
+      onDrop: draggable ? this.onDrop : undefined,
+      onDragEnd: draggable ? this.onDragEnd : undefined,
+      draggable: !disabled && draggable || undefined
+    };
+
+    if (renderFullLabel) {
+      const customLabel = renderFullLabel((0, _assign.default)({}, labelProps));
+
+      if (draggable) {
+        return /*#__PURE__*/_react.default.cloneElement(customLabel, (0, _assign.default)({
+          ref: this.setRef
+        }, dragProps));
+      } else {
+        return customLabel;
+      }
+    }
+
+    const labelCls = (0, _classnames.default)("".concat(prefixcls, "-label"), {
+      ["".concat(prefixcls, "-drag-over-gap-top")]: !disabled && dragOverGapTop,
+      ["".concat(prefixcls, "-drag-over-gap-bottom")]: !disabled && dragOverGapBottom
+    });
+    return /*#__PURE__*/_react.default.createElement("li", (0, _assign.default)({
+      className: nodeCls,
+      role: "treenode",
+      "data-key": eventKey,
+      onClick: this.onClick,
+      onContextMenu: this.onContextMenu,
+      onDoubleClick: this.onDoubleClick,
+      ref: this.setRef,
+      style: style
+    }, dragProps), this.renderArrow(), /*#__PURE__*/_react.default.createElement("span", {
+      className: labelCls
+    }, multiple ? this.renderCheckbox() : null, this.renderIcon(), /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(prefixcls, "-label-text")
+    }, this.renderRealLabel())));
+  }
+
+}
+
+exports.default = TreeNode;
+TreeNode.contextType = _treeContext.default;
+TreeNode.propTypes = {
+  expanded: _propTypes.default.bool,
+  selected: _propTypes.default.bool,
+  checked: _propTypes.default.bool,
+  halfChecked: _propTypes.default.bool,
+  active: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  loaded: _propTypes.default.bool,
+  loading: _propTypes.default.bool,
+  isLeaf: _propTypes.default.bool,
+  pos: _propTypes.default.string,
+  children: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.object]),
+  icon: _propTypes.default.node,
+  directory: _propTypes.default.bool,
+  keyword: _propTypes.default.string,
+  treeNodeFilterProp: _propTypes.default.string,
+  selectedKey: _propTypes.default.string,
+  motionKey: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)])
+};
+TreeNode.defaultProps = {
+  selectedKey: '',
+  motionKey: ''
+};

package/lib/cjs/tree/treeUtil.d.ts

@@ -0,0 +1 @@
+export declare function cloneDeep(treeNodeList: any): any;

package/lib/cjs/tree/treeUtil.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.cloneDeep = cloneDeep;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _lodashEs = require("lodash-es");
+
+function cloneDeep(treeNodeList) {
+  return (0, _lodashEs.cloneDeepWith)(treeNodeList, val => {
+    // only clone treeNode inner data and skip user data
+    if ((0, _lodashEs.isPlainObject)(val) && !val._innerDataTag) {
+      return val;
+    }
+
+    if ( /*#__PURE__*/_react.default.isValidElement(val)) {
+      return val;
+    }
+  });
+}