Infra/picker refactor #2 (#1001)

* Migrate PickerItem from Class to a Function component

* Use context to communicate Picker current value with Picker Items

* Fix issue with multi select mode when using the new Picker API

* use useMeme for PickerItem selectedIndicator

* pass missing dependency in PickerItem

* Fix default selectedIconColor in PickerItem

* Fix lint issue

* Fix order of things in PickerItem

* Use LogService for deprecation warnings

Author: ethanshar

demo/src/screens/componentScreens/PickerScreen.js

@@ -28,7 +28,7 @@ export default class PickerScreen extends Component {
       itemsCount: 1,
       // language: {value: 'java', label: 'Java'},
       language: undefined,
-      language2: undefined, // for migrated picker example
+      language2: options[2].value, // for migrated picker example
       languages: [],
       nativePickerValue: 'java',
       customModalValues: [],
@@ -243,6 +243,7 @@ export default class PickerScreen extends Component {
             showSearch
             searchPlaceholder={'Search a language'}
             searchStyle={{color: Colors.blue30, placeholderTextColor: Colors.dark50}}
+            // mode={Picker.modes.MULTI}
             // useNativePicker
           >
             {_.map(options, option => (

src/components/picker/PickerContext.js

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default React.createContext({});

src/components/picker/PickerItem.js

@@ -1,14 +1,17 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import React, {useCallback, useEffect, useMemo} from 'react';
+import React, {useCallback, useEffect, useMemo, useContext} from 'react';
 import {StyleSheet} from 'react-native';
+import {LogService} from '../../services';
 import {Colors, Typography} from '../../style';
 import * as Modifiers from '../../commons/modifiers';
 import Assets from '../../assets';
 import View from '../view';
 import TouchableOpacity from '../touchableOpacity';
 import Image from '../image';
 import Text from '../text';
+import {getItemLabel, isItemSelected, shouldFilterOut} from './PickerPresenter';
+import PickerContext from './PickerContext';
 
 /**
  * @description: Picker.Item, for configuring the Picker's selectable options
@@ -18,57 +21,58 @@ import Text from '../text';
  */
 const PickerItem = props => {
   const {
-    renderItem,
     value,
     label,
-    onPress,
     disabled,
-    isSelected,
     selectedIcon = Assets.icons.check,
     selectedIconColor = Colors.primary,
     testID
   } = props;
+  const context = useContext(PickerContext);
+  const {renderItem} = context;
+  const isSelected = isItemSelected(value, context.value);
+  const itemLabel = getItemLabel(label, value, props.getItemLabel || context.getItemLabel);
+  const accessibilityProps = {
+    accessibilityState: isSelected ? {selected: true} : undefined,
+    accessibilityHint: 'Double click to select this suggestion',
+    ...Modifiers.extractAccessibilityProps(props)
+  };
 
   useEffect(() => {
     if (_.isPlainObject(value)) {
-      console.warn('UILib Picker.Item will stop supporting passing object as value & label (e.g {value, label}) in the next major version. Please pass separate label and value props');
+      LogService.warn('UILib Picker.Item will stop supporting passing object as value & label (e.g {value, label}) in the next major version. Please pass separate label and value props');
     }
   }, [value]);
 
-  // TODO: deprecate the check for object
-  const _onPress = useCallback(() => {
-    // onPress(_.isObject(value) ? value : {value, label});
-    onPress(value);
-  }, [value, onPress]);
-
-  const onSelectedLayout = useCallback((...args) => {
-    _.invoke(props, 'onSelectedLayout', ...args);
-  }, []);
-
-  const getLabel = () => {
-    if (_.isObject(value)) {
-      return _.invoke(props, 'getItemLabel', value) || _.get(value, 'label');
-    }
-    return label;
-  };
-
   const selectedIndicator = useMemo(() => {
     if (isSelected) {
       return <Image source={selectedIcon} tintColor={disabled ? Colors.dark60 : selectedIconColor}/>;
     }
   }, [isSelected, disabled, selectedIcon, selectedIconColor]);
 
+  const _onPress = useCallback(() => {
+    context.onPress(value);
+  }, [value, context.onPress]);
+
+  const onSelectedLayout = useCallback((...args) => {
+    _.invoke(context, 'onSelectedLayout', ...args);
+  }, []);
+
   const _renderItem = () => {
     return (
       <View style={styles.container} flex row spread centerV>
         <Text numberOfLines={1} style={[styles.labelText, disabled && styles.labelTextDisabled]}>
-          {getLabel()}
+          {itemLabel}
         </Text>
         {selectedIndicator}
       </View>
     );
   };
 
+  if (context.showSearch && shouldFilterOut(context.searchValue, itemLabel)) {
+    return null;
+  }
+
   return (
     <TouchableOpacity
       activeOpacity={0.5}
@@ -77,9 +81,9 @@ const PickerItem = props => {
       disabled={disabled}
       testID={testID}
       throttleTime={0}
-      {...Modifiers.extractAccessibilityProps(props)}
+      {...accessibilityProps}
     >
-      {renderItem ? renderItem(value, props, getLabel()) : _renderItem()}
+      {renderItem ? renderItem(value, props, itemLabel) : _renderItem()}
     </TouchableOpacity>
   );
 };

src/components/picker/PickerPresenter.js

@@ -13,15 +13,23 @@ export function isItemSelected(childValue, selectedValue) {
 
 export function getItemValue(props) {
   if (_.isArray(props.value)) {
-    return props.getItemValue ?
-      _.map(props.value, item => props.getItemValue(item)) :
-      _.map(props.value, 'value');
+    return props.getItemValue ? _.map(props.value, item => props.getItemValue(item)) : _.map(props.value, 'value');
   } else if (!_.isObject(props.value)) {
     return props.value;
   }
   return _.invoke(props, 'getItemValue', props.value) || _.get(props.value, 'value');
 }
 
-export function getItemLabel(props) {
-  return _.invoke(props, 'getLabel', props.value) || _.get(props.value, 'label') || _.get(props, 'label');
+export function getItemLabel(label, value, getItemLabel) {
+  if (_.isObject(value)) {
+    if (getItemLabel) {
+      return getItemLabel(value);
+    }
+    return _.get(value, 'label');
+  }
+  return label;
+}
+
+export function shouldFilterOut(searchValue, itemLabel) {
+  return !_.includes(_.lowerCase(itemLabel), _.lowerCase(searchValue));
 }

src/components/picker/__tests__/PickerPresenter.spec.js

@@ -40,15 +40,19 @@ describe('components/PickerPresenter', () => {
   });
 
   describe('getItemLabel', () => {
+    it('should return item label when value is not an object', () => {
+      expect(uut.getItemLabel('label', 'value', undefined)).toEqual('label');
+    });
+
     it('should return item label when value is an object', () => {
       const itemProps = {value: {value: 'value', label: 'label'}};
-      expect(uut.getItemLabel(itemProps)).toEqual('label');
+      expect(uut.getItemLabel(undefined, itemProps.value, undefined)).toEqual('label');
     });
 
     it('should return item label according to getLabel function ', () => {
       const getLabel = itemValue => `${itemValue.value} - ${itemValue.label}`;
       const itemProps = {value: {value: 'value', label: 'label'}, getLabel};
-      expect(uut.getItemLabel(itemProps)).toEqual('value - label');
+      expect(uut.getItemLabel(undefined, itemProps.value, getLabel)).toEqual('value - label');
     });
   });
 });