chore: minor fixes

This commit is contained in:
EnixCoda 2020-04-15 21:33:15 +08:00
parent 46a01711e9
commit 0da52bee9e
No known key found for this signature in database
GPG key ID: 0C1A07377913A1DD
3 changed files with 22 additions and 24 deletions

View file

@ -20,9 +20,9 @@ import { SizeObserver } from './SizeObserver'
const VisibleNodesContext = React.createContext<VisibleNodes | null>(null) const VisibleNodesContext = React.createContext<VisibleNodes | null>(null)
const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplorer(props) { const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplorer(props) {
const { visibleNodes, freeze, onNodeClick, searchKey } = props const { state, visibleNodes, freeze, onNodeClick, searchKey } = props
const { const {
val: { access_token: accessToken, compressSingletonFolder }, val: { compressSingletonFolder },
} = useConfigs() } = useConfigs()
React.useEffect(() => { React.useEffect(() => {
@ -32,8 +32,8 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
React.useEffect(() => { React.useEffect(() => {
const { setUpTree, treeRoot, metaData } = props const { setUpTree, treeRoot, metaData } = props
setUpTree({ treeRoot, metaData, compressSingletonFolder, accessToken }) setUpTree({ treeRoot, metaData, compressSingletonFolder })
}, [props.setUpTree, props.treeRoot, compressSingletonFolder, accessToken]) }, [props.setUpTree, props.treeRoot, compressSingletonFolder])
React.useEffect(() => { React.useEffect(() => {
const { execAfterRender } = props const { execAfterRender } = props
@ -69,8 +69,7 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
[renderActions, onNodeClick, searchKey], [renderActions, onNodeClick, searchKey],
) )
const renderFiles = React.useCallback( function renderFiles({ nodes, focusedNode }: VisibleNodes) {
({ nodes, focusedNode }: VisibleNodes) => {
const inSearch = searchKey !== '' const inSearch = searchKey !== ''
if (inSearch && nodes.length === 0) { if (inSearch && nodes.length === 0) {
return ( return (
@ -94,9 +93,7 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
)} )}
</SizeObserver> </SizeObserver>
) )
}, }
[searchKey, ListView, renderNode],
)
const revealNode = React.useCallback(function revealNode( const revealNode = React.useCallback(function revealNode(
goTo: (path: string[]) => void, goTo: (path: string[]) => void,
@ -118,8 +115,15 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
onKeyDown={props.handleKeyDown} onKeyDown={props.handleKeyDown}
onClick={freeze ? props.toggleShowSettings : undefined} onClick={freeze ? props.toggleShowSettings : undefined}
> >
{props.stateText ? ( {state !== 'done' ? (
<LoadingIndicator text={props.stateText} /> <LoadingIndicator
text={
{
pulling: 'Fetching File List...',
rendering: 'Rendering File List...',
}[state]
}
/>
) : ( ) : (
visibleNodes && ( visibleNodes && (
<> <>
@ -139,6 +143,7 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
RawFileExplorer.defaultProps = { RawFileExplorer.defaultProps = {
freeze: false, freeze: false,
state: 'pulling',
searchKey: '', searchKey: '',
visibleNodes: null, visibleNodes: null,
} }

View file

@ -290,6 +290,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
&-icon { &-icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-right: 2px;
.octicon { .octicon {
width: 20px; width: 20px;

View file

@ -15,7 +15,7 @@ export type Props = {
} }
export type ConnectorState = { export type ConnectorState = {
stateText: string state: 'pulling' | 'rendering' | 'done'
visibleNodes: VisibleNodes | null visibleNodes: VisibleNodes | null
searchKey: string searchKey: string
searched: boolean // derived state from searchKey, = !!searchKey searched: boolean // derived state from searchKey, = !!searchKey
@ -57,14 +57,13 @@ let visibleNodesGenerator: VisibleNodesGenerator
type BoundMethodCreator<Args extends any[] = []> = MethodCreator<Props, ConnectorState, Args> type BoundMethodCreator<Args extends any[] = []> = MethodCreator<Props, ConnectorState, Args>
export const init: BoundMethodCreator = dispatch => () => export const init: BoundMethodCreator = dispatch => () => dispatch.set({ state: 'pulling' })
dispatch.call(setStateText, 'Fetching File List...')
export const setUpTree: BoundMethodCreator<[ export const setUpTree: BoundMethodCreator<[
Pick<Props, 'treeRoot' | 'metaData' | 'accessToken'> & Pick<Config, 'compressSingletonFolder'>, Pick<Props, 'treeRoot' | 'metaData'> & Pick<Config, 'compressSingletonFolder'>,
]> = dispatch => async ({ treeRoot, metaData, compressSingletonFolder }) => { ]> = dispatch => async ({ treeRoot, metaData, compressSingletonFolder }) => {
if (!treeRoot) return if (!treeRoot) return
dispatch.call(setStateText, 'Rendering File List...') dispatch.set({ state: 'rendering' })
visibleNodesGenerator = new VisibleNodesGenerator(treeRoot, { visibleNodesGenerator = new VisibleNodesGenerator(treeRoot, {
compress: compressSingletonFolder, compress: compressSingletonFolder,
@ -73,7 +72,7 @@ export const setUpTree: BoundMethodCreator<[
visibleNodesGenerator.init() visibleNodesGenerator.init()
tasksAfterRender.push(DOMHelper.focusSearchInput) tasksAfterRender.push(DOMHelper.focusSearchInput)
dispatch.call(setStateText, '') dispatch.set({ state: 'done' })
const targetPath = platform.getCurrentPath(metaData.branchName) const targetPath = platform.getCurrentPath(metaData.branchName)
if (targetPath) dispatch.call(goTo, targetPath) if (targetPath) dispatch.call(goTo, targetPath)
} }
@ -85,13 +84,6 @@ export const execAfterRender: BoundMethodCreator = dispatch => () => {
tasksAfterRender.length = 0 tasksAfterRender.length = 0
} }
export const setStateText: BoundMethodCreator<[ConnectorState['stateText']]> = dispatch => (
text: string,
) =>
dispatch.set({
stateText: text,
})
export const handleKeyDown: BoundMethodCreator<[React.KeyboardEvent]> = dispatch => event => { export const handleKeyDown: BoundMethodCreator<[React.KeyboardEvent]> = dispatch => event => {
const [{ searched, visibleNodes }, { loadWithPJAX }] = dispatch.get() const [{ searched, visibleNodes }, { loadWithPJAX }] = dispatch.get()
if (!visibleNodes) return if (!visibleNodes) return