@campxdev/shared 1.8.14 → 1.8.15

package/src/components/Input/AsyncSearchSelect/AsyncSearchSelect.tsx

@@ -0,0 +1,216 @@
+import { Close } from '@mui/icons-material'
+import { Box, Checkbox, CircularProgress, Typography } from '@mui/material'
+import _ from 'lodash'
+import { ReactNode, useCallback, useEffect, useState } from 'react'
+import { useQuery } from 'react-query'
+import { useImmer } from 'use-immer'
+import FormLabel from '../FormLabel'
+import { BpCheckedIcon, BpIcon } from '../SingleCheckbox'
+import TextField from '../TextField'
+import { IOption } from '../types'
+import {
+  StyledAnchor,
+  StyledListContainer,
+  StyledListItem,
+  StyledPopover,
+  StyledSelectedChip,
+} from './styles'
+
+const Anchor = ({ handleClick, id, label, required }) => {
+  return (
+    <Box>
+      <FormLabel label={label} name={id ?? ''} required={required} />
+      <StyledAnchor id={id} onClick={handleClick}>
+        <Typography variant="subtitle1">Click to search</Typography>
+      </StyledAnchor>
+    </Box>
+  )
+}
+
+const SelectedItems = ({ selectedItems, selectedLabel, onDelete }) => {
+  if (!selectedItems?.length) return null
+  return (
+    <Box marginTop="10px">
+      <FormLabel label={selectedLabel} name="form-label" required={false} />
+      <Box sx={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+        {selectedItems?.map((item, index) => (
+          <StyledSelectedChip
+            deleteIcon={<Close />}
+            key={index}
+            label={item?.label}
+            variant={'outlined'}
+            onDelete={() => onDelete(item)}
+          />
+        ))}
+      </Box>
+    </Box>
+  )
+}
+
+const OptionsList = ({ loading, menuItems, onSelected, selected }) => {
+  const isIncluded = (id) => {
+    return selected?.options?.find((item) => item.value == id)
+  }
+
+  const handleClick = (selectedOption) => {
+    if (isIncluded(selectedOption.value)) {
+      onSelected(
+        selected?.options?.filter(
+          (item) => item.value !== selectedOption.value,
+        ),
+      )
+    } else {
+      onSelected([...selected.options, selectedOption])
+    }
+  }
+
+  if (loading)
+    return <CircularProgress size={16} sx={{ textAlign: 'center' }} />
+
+  if (!menuItems)
+    return (
+      <Typography
+        sx={{ padding: '10px' }}
+        variant="subtitle1"
+        textAlign={'center'}
+      >
+        Start typing to search
+      </Typography>
+    )
+  if (!menuItems?.length)
+    return (
+      <Typography
+        sx={{ padding: '10px' }}
+        variant="subtitle1"
+        textAlign={'center'}
+      >
+        No results found
+      </Typography>
+    )
+
+  return (
+    <>
+      {menuItems?.map((option, index) => (
+        <StyledListItem key={index} onClick={() => handleClick(option)}>
+          <Checkbox
+            icon={isIncluded(option?.value) ? <BpCheckedIcon /> : <BpIcon />}
+          />
+          {option.label}
+        </StyledListItem>
+      ))}
+    </>
+  )
+}
+
+type SearchInputProps = {
+  onChange: (value: IOption[]) => void
+  initialOptions?: IOption[]
+  searchQueryKey?: string
+  selectedLabel?: ReactNode
+  label: ReactNode
+  fetchFn: (params: { [x: string]: string }) => Promise<IOption[]>
+  required?: boolean
+}
+
+export default function AsyncSearchSelect({
+  label,
+  onChange,
+  initialOptions = [],
+  searchQueryKey = 'search',
+  selectedLabel = 'Selected Items',
+  fetchFn,
+  required,
+}: SearchInputProps) {
+  const [search, setSearch] = useState('')
+  const [width, setWidth] = useState(300)
+
+  const { data: searchResults, isLoading } = useQuery(
+    ['search', search],
+    (params: any) => fetchFn({ ...params, [searchQueryKey]: search }),
+    {
+      enabled: Boolean(search),
+    },
+  )
+
+  const [selected, setSelected] = useImmer({
+    options: [],
+  })
+
+  const [open, setOpen] = useState(false)
+  const [anchorEl, setAnchorEl] = useState<any>(null)
+  const id = open ? 'simple-popover' : undefined
+
+  const onSearchChange = (e) => {
+    setSearch(e.target.value)
+  }
+
+  const handleClick = (event) => {
+    const anchorWidth = event.target.getBoundingClientRect().width
+    setWidth(anchorWidth)
+    setOpen(true)
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setOpen(false)
+  }
+
+  const onSelected = (newValues) => {
+    setSelected((s) => {
+      s.options = newValues
+    })
+    if (onChange) onChange(newValues)
+  }
+
+  const onDeleteSelectedItem = (option) => {
+    onSelected(selected?.options?.filter((item) => item.value !== option.value))
+  }
+
+  const debouncedChange = useCallback(_.debounce(onSearchChange, 300), [])
+
+  useEffect(() => {
+    setSelected((s) => {
+      s.options = initialOptions
+    })
+  }, [initialOptions?.length])
+
+  return (
+    <Box>
+      <Anchor
+        handleClick={handleClick}
+        id={id}
+        label={label}
+        required={required}
+      />
+      <SelectedItems
+        onDelete={onDeleteSelectedItem}
+        selectedItems={selected?.options}
+        selectedLabel={selectedLabel}
+      />
+      <StyledPopover
+        popoverWidth={width}
+        open={open}
+        id={id}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+      >
+        <Box sx={{ padding: '14px' }}>
+          <TextField
+            size="small"
+            onChange={debouncedChange}
+            placeholder="Search"
+            autoFocus={true}
+          />
+          <StyledListContainer>
+            <OptionsList
+              loading={isLoading}
+              menuItems={searchResults}
+              onSelected={onSelected}
+              selected={selected}
+            />
+          </StyledListContainer>
+        </Box>
+      </StyledPopover>
+    </Box>
+  )
+}

package/src/components/Input/AsyncSearchSelect/index.tsx

@@ -0,0 +1 @@
+export { default } from './AsyncSearchSelect'

package/src/components/Input/AsyncSearchSelect/styles.tsx

@@ -0,0 +1,105 @@
+import {
+  alpha,
+  Box,
+  Chip,
+  ListItem,
+  Popover,
+  PopoverProps,
+  styled,
+} from '@mui/material'
+
+export const StyledPopover = styled((props: PopoverProps) => (
+  <Popover
+    elevation={0}
+    anchorPosition={{
+      left: 0,
+      top: 0,
+    }}
+    anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
+    transitionDuration={150}
+    {...props}
+  />
+))<{ popoverWidth: number }>(({ theme, popoverWidth }) => ({
+  '& .MuiPaper-root': {
+    width: popoverWidth,
+    borderRadius: '10px',
+    boxShadow: '0px 4px 16px #0000000F',
+    marginTop: '1px',
+    '& .MuiList-root': {
+      padding: 0,
+      '& li': {
+        height: '60px',
+        borderBottom: (theme) => theme.borders.grayLight,
+        ':hover': {
+          backgroundColor: 'rgba(0, 0, 0, 0.025)',
+        },
+      },
+      '& > :last-child': {
+        borderBottom: 'none',
+      },
+    },
+  },
+}))
+
+export const StyledListContainer = styled(Box)(({ theme }) => ({
+  maxHeight: 'calc(100vh - 400px)',
+  overflowY: 'auto',
+  paddingTop: '10px',
+  '&::-webkit-scrollbar': {
+    width: '0.5em',
+    height: '0.5em',
+  },
+
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: 'rgba(0, 0, 0, 0.15)',
+    borderRadius: '3px',
+
+    '&:hover': {
+      background: 'rgba(0, 0, 0, 0.2)',
+    },
+  },
+}))
+
+export const StyledListItem = styled(ListItem)(({ theme }) => ({
+  height: '40px',
+  cursor: 'pointer',
+  padding: '10px',
+  background: 'none',
+  '&.Mui-focused': {
+    background: 'none',
+  },
+  '& .MuiCheckbox-root': {
+    padding: 0,
+    marginRight: '10px',
+  },
+}))
+
+export const StyledAnchor = styled(Box)(({ theme }) => ({
+  height: '50px',
+  border: theme.borders.grayLight,
+  borderRadius: '10px',
+  padding: '14px',
+  cursor: 'pointer',
+  ':hover': {
+    borderColor: alpha(theme.palette.common.black, 0.3),
+  },
+  transition: 'border-color 200ms ease',
+  '& > .MuiTypography-root': {
+    fontSize: '14px',
+    pointerEvents: 'none',
+  },
+}))
+
+export const StyledSelectedChip = styled(Chip)(({ theme }) => ({
+  height: '40px',
+  background: '#F8F8F8',
+  border: '1px solid #D6D6D6',
+  '& .MuiSvgIcon-root': {
+    color: theme.palette.secondary.main,
+    fontSize: '15px',
+    margin: '0 14px',
+    '&:hover': {
+      color: theme.palette.secondary.main,
+    },
+  },
+}))

package/src/components/Input/AutoCompleteSearch.tsx

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

package/src/components/Input/DatePicker.tsx

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

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