@campxdev/shared 1.8.3 → 1.8.5-0.alpha-1

package/src/components/HookForm/MultiSelect.tsx

@@ -1,53 +1,61 @@
-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'
+import { AutocompleteInputChangeReason } from '@mui/material'
+
+interface MultiSelectProps {
+  control: any
+  label: ReactNode
+  name: string
+  options: IOption[]
+  placeholder?: string
+  loading?: boolean
+  onInputChange?: (
+    event: React.SyntheticEvent,
+    value: string,
+    reason: AutocompleteInputChangeReason,
+  ) => void
+  required?: boolean
+  value?: IOption[] | IOption
+  onChange?: (value: IOption[] | IOption) => void
+  multiple?: boolean
+}
+
+export default function FormMultiSelect({
+  control,
+  name,
+  options,
+  label,
+  loading,
+  required,
+  multiple = true,
+  onInputChange,
+  ...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)
+            }}
+            onInputChange={onInputChange}
+            loading={loading}
+            options={options || []}
+            error={!!error}
+            required={required}
+            helperText={error ? error.message : null}
+            {...props}
+          />
+        )
+      }}
+    />
+  )
+}

package/src/components/HookForm/RadioGroup.tsx

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

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

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

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

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

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