@campxdev/shared 1.4.9 → 1.4.11

package/src/components/Input/DateTimePicker.tsx

@@ -1,75 +1,75 @@
-import EventIcon from '@mui/icons-material/Event'
-import { InputAdornment, TextFieldProps } from '@mui/material'
-import 'flatpickr/dist//flatpickr.css'
-import { ReactNode } from 'react'
-import Flatpickr, { DateTimePickerProps } from 'react-flatpickr'
-import TextField from './TextField'
-
-export interface IDateTimePicker {
-  label?: ReactNode
-  name?: string
-  required?: boolean
-  minDate?: Date | string | number
-  maxDate?: Date | string | number
-  minTime?: Date | string | number
-  maxTime?: Date | string | number
-  value: Date | null
-  onChange: (value: Date) => void
-  placeholder?: string
-  inputProps?: TextFieldProps
-}
-
-export default function DateTimePicker({
-  name,
-  label,
-  required,
-  minDate,
-  maxDate,
-  minTime,
-  maxTime,
-  onChange,
-  value,
-  placeholder,
-  ...rest
-}: IDateTimePicker) {
-  return (
-    <Flatpickr
-      options={{
-        enableTime: true,
-        dateFormat: 'd-m-Y h:i K',
-        minDate,
-        maxDate,
-        minTime,
-        maxTime,
-      }}
-      onChange={(dates: Date[]) => {
-        if (onChange) onChange(dates[0])
-      }}
-      value={value || null}
-      render={(
-        props: Omit<DateTimePickerProps, 'options' | 'render'>,
-        ref: (node: HTMLInputElement | null) => void,
-      ) => {
-        return (
-          <TextField
-            placeholder={placeholder}
-            label={label}
-            name={name}
-            variant="outlined"
-            autoComplete="off"
-            required={required}
-            inputRef={ref}
-            InputProps={{
-              endAdornment: (
-                <InputAdornment position="end">
-                  <EventIcon />
-                </InputAdornment>
-              ),
-            }}
-            {...rest.inputProps}
-          />
-        )
-      }}
-    />
-  )
-}
+import EventIcon from '@mui/icons-material/Event'
+import { InputAdornment, TextFieldProps } from '@mui/material'
+import 'flatpickr/dist//flatpickr.css'
+import { ReactNode } from 'react'
+import Flatpickr, { DateTimePickerProps } from 'react-flatpickr'
+import TextField from './TextField'
+
+export interface IDateTimePicker {
+  label?: ReactNode
+  name?: string
+  required?: boolean
+  minDate?: Date | string | number
+  maxDate?: Date | string | number
+  minTime?: Date | string | number
+  maxTime?: Date | string | number
+  value: Date | null
+  onChange: (value: Date) => void
+  placeholder?: string
+  inputProps?: TextFieldProps
+}
+
+export default function DateTimePicker({
+  name,
+  label,
+  required,
+  minDate,
+  maxDate,
+  minTime,
+  maxTime,
+  onChange,
+  value,
+  placeholder,
+  ...rest
+}: IDateTimePicker) {
+  return (
+    <Flatpickr
+      options={{
+        enableTime: true,
+        dateFormat: 'd-m-Y h:i K',
+        minDate,
+        maxDate,
+        minTime,
+        maxTime,
+      }}
+      onChange={(dates: Date[]) => {
+        if (onChange) onChange(dates[0])
+      }}
+      value={value || null}
+      render={(
+        props: Omit<DateTimePickerProps, 'options' | 'render'>,
+        ref: (node: HTMLInputElement | null) => void,
+      ) => {
+        return (
+          <TextField
+            placeholder={placeholder}
+            label={label}
+            name={name}
+            variant="outlined"
+            autoComplete="off"
+            required={required}
+            inputRef={ref}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <EventIcon />
+                </InputAdornment>
+              ),
+            }}
+            {...rest.inputProps}
+          />
+        )
+      }}
+    />
+  )
+}

package/src/components/Input/FormLabel.tsx

