Skip to content
Permalink
Browse files
RN picker - implement background color
Summary:
add support to the android implementation of the Picker component for setting the background color.

Changelog: [Android] [Added] - Support item background color in Dialog Picker

Differential Revision: D20566131

fbshipit-source-id: d693b40803fa1051ec955c5728994c820fecd9e9
  • Loading branch information
Eddie Dugan authored and facebook-github-bot committed Mar 23, 2020
1 parent 327fbd0 commit 22eb711c84587ac92da97e486fecaa79424fa925
Show file tree
Hide file tree
Showing 9 changed files with 47 additions and 0 deletions.
@@ -41,6 +41,7 @@ type NativeProps = $ReadOnly<{|

// Props
color?: ?ColorValue,
backgroundColor?: ?ColorValue,
enabled?: WithDefault<boolean, true>,
items: $ReadOnlyArray<PickerItem>,
prompt?: WithDefault<string, ''>,
@@ -41,6 +41,7 @@ type NativeProps = $ReadOnly<{|

// Props
color?: ?ColorValue,
backgroundColor?: ?ColorValue,
enabled?: WithDefault<boolean, true>,
items: $ReadOnlyArray<PickerItem>,
prompt?: WithDefault<string, ''>,
@@ -96,6 +96,12 @@ type PickerProps = $ReadOnly<{|
*/
itemStyle?: ?TextStyleProp,

/**
* Color of the item background.
* @platform android
*/
backgroundColor?: ColorValue,

/**
* Prompt string for this picker, used on Android in dialog mode as the title of the dialog.
* @platform android
@@ -21,6 +21,7 @@ import StyleSheet from '../../StyleSheet/StyleSheet';
import invariant from 'invariant';
import processColor from '../../StyleSheet/processColor';

import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
import type {SyntheticEvent} from '../../Types/CoreEventTypes';
import type {TextStyleProp} from '../../StyleSheet/StyleSheet';

@@ -36,6 +37,7 @@ type Props = $ReadOnly<{|
accessibilityLabel?: ?Stringish,
children?: React.Node,
style?: ?TextStyleProp,
backgroundColor?: ?ColorValue,
selectedValue?: ?PickerItemValue,
enabled?: ?boolean,
mode?: ?('dialog' | 'dropdown'),
@@ -123,6 +125,7 @@ function PickerAndroid(props: Props): React.Node {
styles.pickerAndroid,
props.style,
),
backgroundColor: props.backgroundColor,
testID: props.testID,
};
return props.mode === 'dropdown' ? (
@@ -26,6 +26,9 @@ public void setProperty(T view, String propName, @Nullable Object value) {
case "color":
mViewManager.setColor(view, value == null ? null : ((Double) value).intValue());
break;
case "backgroundColor":
mViewManager.setBackgroundColor(view, value == null ? null : ((Double) value).intValue());
break;
case "enabled":
mViewManager.setEnabled(view, value == null ? true : (boolean) value);
break;
@@ -15,6 +15,7 @@

public interface AndroidDialogPickerManagerInterface<T extends View> {
void setColor(T view, @Nullable Integer value);
void setBackgroundColor(T view, @Nullable int value);
void setEnabled(T view, boolean value);
void setItems(T view, @Nullable ReadableArray value);
void setPrompt(T view, @Nullable String value);
@@ -8,6 +8,7 @@
package com.facebook.react.views.picker;

import android.widget.Spinner;
import androidx.annotation.NonNull;
import com.facebook.react.module.annotations.ReactModule;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.ViewManagerDelegate;
@@ -41,4 +42,9 @@ protected ReactPicker createViewInstance(ThemedReactContext reactContext) {
protected ViewManagerDelegate<ReactPicker> getDelegate() {
return mDelegate;
}

@Override
public void setBackgroundColor(@NonNull ReactPicker view, int backgroundColor) {
view.setStagedBackgroundColor(backgroundColor);
}
}
@@ -25,6 +25,7 @@ public class ReactPicker extends AppCompatSpinner {
private @Nullable List<ReactPickerItem> mStagedItems;
private @Nullable Integer mStagedSelection;
private @Nullable Integer mStagedPrimaryTextColor;
private @Nullable Integer mStagedBackgroundColor;

private final OnItemSelectedListener mItemSelectedListener =
new OnItemSelectedListener() {
@@ -136,6 +137,10 @@ public OnSelectListener getOnSelectListener() {
mStagedPrimaryTextColor = primaryColor;
}

/* package */ void setStagedBackgroundColor(@Nullable Integer backgroundColor) {
mStagedBackgroundColor = backgroundColor;
}

/**
* Used to commit staged data into ReactPicker view. During this period, we will disable {@link
* OnSelectListener#onItemSelected(int)} temporarily, so we don't get an event when changing the
@@ -171,6 +176,13 @@ public OnSelectListener getOnSelectListener() {
mStagedPrimaryTextColor = null;
}

if (mStagedBackgroundColor != null
&& adapter != null
&& mStagedBackgroundColor != adapter.getBackgroundColor()) {
adapter.setBackgroundColor(mStagedBackgroundColor);
mStagedBackgroundColor = null;
}

setOnItemSelectedListener(mItemSelectedListener);
}

@@ -23,6 +23,7 @@ class ReactPickerAdapter extends ArrayAdapter<ReactPickerItem> {

private final LayoutInflater mInflater;
private @Nullable Integer mPrimaryTextColor;
private @Nullable Integer mBackgroundColor;

public ReactPickerAdapter(Context context, List<ReactPickerItem> data) {
super(context, 0, data);
@@ -67,15 +68,28 @@ private View getView(int position, View convertView, ViewGroup parent, boolean i
textView.setTextColor((ColorStateList) textView.getTag());
}

if (mBackgroundColor != null) {
textView.setBackgroundColor(mBackgroundColor);
}

return textView;
}

public @Nullable Integer getPrimaryTextColor() {
return mPrimaryTextColor;
}

public @Nullable Integer getBackgroundColor() {
return mBackgroundColor;
}

public void setPrimaryTextColor(@Nullable Integer primaryTextColor) {
mPrimaryTextColor = primaryTextColor;
notifyDataSetChanged();
}

public void setBackgroundColor(@Nullable Integer backgroundColor) {
mBackgroundColor = backgroundColor;
notifyDataSetChanged();
}
}

0 comments on commit 22eb711

Please sign in to comment.