refactor: extract hook from component

Author: iobuhov

packages/shared/widget-plugin-filtering/src/controls/filter-selector/FilterSelector.tsx

@@ -1,7 +1,6 @@
 import classNames from "classnames";
-import { createElement, useMemo } from "react";
-import { useSelect, UseSelectPropGetters } from "downshift";
-import { useFloating, autoUpdate } from "@floating-ui/react-dom";
+import { createElement } from "react";
+import { useSelect } from "./useSelect";
 
 interface Option {
     value: string;
@@ -17,7 +16,7 @@ interface FilterSelectorProps {
 
 export function FilterSelector(props: FilterSelectorProps): React.ReactElement {
     const { open, buttonProps, listboxProps, getItemProps, selectedItem, highlightedIndex, floatingStyles } =
-        useController(props);
+        useSelect(props);
 
     return (
         <div className="filter-selector">
@@ -52,57 +51,3 @@ export function FilterSelector(props: FilterSelectorProps): React.ReactElement {
         </div>
     );
 }
-
-interface ViewProps {
-    open: boolean;
-    buttonProps: JSX.IntrinsicElements["button"];
-    listboxProps: JSX.IntrinsicElements["ul"];
-    getItemProps: UseSelectPropGetters<Option>["getItemProps"];
-    selectedItem: Option | null;
-    highlightedIndex: number;
-    floatingStyles: React.CSSProperties;
-}
-
-function useController(props: FilterSelectorProps): ViewProps {
-    const selectedItem = useMemo(
-        () => props.options.find(item => item.value === props.value) ?? null,
-        [props.options, props.value]
-    );
-
-    const { isOpen, highlightedIndex, getToggleButtonProps, getMenuProps, getItemProps } = useSelect({
-        items: props.options,
-        selectedItem,
-        itemToString,
-        onSelectedItemChange: ({ selectedItem }) => props.onChange(selectedItem.value)
-    });
-
-    const { refs, floatingStyles } = useFloating({
-        open: isOpen,
-        placement: "bottom-start",
-        strategy: "fixed",
-        whileElementsMounted: autoUpdate
-    });
-
-    const listboxLabel = props.ariaLabel || "Select filter type";
-    const buttonLabel = selectedItem?.label || listboxLabel;
-    const buttonProps = getToggleButtonProps({
-        "aria-label": buttonLabel,
-        ref: refs.setReference
-    });
-    const listboxProps = getMenuProps({
-        "aria-label": listboxLabel,
-        ref: refs.setFloating
-    });
-
-    return {
-        open: isOpen,
-        buttonProps,
-        listboxProps,
-        getItemProps,
-        selectedItem,
-        highlightedIndex,
-        floatingStyles
-    };
-}
-
-const itemToString = (item: Option | null): string => (item ? item.label : "");

packages/shared/widget-plugin-filtering/src/controls/filter-selector/useSelect.tsx

@@ -0,0 +1,69 @@
+import { UseSelectPropGetters, useSelect as useDownshiftSelect } from "downshift";
+import { useFloating, autoUpdate } from "@floating-ui/react-dom";
+import { useMemo } from "react";
+
+interface Option {
+    value: string;
+    label: string;
+}
+
+interface useSelectProps {
+    ariaLabel?: string;
+    value: string;
+    onChange: (value: string) => void;
+    options: Option[];
+}
+
+interface ViewProps {
+    open: boolean;
+    buttonProps: JSX.IntrinsicElements["button"];
+    listboxProps: JSX.IntrinsicElements["ul"];
+    getItemProps: UseSelectPropGetters<Option>["getItemProps"];
+    selectedItem: Option | null;
+    highlightedIndex: number;
+    floatingStyles: React.CSSProperties;
+}
+
+export function useSelect(props: useSelectProps): ViewProps {
+    const selectedItem = useMemo(
+        () => props.options.find(item => item.value === props.value) ?? null,
+        [props.options, props.value]
+    );
+
+    const { isOpen, highlightedIndex, getToggleButtonProps, getMenuProps, getItemProps } = useDownshiftSelect({
+        items: props.options,
+        selectedItem,
+        itemToString,
+        onSelectedItemChange: ({ selectedItem }) => props.onChange(selectedItem.value)
+    });
+
+    const { refs, floatingStyles } = useFloating({
+        open: isOpen,
+        placement: "bottom-start",
+        strategy: "fixed",
+        whileElementsMounted: autoUpdate
+    });
+
+    const listboxLabel = props.ariaLabel || "Select filter type";
+    const buttonLabel = selectedItem?.label || listboxLabel;
+    const buttonProps = getToggleButtonProps({
+        "aria-label": buttonLabel,
+        ref: refs.setReference
+    });
+    const listboxProps = getMenuProps({
+        "aria-label": listboxLabel,
+        ref: refs.setFloating
+    });
+
+    return {
+        open: isOpen,
+        buttonProps,
+        listboxProps,
+        getItemProps,
+        selectedItem,
+        highlightedIndex,
+        floatingStyles
+    };
+}
+
+const itemToString = (item: Option | null): string => (item ? item.label : "");