divider height prop (#220)

.github/workflows/android-detox.yml

@@ -1,8 +1,36 @@
-name: 'Android: End-to-end tests'
+name: 'Build & Test'
 
-on: [push, pull_request]
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
 
 jobs:
+  unit_tests:
+    name: Unit tests
+    runs-on: macos-latest
+    timeout-minutes: 5
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v1
+        with:
+          fetch-depth: 1
+
+      - name: Node
+        uses: actions/setup-node@v1
+
+      - name: Install npm dependencies
+        run: |
+          yarn install --frozen-lockfile
+
+      - name: Run unit tests
+        run: |
+          yarn test
+
   end_to_end_tests:
     name: End to end tests
     runs-on: macos-latest

.github/workflows/jest.yml

@@ -1,26 +0,0 @@
-name: 'Unit tests'
-
-on: [push, pull_request]
-
-jobs:
-  unit_tests:
-    name: Unit tests
-    runs-on: macos-latest
-    timeout-minutes: 5
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v1
-        with:
-          fetch-depth: 1
-
-      - name: Node
-        uses: actions/setup-node@v1
-
-      - name: Install npm dependencies
-        run: |
-          yarn install --frozen-lockfile
-
-      - name: Run unit tests
-        run: |
-          yarn test

README.md

@@ -73,6 +73,8 @@ export default () => {
 | locale                  | The locale for the date picker. Changes language, date order and am/pm preferences. Value needs to be a <a title="react native datepicker locale id" href="https://developer.apple.com/library/content/documentation/MacOSX/Conceptual/BPInternational/LanguageandLocaleIDs/LanguageandLocaleIDs.html">Locale ID.</a> | <img src="docs/locale-ios.png" alt="React Native Date picker locale language ios" height="120px" />                                                                                                                                      | <img src="docs/locale-android.png" alt="React Native Date picker locale language android" height="120px" />                                                                                                                                                        |
 | textColor               | Changes the text color. ⚠ Colors other than black (#000000) or white (#ffffff) will replace the "Today" string with a date on iOS 13 or higher.                                                                                                                                                                                 | <img src="docs/colors-ios.png" alt="react native datepicker text color background color ios" height="120px" />                                                                                                                           | <img src="docs/colors-android.png" alt="Text color background color android" height="120px" />                                                                                                                                                                     |
 | timeZoneOffsetInMinutes | Timezone offset in minutes (default: device's timezone)                                                                                                                                                                                                                                                               |
+| dividerHeight | Change the divider height (only supported for iosClone)                                                                                                                                                                                                                                                               |
+
 
 ## About
 

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

@@ -7,6 +7,7 @@ import com.facebook.react.common.MapBuilder;
 import com.facebook.react.uimanager.SimpleViewManager;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.annotations.ReactPropGroup;
+import com.henninghall.date_picker.props.DividerHeightProp;
 import com.henninghall.date_picker.props.VariantProp;
 import com.henninghall.date_picker.props.DateProp;
 import com.henninghall.date_picker.props.FadeToColorProp;
@@ -43,7 +44,7 @@ public class DatePickerManager extends SimpleViewManager  {
 
   @ReactPropGroup(names = { DateProp.name, ModeProp.name, LocaleProp.name, MaximumDateProp.name,
           MinimumDateProp.name, FadeToColorProp.name, TextColorProp.name, UtcProp.name, MinuteIntervalProp.name,
-          VariantProp.name
+          VariantProp.name, DividerHeightProp.name
   })
   public void setProps(PickerView view, int index, Dynamic value) {
     updateProp("setProps", view, index, value);

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

@@ -3,6 +3,7 @@ package com.henninghall.date_picker;
 import android.widget.RelativeLayout;
 
 import com.facebook.react.bridge.Dynamic;
+import com.henninghall.date_picker.props.DividerHeightProp;
 import com.henninghall.date_picker.props.MaximumDateProp;
 import com.henninghall.date_picker.props.MinimumDateProp;
 import com.henninghall.date_picker.props.MinuteIntervalProp;
@@ -51,6 +52,10 @@ public class PickerView extends RelativeLayout {
             uiManager.updateHeight();
         }
 
+        if (didUpdate(DividerHeightProp.name)) {
+            uiManager.updateDividerHeight();
+        }
+
         if (didUpdate(ModeProp.name, LocaleProp.name, VariantProp.name)) {
             uiManager.updateWheelOrder();
         }

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

@@ -3,6 +3,7 @@ package com.henninghall.date_picker;
 import com.facebook.react.bridge.Dynamic;
 import com.henninghall.date_picker.models.Mode;
 import com.henninghall.date_picker.models.Variant;
+import com.henninghall.date_picker.props.DividerHeightProp;
 import com.henninghall.date_picker.props.VariantProp;
 import com.henninghall.date_picker.props.DateProp;
 import com.henninghall.date_picker.props.FadeToColorProp;
@@ -34,6 +35,7 @@ public class State {
     private final UtcProp utcProp = new UtcProp();
     private final HeightProp heightProp = new HeightProp();
     private final VariantProp variantProp = new VariantProp();
+    private final DividerHeightProp dividerHeightProp = new DividerHeightProp();
 
     private final HashMap props = new HashMap<String, Prop>() {{
         put(DateProp.name, dateProp);
@@ -47,6 +49,7 @@ public class State {
         put(UtcProp.name, utcProp);
         put(HeightProp.name, heightProp);
         put(VariantProp.name, variantProp);
+        put(DividerHeightProp.name, dividerHeightProp);
     }};
     public DerivedData derived;
 
@@ -117,4 +120,7 @@ public class State {
         return variantProp.getValue();
     }
 
+    public int getDividerHeightProp() {
+        return dividerHeightProp.getValue();
+    }
 }

android/src/main/java/com/henninghall/date_picker/pickers/AndroidNative.java

@@ -77,6 +77,11 @@ public class AndroidNative extends NumberPicker implements Picker {
         return this;
     }
 
+    @Override
+    public void setDividerHeight(int height) {
+        // not supported
+    }
+    
     @Override
     public void setItemPaddingHorizontal(int padding) {
         // Not needed for this picker

android/src/main/java/com/henninghall/date_picker/pickers/Picker.java

@@ -22,6 +22,7 @@ public interface Picker {
     View getView();
     void setVisibility(int visibility);
     void setWrapSelectorWheel(boolean wrapSelectorWheel);
+    void setDividerHeight(int height);
     void setItemPaddingHorizontal(int padding);
 
     interface OnValueChangeListenerInScrolling {

android/src/main/java/com/henninghall/date_picker/props/DividerHeightProp.java

@@ -0,0 +1,12 @@
+package com.henninghall.date_picker.props;
+
+import com.facebook.react.bridge.Dynamic;
+
+public class DividerHeightProp extends Prop<Integer> {
+    public static final String name = "dividerHeight";
+
+    @Override
+    public Integer toValue(Dynamic value){
+        return value.asInt();
+    }
+}

android/src/main/java/com/henninghall/date_picker/ui/UIManager.java

@@ -7,6 +7,7 @@ import com.henninghall.date_picker.wheelFunctions.AddOnChangeListener;
 import com.henninghall.date_picker.wheelFunctions.AnimateToDate;
 import com.henninghall.date_picker.wheelFunctions.Refresh;
 import com.henninghall.date_picker.wheelFunctions.SetDate;
+import com.henninghall.date_picker.wheelFunctions.SetDividerHeight;
 import com.henninghall.date_picker.wheelFunctions.TextColor;
 import com.henninghall.date_picker.wheelFunctions.UpdateVisibility;
 import com.henninghall.date_picker.wheelFunctions.HorizontalPadding;
@@ -82,6 +83,10 @@ public class UIManager {
         wheels.applyOnAll(new AddOnChangeListener(onWheelChangeListener));
     }
 
+    public void updateDividerHeight() {
+        wheels.updateDividerHeight();
+    }
+
     public void updateWheelPadding() {
         wheels.applyOnVisible(new HorizontalPadding());
     }

android/src/main/java/com/henninghall/date_picker/ui/Wheels.java

@@ -8,6 +8,7 @@ import com.henninghall.date_picker.State;
 import com.henninghall.date_picker.Utils;
 import com.henninghall.date_picker.models.WheelType;
 import com.henninghall.date_picker.models.Mode;
+import com.henninghall.date_picker.wheelFunctions.SetDividerHeight;
 import com.henninghall.date_picker.wheelFunctions.SetShowCount;
 import com.henninghall.date_picker.wheelFunctions.WheelFunction;
 import com.henninghall.date_picker.wheels.AmPmWheel;
@@ -81,6 +82,11 @@ public class Wheels {
         applyOnAll(new SetShowCount(shownCount));
     }
 
+    void updateDividerHeight() {
+        int height = state.getDividerHeightProp();
+        applyOnAll(new SetDividerHeight(height));
+    }
+
     void updateWheelOrder() {
         pickerWrapper.removeAll();
         addInOrder();

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

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

src/index.d.ts

@@ -32,10 +32,10 @@ export interface DatePickerProps extends ViewProps {
   minuteInterval?: 1 | 2 | 3 | 4 | 5 | 6 | 10 | 12 | 15 | 20 | 30
 
   /**
-   * The Android style variant. 
+   * The Android style variant.
    */
   androidVariant?: 'iosClone' | 'nativeAndroid'
-  
+
   /**
    * The date picker mode.
    */
@@ -68,6 +68,11 @@ export interface DatePickerProps extends ViewProps {
    * Changes the text color.
    */
   textColor?: string
+
+  /**
+   * Changes the divider height of the android variant iosClone
+   */
+  dividerHeight?: number
 }
 
 export default class DatePicker extends Component<DatePickerProps> {}

src/propTypes.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 const androidProptypes = {
   fadeToColor: PropTypes.string,
   androidVariant: PropTypes.oneOf(['iosClone', 'nativeAndroid']),
+  dividerHeight: PropTypes.number,
 }
 
 const DateType = PropTypes.instanceOf(Date)