@canmingir/link 1.1.7 → 1.2.0

package/minimal/src/components/file-thumbnail/file-thumbnail.jsx

@@ -1,78 +0,0 @@
-import PropTypes from 'prop-types';
-
-import Box from '@mui/material/Box';
-import Stack from '@mui/material/Stack';
-import Tooltip from '@mui/material/Tooltip';
-
-import DownloadButton from './download-button';
-import { fileData, fileThumb, fileFormat } from './utils';
-
-// ----------------------------------------------------------------------
-
-export default function FileThumbnail({ file, tooltip, imageView, onDownload, sx, imgSx }) {
-  const { name = '', path = '', preview = '' } = fileData(file);
-
-  const format = fileFormat(path || preview);
-
-  const renderContent =
-    format === 'image' && imageView ? (
-      <Box
-        component="img"
-        src={preview}
-        sx={{
-          width: 1,
-          height: 1,
-          flexShrink: 0,
-          objectFit: 'cover',
-          ...imgSx,
-        }}
-      />
-    ) : (
-      <Box
-        component="img"
-        src={fileThumb(format)}
-        sx={{
-          width: 32,
-          height: 32,
-          flexShrink: 0,
-          ...sx,
-        }}
-      />
-    );
-
-  if (tooltip) {
-    return (
-      <Tooltip title={name}>
-        <Stack
-          flexShrink={0}
-          component="span"
-          alignItems="center"
-          justifyContent="center"
-          sx={{
-            width: 'fit-content',
-            height: 'inherit',
-          }}
-        >
-          {renderContent}
-          {onDownload && <DownloadButton onDownload={onDownload} />}
-        </Stack>
-      </Tooltip>
-    );
-  }
-
-  return (
-    <>
-      {renderContent}
-      {onDownload && <DownloadButton onDownload={onDownload} />}
-    </>
-  );
-}
-
-FileThumbnail.propTypes = {
-  file: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  imageView: PropTypes.bool,
-  imgSx: PropTypes.object,
-  onDownload: PropTypes.func,
-  sx: PropTypes.object,
-  tooltip: PropTypes.bool,
-};

package/minimal/src/components/file-thumbnail/index.js

@@ -1,5 +0,0 @@
-export * from './utils';
-
-export { default } from './file-thumbnail';
-
-export { default as DownloadButton } from './download-button';

package/minimal/src/components/file-thumbnail/utils.js

