@canmingir/link 1.1.0

package/minimal/src/sections/file-manager/file-manager-action-selected.jsx

@@ -0,0 +1,74 @@
+import PropTypes from 'prop-types';
+
+import Box from '@mui/material/Box';
+import Portal from '@mui/material/Portal';
+import Checkbox from '@mui/material/Checkbox';
+import Typography from '@mui/material/Typography';
+
+import Iconify from 'src/components/iconify';
+
+// ----------------------------------------------------------------------
+
+export default function FileManagerActionSelected({
+  action,
+  selected,
+  rowCount,
+  numSelected,
+  onSelectAllItems,
+  sx,
+  ...other
+}) {
+  return (
+    <Portal>
+      <Box
+        sx={{
+          right: 0,
+          zIndex: 9,
+          bottom: 0,
+          display: 'flex',
+          borderRadius: 1.5,
+          position: 'fixed',
+          alignItems: 'center',
+          bgcolor: 'text.primary',
+          p: (theme) => theme.spacing(1.5, 2, 1.5, 1),
+          boxShadow: (theme) => theme.customShadows.z20,
+          m: { xs: 2, md: 3 },
+          ...sx,
+        }}
+        {...other}
+      >
+        <Checkbox
+          indeterminate={!!numSelected && numSelected < rowCount}
+          checked={!!rowCount && numSelected === rowCount}
+          onChange={(event) => onSelectAllItems(event.target.checked)}
+          icon={<Iconify icon="eva:radio-button-off-fill" />}
+          checkedIcon={<Iconify icon="eva:checkmark-circle-2-fill" />}
+          indeterminateIcon={<Iconify icon="eva:minus-circle-fill" />}
+        />
+
+        {selected && (
+          <Typography
+            variant="subtitle2"
+            sx={{
+              mr: 2,
+              color: (theme) => (theme.palette.mode === 'light' ? 'common.white' : 'grey.800'),
+            }}
+          >
+            {selected.length} Items selected
+          </Typography>
+        )}
+
+        {action && action}
+      </Box>
+    </Portal>
+  );
+}
+
+FileManagerActionSelected.propTypes = {
+  action: PropTypes.node,
+  numSelected: PropTypes.number,
+  onSelectAllItems: PropTypes.func,
+  rowCount: PropTypes.number,
+  selected: PropTypes.array,
+  sx: PropTypes.object,
+};

package/minimal/src/sections/file-manager/file-manager-file-details.jsx

