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

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,76 +1,87 @@
-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
-  size?: 'medium' | 'small'
-}
-
-export default function FormDatePicker({
-  name,
-  label,
-  minDate,
-  maxDate,
-  value,
-  onChange,
-  placeholder,
-  size = 'medium',
-  required = false,
-  ...rest
-}: IDatePicker) {
-  return (
-    <Flatpickr
-      options={{
-        dateFormat: 'd-m-Y',
-        minDate,
-        maxDate,
-        allowInput: true,
-      }}
-      onChange={(dates: Date[]) => {
-        if (onChange) onChange(dates[0])
-      }}
-      onClose={(dates) => {
-        if (onChange) onChange(dates[0])
-      }}
-      value={value || null}
-      render={(
-        props: Omit<DateTimePickerProps, 'options' | 'render'>,
-        ref: (node: HTMLInputElement | null) => void,
-      ) => {
-        return (
-          <TextField
-            size={size}
-            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 monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
+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
+  size?: 'medium' | 'small'
+  monthSelect?: boolean
+}
+
+const plugins = [
+  monthSelectPlugin({
+    shorthand: true, //defaults to false
+    dateFormat: 'm.y', //defaults to "F Y"
+    altFormat: 'F Y', //defaults to "F Y"
+  }),
+]
+
+export default function FormDatePicker({
+  name,
+  label,
+  minDate,
+  maxDate,
+  value,
+  onChange,
+  placeholder,
+  size = 'medium',
+  required = false,
+  monthSelect,
+  ...rest
+}: IDatePicker) {
+  return (
+    <Flatpickr
+      options={{
+        dateFormat: 'd-m-Y',
+        minDate,
+        maxDate,
+        allowInput: true,
+      }}
+      onChange={(dates: Date[]) => {
+        if (onChange) onChange(dates[0])
+      }}
+      onClose={(dates) => {
+        if (onChange) onChange(dates[0])
+      }}
+      value={value || null}
+      render={(
+        props: Omit<DateTimePickerProps, 'options' | 'render'>,
+        ref: (node: HTMLInputElement | null) => void,
+      ) => {
+        return (
+          <TextField
+            size={size}
+            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,105 +1,105 @@
-import { Box, BoxProps, FormHelperText, styled, SvgIcon } from '@mui/material'
-import { ReactNode, useEffect, useState } from 'react'
-import { DateRangeIcon } from '../IconButtons'
-import DateTimePicker from './DateTimePicker'
-import FormLabel from './FormLabel'
-
-const StyledDateRangePicker = styled(Box)<{ size: 'small' | 'medium' }>(
-  ({ theme, size }) => ({
-    borderRadius: '10px',
-    height: '50px',
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    border: theme.borders.grayLight,
-    '& .MuiOutlinedInput-notchedOutline': {
-      display: 'none',
-    },
-    '& .MuiSvgIcon-root': {
-      margin: '0 20px',
-      marginTop: '8px',
-    },
-    ...(size === 'small' && {
-      borderRadius: '5px',
-      height: '40px',
-      '& .MuiSvgIcon-root': {
-        margin: '0 20px',
-        marginTop: '8px',
-      },
-    }),
-  }),
-)
-
-interface IDateRangePickerProps {
-  value: {
-    start: Date
-    end: Date
-  }
-  onChange: (value: { start: Date; end: Date }) => void
-  enableTime?: boolean
-  size?: 'small' | 'medium'
-  containerProps?: BoxProps
-  label?: ReactNode
-  required?: boolean
-  name?: string
-  error?: boolean
-  helperText?: string
-}
-export default function DateRangePicker({
-  value,
-  onChange,
-  enableTime = false,
-  size = 'medium',
-  containerProps,
-  required,
-  error,
-  helperText,
-  label,
-  name,
-}: IDateRangePickerProps) {
-  const [state, setState] = useState({
-    start: null,
-    end: null,
-  })
-
-  useEffect(() => {
-    setState(value)
-  }, [value])
-
-  return (
-    <Box width={'100%'} {...containerProps}>
-      <FormLabel
-        required={required}
-        name={name ?? 'date-range-picker'}
-        label={label}
-      />
-      <StyledDateRangePicker size={size}>
-        <DateTimePicker
-          placeholder="From Date"
-          value={state.start}
-          onChange={(value) => {
-            setState((prev) => ({ ...prev, start: value }))
-            onChange({ ...state, start: value })
-          }}
-          enableTime={enableTime}
-          inputProps={{ InputProps: null, size: size }}
-        />
-        <SvgIcon>
-          <DateRangeIcon />
-        </SvgIcon>
-        <DateTimePicker
-          minDate={state[0]}
-          placeholder="To Date"
-          enableTime={enableTime}
-          value={state.end}
-          onChange={(value) => {
-            setState((prev) => ({ ...prev, end: value }))
-            onChange({ ...state, end: value })
-          }}
-          inputProps={{ InputProps: null, size: size }}
-        />
-      </StyledDateRangePicker>
-      <>{error && <FormHelperText>{helperText}</FormHelperText>}</>
-    </Box>
-  )
-}
+import { Box, BoxProps, FormHelperText, styled, SvgIcon } from '@mui/material'
+import { ReactNode, useEffect, useState } from 'react'
+import { DateRangeIcon } from '../IconButtons'
+import DateTimePicker from './DateTimePicker'
+import FormLabel from './FormLabel'
+
+const StyledDateRangePicker = styled(Box)<{ size: 'small' | 'medium' }>(
+  ({ theme, size }) => ({
+    borderRadius: '10px',
+    height: '50px',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    border: theme.borders.grayLight,
+    '& .MuiOutlinedInput-notchedOutline': {
+      display: 'none',
+    },
+    '& .MuiSvgIcon-root': {
+      margin: '0 20px',
+      marginTop: '8px',
+    },
+    ...(size === 'small' && {
+      borderRadius: '5px',
+      height: '40px',
+      '& .MuiSvgIcon-root': {
+        margin: '0 20px',
+        marginTop: '8px',
+      },
+    }),
+  }),
+)
+
+interface IDateRangePickerProps {
+  value: {
+    start: Date
+    end: Date
+  }
+  onChange: (value: { start: Date; end: Date }) => void
+  enableTime?: boolean
+  size?: 'small' | 'medium'
+  containerProps?: BoxProps
+  label?: ReactNode
+  required?: boolean
+  name?: string
+  error?: boolean
+  helperText?: string
+}
+export default function DateRangePicker({
+  value,
+  onChange,
+  enableTime = false,
+  size = 'medium',
+  containerProps,
+  required,
+  error,
+  helperText,
+  label,
+  name,
+}: IDateRangePickerProps) {
+  const [state, setState] = useState({
+    start: null,
+    end: null,
+  })
+
+  useEffect(() => {
+    setState(value)
+  }, [value])
+
+  return (
+    <Box width={'100%'} {...containerProps}>
+      <FormLabel
+        required={required}
+        name={name ?? 'date-range-picker'}
+        label={label}
+      />
+      <StyledDateRangePicker size={size}>
+        <DateTimePicker
+          placeholder="From Date"
+          value={state.start}
+          onChange={(value) => {
+            setState((prev) => ({ ...prev, start: value }))
+            onChange({ ...state, start: value })
+          }}
+          enableTime={enableTime}
+          inputProps={{ InputProps: null, size: size }}
+        />
+        <SvgIcon>
+          <DateRangeIcon />
+        </SvgIcon>
+        <DateTimePicker
+          minDate={state[0]}
+          placeholder="To Date"
+          enableTime={enableTime}
+          value={state.end}
+          onChange={(value) => {
+            setState((prev) => ({ ...prev, end: value }))
+            onChange({ ...state, end: value })
+          }}
+          inputProps={{ InputProps: null, size: size }}
+        />
+      </StyledDateRangePicker>
+      <>{error && <FormHelperText>{helperText}</FormHelperText>}</>
+    </Box>
+  )
+}