6aa2d41988
* test logging * test impl for logging * implemented "live logging", restyle templates dropdown * moved extract audio to downloadDialog, fixed labels * code refactoring * buffering logs
51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import { Autocomplete, Box, TextField, Typography } from '@mui/material'
|
|
import { useRecoilState, useRecoilValue } from 'recoil'
|
|
import { customArgsState, savedTemplatesState } from '../atoms/downloadTemplate'
|
|
import { useI18n } from '../hooks/useI18n'
|
|
|
|
const ExtraDownloadOptions: React.FC = () => {
|
|
const { i18n } = useI18n()
|
|
|
|
const customTemplates = useRecoilValue(savedTemplatesState)
|
|
const [, setCustomArgs] = useRecoilState(customArgsState)
|
|
|
|
return (
|
|
<>
|
|
<Autocomplete
|
|
disablePortal
|
|
options={customTemplates.map(({ name, content }) => ({ label: name, content }))}
|
|
autoHighlight
|
|
getOptionLabel={(option) => option.label}
|
|
onChange={(_, value) => {
|
|
setCustomArgs(value?.content!)
|
|
}}
|
|
renderOption={(props, option) => (
|
|
<Box
|
|
component="li"
|
|
{...props}
|
|
>
|
|
<Box sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignContent: 'flex-start',
|
|
justifyContent: 'flex-start',
|
|
alignItems: 'flex-start',
|
|
width: '100%'
|
|
}}>
|
|
<Typography>
|
|
{option.label}
|
|
</Typography>
|
|
<Typography variant="subtitle2" color="primary">
|
|
{option.content}
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
)}
|
|
sx={{ width: '100%', mt: 2 }}
|
|
renderInput={(params) => <TextField {...params} label={i18n.t('savedTemplates')} />}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default ExtraDownloadOptions |