choerodon-ui/lib/tree/DirectoryTree.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var React = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _omit = _interopRequireDefault(require("lodash/omit"));

var _debounce = _interopRequireDefault(require("lodash/debounce"));

var _icon = _interopRequireDefault(require("../icon"));

var _util = require("../rc-components/tree/util");

var _treeUtil = require("../rc-components/tree/utils/treeUtil");

var _index = _interopRequireDefault(require("./index"));

var _dictUtil = require("./utils/dictUtil");

var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));

var _excluded = ["className"];

function TreeIcon(props) {
  var _React$useContext = React.useContext(_ConfigContext["default"]),
      getPrefixCls = _React$useContext.getPrefixCls;

  var isLeaf = props.isLeaf,
      expanded = props.expanded,
      prefixCls = props.prefixCls;
  var prefixCl = getPrefixCls('tree', prefixCls);

  if (isLeaf) {
    return /*#__PURE__*/React.createElement(_icon["default"], {
      type: "insert_drive_file",
      className: "".concat(prefixCl, "-switcher-line-icon")
    });
  }

  return expanded ? /*#__PURE__*/React.createElement(_icon["default"], {
    type: "baseline-file_copy",
    className: "".concat(prefixCl, "-switcher-line-icon")
  }) : /*#__PURE__*/React.createElement(_icon["default"], {
    type: "library_books",
    className: "".concat(prefixCl, "-switcher-line-icon")
  });
}

function getIcon(props) {
  return /*#__PURE__*/React.createElement(TreeIcon, (0, _extends2["default"])({}, props));
}

function getTreeData(_ref) {
  var treeData = _ref.treeData,
      children = _ref.children;
  return treeData || (0, _treeUtil.convertTreeToData)(children);
}

