ant-design/components/tree/DirectoryTree.tsx

236 lines
6.3 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
import classNames from 'classnames';
import omit from 'omit.js';
import debounce from 'lodash/debounce';
2018-07-30 12:05:29 +08:00
import { conductExpandParent, convertTreeToEntities } from 'rc-tree/lib/util';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
2019-02-19 10:07:57 +08:00
import { polyfill } from 'react-lifecycles-compat';
import Tree, {
2018-12-07 20:02:01 +08:00
TreeProps,
AntdTreeNodeAttribute,
AntTreeNodeExpandedEvent,
AntTreeNodeSelectedEvent,
AntTreeNode,
} from './Tree';
2018-07-30 12:05:29 +08:00
import { calcRangeKeys, getFullKeyList } from './util';
import Icon from '../icon';
export type ExpandAction = false | 'click' | 'doubleClick';
export interface DirectoryTreeProps extends TreeProps {
expandAction?: ExpandAction;
}
export interface DirectoryTreeState {
expandedKeys?: string[];
selectedKeys?: string[];
}
function getIcon(props: AntdTreeNodeAttribute): React.ReactNode {
const { isLeaf, expanded } = props;
if (isLeaf) {
return <Icon type="file" />;
}
return <Icon type={expanded ? 'folder-open' : 'folder'} />;
}
2019-02-19 10:02:06 +08:00
class DirectoryTree extends React.Component<DirectoryTreeProps, DirectoryTreeState> {
static defaultProps = {
showIcon: true,
expandAction: 'click',
};
static getDerivedStateFromProps(nextProps: DirectoryTreeProps) {
2019-02-21 20:49:04 +08:00
const newState: DirectoryTreeState = {};
if ('expandedKeys' in nextProps) {
2019-02-21 20:49:04 +08:00
newState.expandedKeys = nextProps.expandedKeys;
}
if ('selectedKeys' in nextProps) {
2019-02-21 20:49:04 +08:00
newState.selectedKeys = nextProps.selectedKeys;
}
2019-02-21 20:49:04 +08:00
return newState;
}
state: DirectoryTreeState;
tree: Tree;
onDebounceExpand: (event: React.MouseEvent<HTMLElement>, node: AntTreeNode) => void;
// Shift click usage
lastSelectedKey?: string;
cachedSelectedKeys?: string[];
constructor(props: DirectoryTreeProps) {
super(props);
2018-12-07 20:02:01 +08:00
const {
defaultExpandAll,
defaultExpandParent,
expandedKeys,
defaultExpandedKeys,
children,
} = props;
2018-07-30 12:05:29 +08:00
const { keyEntities } = convertTreeToEntities(children);
// Selected keys
this.state = {
selectedKeys: props.selectedKeys || props.defaultSelectedKeys || [],
};
// Expanded keys
if (defaultExpandAll) {
this.state.expandedKeys = getFullKeyList(props.children);
} else if (defaultExpandParent) {
2018-12-07 20:02:01 +08:00
this.state.expandedKeys = conductExpandParent(
expandedKeys || defaultExpandedKeys,
keyEntities,
);
} else {
this.state.expandedKeys = expandedKeys || defaultExpandedKeys;
}
this.onDebounceExpand = debounce(this.expandFolderNode, 200, {
leading: true,
});
}
onExpand = (expandedKeys: string[], info: AntTreeNodeExpandedEvent) => {
const { onExpand } = this.props;
this.setUncontrolledState({ expandedKeys });
// Call origin function
if (onExpand) {
return onExpand(expandedKeys, info);
}
return undefined;
2018-12-07 20:02:01 +08:00
};
onClick = (event: React.MouseEvent<HTMLElement>, node: AntTreeNode) => {
const { onClick, expandAction } = this.props;
// Expand the tree
if (expandAction === 'click') {
this.onDebounceExpand(event, node);
}
if (onClick) {
onClick(event, node);
}
2018-12-07 20:02:01 +08:00
};
onDoubleClick = (event: React.MouseEvent<HTMLElement>, node: AntTreeNode) => {
const { onDoubleClick, expandAction } = this.props;
// Expand the tree
if (expandAction === 'doubleClick') {
this.onDebounceExpand(event, node);
}
if (onDoubleClick) {
onDoubleClick(event, node);
}
2018-12-07 20:02:01 +08:00
};
onSelect = (keys: string[], event: AntTreeNodeSelectedEvent) => {
const { onSelect, multiple, children } = this.props;
const { expandedKeys = [] } = this.state;
const { node, nativeEvent } = event;
const { eventKey = '' } = node.props;
const newState: DirectoryTreeState = {};
// Windows / Mac single pick
const ctrlPick: boolean = nativeEvent.ctrlKey || nativeEvent.metaKey;
const shiftPick: boolean = nativeEvent.shiftKey;
// Generate new selected keys
let newSelectedKeys: string[];
if (multiple && ctrlPick) {
// Control click
newSelectedKeys = keys;
this.lastSelectedKey = eventKey;
this.cachedSelectedKeys = newSelectedKeys;
} else if (multiple && shiftPick) {
// Shift click
2018-12-07 20:02:01 +08:00
newSelectedKeys = Array.from(
new Set([
...(this.cachedSelectedKeys || []),
...calcRangeKeys(children, expandedKeys, eventKey, this.lastSelectedKey),
]),
);
} else {
// Single click
newSelectedKeys = [eventKey];
this.lastSelectedKey = eventKey;
this.cachedSelectedKeys = newSelectedKeys;
}
newState.selectedKeys = newSelectedKeys;
if (onSelect) {
onSelect(newSelectedKeys, event);
}
this.setUncontrolledState(newState);
2018-12-07 20:02:01 +08:00
};
setTreeRef = (node: Tree) => {
this.tree = node;
};
expandFolderNode = (event: React.MouseEvent<HTMLElement>, node: AntTreeNode) => {
const { isLeaf } = node.props;
if (isLeaf || event.shiftKey || event.metaKey || event.ctrlKey) {
return;
}
// Get internal rc-tree
const internalTree = this.tree.tree;
// Call internal rc-tree expand function
// https://github.com/ant-design/ant-design/issues/12567
internalTree.onNodeExpand(event, node);
2018-12-07 20:02:01 +08:00
};
setUncontrolledState = (state: DirectoryTreeState) => {
const newState = omit(state, Object.keys(this.props));
if (Object.keys(newState).length) {
this.setState(newState);
}
2018-12-07 20:02:01 +08:00
};
renderDirectoryTree = ({ getPrefixCls }: ConfigConsumerProps) => {
const { prefixCls: customizePrefixCls, className, ...props } = this.props;
const { expandedKeys, selectedKeys } = this.state;
const prefixCls = getPrefixCls('tree', customizePrefixCls);
const connectClassName = classNames(`${prefixCls}-directory`, className);
return (
<Tree
icon={getIcon}
ref={this.setTreeRef}
{...props}
prefixCls={prefixCls}
className={connectClassName}
expandedKeys={expandedKeys}
selectedKeys={selectedKeys}
onSelect={this.onSelect}
onClick={this.onClick}
onDoubleClick={this.onDoubleClick}
onExpand={this.onExpand}
/>
);
2018-12-07 20:02:01 +08:00
};
render() {
2018-12-07 20:02:01 +08:00
return <ConfigConsumer>{this.renderDirectoryTree}</ConfigConsumer>;
}
}
2019-02-19 10:02:06 +08:00
2019-02-19 10:07:57 +08:00
polyfill(DirectoryTree);
export default DirectoryTree;