Fix/Picker + TextField Ui fixes (#785)

* Updating DateTimePickerScreen

* Removing unneeded picker value default color

* Updating condition for rightIcon bottom padding

* Spacings tweaks

* Cosmetics

* Update demo/src/screens/componentScreens/DateTimePickerScreen.js

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

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

Author: ArnonZ

demo/src/screens/componentScreens/DateTimePickerScreen.js

@@ -1,27 +1,42 @@
 import React, {Component} from 'react';
 import {DateTimePicker, View, Text} from 'react-native-ui-lib'; // eslint-disable-line
 
-
 export default class DateTimePickerScreen extends Component {
-  
   render() {
     return (
-      <View flex padding-20>
-        <Text text40 marginB-40>Date Time Picker</Text>
-        
-        <DateTimePicker 
-          title={'Date'} 
-          placeholder={'Select a date'} 
+      <View flex padding-s5>
+        <Text text40>Date Time Picker</Text>
+        <DateTimePicker
+          containerStyle={{marginVertical: 20}}
+          title={'Date'}
+          placeholder={'Select a date'}
           // dateFormat={'MMM D, YYYY'}
-          // value={new Date('October 13, 2014')} 
+          // value={new Date('October 13, 2014')}
         />
-        <DateTimePicker 
-          mode={'time'} 
-          title={'Time'} 
+        <DateTimePicker
+          mode={'time'}
+          title={'Time'}
           placeholder={'Select time'}
           // timeFormat={'h:mm A'}
           // value={new Date('2015-03-25T12:00:00-06:30')}
         />
+
+        <Text text60R marginT-40>
+          Disabled
+        </Text>
+        <DateTimePicker
+          containerStyle={{marginBottom: 20}}
+          editable={false}
+          title={'Date'}
+          placeholder={'Select a date'}
+        />
+        <DateTimePicker
+          editable={false}
+          mode={'time'}
+          title={'Time'}
+          placeholder={'Select time'}
+          value={new Date('2015-03-25T12:00:00-06:30')}
+        />
       </View>
     );
   }

src/components/inputs/TextField.js

@@ -702,7 +702,7 @@ export default class TextField extends BaseInput {
   };
 }
 
-function createStyles({centered, multiline, expandable}) {
+function createStyles({centered, multiline, hideUnderline}) {
   const inputTextAlign = Constants.isRTL ? 'right' : 'left';
 
   return StyleSheet.create({
@@ -771,7 +771,7 @@ function createStyles({centered, multiline, expandable}) {
       position: 'absolute',
       right: 0,
       alignSelf: 'flex-end',
-      paddingBottom: 8
+      paddingBottom: hideUnderline ? undefined : 8
     },
     rightButton: {
       position: 'absolute',

src/components/picker/index.js

@@ -13,7 +13,6 @@ import * as PickerPresenter from './PickerPresenter';
 import NativePicker from './NativePicker';
 import PickerModal from './PickerModal';
 import PickerItem from './PickerItem';
-import {Colors} from '../../style';
 
 const PICKER_MODES = {
   SINGLE: 'SINGLE',
@@ -349,7 +348,6 @@ class Picker extends BaseComponent {
     const label = this.getLabel();
     return (
       <TextField
-        color={Colors.dark10}
         {...textInputProps}
         {...this.getAccessibilityInfo()}
         importantForAccessibility={'no-hide-descendants'}