@campxdev/shared 1.4.9 → 1.4.11

package/src/components/Input/AutoCompleteSearch.tsx

@@ -1,121 +1,121 @@
-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 AutoCompleteSearch({
-  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} name={name} />
-            }
-            {...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}
-                    name={name}
-                  />
-                }
-                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 AutoCompleteSearch({
+  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} name={name} />
+            }
+            {...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}
+                    name={name}
+                  />
+                }
+                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/Input/DatePicker.tsx

@@ -1,69 +1,69 @@
-import EventIcon from '@mui/icons-material/Event'
-import { InputAdornment, TextFieldProps } from '@mui/material'
-import 'flatpickr/dist/flatpickr.css'
-import { ReactNode } from 'react'
-import Flatpickr, { DateTimePickerProps } from 'react-flatpickr'
-import TextField from './TextField'
-
-export interface IDatePicker {
-  label: ReactNode
-  name?: string
-  control?: any
-  minDate?: Date | string | number
-  maxDate?: Date | string | number
-  required?: boolean
-  value: Date | null
-  onChange: (value: Date) => void
-  placeholder?: string
-  inputProps?: TextFieldProps
-}
-
-export default function FormDatePicker({
-  name,
-  label,
-  minDate,
-  maxDate,
-  value,
-  onChange,
-  placeholder,
-  required = false,
-  ...rest
-}: IDatePicker) {
-  return (
-    <Flatpickr
-      onChange={(dates: Date[]) => {
-        if (onChange) onChange(dates[0])
-      }}
-      options={{
-        dateFormat: 'd-m-Y',
-        minDate,
-        maxDate,
-      }}
-      value={value || null}
-      render={(
-        props: Omit<DateTimePickerProps, 'options' | 'render'>,
-        ref: (node: HTMLInputElement | null) => void,
-      ) => {
-        return (
-          <TextField
-            placeholder={placeholder}
-            label={label}
-            name={name}
-            variant="outlined"
-            autoComplete="off"
-            required={required}
-            inputRef={ref}
-            InputProps={{
-              endAdornment: (
-                <InputAdornment position="end">
-                  <EventIcon />
-                </InputAdornment>
-              ),
-            }}
-            {...rest.inputProps}
-          />
-        )
-      }}
-    />
-  )
-}
+import EventIcon from '@mui/icons-material/Event'
+import { InputAdornment, TextFieldProps } from '@mui/material'
+import 'flatpickr/dist/flatpickr.css'
+import { ReactNode } from 'react'
+import Flatpickr, { DateTimePickerProps } from 'react-flatpickr'
+import TextField from './TextField'
+
+export interface IDatePicker {
+  label: ReactNode
+  name?: string
+  control?: any
+  minDate?: Date | string | number
+  maxDate?: Date | string | number
+  required?: boolean
+  value: Date | null
+  onChange: (value: Date) => void
+  placeholder?: string
+  inputProps?: TextFieldProps
+}
+
+export default function FormDatePicker({
+  name,
+  label,
+  minDate,
+  maxDate,
+  value,
+  onChange,
+  placeholder,
+  required = false,
+  ...rest
+}: IDatePicker) {
+  return (
+    <Flatpickr
+      onChange={(dates: Date[]) => {
+        if (onChange) onChange(dates[0])
+      }}
+      options={{
+        dateFormat: 'd-m-Y',
+        minDate,
+        maxDate,
+      }}
+      value={value || null}
+      render={(
+        props: Omit<DateTimePickerProps, 'options' | 'render'>,
+        ref: (node: HTMLInputElement | null) => void,
+      ) => {
+        return (
+          <TextField
+            placeholder={placeholder}
+            label={label}
+            name={name}
+            variant="outlined"
+            autoComplete="off"
+            required={required}
+            inputRef={ref}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <EventIcon />
+                </InputAdornment>
+              ),
+            }}
+            {...rest.inputProps}
+          />
+        )
+      }}
+    />
+  )
+}

package/src/components/Input/DateRangePicker.tsx

