mirror of
https://github.com/EnixCoda/Gitako.git
synced 2026-03-11 08:54:44 +00:00
refactor: extract hooks
This commit is contained in:
EnixCoda
parent
771a10ea57
commit
23c0b8118a
9 changed files with 422 additions and 318 deletions
|
|
@ -1,315 +0,0 @@
|
|||
import { Label, Text } from '@primer/react'
|
||||
import { LoadingIndicator } from 'components/LoadingIndicator'
|
||||
import { Node } from 'components/Node'
|
||||
import { SearchBar } from 'components/SearchBar'
|
||||
import { useConfigs } from 'containers/ConfigsContext'
|
||||
import { connect } from 'driver/connect'
|
||||
import { FileExplorerCore } from 'driver/core'
|
||||
import { ConnectorState, Props } from 'driver/core/FileExplorer'
|
||||
import { platform } from 'platforms'
|
||||
import * as React from 'react'
|
||||
import { FixedSizeList, ListChildComponentProps } from 'react-window'
|
||||
import { cx } from 'utils/cx'
|
||||
import { focusFileExplorer } from 'utils/DOMHelper'
|
||||
import { run } from 'utils/general'
|
||||
import { useLoadedContext } from 'utils/hooks/useLoadedContext'
|
||||
import { useOnLocationChange } from 'utils/hooks/useOnLocationChange'
|
||||
import { useOnPJAXDone } from 'utils/hooks/usePJAX'
|
||||
import { useSequentialEffect } from 'utils/hooks/useSequentialEffect'
|
||||
import { VisibleNodes } from 'utils/VisibleNodesGenerator'
|
||||
import { SideBarStateContext } from '../containers/SideBarState'
|
||||
import { DiffStatGraph } from './DiffStatGraph'
|
||||
import { DiffStatText } from './DiffStatText'
|
||||
import { Icon } from './Icon'
|
||||
import { SearchMode, searchModes } from './searchModes'
|
||||
import { SizeObserver } from './SizeObserver'
|
||||
|
||||
type renderNodeContext = {
|
||||
onNodeClick: (event: React.MouseEvent<HTMLElement, MouseEvent>, node: TreeNode) => void
|
||||
renderLabelText: (node: TreeNode) => React.ReactNode
|
||||
renderActions: ((node: TreeNode) => React.ReactNode) | undefined
|
||||
visibleNodes: VisibleNodes
|
||||
}
|
||||
|
||||
const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplorer(props) {
|
||||
const {
|
||||
visibleNodes,
|
||||
visibleNodesGenerator,
|
||||
freeze,
|
||||
onNodeClick,
|
||||
searchKey,
|
||||
updateSearchKey,
|
||||
onFocusSearchBar,
|
||||
goTo,
|
||||
handleKeyDown,
|
||||
metaData,
|
||||
expandTo,
|
||||
setUpTree,
|
||||
defer,
|
||||
searched,
|
||||
} = props
|
||||
const {
|
||||
value: {
|
||||
accessToken,
|
||||
compressSingletonFolder,
|
||||
searchMode,
|
||||
commentToggle,
|
||||
restoreExpandedFolders,
|
||||
showDiffInText,
|
||||
},
|
||||
} = useConfigs()
|
||||
|
||||
const onSearch = React.useCallback(
|
||||
(searchKey: string, searchMode: SearchMode) => {
|
||||
updateSearchKey(searchKey)
|
||||
if (visibleNodesGenerator) {
|
||||
visibleNodesGenerator.search(
|
||||
searchModes[searchMode].getSearchParams(searchKey),
|
||||
restoreExpandedFolders,
|
||||
)
|
||||
}
|
||||
},
|
||||
[updateSearchKey, visibleNodesGenerator, restoreExpandedFolders],
|
||||
)
|
||||
|
||||
const stateContext = useLoadedContext(SideBarStateContext)
|
||||
const state = stateContext.value
|
||||
|
||||
useSequentialEffect(
|
||||
checker => {
|
||||
setUpTree(
|
||||
{
|
||||
metaData,
|
||||
config: {
|
||||
compressSingletonFolder,
|
||||
accessToken,
|
||||
},
|
||||
stateContext,
|
||||
},
|
||||
checker,
|
||||
)
|
||||
},
|
||||
[setUpTree, metaData, compressSingletonFolder, accessToken],
|
||||
)
|
||||
|
||||
React.useEffect(() => {
|
||||
focusFileExplorer()
|
||||
}, [])
|
||||
|
||||
const renderActions: ((node: TreeNode) => React.ReactNode) | undefined = React.useMemo(() => {
|
||||
const renderGoToButton = (node: TreeNode): React.ReactNode => (
|
||||
<button
|
||||
title={'Reveal in file tree'}
|
||||
className={'go-to-button'}
|
||||
onClick={e => {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
goTo(node.path.split('/'))
|
||||
}}
|
||||
>
|
||||
<Icon type="go-to" />
|
||||
</button>
|
||||
)
|
||||
const renderFindInFolderButton = (node: TreeNode): React.ReactNode =>
|
||||
node.type === 'tree' ? (
|
||||
<button
|
||||
title={'Find in folder...'}
|
||||
className={'find-in-folder-button'}
|
||||
onClick={e => {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
onSearch(node.path + '/', searchMode)
|
||||
}}
|
||||
>
|
||||
<Icon type="search" />
|
||||
</button>
|
||||
) : undefined
|
||||
const renderFileCommentAmounts = (node: TreeNode): React.ReactNode =>
|
||||
node.comments?.active ? (
|
||||
<span
|
||||
className={'node-item-comment'}
|
||||
title={`${node.comments.active + node.comments.resolved} comments, ${
|
||||
node.comments.active
|
||||
} active, ${node.comments.resolved} resolved`}
|
||||
>
|
||||
<Icon type={'comment'} /> {node.comments.active > 9 ? '9+' : node.comments.active}
|
||||
</span>
|
||||
) : null
|
||||
const renderFileStatus = ({ diff }: TreeNode): React.ReactNode =>
|
||||
diff && (
|
||||
<span
|
||||
className={'node-item-diff'}
|
||||
title={`${diff.status}, ${diff.changes} changes: +${diff.additions} & -${diff.deletions}`}
|
||||
>
|
||||
{showDiffInText ? <DiffStatText diff={diff} /> : <DiffStatGraph diff={diff} />}
|
||||
</span>
|
||||
)
|
||||
|
||||
const renders: ((node: TreeNode) => React.ReactNode)[] = []
|
||||
if (searchMode === 'fuzzy') renders.push(renderFindInFolderButton)
|
||||
if (searched) renders.push(renderGoToButton)
|
||||
if (commentToggle) renders.push(renderFileCommentAmounts)
|
||||
renders.push(renderFileStatus)
|
||||
|
||||
return renders.length
|
||||
? node => renders.map((render, i) => <React.Fragment key={i}>{render(node)}</React.Fragment>)
|
||||
: undefined
|
||||
}, [goTo, onSearch, searched, searchMode, commentToggle, showDiffInText])
|
||||
|
||||
const renderLabelText = React.useCallback(
|
||||
(node: TreeNode) => searchModes[searchMode].renderNodeLabelText(node, searchKey),
|
||||
[searchKey, searchMode],
|
||||
)
|
||||
|
||||
const renderNodeContext: renderNodeContext | null = React.useMemo(
|
||||
() =>
|
||||
visibleNodes && {
|
||||
onNodeClick,
|
||||
renderActions,
|
||||
renderLabelText,
|
||||
visibleNodes,
|
||||
},
|
||||
[onNodeClick, renderActions, renderLabelText, visibleNodes],
|
||||
)
|
||||
|
||||
return (
|
||||
<div className={cx(`file-explorer`, { freeze })} tabIndex={-1} onKeyDown={handleKeyDown}>
|
||||
{run(() => {
|
||||
switch (state) {
|
||||
case 'tree-loading':
|
||||
return <LoadingIndicator text={'Fetching File List...'} />
|
||||
case 'tree-rendering':
|
||||
return <LoadingIndicator text={'Rendering File List...'} />
|
||||
case 'tree-rendered':
|
||||
return (
|
||||
visibleNodes &&
|
||||
renderNodeContext && (
|
||||
<>
|
||||
{defer && (
|
||||
<div className={'status'}>
|
||||
<Label
|
||||
title="This repository is large. Gitako has switched to Lazy Mode to improve performance. Folders will be loaded when it gets expanded."
|
||||
className={'lazy-mode'}
|
||||
variant="attention"
|
||||
>
|
||||
Lazy Mode is ON
|
||||
</Label>
|
||||
</div>
|
||||
)}
|
||||
<SearchBar value={searchKey} onSearch={onSearch} onFocus={onFocusSearchBar} />
|
||||
{searched && visibleNodes.nodes.length === 0 && (
|
||||
<>
|
||||
<Text marginTop={6} textAlign="center" color="text.gray">
|
||||
No results found.
|
||||
</Text>
|
||||
{defer && (
|
||||
<Text textAlign="center" color="gray.4" fontSize="12px">
|
||||
Search results are limited to loaded folders in Lazy Mode.
|
||||
</Text>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<SizeObserver className={'files'}>
|
||||
{({ width = 0, height = 0 }) => (
|
||||
<div className={'magic-size-container'}>
|
||||
<ListView
|
||||
height={height}
|
||||
width={width}
|
||||
renderNodeContext={renderNodeContext}
|
||||
expandTo={expandTo}
|
||||
metaData={metaData}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</SizeObserver>
|
||||
</>
|
||||
)
|
||||
)
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
RawFileExplorer.defaultProps = {
|
||||
freeze: false,
|
||||
searchKey: '',
|
||||
visibleNodes: null,
|
||||
}
|
||||
|
||||
export const FileExplorer = connect(FileExplorerCore)(RawFileExplorer)
|
||||
|
||||
const VirtualNode = React.memo(function VirtualNode({
|
||||
index,
|
||||
style,
|
||||
data: { onNodeClick, renderLabelText, renderActions, visibleNodes },
|
||||
}: Override<ListChildComponentProps, { data: renderNodeContext }>) {
|
||||
if (!visibleNodes) return null
|
||||
|
||||
const { nodes, focusedNode, expandedNodes, loading, depths } = visibleNodes as VisibleNodes
|
||||
const node = nodes[index]
|
||||
|
||||
return (
|
||||
<Node
|
||||
style={style}
|
||||
key={node.path}
|
||||
node={node}
|
||||
depth={depths.get(node) || 0}
|
||||
focused={focusedNode?.path === node.path}
|
||||
loading={loading.has(node.path)}
|
||||
expanded={expandedNodes.has(node.path)}
|
||||
onClick={onNodeClick}
|
||||
renderLabelText={renderLabelText}
|
||||
renderActions={renderActions}
|
||||
/>
|
||||
)
|
||||
})
|
||||
|
||||
type ListViewProps = {
|
||||
height: number
|
||||
width: number
|
||||
renderNodeContext: renderNodeContext
|
||||
} & Pick<Props, 'metaData'> &
|
||||
Pick<ConnectorState, 'expandTo'>
|
||||
|
||||
function ListView({ width, height, metaData, expandTo, renderNodeContext }: ListViewProps) {
|
||||
const { visibleNodes } = renderNodeContext
|
||||
const { focusedNode, nodes } = visibleNodes
|
||||
const listRef = React.useRef<FixedSizeList>(null)
|
||||
// the change of depths indicates switch into/from search state
|
||||
React.useEffect(() => {
|
||||
if (listRef.current && focusedNode?.path) {
|
||||
const index = nodes.findIndex(node => node.path === focusedNode.path)
|
||||
if (index !== -1) {
|
||||
listRef.current.scrollToItem(index, 'auto')
|
||||
}
|
||||
}
|
||||
}, [focusedNode?.path, nodes])
|
||||
// For some reason, removing the deps array above results in bug:
|
||||
// If scroll fast and far, then clicking on items would result in redirect
|
||||
// Not know the reason :(
|
||||
|
||||
const goToCurrentItem = React.useCallback(() => {
|
||||
const targetPath = platform.getCurrentPath(metaData.branchName)
|
||||
if (targetPath) expandTo(targetPath)
|
||||
}, [metaData.branchName])
|
||||
|
||||
useOnLocationChange(goToCurrentItem)
|
||||
useOnPJAXDone(goToCurrentItem)
|
||||
|
||||
const { compactFileTree } = useConfigs().value
|
||||
|
||||
return (
|
||||
<FixedSizeList
|
||||
ref={listRef}
|
||||
itemKey={(index, { visibleNodes }) => visibleNodes?.nodes[index]?.path}
|
||||
itemData={renderNodeContext}
|
||||
itemCount={visibleNodes.nodes.length}
|
||||
itemSize={compactFileTree ? 24 : 37}
|
||||
height={height}
|
||||
width={width}
|
||||
>
|
||||
{VirtualNode}
|
||||
</FixedSizeList>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import * as React from 'react'
|
||||
import { resolveDiffGraphMeta } from 'utils/general'
|
||||
import { Icon } from './Icon'
|
||||
import { Icon } from '../Icon'
|
||||
|
||||
export function DiffStatGraph({
|
||||
diff: { status, changes, additions, deletions },
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import * as React from 'react'
|
||||
import { Icon } from './Icon'
|
||||
import { Icon } from '../Icon'
|
||||
|
||||
export function DiffStatText({
|
||||
diff: { status, changes, additions, deletions },
|
||||
65
src/components/FileExplorer/ListView.tsx
Normal file
65
src/components/FileExplorer/ListView.tsx
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import { useConfigs } from 'containers/ConfigsContext'
|
||||
import { ConnectorState, Props } from 'driver/core/FileExplorer'
|
||||
import { platform } from 'platforms'
|
||||
import * as React from 'react'
|
||||
import { Align as ReactWindowAlign, FixedSizeList } from 'react-window'
|
||||
import { useOnLocationChange } from 'utils/hooks/useOnLocationChange'
|
||||
import { useOnPJAXDone } from 'utils/hooks/usePJAX'
|
||||
import { NodeRendererContext } from '.'
|
||||
import { VirtualNode } from './VirtualNode'
|
||||
|
||||
type ListViewProps = {
|
||||
height: number
|
||||
width: number
|
||||
nodeRendererContext: NodeRendererContext
|
||||
scrollMode: ReactWindowAlign
|
||||
} & Pick<Props, 'metaData'> &
|
||||
Pick<ConnectorState, 'expandTo'>
|
||||
|
||||
export function ListView({
|
||||
width,
|
||||
height,
|
||||
metaData,
|
||||
expandTo,
|
||||
nodeRendererContext,
|
||||
scrollMode,
|
||||
}: ListViewProps) {
|
||||
const { visibleNodes } = nodeRendererContext
|
||||
const { focusedNode, nodes } = visibleNodes
|
||||
const listRef = React.useRef<FixedSizeList>(null)
|
||||
// the change of depths indicates switch into/from search state
|
||||
React.useEffect(() => {
|
||||
if (listRef.current && focusedNode?.path) {
|
||||
const index = nodes.findIndex(node => node.path === focusedNode.path)
|
||||
if (index !== -1) {
|
||||
listRef.current.scrollToItem(index, scrollMode)
|
||||
}
|
||||
}
|
||||
}, [focusedNode?.path, nodes])
|
||||
// For some reason, removing the deps array above results in bug:
|
||||
// If scroll fast and far, then clicking on items would result in redirect
|
||||
// Not know the reason :(
|
||||
const goToCurrentItem = React.useCallback(() => {
|
||||
const targetPath = platform.getCurrentPath(metaData.branchName)
|
||||
if (targetPath) expandTo(targetPath)
|
||||
}, [metaData.branchName])
|
||||
|
||||
useOnLocationChange(goToCurrentItem)
|
||||
useOnPJAXDone(goToCurrentItem)
|
||||
|
||||
const { compactFileTree } = useConfigs().value
|
||||
|
||||
return (
|
||||
<FixedSizeList
|
||||
ref={listRef}
|
||||
itemKey={(index, { visibleNodes }) => visibleNodes?.nodes[index]?.path}
|
||||
itemData={nodeRendererContext}
|
||||
itemCount={visibleNodes.nodes.length}
|
||||
itemSize={compactFileTree ? 24 : 37}
|
||||
height={height}
|
||||
width={width}
|
||||
>
|
||||
{VirtualNode}
|
||||
</FixedSizeList>
|
||||
)
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@ import { platform } from 'platforms'
|
|||
import * as React from 'react'
|
||||
import { cx } from 'utils/cx'
|
||||
import { getFileIconURL, getFolderIconURL } from 'utils/parseIconMapCSV'
|
||||
import { Icon } from './Icon'
|
||||
import { Icon } from '../Icon'
|
||||
|
||||
function getIconType(node: TreeNode) {
|
||||
switch (node.type) {
|
||||
30
src/components/FileExplorer/VirtualNode.tsx
Normal file
30
src/components/FileExplorer/VirtualNode.tsx
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import { Node } from 'components/FileExplorer/Node'
|
||||
import * as React from 'react'
|
||||
import { ListChildComponentProps } from 'react-window'
|
||||
import { NodeRendererContext } from '.'
|
||||
|
||||
export const VirtualNode = React.memo(function VirtualNode({
|
||||
index,
|
||||
style,
|
||||
data: { onNodeClick, renderLabelText, renderActions, visibleNodes },
|
||||
}: Override<ListChildComponentProps, { data: NodeRendererContext }>) {
|
||||
if (!visibleNodes) return null
|
||||
|
||||
const { nodes, focusedNode, expandedNodes, loading, depths } = visibleNodes
|
||||
const node = nodes[index]
|
||||
|
||||
return (
|
||||
<Node
|
||||
style={style}
|
||||
key={node.path}
|
||||
node={node}
|
||||
depth={depths.get(node) || 0}
|
||||
focused={focusedNode?.path === node.path}
|
||||
loading={loading.has(node.path)}
|
||||
expanded={expandedNodes.has(node.path)}
|
||||
onClick={onNodeClick}
|
||||
renderLabelText={renderLabelText}
|
||||
renderActions={renderActions}
|
||||
/>
|
||||
)
|
||||
})
|
||||
217
src/components/FileExplorer/index.tsx
Normal file
217
src/components/FileExplorer/index.tsx
Normal file
|
|
@ -0,0 +1,217 @@
|
|||
import { Label, Text } from '@primer/react'
|
||||
import { LoadingIndicator } from 'components/LoadingIndicator'
|
||||
import { SearchBar } from 'components/SearchBar'
|
||||
import { useConfigs } from 'containers/ConfigsContext'
|
||||
import { connect } from 'driver/connect'
|
||||
import { FileExplorerCore } from 'driver/core'
|
||||
import { ConnectorState, Props } from 'driver/core/FileExplorer'
|
||||
import * as React from 'react'
|
||||
import { Align as ReactWindowAlign } from 'react-window'
|
||||
import { cx } from 'utils/cx'
|
||||
import * as DOMHelper from 'utils/DOMHelper'
|
||||
import { run } from 'utils/general'
|
||||
import { useLoadedContext } from 'utils/hooks/useLoadedContext'
|
||||
import { useSequentialEffect } from 'utils/hooks/useSequentialEffect'
|
||||
import { useStateIO } from 'utils/hooks/useStateIO'
|
||||
import { VisibleNodes, VisibleNodesGenerator } from 'utils/VisibleNodesGenerator'
|
||||
import { SideBarStateContext } from '../../containers/SideBarState'
|
||||
import { SearchMode, searchModes } from '../searchModes'
|
||||
import { SizeObserver } from '../SizeObserver'
|
||||
import { ListView } from './ListView'
|
||||
import {
|
||||
NodeRenderer,
|
||||
useNodeRenderers,
|
||||
useRenderFileCommentAmounts,
|
||||
useRenderFileStatus,
|
||||
useRenderFindInFolderButton,
|
||||
useRenderGoToButton
|
||||
} from './useNodeRenderers'
|
||||
|
||||
export type NodeRendererContext = {
|
||||
onNodeClick: (event: React.MouseEvent<HTMLElement, MouseEvent>, node: TreeNode) => void
|
||||
renderLabelText: NodeRenderer
|
||||
renderActions: NodeRenderer | undefined
|
||||
visibleNodes: VisibleNodes
|
||||
}
|
||||
|
||||
function useSetupTree(setUpTree: ConnectorState['setUpTree'], metaData: MetaData) {
|
||||
const stateContext = useLoadedContext(SideBarStateContext)
|
||||
const {
|
||||
value: { accessToken, compressSingletonFolder },
|
||||
} = useConfigs()
|
||||
|
||||
useSequentialEffect(
|
||||
checker => {
|
||||
setUpTree(
|
||||
{
|
||||
metaData,
|
||||
config: {
|
||||
compressSingletonFolder,
|
||||
accessToken,
|
||||
},
|
||||
stateContext,
|
||||
},
|
||||
checker,
|
||||
)
|
||||
},
|
||||
[setUpTree, metaData, compressSingletonFolder, accessToken],
|
||||
)
|
||||
}
|
||||
|
||||
function useFocusFileExplorerOnFirstRender() {
|
||||
React.useEffect(() => {
|
||||
DOMHelper.focusFileExplorer()
|
||||
}, [])
|
||||
}
|
||||
|
||||
function useReactWindowAlignMode(searched: boolean) {
|
||||
const scrollMode = useStateIO<ReactWindowAlign>('auto')
|
||||
React.useEffect(() => {
|
||||
// Use `auto` as default mode to prevent initial misalignment
|
||||
// Switch to `smart` mode when start searching to make sure alignment is user-friendly when jump to files
|
||||
if (scrollMode.value === 'auto' && searched) scrollMode.onChange('smart')
|
||||
}, [searched])
|
||||
return scrollMode
|
||||
}
|
||||
|
||||
function useOnSearch(
|
||||
updateSearchKey: (searchKey: string) => void,
|
||||
visibleNodesGenerator: VisibleNodesGenerator | null,
|
||||
) {
|
||||
const {
|
||||
value: { restoreExpandedFolders },
|
||||
} = useConfigs()
|
||||
return React.useCallback(
|
||||
(searchKey: string, searchMode: SearchMode) => {
|
||||
updateSearchKey(searchKey)
|
||||
if (visibleNodesGenerator) {
|
||||
visibleNodesGenerator.search(
|
||||
searchModes[searchMode].getSearchParams(searchKey),
|
||||
restoreExpandedFolders,
|
||||
)
|
||||
}
|
||||
},
|
||||
[updateSearchKey, visibleNodesGenerator, restoreExpandedFolders],
|
||||
)
|
||||
}
|
||||
|
||||
function useRenderLabelText(searchKey: string) {
|
||||
const {
|
||||
value: { searchMode },
|
||||
} = useConfigs()
|
||||
return React.useCallback(
|
||||
(node: TreeNode) => searchModes[searchMode].renderNodeLabelText(node, searchKey),
|
||||
[searchKey, searchMode],
|
||||
)
|
||||
}
|
||||
|
||||
const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplorer({
|
||||
visibleNodes,
|
||||
visibleNodesGenerator,
|
||||
freeze,
|
||||
onNodeClick,
|
||||
searchKey,
|
||||
updateSearchKey,
|
||||
onFocusSearchBar,
|
||||
goTo,
|
||||
handleKeyDown,
|
||||
metaData,
|
||||
expandTo,
|
||||
setUpTree,
|
||||
defer,
|
||||
searched,
|
||||
}) {
|
||||
useSetupTree(setUpTree, metaData)
|
||||
useFocusFileExplorerOnFirstRender()
|
||||
|
||||
const onSearch = useOnSearch(updateSearchKey, visibleNodesGenerator)
|
||||
const renderActions = useNodeRenderers([
|
||||
useRenderGoToButton(searched, goTo),
|
||||
useRenderFindInFolderButton(onSearch),
|
||||
useRenderFileCommentAmounts(),
|
||||
useRenderFileStatus(),
|
||||
])
|
||||
|
||||
const renderLabelText = useRenderLabelText(searchKey)
|
||||
|
||||
const nodeRendererContext: NodeRendererContext | null = React.useMemo(
|
||||
() =>
|
||||
visibleNodes && {
|
||||
onNodeClick,
|
||||
renderActions,
|
||||
renderLabelText,
|
||||
visibleNodes,
|
||||
},
|
||||
[onNodeClick, renderActions, renderLabelText, visibleNodes],
|
||||
)
|
||||
|
||||
const alignMode = useReactWindowAlignMode(searched)
|
||||
const state = useLoadedContext(SideBarStateContext).value
|
||||
|
||||
return (
|
||||
<div className={cx(`file-explorer`, { freeze })} tabIndex={-1} onKeyDown={handleKeyDown}>
|
||||
{run(() => {
|
||||
switch (state) {
|
||||
case 'tree-loading':
|
||||
return <LoadingIndicator text={'Fetching File List...'} />
|
||||
case 'tree-rendering':
|
||||
return <LoadingIndicator text={'Rendering File List...'} />
|
||||
case 'tree-rendered':
|
||||
return (
|
||||
visibleNodes &&
|
||||
nodeRendererContext && (
|
||||
<>
|
||||
{defer && (
|
||||
<div className={'status'}>
|
||||
<Label
|
||||
title="This repository is large. Gitako has switched to Lazy Mode to improve performance. Folders will be loaded when it gets expanded."
|
||||
className={'lazy-mode'}
|
||||
variant="attention"
|
||||
>
|
||||
Lazy Mode is ON
|
||||
</Label>
|
||||
</div>
|
||||
)}
|
||||
<SearchBar value={searchKey} onSearch={onSearch} onFocus={onFocusSearchBar} />
|
||||
{searched && visibleNodes.nodes.length === 0 && (
|
||||
<>
|
||||
<Text marginTop={6} textAlign="center" color="text.gray">
|
||||
No results found.
|
||||
</Text>
|
||||
{defer && (
|
||||
<Text textAlign="center" color="gray.4" fontSize="12px">
|
||||
Search results are limited to loaded folders in Lazy Mode.
|
||||
</Text>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<SizeObserver className={'files'}>
|
||||
{({ width = 0, height = 0 }) => (
|
||||
<div className={'magic-size-container'}>
|
||||
<ListView
|
||||
height={height}
|
||||
width={width}
|
||||
nodeRendererContext={nodeRendererContext}
|
||||
expandTo={expandTo}
|
||||
metaData={metaData}
|
||||
scrollMode={alignMode.value}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</SizeObserver>
|
||||
</>
|
||||
)
|
||||
)
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
RawFileExplorer.defaultProps = {
|
||||
freeze: false,
|
||||
searchKey: '',
|
||||
visibleNodes: null,
|
||||
}
|
||||
|
||||
export const FileExplorer = connect(FileExplorerCore)(RawFileExplorer)
|
||||
103
src/components/FileExplorer/useNodeRenderers.tsx
Normal file
103
src/components/FileExplorer/useNodeRenderers.tsx
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
import { useConfigs } from 'containers/ConfigsContext'
|
||||
import * as React from 'react'
|
||||
import { isNotFalsy } from 'utils/general'
|
||||
import { Icon } from '../Icon'
|
||||
import { SearchMode } from '../searchModes'
|
||||
import { DiffStatGraph } from './DiffStatGraph'
|
||||
import { DiffStatText } from './DiffStatText'
|
||||
|
||||
export type NodeRenderer = (node: TreeNode) => React.ReactNode
|
||||
|
||||
export function useNodeRenderers(allRenderers: (NodeRenderer | null | undefined)[]) {
|
||||
return React.useMemo(() => {
|
||||
const renderers: NodeRenderer[] = allRenderers.filter(isNotFalsy)
|
||||
return renderers.length
|
||||
? (node: TreeNode) =>
|
||||
renderers.map((render, i) => <React.Fragment key={i}>{render(node)}</React.Fragment>)
|
||||
: undefined
|
||||
}, allRenderers)
|
||||
}
|
||||
|
||||
export function useRenderFileStatus() {
|
||||
function renderFileStatus({ diff }: TreeNode) {
|
||||
return (
|
||||
diff && (
|
||||
<span
|
||||
className={'node-item-diff'}
|
||||
title={`${diff.status}, ${diff.changes} changes: +${diff.additions} & -${diff.deletions}`}
|
||||
>
|
||||
{showDiffInText ? <DiffStatText diff={diff} /> : <DiffStatGraph diff={diff} />}
|
||||
</span>
|
||||
)
|
||||
)
|
||||
}
|
||||
const {
|
||||
value: { showDiffInText },
|
||||
} = useConfigs()
|
||||
return React.useMemo(() => renderFileStatus, [])
|
||||
}
|
||||
|
||||
export function useRenderFileCommentAmounts() {
|
||||
function renderFileCommentAmounts(node: TreeNode) {
|
||||
return node.comments?.active ? (
|
||||
<span
|
||||
className={'node-item-comment'}
|
||||
title={`${node.comments.active + node.comments.resolved} comments, ${
|
||||
node.comments.active
|
||||
} active, ${node.comments.resolved} resolved`}
|
||||
>
|
||||
<Icon type={'comment'} /> {node.comments.active > 9 ? '9+' : node.comments.active}
|
||||
</span>
|
||||
) : null
|
||||
}
|
||||
const {
|
||||
value: { commentToggle },
|
||||
} = useConfigs()
|
||||
return React.useMemo(() => (commentToggle ? renderFileCommentAmounts : null), [])
|
||||
}
|
||||
|
||||
export function useRenderFindInFolderButton(
|
||||
onSearch: (searchKey: string, searchMode: SearchMode) => void,
|
||||
) {
|
||||
function renderFindInFolderButton(node: TreeNode) {
|
||||
return node.type === 'tree' ? (
|
||||
<button
|
||||
title={'Find in folder...'}
|
||||
className={'find-in-folder-button'}
|
||||
onClick={e => {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
onSearch(node.path + '/', searchMode)
|
||||
}}
|
||||
>
|
||||
<Icon type="search" />
|
||||
</button>
|
||||
) : null
|
||||
}
|
||||
const {
|
||||
value: { searchMode },
|
||||
} = useConfigs()
|
||||
return React.useMemo(
|
||||
() => (searchMode === 'fuzzy' ? renderFindInFolderButton : null),
|
||||
[searchMode],
|
||||
)
|
||||
}
|
||||
|
||||
export function useRenderGoToButton(searched: boolean, goTo: (path: string[]) => void) {
|
||||
function renderGoToButton(node: TreeNode): React.ReactNode {
|
||||
return (
|
||||
<button
|
||||
title={'Reveal in file tree'}
|
||||
className={'go-to-button'}
|
||||
onClick={e => {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
goTo(node.path.split('/'))
|
||||
}}
|
||||
>
|
||||
<Icon type="go-to" />
|
||||
</button>
|
||||
)
|
||||
}
|
||||
return React.useMemo(() => (searched ? renderGoToButton : null), [searched])
|
||||
}
|
||||
|
|
@ -224,3 +224,7 @@ export function formatHash(hash?: string) {
|
|||
if (hash) return '#' + hash
|
||||
return ''
|
||||
}
|
||||
|
||||
export function isNotFalsy<T>(value: T | undefined | null): value is T {
|
||||
return value !== undefined && value !== null
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue