From 2261adc1ff07bba181a8e0a2512814d0f0754d50 Mon Sep 17 00:00:00 2001 From: Henning Hall Date: Thu, 19 Apr 2018 22:39:56 +0200 Subject: [PATCH 1/2] locale wip --- .../date_picker/DatePickerManager.java | 2 +- .../date_picker/wheels/DayWheel.java | 1 - .../date_picker/wheels/HourWheel.java | 4 +- .../henninghall/date_picker/wheels/Wheel.java | 19 +++++-- example/App.js | 55 +++++++++++++++++-- example/yarn.lock | 6 +- 6 files changed, 72 insertions(+), 15 deletions(-) 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 4ccfd33..b0ef71f 100644 --- a/android/src/main/java/com/henninghall/date_picker/DatePickerManager.java +++ b/android/src/main/java/com/henninghall/date_picker/DatePickerManager.java @@ -38,7 +38,7 @@ public class DatePickerManager extends SimpleViewManager { @ReactProp(name = "locale") public void setLocale(PickerView view, @Nullable String locale) { - view.setLocale(LocaleUtils.toLocale(locale)); + view.setLocale(LocaleUtils.toLocale(locale.replace('-','_'))); } public Map getExportedCustomBubblingEventTypeConstants() { diff --git a/android/src/main/java/com/henninghall/date_picker/wheels/DayWheel.java b/android/src/main/java/com/henninghall/date_picker/wheels/DayWheel.java index 8de374d..b7dc379 100644 --- a/android/src/main/java/com/henninghall/date_picker/wheels/DayWheel.java +++ b/android/src/main/java/com/henninghall/date_picker/wheels/DayWheel.java @@ -24,7 +24,6 @@ public class DayWheel extends Wheel { Calendar cal = Calendar.getInstance(); cal.add(Calendar.DAY_OF_MONTH, -5000); - for(int i=0; i<=(max-min); i++){ values.add(format.format(cal.getTime())); cal.add(Calendar.DAY_OF_MONTH, 1); diff --git a/android/src/main/java/com/henninghall/date_picker/wheels/HourWheel.java b/android/src/main/java/com/henninghall/date_picker/wheels/HourWheel.java index b5417bd..13ecfb0 100644 --- a/android/src/main/java/com/henninghall/date_picker/wheels/HourWheel.java +++ b/android/src/main/java/com/henninghall/date_picker/wheels/HourWheel.java @@ -18,14 +18,14 @@ public class HourWheel extends Wheel { void init() { int numberOfHours = Utils.usesAmPm(locale) ? 12 : 24; - for(int i=0; i(); - this.format = new SimpleDateFormat(getFormatTemplate(), locale); + this.parent = (ViewGroup) picker.getParent(); refresh(); picker.setOnValueChangedListener(new NumberPickerView.OnValueChangeListener() { @@ -52,18 +55,26 @@ public abstract class Wheel { } public void setLocale(Locale locale) { - this.locale =locale; + this.locale = locale; refresh(); } private void refresh() { this.format = new SimpleDateFormat(getFormatTemplate(), locale); - if (visible()) init(); + this.values = new ArrayList<>(); + + if (visible()) { + add(); + init(); + } else remove(); } private void remove() { ((ViewManager) picker.getParent()).removeView(picker); } + private void add() { + parent.addView(picker); + } } diff --git a/example/App.js b/example/App.js index 264f0d3..7496c8a 100644 --- a/example/App.js +++ b/example/App.js @@ -1,25 +1,55 @@ import React, { Component } from 'react'; -import { View, StyleSheet} from 'react-native'; - +import { View, StyleSheet, ScrollView, Text, TouchableOpacity } from 'react-native'; +import SearchInput, { createFilter } from 'react-native-search-filter'; +import DeviceInfo from 'react-native-device-info'; import DatePicker from 'react-native-date-picker-x'; +import locales from './locales'; export default class App extends Component { - state = { chosenDate: new Date() } + searchUpdated(term) { + this.setState({ searchTerm: term }) + } + + state = { + chosenDate: new Date(), + searchTerm: '', + locale: DeviceInfo.getDeviceLocale(), + } setDate = (newDate) => this.setState({ chosenDate: newDate }) render() { + const result = locales.filter(createFilter(this.state.searchTerm)).slice(0, 5); + console.log({result}); + return ( + Current locale: {this.state.locale} + { this.searchUpdated(term) }} + style={styles.searchInput} + placeholder="Change locale" + /> + + {result.map(locale => ( + this.setState({locale})} key={locale} style={styles.item}> + {locale} + + )) + } + + ); } + } const styles = StyleSheet.create({ @@ -29,4 +59,21 @@ const styles = StyleSheet.create({ justifyContent: 'center', backgroundColor: 'white', }, -}) \ No newline at end of file + item: { + borderWidth: 1, + marginTop: -1, + borderColor: 'rgba(0,0,0,1)', + padding: 3, + width: 100, + alignItems: 'center', + }, + emailSubject: { + color: 'rgba(0,0,0,0.5)' + }, + searchInput: { + padding: 5, + borderColor: '#CCC', + borderWidth: 1, + width: 100, + } +}) diff --git a/example/yarn.lock b/example/yarn.lock index cc4d08c..d4ce2e8 100644 --- a/example/yarn.lock +++ b/example/yarn.lock @@ -4297,9 +4297,9 @@ react-is@^16.3.1: version "16.3.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.3.1.tgz#ee66e6d8283224a83b3030e110056798488359ba" -react-native-date-picker-x@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/react-native-date-picker-x/-/react-native-date-picker-x-1.0.2.tgz#1fd82670a663d8ac4d12d1697991cef34fdc3ddb" +react-native-date-picker-x@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/react-native-date-picker-x/-/react-native-date-picker-x-1.0.3.tgz#f98b60da64651de8573ca7ae3a67f58d4bd03c40" react-native-device-info@^0.21.5: version "0.21.5" From 27ecd53ef9bbe48440ef62c443ac6e71dde94a3a Mon Sep 17 00:00:00 2001 From: Henning Hall Date: Sun, 29 Apr 2018 16:37:51 +0200 Subject: [PATCH 2/2] Locale support. --- .../date_picker/DatePickerManager.java | 15 +++++++ .../henninghall/date_picker/PickerView.java | 41 +++++++++++++++---- .../date_picker/wheels/AmPmWheel.java | 18 ++++++-- .../date_picker/wheels/DayWheel.java | 4 +- .../date_picker/wheels/HourWheel.java | 3 +- .../date_picker/wheels/MinutesWheel.java | 4 ++ .../henninghall/date_picker/wheels/Wheel.java | 27 ++++++------ .../src/main/res/layout/datepicker_view.xml | 10 ++--- example/App.js | 6 ++- index.js | 9 +++- 10 files changed, 101 insertions(+), 36 deletions(-) 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 b0ef71f..066e532 100644 --- a/android/src/main/java/com/henninghall/date_picker/DatePickerManager.java +++ b/android/src/main/java/com/henninghall/date_picker/DatePickerManager.java @@ -1,6 +1,9 @@ package com.henninghall.date_picker; +import android.annotation.TargetApi; +import android.os.Build; import android.support.annotation.Nullable; +import android.util.Log; import android.view.View; import com.facebook.react.common.MapBuilder; @@ -10,6 +13,8 @@ import com.facebook.react.uimanager.annotations.ReactProp; import org.apache.commons.lang3.LocaleUtils; +import java.text.ParseException; +import java.text.SimpleDateFormat; import java.util.Date; import java.util.Locale; import java.util.Map; @@ -28,6 +33,15 @@ public class DatePickerManager extends SimpleViewManager { @Override public PickerView createViewInstance(ThemedReactContext reactContext) { DatePickerManager.context = reactContext; + + try { + SimpleDateFormat dateFormat = new SimpleDateFormat("yy EEE d MMM HH mm", Locale.US); + Date date = dateFormat.parse("18 Mon 30 Apr 16 06"); + date = date; + } catch (ParseException e) { + e.printStackTrace(); + } + return new PickerView(); } @@ -39,6 +53,7 @@ public class DatePickerManager extends SimpleViewManager { @ReactProp(name = "locale") public void setLocale(PickerView view, @Nullable String locale) { view.setLocale(LocaleUtils.toLocale(locale.replace('-','_'))); + view.requestLayout(); } public Map getExportedCustomBubblingEventTypeConstants() { 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 46c3733..8978075 100644 --- a/android/src/main/java/com/henninghall/date_picker/PickerView.java +++ b/android/src/main/java/com/henninghall/date_picker/PickerView.java @@ -1,7 +1,7 @@ package com.henninghall.date_picker; import android.view.View; -import android.view.ViewManager; +import android.view.ViewGroup; import android.widget.RelativeLayout; import com.facebook.react.bridge.Arguments; @@ -22,21 +22,27 @@ import cn.carbswang.android.numberpickerview.library.NumberPickerView; public class PickerView extends RelativeLayout { + private final RelativeLayout wheelsWrapper; private SimpleDateFormat dateFormat; private HourWheel hourWheel; private DayWheel dayWheel; private MinutesWheel minutesWheel; private AmPmWheel ampmWheel; + private int i = 0; public PickerView() { super(DatePickerManager.context); View rootView = inflate(getContext(), R.layout.datepicker_view, this); + + wheelsWrapper = (RelativeLayout) rootView.findViewById(R.id.wheelsWrapper); + wheelsWrapper.setWillNotDraw(false); + Locale locale = android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP ? Locale.forLanguageTag("en") : Locale.getDefault(); NumberPickerView hourPicker = (NumberPickerView) rootView.findViewById(R.id.hour); hourWheel = new HourWheel(hourPicker, onWheelChangeListener, locale); - NumberPickerView dayPicker= (NumberPickerView) rootView.findViewById(R.id.day); + NumberPickerView dayPicker = (NumberPickerView) rootView.findViewById(R.id.day); dayWheel = new DayWheel(dayPicker, onWheelChangeListener, locale); NumberPickerView minutePicker = (NumberPickerView) rootView.findViewById(R.id.minutes); @@ -45,8 +51,7 @@ public class PickerView extends RelativeLayout { NumberPickerView ampmPicker = (NumberPickerView) rootView.findViewById(R.id.ampm); ampmWheel = new AmPmWheel(ampmPicker, onWheelChangeListener, locale); - dateFormat = new SimpleDateFormat(getDateFormatTemplate(), locale); - + dateFormat = new SimpleDateFormat(getDateFormatTemplate(), Locale.US); } WheelChangeListener onWheelChangeListener = new WheelChangeListener(){ @@ -54,7 +59,9 @@ public class PickerView extends RelativeLayout { public void onChange() { WritableMap event = Arguments.createMap(); try { - Date date = dateFormat.parse(getDateString()); + String dateString = getDateString(); + + Date date = dateFormat.parse(dateString); event.putDouble("date", date.getTime()); } catch (ParseException e) { e.printStackTrace(); @@ -67,15 +74,15 @@ public class PickerView extends RelativeLayout { private String getDateFormatTemplate() { return dayWheel.getFormatTemplate() + " " + hourWheel.getFormatTemplate() + " " - + minutesWheel.getFormatTemplate() + " " - + ampmWheel.getFormatTemplate(); + + minutesWheel.getFormatTemplate() + + ampmWheel.getFormatTemplate(); } private String getDateString() { return dayWheel.getValue() + " " + hourWheel.getValue() + " " + minutesWheel.getValue() - + " " + ampmWheel.getValue(); + + ampmWheel.getValue(); } public void setDate(Date date) { @@ -90,5 +97,23 @@ public class PickerView extends RelativeLayout { hourWheel.setLocale(locale); minutesWheel.setLocale(locale); ampmWheel.setLocale(locale); + + dateFormat = new SimpleDateFormat(getDateFormatTemplate(), Locale.US); + } + + private final Runnable measureAndLayout = new Runnable() { + @Override + public void run() { + measure( + MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.EXACTLY), + MeasureSpec.makeMeasureSpec(getHeight(), MeasureSpec.EXACTLY)); + layout(getLeft(), getTop(), getRight(), getBottom()); + } + }; + + @Override + public void requestLayout() { + super.requestLayout(); + post(measureAndLayout); } } diff --git a/android/src/main/java/com/henninghall/date_picker/wheels/AmPmWheel.java b/android/src/main/java/com/henninghall/date_picker/wheels/AmPmWheel.java index df8094f..8c321d6 100644 --- a/android/src/main/java/com/henninghall/date_picker/wheels/AmPmWheel.java +++ b/android/src/main/java/com/henninghall/date_picker/wheels/AmPmWheel.java @@ -1,10 +1,14 @@ package com.henninghall.date_picker.wheels; +import com.henninghall.date_picker.PickerValue; import com.henninghall.date_picker.Utils; import com.henninghall.date_picker.WheelChangeListener; +import java.text.Format; +import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Calendar; +import java.util.Date; import java.util.Locale; import cn.carbswang.android.numberpickerview.library.NumberPickerView; @@ -18,10 +22,16 @@ public class AmPmWheel extends Wheel { @Override void init() { - values.add("AM"); - values.add("PM"); - picker.setDisplayedValues(values.toArray(new String[0])); + Calendar cal = Calendar.getInstance(); + displayValues.add(displayFormat.format(cal.getTime())); + values.add(format.format(cal.getTime())); + + cal.add(Calendar.HOUR_OF_DAY, 12); + displayValues.add(displayFormat.format(cal.getTime())); + values.add(format.format(cal.getTime())); + + picker.setDisplayedValues(displayValues.toArray(new String[0])); picker.setMinValue(0); picker.setMaxValue(1); @@ -35,7 +45,7 @@ public class AmPmWheel extends Wheel { @Override public String getFormatTemplate() { - return Utils.usesAmPm(locale) ? "a" : ""; + return Utils.usesAmPm(locale) ? " a " : ""; } diff --git a/android/src/main/java/com/henninghall/date_picker/wheels/DayWheel.java b/android/src/main/java/com/henninghall/date_picker/wheels/DayWheel.java index b7dc379..9463840 100644 --- a/android/src/main/java/com/henninghall/date_picker/wheels/DayWheel.java +++ b/android/src/main/java/com/henninghall/date_picker/wheels/DayWheel.java @@ -26,12 +26,10 @@ public class DayWheel extends Wheel { for(int i=0; i<=(max-min); i++){ values.add(format.format(cal.getTime())); + displayValues.add(displayFormat.format(cal.getTime()).substring(3)); cal.add(Calendar.DAY_OF_MONTH, 1); } - - ArrayList displayValues = new ArrayList<>(); - for (String s : values) displayValues.add(s.substring(3)); picker.setDisplayedValues(displayValues.toArray(new String[0])); picker.setMinValue(min); diff --git a/android/src/main/java/com/henninghall/date_picker/wheels/HourWheel.java b/android/src/main/java/com/henninghall/date_picker/wheels/HourWheel.java index 13ecfb0..1e663d4 100644 --- a/android/src/main/java/com/henninghall/date_picker/wheels/HourWheel.java +++ b/android/src/main/java/com/henninghall/date_picker/wheels/HourWheel.java @@ -17,9 +17,10 @@ public class HourWheel extends Wheel { @Override void init() { int numberOfHours = Utils.usesAmPm(locale) ? 12 : 24; - + Calendar cal = Calendar.getInstance(); for(int i=0; i values; + ArrayList displayValues; NumberPickerView picker; Locale locale; SimpleDateFormat format; - Calendar cal = Calendar.getInstance(); + SimpleDateFormat displayFormat; + Wheel(NumberPickerView picker, final WheelChangeListener listener, Locale locale){ this.locale = locale; this.picker = picker; - this.parent = (ViewGroup) picker.getParent(); + refresh(); picker.setOnValueChangedListener(new NumberPickerView.OnValueChangeListener() { @@ -46,7 +45,8 @@ public abstract class Wheel { } public String getValue() { - return visible() ? values.get(picker.getValue()) : ""; + if(!visible()) return ""; + return values.get(picker.getValue()); } public void setValue(Date date) { @@ -60,21 +60,24 @@ public abstract class Wheel { } private void refresh() { - this.format = new SimpleDateFormat(getFormatTemplate(), locale); + this.displayFormat = new SimpleDateFormat(getFormatTemplate(), locale); + this.format = new SimpleDateFormat(getFormatTemplate(), LocaleUtils.toLocale("en_US")); this.values = new ArrayList<>(); + this.displayValues= new ArrayList<>(); if (visible()) { add(); init(); } else remove(); + } private void remove() { - ((ViewManager) picker.getParent()).removeView(picker); + picker.setVisibility(View.GONE); } private void add() { - parent.addView(picker); + picker.setVisibility(View.VISIBLE); } } diff --git a/android/src/main/res/layout/datepicker_view.xml b/android/src/main/res/layout/datepicker_view.xml index f623789..185bf9a 100644 --- a/android/src/main/res/layout/datepicker_view.xml +++ b/android/src/main/res/layout/datepicker_view.xml @@ -7,13 +7,14 @@ xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" - android:background="#FFFFFF" > diff --git a/example/App.js b/example/App.js index 7496c8a..9cca270 100644 --- a/example/App.js +++ b/example/App.js @@ -29,9 +29,13 @@ export default class App extends Component { date={this.state.chosenDate} onDateChange={this.setDate} locale={this.state.locale} - style={{ width: 300, height: 170 }} /> + Current locale: {this.state.locale} + Current date: {this.state.chosenDate.toISOString()} + + + { this.searchUpdated(term) }} style={styles.searchInput} diff --git a/index.js b/index.js index 147ea71..a705b27 100644 --- a/index.js +++ b/index.js @@ -17,7 +17,14 @@ const NativeDatePicker = requireNativeComponent(`DatePickerManager`, DatePickerA class DatePickerAndroid extends React.Component { _onChange = e => this.props.onDateChange(new Date(parseInt(e.nativeEvent.date))); - render = () => ; + _style = () => ({ ...style, ...this.props.style }) + render = () => ; +} + +const style = { + minWidth: 300, + minHeight: 180, + borderWidth: 1, } DatePickerAndroid.propTypes = DatePickerIOS.propTypes;