@campxdev/shared 1.5.8 → 1.6.0

package/src/components/HookForm/AutoCompleteSearch.tsx

@@ -1,113 +1,113 @@
-import {
-  Autocomplete,
-  Box,
-  CircularProgress,
-  TextField,
-  Typography,
-} from '@mui/material'
-import { Controller } from 'react-hook-form'
-import FormLabel from './FormLabel'
-
-type Option = {
-  value: string | any
-  label: string | any
-}
-
-interface MultiSelectProps {
-  control?: any
-  label: string
-  name: string
-  options: { value: string | any; label: string | any }[]
-  placeholder?: string
-  hookForm?: boolean
-  loading?: boolean
-  [key: string]: any
-  multiple?: boolean
-}
-
-export default function FormAutoCompleteSearch({
-  control,
-  name,
-  options,
-  label,
-  loading, // pass this variable when options are from an async operation
-  hookForm = true,
-  multiple = false,
-  ...props
-}: MultiSelectProps) {
-  if (!hookForm) {
-    return (
-      <Autocomplete
-        multiple={multiple}
-        value={props.value}
-        fullWidth
-        onChange={(e, value) => {
-          props.onChange(value)
-        }}
-        options={options || []}
-        getOptionLabel={(option: Option) => option?.label || ''}
-        renderInput={(params) => (
-          <TextField
-            variant="outlined"
-            label={<FormLabel label={label} required={props.required} />}
-            {...params}
-          />
-        )}
-        {...props}
-      />
-    )
-  }
-
-  return (
-    <Controller
-      control={control}
-      name={name}
-      render={({ field, fieldState: { error } }) => (
-        <Box>
-          <Autocomplete
-            multiple={multiple}
-            loading={loading}
-            value={field.value}
-            fullWidth
-            onChange={(e, value) => {
-              field.onChange(value)
-            }}
-            options={options || []}
-            getOptionLabel={(option: Option) => option?.label || ''}
-            renderInput={(params) => (
-              <TextField
-                error={Boolean(error)}
-                variant="outlined"
-                label={<FormLabel label={label} required={props.required} />}
-                InputProps={{
-                  ...params.InputProps,
-                  endAdornment: (
-                    <>
-                      {loading ? (
-                        <CircularProgress color="inherit" size={20} />
-                      ) : null}
-                      {params.InputProps.endAdornment}
-                    </>
-                  ),
-                }}
-                {...params}
-              />
-            )}
-          />
-          {error && (
-            <Typography
-              fontSize={12}
-              sx={{
-                paddingLeft: '2px',
-                marginTop: '2px',
-              }}
-              color="error"
-            >
-              {error?.message}
-            </Typography>
-          )}
-        </Box>
-      )}
-    />
-  )
-}
+import {
+  Autocomplete,
+  Box,
+  CircularProgress,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { Controller } from 'react-hook-form'
+import FormLabel from './FormLabel'
+
+type Option = {
+  value: string | any
+  label: string | any
+}
+
+interface MultiSelectProps {
+  control?: any
+  label: string
+  name: string
+  options: { value: string | any; label: string | any }[]
+  placeholder?: string
+  hookForm?: boolean
+  loading?: boolean
+  [key: string]: any
+  multiple?: boolean
+}
+
+export default function FormAutoCompleteSearch({
+  control,
+  name,
+  options,
+  label,
+  loading, // pass this variable when options are from an async operation
+  hookForm = true,
+  multiple = false,
+  ...props
+}: MultiSelectProps) {
+  if (!hookForm) {
+    return (
+      <Autocomplete
+        multiple={multiple}
+        value={props.value}
+        fullWidth
+        onChange={(e, value) => {
+          props.onChange(value)
+        }}
+        options={options || []}
+        getOptionLabel={(option: Option) => option?.label || ''}
+        renderInput={(params) => (
+          <TextField
+            variant="outlined"
+            label={<FormLabel label={label} required={props.required} />}
+            {...params}
+          />
+        )}
+        {...props}
+      />
+    )
+  }
+
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field, fieldState: { error } }) => (
+        <Box>
+          <Autocomplete
+            multiple={multiple}
+            loading={loading}
+            value={field.value}
+            fullWidth
+            onChange={(e, value) => {
+              field.onChange(value)
+            }}
+            options={options || []}
+            getOptionLabel={(option: Option) => option?.label || ''}
+            renderInput={(params) => (
+              <TextField
+                error={Boolean(error)}
+                variant="outlined"
+                label={<FormLabel label={label} required={props.required} />}
+                InputProps={{
+                  ...params.InputProps,
+                  endAdornment: (
+                    <>
+                      {loading ? (
+                        <CircularProgress color="inherit" size={20} />
+                      ) : null}
+                      {params.InputProps.endAdornment}
+                    </>
+                  ),
+                }}
+                {...params}
+              />
+            )}
+          />
+          {error && (
+            <Typography
+              fontSize={12}
+              sx={{
+                paddingLeft: '2px',
+                marginTop: '2px',
+              }}
+              color="error"
+            >
+              {error?.message}
+            </Typography>
+          )}
+        </Box>
+      )}
+    />
+  )
+}