@@ -1,148 +0,0 @@
-// ----------------------------------------------------------------------
-
-// Define more types here
-const FORMAT_PDF = ['pdf'];
-const FORMAT_TEXT = ['txt'];
-const FORMAT_PHOTOSHOP = ['psd'];
-const FORMAT_WORD = ['doc', 'docx'];
-const FORMAT_EXCEL = ['xls', 'xlsx'];
-const FORMAT_ZIP = ['zip', 'rar', 'iso'];
-const FORMAT_ILLUSTRATOR = ['ai', 'esp'];
-const FORMAT_POWERPOINT = ['ppt', 'pptx'];
-const FORMAT_AUDIO = ['wav', 'aif', 'mp3', 'aac'];
-const FORMAT_IMG = ['jpg', 'jpeg', 'gif', 'bmp', 'png', 'svg'];
-const FORMAT_VIDEO = ['m4v', 'avi', 'mpg', 'mp4', 'webm'];
-
-const iconUrl = (icon) => `/assets/icons/files/${icon}.svg`;
-
-// ----------------------------------------------------------------------
-
-export function fileFormat(fileUrl) {
-  let format;
-
-  switch (fileUrl?.includes(fileTypeByUrl(fileUrl))) {
-    case FORMAT_TEXT.includes(fileTypeByUrl(fileUrl)):
-      format = 'txt';
-      break;
-    case FORMAT_ZIP.includes(fileTypeByUrl(fileUrl)):
-      format = 'zip';
-      break;
-    case FORMAT_AUDIO.includes(fileTypeByUrl(fileUrl)):
-      format = 'audio';
-      break;
-    case FORMAT_IMG.includes(fileTypeByUrl(fileUrl)):
-      format = 'image';
-      break;
-    case FORMAT_VIDEO.includes(fileTypeByUrl(fileUrl)):
-      format = 'video';
-      break;
-    case FORMAT_WORD.includes(fileTypeByUrl(fileUrl)):
-      format = 'word';
-      break;
-    case FORMAT_EXCEL.includes(fileTypeByUrl(fileUrl)):
-      format = 'excel';
-      break;
-    case FORMAT_POWERPOINT.includes(fileTypeByUrl(fileUrl)):
-      format = 'powerpoint';
-      break;
-    case FORMAT_PDF.includes(fileTypeByUrl(fileUrl)):
-      format = 'pdf';
-      break;
-    case FORMAT_PHOTOSHOP.includes(fileTypeByUrl(fileUrl)):
-      format = 'photoshop';
-      break;
-    case FORMAT_ILLUSTRATOR.includes(fileTypeByUrl(fileUrl)):
-      format = 'illustrator';
-      break;
-    default:
-      format = fileTypeByUrl(fileUrl);
-  }
-
-  return format;
-}
-
-// ----------------------------------------------------------------------
-
-export function fileThumb(fileUrl) {
-  let thumb;
-
-  switch (fileFormat(fileUrl)) {
-    case 'folder':
-      thumb = iconUrl('ic_folder');
-      break;
-    case 'txt':
-      thumb = iconUrl('ic_txt');
-      break;
-    case 'zip':
-      thumb = iconUrl('ic_zip');
-      break;
-    case 'audio':
-      thumb = iconUrl('ic_audio');
-      break;
-    case 'video':
-      thumb = iconUrl('ic_video');
-      break;
-    case 'word':
-      thumb = iconUrl('ic_word');
-      break;
-    case 'excel':
-      thumb = iconUrl('ic_excel');
-      break;
-    case 'powerpoint':
-      thumb = iconUrl('ic_power_point');
-      break;
-    case 'pdf':
-      thumb = iconUrl('ic_pdf');
-      break;
-    case 'photoshop':
-      thumb = iconUrl('ic_pts');
-      break;
-    case 'illustrator':
-      thumb = iconUrl('ic_ai');
-      break;
-    case 'image':
-      thumb = iconUrl('ic_img');
-      break;
-    default:
-      thumb = iconUrl('ic_file');
-  }
-  return thumb;
-}
-
-// ----------------------------------------------------------------------
-
-export function fileTypeByUrl(fileUrl = '') {
-  return (fileUrl && fileUrl.split('.').pop()) || '';
-}
-
-// ----------------------------------------------------------------------
-
-export function fileNameByUrl(fileUrl) {
-  return fileUrl.split('/').pop();
-}
-
-// ----------------------------------------------------------------------
-
-export function fileData(file) {
-  // Url
-  if (typeof file === 'string') {
-    return {
-      key: file,
-      preview: file,
-      name: fileNameByUrl(file),
-      type: fileTypeByUrl(file),
-    };
-  }
-
-  // File
-  return {
-    key: file.preview,
-    name: file.name,
-    size: file.size,
-    path: file.path,
-    type: file.type,
-    preview: file.preview,
-    lastModified: file.lastModified,
-    lastModifiedDate: file.lastModifiedDate,
-  };
-}

package/minimal/src/components/hook-form/form-provider.jsx

@@ -1,18 +0,0 @@
-import PropTypes from 'prop-types';
-import { FormProvider as Form } from 'react-hook-form';
-
-// ----------------------------------------------------------------------
-
-export default function FormProvider({ children, onSubmit, methods }) {
-  return (
-    <Form {...methods}>
-      <form onSubmit={onSubmit}>{children}</form>
-    </Form>
-  );
-}
-
-FormProvider.propTypes = {
-  children: PropTypes.node,
-  methods: PropTypes.object,
-  onSubmit: PropTypes.func,
-};

package/minimal/src/components/hook-form/index.js

@@ -1,13 +0,0 @@
-export * from './rhf-upload';
-export * from './rhf-select';
-export * from './rhf-checkbox';
-
-export { default } from './form-provider';
-export { default as RHFCode } from './rhf-code';
-export { default as RHFSwitch } from './rhf-switch';
-export { default as RHFEditor } from './rhf-editor';
-export { default as RHFSlider } from './rhf-slider';
-export { default as RHFTextField } from './rhf-text-field';
-export { default as RHFRadioGroup } from './rhf-radio-group';
-
-export { default as RHFAutocomplete } from './rhf-autocomplete';

package/minimal/src/components/hook-form/rhf-autocomplete.jsx

