@campxdev/shared 1.8.33 → 1.8.34

package/src/components/UploadButton/UploadButton.tsx

@@ -1,126 +1,126 @@
-import { Button, CircularProgress, styled } from '@mui/material'
-import { useRef, useState } from 'react'
-import { toast } from 'react-toastify'
-import axios from '../../config/axios'
-import { UploadButtonProps } from './types'
-
-const getAccept = (type: UploadButtonProps['type']) => {
-  switch (type) {
-    case 'file':
-      return '.xlsx,.xls,.doc, .docx,.ppt, .pptx,.txt,.pdf'
-    case 'image':
-      return 'image/*'
-    case 'video':
-      return 'video/*'
-    case 'audio':
-      return 'audio/*'
-  }
-}
-
-export default function UploadButton({
-  type,
-  onChange,
-  uploadUrl,
-  onSuccess,
-  styledUpload,
-  loadingState,
-  refetchFn,
-}: UploadButtonProps) {
-  const [loading, setLoading] = useState<boolean>(false)
-
-  const formRef: any = useRef()
-  const fileInputRef: any = useRef()
-  const ref: any = useRef()
-  const handleChange = (e: any) => {
-    if (e.target.files[0]) {
-      const formData = new FormData()
-      formData.append('file', e.target.files[0])
-      setLoading(true)
-      loadingState && loadingState(true)
-      axios
-        .post(uploadUrl, formData)
-        .then((res) => {
-          onChange({
-            url: res.data.url,
-            key: res.data.key,
-            type: type,
-            fileName: res.data?.mediaObject?.originalFileName ?? '',
-            id: res.data?.mediaObject?.id ?? '',
-          })
-          refetchFn()
-          setLoading(false)
-          loadingState && loadingState(false)
-          if (onSuccess) onSuccess()
-          formRef?.current.reset()
-        })
-        .catch((err) => {
-          setLoading(false)
-          loadingState && loadingState(false)
-          toast.error(
-            err?.response?.data?.message ?? 'Server Error While Uploading File',
-          )
-          !styledUpload && formRef?.current.reset()
-        })
-    }
-  }
-
-  return (
-    <>
-      {styledUpload ? (
-        <>
-          <div
-            onClick={() => {
-              ref.current.click()
-            }}
-          >
-            {styledUpload}
-          </div>
-          <input
-            accept={getAccept(type)}
-            type="file"
-            hidden
-            ref={ref}
-            onChange={handleChange}
-          />
-        </>
-      ) : (
-        <>
-          <form ref={formRef}>
-            <input
-              ref={fileInputRef}
-              type="file"
-              style={{ display: 'none' }}
-              accept={getAccept(type)}
-              onChange={handleChange}
-            />
-            <StyledButton
-              fullWidth
-              endIcon={loading ? <CircularProgress size={16} /> : null}
-              variant="outlined"
-              disabled={loading}
-              size={'large'}
-              onClick={() => fileInputRef.current.click()}
-            >
-              {getLabel(type)}
-            </StyledButton>
-          </form>
-        </>
-      )}
-    </>
-  )
-}
-
-const getLabel = (type) => {
-  switch (type) {
-    case 'file':
-      return 'File'
-    case 'image':
-      return 'Image'
-    case 'video':
-      return 'Video'
-    case 'audio':
-      return 'Audio'
-  }
-}
-
-const StyledButton = styled(Button)(({ theme }) => ({}))
+import { Button, CircularProgress, styled } from '@mui/material'
+import { useRef, useState } from 'react'
+import { toast } from 'react-toastify'
+import axios from '../../config/axios'
+import { UploadButtonProps } from './types'
+
+const getAccept = (type: UploadButtonProps['type']) => {
+  switch (type) {
+    case 'file':
+      return '.xlsx,.xls,.doc, .docx,.ppt, .pptx,.txt,.pdf'
+    case 'image':
+      return 'image/*'
+    case 'video':
+      return 'video/*'
+    case 'audio':
+      return 'audio/*'
+  }
+}
+
+export default function UploadButton({
+  type,
+  onChange,
+  uploadUrl,
+  onSuccess,
+  styledUpload,
+  loadingState,
+  refetchFn,
+}: UploadButtonProps) {
+  const [loading, setLoading] = useState<boolean>(false)
+
+  const formRef: any = useRef()
+  const fileInputRef: any = useRef()
+  const ref: any = useRef()
+  const handleChange = (e: any) => {
+    if (e.target.files[0]) {
+      const formData = new FormData()
+      formData.append('file', e.target.files[0])
+      setLoading(true)
+      loadingState && loadingState(true)
+      axios
+        .post(uploadUrl, formData)
+        .then((res) => {
+          onChange({
+            url: res.data.url,
+            key: res.data.key,
+            type: type,
+            fileName: res.data?.mediaObject?.originalFileName ?? '',
+            id: res.data?.mediaObject?.id ?? '',
+          })
+          refetchFn()
+          setLoading(false)
+          loadingState && loadingState(false)
+          if (onSuccess) onSuccess()
+          formRef?.current.reset()
+        })
+        .catch((err) => {
+          setLoading(false)
+          loadingState && loadingState(false)
+          toast.error(
+            err?.response?.data?.message ?? 'Server Error While Uploading File',
+          )
+          !styledUpload && formRef?.current.reset()
+        })
+    }
+  }
+
+  return (
+    <>
+      {styledUpload ? (
+        <>
+          <div
+            onClick={() => {
+              ref.current.click()
+            }}
+          >
+            {styledUpload}
+          </div>
+          <input
+            accept={getAccept(type)}
+            type="file"
+            hidden
+            ref={ref}
+            onChange={handleChange}
+          />
+        </>
+      ) : (
+        <>
+          <form ref={formRef}>
+            <input
+              ref={fileInputRef}
+              type="file"
+              style={{ display: 'none' }}
+              accept={getAccept(type)}
+              onChange={handleChange}
+            />
+            <StyledButton
+              fullWidth
+              endIcon={loading ? <CircularProgress size={16} /> : null}
+              variant="outlined"
+              disabled={loading}
+              size={'large'}
+              onClick={() => fileInputRef.current.click()}
+            >
+              {getLabel(type)}
+            </StyledButton>
+          </form>
+        </>
+      )}
+    </>
+  )
+}
+
+const getLabel = (type) => {
+  switch (type) {
+    case 'file':
+      return 'File'
+    case 'image':
+      return 'Image'
+    case 'video':
+      return 'Video'
+    case 'audio':
+      return 'Audio'
+  }
+}
+
+const StyledButton = styled(Button)(({ theme }) => ({}))

