@txdfe/at/lib/tree/view/tree-node.js

一个设计体系组件库

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactDom = require("react-dom");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _icon = _interopRequireDefault(require("../../icon"));
var _checkbox = _interopRequireDefault(require("../../checkbox"));
var _animate = _interopRequireDefault(require("../../animate"));
var _util = require("../../util");
var _treeNodeInput = _interopRequireDefault(require("./tree-node-input"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
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 _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 _readOnlyError(r) { throw new TypeError('"' + r + '" is read-only'); }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : 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); }
var Expand = _animate["default"].Expand;
var bindCtx = _util.func.bindCtx;
var isPromise = _util.obj.isPromise,
  pickOthers = _util.obj.pickOthers,
  pickAttrsWith = _util.obj.pickAttrsWith;
var isRoot = function isRoot(pos) {
  return /^0-(\d)+$/.test(pos);
};

/**
 * Tree.Node
 */
var TreeNode = exports["default"] = /*#__PURE__*/function (_Component) {
  function TreeNode(props) {
    var _this;
    _classCallCheck(this, TreeNode);
    _this = _callSuper(this, TreeNode, [props]);
    _this.state = {
      editing: false,
      loading: false,
      label: props.label
    };
    bindCtx(_this, ['handleExpand', 'handleSelect', 'handleCheck', 'handleEditStart', 'handleEditFinish', 'handleRightClick', 'handleDragStart', 'handleDragEnter', 'handleDragOver', 'handleDragLeave', 'handleDragEnd', 'handleDrop', 'handleInputKeyDown', 'handleKeyDown']);
    return _this;
  }
  _inherits(TreeNode, _Component);
  return _createClass(TreeNode, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.itemNode = (0, _reactDom.findDOMNode)(this.refs.node);
      this.setFocus();
    }
  }, {
    key: "UNSAFE_componentWillReceiveProps",
    value: function UNSAFE_componentWillReceiveProps(nextProps) {
      if ('label' in nextProps) {
        this.setState({
          label: nextProps.label
        });
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.setFocus();
    }
  }, {
    key: "getParentNode",
    value: function getParentNode() {
      return this.props.root.getParentNode(this.props.pos);
    }
  }, {
    key: "focusable",
    value: function focusable() {
      var _this$props = this.props,
        root = _this$props.root,
        disabled = _this$props.disabled;
      var focusable = root.props.focusable;
      return focusable && !disabled;
    }
  }, {
    key: "getFocused",
    value: function getFocused() {
      var _this$props2 = this.props,
        _key = _this$props2._key,
        root = _this$props2.root;
      var focusedKey = root.state.focusedKey;
      return focusedKey === _key;
    }
  }, {
    key: "setFocus",
    value: function setFocus() {
      var focused = this.getFocused();
      if (focused && this.focusable()) {
        this.itemNode.focus({
          preventScroll: true
        });
      }
    }
  }, {
    key: "handleExpand",
    value: function handleExpand(e) {
      var _this2 = this;
      var _this$props3 = this.props,
        root = _this$props3.root,
        expanded = _this$props3.expanded,
        eventKey = _this$props3.eventKey;
      if (root.props.isNodeBlock) {
        e.stopPropagation();
      }
      var loading = this.state.loading;
      if (loading) {
        return;
      }
      var returnValue = root.handleExpand(!expanded, eventKey, this);
      if (isPromise(returnValue)) {
        this.setLoading(true);
        return returnValue.then(function () {
          _this2.setLoading(false);
        }, function () {
          _this2.setLoading(false);
        });
      }
    }
  }, {
    key: "setLoading",
    value: function setLoading(loading) {
      this.setState({
        loading: loading
      });
    }
  }, {
    key: "handleSelect",
    value: function handleSelect(e) {
      e.preventDefault();
      var _this$props4 = this.props,
        root = _this$props4.root,
        selected = _this$props4.selected,
        eventKey = _this$props4.eventKey;
      root.handleSelect(!selected, eventKey, this, e);
    }
  }, {
    key: "handleCheck",
    value: function handleCheck() {
      var _this$props5 = this.props,
        root = _this$props5.root,
        checked = _this$props5.checked,
        eventKey = _this$props5.eventKey;
      root.handleCheck(!checked, eventKey, this);
    }
  }, {
    key: "handleEditStart",
    value: function handleEditStart(e) {
      e.preventDefault();
      this.setState({
        editing: true
      });
    }
  }, {
    key: "handleEditFinish",
    value: function handleEditFinish(e) {
      var label = e.target.value;
      this.setState({
        editing: false,
        label: label
      });
      var _this$props6 = this.props,
        root = _this$props6.root,
        eventKey = _this$props6.eventKey;
      root.props.onEditFinish(eventKey, label, this);
    }
  }, {
    key: "handleRightClick",
    value: function handleRightClick(e) {
      this.props.root.props.onRightClick({
        event: e,
        node: this
      });
    }
  }, {
    key: "handleDragStart",
    value: function handleDragStart(e) {
      e.stopPropagation();
      this.props.root.handleDragStart(e, this);
    }
  }, {
    key: "handleDragEnter",
    value: function handleDragEnter(e) {
      e.preventDefault();
      e.stopPropagation();
      this.props.root.handleDragEnter(e, this);
    }
  }, {
    key: "handleDragOver",
    value: function handleDragOver(e) {
      if (this.props.root.canDrop(this)) {
        e.preventDefault();
        e.stopPropagation();
        this.props.root.handleDragOver(e, this);
      }
    }
  }, {
    key: "handleDragLeave",
    value: function handleDragLeave(e) {
      e.stopPropagation();
      this.props.root.handleDragLeave(e, this);
    }
  }, {
    key: "handleDragEnd",
    value: function handleDragEnd(e) {
      e.stopPropagation();
      this.props.root.handleDragEnd(e, this);
    }
  }, {
    key: "handleDrop",
    value: function handleDrop(e) {
      e.preventDefault();
      e.stopPropagation();
      this.props.root.handleDrop(e, this);
    }
  }, {
    key: "handleInputKeyDown",
    value: function handleInputKeyDown(e) {
      if (e.keyCode === _util.KEYCODE.ENTER) {
        this.handleEditFinish(e);
      }
    }
  }, {
    key: "handleKeyDown",
    value: function handleKeyDown(e) {
      var _this$props7 = this.props,
        _key = _this$props7._key,
        root = _this$props7.root,
        disabled = _this$props7.disabled;
      if (disabled) {
        return;
      }
      if (this.focusable()) {
        root.handleItemKeyDown(_key, this, e);
      }
      this.props.onKeyDown && this.props.onKeyDown(e);
    }
  }, {
    key: "addCallbacks",
    value: function addCallbacks(props) {
      var _this$props8 = this.props,
        disabled = _this$props8.disabled,
        root = _this$props8.root;
      if (!disabled) {
        var selectable = typeof this.props.selectable !== 'undefined' ? this.props.selectable : root.props.selectable;
        if (selectable) {
          props.onClick = this.handleSelect;
        }
        var editable = typeof this.props.editable !== 'undefined' ? this.props.editable : root.props.editable;
        if (editable) {
          props.onDoubleClick = this.handleEditStart;
        }
        var draggable = typeof this.props.draggable !== 'undefined' ? this.props.draggable : root.props.draggable;
        if (draggable) {
          props.draggable = true;
          props.onDragStart = this.handleDragStart;
          props.onDragEnd = this.handleDragEnd;
        }
        props.onContextMenu = this.handleRightClick;
      }
    }
  }, {
    key: "renderSwitcher",
    value: function renderSwitcher() {
      var _this$props9 = this.props,
        prefix = _this$props9.prefix,
        disabled = _this$props9.disabled,
        expanded = _this$props9.expanded,
        root = _this$props9.root;
      var loadData = root.props.loadData;
      var loading = this.state.loading;
      var showLine = this.showLine;
      var lineState = showLine ? 'line' : 'noline';
      var className = (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefix, "tree-switcher"), true), "".concat(prefix).concat(lineState), !loading), "".concat(prefix, "close"), !loading && !expanded), "".concat(prefix, "disabled"), disabled), "".concat(prefix, "loading"), loading), "".concat(prefix, "loading-").concat(lineState), loading));
      var iconType = loadData && loading ? 'loading' : 'triangle-down';
      return /*#__PURE__*/_react["default"].createElement("span", {
        className: className
      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
        className: "".concat(prefix, "tree-switcher-icon"),
        type: iconType
      }));
    }
  }, {
    key: "renderNoopSwitcher",
    value: function renderNoopSwitcher() {
      var _this$props10 = this.props,
        prefix = _this$props10.prefix,
        pos = _this$props10.pos;
      var showLine = this.showLine;
      var lineState = showLine ? 'line' : 'noline';
      var className = (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefix, "tree-switcher"), true), "".concat(prefix, "noop-").concat(lineState), true), "".concat(prefix, "noop-line-noroot"), showLine && !isRoot(pos)));
      return /*#__PURE__*/_react["default"].createElement("span", {
        className: className
      }, this.renderRightAngle());
    }
  }, {
    key: "renderRightAngle",
    value: function renderRightAngle() {
      var _this$props11 = this.props,
        prefix = _this$props11.prefix,
        pos = _this$props11.pos;
      return null;
      // return this.showLine && !isRoot(pos) ? <span className={`${prefix}tree-right-angle`} /> : null;
    }
  }, {
    key: "renderCheckbox",
    value: function renderCheckbox() {
      var _this$props12 = this.props,
        checked = _this$props12.checked,
        indeterminate = _this$props12.indeterminate,
        disabled = _this$props12.disabled,
        checkboxDisabled = _this$props12.checkboxDisabled;
      var label = this.state.label;
      return /*#__PURE__*/_react["default"].createElement(_checkbox["default"], {
        "aria-label": typeof label === 'string' ? label : null,
        checked: checked,
        tabIndex: -1,
        indeterminate: indeterminate,
        disabled: disabled || checkboxDisabled,
        onClick: function onClick(e) {
          return e.stopPropagation();
        },
        onChange: this.handleCheck
      });
    }
  }, {
    key: "renderLabel",
    value: function renderLabel() {
      var _this$props13 = this.props,
        prefix = _this$props13.prefix,
        root = _this$props13.root,
        disabled = _this$props13.disabled;
      var isNodeBlock = root.props.isNodeBlock;
      var label = this.state.label;
      var selectable = typeof this.props.selectable !== 'undefined' ? this.props.selectable : root.props.selectable;
      var labelProps = {
        className: (0, _classnames["default"])(_defineProperty(_defineProperty({}, "".concat(prefix, "tree-node-label"), true), "".concat(prefix, "tree-node-label-selectable"), selectable && !disabled))
      };
      if (!isNodeBlock) {
        this.addCallbacks(labelProps);
      }
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefix, "tree-node-label-wrapper"),
        ref: "labelWrapper"
      }, /*#__PURE__*/_react["default"].createElement("div", labelProps, label));
    }
  }, {
    key: "renderInput",
    value: function renderInput() {
      var prefix = this.props.prefix;
      var label = this.state.label;
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefix, "tree-node-label-wrapper"),
        ref: "labelWrapper"
      }, /*#__PURE__*/_react["default"].createElement(_treeNodeInput["default"], {
        prefix: prefix,
        defaultValue: label,
        onBlur: this.handleEditFinish,
        onKeyDown: this.handleInputKeyDown
      }));
    }
  }, {
    key: "renderChildTree",
    value: function renderChildTree(hasChildTree) {
      var _this$props14 = this.props,
        prefix = _this$props14.prefix,
        children = _this$props14.children,
        expanded = _this$props14.expanded,
        root = _this$props14.root;
      var animation = root.props.animation;
      var childTree = expanded && hasChildTree ? /*#__PURE__*/_react["default"].createElement("ul", {
        role: "group",
        className: "".concat(prefix, "tree-child-tree")
      }, children) : null;
      if (animation) {
        childTree = /*#__PURE__*/_react["default"].createElement(Expand, {
          animationAppear: false
        }, childTree);
      }
      return childTree;
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;
      var _this$props15 = this.props,
        prefix = _this$props15.prefix,
        rtl = _this$props15.rtl,
        className = _this$props15.className,
        children = _this$props15.children,
        isLeaf = _this$props15.isLeaf,
        root = _this$props15.root,
        pos = _this$props15.pos,
        selected = _this$props15.selected,
        checked = _this$props15.checked,
        disabled = _this$props15.disabled,
        expanded = _this$props15.expanded,
        dragOver = _this$props15.dragOver,
        dragOverGapTop = _this$props15.dragOverGapTop,
        dragOverGapBottom = _this$props15.dragOverGapBottom,
        _key = _this$props15._key,
        size = _this$props15.size;
      var _root$props = root.props,
        loadData = _root$props.loadData,
        isNodeBlock = _root$props.isNodeBlock,
        showLine = _root$props.showLine,
        rootDraggable = _root$props.draggable,
        filterTreeNode = _root$props.filterTreeNode;
      var label = this.state.label;
      this.showLine = !isNodeBlock && showLine;
      var indexArr = pos.split('-');
      var ARIA_PREFIX = 'aria-';
      var ariaProps = pickAttrsWith(this.props, ARIA_PREFIX);
      var others = pickOthers(Object.keys(TreeNode.propTypes), this.props);

      // remove aria keys
      Object.keys(others).forEach(function (key) {
        if (key.match(ARIA_PREFIX)) {
          delete others[key];
        }
      });
      if (rootDraggable) {
        others.onDragEnter = this.handleDragEnter;
        others.onDragOver = this.handleDragOver;
        others.onDragLeave = this.handleDragLeave;
        others.onDrop = this.handleDrop;
      }
      var newClassName = (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefix, "tree-node"), true), "".concat(prefix, "filtered"), !!filterTreeNode && !!root.filterTreeNode(this)), className, !!className));
      var innerClassName = (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefix, "tree-node-inner"), true), "".concat(prefix, "selected"), selected), "".concat(prefix, "disabled"), disabled), "".concat(prefix, "drag-over"), dragOver), "".concat(prefix, "drag-over-gap-top"), dragOverGapTop), "".concat(prefix, "drag-over-gap-bottom"), dragOverGapBottom));
      var defaultPaddingLeft = _typeof(isNodeBlock) === 'object' ? parseInt(isNodeBlock.defaultPaddingLeft || 0) : 0;
      var indent = _typeof(isNodeBlock) === 'object' ? parseInt(isNodeBlock.indent || 24) : 24;
      var level = indexArr.length - 2;
      var paddingLeftProp = rtl ? 'paddingRight' : 'paddingLeft';
      var innerStyle = isNodeBlock ? _defineProperty({}, paddingLeftProp, "".concat(indent * level + defaultPaddingLeft, "px")) : null;
      var innerProps = _objectSpread({
        className: innerClassName,
        style: innerStyle,
        onKeyDown: this.handleKeyDown
      }, ariaProps);
      if (isNodeBlock) {
        this.addCallbacks(innerProps);
      }

      // this.addCallbacks(innerProps);

      var hasChildTree = children && _react.Children.count(children);
      var canExpand = hasChildTree || loadData && !isLeaf;
      var checkable = typeof this.props.checkable !== 'undefined' ? this.props.checkable : root.props.checkable;
      var editing = this.state.editing;
      innerProps.tabIndex = root.tabbableKey === _key ? '0' : '-1';
      if (rtl) {
        others.dir = 'rtl';
      }
      var onClick = function onClick(e) {
        if (innerProps.onClick) {
          innerProps.onClick(e);
        }
        if (!disabled) {
          _this3.handleExpand(e);
        }
      };
      return /*#__PURE__*/_react["default"].createElement("li", _extends({
        role: "presentation",
        className: newClassName
      }, others), /*#__PURE__*/_react["default"].createElement("div", _extends({
        ref: "node",
        role: "treeitem",
        "aria-selected": selected,
        "aria-disabled": disabled,
        "aria-checked": checked,
        "aria-expanded": expanded && !!hasChildTree,
        "aria-label": typeof label === 'string' ? label : null,
        "aria-level": level + 1,
        "aria-posinset": Number(indexArr[indexArr.length - 1]) + 1,
        "aria-setsize": size
      }, innerProps, {
        onClick: onClick
      }), canExpand ? this.renderSwitcher() : this.renderNoopSwitcher(), checkable ? this.renderCheckbox() : null, editing ? this.renderInput() : this.renderLabel()), this.renderChildTree(hasChildTree));
    }
  }]);
}(_react.Component);
_defineProperty(TreeNode, "propTypes", {
  _key: _propTypes["default"].string,
  prefix: _propTypes["default"].string,
  rtl: _propTypes["default"].bool,
  className: _propTypes["default"].string,
  /**
   * 树节点
   */
  children: _propTypes["default"].node,
  /**
   * 节点文本内容
   */
  label: _propTypes["default"].node,
  /**
   * 单独设置是否支持选中，覆盖 Tree 的 selectable
   */
  selectable: _propTypes["default"].bool,
  /**
   * 单独设置是否出现复选框，覆盖 Tree 的 checkable
   */
  checkable: _propTypes["default"].bool,
  /**
   * 单独设置是否支持编辑，覆盖 Tree 的 editable
   */
  editable: _propTypes["default"].bool,
  /**
   * 单独设置是否支持拖拽，覆盖 Tree 的 draggable
   */
  draggable: _propTypes["default"].bool,
  /**
   * 是否禁止节点响应
   */
  disabled: _propTypes["default"].bool,
  /**
   * 是否禁止勾选节点复选框
   */
  checkboxDisabled: _propTypes["default"].bool,
  /**
   * 是否是叶子节点，设置loadData时生效
   */
  isLeaf: _propTypes["default"].bool,
  root: _propTypes["default"].object,
  eventKey: _propTypes["default"].string,
  pos: _propTypes["default"].string,
  expanded: _propTypes["default"].bool,
  selected: _propTypes["default"].bool,
  checked: _propTypes["default"].bool,
  indeterminate: _propTypes["default"].bool,
  dragOver: _propTypes["default"].bool,
  dragOverGapTop: _propTypes["default"].bool,
  dragOverGapBottom: _propTypes["default"].bool,
  parentNode: _propTypes["default"].object,
  onKeyDown: _propTypes["default"].func,
  size: _propTypes["default"].number
});
_defineProperty(TreeNode, "defaultProps", {
  label: '---',
  rtl: false,
  disabled: false,
  checkboxDisabled: false,
  isLeaf: false,
  size: 1
});