@@ -0,0 +1,281 @@
+import PropTypes from 'prop-types';
+import { useState, useCallback } from 'react';
+
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import Drawer from '@mui/material/Drawer';
+import Divider from '@mui/material/Divider';
+import Checkbox from '@mui/material/Checkbox';
+import TextField from '@mui/material/TextField';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import Autocomplete from '@mui/material/Autocomplete';
+
+import { useBoolean } from 'src/hooks/use-boolean';
+
+import { fData } from 'src/utils/format-number';
+import { fDateTime } from 'src/utils/format-time';
+
+import Iconify from 'src/components/iconify';
+import Scrollbar from 'src/components/scrollbar';
+import FileThumbnail, { fileFormat } from 'src/components/file-thumbnail';
+
+import FileManagerShareDialog from './file-manager-share-dialog';
+import FileManagerInvitedItem from './file-manager-invited-item';
+
+// ----------------------------------------------------------------------
+
+export default function FileManagerFileDetails({
+  item,
+  open,
+  favorited,
+  //
+  onFavorite,
+  onCopyLink,
+  onClose,
+  onDelete,
+  ...other
+}) {
+  const { name, size, url, type, shared, modifiedAt } = item;
+
+  const hasShared = shared && !!shared.length;
+
+  const toggleTags = useBoolean(true);
+
+  const share = useBoolean();
+
+  const properties = useBoolean(true);
+
+  const [inviteEmail, setInviteEmail] = useState('');
+
+  const [tags, setTags] = useState(item.tags.slice(0, 3));
+
+  const handleChangeInvite = useCallback((event) => {
+    setInviteEmail(event.target.value);
+  }, []);
+
+  const handleChangeTags = useCallback((newValue) => {
+    setTags(newValue);
+  }, []);
+
+  const renderTags = (
+    <Stack spacing={1.5}>
+      <Stack
+        direction="row"
+        alignItems="center"
+        justifyContent="space-between"
+        sx={{ typography: 'subtitle2' }}
+      >
+        Tags
+        <IconButton size="small" onClick={toggleTags.onToggle}>
+          <Iconify
+            icon={toggleTags.value ? 'eva:arrow-ios-upward-fill' : 'eva:arrow-ios-downward-fill'}
+          />
+        </IconButton>
+      </Stack>
+
+      {toggleTags.value && (
+        <Autocomplete
+          multiple
+          freeSolo
+          options={item.tags.map((option) => option)}
+          getOptionLabel={(option) => option}
+          defaultValue={item.tags.slice(0, 3)}
+          value={tags}
+          onChange={(event, newValue) => {
+            handleChangeTags(newValue);
+          }}
+          renderOption={(props, option) => (
+            <li {...props} key={option}>
+              {option}
+            </li>
+          )}
+          renderTags={(value, getTagProps) =>
+            value.map((option, index) => (
+              <Chip
+                {...getTagProps({ index })}
+                size="small"
+                variant="soft"
+                label={option}
+                key={option}
+              />
+            ))
+          }
+          renderInput={(params) => <TextField {...params} placeholder="#Add a tags" />}
+        />
+      )}
+    </Stack>
+  );
+
+  const renderProperties = (
+    <Stack spacing={1.5}>
+      <Stack
+        direction="row"
+        alignItems="center"
+        justifyContent="space-between"
+        sx={{ typography: 'subtitle2' }}
+      >
+        Properties
+        <IconButton size="small" onClick={properties.onToggle}>
+          <Iconify
+            icon={properties.value ? 'eva:arrow-ios-upward-fill' : 'eva:arrow-ios-downward-fill'}
+          />
+        </IconButton>
+      </Stack>
+
+      {properties.value && (
+        <>
+          <Stack direction="row" sx={{ typography: 'caption', textTransform: 'capitalize' }}>
+            <Box component="span" sx={{ width: 80, color: 'text.secondary', mr: 2 }}>
+              Size
+            </Box>
+            {fData(size)}
+          </Stack>
+
+          <Stack direction="row" sx={{ typography: 'caption', textTransform: 'capitalize' }}>
+            <Box component="span" sx={{ width: 80, color: 'text.secondary', mr: 2 }}>
+              Modified
+            </Box>
+            {fDateTime(modifiedAt)}
+          </Stack>
+
+          <Stack direction="row" sx={{ typography: 'caption', textTransform: 'capitalize' }}>
+            <Box component="span" sx={{ width: 80, color: 'text.secondary', mr: 2 }}>
+              Type
+            </Box>
+            {fileFormat(type)}
+          </Stack>
+        </>
+      )}
+    </Stack>
+  );
+
+  const renderShared = (
+    <>
+      <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ p: 2.5 }}>
+        <Typography variant="subtitle2"> File Share With </Typography>
+
+        <IconButton
+          size="small"
+          color="primary"
+          onClick={share.onTrue}
+          sx={{
+            width: 24,
+            height: 24,
+            bgcolor: 'primary.main',
+            color: 'primary.contrastText',
+            '&:hover': {
+              bgcolor: 'primary.dark',
+            },
+          }}
+        >
+          <Iconify icon="mingcute:add-line" />
+        </IconButton>
+      </Stack>
+
+      {hasShared && (
+        <Box sx={{ pl: 2.5, pr: 1 }}>
+          {shared.map((person) => (
+            <FileManagerInvitedItem key={person.id} person={person} />
+          ))}
+        </Box>
+      )}
+    </>
+  );
+
+  return (
+    <>
+      <Drawer
+        open={open}
+        onClose={onClose}
+        anchor="right"
+        slotProps={{
+          backdrop: { invisible: true },
+        }}
+        PaperProps={{
+          sx: { width: 320 },
+        }}
+        {...other}
+      >
+        <Scrollbar sx={{ height: 1 }}>
+          <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ p: 2.5 }}>
+            <Typography variant="h6"> Info </Typography>
+
+            <Checkbox
+              color="warning"
+              icon={<Iconify icon="eva:star-outline" />}
+              checkedIcon={<Iconify icon="eva:star-fill" />}
+              checked={favorited}
+              onChange={onFavorite}
+            />
+          </Stack>
+
+          <Stack
+            spacing={2.5}
+            justifyContent="center"
+            sx={{
+              p: 2.5,
+              bgcolor: 'background.neutral',
+            }}
+          >
+            <FileThumbnail
+              imageView
+              file={type === 'folder' ? type : url}
+              sx={{ width: 64, height: 64 }}
+              imgSx={{ borderRadius: 1 }}
+            />
+
+            <Typography variant="subtitle1" sx={{ wordBreak: 'break-all' }}>
+              {name}
+            </Typography>
+
+            <Divider sx={{ borderStyle: 'dashed' }} />
+
+            {renderTags}
+
+            {renderProperties}
+          </Stack>
+
+          {renderShared}
+        </Scrollbar>
+
+        <Box sx={{ p: 2.5 }}>
+          <Button
+            fullWidth
+            variant="soft"
+            color="error"
+            size="large"
+            startIcon={<Iconify icon="solar:trash-bin-trash-bold" />}
+            onClick={onDelete}
+          >
+            Delete
+          </Button>
+        </Box>
+      </Drawer>
+
+      <FileManagerShareDialog
+        open={share.value}
+        shared={shared}
+        inviteEmail={inviteEmail}
+        onChangeInvite={handleChangeInvite}
+        onCopyLink={onCopyLink}
+        onClose={() => {
+          share.onFalse();
+          setInviteEmail('');
+        }}
+      />
+    </>
+  );
+}
+
+FileManagerFileDetails.propTypes = {
+  favorited: PropTypes.bool,
+  item: PropTypes.object,
+  onClose: PropTypes.func,
+  onCopyLink: PropTypes.func,
+  onDelete: PropTypes.func,
+  onFavorite: PropTypes.func,
+  open: PropTypes.bool,
+};

