@campxdev/shared 0.5.20 → 0.5.22

package/src/components/Input/MultiCheckbox.tsx

@@ -1,79 +1,79 @@
-import {
-  Checkbox,
-  FormControl,
-  FormControlLabel,
-  FormGroup,
-  Typography,
-} from '@mui/material'
-import { Controller } from 'react-hook-form'
-import FormLabel from './FormLabel'
-
-interface Props {
-  label?: string
-  name: string
-  size?: 'small' | 'medium'
-  control: any
-  options: Array<{ label: string; value: string }>
-  required?: boolean
-  row?: boolean
-}
-
-export default function MultiCheckbox(props: Props) {
-  const {
-    name,
-    size = 'small',
-    control,
-    label = '',
-    options = [],
-    required = false,
-    row = true,
-  } = props
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => (
-        <>
-          <FormLabel label={label} required={required} />
-          <FormControl size={size} fullWidth>
-            <FormGroup row={row} sx={{ flexWrap: 'wrap' }}>
-              {options?.map((item, index) => (
-                <FormControlLabel
-                  name={name}
-                  key={index}
-                  control={
-                    <Checkbox
-                      size="small"
-                      checked={field?.value
-                        ?.map((item: any) => item?.value)
-                        ?.includes(item?.value)}
-                      onChange={(e) => {
-                        let value = field.value || []
-                        if (e.target.checked) {
-                          let newValue = [...value, item]
-                          field.onChange(newValue)
-                        } else {
-                          let filteredValue = value.filter(
-                            (opt: any) => opt?.value !== item.value,
-                          )
-                          field.onChange(filteredValue)
-                        }
-                      }}
-                    />
-                  }
-                  label={item.label}
-                />
-              ))}
-            </FormGroup>
-          </FormControl>
-          {error && (
-            <Typography variant="caption" color="error" sx={{ pl: '2px' }}>
-              {error.message}
-            </Typography>
-          )}
-        </>
-      )}
-    />
-  )
-}
+import {
+  Checkbox,
+  FormControl,
+  FormControlLabel,
+  FormGroup,
+  Typography,
+} from '@mui/material'
+import { Controller } from 'react-hook-form'
+import FormLabel from './FormLabel'
+
+interface Props {
+  label?: string
+  name: string
+  size?: 'small' | 'medium'
+  control: any
+  options: Array<{ label: string; value: string }>
+  required?: boolean
+  row?: boolean
+}
+
+export default function MultiCheckbox(props: Props) {
+  const {
+    name,
+    size = 'small',
+    control,
+    label = '',
+    options = [],
+    required = false,
+    row = true,
+  } = props
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <>
+          <FormLabel label={label} required={required} />
+          <FormControl size={size} fullWidth>
+            <FormGroup row={row} sx={{ flexWrap: 'wrap' }}>
+              {options?.map((item, index) => (
+                <FormControlLabel
+                  name={name}
+                  key={index}
+                  control={
+                    <Checkbox
+                      size="small"
+                      checked={field?.value
+                        ?.map((item: any) => item?.value)
+                        ?.includes(item?.value)}
+                      onChange={(e) => {
+                        let value = field.value || []
+                        if (e.target.checked) {
+                          let newValue = [...value, item]
+                          field.onChange(newValue)
+                        } else {
+                          let filteredValue = value.filter(
+                            (opt: any) => opt?.value !== item.value,
+                          )
+                          field.onChange(filteredValue)
+                        }
+                      }}
+                    />
+                  }
+                  label={item.label}
+                />
+              ))}
+            </FormGroup>
+          </FormControl>
+          {error && (
+            <Typography variant="caption" color="error" sx={{ pl: '2px' }}>
+              {error.message}
+            </Typography>
+          )}
+        </>
+      )}
+    />
+  )
+}

package/src/components/Input/MultiSelect.tsx