package/src/components/HookForm/DatePicker.tsx

@@ -1,40 +1,40 @@
-import { Controller } from 'react-hook-form'
-import { DatePicker } from '../Input'
-import { IDatePicker } from '../Input/DatePicker'
-interface Props extends Omit<IDatePicker, 'onChange' | 'value'> {
-  name: string
-  control: any
-}
-
-export default function FormDatePicker({
-  name,
-  control,
-  minDate,
-  maxDate,
-  label,
-  required = false,
-  ...rest
-}: Props) {
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => (
-        <DatePicker
-          label={label}
-          required={required}
-          onChange={field.onChange}
-          value={field.value}
-          minDate={minDate}
-          maxDate={maxDate}
-          inputProps={{
-            ...rest.inputProps,
-            error: !!error,
-            helperText: error?.message ?? '',
-          }}
-          {...rest}
-        />
-      )}
-    />
-  )
-}
+import { Controller } from 'react-hook-form'
+import { DatePicker } from '../Input'
+import { IDatePicker } from '../Input/DatePicker'
+interface Props extends Omit<IDatePicker, 'onChange' | 'value'> {
+  name: string
+  control: any
+}
+
+export default function FormDatePicker({
+  name,
+  control,
+  minDate,
+  maxDate,
+  label,
+  required = false,
+  ...rest
+}: Props) {
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <DatePicker
+          label={label}
+          required={required}
+          onChange={field.onChange}
+          value={field.value}
+          minDate={minDate}
+          maxDate={maxDate}
+          inputProps={{
+            ...rest.inputProps,
+            error: !!error,
+            helperText: error?.message ?? '',
+          }}
+          {...rest}
+        />
+      )}
+    />
+  )
+}

package/src/components/HookForm/DateTimePicker.tsx

@@ -1,47 +1,47 @@
-import { Controller } from 'react-hook-form'
-import DateTimePicker, { IDateTimePicker } from '../Input/DateTimePicker'
-
-interface Props extends Omit<IDateTimePicker, 'onChange' | 'value'> {
-  name: string
-  control: any
-}
-
-export default function FormDateTimePicker({
-  name,
-  control,
-  label,
-  required,
-  minDate,
-  maxDate,
-  minTime,
-  maxTime,
-  ...rest
-}: Props) {
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => (
-        <DateTimePicker
-          name={name}
-          label={label}
-          required={required}
-          onChange={(v) => {
-            field.onChange(v)
-          }}
-          value={field.value}
-          minDate={minDate}
-          maxDate={maxDate}
-          minTime={minTime}
-          maxTime={maxTime}
-          inputProps={{
-            ...rest.inputProps,
-            error: !!error,
-            helperText: error?.message ?? '',
-          }}
-          {...rest}
-        />
-      )}
-    />
-  )
-}
+import { Controller } from 'react-hook-form'
+import DateTimePicker, { IDateTimePicker } from '../Input/DateTimePicker'
+
+interface Props extends Omit<IDateTimePicker, 'onChange' | 'value'> {
+  name: string
+  control: any
+}
+
+export default function FormDateTimePicker({
+  name,
+  control,
+  label,
+  required,
+  minDate,
+  maxDate,
+  minTime,
+  maxTime,
+  ...rest
+}: Props) {
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <DateTimePicker
+          name={name}
+          label={label}
+          required={required}
+          onChange={(v) => {
+            field.onChange(v)
+          }}
+          value={field.value}
+          minDate={minDate}
+          maxDate={maxDate}
+          minTime={minTime}
+          maxTime={maxTime}
+          inputProps={{
+            ...rest.inputProps,
+            error: !!error,
+            helperText: error?.message ?? '',
+          }}
+          {...rest}
+        />
+      )}
+    />
+  )
+}

package/src/components/HookForm/FormLabel.tsx

@@ -1,14 +1,14 @@
-import { Typography } from '@mui/material'
-
-export default function FormLabel({ label, required }) {
-  return (
-    <>
-      {label}
-      {required && (
-        <Typography fontSize={14} component={'span'} color="error">
-          {' *'}
-        </Typography>
-      )}
-    </>
-  )
-}
+import { Typography } from '@mui/material'
+
+export default function FormLabel({ label, required }) {
+  return (
+    <>
+      {label}
+      {required && (
+        <Typography fontSize={14} component={'span'} color="error">
+          {' *'}
+        </Typography>
+      )}
+    </>
+  )
+}

package/src/components/HookForm/MultiCheckbox.tsx

