Update callback to onChange and value property to value

super-effective · Aug 18, 2021 · 5f90b6e · 5f90b6e
1 parent a97b576
commit 5f90b6e
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -46,6 +46,6 @@ const options = [
 |`paddingVertical?`|`number`|Vertical padding - applies to the drop down itself and its items (overrides `padding`)<br />Default: `8`|
 |`placeholder?`|`ReactNode`|The content to display when no option is selected<br />Default: "&nbsp;"|
 |`selectedOptionClassName`|`string`|The className to apply to the selected option|
-|`selectedOptionId`|`string`|The id of the selected option|
 |`toggleIcon`|`ReactNode`|The element to display as the toggle icon|
-|`onOptionSelected`|`(id: string) => void`|The callback function to be called when the selected option changes|
+|`value`|`string`|The id of the selected option|
+|`onChange`|`(id: string) => void`|The callback function to be called when the selected option changes|
diff --git a/example/src/apps/Example/Example.tsx b/example/src/apps/Example/Example.tsx
@@ -17,25 +17,25 @@ const Example = () => {
         <DropdownInput
           dropDownClassName={styles.dropDown}
           options={options}
-          selectedOptionId={selectedOptionId}
-          onOptionSelected={setSelectedOptionId}
+          value={selectedOptionId}
+          onChange={setSelectedOptionId}
         />
       </section>
       <section>
         <h1>Fluid</h1>
         <DropdownInput
           options={options}
-          selectedOptionId={selectedOptionId}
-          onOptionSelected={setSelectedOptionId}
+          value={selectedOptionId}
+          onChange={setSelectedOptionId}
           fluid
         />
       </section>
       <section>
         <h1>Custom Icon</h1>
         <DropdownInput
           options={options}
-          selectedOptionId={selectedOptionId}
-          onOptionSelected={setSelectedOptionId}
+          value={selectedOptionId}
+          onChange={setSelectedOptionId}
           fluid
           toggleIcon={
             <span role="img" aria-label="expand">
@@ -49,7 +49,7 @@ const Example = () => {
         <DropdownInput
           placeholder="Select an option..."
           options={options}
-          onOptionSelected={setSelectedOptionId}
+          onChange={setSelectedOptionId}
         />
       </section>
       <section>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@super-effective/react-dropdown-input",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "React Dropdown/Select Input allowing for custom styling and content",
   "main": "build/index.js",
   "module": "build/index.es.js",

diff --git a/src/components/DropdownInput/DropdownInput.tsx b/src/components/DropdownInput/DropdownInput.tsx
@@ -42,10 +42,10 @@ export type DropdownInputProps = {
   paddingVertical?: number;
   placeholder?: ReactNode;
   selectedOptionClassName?: string;
-  selectedOptionId?: string;
+  value?: string;
   toggleIcon?: React.ReactNode;
-  onOptionSelected: (id: string) => void;
-} & React.ComponentProps<'div'>;
+  onChange: (id: string) => void;
+} & Omit<React.ComponentProps<'div'>, 'onChange'>;
 
 const DropdownInput = ({
   'aria-labelledby': ariaLabelledBy,
@@ -64,9 +64,9 @@ const DropdownInput = ({
   paddingVertical,
   placeholder = '\u00a0',
   selectedOptionClassName,
-  selectedOptionId,
   toggleIcon,
-  onOptionSelected,
+  value,
+  onChange,
   ...rest
 }: DropdownInputProps) => {
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
@@ -84,7 +84,7 @@ const DropdownInput = ({
 
   // If the list is scrollable, ensure selected option is visible
   useLayoutEffect(() => {
-    if (!listRef.current || !selectedOptionRef.current) {
+    if (!isExpanded || !listRef.current || !selectedOptionRef.current) {
       return;
     }
 
@@ -104,15 +104,15 @@ const DropdownInput = ({
       list.scrollTop =
         option.offsetTop - list.clientHeight + option.clientHeight;
     }
-  }, [selectedOptionId, isExpanded]);
+  }, [value, isExpanded]);
 
   const onToggle = () => {
     setIsExpanded((isCurrentlyExpanded) => !isCurrentlyExpanded);
   };
 
   const onSelect = (id: string) => {
     setIsExpanded(false);
-    onOptionSelected(id);
+    onChange(id);
   };
 
   const onListBlur = () => {
@@ -185,16 +185,14 @@ const DropdownInput = ({
           break;
         }
 
-        const currentIndex = options.findIndex(
-          (option) => option.id === selectedOptionId,
-        );
+        const currentIndex = options.findIndex((option) => option.id === value);
 
         // Select the next option or loop to start
         const nextIndex =
           currentIndex === options.length - 1 || currentIndex == -1
             ? 0
             : currentIndex + 1;
-        onOptionSelected(options[nextIndex].id);
+        onChange(options[nextIndex].id);
         evt.preventDefault();
         break;
       }
@@ -205,24 +203,22 @@ const DropdownInput = ({
         }
 
         // Select previous option or loop to end
-        const currentIndex = options.findIndex(
-          (option) => option.id === selectedOptionId,
-        );
+        const currentIndex = options.findIndex((option) => option.id === value);
         const nextIndex =
           currentIndex === 0 || currentIndex === -1
             ? options.length - 1
             : currentIndex - 1;
-        onOptionSelected(options[nextIndex].id);
+        onChange(options[nextIndex].id);
         evt.preventDefault();
         break;
       }
       case 'Home': {
-        onOptionSelected(options[0].id);
+        onChange(options[0].id);
         evt.preventDefault();
         break;
       }
       case 'End': {
-        onOptionSelected(options[options.length - 1].id);
+        onChange(options[options.length - 1].id);
         evt.preventDefault();
         break;
       }
@@ -234,12 +230,10 @@ const DropdownInput = ({
   };
 
   const selectedOption =
-    selectedOptionId !== undefined
-      ? options.find((option) => option.id === selectedOptionId)
-      : null;
+    value !== undefined ? options.find((option) => option.id === value) : null;
   const displayedOptions =
-    excludeSelectedOption && selectedOptionId !== undefined
-      ? options.filter((option) => option.id !== selectedOptionId)
+    excludeSelectedOption && value !== undefined
+      ? options.filter((option) => option.id !== value)
       : options;
 
   const activeSelectedOptionClassName =
@@ -323,13 +317,13 @@ const DropdownInput = ({
       >
         {displayedOptions.map(({ id, content }) => (
           <li
-            aria-selected={id === selectedOptionId}
+            aria-selected={id === value}
             key={id}
             className={classNames(styles.option, {
-              [activeSelectedOptionClassName]: id === selectedOptionId,
+              [activeSelectedOptionClassName]: id === value,
             })}
             role="option"
-            ref={id === selectedOptionId ? selectedOptionRef : undefined}
+            ref={id === value ? selectedOptionRef : undefined}
             style={{
               paddingLeft: activeHorizontalPadding,
               paddingRight: activeHorizontalPadding,