{"version":3,"file":"DragDropFileUpload.mjs","names":["React","useMemo","useDropzone","useTranslation","FluentButton","FluentIcon","formatBytes","PageIcon","Typography","lighten","makeStyles","PropTypes","useStyles","theme","btnWrapper","display","justifyContent","gap","spacing","marginTop","marginBottom","dndWrapper","backgroundColor","palette","secondary","light","height","minHeight","props","maxHeight","alignItems","textAlign","border","overflow","fileNameWrapper","dndContent","flexGrow","textWrapper","marginRight","marginLeft","DragDropFileUpload","title","handleUploadFile","hideSelectFileButton","hideFilePreview","multiple","maxFileSize","otherDropZoneProps","t","classes","open","acceptedFiles","getRootProps","getInputProps","fileRejections","noClick","noKeyboard","onDrop","maxSize","files","map","file","path","size","rejectedFilesExceedingMaxFileSize","filter","errors","some","error","code","name","defaultValue","fileName","fileSize","className","length","propTypes","string","func","bool","number"],"sources":["../../src/uploader/DragDropFileUpload.jsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useDropzone } from 'react-dropzone';\nimport { useTranslation } from 'react-i18next';\nimport { FluentButton } from '../UI/inputs/buttons/FluentButton';\nimport { FluentIcon } from '../utilities/iconLibrary/FluentIcon';\nimport { formatBytes } from '../utilities/uploader/formatBytes';\nimport { PageIcon } from '@fluentui/react-icons';\nimport { Typography, lighten, makeStyles } from '@material-ui/core';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  btnWrapper: {\n    display: 'flex',\n    justifyContent: 'center',\n    gap: theme.spacing(2),\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1)\n  },\n  dndWrapper: {\n    backgroundColor: lighten(theme.palette.secondary.light, 0.8),\n    height: '100%',\n    minHeight: (props) => props?.minHeight,\n    maxHeight: (props) => props?.maxHeight,\n    display: 'flex',\n    alignItems: 'center',\n    textAlign: 'center',\n    border: `dashed 2px ${lighten(theme.palette.secondary.light, 0.4)}`,\n    overflow: 'hidden'\n  },\n  fileNameWrapper: {\n    display: 'flex',\n    gap: theme.spacing(1),\n    alignItems: 'center',\n    textAlign: 'center',\n    justifyContent: 'center'\n  },\n  dndContent: {\n    flexGrow: 1,\n    textAlign: 'center'\n  },\n  textWrapper: {\n    overflow: 'hidden',\n    marginRight: theme.spacing(2),\n    marginLeft: theme.spacing(2)\n  }\n}));\n\nexport const DragDropFileUpload = (props) => {\n  const {\n    title,\n    handleUploadFile,\n    hideSelectFileButton = false,\n    hideFilePreview = false,\n    minHeight,\n    maxHeight,\n    multiple = false,\n    maxFileSize,\n    ...otherDropZoneProps\n  } = props;\n  const { t } = useTranslation();\n  const classes = useStyles({ minHeight, maxHeight });\n\n  const { open, acceptedFiles, getRootProps, getInputProps, fileRejections } = useDropzone({\n    noClick: true,\n    noKeyboard: true,\n    multiple: multiple,\n    onDrop: handleUploadFile,\n    maxSize: maxFileSize,\n    ...otherDropZoneProps\n  });\n\n  const files = useMemo(() => {\n    return acceptedFiles.map((file) => (\n      <div className={classes.fileNameWrapper}>\n        <FluentIcon size='small' component={PageIcon} />\n        <Typography>{` ${file?.path} (${formatBytes(file?.size)})`}</Typography>\n      </div>\n    ));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [acceptedFiles]);\n\n  const rejectedFilesExceedingMaxFileSize = useMemo(() => {\n    return fileRejections?.filter(({ errors }) =>\n      errors.some((error) => error.code === 'file-too-large')\n    )\n    .map(({ file }) => (\n      <div className={classes.fileNameWrapper} key={file.path || file.name}>\n        <FluentIcon size='small' component={PageIcon} />\n        <Typography color='error'>\n          {t('uploader.dragDrop.fileTooLarge', {\n            defaultValue:\n              '{{fileName}} ({{fileSize}}): File size exceeds {{maxSize}} Bytes',\n            fileName: file?.path || file?.name,\n            fileSize: formatBytes(file?.size),\n            maxSize: maxFileSize\n          })}\n        </Typography>\n      </div>\n    ));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [fileRejections, t]);\n\n  return (\n    <div>\n      <div\n        {...getRootProps({ className: 'dropzone' })}\n        className={classes.dndWrapper}\n      >\n        <div className={classes.dndContent}>\n          <input {...getInputProps()} />\n          <Typography className={classes.textWrapper}>\n            {title\n              ? title\n              : multiple\n              ? t('uploader.dragDrop.promptMultiple', {\n                  defaultValue: 'Drag and drop files here or select files'\n                })\n              : t('uploader.dragDrop.promptSingle', {\n                  defaultValue: 'Drag and drop a file here or select a file'\n                })}\n          </Typography>\n          {!hideSelectFileButton && (\n            <div className={classes.btnWrapper}>\n              <FluentButton\n                onClick={open}\n                color='secondary'\n                variant='contained'\n              >\n                <Typography noWrap>\n                  {multiple\n                    ? t('uploader.dragDrop.selectFiles', {\n                        defaultValue: 'Select Files'\n                      })\n                    : t('uploader.dragDrop.selectFile', {\n                        defaultValue: 'Select a File'\n                      })}\n                </Typography>\n              </FluentButton>\n            </div>\n          )}\n          {!hideFilePreview && <div>{files}</div>}\n          {maxFileSize && rejectedFilesExceedingMaxFileSize.length > 0 && (\n            <div>\n              {rejectedFilesExceedingMaxFileSize}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nDragDropFileUpload.propTypes = {\n  /**\n   * Optional, title\n   */\n  title: PropTypes.string,\n\n  /**\n   * Optional, event handler that accept a param (an array of files) when drop or select files.\n   * can use other props to handle this event such as onDropAccepted, onDropRejected.\n   * https://react-dropzone.js.org/#section-components\n   */\n  handleUploadFile: PropTypes.func,\n\n  /**\n   * Optional, hide or show the select file button (default is false)\n   */\n  hideSelectFileButton: PropTypes.bool,\n\n  /**\n   * Optional, hide or show the file sneak preview (default is false)\n   */\n  hideFilePreview: PropTypes.bool,\n\n  /**\n   * Optional, minimum height\n   */\n  minHeight: PropTypes.string | PropTypes.number,\n\n  /**\n   * Optional, maximum height\n   */\n  maxHeight: PropTypes.string | PropTypes.number,\n\n  /**\n   * Optional, allow to add multiple files at a time (default is false)\n   */\n  multiple: PropTypes.bool\n};\n"],"mappings":"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"}