@@ -1,41 +0,0 @@
-import PropTypes from 'prop-types';
-import { Controller, useFormContext } from 'react-hook-form';
-
-import TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
-
-// ----------------------------------------------------------------------
-
-export default function RHFAutocomplete({ name, label, placeholder, helperText, ...other }) {
-  const { control, setValue } = useFormContext();
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => (
-        <Autocomplete
-          {...field}
-          onChange={(event, newValue) => setValue(name, newValue, { shouldValidate: true })}
-          renderInput={(params) => (
-            <TextField
-              label={label}
-              placeholder={placeholder}
-              error={!!error}
-              helperText={error ? error?.message : helperText}
-              {...params}
-            />
-          )}
-          {...other}
-        />
-      )}
-    />
-  );
-}
-
-RHFAutocomplete.propTypes = {
-  helperText: PropTypes.string,
-  label: PropTypes.string,
-  name: PropTypes.string,
-  placeholder: PropTypes.string,
-};

package/minimal/src/components/hook-form/rhf-checkbox.jsx

@@ -1,113 +0,0 @@
-import PropTypes from 'prop-types';
-import { Controller, useFormContext } from 'react-hook-form';
-
-import Checkbox from '@mui/material/Checkbox';
-import FormGroup from '@mui/material/FormGroup';
-import FormLabel from '@mui/material/FormLabel';
-import FormControl from '@mui/material/FormControl';
-import FormHelperText from '@mui/material/FormHelperText';
-import FormControlLabel, { formControlLabelClasses } from '@mui/material/FormControlLabel';
-
-// ----------------------------------------------------------------------
-
-export function RHFCheckbox({ name, helperText, ...other }) {
-  const { control } = useFormContext();
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => (
-        <div>
-          <FormControlLabel control={<Checkbox {...field} checked={field.value} />} {...other} />
-
-          {(!!error || helperText) && (
-            <FormHelperText error={!!error}>{error ? error?.message : helperText}</FormHelperText>
-          )}
-        </div>
-      )}
-    />
-  );
-}
-
-RHFCheckbox.propTypes = {
-  helperText: PropTypes.string,
-  name: PropTypes.string,
-};
-
-// ----------------------------------------------------------------------
-
-export function RHFMultiCheckbox({ row, name, label, options, spacing, helperText, sx, ...other }) {
-  const { control } = useFormContext();
-
-  const getSelected = (selectedItems, item) =>
-    selectedItems.includes(item)
-      ? selectedItems.filter((value) => value !== item)
-      : [...selectedItems, item];
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => (
-        <FormControl component="fieldset">
-          {label && (
-            <FormLabel component="legend" sx={{ typography: 'body2' }}>
-              {label}
-            </FormLabel>
-          )}
-
-          <FormGroup
-            sx={{
-              ...(row && {
-                flexDirection: 'row',
-              }),
-              [`& .${formControlLabelClasses.root}`]: {
-                '&:not(:last-of-type)': {
-                  mb: spacing || 0,
-                },
-                ...(row && {
-                  mr: 0,
-                  '&:not(:last-of-type)': {
-                    mr: spacing || 2,
-                  },
-                }),
-              },
-              ...sx,
-            }}
-          >
-            {options.map((option) => (
-              <FormControlLabel
-                key={option.value}
-                control={
-                  <Checkbox
-                    checked={field.value.includes(option.value)}
-                    onChange={() => field.onChange(getSelected(field.value, option.value))}
-                  />
-                }
-                label={option.label}
-                {...other}
-              />
-            ))}
-          </FormGroup>
-
-          {(!!error || helperText) && (
-            <FormHelperText error={!!error} sx={{ mx: 0 }}>
-              {error ? error?.message : helperText}
-            </FormHelperText>
-          )}
-        </FormControl>
-      )}
-    />
-  );
-}
-
-RHFMultiCheckbox.propTypes = {
-  helperText: PropTypes.string,
-  label: PropTypes.string,
-  name: PropTypes.string,
-  options: PropTypes.array,
-  row: PropTypes.bool,
-  spacing: PropTypes.number,
-  sx: PropTypes.object,
-};

package/minimal/src/components/hook-form/rhf-code.jsx

