@mui/icons-material#FileCopy TypeScript Examples
The following examples show how to use
@mui/icons-material#FileCopy.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.tsx From yearn-watch-legacy with GNU Affero General Public License v3.0 | 5 votes |
|
StyledFileCopy = styled(FileCopy)`
&& {
color: ${({ theme }) => theme.text} !important;
}
`
Example #2
| Source File: CollectionRowActions.tsx From firecms with MIT License | 4 votes |
|
/**
*
* @param entity
* @param isSelected
* @param selectionEnabled
* @param size
* @param toggleEntitySelection
* @param onCopyClicked
* @param onEditClicked
* @param onDeleteClicked
* @constructor
*
* @category Collection components
*/
export function CollectionRowActions<M extends { [Key: string]: any }>({
entity,
isSelected,
selectionEnabled,
size,
toggleEntitySelection,
onCopyClicked,
onEditClicked,
onDeleteClicked
}:
{
entity: Entity<M>,
size: CollectionSize,
isSelected?: boolean,
selectionEnabled?: boolean,
toggleEntitySelection?: (selectedEntity: Entity<M>) => void
onEditClicked?: (selectedEntity: Entity<M>) => void,
onCopyClicked?: (selectedEntity: Entity<M>) => void,
onDeleteClicked?: (selectedEntity: Entity<M>) => void,
}) {
const editEnabled = Boolean(onEditClicked);
const copyEnabled = Boolean(onCopyClicked);
const deleteEnabled = Boolean(onDeleteClicked);
const classes = useTableStyles();
const [anchorEl, setAnchorEl] = React.useState<any | null>(null);
const openMenu = useCallback((event: React.MouseEvent) => {
setAnchorEl(event.currentTarget);
event.stopPropagation();
}, [setAnchorEl]);
const closeMenu = useCallback(() => {
setAnchorEl(null);
}, [setAnchorEl]);
const onCheckboxChange = (event: React.ChangeEvent) => {
if (toggleEntitySelection)
toggleEntitySelection(entity);
event.stopPropagation();
};
const onDeleteClick = useCallback((event: MouseEvent) => {
event.stopPropagation();
if (onDeleteClicked)
onDeleteClicked(entity);
setAnchorEl(null);
}, [entity, onDeleteClicked, setAnchorEl]);
const onCopyClick = useCallback((event: MouseEvent) => {
event.stopPropagation();
if (onCopyClicked)
onCopyClicked(entity);
setAnchorEl(null);
}, [entity, onCopyClicked, setAnchorEl]);
return (
<div className={classes.cellButtonsWrap}>
{(editEnabled || deleteEnabled || selectionEnabled) &&
<div className={classes.cellButtons}
>
{editEnabled &&
<Tooltip title={`Edit ${entity.id}`}>
<IconButton
onClick={(event: MouseEvent) => {
event.stopPropagation();
if (onEditClicked)
onEditClicked(entity);
}}
size="large">
<KeyboardTab/>
</IconButton>
</Tooltip>
}
{selectionEnabled &&
<Tooltip title={`Select ${entity.id}`}>
<Checkbox
checked={isSelected}
onChange={onCheckboxChange}
/>
</Tooltip>}
{(copyEnabled || deleteEnabled) &&
<IconButton onClick={openMenu} size="large">
<MoreVert/>
</IconButton>
}
{(copyEnabled || deleteEnabled) && <Menu
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={closeMenu}
elevation={2}
>
{deleteEnabled && <MenuItem onClick={onDeleteClick}>
<ListItemIcon>
<Delete/>
</ListItemIcon>
<ListItemText primary={"Delete"}/>
</MenuItem>}
{copyEnabled && <MenuItem onClick={onCopyClick}>
<ListItemIcon>
<FileCopy/>
</ListItemIcon>
<ListItemText primary="Copy"/>
</MenuItem>}
</Menu>}
</div>}
{size !== "xs" && (
<div className={classes.cellButtonsId}>
{entity
? <Typography
className={"mono"}
variant={"caption"}
color={"textSecondary"}> {entity.id} </Typography>
: <Skeleton variant="text"/>
}
</div>
)}
</div>
);
}
Example #3
| Source File: Files.tsx From NekoMaid with MIT License | 4 votes |
|
Files: React.FC = () => {
const plugin = usePlugin()
const theme = useTheme()
const his = useHistory()
const loc = useLocation()
const drawerWidth = useDrawerWidth()
const tree = useRef<HTMLHRElement | null>(null)
const editor = useRef<UnControlled | null>(null)
const prevExpanded = useRef<string[]>([])
const dirs = useRef<Record<string, boolean>>({ })
// eslint-disable-next-line func-call-spacing
const loading = useRef<Record<string, () => Promise<void>> & { '!#LOADING'?: boolean }>({ })
const [id, setId] = useState(0)
const [curPath, setCurPath] = useState('')
const [progress, setProgress] = useState(-1)
const [copyPath, setCopyPath] = useState('')
const [expanded, setExpanded] = useState<string[]>([])
const [compressFile, setCompressFile] = useState<string | null>(null)
const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null)
const isDir = !!dirs.current[curPath]
const dirPath = isDir ? curPath : curPath.substring(0, curPath.lastIndexOf('/'))
const spacing = theme.spacing(3)
const refresh = () => {
loading.current = { }
dirs.current = { }
prevExpanded.current = []
setCurPath('')
setExpanded([])
setId(id + 1)
}
useEffect(() => {
if (!tree.current) return
const resize = () => {
if (!tree.current) return
const height = tree.current.style.maxHeight = (window.innerHeight - tree.current.offsetTop - parseInt(spacing)) + 'px'
const style = (editor as any).current?.editor?.display?.wrapper?.style
if (style) style.height = height
}
resize()
window.addEventListener('resize', resize)
return window.removeEventListener('resize', resize)
}, [tree.current, spacing])
return <Box sx={{ height: '100vh', py: 3 }}>
<Toolbar />
<Container maxWidth={false}>
<Grid container spacing={3} sx={{ width: { sm: `calc(100vw - ${drawerWidth}px - ${theme.spacing(3)})` } }}>
<Grid item lg={4} md={12} xl={3} xs={12}>
<Card sx={{ minHeight: 400 }}>
<CardHeader
title={lang.files.filesList}
sx={{ position: 'relative' }}
action={<Box sx={{ position: 'absolute', right: theme.spacing(1), top: '50%', transform: 'translateY(-50%)' }}
>
<Tooltip title={lang.files.delete}><span>
<IconButton
disabled={!curPath}
size='small'
onClick={() => dialog({
okButton: { color: 'error' },
content: <>{lang.files.confirmDelete(<span className='bold'>{curPath}</span>)}
<span className='bold' style={{ color: theme.palette.error.main }}>({lang.unrecoverable})</span></>
}).then(it => it && plugin.emit('files:update', (res: boolean) => {
action(res)
if (!res) return
refresh()
if (loc.pathname.replace(/^\/NekoMaid\/files\/?/, '') === curPath) his.push('/NekoMaid/files')
}, curPath))}
><DeleteForever /></IconButton>
</span></Tooltip>
<Tooltip title={lang.files.createFile}>
<IconButton size='small' onClick={() => fileNameDialog(lang.files.createFile, curPath)
.then(it => it != null && his.push(`/NekoMaid/files/${dirPath ? dirPath + '/' : ''}${it}`))}>
<Description /></IconButton></Tooltip>
<Tooltip title={lang.files.createFolder}>
<IconButton size='small' onClick={() => fileNameDialog(lang.files.createFolder, curPath)
.then(it => it != null && plugin.emit('files:createDirectory', (res: boolean) => {
action(res)
if (res) refresh()
}, dirPath + '/' + it))}><CreateNewFolder /></IconButton></Tooltip>
<Tooltip title={lang.more}>
<IconButton size='small' onClick={e => setAnchorEl(anchorEl ? null : e.currentTarget)}><MoreHoriz /></IconButton>
</Tooltip>
</Box>} />
<Divider />
<TreeView
ref={tree}
defaultCollapseIcon={<ArrowDropDown />}
defaultExpandIcon={<ArrowRight />}
sx={{ flexGrow: 1, width: '100%', overflowY: 'auto' }}
expanded={expanded}
onNodeToggle={(_: any, it: string[]) => {
const l = loading.current
if (it.length < prevExpanded.current.length || !l[it[0]]) {
setExpanded(it)
prevExpanded.current = it
return
}
l[it[0]]().then(() => {
prevExpanded.current.unshift(it[0])
setExpanded([...prevExpanded.current])
delete l[it[0]]
})
delete l[it[0]]
}}
onNodeSelect={(_: any, it: string) => {
setCurPath(it[0] === '/' ? it.slice(1) : it)
if (dirs.current[it] || loading.current['!#LOADING']) return
if (it.startsWith('/')) it = it.slice(1)
his.push('/NekoMaid/files/' + it)
}}
>
<Item plugin={plugin} path='' loading={loading.current} dirs={dirs.current} key={id} />
</TreeView>
</Card>
</Grid>
<Grid item lg={8} md={12} xl={9} xs={12} sx={{ maxWidth: `calc(100vw - ${theme.spacing(1)})`, paddingBottom: 3 }}>
<Editor plugin={plugin} editorRef={editor} loading={loading.current} dirs={dirs.current} refresh={refresh} />
</Grid>
</Grid>
</Container>
<Menu
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={() => setAnchorEl(null)}
anchorOrigin={anchorOrigin}
transformOrigin={anchorOrigin}
>
<MenuItem onClick={() => {
refresh()
setAnchorEl(null)
}}><ListItemIcon><Refresh /></ListItemIcon>{lang.refresh}</MenuItem>
<MenuItem disabled={!curPath} onClick={() => {
setAnchorEl(null)
fileNameDialog(lang.files.rename, curPath).then(it => it != null && plugin.emit('files:rename', (res: boolean) => {
action(res)
if (res) refresh()
}, curPath, dirPath + '/' + it))
}}><ListItemIcon><DriveFileRenameOutline /></ListItemIcon>{lang.files.rename}</MenuItem>
<MenuItem disabled={!curPath} onClick={() => {
setAnchorEl(null)
setCopyPath(curPath)
}}>
<ListItemIcon><FileCopy /></ListItemIcon>{lang.files.copy}
</MenuItem>
<MenuItem disabled={!copyPath} onClick={() => {
setAnchorEl(null)
toast(lang.files.pasting)
plugin.emit('files:copy', (res: boolean) => {
action(res)
refresh()
}, copyPath, dirPath)
}}>
<ListItemIcon><ContentPaste /></ListItemIcon>{lang.files.paste}
</MenuItem>
<MenuItem disabled={progress !== -1} component='label' htmlFor='NekoMaid-files-upload-input' onClick={() => setAnchorEl(null)}>
<ListItemIcon><Upload /></ListItemIcon>{progress === -1 ? lang.files.upload : `${lang.files.uploading} (${progress.toFixed(2)}%)`}
</MenuItem>
<MenuItem disabled={isDir} onClick={() => {
setAnchorEl(null)
toast(lang.files.downloading)
plugin.emit('files:download', (res: ArrayBuffer | null) => {
if (res) window.open(address! + 'Download/' + res, '_blank')
else failed()
}, curPath)
}}><ListItemIcon><Download /></ListItemIcon>{lang.files.download}</MenuItem>
<MenuItem onClick={() => {
setAnchorEl(null)
setCompressFile(curPath)
}}><ListItemIcon><Inbox /></ListItemIcon>{lang.files.compress}</MenuItem>
<MenuItem onClick={() => {
setAnchorEl(null)
toast(lang.files.uncompressing)
plugin.emit('files:compress', (res: boolean) => {
action(res)
refresh()
}, curPath)
}}><ListItemIcon><Outbox /></ListItemIcon>{lang.files.decompress}</MenuItem>
</Menu>
<Input id='NekoMaid-files-upload-input' type='file' sx={{ display: 'none' }} onChange={e => {
const elm = e.target as HTMLInputElement
const file = elm.files?.[0]
elm.value = ''
if (!file) return
const size = file.size
if (size > 128 * 1024 * 1024) return failed(lang.files.uploadTooBig)
toast(lang.files.uploading)
const name = dirPath + '/' + file.name
if (dirs.current[name] != null) return failed(lang.files.exists)
plugin.emit('files:upload', (res: string | null) => {
if (!res) return failed(lang.files.exists)
const formdata = new FormData()
formdata.append('file', file)
const xhr = new XMLHttpRequest()
setProgress(0)
xhr.open('put', address! + 'Upload/' + res)
xhr.onreadystatechange = () => {
if (xhr.readyState !== 4) return
setProgress(-1)
action(xhr.status === 200)
refresh()
}
xhr.upload.onprogress = e => e.lengthComputable && setProgress(e.loaded / e.total * 100)
xhr.send(formdata)
}, name[0] === '/' ? name.slice(1) : name)
}} />
<CompressDialog file={compressFile} path={dirPath} dirs={dirs.current} onClose={() => setCompressFile(null)} refresh={refresh} plugin={plugin} />
</Box>
}
