@xqmsg/ui-core 0.15.4 → 0.16.1

package/src/components/input/StackedSelect/StackedSelect.tsx

@@ -1,127 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import {
-  Box,
-  Image,
-  Input,
-  InputGroup,
-  InputRightElement,
-} from '@chakra-ui/react';
-import { FieldOptions } from '../InputTypes';
-import { StackedInputProps } from '../StackedInput/StackedInput';
-import colors from '../../../../src/theme/foundations/colors';
-import { UseFormSetValue, FieldValues, Control } from 'react-hook-form';
-import SubtractIcon from './assets/svg/subtract.svg';
-import { Dropdown } from '../components/dropdown';
-import useDidMountEffect from '../../../hooks/useDidMountEffect';
-import { useOnClickOutside } from '../../../hooks/useOnOutsideClick';
-
-export interface StackedSelectProps extends StackedInputProps {
-  options: FieldOptions;
-  setValue: UseFormSetValue<FieldValues>;
-  control: Control<FieldValues, any>;
-  handleOnChange: (value?: string) => void;
-}
-
-/**
- * A functional React component utilized to render the `StackedSelect` component.
- */
-const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
-  (
-    { isRequired, options, name, setValue, handleOnChange, value, ...props },
-    _ref
-  ) => {
-    const dropdownRef = useRef<HTMLDivElement>(null);
-    const dropdownMenuRef = useRef<HTMLDivElement>(null);
-
-    const [isFocussed, setIsFocussed] = useState(false);
-    const [selectedOption, setSelectedOption] = useState(
-      options.find(option => option.value === value)?.label ?? ''
-    );
-    const [position, setPosition] = useState<'top' | 'bottom'>('top');
-
-    const boundingClientRect = dropdownRef.current?.getBoundingClientRect() as DOMRect;
-
-    useEffect(() => {
-      const boundingClientRect = dropdownRef.current?.getBoundingClientRect() as DOMRect;
-
-      if (window.innerHeight - (boundingClientRect?.y + 240) >= 0) {
-        setPosition('top');
-      } else {
-        setPosition('bottom');
-      }
-    }, [boundingClientRect]);
-
-    useDidMountEffect(() => {
-      setSelectedOption(
-        options.find(option => option.value === value)?.label ?? ''
-      );
-    }, [value]);
-
-    useOnClickOutside(dropdownRef, () => setIsFocussed(false));
-
-    const handleOnSelectItem = (option: {
-      label: string;
-      value: string;
-      sortValue: number;
-    }) => {
-      if (handleOnChange) {
-        handleOnChange(option.value);
-      }
-      setValue(name as string, option.value);
-      setSelectedOption(option.label);
-      setIsFocussed(false);
-    };
-
-    return (
-      <Box ref={dropdownRef} position="relative">
-        <InputGroup>
-          <Input
-            isRequired={isRequired}
-            {...props}
-            ref={_ref}
-            onClick={() => setIsFocussed(!isFocussed)}
-            cursor="pointer"
-            color="transparent"
-            fontSize="13px"
-            textShadow={`0 0 0 ${colors.label.primary.light}`}
-            value={selectedOption}
-            autoComplete="off"
-            onKeyDown={e => {
-              if (isFocussed) {
-                if (e.key === 'Tab') {
-                  return setIsFocussed(false);
-                }
-
-                const idx = options.findIndex(
-                  option => option.label[0].toLocaleLowerCase() === e.key
-                );
-                console.log(idx);
-
-                dropdownMenuRef.current?.scrollTo({
-                  top: idx * 27,
-                  behavior: 'smooth',
-                });
-              }
-            }}
-          />
-          <InputRightElement
-            cursor="pointer"
-            onClick={() => setIsFocussed(!isFocussed)}
-          >
-            <Image src={SubtractIcon} alt="subtract" boxSize="16px" />
-          </InputRightElement>
-        </InputGroup>
-        {isFocussed && (
-          <Dropdown
-            position={position}
-            dropdownRef={dropdownMenuRef}
-            onSelectItem={option => handleOnSelectItem(option)}
-            options={options}
-          />
-        )}
-      </Box>
-    );
-  }
-);
-
-export default StackedSelect;