@campxdev/shared 1.10.40 → 1.10.42

package/src/components/IconButtons/assets/trash.svg

@@ -1,7 +1,7 @@
-<svg id="trash_4_" data-name="trash (4)" xmlns="http://www.w3.org/2000/svg" width="15" height="18" viewBox="0 0 15 18">
-  <g id="trash_4_2" data-name="trash (4)" transform="translate(-2)" opacity="0.5">
-    <path id="Path_1384" data-name="Path 1384" d="M16.25,3H13.925A3.757,3.757,0,0,0,10.25,0H8.75A3.757,3.757,0,0,0,5.075,3H2.75a.75.75,0,1,0,0,1.5H3.5v9.75A3.755,3.755,0,0,0,7.25,18h4.5a3.755,3.755,0,0,0,3.75-3.75V4.5h.75a.75.75,0,0,0,0-1.5ZM8.75,1.5h1.5A2.254,2.254,0,0,1,12.372,3H6.628A2.255,2.255,0,0,1,8.75,1.5ZM14,14.25a2.25,2.25,0,0,1-2.25,2.25H7.25A2.25,2.25,0,0,1,5,14.25V4.5h9Z" fill="#121212"/>
-    <path id="Path_1385" data-name="Path 1385" d="M9.75,16a.75.75,0,0,0,.75-.75v-4.5a.75.75,0,1,0-1.5,0v4.5A.75.75,0,0,0,9.75,16Z" transform="translate(-1.75 -2.5)" fill="#121212"/>
-    <path id="Path_1386" data-name="Path 1386" d="M13.75,16a.75.75,0,0,0,.75-.75v-4.5a.75.75,0,1,0-1.5,0v4.5A.75.75,0,0,0,13.75,16Z" transform="translate(-2.75 -2.5)" fill="#121212"/>
-  </g>
-</svg>
+<svg id="trash_4_" data-name="trash (4)" xmlns="http://www.w3.org/2000/svg" width="15" height="18" viewBox="0 0 15 18">
+  <g id="trash_4_2" data-name="trash (4)" transform="translate(-2)" opacity="0.5">
+    <path id="Path_1384" data-name="Path 1384" d="M16.25,3H13.925A3.757,3.757,0,0,0,10.25,0H8.75A3.757,3.757,0,0,0,5.075,3H2.75a.75.75,0,1,0,0,1.5H3.5v9.75A3.755,3.755,0,0,0,7.25,18h4.5a3.755,3.755,0,0,0,3.75-3.75V4.5h.75a.75.75,0,0,0,0-1.5ZM8.75,1.5h1.5A2.254,2.254,0,0,1,12.372,3H6.628A2.255,2.255,0,0,1,8.75,1.5ZM14,14.25a2.25,2.25,0,0,1-2.25,2.25H7.25A2.25,2.25,0,0,1,5,14.25V4.5h9Z" fill="#121212"/>
+    <path id="Path_1385" data-name="Path 1385" d="M9.75,16a.75.75,0,0,0,.75-.75v-4.5a.75.75,0,1,0-1.5,0v4.5A.75.75,0,0,0,9.75,16Z" transform="translate(-1.75 -2.5)" fill="#121212"/>
+    <path id="Path_1386" data-name="Path 1386" d="M13.75,16a.75.75,0,0,0,.75-.75v-4.5a.75.75,0,1,0-1.5,0v4.5A.75.75,0,0,0,13.75,16Z" transform="translate(-2.75 -2.5)" fill="#121212"/>
+  </g>
+</svg>

package/src/components/IconButtons/index.tsx

@@ -1,8 +1,8 @@
-export {
-  ViewButton,
-  DeleteButton,
-  EditButton,
-  PrintButton,
-} from './IconButtons'
-
-export { DateRangeIcon } from './Icons'
+export {
+  ViewButton,
+  DeleteButton,
+  EditButton,
+  PrintButton,
+} from './IconButtons'
+
+export { DateRangeIcon } from './Icons'

package/src/components/IconLabel.tsx

