DatePicker Cleanup

GeekyAnts · Jul 9, 2019 · f921041 · f921041
1 parent 1ca2d20
commit f921041
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 24 deletions.
diff --git a/src/basic/Button.js b/src/basic/Button.js
@@ -11,6 +11,8 @@ import {
 import { connectStyle } from 'native-base-shoutem-theme';
 
 import variable from '../theme/variables/platform';
+import { PLATFORM } from '../theme/variables/commonColor';
+
 import computeProps from '../utils/computeProps';
 import mapPropsToStyleNames from '../utils/mapPropsToStyleNames';
 
@@ -58,19 +60,19 @@ class Button extends Component {
       ? this.context.theme['@@shoutem.theme/themeStyle'].variables
       : variable;
     const children =
-      Platform.OS === 'ios'
+      Platform.OS === PLATFORM.IOS
         ? this.props.children
         : React.Children.map(this.props.children, child =>
             child && child.type === Text
               ? React.cloneElement(child, {
-                uppercase: variables.buttonUppercaseAndroidText,
-                ...child.props
-              })
+                  uppercase: variables.buttonUppercaseAndroidText,
+                  ...child.props
+                })
               : child
           );
     if (
-      Platform.OS === 'ios' ||
-      Platform.OS === 'web' ||
+      Platform.OS === PLATFORM.IOS ||
+      Platform.OS === PLATFORM.WEB ||
       variables.androidRipple === false ||
       Platform.Version < 21
     ) {

diff --git a/src/basic/DatePicker.js b/src/basic/DatePicker.js
@@ -8,6 +8,7 @@ import {
 } from 'react-native';
 
 import variable from '../theme/variables/platform';
+import { PLATFORM } from '../theme/variables/commonColor';
 
 import { Text } from './Text';
 
@@ -35,7 +36,7 @@ export class DatePicker extends React.Component {
   }
 
   showDatePicker = () => {
-    if (Platform.OS === 'android') {
+    if (Platform.OS === PLATFORM.ANDROID) {
       this.openAndroidDatePicker();
     } else {
       this.setState({ modalVisible: true });
@@ -71,40 +72,59 @@ export class DatePicker extends React.Component {
   }
 
   render() {
+    const {
+      androidMode,
+      animationType,
+      disabled,
+      formatChosenDate,
+      locale,
+      maximumDate,
+      minimumDate,
+      modalTransparent,
+      onDateChange,
+      placeHolderText,
+      placeHolderTextStyle,
+      textStyle,
+      timeZoneOffsetInMinutes
+    } = this.props;
+
     const variables = this.context.theme
       ? this.context.theme['@@shoutem.theme/themeStyle'].variables
       : variable;
+
     return (
       <View>
         <View>
           <Text
-            onPress={() =>
-              !this.props.disabled ? this.showDatePicker() : undefined
-            }
+            onPress={() => (!disabled ? this.showDatePicker() : undefined)}
             style={[
-              { padding: 10, color: variables.datePickerTextColor },
-              this.state.chosenDate
-                ? this.props.textStyle
-                : this.props.placeHolderTextStyle
+              {
+                padding: variables.datePickerPadding,
+                color: variables.datePickerTextColor
+              },
+              this.state.chosenDate ? textStyle : placeHolderTextStyle
             ]}
           >
             {this.state.chosenDate
               ? this.formatChosenDate(this.state.chosenDate)
-              : this.props.placeHolderText
-              ? this.props.placeHolderText
+              : placeHolderText
+              ? placeHolderText
               : 'Select Date'}
           </Text>
           <View>
             <Modal
               supportedOrientations={['portrait', 'landscape']}
-              animationType={this.props.animationType}
-              transparent={this.props.modalTransparent} // from api
+              animationType={animationType}
+              transparent={modalTransparent} // from api
               visible={this.state.modalVisible}
               onRequestClose={() => {}}
             >
               <Text
                 onPress={() => this.setState({ modalVisible: false })}
-                style={{ backgroundColor: variables.datePickerBg, flex: 1 }}
+                style={{
+                  backgroundColor: variables.datePickerBg,
+                  flex: variables.datePickerFlex
+                }}
               />
               <DatePickerIOS
                 date={
@@ -113,11 +133,11 @@ export class DatePicker extends React.Component {
                     : this.state.defaultDate
                 }
                 onDateChange={date => this.setDate(date)}
-                minimumDate={this.props.minimumDate}
-                maximumDate={this.props.maximumDate}
+                minimumDate={minimumDate}
+                maximumDate={maximumDate}
                 mode="date"
-                locale={this.props.locale}
-                timeZoneOffsetInMinutes={this.props.timeZoneOffsetInMinutes}
+                locale={locale}
+                timeZoneOffsetInMinutes={timeZoneOffsetInMinutes}
               />
             </Modal>
           </View>

diff --git a/src/theme/variables/commonColor.js b/src/theme/variables/commonColor.js
@@ -4,8 +4,10 @@ import color from 'color';
 import { Platform, Dimensions, PixelRatio } from 'react-native';
 
 export const PLATFORM = {
+  ANDROID: 'android',
   IOS: 'ios',
-  MATERIAL: 'material'
+  MATERIAL: 'material',
+  WEB: 'web'
 };
 
 const deviceHeight = Dimensions.get('window').height;

diff --git a/src/theme/variables/platform.js b/src/theme/variables/platform.js
@@ -128,6 +128,8 @@ export default {
   containerBgColor: '#fff',
 
   // Date Picker
+  datePickerFlex: 1,
+  datePickerPadding: 10,
   datePickerTextColor: '#000',
   datePickerBg: 'transparent',