fix undefined colors on litho components

Summary:
When a color was changed on a litho component, the changes were made, but the display in Flipper's layout sidebar always showed `rgba(0,0,0,0)` as a color. This was because reading the color failed for `ComparableColorDrawable` and it sent `0` as fallback value.

This diff adds an additional check if the value is an instance of `ComparableColorDrawable` and reads the color from it.

Reviewed By: passy

Differential Revision: D15469093

fbshipit-source-id: 7f1aaf1c4981815605aca5ba735fa09e80deaa42
This commit is contained in:
Daniel Büchele
2019-05-29 09:16:24 -07:00
committed by Facebook Github Bot
parent b78fb88dd7
commit 53b852dbe6
2 changed files with 11 additions and 5 deletions

View File

@@ -16,6 +16,7 @@ import com.facebook.flipper.plugins.inspector.Named;
import com.facebook.litho.StateContainer; import com.facebook.litho.StateContainer;
import com.facebook.litho.annotations.Prop; import com.facebook.litho.annotations.Prop;
import com.facebook.litho.annotations.State; import com.facebook.litho.annotations.State;
import com.facebook.litho.drawable.ComparableColorDrawable;
import java.lang.reflect.Field; import java.lang.reflect.Field;
import java.util.AbstractMap; import java.util.AbstractMap;
import java.util.ArrayList; import java.util.ArrayList;
@@ -51,7 +52,8 @@ public class DataUtils {
props.put(f.getName(), f.get(node) == null ? "null" : fromColor((Integer) f.get(node))); props.put(f.getName(), f.get(node) == null ? "null" : fromColor((Integer) f.get(node)));
break; break;
case DRAWABLE: case DRAWABLE:
props.put(f.getName(), f.get(node) == null ? "null" : fromDrawable((Drawable) f.get(node))); props.put(
f.getName(), f.get(node) == null ? "null" : fromDrawable((Drawable) f.get(node)));
break; break;
default: default:
if (f.get(node) != null if (f.get(node) != null
@@ -133,11 +135,13 @@ public class DataUtils {
} }
static com.facebook.flipper.plugins.inspector.InspectorValue fromDrawable(Drawable d) { static com.facebook.flipper.plugins.inspector.InspectorValue fromDrawable(Drawable d) {
int color = 0;
if (d instanceof ColorDrawable) { if (d instanceof ColorDrawable) {
return com.facebook.flipper.plugins.inspector.InspectorValue.mutable( color = ((ColorDrawable) d).getColor();
Color, ((ColorDrawable) d).getColor()); } else if (d instanceof ComparableColorDrawable) {
color = ((ComparableColorDrawable) d).getColor();
} }
return com.facebook.flipper.plugins.inspector.InspectorValue.mutable(Color, 0); return com.facebook.flipper.plugins.inspector.InspectorValue.mutable(Color, color);
} }
static com.facebook.flipper.plugins.inspector.InspectorValue fromColor(int color) { static com.facebook.flipper.plugins.inspector.InspectorValue fromColor(int color) {

View File

@@ -447,7 +447,9 @@ class DataDescriptionContainer extends Component<{
case 'color': { case 'color': {
const colorInfo = parseColor(val); const colorInfo = parseColor(val);
if (colorInfo) { if (typeof val === 'number' && val === 0) {
return <UndefinedValue>(not set)</UndefinedValue>;
} else if (colorInfo) {
const {a, b, g, r} = colorInfo; const {a, b, g, r} = colorInfo;
return [ return [
<ColorBox key="color-box" color={`rgba(${r}, ${g}, ${b}, ${a})`} />, <ColorBox key="color-box" color={`rgba(${r}, ${g}, ${b}, ${a})`} />,