prehistoric-systems/Gitako
1
1
Fork 0
mirror of https://github.com/EnixCoda/Gitako.git synced 2026-03-11 08:54:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: performance boost for file explorer

Browse source
This commit is contained in:
EnixCoda 2019-02-21 16:33:30 +08:00
parent 3f9a0dd0fc
commit 956701cd28
No known key found for this signature in database
GPG key ID: 6825847C88AA329A
2 changed files with 19 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/components/FileExplorer.tsx
View file

@ -51,7 +51,7 @@ class FileExplorer extends React.Component<Props & ConnectorState> {
renderFiles(visibleNodes: VisibleNodes, onNodeClick: Node['props']['onClick']) {
const { nodes, depths, focusedNode, expandedNodes } = visibleNodes
const { goTo, searchKey, searched } = this.props
const { searchKey, searched } = this.props
const inSearch = searchKey !== ''
if (inSearch && nodes.length === 0) {
return <label className={'no-results'}>No results found.</label>
@ -66,23 +66,28 @@ class FileExplorer extends React.Component<Props & ConnectorState> {
focused={focusedNode === node}
expanded={expandedNodes.has(node)}
onClick={onNodeClick}
renderActions={() =>
inSearch &&
searched && (
<div className={'go-to-wrapper'}>
<button className={'go-to-button'} onClick={this.revealNode(goTo, node)}>
<Icon type="go-to" />
&nbsp;Reveal in file tree
</button>
</div>
)
}
renderActions={this.renderActions}
/>
))}
</div>
)
}
private renderActions: Node['props']['renderActions'] = node => {
const { searchKey, searched, goTo } = this.props
return (
searchKey &&
searched && (
<div className={'go-to-wrapper'}>
<button className={'go-to-button'} onClick={this.revealNode(goTo, node)}>
<Icon type="go-to" />
&nbsp; Reveal in file tree
</button>
</div>
)
)
}
revealNode(
goTo: (path: string[]) => void,
node: TreeNode,

4
src/components/Node.tsx
View file

@ -21,7 +21,7 @@ type Props = {
depth: number
expanded: boolean
focused: boolean
renderActions?(): React.ReactNode
renderActions?(node: TreeNode): React.ReactNode
}
export default class Node extends React.PureComponent<Props> {
onClick: React.MouseEventHandler = event => {
@ -56,7 +56,7 @@ export default class Node extends React.PureComponent<Props> {
<Icon type={getIconType(node)} />
<span className={'node-item-name'}>{name}</span>
</div>
{renderActions && <div>{renderActions()}</div>}
{renderActions && <div>{renderActions(node)}</div>}
</div>
</a>
</div>