Picker - add support for layout modifiers (margin, paddings) (#928)

* Picker - add support for layout modifiers (margin, paddings)

* fix for React's PureComponent

* using 'asBaseComponent' modifiers prop

* removing android/gradlew.bat

* removing unused import

* pr comments

* fix lint

Author: Inbal-Tish

demo/src/screens/componentScreens/PickerScreen.js

@@ -59,7 +59,7 @@ export default class PickerScreen extends Component {
 
   renderDialog = modalProps => {
     const {visible, children, toggleModal, onDone} = modalProps;
-    
+
     return (
       <Dialog
         migrate
@@ -105,19 +105,18 @@ export default class PickerScreen extends Component {
             ))}
           </Picker>
 
-          <View marginT-20>
-            <Picker
-              placeholder="Favorite Languages"
-              value={this.state.languages}
-              onChange={items => this.setState({languages: items})}
-              mode={Picker.modes.MULTI}
-              rightIconSource={dropdown}
-            >
-              {_.map(options, option => (
-                <Picker.Item key={option.value} value={option} disabled={option.disabled}/>
-              ))}
-            </Picker>
-          </View>
+          <Picker
+            marginT-20
+            placeholder="Favorite Languages"
+            value={this.state.languages}
+            onChange={items => this.setState({languages: items})}
+            mode={Picker.modes.MULTI}
+            rightIconSource={dropdown}
+          >
+            {_.map(options, option => (
+              <Picker.Item key={option.value} value={option} disabled={option.disabled}/>
+            ))}
+          </Picker>
 
           <Picker
             title="Native Picker"
@@ -156,21 +155,20 @@ export default class PickerScreen extends Component {
             ))}
           </Picker>
 
-          <View marginT-20>
-            <Picker
-              title="Custom modal"
-              placeholder="Pick multiple Languages"
-              value={this.state.customModalValues}
-              onChange={items => this.setState({customModalValues: items})}
-              mode={Picker.modes.MULTI}
-              rightIconSource={dropdown}
-              renderCustomModal={this.renderDialog}
-            >
-              {_.map(options, option => (
-                <Picker.Item key={option.value} value={option} label={option.label} disabled={option.disabled}/>
-              ))}
-            </Picker>
-          </View>
+          <Picker
+            marginT-20
+            title="Custom modal"
+            placeholder="Pick multiple Languages"
+            value={this.state.customModalValues}
+            onChange={items => this.setState({customModalValues: items})}
+            mode={Picker.modes.MULTI}
+            rightIconSource={dropdown}
+            renderCustomModal={this.renderDialog}
+          >
+            {_.map(options, option => (
+              <Picker.Item key={option.value} value={option} label={option.label} disabled={option.disabled}/>
+            ))}
+          </Picker>
 
           <Text marginT-20 marginB-10 text70 dark60>
             Custom Picker:

src/components/picker/index.js

@@ -180,7 +180,7 @@ class Picker extends PureComponent {
 
   getAccessibilityInfo() {
     const {placeholder} = this.props;
-    
+
     return {
       accessibilityLabel: this.getLabelValueText() ? `${placeholder}. selected. ${this.getLabelValueText()}` : `Select ${placeholder}`,
       accessibilityHint: this.getLabelValueText()
@@ -203,7 +203,7 @@ class Picker extends PureComponent {
   getLabelValueText = () => {
     const {value: propsValue} = this.props;
     const {value: stateValue} = this.props;
-    
+
     if (this.shouldNotChangePickerLabelWhileSelecting()) {
       return this.getLabel(propsValue);
     }
@@ -236,7 +236,7 @@ class Picker extends PureComponent {
     // otherwise, extract from picker items
     const {items} = this.state;
     const selectedItem = _.find(items, {value});
-    
+
     return _.get(selectedItem, 'label');
   }
 
@@ -254,7 +254,7 @@ class Picker extends PureComponent {
     const {getItemValue} = this.props;
     const {value} = this.state;
     const newValue = _.xorBy(value, [item], getItemValue || 'value');
-    
+
     this.setState({value: newValue});
   };
 
@@ -294,7 +294,7 @@ class Picker extends PureComponent {
       if (!showSearch || _.isEmpty(searchValue) || _.includes(_.lowerCase(childLabel), _.lowerCase(searchValue))) {
         const selectedValue = PickerPresenter.getItemValue({value, getItemValue});
         const isSelected = PickerPresenter.isItemSelected(childValue, selectedValue);
-        
+
         return React.cloneElement(child, {
           isSelected,
           onPress: mode === Picker.modes.MULTI ? this.toggleItemSelection : this.onDoneSelecting,
@@ -364,15 +364,22 @@ class Picker extends PureComponent {
   };
 
   render() {
-    const {useNativePicker, renderPicker, customPickerProps, testID} = this.props;
+    const {
+      useNativePicker,
+      renderPicker,
+      customPickerProps,
+      containerStyle,
+      testID,
+      modifiers
+    } = this.props;
 
     if (useNativePicker) {
       return <NativePicker {...this.props}/>;
     }
 
     if (_.isFunction(renderPicker)) {
       const {value} = this.state;
-      
+
       return (
         <View left>
           <Button {...customPickerProps} link onPress={this.handlePickerOnPress} testID={testID}>
@@ -385,10 +392,17 @@ class Picker extends PureComponent {
 
     const textInputProps = TextField.extractOwnProps(this.props);
     const label = this.getLabelValueText();
-    
+    const {paddings, margins, positionStyle} = modifiers;
+
     return (
       <TextField
         {...textInputProps}
+        containerStyle={[
+          paddings,
+          margins,
+          positionStyle,
+          containerStyle
+        ]}
         {...this.getAccessibilityInfo()}
         importantForAccessibility={'no-hide-descendants'}
         value={label}