feat(android): change dialog buttons text color (#689)

* feat: android dialog buttons text color

* fix: flow

* reduce some dupes

Author: vonovak

README.md

@@ -434,23 +434,48 @@ Allows changing of the time picker to a 24-hour format. By default, this value i
 <RNDateTimePicker is24Hour={true} />
 ```
 
-#### `positiveButtonLabel` (`optional`, `Android only`)
+#### `positiveButton` (`optional`, `Android only`)
+
+Set the positive button label and text color.
+
+```js
+<RNDateTimePicker positiveButton={{label: 'OK', textColor: 'green'}} />
+```
+
+#### `neutralButton` (`optional`, `Android only`)
+
+Allows displaying neutral button on picker dialog.
+Pressing button can be observed in onChange handler as `event.type === 'neutralButtonPressed'`
+
+```js
+<RNDateTimePicker neutralButton={{label: 'Clear', textColor: 'red'}} />
+```
+
+#### `negativeButton` (`optional`, `Android only`)
+
+Set the negative button label and text color.
+
+```js
+<RNDateTimePicker negativeButton={{label: 'Cancel', textColor: 'red'}} />
+```
+
+#### `positiveButtonLabel` (`optional`, `Android only`, deprecated)
 
 Changes the label of the positive button.
 
 ```js
 <RNDateTimePicker positiveButtonLabel="OK!" />
 ```
 
-#### `negativeButtonLabel` (`optional`, `Android only`)
+#### `negativeButtonLabel` (`optional`, `Android only`, deprecated)
 
 Changes the label of the negative button.
 
 ```js
 <RNDateTimePicker positiveButtonLabel="Negative" />
 ```
 
-#### `neutralButtonLabel` (`optional`, `Android only`)
+#### `neutralButtonLabel` (`optional`, `Android only`, deprecated)
 
 Allows displaying neutral button on picker dialog.
 Pressing button can be observed in onChange handler as `event.type === 'neutralButtonPressed'`

android/src/main/java/com/reactcommunity/rndatetimepicker/Common.java

@@ -1,10 +1,10 @@
 package com.reactcommunity.rndatetimepicker;
 
 import android.app.AlertDialog;
-import android.app.DatePickerDialog;
 import android.content.Context;
 import android.content.DialogInterface;
 import android.content.res.Resources;
+import android.graphics.Color;
 import android.os.Bundle;
 import android.util.TypedValue;
 import android.widget.Button;
@@ -23,6 +23,12 @@
 
 public class Common {
 
+  public static final String POSITIVE = "positive";
+  public static final String NEUTRAL = "neutral";
+  public static final String NEGATIVE = "negative";
+  public static final String LABEL = "label";
+  public static final String TEXT_COLOR = "textColor";
+
   public static void dismissDialog(FragmentActivity activity, String fragmentTag, Promise promise) {
     if (activity == null) {
       promise.reject(
@@ -56,29 +62,51 @@ public static int getDefaultDialogButtonTextColor(@NonNull Context activity) {
 	}
 
 	@NonNull
-	public static DialogInterface.OnShowListener setButtonTextColor(@NonNull Context activityContext, final AlertDialog dialog) {
+	public static DialogInterface.OnShowListener setButtonTextColor(@NonNull Context activityContext, final AlertDialog dialog, final Bundle args, final boolean needsColorOverride) {
     return new DialogInterface.OnShowListener() {
       @Override
       public void onShow(DialogInterface dialogInterface) {
+        // change text color only if custom color is set or if spinner mode is set
+        // because spinner suffers from https://github.com/react-native-datetimepicker/datetimepicker/issues/543
+
         Button positiveButton = dialog.getButton(AlertDialog.BUTTON_POSITIVE);
         Button negativeButton = dialog.getButton(AlertDialog.BUTTON_NEGATIVE);
         Button neutralButton = dialog.getButton(AlertDialog.BUTTON_NEUTRAL);
 
         int textColorPrimary = getDefaultDialogButtonTextColor(activityContext);
-
-        if (positiveButton != null) {
-          positiveButton.setTextColor(textColorPrimary);
-        }
-        if (negativeButton != null) {
-          negativeButton.setTextColor(textColorPrimary);
-        }
-        if (neutralButton != null) {
-          neutralButton.setTextColor(textColorPrimary);
-        }
+        setTextColor(positiveButton, POSITIVE, args, needsColorOverride, textColorPrimary);
+        setTextColor(negativeButton, NEGATIVE, args, needsColorOverride, textColorPrimary);
+        setTextColor(neutralButton, NEUTRAL, args, needsColorOverride, textColorPrimary);
       }
     };
 	}
 
+  private static void setTextColor(Button button, String buttonKey, final Bundle args, final boolean needsColorOverride, int textColorPrimary) {
+    if (button == null) return;
+
+    Integer color = getButtonColor(args, buttonKey);
+    if (needsColorOverride || color != null) {
+      button.setTextColor(color != null ? color : textColorPrimary);
+    }
+  }
+
+  private static Integer getButtonColor(final Bundle args, String buttonKey) {
+    Bundle buttons = args.getBundle(RNConstants.ARG_DIALOG_BUTTONS);
+    if (buttons == null) {
+      return null;
+    }
+    Bundle buttonParams = buttons.getBundle(buttonKey);
+    if (buttonParams == null) {
+      return null;
+    }
+    // yes, this cast is safe. the color is passed as int from JS (RN.processColor)
+    int color = (int) buttonParams.getDouble(TEXT_COLOR, Color.TRANSPARENT);
+    if (color == Color.TRANSPARENT) {
+      return null;
+    }
+    return color;
+  }
+
   public static RNTimePickerDisplay getDisplayTime(Bundle args) {
     RNTimePickerDisplay display = RNTimePickerDisplay.DEFAULT;
     if (args != null && args.getString(RNConstants.ARG_DISPLAY, null) != null) {
@@ -94,4 +122,21 @@ public static RNDatePickerDisplay getDisplayDate(Bundle args) {
     }
     return display;
   }
+
+  public static void setButtonTitles(@NonNull Bundle args, AlertDialog dialog, DialogInterface.OnClickListener onNeutralButtonActionListener) {
+    Bundle buttons = args.getBundle(RNConstants.ARG_DIALOG_BUTTONS);
+    if (buttons == null) {
+      return;
+    }
+    setButtonLabel(buttons.getBundle(NEUTRAL), dialog, AlertDialog.BUTTON_NEUTRAL, onNeutralButtonActionListener);
+    setButtonLabel(buttons.getBundle(POSITIVE), dialog, AlertDialog.BUTTON_POSITIVE, (DialogInterface.OnClickListener) dialog);
+    setButtonLabel(buttons.getBundle(NEGATIVE), dialog, AlertDialog.BUTTON_NEGATIVE, (DialogInterface.OnClickListener) dialog);
+  }
+
+  private static void setButtonLabel(Bundle buttonConfig, AlertDialog dialog, int whichButton, DialogInterface.OnClickListener listener) {
+    if (buttonConfig == null || buttonConfig.getString(LABEL) == null) {
+      return;
+    }
+    dialog.setButton(whichButton, buttonConfig.getString(LABEL), listener);
+  }
 }

android/src/main/java/com/reactcommunity/rndatetimepicker/RNConstants.java

@@ -1,5 +1,7 @@
 package com.reactcommunity.rndatetimepicker;
 
+import android.app.TimePickerDialog;
+
 public final class RNConstants {
   public static final String ERROR_NO_ACTIVITY = "E_NO_ACTIVITY";
   public static final String ARG_VALUE = "value";
@@ -8,17 +10,15 @@ public final class RNConstants {
   public static final String ARG_INTERVAL = "minuteInterval";
   public static final String ARG_IS24HOUR = "is24Hour";
   public static final String ARG_DISPLAY = "display";
-  public static final String ARG_NEUTRAL_BUTTON_LABEL = "neutralButtonLabel";
-  public static final String ARG_POSITIVE_BUTTON_LABEL = "positiveButtonLabel";
-  public static final String ARG_NEGATIVE_BUTTON_LABEL = "negativeButtonLabel";
+  public static final String ARG_DIALOG_BUTTONS = "dialogButtons";
   public static final String ARG_TZOFFSET_MINS = "timeZoneOffsetInMinutes";
   public static final String ACTION_DATE_SET = "dateSetAction";
   public static final String ACTION_TIME_SET = "timeSetAction";
   public static final String ACTION_DISMISSED = "dismissedAction";
   public static final String ACTION_NEUTRAL_BUTTON = "neutralButtonAction";
 
   /**
-   * Minimum date supported by {@link DatePicker}, 01 Jan 1900
+   * Minimum date supported by {@link TimePickerDialog}, 01 Jan 1900
    */
   public static final long DEFAULT_MIN_DATE = -2208988800001l;
 

android/src/main/java/com/reactcommunity/rndatetimepicker/RNDatePickerDialogFragment.java

@@ -9,6 +9,7 @@
 
 import static com.reactcommunity.rndatetimepicker.Common.getDisplayDate;
 import static com.reactcommunity.rndatetimepicker.Common.setButtonTextColor;
+import static com.reactcommunity.rndatetimepicker.Common.setButtonTitles;
 
 import android.annotation.SuppressLint;
 import android.app.DatePickerDialog;
@@ -38,13 +39,13 @@ public class RNDatePickerDialogFragment extends DialogFragment {
   @Nullable
   private OnDismissListener mOnDismissListener;
   @Nullable
-  private static OnClickListener mOnNeutralButtonActionListener;
+  private OnClickListener mOnNeutralButtonActionListener;
 
   @NonNull
   @Override
   public Dialog onCreateDialog(Bundle savedInstanceState) {
     Bundle args = getArguments();
-    instance = createDialog(args, getActivity(), mOnDateSetListener);
+    instance = createDialog(args);
     return instance;
   }
 
@@ -91,28 +92,18 @@ DatePickerDialog getDialog(
     );
   }
 
-  static DatePickerDialog createDialog(
-          Bundle args,
-          Context activityContext,
-          @Nullable OnDateSetListener onDateSetListener) {
-
+  private DatePickerDialog createDialog(Bundle args) {
+    Context activityContext = getActivity();
     final Calendar c = Calendar.getInstance();
 
-    DatePickerDialog dialog = getDialog(args, activityContext, onDateSetListener);
+    DatePickerDialog dialog = getDialog(args, activityContext, mOnDateSetListener);
 
     if (args != null) {
-      if (args.containsKey(RNConstants.ARG_NEUTRAL_BUTTON_LABEL)) {
-        dialog.setButton(DialogInterface.BUTTON_NEUTRAL, args.getString(RNConstants.ARG_NEUTRAL_BUTTON_LABEL), mOnNeutralButtonActionListener);
-      }
-      if (args.containsKey(RNConstants.ARG_POSITIVE_BUTTON_LABEL)) {
-        dialog.setButton(DialogInterface.BUTTON_POSITIVE, args.getString(RNConstants.ARG_POSITIVE_BUTTON_LABEL), dialog);
-      }
-      if (args.containsKey(RNConstants.ARG_NEGATIVE_BUTTON_LABEL)) {
-        dialog.setButton(DialogInterface.BUTTON_NEGATIVE, args.getString(RNConstants.ARG_NEGATIVE_BUTTON_LABEL), dialog);
-      }
-      RNDatePickerDisplay display = getDisplayDate(args);
-      if (display == RNDatePickerDisplay.SPINNER) {
-        dialog.setOnShowListener(setButtonTextColor(activityContext, dialog));
+      setButtonTitles(args, dialog, mOnNeutralButtonActionListener);
+      if (activityContext != null) {
+        RNDatePickerDisplay display = getDisplayDate(args);
+        boolean needsColorOverride = display == RNDatePickerDisplay.SPINNER;
+        dialog.setOnShowListener(setButtonTextColor(activityContext, dialog, args, needsColorOverride));
       }
     }
 

android/src/main/java/com/reactcommunity/rndatetimepicker/RNDatePickerDialogModule.java

@@ -168,14 +168,8 @@ private Bundle createFragmentArguments(ReadableMap options) {
     if (options.hasKey(RNConstants.ARG_DISPLAY) && !options.isNull(RNConstants.ARG_DISPLAY)) {
       args.putString(RNConstants.ARG_DISPLAY, options.getString(RNConstants.ARG_DISPLAY));
     }
-    if (options.hasKey(RNConstants.ARG_NEUTRAL_BUTTON_LABEL) && !options.isNull(RNConstants.ARG_NEUTRAL_BUTTON_LABEL)) {
-      args.putString(RNConstants.ARG_NEUTRAL_BUTTON_LABEL, options.getString(RNConstants.ARG_NEUTRAL_BUTTON_LABEL));
-    }
-    if (options.hasKey(RNConstants.ARG_POSITIVE_BUTTON_LABEL) && !options.isNull(RNConstants.ARG_POSITIVE_BUTTON_LABEL)) {
-      args.putString(RNConstants.ARG_POSITIVE_BUTTON_LABEL, options.getString(RNConstants.ARG_POSITIVE_BUTTON_LABEL));
-    }
-    if (options.hasKey(RNConstants.ARG_NEGATIVE_BUTTON_LABEL) && !options.isNull(RNConstants.ARG_NEGATIVE_BUTTON_LABEL)) {
-      args.putString(RNConstants.ARG_NEGATIVE_BUTTON_LABEL, options.getString(RNConstants.ARG_NEGATIVE_BUTTON_LABEL));
+    if (options.hasKey(RNConstants.ARG_DIALOG_BUTTONS) && !options.isNull(RNConstants.ARG_DIALOG_BUTTONS)) {
+      args.putBundle(RNConstants.ARG_DIALOG_BUTTONS, Arguments.toBundle(options.getMap(RNConstants.ARG_DIALOG_BUTTONS)));
     }
     if (options.hasKey(RNConstants.ARG_TZOFFSET_MINS) && !options.isNull(RNConstants.ARG_TZOFFSET_MINS)) {
       args.putLong(RNConstants.ARG_TZOFFSET_MINS, (long) options.getDouble(RNConstants.ARG_TZOFFSET_MINS));

android/src/main/java/com/reactcommunity/rndatetimepicker/RNTimePickerDialogFragment.java

@@ -10,6 +10,7 @@
 
 import static com.reactcommunity.rndatetimepicker.Common.getDisplayTime;
 import static com.reactcommunity.rndatetimepicker.Common.setButtonTextColor;
+import static com.reactcommunity.rndatetimepicker.Common.setButtonTitles;
 
 import android.app.Dialog;
 import android.app.TimePickerDialog;
@@ -34,13 +35,13 @@ public class RNTimePickerDialogFragment extends DialogFragment {
   @Nullable
   private OnDismissListener mOnDismissListener;
   @Nullable
-  private static OnClickListener mOnNeutralButtonActionListener;
+  private OnClickListener mOnNeutralButtonActionListener;
 
   @NonNull
   @Override
   public Dialog onCreateDialog(Bundle savedInstanceState) {
     final Bundle args = getArguments();
-    instance = createDialog(args, getActivity(), mOnTimeSetListener);
+    instance = createDialog(args);
     return instance;
   }
 
@@ -92,25 +93,16 @@ static TimePickerDialog getDialog(
     );
   }
 
-  static TimePickerDialog createDialog(
-          Bundle args, Context activityContext,
-          @Nullable OnTimeSetListener onTimeSetListener) {
-
-    TimePickerDialog dialog = getDialog(args, activityContext, onTimeSetListener);
+  private TimePickerDialog createDialog(Bundle args) {
+    Context activityContext = getActivity();
+    TimePickerDialog dialog = getDialog(args, activityContext, mOnTimeSetListener);
 
     if (args != null) {
-      if (args.containsKey(RNConstants.ARG_NEUTRAL_BUTTON_LABEL)) {
-        dialog.setButton(DialogInterface.BUTTON_NEUTRAL, args.getString(RNConstants.ARG_NEUTRAL_BUTTON_LABEL), mOnNeutralButtonActionListener);
-      }
-      if (args.containsKey(RNConstants.ARG_POSITIVE_BUTTON_LABEL)) {
-        dialog.setButton(DialogInterface.BUTTON_POSITIVE, args.getString(RNConstants.ARG_POSITIVE_BUTTON_LABEL), dialog);
-      }
-      if (args.containsKey(RNConstants.ARG_NEGATIVE_BUTTON_LABEL)) {
-        dialog.setButton(DialogInterface.BUTTON_NEGATIVE, args.getString(RNConstants.ARG_NEGATIVE_BUTTON_LABEL), dialog);
-      }
-      RNTimePickerDisplay display = getDisplayTime(args);
-      if (display == RNTimePickerDisplay.SPINNER) {
-        dialog.setOnShowListener(setButtonTextColor(activityContext, dialog));
+      setButtonTitles(args, dialog, mOnNeutralButtonActionListener);
+      if (activityContext != null) {
+        RNTimePickerDisplay display = getDisplayTime(args);
+        boolean needsColorOverride = display == RNTimePickerDisplay.SPINNER;
+        dialog.setOnShowListener(setButtonTextColor(activityContext, dialog, args, needsColorOverride));
       }
     }
     return dialog;

android/src/main/java/com/reactcommunity/rndatetimepicker/RNTimePickerDialogModule.java

@@ -144,14 +144,8 @@ private Bundle createFragmentArguments(ReadableMap options) {
     if (options.hasKey(RNConstants.ARG_DISPLAY) && !options.isNull(RNConstants.ARG_DISPLAY)) {
       args.putString(RNConstants.ARG_DISPLAY, options.getString(RNConstants.ARG_DISPLAY));
     }
-    if (options.hasKey(RNConstants.ARG_NEUTRAL_BUTTON_LABEL) && !options.isNull(RNConstants.ARG_NEUTRAL_BUTTON_LABEL)) {
-      args.putString(RNConstants.ARG_NEUTRAL_BUTTON_LABEL, options.getString(RNConstants.ARG_NEUTRAL_BUTTON_LABEL));
-    }
-    if (options.hasKey(RNConstants.ARG_POSITIVE_BUTTON_LABEL) && !options.isNull(RNConstants.ARG_POSITIVE_BUTTON_LABEL)) {
-      args.putString(RNConstants.ARG_POSITIVE_BUTTON_LABEL, options.getString(RNConstants.ARG_POSITIVE_BUTTON_LABEL));
-    }
-    if (options.hasKey(RNConstants.ARG_NEGATIVE_BUTTON_LABEL) && !options.isNull(RNConstants.ARG_NEGATIVE_BUTTON_LABEL)) {
-      args.putString(RNConstants.ARG_NEGATIVE_BUTTON_LABEL, options.getString(RNConstants.ARG_NEGATIVE_BUTTON_LABEL));
+    if (options.hasKey(RNConstants.ARG_DIALOG_BUTTONS) && !options.isNull(RNConstants.ARG_DIALOG_BUTTONS)) {
+      args.putBundle(RNConstants.ARG_DIALOG_BUTTONS, Arguments.toBundle(options.getMap(RNConstants.ARG_DIALOG_BUTTONS)));
     }
     if (options.hasKey(RNConstants.ARG_INTERVAL) && !options.isNull(RNConstants.ARG_INTERVAL)) {
       args.putInt(RNConstants.ARG_INTERVAL, options.getInt(RNConstants.ARG_INTERVAL));

example/App.js

@@ -96,7 +96,6 @@ export const App = () => {
   };
 
   const onChange = (event, selectedDate) => {
-    const currentDate = selectedDate || date;
     if (Platform.OS === 'android') {
       setShow(false);
     }
@@ -117,7 +116,7 @@ export const App = () => {
     if (event.type === 'neutralButtonPressed') {
       setDate(new Date(0));
     } else {
-      setDate(currentDate);
+      setDate(selectedDate);
     }
   };
 
@@ -353,7 +352,8 @@ export const App = () => {
                   onChange={onChange}
                   textColor={textColor || undefined}
                   accentColor={accentColor || undefined}
-                  neutralButtonLabel={neutralButtonLabel}
+                  neutralButton={{label: neutralButtonLabel}}
+                  negativeButton={{label: 'Cancel', textColor: 'red'}}
                   disabled={disabled}
                 />
               )}

example/android/build.gradle

@@ -18,7 +18,14 @@ buildscript {
     }
 }
 
+def REACT_NATIVE_VERSION = new File(['node', '--print',"JSON.parse(require('fs').readFileSync(require.resolve('react-native/package.json'), 'utf-8')).version"].execute(null, rootDir).text.trim())
+
 allprojects {
+    configurations.all {
+      resolutionStrategy {
+        force "com.facebook.react:react-native:" + REACT_NATIVE_VERSION
+      }
+    }
     repositories {
         maven {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm