@campxdev/react-blueprint 0.1.17 → 0.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "main": "./export.ts",
   "private": false,
   "dependencies": {

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

@@ -2,10 +2,11 @@ import {
   Box,
   Autocomplete as MuiAutocomplete,
   Paper,
+  PaperProps,
   TextField,
 } from "@mui/material";
 import axios from "axios";
-import { useReducer } from "react";
+import { useReducer, useRef } from "react";
 import { campxAxios } from "../../../utils/campxAxios";
 import { Typography } from "../../Typography/Typography";
 import { LabelWrapper } from "../LabelWrapper/LabelWrapper";
@@ -35,6 +36,7 @@ enum SingleSelectActionsTypes {
   LOAD_INTERNAL_OPTIONS_END = "load_internal_options_end",
   SET_NETWORK_ERROR = "set_network_error",
   SET_INTERNAL_OPTIONS = "set_internal_options",
+  APPEND_INTERNAL_OPTIONS = "append_internal_options",
 }
 const singleSelectReducer = (
   state: any,
@@ -66,11 +68,25 @@ const singleSelectReducer = (
         loadingInternalOptions: false,
       };
     }
+    case SingleSelectActionsTypes.APPEND_INTERNAL_OPTIONS: {
+      return {
+        ...state,
+        internalOptions: [...state.internalOptions, ...stateChanges.newOptions],
+        loadingInternalOptions: false,
+      };
+    }
     default:
       return { ...state, ...stateChanges };
   }
 };
 
+const PaperComponent = (props: PaperProps, loadingInternalOptions: boolean) => (
+  <Paper {...props}>
+    {props.children}
+    <FetchingOptionsLoader loading={loadingInternalOptions} />
+  </Paper>
+);
+
 export const SingleSelect = ({
   options,
   optionsApiEndPoint,
@@ -84,6 +100,7 @@ export const SingleSelect = ({
     internalOptions: options ?? [],
   });
   const { open, loadingInternalOptions, internalOptions } = state;
+  const listboxRef = useRef(null);
 
   const internalAxios = useCampxAxios ? campxAxios : axios;
 
@@ -124,20 +141,37 @@ export const SingleSelect = ({
     }
   };
 
+  const handleScroll = async (event: any) => {
+    const listboxNode = event.currentTarget;
+
+    console.log(
+      listboxNode.scrollTop + listboxNode.clientHeight,
+      listboxNode.scrollHeight
+    );
+    if (
+      listboxNode.scrollTop + listboxNode.clientHeight >=
+      listboxNode.scrollHeight - 100
+    ) {
+      console.log("dispatched");
+      dispatch({
+        actionType: SingleSelectActionsTypes.APPEND_INTERNAL_OPTIONS,
+        stateChanges: {
+          newOptions: internalOptions,
+        },
+      });
+    }
+  };
+
   return (
     <MuiAutocomplete
       open={open}
+      autoHighlight={true}
       renderInput={(params) => (
         <LabelWrapper label={label} required={required}>
           <TextField {...params} />
         </LabelWrapper>
       )}
-      PaperComponent={(props) => (
-        <Paper {...props}>
-          {props.children}
-          <FetchingOptionsLoader loading={loadingInternalOptions} />
-        </Paper>
-      )}
+      PaperComponent={(props) => PaperComponent(props, loadingInternalOptions)}
       renderOption={(props, option: any) => {
         return (
           <Box component="li" {...props}>
@@ -148,6 +182,10 @@ export const SingleSelect = ({
           </Box>
         );
       }}
+      ListboxProps={{
+        onScroll: handleScroll,
+        ref: listboxRef,
+      }}
       onOpen={handleOpen}
       onClose={() => {
         dispatch({

package/types/theme.d.ts

@@ -25,9 +25,51 @@ declare module "@mui/material/styles" {
         main: string;
       };
       grey: {
-        main: string,
-      }
+        main: string;
+      };
+    };
+  }
+  interface CustomThemeOptions extends MuiThemeOptions {
+    borders: {
+      grayLight: string;
+      primary: string;
+    };
+    palette: {
+      secondary?: {
+        main?: string;
+        light?: string;
+        dark?: string;
+      };
+      primary?: {
+        dark?: string;
+        main?: string;
+        light?: string;
+        lighter?: string;
+      };
+      common?: {
+        black?: string;
+        white?: string;
+        green?: string;
+        yellow?: string;
+        blue?: string;
+      };
+      highlight: {
+        main: string;
+      };
+      grey: {
+        main: string;
+      };
+      error?: {
+        main?: string;
+      };
+      text?: {
+        primary?: string;
+        secondary?: string;
+        disabled?: string;
+      };
     };
+    components?: Components<Omit<Theme, "components">>;
+    typography?: TypographyOptions | ((palette: Palette) => TypographyOptions);
   }
   export function createTheme(options?: CustomThemeOptions): CustomTheme;
 }