@campxdev/shared 1.8.14 → 1.8.16

package/src/components/HookForm/AutoCompleteSearch.tsx

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

package/src/components/HookForm/DatePicker.tsx

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

package/src/components/HookForm/DateTimePicker.tsx

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

package/src/components/HookForm/FormLabel.tsx

@@ -0,0 +1,14 @@
+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

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

package/src/components/HookForm/MultiSelect.tsx

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

package/src/components/HookForm/RadioGroup.tsx

@@ -0,0 +1,47 @@
+import { Box, BoxProps, RadioGroupProps } from '@mui/material'
+import { ReactNode } from 'react'
+import { Controller } from 'react-hook-form'
+import { RadioGroup } from '../Input'
+
+interface Props extends RadioGroupProps {
+  label?: ReactNode
+  name: string
+  control: any
+  sx?: any
+  row?: boolean
+  required?: boolean
+  options: { value: any; label: string | ReactNode }[]
+  containerProps?: BoxProps
+}
+
+export default function FormRadioGroup({
+  name,
+  control,
+  label,
+  options = [],
+  row = false,
+  containerProps,
+  ...rest
+}: Props) {
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <Box width="100%" {...containerProps}>
+          <RadioGroup
+            row={row}
+            name={name}
+            label={label}
+            options={options}
+            value={field.value}
+            onChange={field.onChange}
+            error={error ? true : false}
+            helperText={error ? error?.message : null}
+            {...rest}
+          />
+        </Box>
+      )}
+    />
+  )
+}

package/src/components/HookForm/SingleCheckbox.tsx

@@ -0,0 +1,34 @@
+import { CheckboxProps } from '@mui/material'
+import { ReactNode } from 'react'
+import { Controller } from 'react-hook-form'
+import { SingleCheckbox } from '../Input'
+
+interface Props extends CheckboxProps {
+  label?: ReactNode
+  name: string
+  control: any
+}
+
+export default function FormSingleCheckbox({
+  name,
+  control,
+  label,
+  onChange,
+  checked,
+  ...rest
+}: Props) {
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <SingleCheckbox
+          checked={checked ?? field.value}
+          onChange={onChange ?? field.onChange}
+          label={label}
+          {...rest}
+        />
+      )}
+    />
+  )
+}

package/src/components/HookForm/SingleSelect.tsx

@@ -0,0 +1,46 @@
+import { SelectProps } from '@mui/material'
+import { ReactNode } from 'react'
+import { Controller } from 'react-hook-form'
+import { SingleSelect } from '../Input'
+
+type Props = {
+  name: string
+  control: any
+  options: Array<{ label: ReactNode; value: any }>
+  firstItemEmpty?: boolean
+} & SelectProps
+
+export default function FormSingleSelect(props: Props) {
+  const {
+    name = 'select',
+    options = [],
+    control,
+    label,
+    onChange,
+    value,
+    firstItemEmpty = false,
+  } = props
+
+  const inputOptions = firstItemEmpty
+    ? [{ label: 'All', value: '__empty__' }, ...options]
+    : options
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <SingleSelect
+          label={label}
+          name={name}
+          onChange={onChange ?? field.onChange}
+          value={value ?? field?.value}
+          options={inputOptions}
+          error={!!error}
+          helperText={error?.message}
+          {...props}
+        />
+      )}
+    />
+  )
+}

package/src/components/HookForm/TextField.tsx

@@ -0,0 +1,40 @@
+import { TextFieldProps as MuiTextFieldProps } from '@mui/material'
+import React from 'react'
+import { Controller } from 'react-hook-form'
+import { TextField } from '../Input'
+
+type MyTextFieldProps = MuiTextFieldProps & {
+  control: any
+  label?: string
+  name: string
+  required?: boolean
+}
+
+export default function FormTextField({
+  name,
+  control,
+  label,
+  required,
+  onChange,
+  value,
+  ...rest
+}: MyTextFieldProps) {
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field, fieldState: { error } }) => (
+        <TextField
+          name={name}
+          label={label}
+          onChange={onChange ?? field.onChange}
+          value={value ?? field?.value}
+          required={required}
+          error={error ? true : false}
+          helperText={error ? error.message : null}
+          {...rest}
+        />
+      )}
+    />
+  )
+}

package/src/components/HookForm/TimePicker.tsx

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

package/src/components/HookForm/index.ts

@@ -0,0 +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,
+}