f-denkena/rclone-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rename pickerEnabled, add showPicker to MultiPathField, export both fields

Browse Source 
Signed-off-by: FTCHD <144691102+FTCHD@users.noreply.github.com>
This commit is contained in:
FTCHD
2025-08-13 00:06:14 +02:00
parent 7d277c54f9
commit 615c62bb12
1 changed files with 60 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PathFinder.tsx
+60 -56
View File
@@ -68,7 +68,7 @@ export function PathFinder({
placeholder={sourceOptions.placeholder} placeholder={sourceOptions.placeholder}
showSuggestions={sourceOptions.showSuggestions} showSuggestions={sourceOptions.showSuggestions}
clearable={sourceOptions.clearable} clearable={sourceOptions.clearable}
pickerEnabled={sourceOptions.showPicker} showPicker={sourceOptions.showPicker}
/> />
{switchable && ( {switchable && (
@@ -93,7 +93,7 @@ export function PathFinder({
placeholder={destOptions.placeholder} placeholder={destOptions.placeholder}
showSuggestions={destOptions.showSuggestions} showSuggestions={destOptions.showSuggestions}
clearable={destOptions.clearable} clearable={destOptions.clearable}
pickerEnabled={destOptions.showPicker} showPicker={destOptions.showPicker}
/> />
</div> </div>
) )
@@ -208,14 +208,14 @@ export function MultiPathFinder({
) )
} }
function PathField({ export function PathField({
path, path,
setPath, setPath,
label, label,
placeholder = 'Enter a remote:/path or local path, or tap to select files', placeholder = 'Enter a remote:/path or local path, or tap to select files',
showSuggestions = true, showSuggestions = true,
clearable = true, clearable = true,
pickerEnabled = true, showPicker = true,
}: { }: {
path: string path: string
setPath: (path: string) => void setPath: (path: string) => void
@@ -223,11 +223,11 @@ function PathField({
placeholder?: string placeholder?: string
showSuggestions?: boolean showSuggestions?: boolean
clearable?: boolean clearable?: boolean
pickerEnabled?: boolean showPicker?: boolean
}) { }) {
const remotes = useStore((state) => state.remotes) const remotes = useStore((state) => state.remotes)
const [debouncedPath] = useDebounce(path, 200) const [debouncedPath] = useDebounce(path, 800)
const fieldRef = useRef<HTMLInputElement>(null) const fieldRef = useRef<HTMLInputElement>(null)
@@ -424,7 +424,7 @@ function PathField({
))} ))}
</Autocomplete> </Autocomplete>
</div> </div>
{pickerEnabled && ( {showPicker && (
<Button <Button
onPress={handleBrowse} onPress={handleBrowse}
type="button" type="button"
@@ -440,12 +440,13 @@ function PathField({
) )
} }
function MultiPathField({ export function MultiPathField({
paths, paths,
setPaths, setPaths,
label, label,
placeholder = 'Enter a remote:/path or local path, or tap to select files', placeholder = 'Enter a remote:/path or local path, or tap to select files',
showSuggestions = true, showSuggestions = true,
showPicker = true,
clearable = true, clearable = true,
}: { }: {
paths: string[] paths: string[]
@@ -453,11 +454,12 @@ function MultiPathField({
label: string label: string
placeholder?: string placeholder?: string
showSuggestions?: boolean showSuggestions?: boolean
showPicker?: boolean
clearable?: boolean clearable?: boolean
}) { }) {
const remotes = useStore((state) => state.remotes) const remotes = useStore((state) => state.remotes)
const [debouncedPath] = useDebounce(paths?.[0], 200) const [debouncedPath] = useDebounce(paths?.[0], 800)
const fieldRef = useRef<HTMLInputElement>(null) const fieldRef = useRef<HTMLInputElement>(null)
@@ -683,62 +685,64 @@ function MultiPathField({
</Autocomplete> </Autocomplete>
)} )}
</div> </div>
<div className="relative w-20 group h-18"> {showPicker && (
<Button <div className="relative w-20 group h-18">
onPress={() => {
if (isMultiple) {
setPaths([])
}
}}
type="button"
isIconOnly={true}
size="lg"
className={cn(
'absolute top-0 bottom-0 w-20 group-hover:hidden h-18',
isMultiple && 'group-hover:absolute'
)}
data-focus-visible="false"
>
{isMultiple ? (
<XIcon className="w-6 h-6" />
) : (
<FolderOpen className="w-6 h-6" />
)}
</Button>
<div
className={cn(
'absolute top-0 bottom-0 flex-col justify-between hidden w-20 group-hover:flex h-18',
isMultiple && 'group-hover:hidden'
)}
>
<Button <Button
onPress={() => { onPress={() => {
handleBrowse('file') if (isMultiple) {
setPaths([])
}
}} }}
type="button" type="button"
size="sm" isIconOnly={true}
className="h-7" size="lg"
className={cn(
'absolute top-0 bottom-0 w-20 group-hover:hidden h-18',
isMultiple && 'group-hover:absolute'
)}
data-focus-visible="false" data-focus-visible="false"
radius="lg"
variant="flat"
> >
Files {isMultiple ? (
<XIcon className="w-6 h-6" />
) : (
<FolderOpen className="w-6 h-6" />
)}
</Button> </Button>
<Button <div
onPress={() => { className={cn(
handleBrowse('folder') 'absolute top-0 bottom-0 flex-col justify-between hidden w-20 group-hover:flex h-18',
}} isMultiple && 'group-hover:hidden'
type="button" )}
size="sm"
className="h-7"
data-focus-visible="false"
radius="lg"
variant="flat"
> >
Folder <Button
</Button> onPress={() => {
handleBrowse('file')
}}
type="button"
size="sm"
className="h-7"
data-focus-visible="false"
radius="lg"
variant="flat"
>
Files
</Button>
<Button
onPress={() => {
handleBrowse('folder')
}}
type="button"
size="sm"
className="h-7"
data-focus-visible="false"
radius="lg"
variant="flat"
>
Folder
</Button>
</div>
</div> </div>
</div> )}
</div> </div>
) )
} }