@@ -1,21 +1,21 @@
-import { alpha, styled, Typography, TypographyProps } from '@mui/material'
-
-export default function FormLabel({ label, required, name }) {
-  if (typeof label !== 'string') return label
-
-  return (
-    <Typography
-      htmlFor={name}
-      component="label"
-      sx={{
-        color: alpha('#121212', 0.5),
-        lineHeight: 2,
-        '& span': {
-          color: (theme) => theme.palette.error.main,
-        },
-      }}
-    >
-      {label} {required && <span>{' *'}</span>}
-    </Typography>
-  )
-}
+import { alpha, styled, Typography, TypographyProps } from '@mui/material'
+
+export default function FormLabel({ label, required, name }) {
+  if (typeof label !== 'string') return label
+
+  return (
+    <Typography
+      htmlFor={name}
+      component="label"
+      sx={{
+        color: alpha('#121212', 0.5),
+        lineHeight: 2,
+        '& span': {
+          color: (theme) => theme.palette.error.main,
+        },
+      }}
+    >
+      {label} {required && <span>{' *'}</span>}
+    </Typography>
+  )
+}

package/src/components/Input/MultiCheckbox.tsx

@@ -1,64 +1,64 @@
-import { Box, BoxProps, FormGroup, FormHelperText } from '@mui/material'
-import { ReactNode } from 'react'
-import { Controller } from 'react-hook-form'
-import FormLabel from './FormLabel'
-import SingleCheckbox from './SingleCheckbox'
-
-interface Props {
-  label?: ReactNode
-  name: string
-  size?: 'small' | 'medium'
-  options: Array<{ label: ReactNode; value: any }>
-  required?: boolean
-  row?: boolean
-  error?: boolean
-  helperText?: ReactNode
-  value: { label: string; value: any }[]
-  onChange: (value: { label: ReactNode; value: any }[]) => void
-  containerProps?: BoxProps
-}
-
-export default function MultiCheckbox({
-  name,
-  label,
-  options = [],
-  required = false,
-  value = [],
-  onChange,
-  error,
-  helperText,
-  row = true,
-  containerProps,
-  ...rest
-}: Props) {
-  return (
-    <Box width="100%" {...containerProps}>
-      <FormLabel label={label} required={required} name={name} />
-      <FormGroup row={row} sx={{ flexWrap: 'wrap' }}>
-        {options?.map((item, index) => (
-          <SingleCheckbox
-            name={name}
-            key={index}
-            label={item.label}
-            checked={value
-              ?.map((item: any) => item?.value)
-              ?.includes(item?.value)}
-            onChange={(e) => {
-              if (e.target.checked) {
-                let newValue = [...value, item]
-                onChange(newValue)
-              } else {
-                let filteredValue = value.filter(
-                  (opt: any) => opt?.value !== item.value,
-                )
-                onChange(filteredValue)
-              }
-            }}
-            {...rest}
-          />
-        ))}
-      </FormGroup>
-      {error && <FormHelperText>{helperText}</FormHelperText>}
-    </Box>
-  )
-}
+import { Box, BoxProps, FormGroup, FormHelperText } from '@mui/material'
+import { ReactNode } from 'react'
+import { Controller } from 'react-hook-form'
+import FormLabel from './FormLabel'
+import SingleCheckbox from './SingleCheckbox'
+
+interface Props {
+  label?: ReactNode
+  name: string
+  size?: 'small' | 'medium'
+  options: Array<{ label: ReactNode; value: any }>
+  required?: boolean
+  row?: boolean
+  error?: boolean
+  helperText?: ReactNode
+  value: { label: string; value: any }[]
+  onChange: (value: { label: ReactNode; value: any }[]) => void
+  containerProps?: BoxProps
+}
+
+export default function MultiCheckbox({
+  name,
+  label,
+  options = [],
+  required = false,
+  value = [],
+  onChange,
+  error,
+  helperText,
+  row = true,
+  containerProps,
+  ...rest
+}: Props) {
+  return (
+    <Box width="100%" {...containerProps}>
+      <FormLabel label={label} required={required} name={name} />
+      <FormGroup row={row} sx={{ flexWrap: 'wrap' }}>
+        {options?.map((item, index) => (
+          <SingleCheckbox
+            name={name}
+            key={index}
+            label={item.label}
+            checked={value
+              ?.map((item: any) => item?.value)
+              ?.includes(item?.value)}
+            onChange={(e) => {
+              if (e.target.checked) {
+                let newValue = [...value, item]
+                onChange(newValue)
+              } else {
+                let filteredValue = value.filter(
+                  (opt: any) => opt?.value !== item.value,
+                )
+                onChange(filteredValue)
+              }
+            }}
+            {...rest}
+          />
+        ))}
+      </FormGroup>
+      {error && <FormHelperText>{helperText}</FormHelperText>}
+    </Box>
+  )
+}