@@ -1,37 +1,37 @@
-import { Box, styled, Typography } from '@mui/material'
-import { ReactNode } from 'react'
-
-const StyledStack = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  gap: '8px',
-  '& .MuiSvgIcon-root': {
-    fontSize: '1rem',
-    color: theme.palette.text.secondary,
-  },
-}))
-
-export default function IconLabel({
-  label,
-  icon,
-  onClick,
-}: {
-  label: string
-  icon: ReactNode
-  onClick?: () => void
-}) {
-  return (
-    <StyledStack
-      onClick={onClick ?? onClick}
-      sx={{
-        ...(onClick && {
-          cursor: 'pointer',
-          '&:hover': { borderBottom: '1px solid gray' },
-        }),
-      }}
-    >
-      {icon}
-      <Typography variant="subtitle2">{label}</Typography>
-    </StyledStack>
-  )
-}
+import { Box, styled, Typography } from '@mui/material'
+import { ReactNode } from 'react'
+
+const StyledStack = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  '& .MuiSvgIcon-root': {
+    fontSize: '1rem',
+    color: theme.palette.text.secondary,
+  },
+}))
+
+export default function IconLabel({
+  label,
+  icon,
+  onClick,
+}: {
+  label: string
+  icon: ReactNode
+  onClick?: () => void
+}) {
+  return (
+    <StyledStack
+      onClick={onClick ?? onClick}
+      sx={{
+        ...(onClick && {
+          cursor: 'pointer',
+          '&:hover': { borderBottom: '1px solid gray' },
+        }),
+      }}
+    >
+      {icon}
+      <Typography variant="subtitle2">{label}</Typography>
+    </StyledStack>
+  )
+}

package/src/components/Image/Image.tsx

@@ -1,45 +1,45 @@
-import { Box } from '@mui/material'
-const brokenImage = require('./broken-image.png')
-
-interface ImageProps {
-  src: string
-  alt: string
-  height: string | number
-  width: string | number
-  fit?: 'cover' | 'contain' | 'fill'
-  radius?: string | number
-  defaultImage?: any
-}
-
-export default function Image({
-  src,
-  alt,
-  height,
-  width,
-  fit = 'contain',
-  radius = '10px',
-  defaultImage = null,
-}: ImageProps) {
-  return (
-    <Box
-      sx={{
-        height: height,
-        width: width,
-        '& > img': {
-          borderRadius: radius,
-          width: '100%',
-          height: '100%',
-          objectFit: fit,
-        },
-      }}
-    >
-      <img
-        src={src || defaultImage}
-        alt={alt}
-        onError={(e: any) => {
-          e.target.src = defaultImage ? defaultImage : brokenImage
-        }}
-      />
-    </Box>
-  )
-}
+import { Box } from '@mui/material'
+const brokenImage = require('./broken-image.png')
+
+interface ImageProps {
+  src: string
+  alt: string
+  height: string | number
+  width: string | number
+  fit?: 'cover' | 'contain' | 'fill'
+  radius?: string | number
+  defaultImage?: any
+}
+
+export default function Image({
+  src,
+  alt,
+  height,
+  width,
+  fit = 'contain',
+  radius = '10px',
+  defaultImage = null,
+}: ImageProps) {
+  return (
+    <Box
+      sx={{
+        height: height,
+        width: width,
+        '& > img': {
+          borderRadius: radius,
+          width: '100%',
+          height: '100%',
+          objectFit: fit,
+        },
+      }}
+    >
+      <img
+        src={src || defaultImage}
+        alt={alt}
+        onError={(e: any) => {
+          e.target.src = defaultImage ? defaultImage : brokenImage
+        }}
+      />
+    </Box>
+  )
+}

package/src/components/Image/index.tsx

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

package/src/components/ImageUpload.tsx