@@ -1,69 +1,69 @@
-import {
-  Box,
-  BoxProps,
-  FormGroup,
-  FormGroupProps,
-  FormHelperText,
-} from '@mui/material'
-import { ReactNode } from 'react'
-import { Controller } from 'react-hook-form'
-import { FormLabel, SingleCheckbox } from '../Input'
-import { IOption } from '../Input/types'
-
-interface Props extends FormGroupProps {
-  label?: ReactNode
-  name: string
-  control: any
-  options: IOption[]
-  required?: boolean
-  row?: boolean
-  containerProps?: BoxProps
-}
-
-export default function FormMultiCheckbox({
-  name,
-  control,
-  label = '',
-  options = [],
-  required = false,
-  row = true,
-  containerProps,
-  ...rest
-}: Props) {
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => (
-        <Box width="100%" {...containerProps}>
-          <FormLabel label={label} name={name} required={required} />
-          <FormGroup row={row} sx={{ flexWrap: 'wrap' }} {...rest}>
-            {options?.map((item, index) => (
-              <SingleCheckbox
-                key={index}
-                name={name}
-                checked={field?.value
-                  ?.map((item: any) => item?.value)
-                  ?.includes(item?.value)}
-                label={item.label}
-                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)
-                  }
-                }}
-              />
-            ))}
-          </FormGroup>
-          {error && <FormHelperText>{error.message}</FormHelperText>}
-        </Box>
-      )}
-    />
-  )
-}
+import {
+  Box,
+  BoxProps,
+  FormGroup,
+  FormGroupProps,
+  FormHelperText,
+} from '@mui/material'
+import { ReactNode } from 'react'
+import { Controller } from 'react-hook-form'
+import { FormLabel, SingleCheckbox } from '../Input'
+import { IOption } from '../Input/types'
+
+interface Props extends FormGroupProps {
+  label?: ReactNode
+  name: string
+  control: any
+  options: IOption[]
+  required?: boolean
+  row?: boolean
+  containerProps?: BoxProps
+}
+
+export default function FormMultiCheckbox({
+  name,
+  control,
+  label = '',
+  options = [],
+  required = false,
+  row = true,
+  containerProps,
+  ...rest
+}: Props) {
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <Box width="100%" {...containerProps}>
+          <FormLabel label={label} name={name} required={required} />
+          <FormGroup row={row} sx={{ flexWrap: 'wrap' }} {...rest}>
+            {options?.map((item, index) => (
+              <SingleCheckbox
+                key={index}
+                name={name}
+                checked={field?.value
+                  ?.map((item: any) => item?.value)
+                  ?.includes(item?.value)}
+                label={item.label}
+                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)
+                  }
+                }}
+              />
+            ))}
+          </FormGroup>
+          {error && <FormHelperText>{error.message}</FormHelperText>}
+        </Box>
+      )}
+    />
+  )
+}

package/src/components/HookForm/MultiSelect.tsx

@@ -1,53 +1,53 @@
-import { ReactNode } from 'react'
-import { Controller } from 'react-hook-form'
-import { MultiSelect } from '../Input'
-import { IOption } from '../Input/types'
-
-interface MultiSelectProps {
-  control: any
-  label: ReactNode
-  name: string
-  options: IOption[]
-  placeholder?: string
-  loading?: boolean
-  required?: boolean
-  value?: IOption[] | IOption
-  onChange?: (value: IOption[] | IOption) => void
-  multiple?: boolean
-}
-
-export default function FormMultiSelect({
-  control,
-  name,
-  options,
-  label,
-  loading,
-  required,
-  multiple = true,
-  ...props
-}: MultiSelectProps) {
-  return (
-    <Controller
-      control={control}
-      name={name}
-      render={({ field, fieldState: { error } }) => {
-        return (
-          <MultiSelect
-            multiple={multiple}
-            value={field.value}
-            label={label}
-            onChange={(value) => {
-              field.onChange(value)
-            }}
-            loading={loading}
-            options={options || []}
-            error={!!error}
-            required={required}
-            helperText={error ? error.message : null}
-            {...props}
-          />
-        )
-      }}
-    />
-  )
-}
+import { ReactNode } from 'react'
+import { Controller } from 'react-hook-form'
+import { MultiSelect } from '../Input'
+import { IOption } from '../Input/types'
+
+interface MultiSelectProps {
+  control: any
+  label: ReactNode
+  name: string
+  options: IOption[]
+  placeholder?: string
+  loading?: boolean
+  required?: boolean
+  value?: IOption[] | IOption
+  onChange?: (value: IOption[] | IOption) => void
+  multiple?: boolean
+}
+
+export default function FormMultiSelect({
+  control,
+  name,
+  options,
+  label,
+  loading,
+  required,
+  multiple = true,
+  ...props
+}: MultiSelectProps) {
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field, fieldState: { error } }) => {
+        return (
+          <MultiSelect
+            multiple={multiple}
+            value={field.value}
+            label={label}
+            onChange={(value) => {
+              field.onChange(value)
+            }}
+            loading={loading}
+            options={options || []}
+            error={!!error}
+            required={required}
+            helperText={error ? error.message : null}
+            {...props}
+          />
+        )
+      }}
+    />
+  )
+}