@@ -1,52 +1,52 @@
-import { Close } from '@mui/icons-material'
-import { Autocomplete, TextField } from '@mui/material'
-import { ReactNode } from 'react'
-import FormLabel from './FormLabel'
-
-interface MultiSelectProps {
-  label: string
-  name?: string
-  options: { label: string | ReactNode; value: any }[]
-  placeholder?: string
-  loading?: boolean
-  value: { label: string | ReactNode; value: any }[]
-  onChange: (value: any) => void
-  required?: boolean
-}
-
-export default function MultiSelect({
-  name,
-  options,
-  label,
-  loading,
-  value,
-  onChange,
-  required,
-  ...props
-}: MultiSelectProps) {
-  return (
-    <Autocomplete
-      multiple
-      value={value}
-      loading={loading}
-      fullWidth
-      onChange={(e, value) => {
-        if (!onChange) return
-        onChange(value)
-      }}
-      options={options || []}
-      getOptionLabel={(option: any) => option?.value || ''}
-      renderInput={(params) => (
-        <TextField
-          {...params}
-          variant="outlined"
-          label={<FormLabel label={label} required={required} />}
-        />
-      )}
-      ChipProps={{
-        deleteIcon: <Close />,
-      }}
-      {...props}
-    />
-  )
-}
+import { Close } from '@mui/icons-material'
+import { Autocomplete, TextField } from '@mui/material'
+import { ReactNode } from 'react'
+import FormLabel from './FormLabel'
+
+interface MultiSelectProps {
+  label: string
+  name?: string
+  options: { label: string | ReactNode; value: any }[]
+  placeholder?: string
+  loading?: boolean
+  value: { label: string | ReactNode; value: any }[]
+  onChange: (value: any) => void
+  required?: boolean
+}
+
+export default function MultiSelect({
+  name,
+  options,
+  label,
+  loading,
+  value,
+  onChange,
+  required,
+  ...props
+}: MultiSelectProps) {
+  return (
+    <Autocomplete
+      multiple
+      value={value}
+      loading={loading}
+      fullWidth
+      onChange={(e, value) => {
+        if (!onChange) return
+        onChange(value)
+      }}
+      options={options || []}
+      getOptionLabel={(option: any) => option?.value || ''}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          variant="outlined"
+          label={<FormLabel label={label} required={required} />}
+        />
+      )}
+      ChipProps={{
+        deleteIcon: <Close />,
+      }}
+      {...props}
+    />
+  )
+}

package/src/components/Input/RadioGroup.tsx

@@ -1,55 +1,55 @@
-import {
-  Checkbox,
-  FormControlLabel,
-  Radio,
-  Typography,
-  RadioGroup as MuiRadioGroup,
-  Box,
-  RadioGroupProps,
-  Stack,
-} from '@mui/material'
-import { ReactNode } from 'react'
-
-interface Props extends RadioGroupProps {
-  label: string
-  name?: string
-  control?: any
-  sx?: any
-  row?: boolean
-  required?: boolean
-  options: { value: any; label: string | ReactNode }[]
-}
-
-export default function RadioGroup(props: Props) {
-  const {
-    name,
-    label,
-    options = [],
-    row = false,
-    required = false,
-    value,
-    onChange,
-  } = props
-  return (
-    <Box>
-      <Box sx={{ display: 'flex' }}>
-        <Typography variant="subtitle2">{label}</Typography>
-        {required && (
-          <Typography fontSize={14} component={'span'} color="error">
-            {'  *'}
-          </Typography>
-        )}
-      </Box>
-      <MuiRadioGroup value={value} onChange={onChange} row={row} name={name}>
-        {options.map((item, index) => (
-          <FormControlLabel
-            key={index}
-            value={item.value}
-            control={<Radio />}
-            label={item.label}
-          />
-        ))}
-      </MuiRadioGroup>
-    </Box>
-  )
-}
+import {
+  Checkbox,
+  FormControlLabel,
+  Radio,
+  Typography,
+  RadioGroup as MuiRadioGroup,
+  Box,
+  RadioGroupProps,
+  Stack,
+} from '@mui/material'
+import { ReactNode } from 'react'
+
+interface Props extends RadioGroupProps {
+  label: string
+  name?: string
+  control?: any
+  sx?: any
+  row?: boolean
+  required?: boolean
+  options: { value: any; label: string | ReactNode }[]
+}
+
+export default function RadioGroup(props: Props) {
+  const {
+    name,
+    label,
+    options = [],
+    row = false,
+    required = false,
+    value,
+    onChange,
+  } = props
+  return (
+    <Box>
+      <Box sx={{ display: 'flex' }}>
+        <Typography variant="subtitle2">{label}</Typography>
+        {required && (
+          <Typography fontSize={14} component={'span'} color="error">
+            {'  *'}
+          </Typography>
+        )}
+      </Box>
+      <MuiRadioGroup value={value} onChange={onChange} row={row} name={name}>
+        {options.map((item, index) => (
+          <FormControlLabel
+            key={index}
+            value={item.value}
+            control={<Radio />}
+            label={item.label}
+          />
+        ))}
+      </MuiRadioGroup>
+    </Box>
+  )
+}