@@ -1,98 +1,105 @@
-import { InsertPhotoOutlined } from '@mui/icons-material'
-import { styled, Typography } from '@mui/material'
-import { ReactNode, useRef, useState } from 'react'
-import axios, { axiosErrorToast } from '../config/axios'
-
-interface ImageUploadProps {
-  onFileUploaded: (v) => void
-  postUrl: string
-  StyledUpload?: ReactNode
-  loadingState?: (v) => void
-}
-export default function ImageUpload({
-  onFileUploaded,
-  postUrl,
-  StyledUpload,
-  loadingState,
-}: ImageUploadProps) {
-  const [loading, setLoading] = useState(false)
-  const ref = useRef<HTMLInputElement>(null)
-
-  const handleChange = (e) => {
-    if (e.target.files[0]) {
-      const formData = new FormData()
-      formData.append('file', e.target.files[0])
-      setLoading(true)
-      loadingState && setLoading(true)
-      axios
-        .post(postUrl, formData)
-        .then((res) => {
-          onFileUploaded({
-            mediaObject: res?.data?.mediaObject,
-            url: res.data.url,
-            key: res.data.key,
-            fileName: res.data?.mediaObject?.originalFileName ?? '',
-            id: res.data?.mediaObject?.id ?? '',
-          })
-          setLoading(false)
-          loadingState && setLoading(false)
-        })
-        .catch((err) => {
-          setLoading(false)
-          loadingState && setLoading(false)
-          axiosErrorToast(err)
-        })
-    }
-  }
-
-  return (
-    <>
-      {StyledUpload ? (
-        <div
-          onClick={() => {
-            ref.current.click()
-          }}
-        >
-          {StyledUpload}
-        </div>
-      ) : (
-        <StyledImageLabel
-          onClick={() => {
-            ref.current.click()
-          }}
-        >
-          <InsertPhotoOutlined />
-          <Typography sx={{ opacity: '0.6' }}>
-            {loading ? 'Uploading...' : `Upload Photo`}
-          </Typography>
-        </StyledImageLabel>
-      )}
-
-      <input
-        accept="image/*"
-        type="file"
-        hidden
-        ref={ref}
-        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 { InsertPhotoOutlined } from '@mui/icons-material'
+import { styled, Typography } from '@mui/material'
+import { ReactNode, useRef, useState } from 'react'
+import axios, { axiosErrorToast } from '../config/axios'
+
+interface ImageUploadProps {
+  onFileUploaded: (v) => void
+  postUrl: string
+  StyledUpload?: ReactNode
+  loadingState?: (v) => void
+  postBody?: { [key: string]: string }
+}
+export default function ImageUpload({
+  onFileUploaded,
+  postUrl,
+  StyledUpload,
+  loadingState,
+  postBody = {},
+}: ImageUploadProps) {
+  const [loading, setLoading] = useState(false)
+  const ref = useRef<HTMLInputElement>(null)
+
+  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)
+      loadingState && setLoading(true)
+      axios
+        .post(postUrl, formData)
+        .then((res) => {
+          onFileUploaded({
+            mediaObject: res?.data?.mediaObject,
+            url: res.data.url,
+            key: res.data.key,
+            fileName: res.data?.mediaObject?.originalFileName ?? '',
+            id: res.data?.mediaObject?.id ?? '',
+          })
+          setLoading(false)
+          loadingState && setLoading(false)
+        })
+        .catch((err) => {
+          setLoading(false)
+          loadingState && setLoading(false)
+          axiosErrorToast(err)
+        })
+    }
+  }
+
+  return (
+    <>
+      {StyledUpload ? (
+        <div
+          onClick={() => {
+            ref.current.click()
+          }}
+        >
+          {StyledUpload}
+        </div>
+      ) : (
+        <StyledImageLabel
+          onClick={() => {
+            ref.current.click()
+          }}
+        >
+          <InsertPhotoOutlined />
+          <Typography sx={{ opacity: '0.6' }}>
+            {loading ? 'Uploading...' : `Upload Photo`}
+          </Typography>
+        </StyledImageLabel>
+      )}
+
+      <input
+        accept="image/*"
+        type="file"
+        hidden
+        ref={ref}
+        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,
+  },
+}))