Unify native props

Summary: Unify native props for Switch

Reviewed By: TheSavior, mdvacca

Differential Revision: D13563403

fbshipit-source-id: d219febf197bd024d1ef2acda9f42e40bdf39532

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<

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

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);
+    }
+  }
 }

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<ReactSwitch> {
     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<ReactSwitch> {
 
   @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