package/src/components/UploadButton/index.tsx

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

package/src/components/UploadButton/types.ts

@@ -1,19 +1,19 @@
-import { ReactNode } from "react"
-
-interface Media {
-  type: 'image' | 'video' | 'audio' | 'file'
-  url: string
-  key: string
-  fileName?: string
-  id?: any
-}
-interface UploadButtonProps {
-  type: 'file' | 'image' | 'video' | 'audio'
-  onChange: (res: Media) => void
-  uploadUrl: string
-  onSuccess?: () => void
-  styledUpload?: ReactNode
-  loadingState?: (v) => void
-  refetchFn?: () => void
-}
-export type { Media, UploadButtonProps }
+import { ReactNode } from "react"
+
+interface Media {
+  type: 'image' | 'video' | 'audio' | 'file'
+  url: string
+  key: string
+  fileName?: string
+  id?: any
+}
+interface UploadButtonProps {
+  type: 'file' | 'image' | 'video' | 'audio'
+  onChange: (res: Media) => void
+  uploadUrl: string
+  onSuccess?: () => void
+  styledUpload?: ReactNode
+  loadingState?: (v) => void
+  refetchFn?: () => void
+}
+export type { Media, UploadButtonProps }

package/src/components/UploadDocument.tsx

@@ -1,108 +1,108 @@
-import { Box, CircularProgress, Stack, styled, Typography } from '@mui/material'
-import { ReactNode, useRef, useState } from 'react'
-import AttachFileIcon from '@mui/icons-material/AttachFile'
-import { toast } from 'react-toastify'
-import axios from '../config/axios'
-
-export default function UploadDocument({
-  accept = '.doc,.docx,.pdf',
-  styledUpload,
-  postUrl,
-  postBody,
-  styleProps,
-  refetchFn,
-  width,
-  height,
-}: {
-  accept?: string
-  styledUpload?: ReactNode
-  postUrl: string
-  postBody?: object
-  refetchFn?: () => void
-  styleProps?: any
-  width?: string
-  height?: string
-}) {
-  const [loading, setLoading] = useState(false)
-  const fileRef = useRef<any>()
-
-  const handleChange = (e) => {
-    if (e.target.files[0]) {
-      const formData = new FormData()
-      formData.append('file', e.target.files[0])
-      if (postBody) {
-        Object?.keys(postBody)?.forEach((key) => {
-          formData?.append(key, postBody[key])
-        })
-      }
-
-      setLoading(true)
-      axios
-        .post(postUrl, formData)
-        .then((res) => {
-          setLoading(false)
-          refetchFn()
-        })
-        .catch((err) => {
-          setLoading(false)
-          toast.error('Server Error While Uploading File')
-        })
-    }
-  }
-
-  return (
-    <>
-      {styledUpload ? (
-        <div
-          onClick={() => {
-            fileRef.current.click()
-          }}
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            ...styleProps,
-          }}
-        >
-          {loading ? <CircularProgress size={30} /> : styledUpload}
-        </div>
-      ) : (
-        <StyledImageLabel
-          onClick={() => {
-            fileRef.current.click()
-          }}
-        >
-          <AttachFileIcon />
-          <Typography sx={{ opacity: '0.6' }}>
-            {loading ? 'Uploading...' : `Upload File`}
-          </Typography>
-        </StyledImageLabel>
-      )}
-      <input
-        type="file"
-        ref={fileRef}
-        style={{ display: 'none' }}
-        accept={accept}
-        onChange={handleChange}
-      />
-    </>
-  )
-}
-
-export const StyledImageLabel = styled('div')(({ theme }) => ({
-  cursor: 'pointer',
-  borderRadius: '10px',
-  width: '100%',
-  height: '150px',
-  border: '1px dashed #0000001A',
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center',
-  '&:hover': {
-    backgroundColor: '#EFEFEF',
-  },
-  '& > *': {
-    color: theme.palette.text.disabled,
-  },
-}))
+import { Box, CircularProgress, Stack, styled, Typography } from '@mui/material'
+import { ReactNode, useRef, useState } from 'react'
+import AttachFileIcon from '@mui/icons-material/AttachFile'
+import { toast } from 'react-toastify'
+import axios from '../config/axios'
+
+export default function UploadDocument({
+  accept = '.doc,.docx,.pdf',
+  styledUpload,
+  postUrl,
+  postBody,
+  styleProps,
+  refetchFn,
+  width,
+  height,
+}: {
+  accept?: string
+  styledUpload?: ReactNode
+  postUrl: string
+  postBody?: object
+  refetchFn?: () => void
+  styleProps?: any
+  width?: string
+  height?: string
+}) {
+  const [loading, setLoading] = useState(false)
+  const fileRef = useRef<any>()
+
+  const handleChange = (e) => {
+    if (e.target.files[0]) {
+      const formData = new FormData()
+      formData.append('file', e.target.files[0])
+      if (postBody) {
+        Object?.keys(postBody)?.forEach((key) => {
+          formData?.append(key, postBody[key])
+        })
+      }
+
+      setLoading(true)
+      axios
+        .post(postUrl, formData)
+        .then((res) => {
+          setLoading(false)
+          refetchFn()
+        })
+        .catch((err) => {
+          setLoading(false)
+          toast.error('Server Error While Uploading File')
+        })
+    }
+  }
+
+  return (
+    <>
+      {styledUpload ? (
+        <div
+          onClick={() => {
+            fileRef.current.click()
+          }}
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            ...styleProps,
+          }}
+        >
+          {loading ? <CircularProgress size={30} /> : styledUpload}
+        </div>
+      ) : (
+        <StyledImageLabel
+          onClick={() => {
+            fileRef.current.click()
+          }}
+        >
+          <AttachFileIcon />
+          <Typography sx={{ opacity: '0.6' }}>
+            {loading ? 'Uploading...' : `Upload File`}
+          </Typography>
+        </StyledImageLabel>
+      )}
+      <input
+        type="file"
+        ref={fileRef}
+        style={{ display: 'none' }}
+        accept={accept}
+        onChange={handleChange}
+      />
+    </>
+  )
+}
+
+export const StyledImageLabel = styled('div')(({ theme }) => ({
+  cursor: 'pointer',
+  borderRadius: '10px',
+  width: '100%',
+  height: '150px',
+  border: '1px dashed #0000001A',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  '&:hover': {
+    backgroundColor: '#EFEFEF',
+  },
+  '& > *': {
+    color: theme.palette.text.disabled,
+  },
+}))