115 lines
3.8 KiB
TypeScript
115 lines
3.8 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 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_line: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
},
|
|
show_text: {
|
|
backgroundColor: tokens.colorNeutralBackground1Hover,
|
|
padding: '0.5rem 0.5rem',
|
|
borderRadius: '0.5rem',
|
|
cursor: 'pointer',
|
|
display: 'block',
|
|
alignItems: 'center',
|
|
marginLeft: '0.5rem',
|
|
overflow: 'hidden',
|
|
maxWidth: '8rem',
|
|
verticalAlign: 'middle',
|
|
'&:hover': {
|
|
textDecoration: 'none',
|
|
backgroundColor: tokens.colorNeutralBackground1Pressed,
|
|
},
|
|
'& > div': {
|
|
height: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
},
|
|
},
|
|
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) => {
|
|
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>
|
|
<Tooltip content={bucket_active.name} relationship={'description'}>
|
|
<Text className={styles.show_text}
|
|
truncate
|
|
wrap={false}
|
|
align={'justify'}
|
|
style={{maxWidth: '16rem'}}
|
|
>
|
|
<div>
|
|
<ArchiveRegular style={{margin: '0rem 0.5rem 0 0'}}/>
|
|
{bucket_active.name}
|
|
</div>
|
|
</Text>
|
|
</Tooltip>
|
|
{prefix && (
|
|
prefix.split("/").filter(item => item).map((item, idx) => {
|
|
return <div className={styles.show_line} key={idx}>
|
|
<Text style={{marginLeft: '0.5rem'}}>/</Text>
|
|
<Text className={styles.show_text} truncate wrap={false}>{item}</Text>
|
|
</div>
|
|
})
|
|
)}
|
|
</div>
|
|
<div className={styles.filter_prefix}>
|
|
<Input
|
|
onChange={(e) => {
|
|
handleFilterChange(e)
|
|
}}
|
|
placeholder={"输入前缀过滤"}
|
|
// contentBefore={<Text>/</Text>}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
}
|