var DirectoryTree = /*#__PURE__*/function (_React$Component) {
  (0, _inherits2["default"])(DirectoryTree, _React$Component);

  var _super = (0, _createSuper2["default"])(DirectoryTree);

  function DirectoryTree(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, DirectoryTree);
    _this = _super.call(this, props);

    _this.onExpand = function (expandedKeys, info) {
      var onExpand = _this.props.onExpand;

      _this.setUncontrolledState({
        expandedKeys: expandedKeys
      }); // Call origin function


      if (onExpand) {
        return onExpand(expandedKeys, info);
      }

      return undefined;
    };

    _this.onClick = function (event, node) {
      var _this$props = _this.props,
          onClick = _this$props.onClick,
          expandAction = _this$props.expandAction; // Expand the tree

      if (expandAction === 'click') {
        _this.onDebounceExpand(event, node);
      }

      if (onClick) {
        onClick(event, node);
      }
    };

    _this.onDoubleClick = function (event, node) {
      var _this$props2 = _this.props,
          onDoubleClick = _this$props2.onDoubleClick,
          expandAction = _this$props2.expandAction; // Expand the tree

      if (expandAction === 'doubleClick') {
        _this.onDebounceExpand(event, node);
      }

      if (onDoubleClick) {
        onDoubleClick(event, node);
      }
    };

    _this.onSelect = function (keys, event) {
      var _this$props3 = _this.props,
          onSelect = _this$props3.onSelect,
          multiple = _this$props3.multiple;
      var _this$state$expandedK = _this.state.expandedKeys,
          expandedKeys = _this$state$expandedK === void 0 ? [] : _this$state$expandedK;
      var node = event.node,
          nativeEvent = event.nativeEvent;
      var _node$key = node.key,
          key = _node$key === void 0 ? '' : _node$key;
      var treeData = getTreeData(_this.props);
      var newState = {}; // We need wrap this event since some value is not same

      var newEvent = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, event), {}, {
        selected: true
      }); // Windows / Mac single pick

      var ctrlPick = nativeEvent.ctrlKey || nativeEvent.metaKey;
      var shiftPick = nativeEvent.shiftKey; // Generate new selected keys

      var newSelectedKeys;

      if (multiple && ctrlPick) {
        // Control click
        newSelectedKeys = keys;
        _this.lastSelectedKey = key;
        _this.cachedSelectedKeys = newSelectedKeys;
        newEvent.selectedNodes = (0, _dictUtil.convertDirectoryKeysToNodes)(treeData, newSelectedKeys);
      } else if (multiple && shiftPick) {
        // Shift click
        newSelectedKeys = Array.from(new Set([].concat((0, _toConsumableArray2["default"])(_this.cachedSelectedKeys || []), (0, _toConsumableArray2["default"])((0, _dictUtil.calcRangeKeys)(treeData, expandedKeys, key, _this.lastSelectedKey)))));
        newEvent.selectedNodes = (0, _dictUtil.convertDirectoryKeysToNodes)(treeData, newSelectedKeys);
      } else {
        // Single click
        newSelectedKeys = [key];
        _this.lastSelectedKey = key;
        _this.cachedSelectedKeys = newSelectedKeys;
        newEvent.selectedNodes = (0, _dictUtil.convertDirectoryKeysToNodes)(treeData, newSelectedKeys);
      }

      newState.selectedKeys = newSelectedKeys;

      if (onSelect) {
        onSelect(newSelectedKeys, newEvent);
      }

      _this.setUncontrolledState(newState);
    };

    _this.setTreeRef = function (node) {
      _this.tree = node;
    };

    _this.expandFolderNode = function (event, node) {
      var isLeaf = node.isLeaf;

      if (isLeaf || event.shiftKey || event.metaKey || event.ctrlKey) {
        return;
      } // Get internal rc-tree


      var internalTree = _this.tree.tree; // Call internal rc-tree expand function
      // https://github.com/C7n-design/C7n-design/issues/12567

      internalTree.onNodeExpand(event, node);
    };

    _this.setUncontrolledState = function (state) {
      var newState = (0, _omit["default"])(state, Object.keys(_this.props));

      if (Object.keys(newState).length) {
        _this.setState(newState);
      }
    };

    _this.renderDirectoryTree = function () {
      var _this$props4 = _this.props,
          className = _this$props4.className,
          props = (0, _objectWithoutProperties2["default"])(_this$props4, _excluded);
      var _this$state = _this.state,
          expandedKeys = _this$state.expandedKeys,
          selectedKeys = _this$state.selectedKeys;

      var prefixCls = _this.getPrefixCls();

      var connectClassName = (0, _classnames["default"])("".concat(prefixCls, "-directory"), className, (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-directory-rtl"), true));
      return /*#__PURE__*/React.createElement(_index["default"], (0, _extends2["default"])({
        icon: getIcon,
        ref: _this.setTreeRef,
        blockNode: true
      }, props, {
        prefixCls: prefixCls,
        className: connectClassName,
        expandedKeys: expandedKeys,
        selectedKeys: selectedKeys,
        onSelect: _this.onSelect,
        onClick: _this.onClick,
        onDoubleClick: _this.onDoubleClick,
        onExpand: _this.onExpand
      }));
    };

    var defaultExpandAll = props.defaultExpandAll,
        defaultExpandParent = props.defaultExpandParent,
        expandedKeys = props.expandedKeys,
        defaultExpandedKeys = props.defaultExpandedKeys;

    var _convertDataToEntitie = (0, _treeUtil.convertDataToEntities)(getTreeData(props)),
        keyEntities = _convertDataToEntitie.keyEntities; // Selected keys


    _this.state = {
      selectedKeys: props.selectedKeys || props.defaultSelectedKeys || []
    }; // Expanded keys

    if (defaultExpandAll) {
      _this.state.expandedKeys = Object.keys(keyEntities);
    } else if (defaultExpandParent) {
      _this.state.expandedKeys = (0, _util.conductExpandParent)(expandedKeys || defaultExpandedKeys || [], keyEntities);
    } else {
      _this.state.expandedKeys = expandedKeys || defaultExpandedKeys;
    }

    _this.onDebounceExpand = (0, _debounce["default"])(_this.expandFolderNode, 200, {
      leading: true
    });
    return _this;
  }

  (0, _createClass2["default"])(DirectoryTree, [{
    key: "getPrefixCls",
    value: function getPrefixCls() {
      var prefixCls = this.props.prefixCls;
      var getPrefixCls = this.context.getPrefixCls;
      return getPrefixCls('tree', prefixCls);
    }
  }, {
    key: "render",
    value: function render() {
      return this.renderDirectoryTree();
    }
  }], [{
    key: "contextType",
    get: function get() {
      return _ConfigContext["default"];
    }
  }, {
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(nextProps) {
      var newState = {};

      if ('expandedKeys' in nextProps) {
        newState.expandedKeys = nextProps.expandedKeys;
      }

      if ('selectedKeys' in nextProps) {
        newState.selectedKeys = nextProps.selectedKeys;
      }

      return newState;
    }
  }]);
  return DirectoryTree;
}(React.Component);

DirectoryTree.defaultProps = {
  showIcon: true,
  expandAction: 'click'
};
var _default = DirectoryTree;
exports["default"] = _default;
//# sourceMappingURL=DirectoryTree.js.map