Skip to content

Commit

Permalink
Add selectionColor prop for Text on Android
Browse files Browse the repository at this point in the history 
Summary:
**Motivation**

Customizing the selection color allows to use brand colors in the app. The PR implements a `selectionColor` prop for `Text` component similar to `TextInput`.

**Test plan (required)**

Run UIExplorer example with the changes and verify everything works fine.

![image](https://cloud.githubusercontent.com/assets/1174278/22023258/70197d84-dceb-11e6-8662-2879d78d14d4.png)

cc brentvatne
Closes facebook#11947

Differential Revision: D4430265

fbshipit-source-id: 462f16548d93ab03aadb27d6f12acf90842627ab
  • Loading branch information
@satya164
satya164 authored and Edwin committed Feb 6, 2017
1 parent e9a46b4 commit 52d1ce6
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 22 deletions.
7 changes: 6 additions & 1 deletion Examples/UIExplorer/js/TextExample.android.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -386,10 +386,15 @@ class TextExample extends React.Component {
</Text>
</UIExplorerBlock>
<UIExplorerBlock title="selectable attribute">
<Text selectable={true}>
<Text selectable>
This text is selectable if you click-and-hold, and will offer the native Android selection menus.
</Text>
</UIExplorerBlock>
<UIExplorerBlock title="selectionColor attribute">
<Text selectable selectionColor="orange">
This text will have a orange highlight on selection.
</Text>
</UIExplorerBlock>
<UIExplorerBlock title="Inline images">
<Text>
This text contains an inline image <Image source={require('./flux.png')}/>. Neat, huh?
Expand Down
47 changes: 31 additions & 16 deletions Libraries/Text/Text.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
*/
'use strict';

const ColorPropType = require('ColorPropType');
const EdgeInsetsPropType = require('EdgeInsetsPropType');
const NativeMethodsMixin = require('NativeMethodsMixin');
const Platform = require('Platform');
Expand All @@ -20,9 +21,12 @@ const StyleSheetPropType = require('StyleSheetPropType');
const TextStylePropTypes = require('TextStylePropTypes');
const Touchable = require('Touchable');

const processColor = require('processColor');
const createReactNativeComponentClass = require('createReactNativeComponentClass');
const mergeFast = require('mergeFast');

const { PropTypes } = React;

const stylePropType = StyleSheetPropType(TextStylePropTypes);

const viewConfig = {
Expand All @@ -32,6 +36,7 @@ const viewConfig = {
ellipsizeMode: true,
allowFontScaling: true,
selectable: true,
selectionColor: true,
adjustsFontSizeToFit: true,
minimumFontScale: true,
textBreakStrategy: true,
Expand Down Expand Up @@ -109,39 +114,39 @@ const Text = React.createClass({
*
* > `clip` is working only for iOS
*/
ellipsizeMode: React.PropTypes.oneOf(['head', 'middle', 'tail', 'clip']),
ellipsizeMode: PropTypes.oneOf(['head', 'middle', 'tail', 'clip']),
/**
* Used to truncate the text with an ellipsis after computing the text
* layout, including line wrapping, such that the total number of lines
* does not exceed this number.
*
* This prop is commonly used with `ellipsizeMode`.
*/
numberOfLines: React.PropTypes.number,
numberOfLines: PropTypes.number,
/**
* Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced`
* The default value is `highQuality`.
* @platform android
*/
textBreakStrategy: React.PropTypes.oneOf(['simple', 'highQuality', 'balanced']),
textBreakStrategy: PropTypes.oneOf(['simple', 'highQuality', 'balanced']),
/**
* Invoked on mount and layout changes with
*
* `{nativeEvent: {layout: {x, y, width, height}}}`
*/
onLayout: React.PropTypes.func,
onLayout: PropTypes.func,
/**
* This function is called on press.
*
* e.g., `onPress={() => console.log('1st')}``
*/
onPress: React.PropTypes.func,
onPress: PropTypes.func,
/**
* This function is called on long press.
*
* e.g., `onLongPress={this.increaseSize}>``
*/
onLongPress: React.PropTypes.func,
onLongPress: PropTypes.func,
/**
* When the scroll view is disabled, this defines how far your touch may
* move off of the button, before deactivating the button. Once deactivated,
Expand All @@ -153,24 +158,28 @@ const Text = React.createClass({
/**
* Lets the user select text, to use the native copy and paste functionality.
*/
selectable: React.PropTypes.bool,
selectable: PropTypes.bool,
/**
* The highlight color of the text.
* @platform android
*/
selectionColor: ColorPropType,
/**
* When `true`, no visual change is made when text is pressed down. By
* default, a gray oval highlights the text on press down.
*
* @platform ios
*/
suppressHighlighting: React.PropTypes.bool,
suppressHighlighting: PropTypes.bool,
style: stylePropType,
/**
* Used to locate this view in end-to-end tests.
*/
testID: React.PropTypes.string,
testID: PropTypes.string,
/**
* Specifies whether fonts should scale to respect Text Size accessibility setting on iOS. The
* default is `true`.
*/
allowFontScaling: React.PropTypes.bool,
allowFontScaling: PropTypes.bool,
/**
* When set to `true`, indicates that the view is an accessibility element. The default value
* for a `Text` element is `true`.
Expand All @@ -179,18 +188,18 @@ const Text = React.createClass({
* [Accessibility guide](/react-native/docs/accessibility.html#accessible-ios-android)
* for more information.
*/
accessible: React.PropTypes.bool,
accessible: PropTypes.bool,
/**
* Specifies whether font should be scaled down automatically to fit given style constraints.
* @platform ios
*/
adjustsFontSizeToFit: React.PropTypes.bool,
adjustsFontSizeToFit: PropTypes.bool,

/**
* Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).
* @platform ios
*/
minimumFontScale: React.PropTypes.number,
minimumFontScale: PropTypes.number,
},
getDefaultProps(): Object {
return {
Expand All @@ -210,10 +219,10 @@ const Text = React.createClass({
return {isInAParentText: true};
},
childContextTypes: {
isInAParentText: React.PropTypes.bool
isInAParentText: PropTypes.bool
},
contextTypes: {
isInAParentText: React.PropTypes.bool
isInAParentText: PropTypes.bool
},
/**
* Only assigned if touch is needed.
Expand Down Expand Up @@ -317,6 +326,12 @@ const Text = React.createClass({
isHighlighted: this.state.isHighlighted,
};
}
if (newProps.selectionColor != null) {
newProps = {
...newProps,
selectionColor: processColor(newProps.selectionColor)
};
}
if (Touchable.TOUCH_TARGET_DEBUG && newProps.onPress) {
newProps = {
...newProps,
Expand Down
19 changes: 14 additions & 5 deletions ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextViewManager.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,25 @@

package com.facebook.react.views.text;

import javax.annotation.Nullable;

import android.text.Spannable;
import android.text.TextUtils;
import android.view.Gravity;
import android.widget.TextView;

import com.facebook.yoga.YogaConstants;
import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
import com.facebook.react.common.annotations.VisibleForTesting;
import com.facebook.react.module.annotations.ReactModule;
import com.facebook.react.uimanager.BaseViewManager;
import com.facebook.react.uimanager.PixelUtil;
import com.facebook.react.uimanager.annotations.ReactProp;
import com.facebook.react.uimanager.Spacing;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.ViewDefaults;
import com.facebook.react.uimanager.ViewProps;
import com.facebook.react.common.annotations.VisibleForTesting;
import com.facebook.react.uimanager.annotations.ReactProp;
import com.facebook.react.uimanager.annotations.ReactPropGroup;
import com.facebook.yoga.YogaConstants;

import javax.annotation.Nullable;

/**
* Manages instances of spannable {@link TextView}.
Expand Down Expand Up @@ -96,6 +96,15 @@ public void setSelectable(ReactTextView view, boolean isSelectable) {
view.setTextIsSelectable(isSelectable);
}

@ReactProp(name = "selectionColor", customType = "Color")
public void setSelectionColor(ReactTextView view, @Nullable Integer color) {
if (color == null) {
view.setHighlightColor(DefaultStyleValuesUtil.getDefaultTextColorHighlight(view.getContext()));
} else {
view.setHighlightColor(color);
}
}

@ReactPropGroup(names = {
ViewProps.BORDER_RADIUS,
ViewProps.BORDER_TOP_LEFT_RADIUS,
Expand Down

0 comments on commit 52d1ce6

Please sign in to comment.