test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-04 04:58:55 +08:00
Code Issues Actions 100 Packages Projects Releases Wiki Activity

fix: Fix DirectoryTree miss ref.scrollTo function (#26129)

Browse Source 
* fix: DirTree support ref

* add test case
This commit is contained in:
二货机器人 2020-08-11 14:22:16 +08:00 committed by GitHub
parent 3ad0b47d92
commit 1119c3da38
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
components/tree/DirectoryTree.tsx
View File

@ -1,5 +1,6 @@
import * as React from 'react'; import * as React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import RcTree from 'rc-tree';
import debounce from 'lodash/debounce'; import debounce from 'lodash/debounce';
import { conductExpandParent } from 'rc-tree/lib/util'; import { conductExpandParent } from 'rc-tree/lib/util';
import { EventDataNode, DataNode, Key } from 'rc-tree/lib/interface'; import { EventDataNode, DataNode, Key } from 'rc-tree/lib/interface';
@ -35,18 +36,18 @@ function getTreeData({ treeData, children }: DirectoryTreeProps) {
return treeData || convertTreeToData(children); return treeData || convertTreeToData(children);
} }
const DirectoryTree: React.FC<DirectoryTreeProps> = ({ const DirectoryTree: React.ForwardRefRenderFunction<RcTree, DirectoryTreeProps> = (
defaultExpandAll, { defaultExpandAll, defaultExpandParent, defaultExpandedKeys, ...props },
defaultExpandParent, ref,
defaultExpandedKeys, ) => {
...props
}) => {
// Shift click usage // Shift click usage
const lastSelectedKey = React.useRef<Key>(); const lastSelectedKey = React.useRef<Key>();
const cachedSelectedKeys = React.useRef<Key[]>(); const cachedSelectedKeys = React.useRef<Key[]>();
const ref = React.createRef<any>(); const treeRef = React.createRef<RcTree>();
React.useImperativeHandle(ref, () => treeRef.current!);
const getInitExpandedKeys = () => { const getInitExpandedKeys = () => {
const { keyEntities } = convertDataToEntities(getTreeData(props)); const { keyEntities } = convertDataToEntities(getTreeData(props));
@ -93,7 +94,7 @@ const DirectoryTree: React.FC<DirectoryTreeProps> = ({
// Call internal rc-tree expand function // Call internal rc-tree expand function
// https://github.com/ant-design/ant-design/issues/12567 // https://github.com/ant-design/ant-design/issues/12567
ref.current.onNodeExpand(event, node); treeRef.current!.onNodeExpand(event as any, node);
}; };
const onDebounceExpand = debounce(expandFolderNode, 200, { const onDebounceExpand = debounce(expandFolderNode, 200, {
@ -220,7 +221,7 @@ const DirectoryTree: React.FC<DirectoryTreeProps> = ({
return ( return (
<Tree <Tree
icon={getIcon} icon={getIcon}
ref={ref} ref={treeRef}
blockNode blockNode
{...otherProps} {...otherProps}
prefixCls={prefixCls} prefixCls={prefixCls}
@ -235,9 +236,12 @@ const DirectoryTree: React.FC<DirectoryTreeProps> = ({
); );
}; };
DirectoryTree.defaultProps = { const ForwardDirectoryTree = React.forwardRef(DirectoryTree);
ForwardDirectoryTree.displayName = 'DirectoryTree';
ForwardDirectoryTree.defaultProps = {
showIcon: true, showIcon: true,
expandAction: 'click' as DirectoryTreeProps['expandAction'], expandAction: 'click' as DirectoryTreeProps['expandAction'],
}; };
export default DirectoryTree; export default ForwardDirectoryTree;

7
components/tree/__tests__/directory.test.js
View File

@ -250,4 +250,11 @@ describe('Directory Tree', () => {
expect.objectContaining({ event: 'select', nativeEvent: expect.anything() }), expect.objectContaining({ event: 'select', nativeEvent: expect.anything() }),
); );
}); });
it('ref support', () => {
const treeRef = React.createRef();
mount(createTree({ ref: treeRef }));
expect('scrollTo' in treeRef.current).toBeTruthy();
});
}); });