package/src/components/Input/SingleCheckbox.tsx

@@ -1,23 +1,23 @@
-import { Checkbox, FormControlLabel, Typography } from '@mui/material'
-import { Controller } from 'react-hook-form'
-
-interface Props {
-  disabled?: boolean
-  label: string
-  name?: string
-  size?: 'small' | 'medium'
-  sx?: any
-  checked: boolean
-  onChange: (e) => void
-}
-
-export default function SingleCheckbox(props: Props) {
-  const { name, checked, size = 'medium', label = '', sx, onChange } = props
-  return (
-    <FormControlLabel
-      sx={{ width: '100%', ...sx }}
-      control={<Checkbox size={size} checked={checked} onChange={onChange} />}
-      label={label}
-    />
-  )
-}
+import { Checkbox, FormControlLabel, Typography } from '@mui/material'
+import { Controller } from 'react-hook-form'
+
+interface Props {
+  disabled?: boolean
+  label: string
+  name?: string
+  size?: 'small' | 'medium'
+  sx?: any
+  checked: boolean
+  onChange: (e) => void
+}
+
+export default function SingleCheckbox(props: Props) {
+  const { name, checked, size = 'medium', label = '', sx, onChange } = props
+  return (
+    <FormControlLabel
+      sx={{ width: '100%', ...sx }}
+      control={<Checkbox size={size} checked={checked} onChange={onChange} />}
+      label={label}
+    />
+  )
+}

package/src/components/Input/SingleSelect.tsx