package/minimal/src/sections/file-manager/file-manager-file-item.jsx

@@ -0,0 +1,270 @@
+import PropTypes from 'prop-types';
+import { useState, useCallback } from 'react';
+
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import Avatar from '@mui/material/Avatar';
+import Divider from '@mui/material/Divider';
+import MenuItem from '@mui/material/MenuItem';
+import Checkbox from '@mui/material/Checkbox';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import AvatarGroup, { avatarGroupClasses } from '@mui/material/AvatarGroup';
+
+import { useBoolean } from 'src/hooks/use-boolean';
+import { useCopyToClipboard } from 'src/hooks/use-copy-to-clipboard';
+
+import { fData } from 'src/utils/format-number';
+import { fDateTime } from 'src/utils/format-time';
+
+import Iconify from 'src/components/iconify';
+import { useSnackbar } from 'src/components/snackbar';
+import TextMaxLine from 'src/components/text-max-line';
+import FileThumbnail from 'src/components/file-thumbnail';
+import { ConfirmDialog } from 'src/components/custom-dialog';
+import CustomPopover, { usePopover } from 'src/components/custom-popover';
+
+import FileManagerShareDialog from './file-manager-share-dialog';
+import FileManagerFileDetails from './file-manager-file-details';
+
+// ----------------------------------------------------------------------
+
+export default function FileManagerFileItem({ file, selected, onSelect, onDelete, sx, ...other }) {
+  const { enqueueSnackbar } = useSnackbar();
+
+  const { copy } = useCopyToClipboard();
+
+  const [inviteEmail, setInviteEmail] = useState('');
+
+  const checkbox = useBoolean();
+
+  const share = useBoolean();
+
+  const confirm = useBoolean();
+
+  const details = useBoolean();
+
+  const favorite = useBoolean(file.isFavorited);
+
+  const popover = usePopover();
+
+  const handleChangeInvite = useCallback((event) => {
+    setInviteEmail(event.target.value);
+  }, []);
+
+  const handleCopy = useCallback(() => {
+    enqueueSnackbar('Copied!');
+    copy(file.url);
+  }, [copy, enqueueSnackbar, file.url]);
+
+  const renderIcon =
+    (checkbox.value || selected) && onSelect ? (
+      <Checkbox
+        size="medium"
+        checked={selected}
+        onClick={onSelect}
+        icon={<Iconify icon="eva:radio-button-off-fill" />}
+        checkedIcon={<Iconify icon="eva:checkmark-circle-2-fill" />}
+        sx={{ p: 0.75 }}
+      />
+    ) : (
+      <FileThumbnail file={file.type} sx={{ width: 36, height: 36 }} />
+    );
+
+  const renderAction = (
+    <Stack direction="row" alignItems="center" sx={{ top: 8, right: 8, position: 'absolute' }}>
+      <Checkbox
+        color="warning"
+        icon={<Iconify icon="eva:star-outline" />}
+        checkedIcon={<Iconify icon="eva:star-fill" />}
+        checked={favorite.value}
+        onChange={favorite.onToggle}
+      />
+
+      <IconButton color={popover.open ? 'inherit' : 'default'} onClick={popover.onOpen}>
+        <Iconify icon="eva:more-vertical-fill" />
+      </IconButton>
+    </Stack>
+  );
+
+  const renderText = (
+    <>
+      <TextMaxLine
+        persistent
+        variant="subtitle2"
+        onClick={details.onTrue}
+        sx={{ width: 1, mt: 2, mb: 0.5 }}
+      >
+        {file.name}
+      </TextMaxLine>
+
+      <Stack
+        direction="row"
+        alignItems="center"
+        sx={{
+          maxWidth: 0.99,
+          whiteSpace: 'nowrap',
+          typography: 'caption',
+          color: 'text.disabled',
+        }}
+      >
+        {fData(file.size)}
+
+        <Box
+          component="span"
+          sx={{
+            mx: 0.75,
+            width: 2,
+            height: 2,
+            flexShrink: 0,
+            borderRadius: '50%',
+            bgcolor: 'currentColor',
+          }}
+        />
+        <Typography noWrap component="span" variant="caption">
+          {fDateTime(file.modifiedAt)}
+        </Typography>
+      </Stack>
+    </>
+  );
+
+  const renderAvatar = (
+    <AvatarGroup
+      max={3}
+      sx={{
+        mt: 1,
+        [`& .${avatarGroupClasses.avatar}`]: {
+          width: 24,
+          height: 24,
+          '&:first-of-type': {
+            fontSize: 12,
+          },
+        },
+      }}
+    >
+      {file.shared?.map((person) => (
+        <Avatar key={person.id} alt={person.name} src={person.avatarUrl} />
+      ))}
+    </AvatarGroup>
+  );
+
+  return (
+    <>
+      <Stack
+        component={Paper}
+        variant="outlined"
+        alignItems="flex-start"
+        sx={{
+          p: 2.5,
+          borderRadius: 2,
+          bgcolor: 'unset',
+          cursor: 'pointer',
+          position: 'relative',
+          ...((checkbox.value || selected) && {
+            bgcolor: 'background.paper',
+            boxShadow: (theme) => theme.customShadows.z20,
+          }),
+          ...sx,
+        }}
+        {...other}
+      >
+        <Box onMouseEnter={checkbox.onTrue} onMouseLeave={checkbox.onFalse}>
+          {renderIcon}
+        </Box>
+
+        {renderText}
+
+        {renderAvatar}
+
+        {renderAction}
+      </Stack>
+
+      <CustomPopover
+        open={popover.open}
+        onClose={popover.onClose}
+        arrow="right-top"
+        sx={{ width: 160 }}
+      >
+        <MenuItem
+          onClick={() => {
+            popover.onClose();
+            handleCopy();
+          }}
+        >
+          <Iconify icon="eva:link-2-fill" />
+          Copy Link
+        </MenuItem>
+
+        <MenuItem
+          onClick={() => {
+            popover.onClose();
+            share.onTrue();
+          }}
+        >
+          <Iconify icon="solar:share-bold" />
+          Share
+        </MenuItem>
+
+        <Divider sx={{ borderStyle: 'dashed' }} />
+
+        <MenuItem
+          onClick={() => {
+            confirm.onTrue();
+            popover.onClose();
+          }}
+          sx={{ color: 'error.main' }}
+        >
+          <Iconify icon="solar:trash-bin-trash-bold" />
+          Delete
+        </MenuItem>
+      </CustomPopover>
+
+      <FileManagerFileDetails
+        item={file}
+        favorited={favorite.value}
+        onFavorite={favorite.onToggle}
+        onCopyLink={handleCopy}
+        open={details.value}
+        onClose={details.onFalse}
+        onDelete={() => {
+          details.onFalse();
+          onDelete();
+        }}
+      />
+
+      <FileManagerShareDialog
+        open={share.value}
+        shared={file.shared}
+        inviteEmail={inviteEmail}
+        onChangeInvite={handleChangeInvite}
+        onCopyLink={handleCopy}
+        onClose={() => {
+          share.onFalse();
+          setInviteEmail('');
+        }}
+      />
+
+      <ConfirmDialog
+        open={confirm.value}
+        onClose={confirm.onFalse}
+        title="Delete"
+        content="Are you sure want to delete?"
+        action={
+          <Button variant="contained" color="error" onClick={onDelete}>
+            Delete
+          </Button>
+        }
+      />
+    </>
+  );
+}
+
+FileManagerFileItem.propTypes = {
+  file: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  onDelete: PropTypes.func,
+  onSelect: PropTypes.func,
+  selected: PropTypes.bool,
+  sx: PropTypes.object,
+};