FileManager add layout switch button;store searchText
This commit is contained in:
parent
c33b7c201e
commit
b48d964c2c
@ -11,7 +11,11 @@ import * as Tabs from '@radix-ui/react-tabs'
|
|||||||
import { useRecoilState, useSetRecoilState } from 'recoil'
|
import { useRecoilState, useSetRecoilState } from 'recoil'
|
||||||
import PhotoAlbum from 'react-photo-album'
|
import PhotoAlbum from 'react-photo-album'
|
||||||
import { BarsArrowDownIcon, BarsArrowUpIcon } from '@heroicons/react/24/outline'
|
import { BarsArrowDownIcon, BarsArrowUpIcon } from '@heroicons/react/24/outline'
|
||||||
import { MagnifyingGlassIcon } from '@radix-ui/react-icons'
|
import {
|
||||||
|
MagnifyingGlassIcon,
|
||||||
|
ViewHorizontalIcon,
|
||||||
|
ViewGridIcon,
|
||||||
|
} from '@radix-ui/react-icons'
|
||||||
import { useDebounce } from 'react-use'
|
import { useDebounce } from 'react-use'
|
||||||
import { Id, Index, IndexSearchResult } from 'flexsearch'
|
import { Id, Index, IndexSearchResult } from 'flexsearch'
|
||||||
import * as ScrollArea from '@radix-ui/react-scroll-area'
|
import * as ScrollArea from '@radix-ui/react-scroll-area'
|
||||||
@ -19,6 +23,7 @@ import Modal from '../shared/Modal'
|
|||||||
import Flex from '../shared/Layout'
|
import Flex from '../shared/Layout'
|
||||||
import {
|
import {
|
||||||
fileManagerLayout,
|
fileManagerLayout,
|
||||||
|
fileManagerSearchText,
|
||||||
fileManagerSortBy,
|
fileManagerSortBy,
|
||||||
fileManagerSortOrder,
|
fileManagerSortOrder,
|
||||||
SortBy,
|
SortBy,
|
||||||
@ -74,10 +79,11 @@ export default function FileManager(props: Props) {
|
|||||||
const [sortBy, setSortBy] = useRecoilState<SortBy>(fileManagerSortBy)
|
const [sortBy, setSortBy] = useRecoilState<SortBy>(fileManagerSortBy)
|
||||||
const [sortOrder, setSortOrder] = useRecoilState(fileManagerSortOrder)
|
const [sortOrder, setSortOrder] = useRecoilState(fileManagerSortOrder)
|
||||||
const [layout, setLayout] = useRecoilState(fileManagerLayout)
|
const [layout, setLayout] = useRecoilState(fileManagerLayout)
|
||||||
|
const [debouncedSearchText, setDebouncedSearchText] = useRecoilState(
|
||||||
|
fileManagerSearchText
|
||||||
|
)
|
||||||
const ref = useRef(null)
|
const ref = useRef(null)
|
||||||
const [searchText, setSearchText] = useState('')
|
const [searchText, setSearchText] = useState(debouncedSearchText)
|
||||||
const [debouncedSearchText, setDebouncedSearchText] = useState('')
|
|
||||||
const [tab, setTab] = useState(IMAGE_TAB)
|
const [tab, setTab] = useState(IMAGE_TAB)
|
||||||
const [photos, setPhotos] = useState<Photo[]>([])
|
const [photos, setPhotos] = useState<Photo[]>([])
|
||||||
|
|
||||||
@ -163,11 +169,39 @@ export default function FileManager(props: Props) {
|
|||||||
onPhotoClick(tab, photos[index].name)
|
onPhotoClick(tab, photos[index].name)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const renderTitle = () => {
|
||||||
|
return (
|
||||||
|
<Flex
|
||||||
|
style={{ justifyContent: 'flex-start', alignItems: 'center', gap: 12 }}
|
||||||
|
>
|
||||||
|
<div>{`Images (${photos.length})`}</div>
|
||||||
|
<Flex>
|
||||||
|
<Button
|
||||||
|
icon={<ViewHorizontalIcon />}
|
||||||
|
toolTip="Rows layout"
|
||||||
|
onClick={() => {
|
||||||
|
setLayout('rows')
|
||||||
|
}}
|
||||||
|
className={layout !== 'rows' ? 'sort-btn-inactive' : ''}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
icon={<ViewGridIcon />}
|
||||||
|
toolTip="Grid layout"
|
||||||
|
onClick={() => {
|
||||||
|
setLayout('masonry')
|
||||||
|
}}
|
||||||
|
className={layout !== 'masonry' ? 'sort-btn-inactive' : ''}
|
||||||
|
/>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal
|
<Modal
|
||||||
onClose={onClose}
|
onClose={onClose}
|
||||||
// TODO:layout switch 放到标题中
|
// TODO:layout switch 放到标题中
|
||||||
title={`Images (${photos.length})`}
|
title={renderTitle()}
|
||||||
className="file-manager-modal"
|
className="file-manager-modal"
|
||||||
show={show}
|
show={show}
|
||||||
>
|
>
|
||||||
|
@ -9,7 +9,7 @@ export interface ModalProps {
|
|||||||
show: boolean
|
show: boolean
|
||||||
children?: ReactNode
|
children?: ReactNode
|
||||||
onClose?: () => void
|
onClose?: () => void
|
||||||
title: string
|
title: string | ReactNode
|
||||||
showCloseIcon?: boolean
|
showCloseIcon?: boolean
|
||||||
className?: string
|
className?: string
|
||||||
}
|
}
|
||||||
|
@ -701,6 +701,7 @@ interface FileManagerState {
|
|||||||
sortBy: SortBy
|
sortBy: SortBy
|
||||||
sortOrder: SortOrder
|
sortOrder: SortOrder
|
||||||
layout: 'rows' | 'masonry'
|
layout: 'rows' | 'masonry'
|
||||||
|
searchText: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const FILE_MANAGER_STATE_KEY = 'fileManagerState'
|
const FILE_MANAGER_STATE_KEY = 'fileManagerState'
|
||||||
@ -711,6 +712,7 @@ export const fileManagerState = atom<FileManagerState>({
|
|||||||
sortBy: SortBy.CTIME,
|
sortBy: SortBy.CTIME,
|
||||||
sortOrder: SortOrder.DESCENDING,
|
sortOrder: SortOrder.DESCENDING,
|
||||||
layout: 'masonry',
|
layout: 'masonry',
|
||||||
|
searchText: '',
|
||||||
},
|
},
|
||||||
effects: [localStorageEffect(FILE_MANAGER_STATE_KEY)],
|
effects: [localStorageEffect(FILE_MANAGER_STATE_KEY)],
|
||||||
})
|
})
|
||||||
@ -741,3 +743,12 @@ export const fileManagerLayout = selector({
|
|||||||
set(fileManagerState, { ...val, layout: newValue })
|
set(fileManagerState, { ...val, layout: newValue })
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
export const fileManagerSearchText = selector({
|
||||||
|
key: 'fileManagerSearchText',
|
||||||
|
get: ({ get }) => get(fileManagerState).searchText,
|
||||||
|
set: ({ get, set }, newValue: any) => {
|
||||||
|
const val = get(fileManagerState)
|
||||||
|
set(fileManagerState, { ...val, searchText: newValue })
|
||||||
|
},
|
||||||
|
})
|
||||||
|
Loading…
Reference in New Issue
Block a user