Change width and height (#80)

DatePickerAndroid.js

@@ -4,7 +4,7 @@ import moment from 'moment'
 
 const NativeDatePicker = requireNativeComponent(`DatePickerManager`, DatePickerAndroid, { nativeOnly: { onChange: true } });
 
-class DatePickerAndroid extends React.Component {
+class DatePickerAndroid extends React.PureComponent {
 
     static defaultProps = {
         mode: 'datetime',

DatePickerIOS.js

@@ -17,7 +17,7 @@ import React from 'react';
 import { StyleSheet, View, requireNativeComponent } from 'react-native';
 const invariant = require('fbjs/lib/invariant');
 
-import type {ViewProps} from 'ViewPropTypes';
+import type { ViewProps } from 'ViewPropTypes';
 
 const RCTDatePickerIOS = requireNativeComponent('RNDatePicker');
 
@@ -29,7 +29,7 @@ type Props = $ReadOnly<{|
   /**
    * The currently selected date.
    */
-  date?: ?Date,
+  date ?: ? Date,
 
   /**
    * Provides an initial value that will change when the user starts selecting
@@ -39,36 +39,36 @@ type Props = $ReadOnly<{|
    * causes it to go out of sync with native. The initialDate prop is intended
    * to allow you to have native be source of truth.
    */
-  initialDate?: ?Date,
+  initialDate ?: ? Date,
 
   /**
    * The date picker locale.
    */
-  locale?: ?string,
+  locale ?: ? string,
 
   /**
    * Maximum date.
    *
    * Restricts the range of possible date/time values.
    */
-  maximumDate?: ?Date,
+  maximumDate ?: ? Date,
 
   /**
    * Minimum date.
    *
    * Restricts the range of possible date/time values.
    */
-  minimumDate?: ?Date,
+  minimumDate ?: ? Date,
 
   /**
    * The interval at which minutes can be selected.
    */
-  minuteInterval?: ?(1 | 2 | 3 | 4 | 5 | 6 | 10 | 12 | 15 | 20 | 30),
+  minuteInterval ?: ? (1 | 2 | 3 | 4 | 5 | 6 | 10 | 12 | 15 | 20 | 30),
 
   /**
    * The date picker mode.
    */
-  mode?: ?('date' | 'time' | 'datetime'),
+  mode ?: ? ('date' | 'time' | 'datetime'),
 
   /**
    * Date change handler.
@@ -77,7 +77,7 @@ type Props = $ReadOnly<{|
    * The first and only argument is an Event. For getting the date the picker
    * was changed to, use onDateChange instead.
    */
-  onChange?: ?(event: Event) => void,
+  onChange ?: ? (event: Event) => void,
 
   /**
    * Date change handler.
@@ -88,14 +88,14 @@ type Props = $ReadOnly<{|
    */
   onDateChange: (date: Date) => void,
 
-  /**
-   * Timezone offset in minutes.
-   *
-   * By default, the date picker will use the device's timezone. With this
-   * parameter, it is possible to force a certain timezone offset. For
-   * instance, to show times in Pacific Standard Time, pass -7 * 60.
-   */
-  timeZoneOffsetInMinutes?: ?number,
+    /**
+     * Timezone offset in minutes.
+     *
+     * By default, the date picker will use the device's timezone. With this
+     * parameter, it is possible to force a certain timezone offset. For
+     * instance, to show times in Pacific Standard Time, pass -7 * 60.
+     */
+    timeZoneOffsetInMinutes ?: ? number,
 |}>;
 
 /**
@@ -138,35 +138,33 @@ export default class DatePickerIOS extends React.Component {
       'A selected date or initial date should be specified.',
     );
     return (
-      <View style={props.style}>
-        <RCTDatePickerIOS
-          ref={picker => {
-            this._picker = picker;
-          }}
-          style={styles.datePickerIOS}
-          date={
-            props.date
-              ? props.date.getTime()
-              : props.initialDate
-                ? props.initialDate.getTime()
-                : undefined
-          }
-          locale={props.locale ? props.locale : undefined}
-          maximumDate={
-            props.maximumDate ? props.maximumDate.getTime() : undefined
-          }
-          minimumDate={
-            props.minimumDate ? props.minimumDate.getTime() : undefined
-          }
-          mode={props.mode}
-          minuteInterval={props.minuteInterval}
-          timeZoneOffsetInMinutes={props.timeZoneOffsetInMinutes}
-          onChange={this._onChange}
-          onStartShouldSetResponder={() => true}
-          onResponderTerminationRequest={() => false}
-          textColor={props.textColor}
-        />
-      </View>
+      <RCTDatePickerIOS
+        ref={picker => {
+          this._picker = picker;
+        }}
+        style={[styles.datePickerIOS, props.style]}
+        date={
+          props.date
+            ? props.date.getTime()
+            : props.initialDate
+              ? props.initialDate.getTime()
+              : undefined
+        }
+        locale={props.locale ? props.locale : undefined}
+        maximumDate={
+          props.maximumDate ? props.maximumDate.getTime() : undefined
+        }
+        minimumDate={
+          props.minimumDate ? props.minimumDate.getTime() : undefined
+        }
+        mode={props.mode}
+        minuteInterval={props.minuteInterval}
+        timeZoneOffsetInMinutes={props.timeZoneOffsetInMinutes}
+        onChange={this._onChange}
+        onStartShouldSetResponder={() => true}
+        onResponderTerminationRequest={() => false}
+        textColor={props.textColor}
+      />
     );
   }
 }

android/build.gradle

@@ -28,7 +28,7 @@ android {
 dependencies {
     compile fileTree(include: ['*.jar'], dir: 'libs')
     compile 'com.facebook.react:react-native:+'
-    compile 'cn.carbswang.android:NumberPickerView:1.2.0'
+    compile 'com.henninghall.android:NumberPickerView:1.0.1'
     compile 'org.apache.commons:commons-lang3:3.6'
     compile group: 'net.time4j', name: 'time4j-android', version: '4.2-2018i'
 

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

@@ -1,11 +1,15 @@
 package com.henninghall.date_picker;
 
+import android.content.res.Resources;
 import android.support.annotation.Nullable;
+import android.util.Log;
+import android.util.TypedValue;
 
 import com.facebook.react.common.MapBuilder;
 import com.facebook.react.uimanager.SimpleViewManager;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.annotations.ReactProp;
+import com.facebook.react.uimanager.annotations.ReactPropGroup;
 
 import net.time4j.android.ApplicationStarter;
 import org.apache.commons.lang3.LocaleUtils;
@@ -84,6 +88,15 @@ public class DatePickerManager extends SimpleViewManager  {
     view.setTimeZone(timeZone);
   }
 
+  @ReactPropGroup(names = {"height", "width"}, customType = "Style")
+  public void setStyle(PickerView view, int index, Integer style) {
+    if(index == 0) view.style.setHeight(style);
+    if(index == 1) {
+      int width = (int) Utils.dpToPixels(style, DatePickerManager.context);
+      view.style.setWidth(width);
+    }
+  }
+
   @Override
   protected void onAfterUpdateTransaction(PickerView view) {
    super.onAfterUpdateTransaction(view);

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

@@ -1,8 +1,10 @@
 package com.henninghall.date_picker;
 
 import android.os.Build;
+import android.os.Handler;
 import android.util.Log;
 import android.view.View;
+import android.widget.LinearLayout;
 import android.widget.RelativeLayout;
 
 import com.facebook.react.bridge.Arguments;
@@ -63,7 +65,7 @@ public class PickerView extends RelativeLayout {
         this.style = new Style(this);
         this.wheelOrderUpdater = new WheelOrderUpdater(this);
 
-        RelativeLayout wheelsWrapper = (RelativeLayout) rootView.findViewById(R.id.wheelsWrapper);
+        LinearLayout wheelsWrapper = (LinearLayout) rootView.findViewById(R.id.wheelsWrapper);
         wheelsWrapper.setWillNotDraw(false);
 
         locale = Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP ? Locale.forLanguageTag("en") : Locale.getDefault();

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

@@ -2,14 +2,16 @@ package com.henninghall.date_picker;
 
 import android.graphics.Color;
 import android.graphics.drawable.GradientDrawable;
+import android.view.View;
+import android.view.ViewGroup;
 import android.widget.ImageView;
-
+import com.henninghall.date_picker.wheelFunctions.SetShowCount;
 import com.henninghall.date_picker.wheelFunctions.TextColor;
 
-import org.w3c.dom.Text;
-
 
 class Style {
+    private static int DP_PER_SHOW_SHOW_COUNT = 35;
+
     private final GradientDrawable gradientBottom;
     private final GradientDrawable gradientTop;
     private final PickerView pickerView;
@@ -38,6 +40,19 @@ class Style {
         this.pickerView.applyOnAllWheels(new TextColor(color));
     }
 
+    public void setWidth(int width) {
+        View view = pickerView.findViewById(R.id.container);
+        ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
+        layoutParams.width = width;
+        view.setLayoutParams(layoutParams);
+    }
+
+    public void setHeight(int height) {
+        int showCount = height / DP_PER_SHOW_SHOW_COUNT;
+        int oddShowCount = showCount % 2 == 0 ? showCount + 1 : showCount;
+        pickerView.applyOnAllWheels(new SetShowCount(oddShowCount));
+    }
+
     private boolean validColor(String color){
         return color != null && color.length() == 7;
     }

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

@@ -1,18 +1,18 @@
 package com.henninghall.date_picker;
 
 
+import android.content.Context;
+import android.content.res.Resources;
 import android.text.format.DateUtils;
 import android.util.TypedValue;
 import android.view.View;
 
 import net.time4j.PrettyTime;
 
-import java.sql.Time;
 import java.text.DateFormat;
 import java.text.ParseException;
 import java.text.SimpleDateFormat;
 import java.util.Calendar;
-import java.util.Date;
 import java.util.Locale;
 import java.util.TimeZone;
 
@@ -72,4 +72,12 @@ public class Utils {
         return format;
     }
 
+    public static float dpToPixels(int dp, Context context){
+        return TypedValue.applyDimension(
+                TypedValue.COMPLEX_UNIT_DIP,
+                dp,
+                context.getResources().getDisplayMetrics()
+        );
+    }
+
 }

android/src/main/java/com/henninghall/date_picker/wheelFunctions/Hide.java

@@ -0,0 +1,15 @@
+package com.henninghall.date_picker.wheelFunctions;
+
+import android.view.View;
+
+import com.henninghall.date_picker.wheels.Wheel;
+
+public class Hide implements WheelFunction {
+
+    @Override
+    public void apply(Wheel wheel) {
+        wheel.picker.setVisibility(View.GONE);
+    }
+}
+
+

android/src/main/java/com/henninghall/date_picker/wheelFunctions/SetShowCount.java

@@ -0,0 +1,19 @@
+package com.henninghall.date_picker.wheelFunctions;
+
+import com.henninghall.date_picker.wheels.Wheel;
+
+public class SetShowCount implements WheelFunction {
+
+    private final int count;
+
+    public SetShowCount(int count) {
+        this.count = count;
+    }
+
+    @Override
+    public void apply(Wheel wheel) {
+        wheel.picker.setShownCount(this.count);
+    }
+}
+
+

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

@@ -2,15 +2,13 @@ package com.henninghall.date_picker.wheels;
 
 import android.view.View;
 import com.henninghall.date_picker.PickerView;
-import com.henninghall.date_picker.R;
 
 import org.apache.commons.lang3.LocaleUtils;
 import java.text.SimpleDateFormat;
 import java.util.ArrayList;
 import java.util.Calendar;
-import java.util.Date;
-import cn.carbswang.android.numberpickerview.library.NumberPickerView;
 
+import cn.carbswang.android.numberpickerview.library.NumberPickerView;
 
 public abstract class Wheel {
 

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

@@ -1,149 +1,155 @@
 <?xml version="1.0" encoding="utf-8"?>
 
-<RelativeLayout
-    android:id="@+id/container"
+<RelativeLayout android:id="@+id/container"
     xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    >
 
-    <RelativeLayout
+    xmlns:custom="http://schemas.android.com/apk/res-auto">
+
+    <LinearLayout
         android:id="@+id/wheelsWrapper"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_centerHorizontal="true"
-        android:foregroundGravity="center"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:orientation="horizontal"
         >
         <cn.carbswang.android.numberpickerview.library.NumberPickerView
             android:id="@+id/year"
             android:layout_width="wrap_content"
-            android:layout_height="160dp"
-            app:npv_ShownCount="5"
-            app:npv_RespondChangeOnDetached="false"
-            app:npv_TextSizeNormal="18sp"
-            app:npv_TextSizeSelected="21sp"
-            app:npv_WrapSelectorWheel="false"
-            app:npv_TextColorSelected="#000000"
-            app:npv_TextColorNormal="#aaaaaa"
-            app:npv_DividerColor="#cccccc"
-            app:npv_ItemPaddingHorizontal="3dp"
+            android:layout_height="match_parent"
+            custom:npv_ShownCount="5"
+            custom:npv_RespondChangeOnDetached="false"
+            custom:npv_TextSizeNormal="18sp"
+            custom:npv_TextSizeSelected="21sp"
+            custom:npv_WrapSelectorWheel="false"
+            custom:npv_TextColorSelected="#000000"
+            custom:npv_TextColorNormal="#aaaaaa"
+            custom:npv_DividerColor="#cccccc"
+            custom:npv_ItemPaddingHorizontal="3dp"
             />
         <cn.carbswang.android.numberpickerview.library.NumberPickerView
             android:id="@+id/month"
             android:layout_width="wrap_content"
-            android:layout_height="160dp"
-            app:npv_ShownCount="5"
-            app:npv_RespondChangeOnDetached="false"
-            app:npv_TextSizeNormal="18sp"
-            app:npv_TextSizeSelected="21sp"
-            app:npv_WrapSelectorWheel="true"
-            app:npv_TextColorSelected="#000000"
-            app:npv_TextColorNormal="#aaaaaa"
-            app:npv_DividerColor="#cccccc"
-            app:npv_ItemPaddingHorizontal="3dp"
+            android:layout_height="match_parent"
+            custom:npv_ShownCount="5"
+            custom:npv_RespondChangeOnDetached="false"
+            custom:npv_TextSizeNormal="18sp"
+            custom:npv_TextSizeSelected="21sp"
+            custom:npv_WrapSelectorWheel="true"
+            custom:npv_TextColorSelected="#000000"
+            custom:npv_TextColorNormal="#aaaaaa"
+            custom:npv_DividerColor="#cccccc"
+            custom:npv_ItemPaddingHorizontal="3dp"
             />
         <cn.carbswang.android.numberpickerview.library.NumberPickerView
             android:id="@+id/date"
             android:layout_width="wrap_content"
-            android:layout_height="160dp"
-            app:npv_ShownCount="5"
-            app:npv_RespondChangeOnDetached="false"
-            app:npv_TextSizeNormal="18sp"
-            app:npv_TextSizeSelected="21sp"
-            app:npv_WrapSelectorWheel="true"
-            app:npv_TextColorSelected="#000000"
-            app:npv_TextColorNormal="#aaaaaa"
-            app:npv_DividerColor="#cccccc"
-            app:npv_ItemPaddingHorizontal="3dp"
+            android:layout_height="match_parent"
+            custom:npv_ShownCount="5"
+            custom:npv_RespondChangeOnDetached="false"
+            custom:npv_TextSizeNormal="18sp"
+            custom:npv_TextSizeSelected="21sp"
+            custom:npv_WrapSelectorWheel="true"
+            custom:npv_TextColorSelected="#000000"
+            custom:npv_TextColorNormal="#aaaaaa"
+            custom:npv_DividerColor="#cccccc"
+            custom:npv_ItemPaddingHorizontal="3dp"
             />
         <cn.carbswang.android.numberpickerview.library.NumberPickerView
             android:id="@+id/day"
-            android:layout_width="wrap_content"
-            android:layout_height="160dp"
-            app:npv_ShownCount="5"
-            app:npv_RespondChangeOnDetached="false"
-            app:npv_TextSizeNormal="18sp"
-            app:npv_TextSizeSelected="21sp"
-            app:npv_WrapSelectorWheel="false"
-            app:npv_TextColorSelected="#000000"
-            app:npv_TextColorNormal="#aaaaaa"
-            app:npv_DividerColor="#cccccc"
-            app:npv_ItemPaddingHorizontal="3dp"
-            />
+            android:layout_width="0dp"
+            android:layout_weight="4"
+            android:layout_height="match_parent"
+            custom:npv_ShownCount="5"
+            custom:npv_RespondChangeOnDetached="false"
+            custom:npv_TextSizeNormal="18sp"
+            custom:npv_TextSizeSelected="21sp"
+            custom:npv_WrapSelectorWheel="false"
+            custom:npv_TextColorSelected="#000000"
+            custom:npv_TextColorNormal="#aaaaaa"
+            custom:npv_DividerColor="#cccccc"
+            custom:npv_ItemPaddingHorizontal="3dp"/>
 
         <cn.carbswang.android.numberpickerview.library.NumberPickerView
             android:id="@+id/hour"
-            android:layout_width="wrap_content"
-            android:layout_height="160dp"
-            android:layout_toEndOf="@+id/day"
-            android:layout_toRightOf="@+id/day"
-            app:npv_DividerColor="#cccccc"
-            app:npv_RespondChangeOnDetached="false"
-            app:npv_ShownCount="5"
-            app:npv_TextColorNormal="#aaaaaa"
-            app:npv_TextColorSelected="#000000"
-            app:npv_TextSizeNormal="18sp"
-            app:npv_TextSizeSelected="21sp"
-            app:npv_WrapSelectorWheel="true"
-            app:npv_ItemPaddingHorizontal="3dp"
+            android:layout_width="0dp"
+            android:layout_weight="1"
+            android:layout_height="match_parent"
+            custom:npv_DividerColor="#cccccc"
+            custom:npv_RespondChangeOnDetached="false"
+            custom:npv_ShownCount="5"
+            custom:npv_TextColorNormal="#aaaaaa"
+            custom:npv_TextColorSelected="#000000"
+            custom:npv_TextSizeNormal="18sp"
+            custom:npv_TextSizeSelected="21sp"
+            custom:npv_WrapSelectorWheel="true"
+            custom:npv_ItemPaddingHorizontal="3dp"
             />
 
         <cn.carbswang.android.numberpickerview.library.NumberPickerView
             android:id="@+id/minutes"
-            android:layout_width="wrap_content"
-            android:layout_height="160dp"
-            android:layout_toEndOf="@+id/hour"
-            android:layout_toRightOf="@+id/hour"
-            app:npv_DividerColor="#cccccc"
-            app:npv_RespondChangeOnDetached="false"
-            app:npv_ShownCount="5"
-            app:npv_TextColorNormal="#aaaaaa"
-            app:npv_TextColorSelected="#000000"
-            app:npv_TextSizeNormal="18sp"
-            app:npv_TextSizeSelected="21sp"
-            app:npv_WrapSelectorWheel="true"
-            app:npv_ItemPaddingHorizontal="3dp"
+            android:layout_width="0dp"
+            android:layout_weight="1"
+            android:layout_height="match_parent"
+            custom:npv_DividerColor="#cccccc"
+            custom:npv_RespondChangeOnDetached="false"
+            custom:npv_ShownCount="5"
+            custom:npv_TextColorNormal="#aaaaaa"
+            custom:npv_TextColorSelected="#000000"
+            custom:npv_TextSizeNormal="18sp"
+            custom:npv_TextSizeSelected="21sp"
+            custom:npv_WrapSelectorWheel="true"
+            custom:npv_ItemPaddingHorizontal="3dp"
             />
 
         <cn.carbswang.android.numberpickerview.library.NumberPickerView
             android:id="@+id/ampm"
-            android:layout_width="wrap_content"
-            android:layout_height="160dp"
-            android:layout_toEndOf="@+id/minutes"
-            android:layout_toRightOf="@+id/minutes"
-            app:npv_DividerColor="#cccccc"
-            app:npv_RespondChangeOnDetached="false"
-            app:npv_ShownCount="5"
-            app:npv_TextColorNormal="#aaaaaa"
-            app:npv_TextColorSelected="#000000"
-            app:npv_TextSizeNormal="18sp"
-            app:npv_TextSizeSelected="21sp"
-            app:npv_WrapSelectorWheel="true"
-            app:npv_ItemPaddingHorizontal="3dp"
+            android:layout_weight="1.5"
+            android:layout_width="0dp"
+            android:layout_height="match_parent"
+            custom:npv_DividerColor="#cccccc"
+            custom:npv_RespondChangeOnDetached="false"
+            custom:npv_ShownCount="5"
+            custom:npv_TextColorNormal="#aaaaaa"
+            custom:npv_TextColorSelected="#000000"
+            custom:npv_TextSizeNormal="18sp"
+            custom:npv_TextSizeSelected="21sp"
+            custom:npv_WrapSelectorWheel="true"
+            custom:npv_ItemPaddingHorizontal="3dp"
             android:foregroundGravity="center"
 
             />
-    </RelativeLayout>
-
-    <ImageView
-        android:id="@+id/overlay_top"
-        android:src="@drawable/overlay"
+    </LinearLayout>
+    <LinearLayout
         android:layout_width="match_parent"
-        android:contentDescription="@string/overlay"
-        android:layout_height="20dp"
-        android:rotation="180"
-        />
+        android:layout_height="match_parent"
+        android:orientation="vertical"
+        android:layout_marginBottom="-1dp"
+        >
+        <ImageView
+            android:id="@+id/overlay_top"
+            android:src="@drawable/overlay"
+            android:layout_width="match_parent"
+            android:contentDescription="@string/overlay"
+            android:layout_height="0dp"
+            android:rotation="180"
+            android:layout_weight=".15"
+            />
 
-    <ImageView
-        android:id="@+id/overlay_bottom"
-        android:src="@drawable/overlay"
-        android:layout_width="match_parent"
-        android:contentDescription="@string/overlay"
-        android:layout_height="20dp"
-        android:layout_marginTop="140dp"
-        />
+        <View
+            android:layout_height="0dp"
+            android:layout_weight=".70"
+            android:layout_width="match_parent"
+            />
 
+        <ImageView
+            android:id="@+id/overlay_bottom"
+            android:src="@drawable/overlay"
+            android:layout_width="match_parent"
+            android:contentDescription="@string/overlay"
+            android:layout_height="0dp"
+            android:layout_weight=".15"
+        />
+    </LinearLayout>
 
 </RelativeLayout>