feat(select-field): Allow rendering custom options (#1516)

jpfranco · mergify[bot] · commit 53fe2705e3b8 · 2019-08-15T17:11:55.000Z
* feat(select-field): Allow rendering custom options

* fix(select-field): Now scrolling into view after state update
diff --git a/src/components/select-field/BaseSelectField.js b/src/components/select-field/BaseSelectField.js
@@ -43,13 +43,15 @@ type Props = {
     onChange: Function,
     /** Function will be called with the user selected option (even on deselect or when the option was previously selected) */
     onOptionSelect?: Function,
+    /** Function that allows custom rendering of select field options. When not provided the component will only render the option's displayText by default */
+    optionRenderer?: (option: SelectOptionProp) => React.Node,
     /** List of options (displayText, value) */
     options: Array<SelectOptionProp>,
     /** The select button text shown when no options are selected. */
     placeholder?: string | React.Element<any>,
     /** The currently selected option values (can be empty) */
     selectedValues: Array<SelectOptionValueProp>,
-    /**  Array of ordered indices indicating where to insert separators (ex. index 2 means insert a separator after option 2) */
+    /** Array of ordered indices indicating where to insert separators (ex. index 2 means insert a separator after option 2) */
     separatorIndices: Array<number>,
     /** The select button text (by default, component will use comma separated list of all selected option displayText) */
     title?: string | React.Element<any>,
@@ -59,6 +61,7 @@ type State = {
     activeItemID: ?string,
     activeItemIndex: number,
     isOpen: boolean,
+    shouldScrollIntoView: boolean,
 };
 
 class BaseSelectField extends React.Component<Props, State> {
@@ -80,20 +83,26 @@ class BaseSelectField extends React.Component<Props, State> {
             activeItemID: null,
             activeItemIndex: -1,
             isOpen: false,
+            shouldScrollIntoView: false,
         };
     }
 
-    setActiveItem = (index: number) => {
-        this.setState({ activeItemIndex: index });
+    setActiveItem = (index: number, shouldScrollIntoView?: boolean = true) => {
+        this.setState({ activeItemIndex: index, shouldScrollIntoView });
         if (index === -1) {
             this.setActiveItemID(null);
         }
     };
 
     setActiveItemID = (id: ?string) => {
+        const { shouldScrollIntoView } = this.state;
         const itemEl = id ? document.getElementById(id) : null;
-        this.setState({ activeItemID: id });
-        scrollIntoView(itemEl);
+
+        this.setState({ activeItemID: id, shouldScrollIntoView: false }, () => {
+            if (shouldScrollIntoView) {
+                scrollIntoView(itemEl, { block: 'nearest' });
+            }
+        });
     };
 
     selectFieldID: string;
@@ -304,7 +313,7 @@ class BaseSelectField extends React.Component<Props, State> {
     };
 
     renderSelectOptions = () => {
-        const { options, selectedValues, separatorIndices } = this.props;
+        const { optionRenderer, options, selectedValues, separatorIndices } = this.props;
         const { activeItemIndex } = this.state;
 
         const selectOptions = options.map<React.Element<typeof DatalistItem | 'li'>>((item, index) => {
@@ -321,12 +330,8 @@ class BaseSelectField extends React.Component<Props, State> {
 
                     this.selectOption(index);
                 },
-                /* preventDefault on mousedown so blur doesn't happen before click */
-                onMouseDown: event => {
-                    event.preventDefault();
-                },
                 onMouseEnter: () => {
-                    this.setActiveItem(index);
+                    this.setActiveItem(index, false);
                 },
                 setActiveItemID: this.setActiveItemID,
             };
@@ -342,7 +347,7 @@ class BaseSelectField extends React.Component<Props, State> {
                     <div className="select-option-check-icon">
                         {isSelected ? <IconCheck height={16} width={16} /> : null}
                     </div>
-                    {displayText}
+                    {optionRenderer ? optionRenderer(item) : displayText}
                 </DatalistItem>
             );
             /* eslint-enable react/jsx-key */
@@ -385,7 +390,14 @@ class BaseSelectField extends React.Component<Props, State> {
                             'is-visible': isOpen,
                         })}
                     >
-                        <ul className="overlay" id={this.selectFieldID} role="listbox" {...listboxProps}>
+                        <ul
+                            className="overlay"
+                            id={this.selectFieldID}
+                            role="listbox"
+                            // preventDefault on mousedown so blur doesn't happen before click
+                            onMouseDown={event => event.preventDefault()}
+                            {...listboxProps}
+                        >
                             {this.renderSelectOptions()}
                         </ul>
                     </div>
diff --git a/src/components/select-field/__tests__/BaseSelectField-test.js b/src/components/select-field/__tests__/BaseSelectField-test.js
@@ -13,6 +13,7 @@ jest.mock('../../../utils/dom', () => ({
 describe('components/select-field/BaseSelectField', () => {
     afterEach(() => {
         sandbox.verifyAndRestore();
+        jest.clearAllMocks();
     });
 
     const options = [
@@ -168,6 +169,19 @@ describe('components/select-field/BaseSelectField', () => {
             expect(overlayWrapper.childAt(1).prop('role')).toEqual('separator');
             expect(overlayWrapper.childAt(4).prop('role')).toEqual('separator');
         });
+
+        test('should render option content using optionRenderer when provided', () => {
+            const optionRenderer = jest.fn().mockImplementation(({ displayText, value }) => (
+                <span>
+                    {displayText}-{value}
+                </span>
+            ));
+            const wrapper = shallowRenderSelectField({ optionRenderer });
+            const itemsWrapper = wrapper.find('DatalistItem');
+
+            expect(optionRenderer).toHaveBeenCalledTimes(options.length);
+            expect(itemsWrapper).toMatchSnapshot();
+        });
     });
 
     describe('render()', () => {
@@ -572,14 +586,11 @@ describe('components/select-field/BaseSelectField', () => {
     });
 
     describe('onOptionMouseDown', () => {
-        test('should prevent default when mousedown on item occurs to prevent blur', () => {
+        test('should prevent default when mousedown on overlay occurs to prevent blur', () => {
             const wrapper = shallowRenderSelectField();
-            wrapper
-                .find('DatalistItem')
-                .at(0)
-                .simulate('mouseDown', {
-                    preventDefault: sandbox.mock(),
-                });
+            wrapper.find('.overlay').simulate('mouseDown', {
+                preventDefault: sandbox.mock(),
+            });
         });
     });
 
@@ -594,6 +605,18 @@ describe('components/select-field/BaseSelectField', () => {
 
             expect(wrapper.state('activeItemIndex')).toEqual(2);
         });
+
+        test('should set shouldScrollIntoView to false when hovering over item', () => {
+            const wrapper = shallowRenderSelectField();
+            wrapper.setState({ shouldScrollIntoView: true });
+
+            wrapper
+                .find('DatalistItem')
+                .at(2)
+                .simulate('mouseEnter');
+
+            expect(wrapper.state('shouldScrollIntoView')).toBe(false);
+        });
     });
 
     describe('setActiveItem()', () => {
@@ -617,6 +640,12 @@ describe('components/select-field/BaseSelectField', () => {
                 .withArgs(null);
             instance.setActiveItem(-1);
         });
+
+        test('should set shouldScrollIntoView to true by default when called', () => {
+            wrapper.setState({ shouldScrollIntoView: false });
+            instance.setActiveItem(1);
+            expect(wrapper.state('shouldScrollIntoView')).toBe(true);
+        });
     });
 
     describe('setActiveItemID()', () => {
@@ -629,9 +658,14 @@ describe('components/select-field/BaseSelectField', () => {
             expect(wrapper.state('activeItemID')).toEqual(id);
         });
 
-        test('should scroll into view when called', () => {
+        test('should scroll into view when called and previously specified in state', () => {
+            wrapper.setState({ shouldScrollIntoView: false });
+            instance.setActiveItemID(id);
+            expect(scrollIntoView).toHaveBeenCalledTimes(0);
+
+            wrapper.setState({ shouldScrollIntoView: true });
             instance.setActiveItemID(id);
-            expect(scrollIntoView).toHaveBeenCalled();
+            expect(scrollIntoView).toHaveBeenCalledTimes(1);
         });
     });
 
diff --git a/src/components/select-field/__tests__/__snapshots__/BaseSelectField-test.js.snap b/src/components/select-field/__tests__/__snapshots__/BaseSelectField-test.js.snap
@@ -14,3 +14,71 @@ exports[`components/select-field/BaseSelectField renderSelectButton() should sen
   title=""
 />
 `;
+
+exports[`components/select-field/BaseSelectField renderSelectOptions() should render option content using optionRenderer when provided 1`] = `
+Array [
+  <DatalistItem
+    className="select-option"
+    key="0"
+    onClick={[Function]}
+    onMouseEnter={[Function]}
+    setActiveItemID={[Function]}
+  >
+    <div
+      className="select-option-check-icon"
+    />
+    <span>
+      Any Type
+      -
+    </span>
+  </DatalistItem>,
+  <DatalistItem
+    className="select-option"
+    key="1"
+    onClick={[Function]}
+    onMouseEnter={[Function]}
+    setActiveItemID={[Function]}
+  >
+    <div
+      className="select-option-check-icon"
+    />
+    <span>
+      Audio
+      -
+      audio
+    </span>
+  </DatalistItem>,
+  <DatalistItem
+    className="select-option"
+    key="2"
+    onClick={[Function]}
+    onMouseEnter={[Function]}
+    setActiveItemID={[Function]}
+  >
+    <div
+      className="select-option-check-icon"
+    />
+    <span>
+      Documents
+      -
+      document
+    </span>
+  </DatalistItem>,
+  <DatalistItem
+    className="select-option"
+    key="3"
+    onClick={[Function]}
+    onMouseEnter={[Function]}
+    setActiveItemID={[Function]}
+  >
+    <div
+      className="select-option-check-icon"
+    />
+    <span>
+      Videos
+      -
+      video
+    </span>
+  </DatalistItem>,
+]
+`;
