Merge pull request #15673 from redstar504/Brayden-PickerIndicator

Add additional events for controlling picker indicator on web

src/components/Picker.js → src/components/Picker/Picker.js

@@ -3,13 +3,13 @@ import React, {PureComponent} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import RNPickerSelect from 'react-native-picker-select';
-import Icon from './Icon';
-import * as Expensicons from './Icon/Expensicons';
-import FormHelpMessage from './FormHelpMessage';
-import Text from './Text';
-import styles from '../styles/styles';
-import themeColors from '../styles/themes/default';
-import {ScrollContext} from './ScrollViewWithContext';
+import Icon from '../Icon';
+import * as Expensicons from '../Icon/Expensicons';
+import FormHelpMessage from '../FormHelpMessage';
+import Text from '../Text';
+import styles from '../../styles/styles';
+import themeColors from '../../styles/themes/default';
+import {ScrollContext} from '../ScrollViewWithContext';
 
 const propTypes = {
     /** Picker label */
@@ -75,6 +75,9 @@ const propTypes = {
             current: PropTypes.element,
         }),
     ]),
+
+    /** Additional events passed to the core Picker for specific platforms such as web */
+    additionalPickerEvents: PropTypes.func,
 };
 
 const defaultProps = {
@@ -97,16 +100,19 @@ const defaultProps = {
     ),
     onBlur: () => {},
     innerRef: () => {},
+    additionalPickerEvents: () => {},
 };
 
 class Picker extends PureComponent {
     constructor(props) {
         super(props);
         this.state = {
-            isOpen: false,
+            isHighlighted: false,
         };
 
         this.onInputChange = this.onInputChange.bind(this);
+        this.enableHighlight = this.enableHighlight.bind(this);
+        this.disableHighlight = this.disableHighlight.bind(this);
 
         // Windows will reuse the text color of the select for each one of the options
         // so we might need to color accordingly so it doesn't blend with the background.
@@ -151,6 +157,18 @@ class Picker extends PureComponent {
         this.props.onInputChange(this.props.items[0].value, 0);
     }
 
+    enableHighlight() {
+        this.setState({
+            isHighlighted: true,
+        });
+    }
+
+    disableHighlight() {
+        this.setState({
+            isHighlighted: false,
+        });
+    }
+
     render() {
         const hasError = !_.isEmpty(this.props.errorText);
 
@@ -161,7 +179,7 @@ class Picker extends PureComponent {
                         styles.pickerContainer,
                         this.props.isDisabled && styles.inputDisabled,
                         ...this.props.containerStyles,
-                        this.state.isOpen && styles.borderColorFocus,
+                        this.state.isHighlighted && styles.borderColorFocus,
                         hasError && styles.borderColorDanger,
                     ]}
                 >
@@ -184,15 +202,22 @@ class Picker extends PureComponent {
                         Icon={() => this.props.icon(this.props.size)}
                         disabled={this.props.isDisabled}
                         fixAndroidTouchableBug
-                        onOpen={() => this.setState({isOpen: true})}
-                        onClose={() => this.setState({isOpen: false})}
+                        onOpen={this.enableHighlight}
+                        onClose={this.disableHighlight}
                         textInputProps={{allowFontScaling: false}}
                         pickerProps={{
-                            onFocus: () => this.setState({isOpen: true}),
+                            onFocus: this.enableHighlight,
                             onBlur: () => {
-                                this.setState({isOpen: false});
+                                this.disableHighlight();
                                 this.props.onBlur();
                             },
+                            ...this.props.additionalPickerEvents(
+                                this.enableHighlight,
+                                (value, index) => {
+                                    this.onInputChange(value, index);
+                                    this.disableHighlight();
+                                },
+                            ),
                         }}
                         ref={(el) => {
                             if (!_.isFunction(this.props.innerRef)) {

src/components/Picker/index.js

@@ -0,0 +1,19 @@
+import React, {forwardRef} from 'react';
+import BasePicker from './Picker';
+
+const additionalPickerEvents = (onMouseDown, onChange) => ({
+    onMouseDown,
+    onChange: (e) => {
+        if (e.target.selectedIndex === undefined) {
+            return;
+        }
+        const index = e.target.selectedIndex;
+        const value = e.target.options[index].value;
+        onChange(value, index);
+    },
+});
+
+export default forwardRef((props, ref) => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <BasePicker {...props} additionalPickerEvents={additionalPickerEvents} ref={ref} />
+));

src/components/Picker/index.native.js

@@ -0,0 +1,7 @@
+import React, {forwardRef} from 'react';
+import BasePicker from './Picker';
+
+export default forwardRef((props, ref) => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <BasePicker {...props} ref={ref} />
+));