93 lines
3.1 KiB
TypeScript
93 lines
3.1 KiB
TypeScript
import {Button, Input, makeStyles, Text, tokens, Tooltip} from "@fluentui/react-components";
|
|
import {useStoreBucket} from "../../store/bucket";
|
|
import {ArchiveRegular, ArrowCurveUpLeftFilled} from "@fluentui/react-icons";
|
|
import {useStoreFile} from "../../store/file";
|
|
import React, {ChangeEvent, useState} from "react";
|
|
import {debounce} from 'lodash'
|
|
import {useStoreConnection} from "../../store/connection";
|
|
|
|
const useStyles = makeStyles({
|
|
container: {
|
|
height: '4rem',
|
|
width: '100%',
|
|
borderBottom: '1px solid lightgray',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
},
|
|
show: {
|
|
marginLeft: '0.5rem',
|
|
height: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
},
|
|
show_text: {
|
|
backgroundColor: tokens.colorNeutralBackground1Hover,
|
|
padding: '0.5rem 0.5rem',
|
|
borderRadius: '0.5rem',
|
|
cursor: 'pointer',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
marginLeft: '0.5rem',
|
|
'&:hover': {
|
|
textDecoration: 'none',
|
|
backgroundColor: tokens.colorNeutralBackground1Pressed,
|
|
},
|
|
},
|
|
op_up: {},
|
|
filter_prefix: {
|
|
margin: '0.5rem',
|
|
},
|
|
})
|
|
|
|
export function Path() {
|
|
const styles = useStyles()
|
|
const {conn_active} = useStoreConnection()
|
|
const {bucket_active} = useStoreBucket()
|
|
const {prefix, files_get} = useStoreFile()
|
|
|
|
async function handleClickUp() {
|
|
|
|
}
|
|
|
|
|
|
const handleFilterChange = debounce((e) => {
|
|
console.log('[DEBUG] e =', e)
|
|
files_get(conn_active!, bucket_active!, prefix + e.target.value)
|
|
}, 500)
|
|
|
|
return <div className={styles.container}>
|
|
{bucket_active && (
|
|
<>
|
|
<div className={styles.show}>
|
|
<Tooltip content="返回上一级" relationship="label">
|
|
<Button className={styles.op_up}
|
|
onClick={async () => {
|
|
await handleClickUp()
|
|
}}
|
|
size="small" icon={<ArrowCurveUpLeftFilled/>}/>
|
|
</Tooltip>
|
|
<Text className={styles.show_text}><ArchiveRegular
|
|
style={{marginRight: '0.5rem'}}/>{bucket_active.name}</Text>
|
|
{prefix && (
|
|
prefix.split("/").filter(item => item).map(item => {
|
|
return <>
|
|
<Text style={{marginLeft: '0.5rem'}}>/</Text>
|
|
<Text className={styles.show_text}>{item}</Text>
|
|
</>
|
|
})
|
|
)}
|
|
</div>
|
|
<div className={styles.filter_prefix}>
|
|
<Input
|
|
onChange={(e) => {
|
|
handleFilterChange(e)
|
|
}}
|
|
placeholder={"输入前缀过滤"}
|
|
contentBefore={<Text>/</Text>}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
}
|