Migrate to controlled component

Author: jkettmann

features/ui/select/option.tsx

@@ -1,32 +1,25 @@
 import React, { ReactNode } from "react";
-import { useSelectContext } from "./select-context";
 import * as S from "./option.styled";
 
 type OptionProps = {
-  children: ReactNode | ReactNode[];
-  value: any;
-  handleCallback?: (value: any) => unknown;
+  children: ReactNode;
+  value: unknown;
+  isSelected: boolean;
+  onClick: (value: unknown) => void;
 };
 
-export function Option({ children, value, handleCallback }: OptionProps) {
-  const { changeSelectedOption, selectedOption } = useSelectContext();
-  const isCurrentlySelected = selectedOption === value;
-
+export function Option({ children, value, onClick, isSelected }: OptionProps) {
   return (
     <S.ListItem
-      isCurrentlySelected={isCurrentlySelected}
-      aria-selected={isCurrentlySelected}
-      onClick={() => {
-        changeSelectedOption(value);
-        if (handleCallback) {
-          handleCallback(value);
-        }
-      }}
+      isCurrentlySelected={isSelected}
+      aria-selected={isSelected}
+      onClick={() => onClick(value)}
       role="option"
+      tabIndex={0}
     >
       {children}
       <S.ListItemIcon
-        isCurrentlySelected={isCurrentlySelected}
+        isCurrentlySelected={isSelected}
         src="/icons/checked.svg"
       />
     </S.ListItem>

features/ui/select/select.stories.tsx

@@ -1,38 +1,36 @@
-import React from "react";
+import React, { useState } from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Select, Option } from "./";
-
+import { Select } from "./select";
 export default {
   title: "UI/Select",
   component: Select,
   parameters: {
     layout: "fullscreen",
   },
 } as ComponentMeta<typeof Select>;
-
-const selectData = [
-  "Phoenix Baker",
-  "Olivia Rhye",
-  "Lana Steiner",
-  "Demi Wilkinson",
-  "Candice Wu",
-  "Natali Craig",
-  "Drew Cano",
+const options = [
+  { label: "Phoenix Baker", value: 1 },
+  { label: "Olivia Rhye", value: 2 },
+  { label: "Lana Steiner", value: 3 },
+  { label: "Demi Wilkinson", value: 4 },
+  { label: "Candice Wu", value: 5 },
+  { label: "Natali Craig", value: 6 },
+  { label: "Drew Cano", value: 7 },
 ];
-
 const Template: ComponentStory<typeof Select> = (props) => {
+  const [selectedValue, setSelectedValue] = useState<number>();
   return (
     <div style={{ padding: 50, height: 400 }}>
-      <Select {...props}>
-        {selectData.map((name) => (
-          <Option key={name} value={name}>
-            {name}
-          </Option>
-        ))}
-      </Select>
+      <Select
+        {...props}
+        options={options}
+        value={selectedValue}
+        onChange={(value) => setSelectedValue(value as number)}
+      />
     </div>
   );
 };
+
 export const Default = Template.bind({});
 Default.args = {
   disabled: false,

features/ui/select/select.tsx

@@ -1,17 +1,17 @@
-import React, {
-  useState,
-  ReactNode,
-  useCallback,
-  useMemo,
-  useRef,
-  SelectHTMLAttributes,
-} from "react";
+import React, { useState, useRef } from "react";
 import { useClickAway } from "react-use";
-import { SelectContext } from "./select-context";
+import { Option } from "./option";
 import * as S from "./select.styled";
 
-type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
-  children: ReactNode | ReactNode[];
+type Option = {
+  value: unknown;
+  label: React.ReactNode;
+};
+
+type SelectProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & {
+  options: Option[];
+  value: unknown;
+  onChange: (value: unknown) => void;
   errorMessage?: string;
   defaultValue?: string;
   placeholder?: string;
@@ -23,6 +23,9 @@ type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
 };
 
 export function Select({
+  options,
+  value,
+  onChange,
   placeholder = "Choose an option",
   defaultValue = "",
   iconSrc = "",
@@ -31,10 +34,8 @@ export function Select({
   hint = "",
   errorMessage = "",
   width = "",
-  children,
   ...props
 }: SelectProps) {
-  const [selectedOption, setSelectedOption] = useState(defaultValue || "");
   const [showDropdown, setShowDropdown] = useState(false);
   const ref = useRef(null);
 
@@ -43,55 +44,59 @@ export function Select({
     setShowDropdown(false);
   });
 
-  const showDropdownHandler = useCallback(
-    () => setShowDropdown((prevShowDropdown) => !prevShowDropdown),
-    []
-  );
+  const showDropdownHandler = () =>
+    setShowDropdown((prevShowDropdown) => !prevShowDropdown);
 
-  const updateSelectedOption = useCallback((option: string) => {
-    setSelectedOption(option);
+  const onClickOption = (newValue: unknown) => {
+    onChange(newValue);
     setShowDropdown(false);
-  }, []);
+  };
 
-  const value = useMemo(
-    () => ({ selectedOption, changeSelectedOption: updateSelectedOption }),
-    [selectedOption, updateSelectedOption]
+  const selectedOption = options.find(
+    (option) => option.value === (value || defaultValue)
   );
 
   return (
-    <SelectContext.Provider value={value}>
-      <S.Container ref={ref} width={width} {...props}>
-        {label && <S.Label>{label}</S.Label>}
+    <S.Container ref={ref} width={width} {...props}>
+      {label && <S.Label>{label}</S.Label>}
 
-        <S.SelectedOption
-          onClick={showDropdownHandler}
-          selectedOption={selectedOption}
-          disabled={disabled}
-          errorMessage={errorMessage}
-          aria-expanded={showDropdown}
-          width={width}
-        >
-          <S.LeftContainer>
-            {iconSrc && <S.OptionalIcon src={iconSrc} />}
-            {selectedOption || placeholder}
-          </S.LeftContainer>
+      <S.SelectedOption
+        onClick={showDropdownHandler}
+        selectedOption={selectedOption}
+        disabled={disabled}
+        errorMessage={errorMessage}
+        aria-expanded={showDropdown}
+        width={width}
+      >
+        <S.LeftContainer>
+          {iconSrc && <S.OptionalIcon src={iconSrc} />}
+          {selectedOption?.label || placeholder}
+        </S.LeftContainer>
 
-          <S.SelectArrowIcon
-            src="/icons/chevron-down.svg"
-            showDropdown={showDropdown}
-          />
-        </S.SelectedOption>
+        <S.SelectArrowIcon
+          src="/icons/chevron-down.svg"
+          showDropdown={showDropdown}
+        />
+      </S.SelectedOption>
 
-        {hint && !showDropdown && !errorMessage && <S.Hint>{hint}</S.Hint>}
+      {hint && !showDropdown && !errorMessage && <S.Hint>{hint}</S.Hint>}
 
-        {errorMessage && !showDropdown && !disabled && (
-          <S.ErrorMessage>{errorMessage}</S.ErrorMessage>
-        )}
+      {errorMessage && !showDropdown && !disabled && (
+        <S.ErrorMessage>{errorMessage}</S.ErrorMessage>
+      )}
 
-        <S.List showDropdown={showDropdown} role="listbox" tabIndex={-1}>
-          {children}
-        </S.List>
-      </S.Container>
-    </SelectContext.Provider>
+      <S.List showDropdown={showDropdown} role="listbox" tabIndex={-1}>
+        {options.map((option) => (
+          <Option
+            key={String(option.value)}
+            value={option.value}
+            isSelected={value === option.value}
+            onClick={onClickOption}
+          >
+            {option.label}
+          </Option>
+        ))}
+      </S.List>
+    </S.Container>
   );
 }