@xqmsg/ui-core 0.24.2 → 0.24.4

package/src/components/input/StackedMultiSelect/index.tsx

@@ -1,12 +1,10 @@
 import React, {
   KeyboardEventHandler,
   useEffect,
-  useMemo,
   useRef,
   useState,
 } from 'react';
 import { Box, Flex, Text, Input } from '@chakra-ui/react';
-import { debounce } from 'lodash';
 import {
   FieldOption,
   FieldOptions,
@@ -32,6 +30,7 @@ export interface StackedMultiSelectProps extends ReactSelectFieldProps {
   setError: UseFormSetError<FieldValues>;
   clearErrors: UseFormClearErrors<FieldValues>;
   control: Control<FieldValues, any>;
+  loadingOptions?: boolean;
 }
 
 /**
@@ -40,310 +39,330 @@ export interface StackedMultiSelectProps extends ReactSelectFieldProps {
 const StackedMultiSelect = React.forwardRef<
   HTMLInputElement,
   StackedMultiSelectProps
->(({ options, setValue, control, name, placeholder, disabled }, _ref) => {
-  const watchedValue = useWatch({ control, name: name as string });
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const dropdownMenuRef = useRef<HTMLDivElement>(null);
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const [isInit, setIsInit] = useState(false);
-  const [localValues, setLocalValues] = useState<FieldOptions>([]);
-  const [localOptions, setLocalOptions] = useState<FieldOptions>(options);
-  const [isFocussed, setIsFocussed] = useState(false);
-  const [shouldSideScroll, setShouldSideScroll] = useState(false);
-  const [optionIndex, setOptionIndex] = useState<number | null>(null);
-
-  const [position, setPosition] = useState<'top' | 'bottom'>('top');
-  const [searchValue, setSearchValue] = useState('');
-  const [debouncedSearchValue, setDebouncedSearchValue] = useState('');
-
-  const boundingClientRect = dropdownRef.current?.getBoundingClientRect() as DOMRect;
-
-  useEffect(() => {
-    if (window.innerHeight - (boundingClientRect?.y + 240) >= 0) {
-      setPosition('top');
-    } else {
-      setPosition('bottom');
-    }
-  }, [boundingClientRect]);
-
-  useOnClickOutside(dropdownRef, () => setIsFocussed(false));
-
-  // gets latest watched form value (common delimited) from RHF state and creates a list
-  useEffect(() => {
-    if (watchedValue !== undefined && !watchedValue.length && !isInit) {
-      setLocalValues([]);
-      setIsInit(true);
-    }
-
-    if (watchedValue !== undefined && watchedValue?.length && !isInit) {
-      if (shouldSideScroll) {
-        (scrollRef.current as HTMLDivElement).scrollTo({
-          left: scrollRef.current?.scrollWidth,
-          behavior: 'smooth',
-        });
-        setShouldSideScroll(false);
+>(
+  (
+    { options, setValue, control, name, placeholder, disabled, loadingOptions },
+    _ref
+  ) => {
+    const watchedValue = useWatch({ control, name: name as string });
+    const dropdownRef = useRef<HTMLDivElement>(null);
+    const dropdownMenuRef = useRef<HTMLDivElement>(null);
+    const scrollRef = useRef<HTMLDivElement>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const [isInit, setIsInit] = useState(false);
+    const [localValues, setLocalValues] = useState<FieldOptions>([]);
+    const [localOptions, setLocalOptions] = useState<FieldOptions>(options);
+    const [filteredOptions, setFilteredOptions] = useState<FieldOptions>(
+      localOptions
+    );
+    const [isFocussed, setIsFocussed] = useState(false);
+    const [shouldSideScroll, setShouldSideScroll] = useState(false);
+    const [optionIndex, setOptionIndex] = useState<number | null>(null);
+
+    const [position, setPosition] = useState<'top' | 'bottom'>('top');
+    const [searchValue, setSearchValue] = useState('');
+    // const [debouncedSearchValue, setDebouncedSearchValue] = useState('');
+
+    const boundingClientRect = dropdownRef.current?.getBoundingClientRect() as DOMRect;
+
+    useEffect(() => {
+      if (window.innerHeight - (boundingClientRect?.y + 240) >= 0) {
+        setPosition('top');
+      } else {
+        setPosition('bottom');
       }
+    }, [boundingClientRect]);
 
-      if (isInit) return;
+    useOnClickOutside(dropdownRef, () => setIsFocussed(false));
 
-      setLocalValues(
-        watchedValue
-          .split(',')
-          .filter(Boolean)
-          .map((value: string) =>
-            options.find(option => option.value === value)
+    // gets latest watched form value (common delimited) from RHF state and creates a list
+    useEffect(() => {
+      if (watchedValue !== undefined && !watchedValue.length && !isInit) {
+        setLocalValues([]);
+        setIsInit(true);
+      }
+
+      if (watchedValue !== undefined && watchedValue?.length && !isInit) {
+        if (shouldSideScroll) {
+          (scrollRef.current as HTMLDivElement).scrollTo({
+            left: scrollRef.current?.scrollWidth,
+            behavior: 'smooth',
+          });
+          setShouldSideScroll(false);
+        }
+
+        if (isInit) return;
+
+        setLocalValues(
+          watchedValue
+            .split(',')
+            .filter(Boolean)
+            .map((value: string) =>
+              options.find(option => option.value === value)
+            )
+        );
+        // Filter out options that are already selected
+        setLocalOptions(prevLocalOptions =>
+          prevLocalOptions.filter(
+            localOption =>
+              !watchedValue
+                .split(',')
+                .filter(Boolean)
+                .map((value: string) =>
+                  options.find(option => option.value === value)
+                )
+                .includes(localOption)
           )
-      );
-      // Filter out options that are already selected
+        );
+
+        setIsInit(true);
+      }
+    }, [
+      isInit,
+      localOptions,
+      localValues,
+      options,
+      shouldSideScroll,
+      watchedValue,
+    ]);
+
+    const handleChange = (option: FieldOption) => {
+      setShouldSideScroll(true);
+      const newValue = [...localValues, option]
+        .map(({ value }) => value)
+        .join(',');
+
+      setValue(name as string, newValue, {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
+
       setLocalOptions(prevLocalOptions =>
-        prevLocalOptions.filter(
-          localOption =>
-            !watchedValue
-              .split(',')
-              .filter(Boolean)
-              .map((value: string) =>
-                options.find(option => option.value === value)
-              )
-              .includes(localOption)
-        )
+        prevLocalOptions.filter(prevLocalOption => prevLocalOption !== option)
       );
 
-      setIsInit(true);
-    }
-  }, [
-    isInit,
-    localOptions,
-    localValues,
-    options,
-    shouldSideScroll,
-    watchedValue,
-  ]);
-
-  const handleChange = (option: FieldOption) => {
-    setShouldSideScroll(true);
-    const newValue = [...localValues, option]
-      .map(({ value }) => value)
-      .join(',');
-
-    setValue(name as string, newValue, {
-      shouldValidate: true,
-      shouldDirty: true,
-    });
-
-    setLocalOptions(prevLocalOptions =>
-      prevLocalOptions.filter(prevLocalOption => prevLocalOption !== option)
-    );
-
-    setLocalValues(prevLocalValues => [...prevLocalValues, option]);
-  };
+      setLocalValues(prevLocalValues => [...prevLocalValues, option]);
 
-  const handleDelete = (option: FieldOption) => {
-    const newValue = localValues
-      .filter(localValue => localValue !== option)
-      .map(({ value }) => value)
-      .join(',');
+      // reset search on value select
+      setSearchValue('');
+    };
 
-    setValue(name as string, newValue, {
-      shouldValidate: true,
-      shouldDirty: true,
-    });
+    const handleDelete = (option: FieldOption) => {
+      const newValue = localValues
+        .filter(localValue => localValue !== option)
+        .map(({ value }) => value)
+        .join(',');
 
-    setLocalOptions(prevLocalOptions =>
-      [...prevLocalOptions, option].sort((a, b) => a.sortValue - b.sortValue)
-    );
+      setValue(name as string, newValue, {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
 
-    setLocalValues(prevLocalValues =>
-      prevLocalValues.filter(prevLocalValue => prevLocalValue !== option)
-    );
-  };
+      setLocalOptions(prevLocalOptions =>
+        [...prevLocalOptions, option].sort((a, b) => a.sortValue - b.sortValue)
+      );
 
-  const handleOnKeyDown: KeyboardEventHandler<HTMLInputElement> = e => {
-    const initialOptionIndex = options[0].value === 'section_header' ? 1 : 0;
+      setLocalValues(prevLocalValues =>
+        prevLocalValues.filter(prevLocalValue => prevLocalValue !== option)
+      );
+    };
 
-    if (
-      !isFocussed &&
-      (e.key === 'Enter' || e.key === 'ArrowUp' || e.key === 'ArrowDown')
-    ) {
-      setIsFocussed(true);
-      return setOptionIndex(initialOptionIndex);
-    }
+    const handleOnKeyDown: KeyboardEventHandler<HTMLInputElement> = e => {
+      const initialOptionIndex = options[0].value === 'section_header' ? 1 : 0;
 
-    if (isFocussed) {
       if (
-        optionIndex === null &&
+        !isFocussed &&
         (e.key === 'Enter' || e.key === 'ArrowUp' || e.key === 'ArrowDown')
       ) {
+        setIsFocussed(true);
         return setOptionIndex(initialOptionIndex);
       }
 
-      if (e.key === 'ArrowUp' && optionIndex !== null && optionIndex > 0) {
-        const incrementValue =
-          localOptions[optionIndex - 1] &&
-          localOptions[optionIndex - 1].value === 'section_header'
-            ? 2
-            : 1;
-        setOptionIndex(optionIndex - incrementValue);
-
-        return dropdownMenuRef.current?.scrollTo({
-          top: optionIndex * 24,
-          behavior: 'smooth',
-        });
+      if (isFocussed) {
+        if (
+          optionIndex === null &&
+          (e.key === 'Enter' || e.key === 'ArrowUp' || e.key === 'ArrowDown')
+        ) {
+          return setOptionIndex(initialOptionIndex);
+        }
+
+        if (e.key === 'ArrowUp' && optionIndex !== null && optionIndex > 0) {
+          const incrementValue =
+            filteredOptions[optionIndex - 1] &&
+            filteredOptions[optionIndex - 1].value === 'section_header'
+              ? 2
+              : 1;
+          setOptionIndex(optionIndex - incrementValue);
+
+          return dropdownMenuRef.current?.scrollTo({
+            top: optionIndex * 24,
+            behavior: 'smooth',
+          });
+        }
+
+        if (
+          e.key === 'ArrowDown' &&
+          optionIndex !== null &&
+          optionIndex < filteredOptions.length
+        ) {
+          const incrementValue =
+            filteredOptions[optionIndex + 1] &&
+            filteredOptions[optionIndex + 1].value === 'section_header'
+              ? 2
+              : 1;
+          setOptionIndex(optionIndex + incrementValue);
+
+          return dropdownMenuRef.current?.scrollTo({
+            top: optionIndex * 24,
+            behavior: 'smooth',
+          });
+        }
+
+        if (e.key === 'Enter' && optionIndex !== null) {
+          const option = filteredOptions.find((_, idx) => optionIndex === idx);
+          if (!option) return;
+
+          handleChange(option);
+
+          return setIsFocussed(false);
+        }
+
+        if (e.key === 'Tab') {
+          return setIsFocussed(false);
+        }
       }
-
-      if (
-        e.key === 'ArrowDown' &&
-        optionIndex !== null &&
-        optionIndex < localOptions.length
-      ) {
-        const incrementValue =
-          localOptions[optionIndex + 1] &&
-          localOptions[optionIndex + 1].value === 'section_header'
-            ? 2
-            : 1;
-        setOptionIndex(optionIndex + incrementValue);
-
-        return dropdownMenuRef.current?.scrollTo({
-          top: optionIndex * 24,
+    };
+
+    useEffect(() => {
+      if (searchValue.length) {
+        const idx = options.findIndex(
+          option =>
+            option.label.substring(0, searchValue.length).toLowerCase() ===
+            searchValue.toLowerCase()
+        );
+
+        dropdownMenuRef.current?.scrollTo({
+          top: idx * 27,
           behavior: 'smooth',
         });
       }
-
-      if (e.key === 'Enter' && optionIndex !== null) {
-        const option = localOptions.find((_, idx) => optionIndex === idx);
-        if (!option) return;
-
-        handleChange(option);
-
-        return setIsFocussed(false);
-      }
-
-      if (e.key === 'Tab') {
-        return setIsFocussed(false);
-      }
-
-      return update(debouncedSearchValue.concat(e.key));
-    }
-  };
-
-  useEffect(() => {
-    if (searchValue.length) {
-      const idx = options.findIndex(
-        option =>
-          option.label.substring(0, searchValue.length).toLowerCase() ===
-          searchValue.toLowerCase()
+    }, [options, searchValue]);
+
+    useEffect(() => {
+      setFilteredOptions(
+        localOptions.filter(element => {
+          return element.label
+            .toLowerCase()
+            .includes(searchValue.toLowerCase());
+        })
       );
-
-      dropdownMenuRef.current?.scrollTo({
-        top: idx * 24,
-        behavior: 'smooth',
-      });
-
-      setSearchValue('');
-      setDebouncedSearchValue('');
-    }
-  }, [options, searchValue]);
-
-  const updateSearchValue = useMemo(() => {
-    return debounce(val => {
-      setSearchValue(val);
-    }, 1000);
-  }, []);
-
-  const update = (value: string) => {
-    updateSearchValue(value);
-    setDebouncedSearchValue(value);
-  };
-
-  return (
-    <Box ref={dropdownRef} position="relative" onKeyDown={handleOnKeyDown}>
-      <Flex
-        fontSize="13px"
-        h="26px"
-        border={isFocussed ? '2px solid' : '.5px solid'}
-        borderColor={isFocussed ? colors.border.focus : colors.border.default}
-        py="5px"
-        pl="8px"
-        borderRadius="4px"
-        alignItems="center"
-        justifyContent="space-between"
-        onClick={() => {
-          if (!disabled) {
-            if (isFocussed) {
-              return setIsFocussed(false);
-            }
-
-            inputRef.current?.focus();
-            setIsFocussed(true);
-          }
-        }}
-        bg={disabled ? colors.fill.light.quaternary : '#ffffff'}
-        cursor={disabled ? 'not-allowed' : 'pointer'}
-      >
+    }, [localOptions, searchValue]);
+
+    const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const initialOptionIndex =
+        filteredOptions[0]?.value === 'section_header' ? 1 : 0;
+      setOptionIndex(initialOptionIndex);
+      const { value } = e.target;
+      setSearchValue(value);
+    };
+
+    return (
+      <Box ref={dropdownRef} position="relative" onKeyDown={handleOnKeyDown}>
         <Flex
+          fontSize="13px"
+          h="26px"
+          border={isFocussed ? '2px solid' : '.5px solid'}
+          borderColor={isFocussed ? colors.border.focus : colors.border.default}
+          py="5px"
+          pl="8px"
+          borderRadius="4px"
           alignItems="center"
-          h="inherit"
-          width="90%"
-          overflowX="scroll"
-          style={{
-            scrollbarWidth: 'none' /* Firefox */,
-            msOverflowStyle: 'none',
-          }}
-          sx={{
-            '::-webkit-scrollbar': {
-              display: 'none',
-            },
+          justifyContent="space-between"
+          onClick={() => {
+            if (!disabled) {
+              if (isFocussed) {
+                return setIsFocussed(false);
+              }
+
+              inputRef.current?.focus();
+              setIsFocussed(true);
+            }
           }}
-          ref={scrollRef}
+          bg={disabled ? colors.fill.light.quaternary : '#ffffff'}
+          cursor={disabled ? 'not-allowed' : 'pointer'}
         >
-          {localValues.length ? (
-            localValues.map((option, idx) => (
-              <Box
-                key={idx}
-                mr="4px"
-                width="fit-content"
-                h="16px"
-                borderRadius="full"
-              >
-                <Token
-                  label={option.label}
-                  onDelete={() => handleDelete(option)}
-                />
-              </Box>
-            ))
-          ) : (
-            <Text color={colors.label.secondary.light} fontSize="13px">
-              {placeholder}
-            </Text>
-          )}
+          <Flex
+            alignItems="center"
+            h="inherit"
+            width="90%"
+            overflowX="scroll"
+            style={{
+              scrollbarWidth: 'none' /* Firefox */,
+              msOverflowStyle: 'none',
+            }}
+            sx={{
+              '::-webkit-scrollbar': {
+                display: 'none',
+              },
+            }}
+            ref={scrollRef}
+          >
+            {localValues.length ? (
+              localValues.map((option, idx) => (
+                <Box
+                  key={idx}
+                  mr="4px"
+                  width="fit-content"
+                  h="16px"
+                  borderRadius="full"
+                >
+                  <Token
+                    label={option.label}
+                    onDelete={() => handleDelete(option)}
+                  />
+                </Box>
+              ))
+            ) : (
+              <Text color={colors.label.secondary.light} fontSize="13px">
+                {placeholder}
+              </Text>
+            )}
+          </Flex>
+          <Input
+            padding={0}
+            border="none"
+            height="0"
+            width="0"
+            autoComplete="off"
+            type="text"
+            ref={inputRef}
+            tabIndex={-1}
+            _focus={{ boxShadow: 'none !important' }}
+          />
+          <Flex mr="4px" justifyContent="center" alignItems="center">
+            <DropdownIcon boxSize="12px" disabled={disabled} />
+          </Flex>
         </Flex>
-        <Input
-          padding={0}
-          border="none"
-          height="0"
-          width="0"
-          autoComplete="off"
-          type="text"
-          ref={inputRef}
-          tabIndex={-1}
-          _focus={{ boxShadow: 'none !important' }}
-        />
-        <Flex mr="4px" justifyContent="center" alignItems="center">
-          <DropdownIcon boxSize="16px" disabled={disabled} />
-        </Flex>
-      </Flex>
-      {isFocussed && (
-        <Dropdown
-          dropdownRef={dropdownMenuRef}
-          onSelectItem={option => handleChange(option)}
-          options={localOptions}
-          position={position}
-          optionIndex={optionIndex}
-        />
-      )}
-    </Box>
-  );
-});
+        {isFocussed && (
+          <Dropdown
+            dropdownRef={dropdownMenuRef}
+            onSelectItem={option => handleChange(option)}
+            options={filteredOptions}
+            position={position}
+            optionIndex={optionIndex}
+            loading={loadingOptions}
+          >
+            <Input
+              value={searchValue}
+              onChange={handleInput}
+              disabled={loadingOptions}
+            />
+          </Dropdown>
+        )}
+      </Box>
+    );
+  }
+);
 
 export default StackedMultiSelect;