@campxdev/react-blueprint 1.9.6 → 2.0.1

package/src/components/Input/SingleSelect/SingleSelect.tsx

@@ -1,412 +0,0 @@
-import { AutocompleteCloseReason, AutocompleteProps } from '@mui/material';
-import axios, { AxiosInstance } from 'axios';
-import _ from 'lodash';
-import { SyntheticEvent, useEffect, useReducer } from 'react';
-import { Typography } from '../../DataDisplay/Typography/Typography';
-import { SingleFilter } from './components/SingleFilter';
-import { SingleInput } from './components/SingleInput';
-import {
-  SingleSelectActionsTypes,
-  singleSelectReducer,
-  SingleSelectState,
-} from './singleSelectReducer';
-
-declare module '@mui/material/Autocomplete' {
-  interface AutocompletePaperSlotPropsOverrides {
-    loadingOptions: boolean;
-    isSearch: boolean;
-  }
-}
-
-function sleep(duration: number): Promise<void> {
-  return new Promise<void>((resolve) => {
-    setTimeout(() => {
-      resolve();
-    }, duration);
-  });
-}
-
-export type SingleSelectProps = {
-  options?: { label: string; subLabel?: string; value: any }[] | any[];
-  optionsApiEndPoint?: string;
-  optionsApiEndpointParams?: any;
-  externalAxios?: AxiosInstance;
-  required?: boolean;
-  label?: string;
-  name?: string;
-  getValue?: (option: any) => any;
-  dbValueProps?: {
-    valueKey: string;
-    isObjectId?: boolean;
-    isInt?: boolean;
-    isFloat?: boolean;
-  };
-  dbLabelProps?: {
-    labelKey: string;
-    subLabelKey?: string;
-    useLabelStartCase?: boolean;
-    useSubLabelStartCase?: boolean;
-  };
-  onChange?: (value: any) => void;
-  error?: any;
-  helperText?: string;
-  type?: 'input' | 'filter';
-  disableClear?: boolean;
-} & Omit<
-  AutocompleteProps<
-    { label: string; subLabel?: string; value: any } | any,
-    false,
-    true,
-    false
-  >,
-  | 'options'
-  | 'open'
-  | 'onChange'
-  | 'autoFocus'
-  | 'PaperComponent'
-  | 'renderOption'
-  | 'options'
-  | 'renderInput'
->;
-
-export const SingleSelect = ({
-  options,
-  optionsApiEndPoint,
-  optionsApiEndpointParams,
-  externalAxios,
-  getValue,
-  value,
-  onChange,
-  dbValueProps = {
-    valueKey: 'id',
-    isObjectId: false,
-    isInt: false,
-    isFloat: false,
-  },
-  dbLabelProps = {
-    labelKey: '',
-    useLabelStartCase: false,
-    useSubLabelStartCase: false,
-  },
-  onOpen,
-  onClose,
-  type = 'input',
-  ...restProps
-}: SingleSelectProps) => {
-  const generateOptionsMap = (options: any[]) => {
-    return _.keyBy(options ?? [], getValue ? getValue : (o) => o.value);
-  };
-
-  const initialState: SingleSelectState = {
-    open: false,
-    loadingInternalOptions: false,
-    loadingInitialInternalOptions: false,
-    internalOptions: options ?? [],
-    internalOptionsMap: generateOptionsMap(options ?? []),
-    limit: 10,
-    offset: 0,
-    hasMore: true,
-    search: null,
-  };
-
-  const [state, dispatch] = useReducer(singleSelectReducer, initialState);
-  const { internalOptions, limit, offset, hasMore, search } = state;
-
-  const internalAxios = externalAxios || axios;
-
-  const handleOpen = async (event: SyntheticEvent) => {
-    dispatch({
-      actionType: SingleSelectActionsTypes.OPEN,
-    });
-    if (optionsApiEndPoint && internalOptions.length <= 1) {
-      try {
-        dispatch({
-          actionType: SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_START,
-        });
-        const options = await internalAxios
-          .get(optionsApiEndPoint, {
-            params: {
-              limit,
-              offset,
-              dbValueProps: {
-                valueKey: dbValueProps.valueKey,
-                ...(dbValueProps.isObjectId && { isObjectId: true }),
-                ...(dbValueProps.isInt && { isInt: true }),
-                ...(dbValueProps.isFloat && { isFloat: true }),
-                selectedValueData: value,
-              },
-              dbLabelProps,
-              ...optionsApiEndpointParams,
-            },
-          })
-          .then((res) => res.data);
-        await sleep(700);
-
-        if (internalOptions.length) {
-          dispatch({
-            actionType: SingleSelectActionsTypes.APPEND_INTERNAL_OPTIONS,
-            stateChanges: {
-              newOptions: options,
-              internalOptionsMap: generateOptionsMap(options),
-              persistOffset: true,
-            },
-          });
-        } else {
-          dispatch({
-            actionType: SingleSelectActionsTypes.SET_INTERNAL_OPTIONS,
-            stateChanges: {
-              internalOptions: options,
-              internalOptionsMap: generateOptionsMap(options),
-            },
-          });
-        }
-      } catch (e) {
-        dispatch({
-          actionType: SingleSelectActionsTypes.SET_NETWORK_ERROR,
-          stateChanges: {
-            error: e,
-          },
-        });
-        dispatch({
-          actionType: SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_END,
-        });
-      }
-    }
-    if (onOpen) {
-      onOpen(event);
-    }
-  };
-
-  const handleClose = (
-    event: SyntheticEvent,
-    reason: AutocompleteCloseReason,
-  ) => {
-    dispatch({
-      actionType: SingleSelectActionsTypes.CLOSE,
-    });
-    if (optionsApiEndPoint && reason !== 'selectOption') {
-      dispatch({
-        actionType: SingleSelectActionsTypes.CLEAR_SEARCH,
-        stateChanges: {
-          internalOptions: internalOptions.filter(
-            (o: any) => o.value === value,
-          ),
-          internalOptionsMap: generateOptionsMap(
-            internalOptions.filter((o: any) => o.value === value),
-          ),
-        },
-      });
-    }
-    if (onClose) {
-      onClose(event, reason);
-    }
-  };
-
-  const handleScroll = async (event: any) => {
-    const listboxNode = event.currentTarget;
-    if (
-      listboxNode.scrollTop + listboxNode.clientHeight >=
-        listboxNode.scrollHeight - 1 &&
-      hasMore &&
-      optionsApiEndPoint
-    ) {
-      dispatch({
-        actionType: SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_START,
-      });
-      const newOptions = await internalAxios
-        .get(optionsApiEndPoint, {
-          params: {
-            limit: limit,
-            offset: offset + 10,
-
-            dbValueProps: {
-              valueKey: dbValueProps.valueKey,
-              ...(dbValueProps.isObjectId && { isObjectId: true }),
-              ...(dbValueProps.isInt && { isInt: true }),
-              ...(dbValueProps.isFloat && { isFloat: true }),
-              selectedValueData: value,
-            },
-            dbLabelProps: {
-              search: search,
-              ...dbLabelProps,
-            },
-            ...optionsApiEndpointParams,
-          },
-        })
-        .then((res) => res.data);
-      if (newOptions.length < 10) {
-        dispatch({
-          actionType: SingleSelectActionsTypes.CHANGE_HAS_MORE_FLAG,
-        });
-      }
-      await sleep(700);
-      dispatch({
-        actionType: SingleSelectActionsTypes.APPEND_INTERNAL_OPTIONS,
-        stateChanges: {
-          newOptions: newOptions,
-          internalOptionsMap: generateOptionsMap(newOptions),
-        },
-      });
-    }
-  };
-
-  const searchDb = async (searchValue: string) => {
-    dispatch({
-      actionType: SingleSelectActionsTypes.SET_SEARCH,
-      stateChanges: {
-        search: searchValue,
-      },
-    });
-    if (!searchValue || searchValue.trim() === '') {
-      dispatch({
-        actionType: SingleSelectActionsTypes.CLEAR_SEARCH,
-        stateChanges: {
-          internalOptions: internalOptions.filter(
-            (o: any) => o.value === value,
-          ),
-          internalOptionsMap: generateOptionsMap(
-            internalOptions.filter((o: any) => o.value === value),
-          ),
-        },
-      });
-    }
-    if (optionsApiEndPoint) {
-      try {
-        dispatch({
-          actionType: SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_START,
-        });
-        const options = await internalAxios
-          .get(optionsApiEndPoint, {
-            params: {
-              limit,
-              offset: 0,
-              dbValueProps: {
-                valueKey: dbValueProps.valueKey,
-                ...(dbValueProps.isObjectId && { isObjectId: true }),
-                ...(dbValueProps.isInt && { isInt: true }),
-                ...(dbValueProps.isFloat && { isFloat: true }),
-                selectedValueData: value,
-              },
-              dbLabelProps: {
-                search: searchValue,
-                ...dbLabelProps,
-              },
-              ...optionsApiEndpointParams,
-            },
-          })
-          .then((res) => res.data);
-        await sleep(700);
-
-        dispatch({
-          actionType: SingleSelectActionsTypes.SET_INTERNAL_OPTIONS,
-          stateChanges: {
-            internalOptions: [
-              ...options,
-              ...internalOptions.filter((o: any) => o.value === value),
-            ],
-            internalOptionsMap: generateOptionsMap([
-              ...options,
-              ...internalOptions.filter((o: any) => o.value === value),
-            ]),
-          },
-        });
-      } catch (e) {
-        dispatch({
-          actionType: SingleSelectActionsTypes.SET_NETWORK_ERROR,
-          stateChanges: {
-            error: e,
-          },
-        });
-        dispatch({
-          actionType: SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_END,
-        });
-      }
-    }
-  };
-
-  const loadSelectedOptions = async () => {
-    dispatch({
-      actionType: SingleSelectActionsTypes.LOAD_SELECTED_OPTIONS_START,
-    });
-    try {
-      const res = await internalAxios.get(optionsApiEndPoint ?? '', {
-        params: {
-          limit,
-          offset,
-          dbValueProps: {
-            valueKey: dbValueProps.valueKey,
-            ...(dbValueProps.isObjectId && { isObjectId: true }),
-            ...(dbValueProps.isInt && { isInt: true }),
-            ...(dbValueProps.isFloat && { isFloat: true }),
-            selectedValueData: value,
-            filterBySelectedValues: true,
-          },
-          dbLabelProps,
-          ...optionsApiEndpointParams,
-        },
-      });
-      dispatch({
-        actionType: SingleSelectActionsTypes.SET_INTERNAL_OPTIONS,
-        stateChanges: {
-          internalOptions: res.data,
-          internalOptionsMap: generateOptionsMap(res.data),
-        },
-      });
-      await sleep(1000);
-    } catch (e) {
-      dispatch({
-        actionType: SingleSelectActionsTypes.SET_NETWORK_ERROR,
-        stateChanges: { error: e },
-      });
-    }
-  };
-
-  useEffect(() => {
-    if (value && optionsApiEndPoint) {
-      loadSelectedOptions().finally(() => {
-        dispatch({
-          actionType: SingleSelectActionsTypes.LOAD_SELECTED_OPTIONS_END,
-        });
-      });
-    }
-  }, []);
-
-  if (!onChange) {
-    return <Typography>onChange Missing</Typography>;
-  }
-
-  if (type === 'filter')
-    return (
-      <SingleFilter
-        onChange={onChange}
-        searchDb={searchDb}
-        handleOpen={handleOpen}
-        handleClose={handleClose}
-        handleScroll={handleScroll}
-        state={state}
-        optionsApiEndPoint={optionsApiEndPoint}
-        getValue={getValue}
-        value={value}
-        dbLabelProps={dbLabelProps}
-        {...restProps}
-      />
-    );
-
-  return (
-    <SingleInput
-      onChange={onChange}
-      searchDb={searchDb}
-      handleOpen={handleOpen}
-      handleClose={handleClose}
-      handleScroll={handleScroll}
-      state={state}
-      optionsApiEndPoint={optionsApiEndPoint}
-      getValue={getValue}
-      value={value}
-      dbLabelProps={dbLabelProps}
-      {...restProps}
-    />
-  );
-};
-
-export default SingleSelect;

package/src/components/Input/SingleSelect/components/MenuFooter.tsx

@@ -1,24 +0,0 @@
-import { useTheme } from '@mui/material';
-import { Button } from '../../export';
-import { FooterContainer } from '../../styles';
-
-export const MenuFooter = ({ onClick }: { onClick: () => void }) => {
-  const theme = useTheme();
-  return (
-    <FooterContainer direction="row" alignItems="center">
-      <Button
-        variant="text"
-        onClick={onClick}
-        sx={{
-          fontFamily: 'Heebo',
-          minWidth: '0px',
-          margin: '0px 16px',
-        }}
-        disableRipple
-        textColor={theme.palette.text.tertiary}
-      >
-        Clear
-      </Button>
-    </FooterContainer>
-  );
-};

package/src/components/Input/SingleSelect/components/OptionsLoader.tsx

@@ -1,14 +0,0 @@
-import { Typography } from '../../../DataDisplay/Typography/Typography';
-import { Spinner } from '../../../Feedback/Spinner/Spinner';
-import { FooterContainer } from '../../styles';
-
-export const OptionsLoader = ({ isSearch }: { isSearch: boolean }) => {
-  return (
-    <FooterContainer direction="row" alignItems="center">
-      <Spinner />
-      <Typography variant="caption">
-        {isSearch ? 'Searching' : 'Loading Options'}
-      </Typography>
-    </FooterContainer>
-  );
-};

