Revert "getItemLabel, getItemValue deprecation"

This reverts commit 5f84a51.

Author: adids1221

src/components/picker/PickerItem.tsx

@@ -34,7 +34,7 @@ const PickerItem = (props: PickerItemProps) => {
   // @ts-expect-error TODO: fix after removing migrate prop completely
   const itemValue = !migrate && typeof value === 'object' ? value?.value : value;
   const isSelected = isItemSelected(itemValue, context.value);
-  const itemLabel = getItemLabel(label, value, props.getItemLabel);
+  const itemLabel = getItemLabel(label, value, props.getItemLabel || context.getItemLabel);
   const selectedCounter = context.selectionLimit && _.isArray(context.value) && context.value?.length;
   const accessibilityProps = {
     accessibilityState: isSelected ? {selected: true} : undefined,

src/components/picker/PickerPresenter.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import React from 'react';
-import {PickerItemProps, PickerProps, PickerSingleValue, PickerValue} from './types';
+import {PickerProps, PickerSingleValue, PickerValue} from './types';
 
 export function extractPickerItems(props: PickerProps) {
   const {children} = props;
@@ -37,7 +37,7 @@ export function isItemSelected(childValue: PickerSingleValue, selectedValue?: Pi
 //   return _.invoke(props, 'getItemValue', props.value) || _.get(props.value, 'value');
 // }
 
-export function getItemLabel(label: string, value: PickerValue, getItemLabel: PickerItemProps['getItemLabel']) {
+export function getItemLabel(label: string, value: PickerValue, getItemLabel: PickerProps['getItemLabel']) {
   if (_.isObject(value)) {
     if (getItemLabel) {
       return getItemLabel(value);

src/components/picker/helpers/usePickerLabel.tsx

@@ -3,20 +3,24 @@ import _ from 'lodash';
 import {PickerProps, PickerValue} from '../types';
 
 interface UsePickerLabelProps
-  extends Pick<PickerProps, 'value' | 'getLabel' | 'placeholder' | 'accessibilityLabel' | 'accessibilityHint'> {
+  extends Pick<
+    PickerProps,
+    'value' | 'getLabel' | 'getItemLabel' | 'placeholder' | 'accessibilityLabel' | 'accessibilityHint'
+  > {
   items: {value: string | number; label: string}[] | null | undefined;
 }
 
 const usePickerLabel = (props: UsePickerLabelProps) => {
-  const {value, items, getLabel, placeholder, accessibilityLabel, accessibilityHint} = props;
+  const {value, items, getLabel, getItemLabel, placeholder, accessibilityLabel, accessibilityHint} = props;
 
   const getLabelsFromArray = useCallback((value: PickerValue) => {
     const itemsByValue = _.keyBy(items, 'value');
 
-    return _.flow(arr => _.map(arr, item => (_.isPlainObject(item) ? item?.label : itemsByValue[item]?.label)),
-      arr => _.join(arr, ', '))(value);
+    return _.flow(arr =>
+      _.map(arr, item => (_.isPlainObject(item) ? getItemLabel?.(item) || item?.label : itemsByValue[item]?.label)),
+    arr => _.join(arr, ', '))(value);
   },
-  [items]);
+  [getItemLabel, items]);
 
   const _getLabel = useCallback((value: PickerValue) => {
     if (_.isFunction(getLabel) && !_.isUndefined(getLabel(value))) {

src/components/picker/helpers/usePickerSearch.tsx

@@ -3,10 +3,10 @@ import _ from 'lodash';
 import {PickerProps} from '../types';
 import {getItemLabel as getItemLabelPresenter, shouldFilterOut} from '../PickerPresenter';
 
-type UsePickerSearchProps = Pick<PickerProps, 'showSearch' | 'onSearchChange' | 'children'>;
+type UsePickerSearchProps = Pick<PickerProps, 'showSearch' | 'onSearchChange' | 'children' | 'getItemLabel'>;
 
 const usePickerSearch = (props: UsePickerSearchProps) => {
-  const {showSearch, onSearchChange, children} = props;
+  const {showSearch, onSearchChange, children, getItemLabel} = props;
   const [searchValue, setSearchValue] = useState('');
 
   const filteredChildren = useMemo(() => {
@@ -15,7 +15,7 @@ const usePickerSearch = (props: UsePickerSearchProps) => {
       return _.filter(children, child => {
         // @ts-expect-error need to fix children type to be based on PickerItemProps
         const {label, value, getItemLabel: childGetItemLabel} = child.props;
-        const itemLabel = getItemLabelPresenter(label, value, childGetItemLabel);
+        const itemLabel = getItemLabelPresenter(label, value, childGetItemLabel || getItemLabel);
         return !shouldFilterOut(searchValue, itemLabel);
       });
     }

src/components/picker/helpers/usePickerSelection.tsx

@@ -2,13 +2,14 @@ import {RefObject, useCallback, useState, useEffect} from 'react';
 import _ from 'lodash';
 import {PickerProps, PickerValue, PickerSingleValue, PickerMultiValue, PickerModes} from '../types';
 
-interface UsePickerSelectionProps extends Pick<PickerProps, 'migrate' | 'value' | 'onChange' | 'topBarProps' | 'mode'> {
+interface UsePickerSelectionProps
+  extends Pick<PickerProps, 'migrate' | 'value' | 'onChange' | 'getItemValue' | 'topBarProps' | 'mode'> {
   pickerExpandableRef: RefObject<any>;
   setSearchValue: (searchValue: string) => void;
 }
 
 const usePickerSelection = (props: UsePickerSelectionProps) => {
-  const {migrate, value, onChange, topBarProps, pickerExpandableRef, setSearchValue, mode} = props;
+  const {migrate, value, onChange, topBarProps, pickerExpandableRef, getItemValue, setSearchValue, mode} = props;
   const [multiDraftValue, setMultiDraftValue] = useState(value as PickerMultiValue);
   const [multiFinalValue, setMultiFinalValue] = useState(value as PickerMultiValue);
 
@@ -31,14 +32,14 @@ const usePickerSelection = (props: UsePickerSelectionProps) => {
     let newValue;
     const itemAsArray = [item];
     if (!migrate) {
-      newValue = _.xorBy(multiDraftValue, itemAsArray, 'value');
+      newValue = _.xorBy(multiDraftValue, itemAsArray, getItemValue || 'value');
     } else {
       newValue = _.xor(multiDraftValue, itemAsArray);
     }
 
     setMultiDraftValue(newValue);
   },
-  [multiDraftValue]);
+  [multiDraftValue, getItemValue]);
 
   const cancelSelect = useCallback(() => {
     setSearchValue('');

src/components/picker/index.tsx

@@ -1,4 +1,6 @@
 // TODO: deprecate all places where we check if _.isPlainObject
+// TODO: deprecate getItemValue prop
+// TODO: deprecate getItemLabel prop
 // TODO: Add initialValue prop
 // TODO: consider deprecating renderCustomModal prop
 // TODO: deprecate onShow cause it's already supported by passing it in pickerModalProps
@@ -80,6 +82,8 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     listProps,
     value,
     getLabel,
+    getItemLabel,
+    getItemValue,
     renderItem,
     children,
     useSafeArea,
@@ -111,12 +115,13 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     filteredChildren,
     setSearchValue,
     onSearchChange: _onSearchChange
-  } = usePickerSearch({showSearch, onSearchChange, children});
+  } = usePickerSearch({showSearch, onSearchChange, getItemLabel, children});
   const {multiDraftValue, onDoneSelecting, toggleItemSelection, cancelSelect} = usePickerSelection({
     migrate,
     value,
     onChange,
     pickerExpandableRef: pickerExpandable,
+    getItemValue,
     topBarProps,
     setSearchValue,
     mode
@@ -125,6 +130,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
   const {label, accessibilityInfo} = usePickerLabel({
     value,
     items,
+    getItemLabel,
     getLabel,
     accessibilityLabel,
     accessibilityHint,
@@ -144,6 +150,8 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
       value: mode === PickerModes.MULTI ? multiDraftValue : pickerValue,
       onPress: mode === PickerModes.MULTI ? toggleItemSelection : onDoneSelecting,
       isMultiMode: mode === PickerModes.MULTI,
+      getItemValue,
+      getItemLabel,
       onSelectedLayout: onSelectedItemLayout,
       renderItem,
       selectionLimit
@@ -154,6 +162,8 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     value,
     multiDraftValue,
     renderItem,
+    getItemValue,
+    getItemLabel,
     selectionLimit,
     onSelectedItemLayout,
     toggleItemSelection,

src/components/picker/types.tsx

@@ -108,6 +108,16 @@ export type PickerBaseProps = Omit<NewTextFieldProps, 'value' | 'onChange'> & {
    * Add onPress callback for when pressing the picker
    */
   onPress?: () => void;
+  /**
+   * @deprecated
+   * A function that extract the unique value out of the value prop in case value has a custom structure (e.g. {myValue, myLabel})
+   */
+  getItemValue?: (value: PickerValue) => any;
+  /**
+   * @deprecated
+   * A function that extract the label out of the value prop in case value has a custom structure (e.g. {myValue, myLabel})
+   */
+  getItemLabel?: (value: PickerValue) => string;
   /**
    * A function that returns the label to show for the selected Picker value
    */
@@ -208,7 +218,11 @@ export interface PickerItemProps extends Pick<TouchableOpacityProps, 'customValu
   /**
    * Custom function for the item label (e.g (value) => customLabel)
    */
-  getItemLabel?: (value: PickerValue) => string;
+  getItemLabel?: PickerProps['getItemLabel'];
+  /**
+   * @deprecated Function to return the value out of the item value prop when value is custom shaped.
+   */
+  getItemValue?: PickerProps['getItemValue'];
   /**
    * Render custom item
    */
@@ -237,7 +251,8 @@ export interface PickerItemProps extends Pick<TouchableOpacityProps, 'customValu
   testID?: string;
 }
 
-export interface PickerContextProps extends Pick<PickerProps, 'migrate' | 'value' | 'renderItem' | 'selectionLimit'> {
+export interface PickerContextProps
+  extends Pick<PickerProps, 'migrate' | 'value' | 'getItemValue' | 'getItemLabel' | 'renderItem' | 'selectionLimit'> {
   onPress: (value: PickerSingleValue) => void;
   isMultiMode: boolean;
   onSelectedLayout: (event: any) => any;