@@ -1,131 +1,131 @@
-import { DateRangeIcon } from '../IconButtons'
-import { Box, styled, TextField } from '@mui/material'
-import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers'
-import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
-import { useState } from 'react'
-interface Props {
-  label?: string
-  name?: string
-  size?: 'small' | 'medium'
-  control?: any
-  minDate?: any
-  maxDate?: any
-  required?: boolean
-
-  onChangeFromDate: any
-  onChangeToDate: any
-  fromValue: any
-  toValue: any
-}
-export default function DateRangePicker(props: Props) {
-  const {
-    name,
-    size = 'small',
-    label = '',
-    minDate,
-    maxDate,
-    required = false,
-    fromValue,
-    toValue,
-    onChangeFromDate,
-    onChangeToDate,
-  } = props
-  const [fromOpen, setFromOpen] = useState(false)
-  const [toOpen, setToOpen] = useState(false)
-  return (
-    <LocalizationProvider dateAdapter={AdapterMoment}>
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          border: '1px solid #0000001A',
-          borderRadius: '10px',
-          padding: '5px',
-        }}
-      >
-        <StyledDatepicker
-          value={fromValue}
-          onChange={onChangeFromDate}
-          label={'start date'}
-          mask="__/__/____"
-          inputFormat="DD/MM/yyyy"
-          closeOnSelect={true}
-          OpenPickerButtonProps={{
-            onFocus: (e) => {
-              setFromOpen(true)
-            },
-          }}
-          onClose={() => {
-            setFromOpen(false)
-          }}
-          PopperProps={{
-            disablePortal: true,
-          }}
-          InputProps={{
-            onFocus: () => {
-              setFromOpen(true)
-            },
-          }}
-          open={fromOpen}
-          renderInput={(params) => (
-            <TextField sx={{ width: '200px' }} size={'small'} {...params} />
-          )}
-        />
-        <Box>
-          <DateRangeIcon />
-        </Box>
-        <StyledDatepicker
-          onChange={onChangeToDate}
-          value={toValue}
-          label={'end date'}
-          mask="__/__/____"
-          inputFormat="DD/MM/yyyy"
-          OpenPickerButtonProps={{
-            onFocus: (e) => {
-              setToOpen(true)
-            },
-          }}
-          onClose={() => {
-            setToOpen(false)
-          }}
-          PopperProps={{
-            disablePortal: true,
-          }}
-          InputProps={{
-            onFocus: () => {
-              setToOpen(true)
-            },
-          }}
-          open={toOpen}
-          renderInput={(params) => (
-            <TextField sx={{ width: '200px' }} size={'small'} {...params} />
-          )}
-        />
-      </Box>
-      {/* {error && (
-          <Typography
-            variant="caption"
-            component={'div'}
-            sx={{ pl: '2px' }}
-            color="rgb(211, 47, 47)"
-          >
-            {error.message}
-          </Typography>
-        )} */}
-    </LocalizationProvider>
-  )
-}
-
-const StyledDatepicker = styled(DatePicker)({
-  '& .MuiFormLabel-root .Mui-focused': {
-    display: 'none',
-  },
-  '& .MuiInputAdornment-root': {
-    display: 'none',
-  },
-
-  '& fieldset': {
-    display: 'none',
-  },
-})
+import { DateRangeIcon } from '../IconButtons'
+import { Box, styled, TextField } from '@mui/material'
+import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers'
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
+import { useState } from 'react'
+interface Props {
+  label?: string
+  name?: string
+  size?: 'small' | 'medium'
+  control?: any
+  minDate?: any
+  maxDate?: any
+  required?: boolean
+
+  onChangeFromDate: any
+  onChangeToDate: any
+  fromValue: any
+  toValue: any
+}
+export default function DateRangePicker(props: Props) {
+  const {
+    name,
+    size = 'small',
+    label = '',
+    minDate,
+    maxDate,
+    required = false,
+    fromValue,
+    toValue,
+    onChangeFromDate,
+    onChangeToDate,
+  } = props
+  const [fromOpen, setFromOpen] = useState(false)
+  const [toOpen, setToOpen] = useState(false)
+  return (
+    <LocalizationProvider dateAdapter={AdapterMoment}>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          border: '1px solid #0000001A',
+          borderRadius: '10px',
+          padding: '5px',
+        }}
+      >
+        <StyledDatepicker
+          value={fromValue}
+          onChange={onChangeFromDate}
+          label={'start date'}
+          mask="__/__/____"
+          inputFormat="DD/MM/yyyy"
+          closeOnSelect={true}
+          OpenPickerButtonProps={{
+            onFocus: (e) => {
+              setFromOpen(true)
+            },
+          }}
+          onClose={() => {
+            setFromOpen(false)
+          }}
+          PopperProps={{
+            disablePortal: true,
+          }}
+          InputProps={{
+            onFocus: () => {
+              setFromOpen(true)
+            },
+          }}
+          open={fromOpen}
+          renderInput={(params) => (
+            <TextField sx={{ width: '200px' }} size={'small'} {...params} />
+          )}
+        />
+        <Box>
+          <DateRangeIcon />
+        </Box>
+        <StyledDatepicker
+          onChange={onChangeToDate}
+          value={toValue}
+          label={'end date'}
+          mask="__/__/____"
+          inputFormat="DD/MM/yyyy"
+          OpenPickerButtonProps={{
+            onFocus: (e) => {
+              setToOpen(true)
+            },
+          }}
+          onClose={() => {
+            setToOpen(false)
+          }}
+          PopperProps={{
+            disablePortal: true,
+          }}
+          InputProps={{
+            onFocus: () => {
+              setToOpen(true)
+            },
+          }}
+          open={toOpen}
+          renderInput={(params) => (
+            <TextField sx={{ width: '200px' }} size={'small'} {...params} />
+          )}
+        />
+      </Box>
+      {/* {error && (
+          <Typography
+            variant="caption"
+            component={'div'}
+            sx={{ pl: '2px' }}
+            color="rgb(211, 47, 47)"
+          >
+            {error.message}
+          </Typography>
+        )} */}
+    </LocalizationProvider>
+  )
+}
+
+const StyledDatepicker = styled(DatePicker)({
+  '& .MuiFormLabel-root .Mui-focused': {
+    display: 'none',
+  },
+  '& .MuiInputAdornment-root': {
+    display: 'none',
+  },
+
+  '& fieldset': {
+    display: 'none',
+  },
+})