Unify native props

Summary: Unify native props for Switch

Reviewed By: TheSavior, mdvacca

Differential Revision: D13563403

fbshipit-source-id: d219febf197bd024d1ef2acda9f42e40bdf39532
This commit is contained in:
Luna Wei 2019-01-07 15:36:33 -08:00 committed by Facebook Github Bot
parent 00905ab8f7
commit b5e6ae0fc4
4 changed files with 95 additions and 19 deletions

View File

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

View File

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

View File

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

View File

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