Picker multi select support (#871)

* pass dialog events to picker custom model to support multi-selection

* refactor code to make label text decision more intuitive

* Made label source selection more intuitive

Co-authored-by: Ethan Sharabi <[email protected]>

Author: mendyEdri

src/components/picker/index.js

@@ -183,15 +183,33 @@ class Picker extends BaseComponent {
     return items;
   }
 
-  getLabel() {
-    const {value} = this.state;
-    const {getLabel, getItemLabel} = this.props;
+  shouldNotChangePickerLabelWhileSelecting = () => {
+    const {mode} = this.props;
+    return mode === Picker.modes.MULTI;
+  }
+
+  getLabelValueText = () => {
+    const {value: propsValue} = this.props;
+    const {value: stateValue} = this.props;
+    if (this.shouldNotChangePickerLabelWhileSelecting()) {
+      return this.getLabel(propsValue);
+    }
+    return this.getLabel(stateValue);
+  }
+
+  getLabelsFromArray = (value) => {
+    const {getItemLabel} = this.props;
+    return _.chain(value)
+      .map(getItemLabel || 'label')
+      .join(', ')
+      .value();
+  };
+
+  getLabel(value) {
+    const {getLabel} = this.props;
 
     if (_.isArray(value)) {
-      return _.chain(value)
-        .map(getItemLabel || 'label')
-        .join(', ')
-        .value();
+      return this.getLabelsFromArray(value);
     }
 
     if (_.isFunction(getLabel)) {
@@ -206,7 +224,7 @@ class Picker extends BaseComponent {
     const {items} = this.state;
     const selectedItem = _.find(items, {value});
     return _.get(selectedItem, 'label');
-  }
+  };
 
   handlePickerOnPress = () => {
     this.toggleExpandableModal(true);
@@ -260,7 +278,7 @@ class Picker extends BaseComponent {
 
   clearSearchField = () => {
     this.setState({searchValue: ''});
-  }
+  };
 
   appendPropsToChildren = () => {
     const {children, mode, getItemValue, getItemLabel, showSearch, renderItem} = this.props;
@@ -301,17 +319,18 @@ class Picker extends BaseComponent {
       listProps,
       testID
     } = this.getThemeProps();
-    const {showExpandableModal, selectedItemPosition} = this.state;
+    const {showExpandableModal, selectedItemPosition, value} = this.state;
     const children = this.appendPropsToChildren(this.props.children);
 
     if (renderCustomModal) {
       const modalProps = {
         visible: showExpandableModal,
         toggleModal: this.toggleExpandableModal,
         onSearchChange: this.onSearchChange,
-        children
+        children,
+        onDone: () => this.onDoneSelecting(value),
+        onCancel: this.cancelSelect
       };
-
       return renderCustomModal(modalProps);
     }
 
@@ -324,7 +343,7 @@ class Picker extends BaseComponent {
         topBarProps={{
           ...topBarProps,
           onCancel: this.cancelSelect,
-          onDone: mode === Picker.modes.MULTI ? () => this.onDoneSelecting(this.state.value) : undefined
+          onDone: mode === Picker.modes.MULTI ? () => this.onDoneSelecting(value) : undefined
         }}
         showSearch={showSearch}
         searchStyle={searchStyle}
@@ -358,7 +377,7 @@ class Picker extends BaseComponent {
     }
 
     const textInputProps = TextField.extractOwnProps(this.getThemeProps());
-    const label = this.getLabel();
+    const label = this.getLabelValueText();
     return (
       <TextField
         {...textInputProps}