Merge branch 'feature/locale'

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();
   }
 
@@ -38,7 +52,8 @@ 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('-','_')));
+    view.requestLayout();
   }
 
   public Map getExportedCustomBubblingEventTypeConstants() {

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);
     }
 }

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 " : "";
     }
 
 

android/src/main/java/com/henninghall/date_picker/wheels/DayWheel.java

@@ -24,15 +24,12 @@ 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()));
+            displayValues.add(displayFormat.format(cal.getTime()).substring(3));
             cal.add(Calendar.DAY_OF_MONTH, 1);
         }
 
-
-        ArrayList<String> displayValues = new ArrayList<>();
-        for (String s : values) displayValues.add(s.substring(3));
         picker.setDisplayedValues(displayValues.toArray(new String[0]));
 
         picker.setMinValue(min);

android/src/main/java/com/henninghall/date_picker/wheels/HourWheel.java

@@ -17,15 +17,16 @@ public class HourWheel extends Wheel {
     @Override
     void init() {
         int numberOfHours = Utils.usesAmPm(locale) ? 12 : 24;
-
-
+        Calendar cal = Calendar.getInstance();
         for(int i=0; i<numberOfHours; i++) {
             values.add(format.format(cal.getTime()));
+            displayValues.add(format.format(cal.getTime()));
             cal.add(Calendar.HOUR_OF_DAY, 1);
         }
-        picker.setDisplayedValues(values.toArray(new String[0]));
+        picker.setDisplayedValues(values.toArray(new String[0]),true);
         picker.setMinValue(0);
         picker.setMaxValue(numberOfHours - 1);
+
     }
 
     @Override

android/src/main/java/com/henninghall/date_picker/wheels/MinutesWheel.java

@@ -17,8 +17,12 @@ public class MinutesWheel extends Wheel {
 
     @Override
     void init() {
+        Calendar cal = Calendar.getInstance();
         for(int i=0; i<60; i++) {
+
             values.add(format.format(cal.getTime()));
+            displayValues.add(format.format(cal.getTime()));
+
             cal.add(Calendar.MINUTE, 1);
         }
         picker.setDisplayedValues(values.toArray(new String[0]));

android/src/main/java/com/henninghall/date_picker/wheels/Wheel.java

@@ -1,12 +1,13 @@
 package com.henninghall.date_picker.wheels;
 
-import android.view.ViewManager;
+import android.view.View;
 
 import com.henninghall.date_picker.WheelChangeListener;
 
+import org.apache.commons.lang3.LocaleUtils;
+
 import java.text.SimpleDateFormat;
 import java.util.ArrayList;
-import java.util.Calendar;
 import java.util.Date;
 import java.util.Locale;
 
@@ -20,17 +21,18 @@ public abstract class Wheel {
     abstract String getFormatTemplate();
 
     ArrayList<String> values;
+    ArrayList<String> 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.values = new ArrayList<>();
-        this.format = new SimpleDateFormat(getFormatTemplate(), locale);
+
         refresh();
 
         picker.setOnValueChangedListener(new NumberPickerView.OnValueChangeListener() {
@@ -43,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) {
@@ -52,18 +55,29 @@ 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.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() {
+        picker.setVisibility(View.VISIBLE);
     }
 
 }

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"
     >
 
     <RelativeLayout
+        android:id="@+id/wheelsWrapper"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_centerHorizontal="true"
+        android:foregroundGravity="center"
         >
         <cn.carbswang.android.numberpickerview.library.NumberPickerView
             android:id="@+id/day"
@@ -29,7 +30,6 @@
             app:npv_TextColorNormal="#aaaaaa"
             app:npv_DividerColor="#cccccc"
             app:npv_ItemPaddingHorizontal="3dp"
-
             />
 
         <cn.carbswang.android.numberpickerview.library.NumberPickerView
@@ -48,7 +48,6 @@
             app:npv_TextSizeSelected="21sp"
             app:npv_WrapSelectorWheel="true"
             app:npv_ItemPaddingHorizontal="3dp"
-            android:gravity="center"
             />
 
         <cn.carbswang.android.numberpickerview.library.NumberPickerView
@@ -67,7 +66,6 @@
             app:npv_TextSizeSelected="21sp"
             app:npv_WrapSelectorWheel="true"
             app:npv_ItemPaddingHorizontal="3dp"
-            android:gravity="center"
             />
 
         <cn.carbswang.android.numberpickerview.library.NumberPickerView
@@ -76,7 +74,6 @@
             android:layout_height="160dp"
             android:layout_toEndOf="@+id/minutes"
             android:layout_toRightOf="@+id/minutes"
-            android:background="#FFFFFF"
             app:npv_DividerColor="#cccccc"
             app:npv_RespondChangeOnDetached="false"
             app:npv_ShowCount="5"
@@ -86,7 +83,8 @@
             app:npv_TextSizeSelected="21sp"
             app:npv_WrapSelectorWheel="true"
             app:npv_ItemPaddingHorizontal="3dp"
-            android:gravity="center"
+            android:foregroundGravity="center"
+
             />
     </RelativeLayout>
 

example/App.js

@@ -1,25 +1,59 @@
 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 (
       <View style={styles.container}>
         <DatePicker
           date={this.state.chosenDate}
           onDateChange={this.setDate}
-          style={{ width: 300, height: 170 }}
+          locale={this.state.locale}
+        />
+
+        <Text>Current locale: {this.state.locale}</Text>
+        <Text>Current date: {this.state.chosenDate.toISOString()}</Text>
+        <Text></Text>
+        
+        
+        <SearchInput
+          onChangeText={(term) => { this.searchUpdated(term) }}
+          style={styles.searchInput}
+          placeholder="Change locale"
         />
+        <ScrollView>
+          {result.map(locale => (
+            <TouchableOpacity onPress={() => this.setState({locale})} key={locale} style={styles.item}>
+              <Text>{locale}</Text>
+            </TouchableOpacity>
+          ))
+          }
+        </ScrollView>
+
       </View>
     );
   }
+  
 }
 
 const styles = StyleSheet.create({
@@ -29,4 +63,21 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     backgroundColor: 'white',
   },
-})
+  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,
+  }
+})

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"

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 = () => <NativeDatePicker {...this.props} date={this.props.date.getTime()} onChange={this._onChange} />;
+    _style = () => ({ ...style, ...this.props.style })
+    render = () => <NativeDatePicker {...this.props} date={this.props.date.getTime()} onChange={this._onChange} style={this._style()} />;
+}
+
+const style = {
+    minWidth: 300,
+    minHeight: 180,
+    borderWidth: 1,
 }
 
 DatePickerAndroid.propTypes = DatePickerIOS.propTypes;