@campxdev/shared 1.0.5 → 1.1.0

package/src/components/HookForm/MultiCheckbox.tsx

@@ -1,82 +1,82 @@
-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 FormMultiCheckbox(props: Props) {
-  const {
-    name,
-    size = 'small',
-    control,
-    label = '',
-    options = [],
-    required = false,
-    row = true,
-  } = props
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => (
-        <>
-          <Typography variant="subtitle1">
-            {label}
-            {required && <span style={{ color: 'red' }}>{' *'}</span>}
-          </Typography>
-          <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 FormMultiCheckbox(props: Props) {
+  const {
+    name,
+    size = 'small',
+    control,
+    label = '',
+    options = [],
+    required = false,
+    row = true,
+  } = props
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <>
+          <Typography variant="subtitle1">
+            {label}
+            {required && <span style={{ color: 'red' }}>{' *'}</span>}
+          </Typography>
+          <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/HookForm/MultiSelect.tsx

@@ -1,100 +1,100 @@
-import { Close } from '@mui/icons-material'
-import { Autocomplete, CircularProgress, TextField } from '@mui/material'
-import React from 'react'
-import { Controller } from 'react-hook-form'
-import FormLabel from './FormLabel'
-
-interface MultiSelectProps {
-  control?: any
-  label: string
-  name?: string
-  options: { key: string | number; name: any }[]
-  placeholder?: string
-  loading?: boolean
-  [key: string]: any
-  hookForm?: boolean
-  value?: any
-  onChange?: (value: any) => void
-}
-
-export default function FormMultiSelect({
-  control,
-  name,
-  options,
-  label,
-  loading,
-  value,
-  onChange,
-  hookForm = true,
-  ...props
-}: MultiSelectProps) {
-  if (!hookForm) {
-    return (
-      <Autocomplete
-        multiple
-        value={value}
-        loading={loading}
-        fullWidth
-        isOptionEqualToValue={(option, value) => option.key === value.key}
-        onChange={(e, value) => {
-          if (!onChange) return
-          onChange(value)
-        }}
-        options={options || []}
-        getOptionLabel={(option) => option?.name || ''}
-        renderInput={(params) => (
-          <TextField
-            {...params}
-            variant="outlined"
-            label={<FormLabel label={label} required={props.required} />}
-          />
-        )}
-        {...props}
-      />
-    )
-  }
-  return (
-    <Controller
-      control={control}
-      name={name}
-      render={({ field, fieldState: { error } }) => (
-        <Autocomplete
-          multiple
-          value={field.value}
-          loading={loading}
-          fullWidth
-          isOptionEqualToValue={(option, value) => option.key === value.key}
-          onChange={(e, value) => {
-            field.onChange(value)
-          }}
-          options={options || []}
-          getOptionLabel={(option) => option?.name || ''}
-          renderInput={(params) => (
-            <TextField
-              {...params}
-              variant="outlined"
-              InputProps={{
-                ...params.InputProps,
-                endAdornment: (
-                  <React.Fragment>
-                    {loading ? (
-                      <CircularProgress color="inherit" size={20} />
-                    ) : null}
-                    {params.InputProps.endAdornment}
-                  </React.Fragment>
-                ),
-              }}
-              label={<FormLabel label={label} required={props.required} />}
-              error={error ? true : false}
-              helperText={error ? error.message : null}
-            />
-          )}
-          ChipProps={{
-            deleteIcon: <Close />,
-          }}
-          {...props}
-        />
-      )}
-    />
-  )
-}
+import { Close } from '@mui/icons-material'
+import { Autocomplete, CircularProgress, TextField } from '@mui/material'
+import React from 'react'
+import { Controller } from 'react-hook-form'
+import FormLabel from './FormLabel'
+
+interface MultiSelectProps {
+  control?: any
+  label: string
+  name?: string
+  options: { key: string | number; name: any }[]
+  placeholder?: string
+  loading?: boolean
+  [key: string]: any
+  hookForm?: boolean
+  value?: any
+  onChange?: (value: any) => void
+}
+
+export default function FormMultiSelect({
+  control,
+  name,
+  options,
+  label,
+  loading,
+  value,
+  onChange,
+  hookForm = true,
+  ...props
+}: MultiSelectProps) {
+  if (!hookForm) {
+    return (
+      <Autocomplete
+        multiple
+        value={value}
+        loading={loading}
+        fullWidth
+        isOptionEqualToValue={(option, value) => option.key === value.key}
+        onChange={(e, value) => {
+          if (!onChange) return
+          onChange(value)
+        }}
+        options={options || []}
+        getOptionLabel={(option) => option?.name || ''}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            variant="outlined"
+            label={<FormLabel label={label} required={props.required} />}
+          />
+        )}
+        {...props}
+      />
+    )
+  }
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field, fieldState: { error } }) => (
+        <Autocomplete
+          multiple
+          value={field.value}
+          loading={loading}
+          fullWidth
+          isOptionEqualToValue={(option, value) => option.key === value.key}
+          onChange={(e, value) => {
+            field.onChange(value)
+          }}
+          options={options || []}
+          getOptionLabel={(option) => option?.name || ''}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              variant="outlined"
+              InputProps={{
+                ...params.InputProps,
+                endAdornment: (
+                  <React.Fragment>
+                    {loading ? (
+                      <CircularProgress color="inherit" size={20} />
+                    ) : null}
+                    {params.InputProps.endAdornment}
+                  </React.Fragment>
+                ),
+              }}
+              label={<FormLabel label={label} required={props.required} />}
+              error={error ? true : false}
+              helperText={error ? error.message : null}
+            />
+          )}
+          ChipProps={{
+            deleteIcon: <Close />,
+          }}
+          {...props}
+        />
+      )}
+    />
+  )
+}

