@campxdev/shared 0.5.20 → 0.5.22

package/src/components/HookForm/AutoCompleteSearch.tsx

@@ -1,143 +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>
-      )}
-    />
-  )
-}
-
-export function MyAutoComplete({
-  value,
-  onChange,
-  options,
-  label,
-  loading,
-  ...props
-}) {
-  return (
-    <Autocomplete
-      loading={loading}
-      value={value}
-      fullWidth
-      freeSolo
-      onChange={(e, value) => {
-        onChange(value.value)
-      }}
-      options={options || []}
-      getOptionLabel={(option: Option) => option?.label || ''}
-      renderInput={(params) => (
-        <TextField
-          {...params}
-          variant="outlined"
-          label={<FormLabel label={label} required={props.required} />}
-        />
-      )}
-    />
-  )
-}
+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,65 +1,65 @@
-import { Box, TextField, Typography } from '@mui/material'
-import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers'
-import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
-import { Controller } from 'react-hook-form'
-import FormLabel from './FormLabel'
-interface Props {
-  label?: string
-  name: string
-  size?: 'small' | 'medium'
-  control: any
-  minDate?: any
-  maxDate?: any
-  required?: boolean
-}
-export default function FormDatePicker(props: Props) {
-  const {
-    name,
-    size = 'small',
-    control,
-    label = '',
-    minDate,
-    maxDate,
-    required = false,
-  } = props
-  return (
-    <LocalizationProvider dateAdapter={AdapterMoment}>
-      <Controller
-        name={name}
-        control={control}
-        render={({ field, fieldState: { error } }) => (
-          <Box>
-            <DatePicker
-              label={<FormLabel label={label} required={required} />}
-              mask="__/__/____"
-              inputFormat="DD/MM/yyyy"
-              value={field.value ?? null}
-              onChange={field.onChange}
-              minDate={minDate}
-              maxDate={maxDate}
-              renderInput={(params) => (
-                <TextField
-                  fullWidth
-                  size={size}
-                  {...params}
-                  error={Boolean(error)}
-                  onBlur={field.onBlur}
-                />
-              )}
-            />
-            {error && (
-              <Typography
-                variant="caption"
-                component={'div'}
-                sx={{ pl: '2px' }}
-                color="rgb(211, 47, 47)"
-              >
-                {error.message}
-              </Typography>
-            )}
-          </Box>
-        )}
-      />
-    </LocalizationProvider>
-  )
-}
+import { Box, TextField, Typography } from '@mui/material'
+import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers'
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
+import { Controller } from 'react-hook-form'
+import FormLabel from './FormLabel'
+interface Props {
+  label?: string
+  name: string
+  size?: 'small' | 'medium'
+  control: any
+  minDate?: any
+  maxDate?: any
+  required?: boolean
+}
+export default function FormDatePicker(props: Props) {
+  const {
+    name,
+    size = 'small',
+    control,
+    label = '',
+    minDate,
+    maxDate,
+    required = false,
+  } = props
+  return (
+    <LocalizationProvider dateAdapter={AdapterMoment}>
+      <Controller
+        name={name}
+        control={control}
+        render={({ field, fieldState: { error } }) => (
+          <Box>
+            <DatePicker
+              label={<FormLabel label={label} required={required} />}
+              mask="__/__/____"
+              inputFormat="DD/MM/yyyy"
+              value={field.value ?? null}
+              onChange={field.onChange}
+              minDate={minDate}
+              maxDate={maxDate}
+              renderInput={(params) => (
+                <TextField
+                  fullWidth
+                  size={size}
+                  {...params}
+                  error={Boolean(error)}
+                  onBlur={field.onBlur}
+                />
+              )}
+            />
+            {error && (
+              <Typography
+                variant="caption"
+                component={'div'}
+                sx={{ pl: '2px' }}
+                color="rgb(211, 47, 47)"
+              >
+                {error.message}
+              </Typography>
+            )}
+          </Box>
+        )}
+      />
+    </LocalizationProvider>
+  )
+}

package/src/components/HookForm/DateTimePicker.tsx

@@ -1,70 +1,70 @@
-import { InputAdornment, TextField, Typography } from '@mui/material'
-import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers'
-import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
-import { Controller } from 'react-hook-form'
-import DateRangeIcon from '@mui/icons-material/DateRange'
-interface Props {
-  label?: string
-  name: string
-  size?: 'small' | 'medium'
-  control: any
-  required?: boolean
-  minDate?: any
-}
-export default function FormDateTimePicker(props: Props) {
-  const { name, size = 'small', control, label = '', required, minDate } = props
-  return (
-    <LocalizationProvider dateAdapter={AdapterMoment}>
-      <Controller
-        name={name}
-        control={control}
-        render={({ field, fieldState: { error } }) => (
-          <>
-            <DateTimePicker
-              label={
-                <>
-                  {label}
-                  {required && (
-                    <Typography fontSize={14} component={'span'} color="error">
-                      {' *'}
-                    </Typography>
-                  )}
-                </>
-              }
-              minDate={minDate && minDate}
-              mask="__/__/____ __:__ _M"
-              inputFormat="DD/MM/yyyy hh:mm a"
-              value={field.value || null}
-              onChange={field.onChange}
-              InputProps={{
-                endAdornment: (
-                  <InputAdornment position="end">
-                    <DateRangeIcon />
-                  </InputAdornment>
-                ),
-              }}
-              renderInput={(params) => (
-                <TextField
-                  fullWidth
-                  size={size}
-                  {...params}
-                  error={Boolean(error)}
-                  onBlur={field.onBlur}
-                />
-              )}
-            />
-            {error && (
-              <Typography
-                variant="caption"
-                sx={{ pl: '2px' }}
-                color="rgb(211, 47, 47)"
-              >
-                {error.message}
-              </Typography>
-            )}
-          </>
-        )}
-      />
-    </LocalizationProvider>
-  )
-}
+import { InputAdornment, TextField, Typography } from '@mui/material'
+import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers'
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
+import { Controller } from 'react-hook-form'
+import DateRangeIcon from '@mui/icons-material/DateRange'
+interface Props {
+  label?: string
+  name: string
+  size?: 'small' | 'medium'
+  control: any
+  required?: boolean
+  minDate?: any
+}
+export default function FormDateTimePicker(props: Props) {
+  const { name, size = 'small', control, label = '', required, minDate } = props
+  return (
+    <LocalizationProvider dateAdapter={AdapterMoment}>
+      <Controller
+        name={name}
+        control={control}
+        render={({ field, fieldState: { error } }) => (
+          <>
+            <DateTimePicker
+              label={
+                <>
+                  {label}
+                  {required && (
+                    <Typography fontSize={14} component={'span'} color="error">
+                      {' *'}
+                    </Typography>
+                  )}
+                </>
+              }
+              minDate={minDate && minDate}
+              mask="__/__/____ __:__ _M"
+              inputFormat="DD/MM/yyyy hh:mm a"
+              value={field.value || null}
+              onChange={field.onChange}
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <DateRangeIcon />
+                  </InputAdornment>
+                ),
+              }}
+              renderInput={(params) => (
+                <TextField
+                  fullWidth
+                  size={size}
+                  {...params}
+                  error={Boolean(error)}
+                  onBlur={field.onBlur}
+                />
+              )}
+            />
+            {error && (
+              <Typography
+                variant="caption"
+                sx={{ pl: '2px' }}
+                color="rgb(211, 47, 47)"
+              >
+                {error.message}
+              </Typography>
+            )}
+          </>
+        )}
+      />
+    </LocalizationProvider>
+  )
+}

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>
+      )}
+    </>
+  )
+}