@tipp/ui 1.1.22 → 1.2.0

package/src/molecules/tag-selector.tsx

@@ -0,0 +1,314 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  ChevronRightIcon,
+  Cross1Icon,
+  MagnifyingGlassIcon,
+} from '@radix-ui/react-icons';
+import { Popover } from '../atoms/popover';
+import { Flex } from '../atoms/flex';
+import { Button } from '../atoms/button';
+import { Badge } from '../atoms/badge';
+import { CheckIcon } from '../icon';
+import { ScrollArea } from '../atoms/scroll-area';
+import { Grid } from '../atoms/grid';
+import { AutoSizingInput } from '../atoms';
+
+type ID = string;
+interface Item {
+  name: string;
+  id: ID;
+}
+
+const OPTION_HEIGHT = 32;
+
+export interface TagSelectorProps<T extends Item> {
+  options?: T[];
+  selected?: ID[];
+  placeholder?: string;
+  disabled?: boolean;
+  maxCount?: number;
+  style?: React.CSSProperties;
+
+  onChange?: (selected: ID[]) => void;
+  tagRender?: (item: T) => React.ReactElement;
+  DropdownContainer?: DropdownContainer<T>;
+}
+type DropdownContainer<T> = (props: {
+  items: T[];
+  children: React.ReactElement;
+  currentItem?: T;
+}) => React.ReactElement;
+
+const DefaultDropdownContainer = (props: {
+  children: React.ReactElement;
+}): React.ReactElement => {
+  return props.children;
+};
+
+export function TagSelector<T extends Item>(
+  props: TagSelectorProps<T>
+): React.ReactElement {
+  const {
+    options = [],
+    tagRender,
+    placeholder,
+    maxCount = 0,
+    DropdownContainer = DefaultDropdownContainer,
+  } = props;
+  const [selected, setSelected] = useState<string[]>(props.selected || []);
+  const [value, setValue] = useState<string>('');
+  const [focusIndex, setFocusIndex] = useState<number | null>(null);
+  const [open, setOpen] = useState(false);
+  const [focus, setFocus] = useState(false);
+
+  const fieldRef = useRef<HTMLInputElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const closeRef = useRef<number>(0);
+
+  const onFocus = useCallback(() => {
+    clearTimeout(closeRef.current);
+    setFocus(true);
+    setOpen(true);
+  }, []);
+
+  const onBlur = useCallback(() => {
+    closeRef.current = setTimeout(() => {
+      setFocus(false);
+      setOpen(false);
+      setTimeout(() => {
+        setValue('');
+      }, 100);
+    }, 100);
+  }, []);
+
+  const onChangeValue = useCallback<React.ChangeEventHandler<HTMLInputElement>>(
+    (e) => {
+      setValue(e.target.value);
+    },
+    []
+  );
+
+  const filteredOptions = useMemo<T[]>(() => {
+    return options.filter((option) => {
+      return option.name.includes(value);
+    });
+  }, [options, value]);
+
+  const selectedItem = useMemo<T[]>(() => {
+    const result = [] as T[];
+    selected.forEach((id) => {
+      const maybeItem = options.find((option) => option.id === id);
+      if (maybeItem) result.push(maybeItem);
+    });
+    return result;
+  }, [options, selected]);
+
+  const onDelete = useCallback((id: string) => {
+    setSelected((prev) => prev.filter((el) => el !== id));
+  }, []);
+
+  const onSelect = useCallback(
+    (id: string) => {
+      if (maxCount && selected.length + 1 > maxCount) return;
+      setSelected((prev) => [...prev, id]);
+    },
+    [maxCount, selected]
+  );
+
+  const toggleItem = useCallback(
+    (id: string) => {
+      if (selected.includes(id)) {
+        onDelete(id);
+      } else {
+        onSelect(id);
+      }
+    },
+    [onDelete, onSelect, selected]
+  );
+
+  const setScroll = useCallback((index: number): void => {
+    if (scrollRef.current) {
+      const scrollTop = scrollRef.current.scrollTop;
+      const clientHeight = scrollRef.current.clientHeight;
+      const focusTop = index * OPTION_HEIGHT;
+      if (focusTop < scrollTop) {
+        scrollRef.current.scrollTop = focusTop;
+      } else if (focusTop + OPTION_HEIGHT > scrollTop + clientHeight) {
+        scrollRef.current.scrollTop = focusTop + OPTION_HEIGHT - clientHeight;
+      }
+    }
+  }, []);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      const key = e.key;
+
+      switch (key) {
+        case 'ArrowDown': {
+          e.preventDefault();
+          let newFocus = 0;
+          if (typeof focusIndex === 'number') {
+            newFocus = focusIndex + 1 >= options.length ? 0 : focusIndex + 1;
+          }
+          setFocusIndex(newFocus);
+          setScroll(newFocus);
+          break;
+        }
+
+        case 'ArrowUp': {
+          e.preventDefault();
+          let newFocus = 0;
+          if (typeof focusIndex === 'number') {
+            newFocus = focusIndex - 1 < 0 ? options.length - 1 : focusIndex - 1;
+          }
+          setFocusIndex(newFocus);
+          setScroll(newFocus);
+          break;
+        }
+
+        case 'Enter':
+          setValue('');
+          if (focusIndex !== null) {
+            toggleItem(filteredOptions[focusIndex]?.id);
+          }
+          break;
+
+        case 'Backspace':
+          if (value.length === 0) {
+            setSelected((prev) => prev.slice(0, -1));
+          }
+          break;
+
+        case 'Escape':
+          setOpen(false);
+          break;
+      }
+    },
+    [
+      focusIndex,
+      value.length,
+      setScroll,
+      options.length,
+      toggleItem,
+      filteredOptions,
+    ]
+  );
+
+  useEffect(() => {
+    setFocusIndex(null);
+  }, [open]);
+
+  useEffect(() => {
+    setFocusIndex(0);
+  }, [filteredOptions]);
+
+  return (
+    <Popover.Root open={Boolean(filteredOptions.length) && open}>
+      <Popover.Trigger>
+        <Grid
+          align="center"
+          className={`tag-selector ${focus ? 'focused' : ''}`}
+          columns="1fr auto"
+          gap="1"
+          onClick={() => fieldRef.current?.focus()}
+        >
+          <Flex
+            align="center"
+            gap="1"
+            maxWidth="100%"
+            overflow="hidden"
+            wrap="wrap"
+          >
+            {selectedItem.map((item) => {
+              return tagRender ? (
+                tagRender(item)
+              ) : (
+                <Badge key={item.id}>
+                  {item.name}
+                  <Button
+                    onClick={() => {
+                      onDelete(item.id);
+                    }}
+                    variant="transparent"
+                  >
+                    <Cross1Icon />
+                  </Button>
+                </Badge>
+              );
+            })}
+            <AutoSizingInput
+              onBlur={onBlur}
+              onChange={onChangeValue}
+              onFocus={onFocus}
+              onKeyDown={handleKeyDown}
+              placeholder={placeholder}
+              ref={fieldRef}
+              value={value}
+            />
+          </Flex>
+          {focus ? <MagnifyingGlassIcon /> : <ChevronRightIcon />}
+        </Grid>
+      </Popover.Trigger>
+
+      <Popover.Content
+        onOpenAutoFocus={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <DropdownContainer
+          currentItem={filteredOptions[focusIndex || 0]}
+          items={filteredOptions}
+        >
+          <ScrollArea
+            ref={scrollRef}
+            scrollbars="vertical"
+            style={{ height: OPTION_HEIGHT * 8 }}
+            type="auto"
+          >
+            <Flex direction="column">
+              {filteredOptions.map((item, i) => {
+                const isSelected = Boolean(
+                  selected.find((el) => el === item.id)
+                );
+                const isFocus = i === focusIndex;
+
+                return (
+                  <Button
+                    key={item.id}
+                    onClick={() => {
+                      toggleItem(item.id);
+                      fieldRef.current?.focus();
+                    }}
+                    onMouseEnter={() => {
+                      setFocusIndex(i);
+                    }}
+                    style={{
+                      width: '100%',
+                      background: isFocus ? 'var(--accent-a3)' : undefined,
+                      color: 'var(--gray-12)',
+                      fontWeight: 400,
+                      boxShadow: 'none',
+                    }}
+                    variant={isSelected ? 'soft' : 'outline'}
+                  >
+                    <Flex justify="between" width="100%">
+                      {item.name}
+                      {isSelected ? <CheckIcon /> : null}
+                    </Flex>
+                  </Button>
+                );
+              })}
+            </Flex>
+          </ScrollArea>
+        </DropdownContainer>
+      </Popover.Content>
+    </Popover.Root>
+  );
+}