package/src/components/Input/SingleSelect/components/SingleFilter.tsx

@@ -1,235 +0,0 @@
-import { KeyboardArrowDown } from '@mui/icons-material';
-import {
-  AutocompleteCloseReason,
-  FormControlLabel,
-  RadioGroup as MuiRadioGroup,
-  Radio,
-  useTheme,
-} from '@mui/material';
-import { SyntheticEvent, useState } from 'react';
-import { EmptyIllustration } from '../../../DataDisplay/EmptyIllustration/EmptyIllustration';
-import {
-  Button,
-  DropdownMenu,
-  Icons,
-  SearchBar,
-  SingleSelectProps,
-  Typography,
-} from '../../../export';
-import { FilterOptionContainer } from '../../styles';
-import { SingleSelectState } from '../singleSelectReducer';
-import { MenuFooter } from './MenuFooter';
-import { OptionsLoader } from './OptionsLoader';
-
-declare module '@mui/material/Autocomplete' {
-  interface AutocompletePaperSlotPropsOverrides {
-    loadingOptions: boolean;
-    isSearch: boolean;
-  }
-}
-
-export type SingleFilterProps = {
-  onChange: (value: any) => void;
-  searchDb: (searchValue: string) => Promise<void>;
-  handleOpen: (event: SyntheticEvent) => Promise<void>;
-  handleClose: (event: SyntheticEvent, reason: AutocompleteCloseReason) => void;
-  handleScroll: (event: any) => Promise<void>;
-  state: SingleSelectState;
-} & SingleSelectProps;
-
-export const SingleFilter = ({
-  options,
-  optionsApiEndPoint,
-  optionsApiEndpointParams,
-  externalAxios,
-  required = false,
-  label,
-  name,
-  getValue,
-  value,
-  onChange,
-  error,
-  helperText,
-  dbValueProps = {
-    valueKey: 'id',
-    isObjectId: false,
-    isInt: false,
-    isFloat: false,
-  },
-  dbLabelProps = {
-    labelKey: '',
-    useLabelStartCase: false,
-    useSubLabelStartCase: false,
-  },
-  onOpen,
-  onClose,
-  searchDb,
-  handleOpen,
-  handleClose,
-  handleScroll,
-  state,
-  disableClear = false,
-  ...restProps
-}: SingleFilterProps) => {
-  const {
-    loadingInitialInternalOptions,
-    internalOptions,
-    internalOptionsMap,
-    loadingInternalOptions,
-    search,
-  } = state;
-
-  const [localSearch, setLocalSearch] = useState(search);
-
-  const searchLocal = (searchValue: string) => {
-    setLocalSearch(searchValue);
-  };
-
-  const theme = useTheme();
-
-  const validValue = !!internalOptionsMap[value];
-
-  return (
-    <>
-      <DropdownMenu
-        menuListProps={{
-          sx: {
-            padding: '0px',
-            width: '250px',
-            minWidth: 'max-content',
-          },
-        }}
-        anchor={({ open }: { open: (e: any) => void }) => (
-          <Button
-            onClick={(e) => {
-              open(e);
-              handleOpen(e);
-            }}
-            loading={loadingInitialInternalOptions}
-            sx={{
-              gap: '1px',
-              borderRadius: '20px',
-              textWrap: 'nowrap',
-              textOverflow: 'ellipsis',
-              overflow: 'hidden',
-              minWidth: 'max-content',
-            }}
-            variant="contained"
-            background={
-              validValue
-                ? theme.palette.highlight.greenBackground
-                : theme.palette.surface.grey
-            }
-            hoverBackground={
-              validValue
-                ? theme.palette.highlight.greenBackground
-                : theme.palette.surface.grey
-            }
-            textColor={theme.palette.text.primary}
-            endIcon={<KeyboardArrowDown />}
-          >
-            {validValue
-              ? label + ' = ' + internalOptionsMap[value].label
-              : label}
-          </Button>
-        )}
-        menuProps={{
-          anchorOrigin: {
-            vertical: 'bottom',
-            horizontal: 'left',
-          },
-          transformOrigin: {
-            vertical: 'top',
-            horizontal: 'left',
-          },
-        }}
-        menuHeader={
-          <SearchBar
-            fullWidth
-            size="small"
-            placeholder="Search"
-            onSearch={optionsApiEndPoint ? searchDb : searchLocal}
-          />
-        }
-        menuListContainerSx={{
-          margin: '10px 5px 0px 5px',
-          height: '310px',
-          overflowY: 'scroll',
-        }}
-        handleMenuScroll={handleScroll}
-        menuSlot={({ close }) => {
-          const filteredOptions = internalOptions?.filter(
-            (option) =>
-              (localSearch && option.label.includes(localSearch)) ||
-              !localSearch,
-          );
-
-          if (filteredOptions.length === 0 && !loadingInitialInternalOptions)
-            return (
-              <EmptyIllustration
-                message="No Options Found"
-                imageSize="100px"
-                containerProps={{
-                  height: '310px',
-                }}
-              />
-            );
-          return (
-            <MuiRadioGroup
-              onChange={(e) => {
-                onChange(e.target.value);
-              }}
-              name={name}
-              value={value}
-            >
-              {filteredOptions?.map((option, index) => (
-                <FormControlLabel
-                  sx={{
-                    margin: '0px',
-                    width: '100%',
-                    '.MuiFormControlLabel-label': {
-                      width: '100%',
-                    },
-                  }}
-                  key={index}
-                  value={option.value}
-                  control={
-                    <Radio
-                      checkedIcon={<Icons.CheckedRadioIcon />}
-                      icon={<Icons.UnCheckedRadioIcon />}
-                      checked={value == option.value}
-                    />
-                  }
-                  label={
-                    <FilterOptionContainer>
-                      <Typography variant="subtitle3">
-                        {option.label}
-                      </Typography>
-                      <Typography variant="caption">
-                        {option?.subLabel}
-                      </Typography>
-                    </FilterOptionContainer>
-                  }
-                />
-              ))}
-            </MuiRadioGroup>
-          );
-        }}
-        menuFooter={
-          loadingInternalOptions ? (
-            <OptionsLoader isSearch={!!search} />
-          ) : disableClear ? (
-            <></>
-          ) : (
-            <MenuFooter
-              onClick={() => {
-                onChange(null);
-              }}
-            />
-          )
-        }
-        useMenuSlot
-      />
-    </>
-  );
-};