@campxdev/shared 1.0.5 → 1.1.1

package/src/components/HookForm/SingleSelect.tsx

@@ -1,94 +1,94 @@
-import {
-  FormControl,
-  InputLabel,
-  MenuItem,
-  Select,
-  SelectProps,
-  styled,
-  Typography,
-} from '@mui/material'
-import { ReactNode } from 'react'
-import { Controller } from 'react-hook-form'
-import FormLabel from './FormLabel'
-type Props = {
-  name?: string
-  control?: any
-  options: Array<{ label: ReactNode; value: any }>
-  label?: string
-  textColor?: string
-  onChange?: (value: any) => void
-  required?: boolean
-  firstItemEmpty?: boolean
-} & SelectProps
-
-const StyledFormControl = styled(FormControl)(({ theme }) => ({}))
-
-export default function FormSingleSelect(props: Props) {
-  const {
-    name = 'select',
-    options = [],
-    control,
-    label,
-    textColor,
-    onChange,
-    required,
-    firstItemEmpty = false,
-    size = 'medium',
-  } = props
-
-  const inputOptions = firstItemEmpty
-    ? [{ label: 'All', value: '__empty__' }, ...options]
-    : options
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => (
-        <StyledFormControl size={size} fullWidth>
-          <InputLabel id={name}>
-            <FormLabel required={required} label={label} />
-          </InputLabel>
-          <Select
-            multiple={false}
-            size={size}
-            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>
-          {error && (
-            <Typography
-              fontSize={12}
-              sx={{
-                paddingLeft: '2px',
-                marginTop: '2px',
-              }}
-              color="error"
-            >
-              {error.message}
-            </Typography>
-          )}
-        </StyledFormControl>
-      )}
-    />
-  )
-}
+import {
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  SelectProps,
+  styled,
+  Typography,
+} from '@mui/material'
+import { ReactNode } from 'react'
+import { Controller } from 'react-hook-form'
+import FormLabel from './FormLabel'
+type Props = {
+  name?: string
+  control?: any
+  options: Array<{ label: ReactNode; value: any }>
+  label?: string
+  textColor?: string
+  onChange?: (value: any) => void
+  required?: boolean
+  firstItemEmpty?: boolean
+} & SelectProps
+
+const StyledFormControl = styled(FormControl)(({ theme }) => ({}))
+
+export default function FormSingleSelect(props: Props) {
+  const {
+    name = 'select',
+    options = [],
+    control,
+    label,
+    textColor,
+    onChange,
+    required,
+    firstItemEmpty = false,
+    size = 'medium',
+  } = props
+
+  const inputOptions = firstItemEmpty
+    ? [{ label: 'All', value: '__empty__' }, ...options]
+    : options
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <StyledFormControl size={size} fullWidth>
+          <InputLabel id={name}>
+            <FormLabel required={required} label={label} />
+          </InputLabel>
+          <Select
+            multiple={false}
+            size={size}
+            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>
+          {error && (
+            <Typography
+              fontSize={12}
+              sx={{
+                paddingLeft: '2px',
+                marginTop: '2px',
+              }}
+              color="error"
+            >
+              {error.message}
+            </Typography>
+          )}
+        </StyledFormControl>
+      )}
+    />
+  )
+}

package/src/components/HookForm/TextField.tsx

@@ -1,74 +1,74 @@
-import {
-  TextField as MuiTextField,
-  TextFieldProps as MuiTextFieldProps,
-  Typography,
-} from '@mui/material'
-import React from 'react'
-import { Controller } from 'react-hook-form'
-import FormLabel from './FormLabel'
-
-type MyTextFieldProps = MuiTextFieldProps & {
-  control?: any
-  label?: string
-  name?: string
-  value?: any
-  hookForm?: boolean
-  required?: boolean
-  handleChange?: React.ChangeEventHandler<
-    HTMLTextAreaElement | HTMLInputElement
-  >
-}
-
-export default function FormTextField({
-  name,
-  control,
-  label,
-  value,
-  handleChange,
-  required = false,
-  hookForm = true,
-  ...rest
-}: MyTextFieldProps) {
-  if (!hookForm)
-    return (
-      <MuiTextField
-        label={
-          <>
-            {label}
-            {required && (
-              <Typography fontSize={14} component={'span'} color="error">
-                {' *'}
-              </Typography>
-            )}
-          </>
-        }
-        value={value}
-        name={name}
-        onChange={handleChange}
-        {...rest}
-      />
-    )
-  return (
-    <Controller
-      control={control}
-      name={name}
-      defaultValue=""
-      render={({ field: { onChange, value }, fieldState: { error } }) => (
-        <MuiTextField
-          {...rest}
-          name={name}
-          label={<FormLabel required={required} label={label} />}
-          onChange={(e) => {
-            onChange(e)
-            if (handleChange) {
-              handleChange(e)
-            }
-          }}
-          value={value}
-          error={error ? true : false}
-          helperText={error ? error.message : null}
-        />
-      )}
-    />
-  )
-}
+import {
+  TextField as MuiTextField,
+  TextFieldProps as MuiTextFieldProps,
+  Typography,
+} from '@mui/material'
+import React from 'react'
+import { Controller } from 'react-hook-form'
+import FormLabel from './FormLabel'
+
+type MyTextFieldProps = MuiTextFieldProps & {
+  control?: any
+  label?: string
+  name?: string
+  value?: any
+  hookForm?: boolean
+  required?: boolean
+  handleChange?: React.ChangeEventHandler<
+    HTMLTextAreaElement | HTMLInputElement
+  >
+}
+
+export default function FormTextField({
+  name,
+  control,
+  label,
+  value,
+  handleChange,
+  required = false,
+  hookForm = true,
+  ...rest
+}: MyTextFieldProps) {
+  if (!hookForm)
+    return (
+      <MuiTextField
+        label={
+          <>
+            {label}
+            {required && (
+              <Typography fontSize={14} component={'span'} color="error">
+                {' *'}
+              </Typography>
+            )}
+          </>
+        }
+        value={value}
+        name={name}
+        onChange={handleChange}
+        {...rest}
+      />
+    )
+  return (
+    <Controller
+      control={control}
+      name={name}
+      defaultValue=""
+      render={({ field: { onChange, value }, fieldState: { error } }) => (
+        <MuiTextField
+          {...rest}
+          name={name}
+          label={<FormLabel required={required} label={label} />}
+          onChange={(e) => {
+            onChange(e)
+            if (handleChange) {
+              handleChange(e)
+            }
+          }}
+          value={value}
+          error={error ? true : false}
+          helperText={error ? error.message : null}
+        />
+      )}
+    />
+  )
+}

