choerodon-ui/es/tree/DirectoryTree.js

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

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import _extends from "@babel/runtime/helpers/extends";
var _excluded = ["className"];
import * as React from 'react';
import classNames from 'classnames';
import omit from 'lodash/omit';
import debounce from 'lodash/debounce';
import Icon from '../icon';
import { conductExpandParent } from '../rc-components/tree/util';
import { convertDataToEntities, convertTreeToData } from '../rc-components/tree/utils/treeUtil';
import Tree from './index';
import { calcRangeKeys, convertDirectoryKeysToNodes } from './utils/dictUtil';
import ConfigContext from '../config-provider/ConfigContext';

function TreeIcon(props) {
  var _React$useContext = React.useContext(ConfigContext),
      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, {
      type: "insert_drive_file",
      className: "".concat(prefixCl, "-switcher-line-icon")
    });
  }

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

function getIcon(props) {
  return /*#__PURE__*/React.createElement(TreeIcon, _extends({}, props));
}

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

var DirectoryTree = /*#__PURE__*/function (_React$Component) {
  _inherits(DirectoryTree, _React$Component);

  var _super = _createSuper(DirectoryTree);

  function DirectoryTree(props) {
    var _this;

    _classCallCheck(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 = _objectSpread(_objectSpread({}, 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 = convertDirectoryKeysToNodes(treeData, newSelectedKeys);
      } else if (multiple && shiftPick) {
        // Shift click
        newSelectedKeys = Array.from(new Set([].concat(_toConsumableArray(_this.cachedSelectedKeys || []), _toConsumableArray(calcRangeKeys(treeData, expandedKeys, key, _this.lastSelectedKey)))));
        newEvent.selectedNodes = convertDirectoryKeysToNodes(treeData, newSelectedKeys);
      } else {
        // Single click
        newSelectedKeys = [key];
        _this.lastSelectedKey = key;
        _this.cachedSelectedKeys = newSelectedKeys;
        newEvent.selectedNodes = 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 = omit(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 = _objectWithoutProperties(_this$props4, _excluded);

      var _this$state = _this.state,
          expandedKeys = _this$state.expandedKeys,
          selectedKeys = _this$state.selectedKeys;

      var prefixCls = _this.getPrefixCls();

      var connectClassName = classNames("".concat(prefixCls, "-directory"), className, _defineProperty({}, "".concat(prefixCls, "-directory-rtl"), true));
      return /*#__PURE__*/React.createElement(Tree, _extends({
        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 = 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 = conductExpandParent(expandedKeys || defaultExpandedKeys || [], keyEntities);
    } else {
      _this.state.expandedKeys = expandedKeys || defaultExpandedKeys;
    }

    _this.onDebounceExpand = debounce(_this.expandFolderNode, 200, {
      leading: true
    });
    return _this;
  }

  _createClass(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;
    }
  }, {
    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'
};
export default DirectoryTree;
//# sourceMappingURL=DirectoryTree.js.map