merge parent pr onesine#69 and onesine#56

Author: dahool

pages/index.js

@@ -59,8 +59,8 @@ const SELECT_OPTIONS = [
     "isMultiple",
     "isDisabled",
     "loading",
-    "isGroupOption"
-];
+    "isGroupOption",
+    "closeOnSelect"];
 
 const printAlertContent = (element, value) => {
     const printText = (text, value) =>
@@ -79,6 +79,8 @@ const printAlertContent = (element, value) => {
             return printText("A loader appears on the field", value);
         case "isGroupOption":
             return printText("The options of the select field are grouped", value);
+        case "closeOnSelect":
+            return printText("Close dropdown every time an option is selected", value);
         default:
             return null;
     }
@@ -91,6 +93,7 @@ const Home = () => {
     const [value, setValue] = useState(null);
     const [isClearable, setIsClearable] = useState(false);
     const [isMultiple, setIsMultiple] = useState(false);
+    const [closeOnSelect, setCloseOnSelect] = useState(false);
     const [isSearchable, setIsSearchable] = useState(false);
     const [isDisabled, setIsDisabled] = useState(false);
     const [isGroupOption, setIsGroupOption] = useState(false);
@@ -139,6 +142,10 @@ const Home = () => {
                     }
                     if (action === "get") return isMultiple;
                     break;
+                case "closeOnSelect":
+                    if (action === "set") setCloseOnSelect(valueData);
+                    if (action === "get") return closeOnSelect;
+                    break;
                 case "isDisabled":
                     if (action === "set") setIsDisabled(valueData);
                     if (action === "get") return isDisabled;
@@ -158,7 +165,16 @@ const Home = () => {
                     break;
             }
         },
-        [isClearable, isDisabled, isGroupOption, isMultiple, isSearchable, loading, value]
+        [
+            isClearable,
+            isDisabled,
+            isGroupOption,
+            isMultiple,
+            closeOnSelect,
+            isSearchable,
+            loading,
+            value
+        ]
     );
 
     const handleCheck = useCallback(
@@ -239,6 +255,7 @@ const Home = () => {
                                     isClearable={isClearable}
                                     isSearchable={isSearchable}
                                     isMultiple={isMultiple}
+									closeOnSelect={closeOnSelect}
                                     /*formatGroupLabel={(data) => (
                                         <div className={`py-2 text-xs flex items-center justify-between`}>
                                             <span className="font-bold">{data.label}</span>
@@ -282,6 +299,7 @@ const Home = () => {
                                             {printAlertContent("isDisabled", isDisabled)}
                                             {printAlertContent("loading", loading)}
                                             {printAlertContent("isGroupOption", isGroupOption)}
+											{printAlertContent("closeOnSelect", closeOnSelect)}
                                         </Alert>
                                     </div>
                                 )}

src/components/Select.tsx

@@ -27,13 +27,16 @@ const Select: React.FC<SelectProps> = ({
     primaryColor = DEFAULT_THEME,
     formatGroupLabel = null,
     formatOptionLabel = null,
-    classNames
+    classNames,
+    scrollableContainer = null,
+    closeOnSelect = false
 }) => {
     const [open, setOpen] = useState<boolean>(menuIsOpen);
     const [list, setList] = useState<ListOption>(options);
     const [inputValue, setInputValue] = useState<string>("");
     const ref = useRef<HTMLDivElement>(null);
     const searchBoxRef = useRef<HTMLInputElement>(null);
+	const [showOptionAboveTheSelect, setShowOptionAboveTheSelect] = useState<boolean>(false);
 
     useEffect(() => {
         const formatItem = (item: Option) => {
@@ -95,7 +98,7 @@ const Select: React.FC<SelectProps> = ({
     const handleValueChange = useCallback(
         (selected: Option) => {
             function update() {
-                if (!isMultiple && !Array.isArray(value)) {
+                if ((!isMultiple && !Array.isArray(value)) || closeOnSelect) {
                     closeDropDown();
                     onChange(selected);
                 }
@@ -166,6 +169,22 @@ const Select: React.FC<SelectProps> = ({
         [classNames, isDisabled]
     );
 
+    const handleScroll = useCallback(() => {
+        if (ref.current) {
+            const { top } = ref.current.getBoundingClientRect();
+            // check if the component is on the bottom half of the page or on the top half
+            setShowOptionAboveTheSelect(top > window.innerHeight / 2);
+        }
+    }, [ref]);
+
+    useEffect(handleScroll, [ref]);
+
+    useEffect(() => {
+        const _scrollableContainer = scrollableContainer || window.document;
+        _scrollableContainer.addEventListener('scroll', handleScroll);
+        return () => _scrollableContainer.removeEventListener('scroll', handleScroll);
+    }, [scrollableContainer]);
+ 
     return (
         <SelectProvider
             otherData={{
@@ -266,9 +285,10 @@ const Select: React.FC<SelectProps> = ({
                 {open && !isDisabled && (
                     <div
                         className={
-                            classNames?.menu
+                            `${classNames?.menu
                                 ? classNames.menu
-                                : "absolute z-10 w-full bg-white shadow-lg border rounded py-1 mt-1.5 text-sm text-gray-700"
+                                : "absolute z-10 w-full bg-white shadow-lg border rounded py-1 mt-1.5 text-sm text-gray-700"} 
+                                ${showOptionAboveTheSelect ? 'top-auto bottom-[44px]' : ''}`
                         }
                     >
                         {isSearchable && (

src/components/type.ts

@@ -52,4 +52,6 @@ export interface SelectProps {
     formatGroupLabel?: ((data: GroupOption) => JSX.Element) | null;
     formatOptionLabel?: ((data: Option) => JSX.Element) | null;
     classNames?: ClassNames;
+    scrollableContainer?: HTMLElement | null;
+    closeOnSelect?: boolean;
 }