Merge pull request #3 from AtomicJon/master

Update component and prop naming
super-effective · Aug 18, 2021 · 14e3a8d · 14e3a8d
2 parents 9b11084 + 5f90b6e
commit 14e3a8d
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 59 deletions.
diff --git a/README.md b/README.md
@@ -40,12 +40,12 @@ const options = [
 |`dropDownStyle?`|`React.CSSProperties`|The styles to apply to the dropdown|
 |`excludeSelectedOption?`|`boolean`|Exclude the selected option from the list<br />Default: `false`|
 |`fluid?`|`boolean`|Display the dropdown as a fluid item (no division between the value and the dropdown)<br />Default: `false`
-|`options`|`DropDownInputOption[]`|The array options <br>`{ id: string; content: ReactNode; }`|
+|`options`|`DropdownInputOption[]`|The array options <br>`{ id: string; content: ReactNode; }`|
 |`padding?`|`number`|Padding - applies to the drop down itself and its items|
 |`paddingHorizontal?`|`number`|Horizontal padding - applies to the drop down itself and its items (overrides `padding`)<br />Default: `12`|
 |`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
@@ -1,4 +1,4 @@
-import DropDownInput from '@super-effective/react-dropdown-input';
+import DropdownInput from '@super-effective/react-dropdown-input';
 import { useState } from 'react';
 
 import styles from './Example.module.scss';
@@ -14,28 +14,28 @@ const Example = () => {
     <div>
       <section>
         <h1>Default</h1>
-        <DropDownInput
+        <DropdownInput
           dropDownClassName={styles.dropDown}
           options={options}
-          selectedOptionId={selectedOptionId}
-          onOptionSelected={setSelectedOptionId}
+          value={selectedOptionId}
+          onChange={setSelectedOptionId}
         />
       </section>
       <section>
         <h1>Fluid</h1>
-        <DropDownInput
+        <DropdownInput
           options={options}
-          selectedOptionId={selectedOptionId}
-          onOptionSelected={setSelectedOptionId}
+          value={selectedOptionId}
+          onChange={setSelectedOptionId}
           fluid
         />
       </section>
       <section>
         <h1>Custom Icon</h1>
-        <DropDownInput
+        <DropdownInput
           options={options}
-          selectedOptionId={selectedOptionId}
-          onOptionSelected={setSelectedOptionId}
+          value={selectedOptionId}
+          onChange={setSelectedOptionId}
           fluid
           toggleIcon={
             <span role="img" aria-label="expand">
@@ -46,10 +46,10 @@ const Example = () => {
       </section>
       <section>
         <h1>Empty Selection</h1>
-        <DropDownInput
+        <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/...s/DropDownInput/DropDownInput.module.scss → ...s/DropdownInput/DropdownInput.module.scss b/...s/DropDownInput/DropDownInput.module.scss → ...s/DropdownInput/DropdownInput.module.scss
diff --git a/...omponents/DropDownInput/DropDownInput.tsx → ...omponents/DropdownInput/DropdownInput.tsx b/...omponents/DropDownInput/DropDownInput.tsx → ...omponents/DropdownInput/DropdownInput.tsx
@@ -2,7 +2,7 @@ import React, { ReactNode, useLayoutEffect, useRef, useState } from 'react';
 
 import classNames from 'util/classNames';
 
-import styles from './DropDownInput.module.scss';
+import styles from './DropdownInput.module.scss';
 import dropdownImg from './assets/icon-dropdown.svg';
 
 export const DEFAULT_BORDER_COLOR = '#cdcdcf';
@@ -12,12 +12,12 @@ export const DEFAULT_BORDER_STYLE = 'solid';
 export const DEFAULT_HORIZONTAL_PADDING = 12;
 export const DEFAULT_VERTICAL_PADDING = 8;
 
-export type DropDownInputOption = {
+export type DropdownInputOption = {
   id: string;
   content: ReactNode;
 };
 
-export type DropDownInputProps = {
+export type DropdownInputProps = {
   borderColor?: string;
   borderWidth?: number | string;
   borderRadius?: number | string;
@@ -36,18 +36,18 @@ export type DropDownInputProps = {
   dropDownStyle?: React.CSSProperties;
   excludeSelectedOption?: boolean;
   fluid?: boolean;
-  options?: DropDownInputOption[];
+  options?: DropdownInputOption[];
   padding?: number;
   paddingHorizontal?: number;
   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 = ({
+const DropdownInput = ({
   'aria-labelledby': ariaLabelledBy,
   borderColor = DEFAULT_BORDER_COLOR,
   borderWidth = DEFAULT_BORDER_WIDTH,
@@ -64,11 +64,11 @@ const DropDownInput = ({
   paddingVertical,
   placeholder = '\u00a0',
   selectedOptionClassName,
-  selectedOptionId,
   toggleIcon,
-  onOptionSelected,
+  value,
+  onChange,
   ...rest
-}: DropDownInputProps) => {
+}: DropdownInputProps) => {
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
 
   const valueRef = useRef<HTMLDivElement>(null);
@@ -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]);
+  }, [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,
@@ -347,4 +341,4 @@ const DropDownInput = ({
   );
 };
 
-export default DropDownInput;
+export default DropdownInput;
diff --git a/...ts/DropDownInput/assets/icon-dropdown.svg → ...ts/DropdownInput/assets/icon-dropdown.svg b/...ts/DropDownInput/assets/icon-dropdown.svg → ...ts/DropdownInput/assets/icon-dropdown.svg
diff --git a/src/components/DropDownInput/index.ts → src/components/DropdownInput/index.ts b/src/components/DropDownInput/index.ts → src/components/DropdownInput/index.ts
@@ -1,13 +1,13 @@
-import DropDownInput from './DropDownInput';
+import DropdownInput from './DropdownInput';
 
 export type {
   DEFAULT_BORDER_COLOR,
   DEFAULT_BORDER_WIDTH,
   DEFAULT_BORDER_STYLE,
   DEFAULT_HORIZONTAL_PADDING,
   DEFAULT_VERTICAL_PADDING,
-  DropDownInputOption,
-  DropDownInputProps,
-} from './DropDownInput';
+  DropdownInputOption,
+  DropdownInputProps,
+} from './DropdownInput';
 
-export default DropDownInput;
+export default DropdownInput;
diff --git a/src/index.ts b/src/index.ts
@@ -1,13 +1,13 @@
-import DropDownInput from './components/DropDownInput';
+import DropdownInput from './components/DropdownInput';
 
 export {
   DEFAULT_BORDER_COLOR,
   DEFAULT_BORDER_WIDTH,
   DEFAULT_BORDER_STYLE,
   DEFAULT_HORIZONTAL_PADDING,
   DEFAULT_VERTICAL_PADDING,
-  DropDownInputOption,
-  DropDownInputProps,
-} from './components/DropDownInput';
+  DropdownInputOption,
+  DropdownInputProps,
+} from './components/DropdownInput';
 
-export default DropDownInput;
+export default DropdownInput;