fix(android): bring back parent dialog theme (#680)

vonovak · web-flow · commit 53703fa1c49c · 2022-10-26T17:11:46.000+02:00
* fix(android): bring back parent Dialog theme

* refactor setButtonTextColor

* remove clock and calendar styles
diff --git a/android/src/main/java/com/reactcommunity/rndatetimepicker/Common.java b/android/src/main/java/com/reactcommunity/rndatetimepicker/Common.java
@@ -1,5 +1,17 @@
 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.util.TypedValue;
+import android.widget.Button;
+
+import androidx.annotation.ColorInt;
+import androidx.annotation.ColorRes;
+import androidx.annotation.NonNull;
+import androidx.core.content.ContextCompat;
 import androidx.fragment.app.DialogFragment;
 import androidx.fragment.app.FragmentActivity;
 import androidx.fragment.app.FragmentManager;
@@ -30,4 +42,32 @@ public static void dismissDialog(FragmentActivity activity, String fragmentTag,
       promise.reject(e);
     }
   }
+
+	public static int getDefaultDialogButtonTextColor(@NonNull Context activity) {
+		TypedValue typedValue = new TypedValue();
+		Resources.Theme theme = activity.getTheme();
+		theme.resolveAttribute(android.R.attr.textColorPrimary, typedValue, true);
+		@ColorRes int colorRes = (typedValue.resourceId != 0) ? typedValue.resourceId : typedValue.data;
+		@ColorInt int colorId = ContextCompat.getColor(activity, colorRes);
+		return colorId;
+	}
+
+	@NonNull
+	public static DialogInterface.OnShowListener setButtonTextColor(@NonNull Context activityContext, final AlertDialog dialog) {
+		return presentedDialog -> {
+			int textColorPrimary = getDefaultDialogButtonTextColor(activityContext);
+			Button positiveButton = dialog.getButton(DatePickerDialog.BUTTON_POSITIVE);
+			if (positiveButton != null) {
+				positiveButton.setTextColor(textColorPrimary);
+			}
+			Button negativeButton = dialog.getButton(DatePickerDialog.BUTTON_NEGATIVE);
+			if (negativeButton != null) {
+				negativeButton.setTextColor(textColorPrimary);
+			}
+			Button neutralButton = dialog.getButton(DatePickerDialog.BUTTON_NEUTRAL);
+			if (neutralButton != null) {
+				neutralButton.setTextColor(textColorPrimary);
+			}
+		};
+	}
 }