package/src/components/HookForm/TimePicker.tsx

@@ -1,82 +1,82 @@
-import DateRangeIcon from '@mui/icons-material/DateRange'
-import { InputAdornment, TextField, Typography } from '@mui/material'
-import {
-  LocalizationProvider,
-  TimePicker as MuiTimePicker,
-} from '@mui/x-date-pickers'
-import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
-import { Controller } from 'react-hook-form'
-
-interface Props {
-  label?: string
-  name: string
-  size?: 'small' | 'medium'
-  control: any
-  required?: boolean
-  hookForm?: boolean
-}
-
-export default function FormTimePicker(props: Props) {
-  const {
-    name,
-    size = 'small',
-    control,
-    label = '',
-    required,
-    hookForm = true,
-  } = props
-
-  return (
-    <LocalizationProvider dateAdapter={AdapterMoment}>
-      <Controller
-        name={name}
-        control={control}
-        render={({ field, fieldState: { error } }) => (
-          <>
-            <MuiTimePicker
-              label={
-                <>
-                  {label}
-                  {required && (
-                    <Typography fontSize={14} component={'span'} color="error">
-                      {' *'}
-                    </Typography>
-                  )}
-                </>
-              }
-              mask="__:__ _M"
-              inputFormat="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 DateRangeIcon from '@mui/icons-material/DateRange'
+import { InputAdornment, TextField, Typography } from '@mui/material'
+import {
+  LocalizationProvider,
+  TimePicker as MuiTimePicker,
+} from '@mui/x-date-pickers'
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
+import { Controller } from 'react-hook-form'
+
+interface Props {
+  label?: string
+  name: string
+  size?: 'small' | 'medium'
+  control: any
+  required?: boolean
+  hookForm?: boolean
+}
+
+export default function FormTimePicker(props: Props) {
+  const {
+    name,
+    size = 'small',
+    control,
+    label = '',
+    required,
+    hookForm = true,
+  } = props
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterMoment}>
+      <Controller
+        name={name}
+        control={control}
+        render={({ field, fieldState: { error } }) => (
+          <>
+            <MuiTimePicker
+              label={
+                <>
+                  {label}
+                  {required && (
+                    <Typography fontSize={14} component={'span'} color="error">
+                      {' *'}
+                    </Typography>
+                  )}
+                </>
+              }
+              mask="__:__ _M"
+              inputFormat="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/index.ts

@@ -1,23 +1,23 @@
-import SingleSelect from './SingleSelect'
-import FormDatePicker from './DatePicker'
-import MultiCheckbox from './MultiCheckbox'
-import MultiSelect from './MultiSelect'
-import RadioGroup from './RadioGroup'
-import SingleCheckbox from './SingleCheckbox'
-import AutoCompleteSearch from './AutoCompleteSearch'
-import FormTextField from './TextField'
-import TimePicker from './TimePicker'
-import FormDateTimePicker from './DateTimePicker'
-
-export {
-  SingleSelect as FormSingleSelect,
-  FormDatePicker,
-  FormTextField,
-  MultiCheckbox as FormMultiCheckbox,
-  MultiSelect as FormMultiSelect,
-  RadioGroup as FormRadioGroup,
-  SingleCheckbox as FormSingleCheckbox,
-  AutoCompleteSearch as FormAutoCompleteSearch,
-  TimePicker as FormTimePicker,
-  FormDateTimePicker,
-}
+import SingleSelect from './SingleSelect'
+import FormDatePicker from './DatePicker'
+import MultiCheckbox from './MultiCheckbox'
+import MultiSelect from './MultiSelect'
+import RadioGroup from './RadioGroup'
+import SingleCheckbox from './SingleCheckbox'
+import AutoCompleteSearch from './AutoCompleteSearch'
+import FormTextField from './TextField'
+import TimePicker from './TimePicker'
+import FormDateTimePicker from './DateTimePicker'
+
+export {
+  SingleSelect as FormSingleSelect,
+  FormDatePicker,
+  FormTextField,
+  MultiCheckbox as FormMultiCheckbox,
+  MultiSelect as FormMultiSelect,
+  RadioGroup as FormRadioGroup,
+  SingleCheckbox as FormSingleCheckbox,
+  AutoCompleteSearch as FormAutoCompleteSearch,
+  TimePicker as FormTimePicker,
+  FormDateTimePicker,
+}