diff --git a/android/src/main/java/com/henninghall/date_picker/DatePickerManager.java b/android/src/main/java/com/henninghall/date_picker/DatePickerManager.java index da4898a..dcfbdaa 100644 --- a/android/src/main/java/com/henninghall/date_picker/DatePickerManager.java +++ b/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,12 @@ public class DatePickerManager extends SimpleViewManager { view.setMaximumDate(Utils.unixToDate(date)); } + @ReactProp(name = "userStyle") + public void setUserStyle(PickerView view, @Nullable ReadableMap style) { + view.style.set(style); + Log.v("style", "s"); + } + @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"); diff --git a/android/src/main/java/com/henninghall/date_picker/PickerView.java b/android/src/main/java/com/henninghall/date_picker/PickerView.java index d4a054a..5c87356 100644 --- a/android/src/main/java/com/henninghall/date_picker/PickerView.java +++ b/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); diff --git a/android/src/main/java/com/henninghall/date_picker/Style.java b/android/src/main/java/com/henninghall/date_picker/Style.java new file mode 100644 index 0000000..5293b24 --- /dev/null +++ b/android/src/main/java/com/henninghall/date_picker/Style.java @@ -0,0 +1,26 @@ +package com.henninghall.date_picker; + +import android.graphics.Color; +import android.graphics.drawable.GradientDrawable; +import android.widget.ImageView; + +import com.facebook.react.bridge.ReadableMap; + + +class Style { + private final GradientDrawable gradient; + + public Style(PickerView pickerView) { + ImageView overlayTop = (ImageView) pickerView.findViewById(R.id.overlay_top); + this.gradient = (GradientDrawable) overlayTop.getDrawable(); + } + + public void set(ReadableMap style) { + String color = style.getString("backgroundColor"); + if(color != null && color.length() == 7) { + int startColor = Color.parseColor("#FF"+ color.substring(1)); + int endColor = Color.parseColor("#00" + color.substring(1)); + gradient.setColors(new int[] {startColor, endColor}); + } + } +} diff --git a/android/src/main/res/drawable/overlay.xml b/android/src/main/res/drawable/overlay.xml index 9a562a0..77d78de 100644 --- a/android/src/main/res/drawable/overlay.xml +++ b/android/src/main/res/drawable/overlay.xml @@ -1,5 +1,7 @@ - + + Examples {!this.state.picker && this.renderButtons()} {!!this.state.picker && this.renderBackButton()} {!!this.state.picker && this.renderPicker()} - + ); } - renderPicker = () => examples[this.state.picker].component + setBackgroundColor = backgroundColor => this.setState({ backgroundColor }) + + renderPicker = () => { + const Picker = examples[this.state.picker].component; + return + } 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, diff --git a/example/examples.js b/example/examples.js index 4efa8be..38f1b41 100644 --- a/example/examples.js +++ b/example/examples.js @@ -7,14 +7,14 @@ import { EXAMPLE_KEYS } from './exampleKeys' export default { [EXAMPLE_KEYS.MINIMAL]: { buttonTitle: 'Minimal', - component: + component: Minimal }, [EXAMPLE_KEYS.ADVANCED]: { buttonTitle: 'Advanced', - component: + component: Advanced }, [EXAMPLE_KEYS.TIME_MODE]: { buttonTitle: 'Time mode', - component: + component: TimeMode } } diff --git a/example/examples/Advanced.js b/example/examples/Advanced.js index e3b1d4d..2417923 100644 --- a/example/examples/Advanced.js +++ b/example/examples/Advanced.js @@ -5,9 +5,9 @@ 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 { @@ -19,8 +19,8 @@ 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); + const { backgroundColor } = this.props; return ( Current locale: {this.state.locale} Current date: {this.state.chosenDate.toISOString()} - +