@campxdev/shared 1.0.4 → 1.1.0

package/src/components/UploadFileDialog/UploadFileDialog.tsx

@@ -1,238 +1,238 @@
-import { Add, Close } from '@mui/icons-material'
-import {
-  alpha,
-  Box,
-  Button,
-  ButtonProps,
-  CircularProgress,
-  Dialog,
-  DialogContent,
-  DialogProps,
-  IconButton,
-  styled,
-  Typography,
-} from '@mui/material'
-import { DeleteButton, EditButton } from '../IconButtons'
-import { ReactNode, useEffect, useRef, useState } from 'react'
-import { toast } from 'react-toastify'
-import axios, { axiosErrorToast } from '../../config/axios'
-const animatedImage = require('./AnimatedUploadFile.gif')
-
-const StyledDialogHeader = styled(Box)(({ theme }) => ({
-  height: '64px',
-  backgroundColor: alpha(theme.palette.text.secondary, 0.1),
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  padding: '0.6rem 1rem',
-}))
-const StyledDialogContent = styled(DialogContent)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '1rem',
-  alignItems: 'center',
-  padding: '40px',
-}))
-
-const StyledImage = styled((props: any) => (
-  <Box>
-    <img {...props} />
-  </Box>
-))(({ theme }) => ({
-  height: '90px',
-  width: '90px',
-  '> img': {
-    width: '100%',
-    height: '100%',
-    objectFit: 'contain',
-  },
-}))
-
-const StyledChooseFileButton = styled(Button)(({ theme }) => ({
-  padding: '15px 20px',
-  height: '50px',
-  '> .MuiBox-root': {
-    display: 'flex',
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-}))
-
-const StyledFileLabel = styled(Box)(({ theme }) => ({
-  background: theme.palette.secondary.light,
-  borderRadius: '5px',
-  padding: '16px',
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-}))
-
-interface UploadFileDialogProps {
-  buttonProps?: ButtonProps
-  dialogProps?: DialogProps
-  buttonText: string | ReactNode
-  children?: ReactNode
-  dialogTitle: ReactNode | string
-  sampleFileUrl?: string
-  uploadUrl: string
-  successMessage?: string
-  refetchFn: () => void
-  postBody?: { [key: string]: string }
-}
-
-export default function UploadFileDialog({
-  buttonProps,
-  dialogProps,
-  buttonText,
-  dialogTitle,
-  uploadUrl,
-  sampleFileUrl,
-  successMessage,
-  refetchFn,
-  postBody = {},
-}: UploadFileDialogProps) {
-  const inputRef: any = useRef(null)
-  const [loading, setLoading] = useState(false)
-
-  const [file, setFile] = useState(null)
-  const [open, setOpen] = useState(false)
-  const onClose = () => {
-    setOpen(false)
-  }
-
-  const triggerUpload = () => {
-    if (!inputRef.current) return
-    inputRef?.current?.click()
-  }
-
-  const handleImageChange = (e) => {
-    setFile(e.target.files[0])
-  }
-
-  const handleOnUpload = () => {
-    if (!file) return ``
-    const formData = new FormData()
-    formData.append('file', file)
-    if (postBody) {
-      Object.keys(postBody).forEach((key) => {
-        formData.append(key, postBody[key])
-      })
-    }
-    setLoading(true)
-
-    axios
-      .post(uploadUrl, formData)
-      .then((res) => {
-        setLoading(false)
-        refetchFn()
-        setOpen(false)
-        toast.success(successMessage ?? 'Successful')
-        setFile(null)
-      })
-      .catch((err) => {
-        console.log(err)
-        setLoading(false)
-        axiosErrorToast(err)
-      })
-  }
-
-  useEffect(() => {
-    return () => {
-      setFile(null)
-      inputRef.current = null
-    }
-  }, [])
-
-  return (
-    <>
-      <Button
-        onClick={() => {
-          setOpen(true)
-        }}
-        variant="outlined"
-        {...buttonProps}
-      >
-        {buttonText}
-      </Button>
-      <Dialog
-        open={open}
-        onClose={onClose}
-        maxWidth="sm"
-        fullWidth
-        {...dialogProps}
-      >
-        <StyledDialogHeader>
-          <Typography fontWeight={600}>{dialogTitle}</Typography>
-          <IconButton onClick={onClose}>
-            <Close />
-          </IconButton>
-        </StyledDialogHeader>
-        <StyledDialogContent>
-          <StyledImage src={animatedImage} alt="Upload Image" />
-          <Typography variant="h6">{dialogTitle}</Typography>
-          <Typography textAlign={'center'}>
-            Before importing, download Sample CSV File or Sample XLSX file and
-            compare it with your sheet or edit the sample sheet
-          </Typography>
-          <Box sx={{ minWidth: '400px', marginBottom: '20px' }}>
-            {!file ? (
-              <>
-                <input
-                  onChange={handleImageChange}
-                  hidden
-                  type="file"
-                  ref={inputRef}
-                />
-                <StyledChooseFileButton
-                  variant="outlined"
-                  fullWidth
-                  onClick={triggerUpload}
-                >
-                  <Box>
-                    <Typography variant="h6" color="primary">
-                      Choose File
-                    </Typography>
-                    <Add />
-                  </Box>
-                </StyledChooseFileButton>
-              </>
-            ) : (
-              <StyledFileLabel>
-                <Typography variant="body2">{file?.name}</Typography>
-                <Box display={'flex'} gap="16px">
-                  <EditButton
-                    onClick={() => {
-                      triggerUpload()
-                    }}
-                  />
-                  <DeleteButton onClick={() => setFile(null)} />
-                </Box>
-              </StyledFileLabel>
-            )}
-          </Box>
-
-          <Button
-            fullWidth
-            sx={{ maxWidth: '255px' }}
-            onClick={handleOnUpload}
-            endIcon={
-              loading ? (
-                <CircularProgress size={20} sx={{ color: 'white' }} />
-              ) : null
-            }
-          >
-            Upload File
-          </Button>
-          {sampleFileUrl && (
-            <a href={sampleFileUrl} target="_blank" rel="noreferrer">
-              <Button fullWidth sx={{ maxWidth: '255px' }} variant="outlined">
-                Download Sample File
-              </Button>
-            </a>
-          )}
-        </StyledDialogContent>
-      </Dialog>
-    </>
-  )
-}
+import { Add, Close } from '@mui/icons-material'
+import {
+  alpha,
+  Box,
+  Button,
+  ButtonProps,
+  CircularProgress,
+  Dialog,
+  DialogContent,
+  DialogProps,
+  IconButton,
+  styled,
+  Typography,
+} from '@mui/material'
+import { DeleteButton, EditButton } from '../IconButtons'
+import { ReactNode, useEffect, useRef, useState } from 'react'
+import { toast } from 'react-toastify'
+import axios, { axiosErrorToast } from '../../config/axios'
+const animatedImage = require('./AnimatedUploadFile.gif')
+
+const StyledDialogHeader = styled(Box)(({ theme }) => ({
+  height: '64px',
+  backgroundColor: alpha(theme.palette.text.secondary, 0.1),
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '0.6rem 1rem',
+}))
+const StyledDialogContent = styled(DialogContent)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '1rem',
+  alignItems: 'center',
+  padding: '40px',
+}))
+
+const StyledImage = styled((props: any) => (
+  <Box>
+    <img {...props} />
+  </Box>
+))(({ theme }) => ({
+  height: '90px',
+  width: '90px',
+  '> img': {
+    width: '100%',
+    height: '100%',
+    objectFit: 'contain',
+  },
+}))
+
+const StyledChooseFileButton = styled(Button)(({ theme }) => ({
+  padding: '15px 20px',
+  height: '50px',
+  '> .MuiBox-root': {
+    display: 'flex',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+}))
+
+const StyledFileLabel = styled(Box)(({ theme }) => ({
+  background: theme.palette.secondary.light,
+  borderRadius: '5px',
+  padding: '16px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+}))
+
+interface UploadFileDialogProps {
+  buttonProps?: ButtonProps
+  dialogProps?: DialogProps
+  buttonText: string | ReactNode
+  children?: ReactNode
+  dialogTitle: ReactNode | string
+  sampleFileUrl?: string
+  uploadUrl: string
+  successMessage?: string
+  refetchFn: () => void
+  postBody?: { [key: string]: string }
+}
+
+export default function UploadFileDialog({
+  buttonProps,
+  dialogProps,
+  buttonText,
+  dialogTitle,
+  uploadUrl,
+  sampleFileUrl,
+  successMessage,
+  refetchFn,
+  postBody = {},
+}: UploadFileDialogProps) {
+  const inputRef: any = useRef(null)
+  const [loading, setLoading] = useState(false)
+
+  const [file, setFile] = useState(null)
+  const [open, setOpen] = useState(false)
+  const onClose = () => {
+    setOpen(false)
+  }
+
+  const triggerUpload = () => {
+    if (!inputRef.current) return
+    inputRef?.current?.click()
+  }
+
+  const handleImageChange = (e) => {
+    setFile(e.target.files[0])
+  }
+
+  const handleOnUpload = () => {
+    if (!file) return ``
+    const formData = new FormData()
+    formData.append('file', file)
+    if (postBody) {
+      Object.keys(postBody).forEach((key) => {
+        formData.append(key, postBody[key])
+      })
+    }
+    setLoading(true)
+
+    axios
+      .post(uploadUrl, formData)
+      .then((res) => {
+        setLoading(false)
+        refetchFn()
+        setOpen(false)
+        toast.success(successMessage ?? 'Successful')
+        setFile(null)
+      })
+      .catch((err) => {
+        console.log(err)
+        setLoading(false)
+        axiosErrorToast(err)
+      })
+  }
+
+  useEffect(() => {
+    return () => {
+      setFile(null)
+      inputRef.current = null
+    }
+  }, [])
+
+  return (
+    <>
+      <Button
+        onClick={() => {
+          setOpen(true)
+        }}
+        variant="outlined"
+        {...buttonProps}
+      >
+        {buttonText}
+      </Button>
+      <Dialog
+        open={open}
+        onClose={onClose}
+        maxWidth="sm"
+        fullWidth
+        {...dialogProps}
+      >
+        <StyledDialogHeader>
+          <Typography fontWeight={600}>{dialogTitle}</Typography>
+          <IconButton onClick={onClose}>
+            <Close />
+          </IconButton>
+        </StyledDialogHeader>
+        <StyledDialogContent>
+          <StyledImage src={animatedImage} alt="Upload Image" />
+          <Typography variant="h6">{dialogTitle}</Typography>
+          <Typography textAlign={'center'}>
+            Before importing, download Sample CSV File or Sample XLSX file and
+            compare it with your sheet or edit the sample sheet
+          </Typography>
+          <Box sx={{ minWidth: '400px', marginBottom: '20px' }}>
+            {!file ? (
+              <>
+                <input
+                  onChange={handleImageChange}
+                  hidden
+                  type="file"
+                  ref={inputRef}
+                />
+                <StyledChooseFileButton
+                  variant="outlined"
+                  fullWidth
+                  onClick={triggerUpload}
+                >
+                  <Box>
+                    <Typography variant="h6" color="primary">
+                      Choose File
+                    </Typography>
+                    <Add />
+                  </Box>
+                </StyledChooseFileButton>
+              </>
+            ) : (
+              <StyledFileLabel>
+                <Typography variant="body2">{file?.name}</Typography>
+                <Box display={'flex'} gap="16px">
+                  <EditButton
+                    onClick={() => {
+                      triggerUpload()
+                    }}
+                  />
+                  <DeleteButton onClick={() => setFile(null)} />
+                </Box>
+              </StyledFileLabel>
+            )}
+          </Box>
+
+          <Button
+            fullWidth
+            sx={{ maxWidth: '255px' }}
+            onClick={handleOnUpload}
+            endIcon={
+              loading ? (
+                <CircularProgress size={20} sx={{ color: 'white' }} />
+              ) : null
+            }
+          >
+            Upload File
+          </Button>
+          {sampleFileUrl && (
+            <a href={sampleFileUrl} target="_blank" rel="noreferrer">
+              <Button fullWidth sx={{ maxWidth: '255px' }} variant="outlined">
+                Download Sample File
+              </Button>
+            </a>
+          )}
+        </StyledDialogContent>
+      </Dialog>
+    </>
+  )
+}

package/src/components/UploadFileDialog/index.tsx

@@ -1 +1 @@
-export { default } from './UploadFileDialog'
+export { default } from './UploadFileDialog'

package/src/components/index.ts

@@ -1,86 +1,86 @@
-import UploadFileDialog from './UploadFileDialog'
-import Chips from './Chips'
-import ImageUpload from './ImageUpload'
-import FloatingContainer from './FloatingContainer'
-import TabsContainer from './Tabs/TabsContainer'
-import { StyledTableContainer } from './StyledTableContainer'
-import { SearchBar } from './SearchBar'
-import { DrawerButton, DialogButton } from './ModalButtons'
-import DetailsGrid from './DetailsGrid'
-import AppHeader from './Layout/Header'
-import MenuButton from './MenuButton'
-import StepsHeader from './StepsHeader'
-import UploadDocument from './UploadDocument'
-import { Table as StyledTable } from './Table'
-import ErrorBoundary from './ErrorBoundary'
-import FullScreenLoader from './FullScreenLoader'
-import LoginForm from './LoginForm'
-import { SideMenuHeader } from './SideMenuHeader'
-import SideNav from './SideNav'
-import { ListItemButton } from './ListItemButton'
-import LayoutWrapper from './LayoutWrapper'
-import PageNotFound from './PageNotFound'
-import ChangePassword from './ChangePassword'
-import UploadButton from './UploadButton'
-import DialogWrapper from './DrawerWrapper/DialogWrapper'
-import Form from './Form/Form'
-import RenderForm from './Form/RenderForm'
-export { default as Image } from './Image'
-export { default as PageHeader } from './PageHeader'
-export { PageContent } from './PageContent'
-export { default as ActionButton } from './ActionButton'
-export { default as Breadcrumbs } from './Breadcrumbs'
-export { default as Table } from './TableComponent'
-export { default as Spinner } from './Spinner'
-export { default as AutocompleteSearch } from './AutocompleteSearch'
-export { FullCalendarWrapper } from './FullCalendar/FullCalendarWrapper'
-export { default as JsonPreview } from './JsonPreview'
-export { default as LabelValue } from './LabelValue'
-export { LinearProgress } from './LinearProgress'
-export { default as MediaRow } from './MediaRow'
-export { default as NoDataIllustration } from './NoDataIllustration'
-export { default as SwitchButton } from './SwitchButton'
-export { default as Tabs } from './Tabs/Tabs'
-export { default as ToastContainer } from './ToastContainer'
-export { default as Card } from './Card'
-export { default as CardsGrid } from './CardsGrid'
-export { default as DividerHeading } from './DividerHeading'
-export { default as ReactTable } from './TableComponent/ReactTable'
-export { default as TableFooter } from './TableComponent/TableFooter'
-export { default as DropDownButton } from './DropDownButton'
-export { default as useConfirm } from './PopupConfirm/useConfirm'
-export {
-  UploadFileDialog,
-  Chips,
-  ImageUpload,
-  FloatingContainer,
-  TabsContainer,
-  StyledTableContainer,
-  SearchBar,
-  DrawerButton,
-  DialogButton,
-  DetailsGrid,
-  AppHeader,
-  MenuButton,
-  StepsHeader,
-  UploadDocument,
-  StyledTable,
-  ErrorBoundary,
-  FullScreenLoader,
-  LoginForm,
-  SideMenuHeader,
-  ListItemButton,
-  LayoutWrapper,
-  PageNotFound,
-  SideNav,
-  ChangePassword,
-  UploadButton,
-  DialogWrapper,
-  Form,
-  RenderForm,
-}
-
-export * from './UploadButton/types'
-export * from './HookForm'
-export * from './Input'
-export * from './IconButtons'
+import UploadFileDialog from './UploadFileDialog'
+import Chips from './Chips'
+import ImageUpload from './ImageUpload'
+import FloatingContainer from './FloatingContainer'
+import TabsContainer from './Tabs/TabsContainer'
+import { StyledTableContainer } from './StyledTableContainer'
+import { SearchBar } from './SearchBar'
+import { DrawerButton, DialogButton } from './ModalButtons'
+import DetailsGrid from './DetailsGrid'
+import AppHeader from './Layout/Header'
+import MenuButton from './MenuButton'
+import StepsHeader from './StepsHeader'
+import UploadDocument from './UploadDocument'
+import { Table as StyledTable } from './Table'
+import ErrorBoundary from './ErrorBoundary'
+import FullScreenLoader from './FullScreenLoader'
+import LoginForm from './LoginForm'
+import { SideMenuHeader } from './SideMenuHeader'
+import SideNav from './SideNav'
+import { ListItemButton } from './ListItemButton'
+import LayoutWrapper from './LayoutWrapper'
+import PageNotFound from './PageNotFound'
+import ChangePassword from './ChangePassword'
+import UploadButton from './UploadButton'
+import DialogWrapper from './DrawerWrapper/DialogWrapper'
+import Form from './Form/Form'
+import RenderForm from './Form/RenderForm'
+export { default as Image } from './Image'
+export { default as PageHeader } from './PageHeader'
+export { PageContent } from './PageContent'
+export { default as ActionButton } from './ActionButton'
+export { default as Breadcrumbs } from './Breadcrumbs'
+export { default as Table } from './TableComponent'
+export { default as Spinner } from './Spinner'
+export { default as AutocompleteSearch } from './AutocompleteSearch'
+export { FullCalendarWrapper } from './FullCalendar/FullCalendarWrapper'
+export { default as JsonPreview } from './JsonPreview'
+export { default as LabelValue } from './LabelValue'
+export { LinearProgress } from './LinearProgress'
+export { default as MediaRow } from './MediaRow'
+export { default as NoDataIllustration } from './NoDataIllustration'
+export { default as SwitchButton } from './SwitchButton'
+export { default as Tabs } from './Tabs/Tabs'
+export { default as ToastContainer } from './ToastContainer'
+export { default as Card } from './Card'
+export { default as CardsGrid } from './CardsGrid'
+export { default as DividerHeading } from './DividerHeading'
+export { default as ReactTable } from './TableComponent/ReactTable'
+export { default as TableFooter } from './TableComponent/TableFooter'
+export { default as DropDownButton } from './DropDownButton'
+export { default as useConfirm } from './PopupConfirm/useConfirm'
+export {
+  UploadFileDialog,
+  Chips,
+  ImageUpload,
+  FloatingContainer,
+  TabsContainer,
+  StyledTableContainer,
+  SearchBar,
+  DrawerButton,
+  DialogButton,
+  DetailsGrid,
+  AppHeader,
+  MenuButton,
+  StepsHeader,
+  UploadDocument,
+  StyledTable,
+  ErrorBoundary,
+  FullScreenLoader,
+  LoginForm,
+  SideMenuHeader,
+  ListItemButton,
+  LayoutWrapper,
+  PageNotFound,
+  SideNav,
+  ChangePassword,
+  UploadButton,
+  DialogWrapper,
+  Form,
+  RenderForm,
+}
+
+export * from './UploadButton/types'
+export * from './HookForm'
+export * from './Input'
+export * from './IconButtons'