package/src/components/Input/MultiSelect.tsx

@@ -1,148 +1,148 @@
-import { Close, KeyboardArrowDown } from '@mui/icons-material'
-import {
-  alpha,
-  Autocomplete,
-  Checkbox,
-  CircularProgress,
-  Popper,
-  styled,
-} from '@mui/material'
-import { ReactNode } from 'react'
-import { BpCheckedIcon, BpIcon } from './SingleCheckbox'
-import TextField from './TextField'
-
-interface MultiSelectProps {
-  label: ReactNode
-  name?: string
-  options: { label: string | ReactNode; value: any }[]
-  placeholder?: string
-  loading?: boolean
-  value: { label: string | ReactNode; value: any }[]
-  onChange: (value: any) => void
-  required?: boolean
-  error?: boolean
-  helperText?: string
-}
-
-const StyledAutocomplete = styled(Autocomplete)(({ theme }) => ({
-  '& .MuiAutocomplete-tag': {
-    border: '1px solid #D1D1D1',
-    background: '#F8F8F8',
-    borderRadius: '5px',
-    height: '38px',
-    '& .MuiSvgIcon-root': {
-      fontSize: '15px',
-      marginLeft: '5px',
-      fontWeight: 700,
-      color: theme.palette.secondary.main,
-      '&:hover': {
-        color: alpha(theme.palette.secondary.main, 0.8),
-      },
-    },
-  },
-}))
-
-const StyledPopper = styled(Popper)(({ theme }) => ({
-  '& .MuiPaper-root': {
-    borderRadius: '10px',
-    borderTopRightRadius: 0,
-    borderTopLeftRadius: 0,
-    boxShadow: '0px 4px 16px #0000000F',
-    maxHeight: 360,
-    marginTop: '1px',
-    '& .MuiAutocomplete-listbox': {
-      minWidth: '240px',
-      padding: '10px',
-      '& .MuiAutocomplete-option': {
-        padding: '10px',
-        background: 'none',
-        '&.Mui-focused': {
-          background: 'none',
-        },
-      },
-      '& .MuiCheckbox-root': {
-        padding: 0,
-        marginRight: '10px',
-      },
-    },
-    '&::-webkit-scrollbar': {
-      width: '0.5em',
-      height: '0.5em',
-    },
-
-    '&::-webkit-scrollbar-thumb': {
-      backgroundColor: 'rgba(0, 0, 0, 0.15)',
-      borderRadius: '3px',
-
-      '&:hover': {
-        background: 'rgba(0, 0, 0, 0.2)',
-      },
-    },
-  },
-}))
-
-export default function MultiSelect({
-  name,
-  options,
-  label,
-  loading,
-  value,
-  onChange,
-  required,
-  error,
-  helperText,
-  ...props
-}: MultiSelectProps) {
-  return (
-    <StyledAutocomplete
-      multiple
-      value={value}
-      loading={loading}
-      fullWidth
-      getOptionLabel={(option: any) => option?.label || ''}
-      options={options || []}
-      onChange={(e, value) => {
-        if (!onChange) return
-        onChange(value)
-      }}
-      isOptionEqualToValue={(option: any, value: any) =>
-        option.value === value.value
-      }
-      disableCloseOnSelect
-      PopperComponent={StyledPopper}
-      renderOption={(props, option: any, { selected }) => (
-        <li {...props}>
-          <Checkbox
-            icon={<BpIcon />}
-            checkedIcon={<BpCheckedIcon />}
-            checked={selected}
-          />
-          {option.label}
-        </li>
-      )}
-      popupIcon={<KeyboardArrowDown />}
-      ChipProps={{ deleteIcon: <Close /> }}
-      renderInput={(params) => (
-        <TextField
-          error={error}
-          helperText={helperText}
-          label={label}
-          required={required}
-          InputProps={{
-            ...params.InputProps,
-            endAdornment: (
-              <>
-                {loading ? (
-                  <CircularProgress color="inherit" size={20} />
-                ) : null}
-                {params.InputProps.endAdornment}
-              </>
-            ),
-          }}
-          {...params}
-        />
-      )}
-      {...props}
-    />
-  )
-}
+import { Close, KeyboardArrowDown } from '@mui/icons-material'
+import {
+  alpha,
+  Autocomplete,
+  Checkbox,
+  CircularProgress,
+  Popper,
+  styled,
+} from '@mui/material'
+import { ReactNode } from 'react'
+import { BpCheckedIcon, BpIcon } from './SingleCheckbox'
+import TextField from './TextField'
+
+interface MultiSelectProps {
+  label: ReactNode
+  name?: string
+  options: { label: string | ReactNode; value: any }[]
+  placeholder?: string
+  loading?: boolean
+  value: { label: string | ReactNode; value: any }[]
+  onChange: (value: any) => void
+  required?: boolean
+  error?: boolean
+  helperText?: string
+}
+
+const StyledAutocomplete = styled(Autocomplete)(({ theme }) => ({
+  '& .MuiAutocomplete-tag': {
+    border: '1px solid #D1D1D1',
+    background: '#F8F8F8',
+    borderRadius: '5px',
+    height: '38px',
+    '& .MuiSvgIcon-root': {
+      fontSize: '15px',
+      marginLeft: '5px',
+      fontWeight: 700,
+      color: theme.palette.secondary.main,
+      '&:hover': {
+        color: alpha(theme.palette.secondary.main, 0.8),
+      },
+    },
+  },
+}))
+
+const StyledPopper = styled(Popper)(({ theme }) => ({
+  '& .MuiPaper-root': {
+    borderRadius: '10px',
+    borderTopRightRadius: 0,
+    borderTopLeftRadius: 0,
+    boxShadow: '0px 4px 16px #0000000F',
+    maxHeight: 360,
+    marginTop: '1px',
+    '& .MuiAutocomplete-listbox': {
+      minWidth: '240px',
+      padding: '10px',
+      '& .MuiAutocomplete-option': {
+        padding: '10px',
+        background: 'none',
+        '&.Mui-focused': {
+          background: 'none',
+        },
+      },
+      '& .MuiCheckbox-root': {
+        padding: 0,
+        marginRight: '10px',
+      },
+    },
+    '&::-webkit-scrollbar': {
+      width: '0.5em',
+      height: '0.5em',
+    },
+
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: 'rgba(0, 0, 0, 0.15)',
+      borderRadius: '3px',
+
+      '&:hover': {
+        background: 'rgba(0, 0, 0, 0.2)',
+      },
+    },
+  },
+}))
+
+export default function MultiSelect({
+  name,
+  options,
+  label,
+  loading,
+  value,
+  onChange,
+  required,
+  error,
+  helperText,
+  ...props
+}: MultiSelectProps) {
+  return (
+    <StyledAutocomplete
+      multiple
+      value={value}
+      loading={loading}
+      fullWidth
+      getOptionLabel={(option: any) => option?.label || ''}
+      options={options || []}
+      onChange={(e, value) => {
+        if (!onChange) return
+        onChange(value)
+      }}
+      isOptionEqualToValue={(option: any, value: any) =>
+        option.value === value.value
+      }
+      disableCloseOnSelect
+      PopperComponent={StyledPopper}
+      renderOption={(props, option: any, { selected }) => (
+        <li {...props}>
+          <Checkbox
+            icon={<BpIcon />}
+            checkedIcon={<BpCheckedIcon />}
+            checked={selected}
+          />
+          {option.label}
+        </li>
+      )}
+      popupIcon={<KeyboardArrowDown />}
+      ChipProps={{ deleteIcon: <Close /> }}
+      renderInput={(params) => (
+        <TextField
+          error={error}
+          helperText={helperText}
+          label={label}
+          required={required}
+          InputProps={{
+            ...params.InputProps,
+            endAdornment: (
+              <>
+                {loading ? (
+                  <CircularProgress color="inherit" size={20} />
+                ) : null}
+                {params.InputProps.endAdornment}
+              </>
+            ),
+          }}
+          {...params}
+        />
+      )}
+      {...props}
+    />
+  )
+}