package/src/components/HookForm/RadioGroup.tsx

@@ -1,106 +1,106 @@
-import {
-  Box,
-  FormControlLabel,
-  Radio,
-  RadioGroup as MuiRadioGroup,
-  RadioGroupProps,
-  Stack,
-  Typography,
-} from '@mui/material'
-import { ReactNode } from 'react'
-import { Controller } from 'react-hook-form'
-import FormLabel from './FormLabel'
-
-interface Props extends RadioGroupProps {
-  label?: ReactNode
-  name: string
-  control: any
-  sx?: any
-  row?: boolean
-  required?: boolean
-  options: { value: any; label: string | ReactNode }[]
-  Container?: any
-}
-
-export default function FormRadioGroup(props: Props) {
-  const {
-    name,
-    control,
-    label,
-    sx,
-    options = [],
-    row = false,
-    required = false,
-    Container,
-  } = props
-
-  return (
-    <>
-      <Controller
-        name={name}
-        control={control}
-        render={({ field, fieldState: { error } }) => (
-          <Stack direction={row ? 'row' : 'column'}>
-            {Container ? (
-              <Container style={{ borderColor: error ? 'red' : '' }}>
-                {
-                  <RadioComponent
-                    field={field}
-                    name={name}
-                    label={label}
-                    row={row}
-                    options={options}
-                    required={required}
-                  />
-                }
-              </Container>
-            ) : (
-              <RadioComponent
-                field={field}
-                name={name}
-                label={label}
-                row={row}
-                options={options}
-                required={required}
-              />
-            )}
-            {error && (
-              <Typography
-                variant="subtitle1"
-                sx={{ pl: '2px' }}
-                color="rgb(211, 47, 47)"
-              >
-                {error.message}
-              </Typography>
-            )}
-          </Stack>
-        )}
-      />
-    </>
-  )
-}
-
-const RadioComponent = ({ label, required, row, options, name, field }) => {
-  return (
-    <>
-      <Box>
-        {label && <FormLabel label={label} required={required} />}
-        <MuiRadioGroup
-          value={field.value}
-          onChange={field.onChange}
-          row={row}
-          name={name}
-        >
-          {options.map((item, index) => (
-            <FormControlLabel
-              key={index}
-              value={item.value}
-              control={<Radio />}
-              label={item.label}
-            />
-          ))}
-        </MuiRadioGroup>
-      </Box>
-    </>
-  )
-}
+import {
+  Box,
+  FormControlLabel,
+  Radio,
+  RadioGroup as MuiRadioGroup,
+  RadioGroupProps,
+  Stack,
+  Typography,
+} from '@mui/material'
+import { ReactNode } from 'react'
+import { Controller } from 'react-hook-form'
+import FormLabel from './FormLabel'
+
+interface Props extends RadioGroupProps {
+  label?: ReactNode
+  name: string
+  control: any
+  sx?: any
+  row?: boolean
+  required?: boolean
+  options: { value: any; label: string | ReactNode }[]
+  Container?: any
+}
+
+export default function FormRadioGroup(props: Props) {
+  const {
+    name,
+    control,
+    label,
+    sx,
+    options = [],
+    row = false,
+    required = false,
+    Container,
+  } = props
+
+  return (
+    <>
+      <Controller
+        name={name}
+        control={control}
+        render={({ field, fieldState: { error } }) => (
+          <Stack direction={row ? 'row' : 'column'}>
+            {Container ? (
+              <Container style={{ borderColor: error ? 'red' : '' }}>
+                {
+                  <RadioComponent
+                    field={field}
+                    name={name}
+                    label={label}
+                    row={row}
+                    options={options}
+                    required={required}
+                  />
+                }
+              </Container>
+            ) : (
+              <RadioComponent
+                field={field}
+                name={name}
+                label={label}
+                row={row}
+                options={options}
+                required={required}
+              />
+            )}
+            {error && (
+              <Typography
+                variant="subtitle1"
+                sx={{ pl: '2px' }}
+                color="rgb(211, 47, 47)"
+              >
+                {error.message}
+              </Typography>
+            )}
+          </Stack>
+        )}
+      />
+    </>
+  )
+}
+
+const RadioComponent = ({ label, required, row, options, name, field }) => {
+  return (
+    <>
+      <Box>
+        {label && <FormLabel label={label} required={required} />}
+        <MuiRadioGroup
+          value={field.value}
+          onChange={field.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/HookForm/SingleCheckbox.tsx

@@ -1,46 +1,46 @@
-import { Checkbox, FormControlLabel, Typography } from '@mui/material'
-import { Controller } from 'react-hook-form'
-
-interface Props {
-  label?: string
-  name: string
-  size?: 'small' | 'medium'
-  control: any
-  sx?: any
-}
-
-export default function FormSingleCheckbox(props: Props) {
-  const { name, size = 'medium', control, label = '', sx } = props
-  return (
-    <>
-      <Controller
-        name={name}
-        control={control}
-        render={({ field, fieldState: { error } }) => (
-          <>
-            <FormControlLabel
-              sx={{ width: '100%', ...sx }}
-              control={
-                <Checkbox
-                  size={size}
-                  checked={field.value}
-                  onChange={field.onChange}
-                />
-              }
-              label={label}
-            />
-            {error && (
-              <Typography
-                variant="caption"
-                sx={{ pl: '2px' }}
-                color="rgb(211, 47, 47)"
-              >
-                {error.message}
-              </Typography>
-            )}
-          </>
-        )}
-      />
-    </>
-  )
-}
+import { Checkbox, FormControlLabel, Typography } from '@mui/material'
+import { Controller } from 'react-hook-form'
+
+interface Props {
+  label?: string
+  name: string
+  size?: 'small' | 'medium'
+  control: any
+  sx?: any
+}
+
+export default function FormSingleCheckbox(props: Props) {
+  const { name, size = 'medium', control, label = '', sx } = props
+  return (
+    <>
+      <Controller
+        name={name}
+        control={control}
+        render={({ field, fieldState: { error } }) => (
+          <>
+            <FormControlLabel
+              sx={{ width: '100%', ...sx }}
+              control={
+                <Checkbox
+                  size={size}
+                  checked={field.value}
+                  onChange={field.onChange}
+                />
+              }
+              label={label}
+            />
+            {error && (
+              <Typography
+                variant="caption"
+                sx={{ pl: '2px' }}
+                color="rgb(211, 47, 47)"
+              >
+                {error.message}
+              </Typography>
+            )}
+          </>
+        )}
+      />
+    </>
+  )
+}