diff --git a/android/src/main/java/com/reactcommunity/rndatetimepicker/MinuteIntervalSnappableTimePickerDialog.java b/android/src/main/java/com/reactcommunity/rndatetimepicker/MinuteIntervalSnappableTimePickerDialog.java
@@ -34,7 +34,6 @@ public MinuteIntervalSnappableTimePickerDialog(
             RNTimePickerDisplay display
     ) {
         super(context, listener, hourOfDay, minute, is24HourView);
-		setCanceledOnTouchOutside(true);
         mTimePickerInterval = minuteInterval;
         mTimeSetListener = listener;
         mDisplay = display;
@@ -52,7 +51,6 @@ public MinuteIntervalSnappableTimePickerDialog(
             RNTimePickerDisplay display
     ) {
         super(context, theme, listener, hourOfDay, minute, is24HourView);
-		setCanceledOnTouchOutside(true);
         mTimePickerInterval = minuteInterval;
         mTimeSetListener = listener;
         mDisplay = display;
diff --git a/android/src/main/java/com/reactcommunity/rndatetimepicker/RNDatePickerDialogFragment.java b/android/src/main/java/com/reactcommunity/rndatetimepicker/RNDatePickerDialogFragment.java
@@ -7,6 +7,8 @@
 
 package com.reactcommunity.rndatetimepicker;
 
+import static com.reactcommunity.rndatetimepicker.Common.setButtonTextColor;
+
 import android.annotation.SuppressLint;
 import android.app.DatePickerDialog;
 import android.app.DatePickerDialog.OnDateSetListener;
@@ -15,7 +17,6 @@
 import android.content.DialogInterface;
 import android.content.DialogInterface.OnDismissListener;
 import android.content.DialogInterface.OnClickListener;
-import android.os.Build;
 import android.os.Bundle;
 
 import androidx.annotation.NonNull;
@@ -68,14 +69,10 @@ DatePickerDialog getDialog(
     }
 
     switch (display) {
-      case CALENDAR:
       case SPINNER:
-        int theme = display == RNDatePickerDisplay.CALENDAR
-                ? R.style.CalendarDatePickerDialog
-                : R.style.SpinnerDatePickerDialog;
         return new RNDismissableDatePickerDialog(
                 activityContext,
-                theme,
+				R.style.SpinnerDatePickerDialog,
                 onDateSetListener,
                 year,
                 month,
@@ -114,6 +111,7 @@ static DatePickerDialog createDialog(
     }
 
     final DatePicker datePicker = dialog.getDatePicker();
+	dialog.setOnShowListener(setButtonTextColor(activityContext, dialog));
 
     Integer timeZoneOffsetInMilliseconds = getTimeZoneOffset(args);
     if (timeZoneOffsetInMilliseconds != null) {
diff --git a/android/src/main/java/com/reactcommunity/rndatetimepicker/RNDatePickerDisplay.java b/android/src/main/java/com/reactcommunity/rndatetimepicker/RNDatePickerDisplay.java
@@ -11,7 +11,6 @@
  * Date picker display options.
  */
 public enum RNDatePickerDisplay {
-  CALENDAR,
   SPINNER,
   DEFAULT
 }
diff --git a/android/src/main/java/com/reactcommunity/rndatetimepicker/RNDismissableDatePickerDialog.java b/android/src/main/java/com/reactcommunity/rndatetimepicker/RNDismissableDatePickerDialog.java
@@ -40,7 +40,6 @@ public RNDismissableDatePickerDialog(
       int dayOfMonth,
       RNDatePickerDisplay display) {
     super(context, callback, year, monthOfYear, dayOfMonth);
-	setCanceledOnTouchOutside(true);
     fixSpinner(context, year, monthOfYear, dayOfMonth, display);
   }
 
@@ -53,7 +52,6 @@ public RNDismissableDatePickerDialog(
       int dayOfMonth,
       RNDatePickerDisplay display) {
     super(context, theme, callback, year, monthOfYear, dayOfMonth);
-	setCanceledOnTouchOutside(true);
     fixSpinner(context, year, monthOfYear, dayOfMonth, display);
   }
 
diff --git a/android/src/main/java/com/reactcommunity/rndatetimepicker/RNTimePickerDialogFragment.java b/android/src/main/java/com/reactcommunity/rndatetimepicker/RNTimePickerDialogFragment.java
@@ -8,6 +8,8 @@
 
 package com.reactcommunity.rndatetimepicker;
 
+import static com.reactcommunity.rndatetimepicker.Common.setButtonTextColor;
+
 import android.app.Dialog;
 import android.app.TimePickerDialog;
 import android.app.TimePickerDialog.OnTimeSetListener;
@@ -72,13 +74,10 @@ static TimePickerDialog getDialog(
       is24hour = args.getBoolean(RNConstants.ARG_IS24HOUR, DateFormat.is24HourFormat(activityContext));
     }
 
-    if (display == RNTimePickerDisplay.CLOCK || display == RNTimePickerDisplay.SPINNER) {
-        int theme = display == RNTimePickerDisplay.CLOCK
-              ? R.style.ClockTimePickerDialog
-              : R.style.SpinnerTimePickerDialog;
+    if (display == RNTimePickerDisplay.SPINNER) {
         return new RNDismissableTimePickerDialog(
                 activityContext,
-                theme,
+				R.style.SpinnerTimePickerDialog,
                 onTimeSetListener,
                 hour,
                 minute,
@@ -113,6 +112,7 @@ static TimePickerDialog createDialog(
     if (args != null && args.containsKey(RNConstants.ARG_NEGATIVE_BUTTON_LABEL)) {
       dialog.setButton(DialogInterface.BUTTON_NEGATIVE, args.getString(RNConstants.ARG_NEGATIVE_BUTTON_LABEL), dialog);
     }
+	dialog.setOnShowListener(setButtonTextColor(activityContext, dialog));
     return dialog;
   }
 
diff --git a/android/src/main/java/com/reactcommunity/rndatetimepicker/RNTimePickerDisplay.java b/android/src/main/java/com/reactcommunity/rndatetimepicker/RNTimePickerDisplay.java
@@ -12,7 +12,6 @@
  * Date picker display options.
  */
 public enum RNTimePickerDisplay {
-  CLOCK,
   SPINNER,
   DEFAULT
 }
diff --git a/android/src/main/res/values-night/styles.xml b/android/src/main/res/values-night/styles.xml
@@ -1,9 +1,12 @@
 <resources xmlns:tools="http://schemas.android.com/tools">
+
+	<!-- color from https://m1.material.io/style/color.html#color-themes -->
 	<style name="SpinnerDatePickerDialog" parent="SpinnerDatePickerDialogBase">
-		<item name="colorPrimary">@android:color/white</item>
+		<item name="android:windowBackground">#424242</item>
 	</style>
 
 	<style name="SpinnerTimePickerDialog" parent="SpinnerTimePickerDialogBase">
-		<item name="colorPrimary">@android:color/white</item>
+		<item name="android:windowBackground">#424242</item>
 	</style>
+
 </resources>
diff --git a/android/src/main/res/values/styles.xml b/android/src/main/res/values/styles.xml
@@ -1,34 +1,15 @@
 <resources xmlns:tools="http://schemas.android.com/tools">
-    <style name="SpinnerDatePickerDialogBase" tools:targetApi="lollipop">
+    <style name="SpinnerDatePickerDialogBase" parent="Theme.AppCompat.DayNight.Dialog" tools:targetApi="lollipop">
         <item name="android:datePickerStyle">@style/SpinnerDatePickerStyle</item>
-		<item name="android:windowIsFloating">true</item>
     </style>
     <style name="SpinnerDatePickerDialog" parent="SpinnerDatePickerDialogBase" />
 
     <style name="SpinnerDatePickerStyle" parent="android:Widget.Material.DatePicker" tools:targetApi="lollipop">
         <item name="android:datePickerMode">spinner</item>
     </style>
 
-    <style name="CalendarDatePickerDialog" parent="Theme.AppCompat.Light.Dialog" tools:targetApi="lollipop">
-        <item name="android:datePickerStyle">@style/CalendarDatePickerStyle</item>
-    </style>
-
-    <style name="CalendarDatePickerStyle" parent="android:Widget.Material.Light.DatePicker" tools:targetApi="lollipop">
-        <item name="android:datePickerMode">calendar</item>
-    </style>
-
-
-    <style name="ClockTimePickerDialog" parent="Theme.AppCompat.Light.Dialog" tools:targetApi="lollipop">
-        <item name="android:timePickerStyle">@style/ClockTimePickerStyle</item>
-    </style>
-
-    <style name="ClockTimePickerStyle" parent="android:Widget.Material.Light.TimePicker" tools:targetApi="lollipop">
-        <item name="android:timePickerMode">clock</item>
-    </style>
-
-    <style name="SpinnerTimePickerDialogBase" tools:targetApi="lollipop">
+    <style name="SpinnerTimePickerDialogBase" parent="Theme.AppCompat.DayNight.Dialog" tools:targetApi="lollipop">
         <item name="android:timePickerStyle">@style/SpinnerTimePickerStyle</item>
-		<item name="android:windowIsFloating">true</item>
     </style>
 	<style name="SpinnerTimePickerDialog" parent="SpinnerTimePickerDialogBase" />
 
diff --git a/src/DateTimePickerAndroid.android.js b/src/DateTimePickerAndroid.android.js
@@ -28,7 +28,7 @@ import {
 function open(props: AndroidNativeProps) {
   const {
     mode = ANDROID_MODE.date,
-    display = ANDROID_DISPLAY.default,
+    display,
     value: originalValue,
     is24Hour,
     minimumDate,
@@ -49,9 +49,13 @@ function open(props: AndroidNativeProps) {
 
   const presentPicker = async () => {
     try {
+      const displayOverride =
+        display === ANDROID_DISPLAY.spinner
+          ? ANDROID_DISPLAY.spinner
+          : ANDROID_DISPLAY.default;
       const {action, day, month, year, minute, hour} = await openPicker({
         value: valueTimestamp,
-        display,
+        display: displayOverride,
         is24Hour,
         minimumDate,
         maximumDate,
diff --git a/src/constants.js b/src/constants.js
@@ -7,6 +7,8 @@ export const MIN_MS = 60000;
 export const ANDROID_DISPLAY = Object.freeze({
   default: 'default',
   spinner: 'spinner',
+
+  // NOTE: the following are exposed, but the native module instead uses "default"
   clock: 'clock',
   calendar: 'calendar',
 });

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,6 @@`
`11`	`11`	`* Date picker display options.`
`12`	`12`	`*/`
`13`	`13`	`public enum RNDatePickerDisplay {`
`14`		`- CALENDAR,`
`15`	`14`	`SPINNER,`
`16`	`15`	`DEFAULT`
`17`	`16`	`}`
Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,6 @@ public RNDismissableDatePickerDialog(`
`40`	`40`	`int dayOfMonth,`
`41`	`41`	`RNDatePickerDisplay display) {`
`42`	`42`	`super(context, callback, year, monthOfYear, dayOfMonth);`
`43`		`- setCanceledOnTouchOutside(true);`
`44`	`43`	`fixSpinner(context, year, monthOfYear, dayOfMonth, display);`
`45`	`44`	`}`
`46`	`45`
`@@ -53,7 +52,6 @@ public RNDismissableDatePickerDialog(`
`53`	`52`	`int dayOfMonth,`
`54`	`53`	`RNDatePickerDisplay display) {`
`55`	`54`	`super(context, theme, callback, year, monthOfYear, dayOfMonth);`
`56`		`- setCanceledOnTouchOutside(true);`
`57`	`55`	`fixSpinner(context, year, monthOfYear, dayOfMonth, display);`
`58`	`56`	`}`
`59`	`57`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,6 @@`
`12`	`12`	`* Date picker display options.`
`13`	`13`	`*/`
`14`	`14`	`public enum RNTimePickerDisplay {`
`15`		`- CLOCK,`
`16`	`15`	`SPINNER,`
`17`	`16`	`DEFAULT`
`18`	`17`	`}`