@campxdev/shared 1.1.3 → 1.1.5

package/src/components/Input/DatePicker.tsx

@@ -1,60 +1,60 @@
-import { Box, TextField } from '@mui/material'
-import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers'
-import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
-import FormLabel from './FormLabel'
-interface Props {
-  label?: string
-  name?: string
-  size?: 'small' | 'medium'
-  control?: any
-  minDate?: any
-  maxDate?: any
-  required?: boolean
-  value: any
-  onChange: any
-}
-export default function FormDatePicker(props: Props) {
-  const {
-    name,
-    size = 'small',
-    label = '',
-    minDate,
-    maxDate,
-    required = false,
-    value,
-    onChange,
-  } = props
-  return (
-    <LocalizationProvider dateAdapter={AdapterMoment}>
-      <Box>
-        <DatePicker
-          label={<FormLabel label={label} required={required} />}
-          mask="__/__/____"
-          inputFormat="DD/MM/yyyy"
-          value={value}
-          onChange={onChange}
-          minDate={minDate}
-          maxDate={maxDate}
-          renderInput={(params) => (
-            <TextField
-              fullWidth
-              size={size}
-              {...params}
-              // error={Boolean(error)}
-            />
-          )}
-        />
-        {/* {error && (
-          <Typography
-            variant="caption"
-            component={'div'}
-            sx={{ pl: '2px' }}
-            color="rgb(211, 47, 47)"
-          >
-            {error.message}
-          </Typography>
-        )} */}
-      </Box>
-    </LocalizationProvider>
-  )
-}
+import { Box, TextField } from '@mui/material'
+import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers'
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
+import FormLabel from './FormLabel'
+interface Props {
+  label?: string
+  name?: string
+  size?: 'small' | 'medium'
+  control?: any
+  minDate?: any
+  maxDate?: any
+  required?: boolean
+  value: any
+  onChange: any
+}
+export default function FormDatePicker(props: Props) {
+  const {
+    name,
+    size = 'small',
+    label = '',
+    minDate,
+    maxDate,
+    required = false,
+    value,
+    onChange,
+  } = props
+  return (
+    <LocalizationProvider dateAdapter={AdapterMoment}>
+      <Box>
+        <DatePicker
+          label={<FormLabel label={label} required={required} />}
+          mask="__/__/____"
+          inputFormat="DD/MM/yyyy"
+          value={value}
+          onChange={onChange}
+          minDate={minDate}
+          maxDate={maxDate}
+          renderInput={(params) => (
+            <TextField
+              fullWidth
+              size={size}
+              {...params}
+              // error={Boolean(error)}
+            />
+          )}
+        />
+        {/* {error && (
+          <Typography
+            variant="caption"
+            component={'div'}
+            sx={{ pl: '2px' }}
+            color="rgb(211, 47, 47)"
+          >
+            {error.message}
+          </Typography>
+        )} */}
+      </Box>
+    </LocalizationProvider>
+  )
+}

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',
+  },
+})

package/src/components/Input/DateTimePicker.tsx

@@ -1,70 +1,70 @@
-import { InputAdornment, TextField, Typography } from '@mui/material'
-import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers'
-import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
-import { Controller } from 'react-hook-form'
-import DateRangeIcon from '@mui/icons-material/DateRange'
-interface Props {
-  label?: string
-  name: string
-  size?: 'small' | 'medium'
-  control: any
-  required?: boolean
-  minDate?: any
-}
-export default function FormDateTimePicker(props: Props) {
-  const { name, size = 'small', control, label = '', required, minDate } = props
-  return (
-    <LocalizationProvider dateAdapter={AdapterMoment}>
-      <Controller
-        name={name}
-        control={control}
-        render={({ field, fieldState: { error } }) => (
-          <>
-            <DateTimePicker
-              label={
-                <>
-                  {label}
-                  {required && (
-                    <Typography fontSize={14} component={'span'} color="error">
-                      {' *'}
-                    </Typography>
-                  )}
-                </>
-              }
-              minDate={minDate && minDate}
-              mask="__/__/____ __:__ _M"
-              inputFormat="DD/MM/yyyy 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 { InputAdornment, TextField, Typography } from '@mui/material'
+import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers'
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
+import { Controller } from 'react-hook-form'
+import DateRangeIcon from '@mui/icons-material/DateRange'
+interface Props {
+  label?: string
+  name: string
+  size?: 'small' | 'medium'
+  control: any
+  required?: boolean
+  minDate?: any
+}
+export default function FormDateTimePicker(props: Props) {
+  const { name, size = 'small', control, label = '', required, minDate } = props
+  return (
+    <LocalizationProvider dateAdapter={AdapterMoment}>
+      <Controller
+        name={name}
+        control={control}
+        render={({ field, fieldState: { error } }) => (
+          <>
+            <DateTimePicker
+              label={
+                <>
+                  {label}
+                  {required && (
+                    <Typography fontSize={14} component={'span'} color="error">
+                      {' *'}
+                    </Typography>
+                  )}
+                </>
+              }
+              minDate={minDate && minDate}
+              mask="__/__/____ __:__ _M"
+              inputFormat="DD/MM/yyyy 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/Input/FormLabel.tsx

@@ -1,14 +1,14 @@
-import { Typography } from '@mui/material'
-
-export default function FormLabel({ label, required }) {
-  return (
-    <>
-      {label}
-      {required && (
-        <Typography fontSize={14} component={'span'} color="error">
-          {' *'}
-        </Typography>
-      )}
-    </>
-  )
-}
+import { Typography } from '@mui/material'
+
+export default function FormLabel({ label, required }) {
+  return (
+    <>
+      {label}
+      {required && (
+        <Typography fontSize={14} component={'span'} color="error">
+          {' *'}
+        </Typography>
+      )}
+    </>
+  )
+}