@@ -1,139 +1,124 @@
-import {
-  FormControl,
-  InputLabel,
-  MenuItem,
-  Select,
-  SelectProps,
-  Typography,
-} from '@mui/material'
-import { ReactNode } from 'react'
-import { Controller } from 'react-hook-form'
-import FormLabel from './FormLabel'
-interface Props extends SelectProps {
-  name?: string
-  control?: any
-  options: Array<{ label: ReactNode; value: any }>
-  label?: string
-  textColor?: string
-  onChange?: (value: any) => void
-  required?: boolean
-  hookForm?: boolean
-  firstItemEmpty?: boolean
-}
-
-export default function SingleSelect(props: Props) {
-  const {
-    name = 'select',
-    options,
-    control,
-    label,
-    textColor,
-    onChange,
-    required,
-    hookForm = true,
-    firstItemEmpty = false,
-  } = props
-
-  const inputOptions = firstItemEmpty
-    ? [{ label: 'All', value: '__empty__' }, ...options]
-    : options
-
-  if (!hookForm) {
-    return (
-      <>
-        <FormControl fullWidth sx={props.sx}>
-          <InputLabel id={name}>
-            <FormLabel required={required} label={label} />
-          </InputLabel>
-          <Select
-            variant="outlined"
-            id={name}
-            value={props.value}
-            displayEmpty={firstItemEmpty}
-            fullWidth
-            label={label}
-            MenuProps={{
-              PaperProps: {
-                sx: { maxHeight: 300 },
-              },
-            }}
-            onChange={props.onChange}
-          >
-            {inputOptions?.map((item, index) => (
-              <MenuItem key={index} value={item.value}>
-                {item.label}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-      </>
-    )
-  }
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => (
-        <>
-          <FormControl fullWidth>
-            <InputLabel id={name}>
-              <FormLabel required={required} label={label} />
-            </InputLabel>
-            <Select
-              error={Boolean(error)}
-              variant="outlined"
-              sx={{ color: textColor }}
-              fullWidth
-              label={label}
-              displayEmpty={firstItemEmpty}
-              MenuProps={{
-                PaperProps: {
-                  sx: { maxHeight: 300 },
-                },
-              }}
-              value={field.value}
-              onChange={(e) => {
-                if (onChange) onChange(e.target.value)
-                field.onChange(e.target.value)
-              }}
-            >
-              {inputOptions?.map((item, index) => (
-                <MenuItem key={index} value={item.value}>
-                  {item.label}
-                </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
-          {error && (
-            <Typography
-              fontSize={12}
-              sx={{
-                paddingLeft: '2px',
-                marginTop: '2px',
-              }}
-              color="error"
-            >
-              {error.message}
-            </Typography>
-          )}
-        </>
-      )}
-    />
-  )
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+import {
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  SelectProps,
+  Typography,
+} from '@mui/material'
+import { ReactNode } from 'react'
+import { Controller } from 'react-hook-form'
+import FormLabel from './FormLabel'
+interface Props extends SelectProps {
+  name?: string
+  control?: any
+  options: Array<{ label: ReactNode; value: any }>
+  label?: string
+  textColor?: string
+  onChange?: (value: any) => void
+  required?: boolean
+  hookForm?: boolean
+  firstItemEmpty?: boolean
+}
+
+export default function SingleSelect(props: Props) {
+  const {
+    name = 'select',
+    options,
+    control,
+    label,
+    textColor,
+    onChange,
+    required,
+    hookForm = true,
+    firstItemEmpty = false,
+  } = props
+
+  const inputOptions = firstItemEmpty
+    ? [{ label: 'All', value: '__empty__' }, ...options]
+    : options
+
+  if (!hookForm) {
+    return (
+      <>
+        <FormControl fullWidth sx={props.sx}>
+          <InputLabel id={name}>
+            <FormLabel required={required} label={label} />
+          </InputLabel>
+          <Select
+            variant="outlined"
+            id={name}
+            value={props.value}
+            displayEmpty={firstItemEmpty}
+            fullWidth
+            label={label}
+            MenuProps={{
+              PaperProps: {
+                sx: { maxHeight: 300 },
+              },
+            }}
+            onChange={props.onChange}
+          >
+            {inputOptions?.map((item, index) => (
+              <MenuItem key={index} value={item.value}>
+                {item.label}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      </>
+    )
+  }
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <>
+          <FormControl fullWidth>
+            <InputLabel id={name}>
+              <FormLabel required={required} label={label} />
+            </InputLabel>
+            <Select
+              error={Boolean(error)}
+              variant="outlined"
+              sx={{ color: textColor }}
+              fullWidth
+              label={label}
+              displayEmpty={firstItemEmpty}
+              MenuProps={{
+                PaperProps: {
+                  sx: { maxHeight: 300 },
+                },
+              }}
+              value={field.value}
+              onChange={(e) => {
+                if (onChange) onChange(e.target.value)
+                field.onChange(e.target.value)
+              }}
+            >
+              {inputOptions?.map((item, index) => (
+                <MenuItem key={index} value={item.value}>
+                  {item.label}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+          {error && (
+            <Typography
+              fontSize={12}
+              sx={{
+                paddingLeft: '2px',
+                marginTop: '2px',
+              }}
+              color="error"
+            >
+              {error.message}
+            </Typography>
+          )}
+        </>
+      )}
+    />
+  )
+}