@@ -1,43 +0,0 @@
-import PropTypes from 'prop-types';
-import { MuiOtpInput } from 'mui-one-time-password-input';
-import { Controller, useFormContext } from 'react-hook-form';
-
-import FormHelperText from '@mui/material/FormHelperText';
-
-// ----------------------------------------------------------------------
-
-export default function RHFCode({ name, ...other }) {
-  const { control } = useFormContext();
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => (
-        <div>
-          <MuiOtpInput
-            {...field}
-            autoFocus
-            gap={1.5}
-            length={6}
-            TextFieldsProps={{
-              error: !!error,
-              placeholder: '-',
-            }}
-            {...other}
-          />
-
-          {error && (
-            <FormHelperText sx={{ px: 2 }} error>
-              {error.message}
-            </FormHelperText>
-          )}
-        </div>
-      )}
-    />
-  );
-}
-
-RHFCode.propTypes = {
-  name: PropTypes.string,
-};

package/minimal/src/components/hook-form/rhf-editor.jsx

@@ -1,56 +0,0 @@
-import { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { Controller, useFormContext } from 'react-hook-form';
-
-import FormHelperText from '@mui/material/FormHelperText';
-
-import Editor from '../editor';
-
-// ----------------------------------------------------------------------
-
-export default function RHFEditor({ name, helperText, ...other }) {
-  const {
-    control,
-    watch,
-    setValue,
-    formState: { isSubmitSuccessful },
-  } = useFormContext();
-
-  const values = watch();
-
-  useEffect(() => {
-    if (values[name] === '<p><br></p>') {
-      setValue(name, '', {
-        shouldValidate: !isSubmitSuccessful,
-      });
-    }
-  }, [isSubmitSuccessful, name, setValue, values]);
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => (
-        <Editor
-          id={name}
-          value={field.value}
-          onChange={field.onChange}
-          error={!!error}
-          helperText={
-            (!!error || helperText) && (
-              <FormHelperText error={!!error} sx={{ px: 2 }}>
-                {error ? error?.message : helperText}
-              </FormHelperText>
-            )
-          }
-          {...other}
-        />
-      )}
-    />
-  );
-}
-
-RHFEditor.propTypes = {
-  helperText: PropTypes.string,
-  name: PropTypes.string,
-};

package/minimal/src/components/hook-form/rhf-radio-group.jsx

@@ -1,78 +0,0 @@
-import PropTypes from 'prop-types';
-import { Controller, useFormContext } from 'react-hook-form';
-
-import Radio from '@mui/material/Radio';
-import FormLabel from '@mui/material/FormLabel';
-import RadioGroup from '@mui/material/RadioGroup';
-import FormControl from '@mui/material/FormControl';
-import FormHelperText from '@mui/material/FormHelperText';
-import FormControlLabel from '@mui/material/FormControlLabel';
-
-// ----------------------------------------------------------------------
-
-export default function RHFRadioGroup({
-  row,
-  name,
-  label,
-  options,
-  spacing,
-  helperText,
-  ...other
-}) {
-  const { control } = useFormContext();
-
-  const labelledby = label ? `${name}-${label}` : '';
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => (
-        <FormControl component="fieldset">
-          {label && (
-            <FormLabel component="legend" id={labelledby} sx={{ typography: 'body2' }}>
-              {label}
-            </FormLabel>
-          )}
-
-          <RadioGroup {...field} aria-labelledby={labelledby} row={row} {...other}>
-            {options.map((option) => (
-              <FormControlLabel
-                key={option.value}
-                value={option.value}
-                control={<Radio />}
-                label={option.label}
-                sx={{
-                  '&:not(:last-of-type)': {
-                    mb: spacing || 0,
-                  },
-                  ...(row && {
-                    mr: 0,
-                    '&:not(:last-of-type)': {
-                      mr: spacing || 2,
-                    },
-                  }),
-                }}
-              />
-            ))}
-          </RadioGroup>
-
-          {(!!error || helperText) && (
-            <FormHelperText error={!!error} sx={{ mx: 0 }}>
-              {error ? error?.message : helperText}
-            </FormHelperText>
-          )}
-        </FormControl>
-      )}
-    />
-  );
-}
-
-RHFRadioGroup.propTypes = {
-  helperText: PropTypes.string,
-  label: PropTypes.string,
-  name: PropTypes.string,
-  options: PropTypes.array,
-  row: PropTypes.bool,
-  spacing: PropTypes.number,
-};