Merge pull request #3 from henninghall/style

Dynamic background color

android/src/main/java/com/henninghall/date_picker/DatePickerManager.java

@@ -1,7 +1,10 @@
 package com.henninghall.date_picker;
 
 import android.support.annotation.Nullable;
+import android.util.Log;
 import android.view.View;
+
+import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.common.MapBuilder;
 import com.facebook.react.uimanager.SimpleViewManager;
 import com.facebook.react.uimanager.ThemedReactContext;
@@ -59,6 +62,11 @@ public class DatePickerManager extends SimpleViewManager  {
     view.setMaximumDate(Utils.unixToDate(date));
   }
 
+  @ReactProp(name = "fadeToColor")
+  public void setFadeToColor(PickerView view, @Nullable String color) {
+    view.style.setFadeToColor(color);
+  }
+
   @ReactProp(name = "minuteInterval")
   public void setMinuteInterval(PickerView view, @Nullable int interval) throws Exception {
     if (interval < 0 || interval > 59) throw new Exception("Minute interval out of bounds");

android/src/main/java/com/henninghall/date_picker/PickerView.java

@@ -5,6 +5,7 @@ import android.view.View;
 import android.widget.RelativeLayout;
 
 import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.uimanager.events.RCTEventEmitter;
 import com.henninghall.date_picker.wheelFunctions.AnimateToDate;
@@ -46,10 +47,12 @@ public class PickerView extends RelativeLayout {
     public int minuteInterval = 1;
     public Locale locale;
     public Mode mode;
+    public Style style;
 
     public PickerView() {
         super(DatePickerManager.context);
         View rootView = inflate(getContext(), R.layout.datepicker_view, this);
+        this.style = new Style(this);
 
         RelativeLayout wheelsWrapper = (RelativeLayout) rootView.findViewById(R.id.wheelsWrapper);
         wheelsWrapper.setWillNotDraw(false);

android/src/main/java/com/henninghall/date_picker/Style.java

@@ -0,0 +1,35 @@
+package com.henninghall.date_picker;
+
+import android.graphics.Color;
+import android.graphics.drawable.GradientDrawable;
+import android.widget.ImageView;
+
+
+class Style {
+    private final GradientDrawable gradientBottom;
+    private final GradientDrawable gradientTop;
+
+    public Style(PickerView pickerView) {
+        ImageView overlayTop = (ImageView) pickerView.findViewById(R.id.overlay_top);
+        ImageView overlayBottom = (ImageView) pickerView.findViewById(R.id.overlay_bottom);
+        this.gradientTop =  (GradientDrawable) overlayTop.getDrawable();
+        this.gradientBottom =  (GradientDrawable) overlayBottom.getDrawable();
+    }
+
+    public void setFadeToColor(String color) {
+        int alpha = validColor(color) ? 255 : 0;
+        gradientTop.setAlpha(alpha);
+        gradientBottom.setAlpha(alpha);
+        if(validColor(color)) {
+            int startColor = Color.parseColor("#FF"+ color.substring(1));
+            int endColor = Color.parseColor("#00" + color.substring(1));
+            gradientTop.setColors(new int[] {startColor, endColor});
+            gradientBottom.setColors(new int[] {startColor, endColor});
+        }
+    }
+
+    private boolean validColor(String color){
+        return color != null && color.length() == 7;
+    }
+
+}

android/src/main/res/drawable/overlay.xml

@@ -1,5 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
-<shape xmlns:android="http://schemas.android.com/apk/res/android">
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/overlay_image"
+    >
     <gradient
         android:startColor="#FFFFFFFF"
         android:endColor="#00FFFFFF"

android/src/main/res/layout/datepicker_view.xml

@@ -20,7 +20,6 @@
             android:id="@+id/day"
             android:layout_width="wrap_content"
             android:layout_height="160dp"
-            android:background="#FFFFFF"
             app:npv_ShowCount="5"
             app:npv_RespondChangeOnDetached="false"
             app:npv_TextSizeNormal="18sp"
@@ -38,7 +37,6 @@
             android:layout_height="160dp"
             android:layout_toEndOf="@+id/day"
             android:layout_toRightOf="@+id/day"
-            android:background="#FFFFFF"
             app:npv_DividerColor="#cccccc"
             app:npv_RespondChangeOnDetached="false"
             app:npv_ShowCount="5"
@@ -56,7 +54,6 @@
             android:layout_height="160dp"
             android:layout_toEndOf="@+id/hour"
             android:layout_toRightOf="@+id/hour"
-            android:background="#FFFFFF"
             app:npv_DividerColor="#cccccc"
             app:npv_RespondChangeOnDetached="false"
             app:npv_ShowCount="5"

example/App.js

@@ -8,20 +8,30 @@ import examples from './examples';
 
 export default class App extends Component {
 
-  state = { picker: undefined }
+  state = {
+    picker: undefined,
+    backgroundColor: undefined,
+  }
 
   render() {
     return (
-      <View style={styles.container}>
+      <ScrollView
+        style={[styles.container, { backgroundColor: this.state.backgroundColor }]}
+        contentContainerStyle={styles.content}>
         <Text style={styles.header}>Examples</Text>
         {!this.state.picker && this.renderButtons()}
         {!!this.state.picker && this.renderBackButton()}
         {!!this.state.picker && this.renderPicker()}
-      </View>
+      </ScrollView>
     );
   }
 
-  renderPicker = () => examples[this.state.picker].component
+  setBackgroundColor = backgroundColor => this.setState({ backgroundColor })
+
+  renderPicker = () => {
+    const Picker = examples[this.state.picker].component;
+    return <Picker backgroundColor={this.state.backgroundColor} setBackground={this.setBackgroundColor} />
+  }
 
   renderButtons = () =>
     Object.keys(examples)
@@ -52,10 +62,12 @@ export default class App extends Component {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: 'center',
-    backgroundColor: 'white',
+    backgroundColor: '#abcdef',
     marginTop: 15,
   },
+  content: {
+    alignItems: 'center',
+  },
   text: {
     color: 'dodgerblue',
     fontSize: 16,

example/examples.js

@@ -7,14 +7,14 @@ import { EXAMPLE_KEYS } from './exampleKeys'
 export default {
     [EXAMPLE_KEYS.MINIMAL]: {
         buttonTitle: 'Minimal',
-        component: <Minimal />
+        component: Minimal
     },
     [EXAMPLE_KEYS.ADVANCED]: {
         buttonTitle: 'Advanced',
-        component: <Advanced />
+        component: Advanced
     },
     [EXAMPLE_KEYS.TIME_MODE]: {
         buttonTitle: 'Time mode',
-        component: <TimeMode />
+        component: TimeMode
     }
 }

example/examples/Advanced.js

@@ -5,12 +5,12 @@ import DeviceInfo from 'react-native-device-info';
 import DatePicker from 'react-native-date-picker-x';
 import locales from '../locales';
 
-Date.prototype.addHours = function(h) {    
-  this.setTime(this.getTime() + (h*60*60*1000)); 
-  return this;   
+Date.prototype.addHours = function (h) {
+  this.setTime(this.getTime() + (h * 60 * 60 * 1000));
+  return this;
 }
 
-export default class App extends Component {
+export default class Advanced extends Component {
 
   state = {
     chosenDate: new Date(),
@@ -19,8 +19,7 @@ export default class App extends Component {
   }
 
   render() {
-    const result = locales.filter(createFilter(this.state.searchTerm)).slice(0, 5);    
-
+    const result = locales.filter(createFilter(this.state.searchTerm)).slice(0, 5);
     return (
       <View style={styles.container}>
         <DatePicker
@@ -29,12 +28,13 @@ export default class App extends Component {
           locale={this.state.locale}
           minuteInterval={1}
           minimumDate={new Date()}
-          maximumDate={(new Date()).addHours(24*5)}
+          maximumDate={(new Date()).addHours(24 * 5)}
+          fadeToColor={this.props.backgroundColor}
         />
 
         <Text>Current locale: {this.state.locale}</Text>
         <Text>Current date: {this.state.chosenDate.toISOString()}</Text>
-        <Text></Text>
+        <Text />
 
         <Button title='Change date'
           onPress={() => this.setState({
@@ -54,7 +54,9 @@ export default class App extends Component {
           ))
           }
         </ScrollView>
+        <Text />
 
+        <Button title={'Change background color'} onPress={() => this.props.setBackground(randomColor())} />
       </View>
     );
   }
@@ -63,12 +65,13 @@ export default class App extends Component {
 
 }
 
+const randomColor = () => '#' + Math.floor(Math.random() * 16777215).toString(16);
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: 'white',
     marginTop: 15,
   },
   item: {

index.js

@@ -17,22 +17,27 @@ const ios = Platform.OS === 'ios';
 const NativeDatePicker = requireNativeComponent(`DatePickerManager`, DatePickerAndroid, { nativeOnly: { onChange: true } });
 
 class DatePickerAndroid extends React.Component {
-
+    static propTypes = {
+        ...DatePickerIOS.propTypes,
+        fadeToColor: PropTypes.string,
+    }
     static defaultProps = { 
         mode: 'datetime',
         minuteInterval: 1,
+        fadeToColor: '#ffffff',
      };
-  
+     
     _onChange = e => this.props.onDateChange(new Date(parseInt(e.nativeEvent.date)));
     _maximumDate = () => this.props.maximumDate && this.props.maximumDate.getTime();
     _minimumDate = () => this.props.minimumDate && this.props.minimumDate.getTime();
     render = () => (
         <NativeDatePicker
             {...this.props }
-            date={this.props.date.getTime()}
             minimumDate={this._minimumDate()}
             maximumDate={this._maximumDate()}
+            date={this.props.date.getTime()}            
             onChange={this._onChange}
+            fadeToColor={this.props.fadeToColor}
             style={[styles.picker, this.props.style]}
         />
     )
@@ -50,6 +55,4 @@ const styles = StyleSheet.create({
     }
 })
 
-DatePickerAndroid.propTypes = DatePickerIOS.propTypes;
-
 export default ios ? DatePickerIOSWithSize : DatePickerAndroid;