From b5e6ae0fc4e1a2010f68feafc9c329017e27faec Mon Sep 17 00:00:00 2001 From: Luna Wei Date: Mon, 7 Jan 2019 15:36:33 -0800 Subject: [PATCH] Unify native props Summary: Unify native props for Switch Reviewed By: TheSavior, mdvacca Differential Revision: D13563403 fbshipit-source-id: d219febf197bd024d1ef2acda9f42e40bdf39532 --- .../Switch/SwitchNativeComponent.js | 20 +++++--- React/Views/RCTSwitchManager.m | 3 ++ .../react/views/switchview/ReactSwitch.java | 47 +++++++++++++++++++ .../views/switchview/ReactSwitchManager.java | 44 ++++++++++++----- 4 files changed, 95 insertions(+), 19 deletions(-) diff --git a/Libraries/Components/Switch/SwitchNativeComponent.js b/Libraries/Components/Switch/SwitchNativeComponent.js index 4b43fc3e96c..fd46bf64ea2 100644 --- a/Libraries/Components/Switch/SwitchNativeComponent.js +++ b/Libraries/Components/Switch/SwitchNativeComponent.js @@ -18,25 +18,33 @@ const requireNativeComponent = require('requireNativeComponent'); import type {SwitchChangeEvent} from 'CoreEventTypes'; import type {ViewProps} from 'ViewPropTypes'; +type SwitchProps = $ReadOnly<{| + ...ViewProps, + disabled?: ?boolean, + onChange?: ?(event: SwitchChangeEvent) => mixed, + thumbColor?: ?string, + trackColorForFalse?: ?string, + trackColorForTrue?: ?string, + value?: ?boolean, +|}>; + // @see ReactSwitchManager.java export type NativeAndroidProps = $ReadOnly<{| - ...ViewProps, + ...SwitchProps, + enabled?: ?boolean, on?: ?boolean, - onChange?: ?(event: SwitchChangeEvent) => mixed, thumbTintColor?: ?string, trackTintColor?: ?string, |}>; // @see RCTSwitchManager.m export type NativeIOSProps = $ReadOnly<{| - ...ViewProps, - disabled?: ?boolean, - onChange?: ?(event: SwitchChangeEvent) => mixed, + ...SwitchProps, + onTintColor?: ?string, thumbTintColor?: ?string, tintColor?: ?string, - value?: ?boolean, |}>; type SwitchNativeComponentType = Class< diff --git a/React/Views/RCTSwitchManager.m b/React/Views/RCTSwitchManager.m index 8edcea2a26f..0aa33fbafb0 100644 --- a/React/Views/RCTSwitchManager.m +++ b/React/Views/RCTSwitchManager.m @@ -48,5 +48,8 @@ RCT_CUSTOM_VIEW_PROPERTY(disabled, BOOL, RCTSwitch) view.enabled = defaultView.enabled; } } +RCT_REMAP_VIEW_PROPERTY(thumbColor, thumbTintColor, UIColor); +RCT_REMAP_VIEW_PROPERTY(trackColorForFalse, tintColor, UIColor); +RCT_REMAP_VIEW_PROPERTY(trackColorForTrue, onTintColor, UIColor); @end diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitch.java b/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitch.java index 7dd9f3d0e19..64d0d444816 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitch.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitch.java @@ -8,7 +8,10 @@ package com.facebook.react.views.switchview; import android.content.Context; +import android.graphics.PorterDuff; +import android.graphics.drawable.Drawable; import android.support.v7.widget.SwitchCompat; +import javax.annotation.Nullable; /** * Switch that has its value controlled by JS. Whenever the value of the switch changes, we do not @@ -18,10 +21,14 @@ import android.support.v7.widget.SwitchCompat; /*package*/ class ReactSwitch extends SwitchCompat { private boolean mAllowChange; + @Nullable private Integer mTrackColorForFalse; + @Nullable private Integer mTrackColorForTrue; public ReactSwitch(Context context) { super(context); mAllowChange = true; + mTrackColorForFalse = null; + mTrackColorForTrue = null; } @Override @@ -32,11 +39,51 @@ import android.support.v7.widget.SwitchCompat; } } + void setColor(Drawable drawable, @Nullable Integer color) { + if (color == null) { + drawable.clearColorFilter(); + } else { + drawable.setColorFilter(color, PorterDuff.Mode.MULTIPLY); + } + } + + public void setTrackColor(@Nullable Integer color) { + setColor(super.getTrackDrawable(), color); + } + + public void setThumbColor(@Nullable Integer color) { + setColor(super.getThumbDrawable(), color); + } + /*package*/ void setOn(boolean on) { // If the switch has a different value than the value sent by JS, we must change it. if (isChecked() != on) { super.setChecked(on); + Integer currentTrackColor = on ? mTrackColorForTrue : mTrackColorForFalse; + setTrackColor(currentTrackColor); } mAllowChange = true; } + + public void setTrackColorForTrue(@Nullable Integer color) { + if (color == mTrackColorForTrue) { + return; + } + + mTrackColorForTrue = color; + if (isChecked()) { + setTrackColor(mTrackColorForTrue); + } + } + + public void setTrackColorForFalse(@Nullable Integer color) { + if (color == mTrackColorForFalse) { + return; + } + + mTrackColorForFalse = color; + if (!isChecked()) { + setTrackColor(mTrackColorForFalse); + } + } } diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitchManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitchManager.java index ead1d5acccd..87f779d9367 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitchManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitchManager.java @@ -25,6 +25,7 @@ import com.facebook.yoga.YogaMeasureFunction; import com.facebook.yoga.YogaMeasureMode; import com.facebook.yoga.YogaMeasureOutput; import com.facebook.yoga.YogaNode; +import javax.annotation.Nullable; /** * View manager for {@link ReactSwitch} components. @@ -108,6 +109,11 @@ public class ReactSwitchManager extends SimpleViewManager { return view; } + @ReactProp(name = "disabled", defaultBoolean = false) + public void setDisabled(ReactSwitch view, boolean disabled) { + view.setEnabled(!disabled); + } + @ReactProp(name = ViewProps.ENABLED, defaultBoolean = true) public void setEnabled(ReactSwitch view, boolean enabled) { view.setEnabled(enabled); @@ -115,29 +121,41 @@ public class ReactSwitchManager extends SimpleViewManager { @ReactProp(name = ViewProps.ON) public void setOn(ReactSwitch view, boolean on) { + this.setValue(view, on); + } + + @ReactProp(name = "value") + public void setValue(ReactSwitch view, boolean value) { // we set the checked change listener to null and then restore it so that we don't fire an // onChange event to JS when JS itself is updating the value of the switch view.setOnCheckedChangeListener(null); - view.setOn(on); + view.setOn(value); view.setOnCheckedChangeListener(ON_CHECKED_CHANGE_LISTENER); } @ReactProp(name = "thumbTintColor", customType = "Color") - public void setThumbTintColor(ReactSwitch view, Integer color) { - if (color == null) { - view.getThumbDrawable().clearColorFilter(); - } else { - view.getThumbDrawable().setColorFilter(color, PorterDuff.Mode.MULTIPLY); - } + public void setThumbTintColor(ReactSwitch view, @Nullable Integer color) { + this.setThumbColor(view, color); + } + + @ReactProp(name = "thumbColor", customType = "Color") + public void setThumbColor(ReactSwitch view, @Nullable Integer color) { + view.setThumbColor(color); + } + + @ReactProp(name = "trackColorForFalse", customType = "Color") + public void setTrackColorForFalse(ReactSwitch view, @Nullable Integer color) { + view.setTrackColorForFalse(color); + } + + @ReactProp(name = "trackColorForTrue", customType = "Color") + public void setTrackColorForTrue(ReactSwitch view, @Nullable Integer color) { + view.setTrackColorForTrue(color); } @ReactProp(name = "trackTintColor", customType = "Color") - public void setTrackTintColor(ReactSwitch view, Integer color) { - if (color == null) { - view.getTrackDrawable().clearColorFilter(); - } else { - view.getTrackDrawable().setColorFilter(color, PorterDuff.Mode.MULTIPLY); - } + public void setTrackTintColor(ReactSwitch view, @Nullable Integer color) { + view.setTrackColor(color); } @Override