Add SecureTextInput

This commit is contained in:
Pedro Pombeiro 2018-12-13 10:45:40 +01:00
parent 183a4a2ffb
commit eacdfd895e
No known key found for this signature in database
GPG Key ID: A65DEB11E4BBC647
7 changed files with 1228 additions and 13 deletions

View File

@ -7,9 +7,10 @@
*/
import React, { Component } from 'react'
import { Platform, StyleSheet, Button, Text, View } from 'react-native'
import { Platform, StyleSheet, Button, Text, TextInput, View } from 'react-native'
import ToastExample from './ToastExample'
import CustomDialog from './CustomDialog'
import SecureTextInput from './SecureTextInput'
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
@ -23,17 +24,29 @@ function showNativeDialog() {
CustomDialog.show()
}
type Props = {};
type Props = {
text: string
};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
<Button onPress={showNativeDialog} title="Show Native Dialog" />
</View>
);
state = { text: "Initial text" }
onChangeTextInput(text) {
this.setState({text})
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
<Button key="button" onPress={showNativeDialog} title="Show Native Dialog" />
{/* <TextInput value={this.state.text} onChangeText={(text) => this.onChangeTextInput(text)} /> */}
<Text key="instructions" style={styles.instructions}>{this.state.text}</Text>
<SecureTextInput key="secure" registrationID="XYZ" />
</View>
);
}
}

View File

@ -0,0 +1,932 @@
// ImageView.js
import {requireNativeComponent} from 'react-native';
/**
* Composes `View`.
*
* - src: string
* - borderRadius: number
* - resizeMode: 'cover' | 'contain' | 'stretch'
*/
//module.exports = requireNativeComponent('RCTSecureTextInput');
const EventEmitter = require('EventEmitter');
const NativeMethodsMixin = require('NativeMethodsMixin');
const Platform = require('Platform');
const PropTypes = require('prop-types');
const React = require('React');
const ReactNative = require('ReactNative');
const Text = require('Text');
const TextAncestor = require('TextAncestor');
const TextInputState = require('TextInputState');
const TouchableWithoutFeedback = require('TouchableWithoutFeedback');
const UIManager = require('UIManager');
const createReactClass = require('create-react-class');
const invariant = require('invariant');
const DataDetectorTypes = [
'phoneNumber',
'link',
'address',
'calendarEvent',
'none',
'all',
];
let AndroidTextInput;
if (Platform.OS === 'android') {
AndroidTextInput = requireNativeComponent('RCTSecureTextInput');
}
const TextInput = createReactClass({
displayName: 'SecureTextInput',
statics: {
State: {
currentlyFocusedField: TextInputState.currentlyFocusedField,
focusTextInput: TextInputState.focusTextInput,
blurTextInput: TextInputState.blurTextInput,
},
},
propTypes: {
/**
* Can tell `TextInput` to automatically capitalize certain characters.
*
* - `characters`: all characters.
* - `words`: first letter of each word.
* - `sentences`: first letter of each sentence (*default*).
* - `none`: don't auto capitalize anything.
*/
autoCapitalize: PropTypes.oneOf([
'none',
'sentences',
'words',
'characters',
]),
/**
* If `false`, disables auto-correct. The default value is `true`.
*/
autoCorrect: PropTypes.bool,
/**
* If `false`, disables spell-check style (i.e. red underlines).
* The default value is inherited from `autoCorrect`.
* @platform ios
*/
spellCheck: PropTypes.bool,
/**
* If `true`, focuses the input on `componentDidMount`.
* The default value is `false`.
*/
autoFocus: PropTypes.bool,
/**
* Specifies whether fonts should scale to respect Text Size accessibility settings. The
* default is `true`.
*/
allowFontScaling: PropTypes.bool,
/**
* Specifies largest possible scale a font can reach when `allowFontScaling` is enabled.
* Possible values:
* `null/undefined` (default): inherit from the parent node or the global default (0)
* `0`: no max, ignore parent/global default
* `>= 1`: sets the maxFontSizeMultiplier of this node to this value
*/
maxFontSizeMultiplier: PropTypes.number,
/**
* If `false`, text is not editable. The default value is `true`.
*/
editable: PropTypes.bool,
/**
* Determines which keyboard to open, e.g.`numeric`.
*
* The following values work across platforms:
*
* - `default`
* - `numeric`
* - `number-pad`
* - `decimal-pad`
* - `email-address`
* - `phone-pad`
*
* *iOS Only*
*
* The following values work on iOS only:
*
* - `ascii-capable`
* - `numbers-and-punctuation`
* - `url`
* - `name-phone-pad`
* - `twitter`
* - `web-search`
*
* *Android Only*
*
* The following values work on Android only:
*
* - `visible-password`
*/
keyboardType: PropTypes.oneOf([
// Cross-platform
'default',
'email-address',
'numeric',
'phone-pad',
'number-pad',
// iOS-only
'ascii-capable',
'numbers-and-punctuation',
'url',
'name-phone-pad',
'decimal-pad',
'twitter',
'web-search',
// Android-only
'visible-password',
]),
/**
* Determines the color of the keyboard.
* @platform ios
*/
keyboardAppearance: PropTypes.oneOf(['default', 'light', 'dark']),
/**
* Determines how the return key should look. On Android you can also use
* `returnKeyLabel`.
*
* *Cross platform*
*
* The following values work across platforms:
*
* - `done`
* - `go`
* - `next`
* - `search`
* - `send`
*
* *Android Only*
*
* The following values work on Android only:
*
* - `none`
* - `previous`
*
* *iOS Only*
*
* The following values work on iOS only:
*
* - `default`
* - `emergency-call`
* - `google`
* - `join`
* - `route`
* - `yahoo`
*/
returnKeyType: PropTypes.oneOf([
// Cross-platform
'done',
'go',
'next',
'search',
'send',
// Android-only
'none',
'previous',
// iOS-only
'default',
'emergency-call',
'google',
'join',
'route',
'yahoo',
]),
/**
* Sets the return key to the label. Use it instead of `returnKeyType`.
* @platform android
*/
returnKeyLabel: PropTypes.string,
/**
* Limits the maximum number of characters that can be entered. Use this
* instead of implementing the logic in JS to avoid flicker.
*/
maxLength: PropTypes.number,
/**
* Sets the number of lines for a `TextInput`. Use it with multiline set to
* `true` to be able to fill the lines.
* @platform android
*/
numberOfLines: PropTypes.number,
/**
* When `false`, if there is a small amount of space available around a text input
* (e.g. landscape orientation on a phone), the OS may choose to have the user edit
* the text inside of a full screen text input mode. When `true`, this feature is
* disabled and users will always edit the text directly inside of the text input.
* Defaults to `false`.
* @platform android
*/
disableFullscreenUI: PropTypes.bool,
/**
* If `true`, the keyboard disables the return key when there is no text and
* automatically enables it when there is text. The default value is `false`.
* @platform ios
*/
enablesReturnKeyAutomatically: PropTypes.bool,
/**
* If `true`, the text input can be multiple lines.
* The default value is `false`.
*/
multiline: PropTypes.bool,
/**
* Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced`
* The default value is `simple`.
* @platform android
*/
textBreakStrategy: PropTypes.oneOf(['simple', 'highQuality', 'balanced']),
/**
* Callback that is called when the text input is blurred.
*/
onBlur: PropTypes.func,
/**
* Callback that is called when the text input is focused.
*/
onFocus: PropTypes.func,
/**
* Callback that is called when the text input's text changes.
*/
// onChange: PropTypes.func,
/**
* Callback that is called when the text input's text changes.
* Changed text is passed as an argument to the callback handler.
*/
// onChangeText: PropTypes.func,
/**
* Callback that is called when the text input's content size changes.
* This will be called with
* `{ nativeEvent: { contentSize: { width, height } } }`.
*
* Only called for multiline text inputs.
*/
onContentSizeChange: PropTypes.func,
/**
* Callback that is called when text input ends.
*/
onEndEditing: PropTypes.func,
/**
* Callback that is called when the text input selection is changed.
* This will be called with
* `{ nativeEvent: { selection: { start, end } } }`.
*/
onSelectionChange: PropTypes.func,
/**
* Callback that is called when the text input's submit button is pressed.
* Invalid if `multiline={true}` is specified.
*/
onSubmitEditing: PropTypes.func,
/**
* Callback that is called when a key is pressed.
* This will be called with `{ nativeEvent: { key: keyValue } }`
* where `keyValue` is `'Enter'` or `'Backspace'` for respective keys and
* the typed-in character otherwise including `' '` for space.
* Fires before `onChange` callbacks.
*/
onKeyPress: PropTypes.func,
/**
* Invoked on mount and layout changes with `{x, y, width, height}`.
*/
onLayout: PropTypes.func,
/**
* Invoked on content scroll with `{ nativeEvent: { contentOffset: { x, y } } }`.
* May also contain other properties from ScrollEvent but on Android contentSize
* is not provided for performance reasons.
*/
onScroll: PropTypes.func,
/**
* The string that will be rendered before text input has been entered.
*/
placeholder: PropTypes.string,
/**
* The text color of the placeholder string.
*/
// placeholderTextColor: DeprecatedColorPropType,
/**
* If `false`, scrolling of the text view will be disabled.
* The default value is `true`. Does only work with 'multiline={true}'.
* @platform ios
*/
scrollEnabled: PropTypes.bool,
/**
* If `true`, the text input obscures the text entered so that sensitive text
* like passwords stay secure. The default value is `false`. Does not work with 'multiline={true}'.
*/
secureTextEntry: PropTypes.bool,
/**
* The highlight and cursor color of the text input.
*/
// selectionColor: DeprecatedColorPropType,
/**
* An instance of `DocumentSelectionState`, this is some state that is responsible for
* maintaining selection information for a document.
*
* Some functionality that can be performed with this instance is:
*
* - `blur()`
* - `focus()`
* - `update()`
*
* > You can reference `DocumentSelectionState` in
* > [`vendor/document/selection/DocumentSelectionState.js`](https://github.com/facebook/react-native/blob/master/Libraries/vendor/document/selection/DocumentSelectionState.js)
*
* @platform ios
*/
// selectionState: PropTypes.instanceOf(DocumentSelectionState),
/**
* The start and end of the text input's selection. Set start and end to
* the same value to position the cursor.
*/
selection: PropTypes.shape({
start: PropTypes.number.isRequired,
end: PropTypes.number,
}),
/**
* The value to show for the text input. `TextInput` is a controlled
* component, which means the native value will be forced to match this
* value prop if provided. For most uses, this works great, but in some
* cases this may cause flickering - one common cause is preventing edits
* by keeping value the same. In addition to simply setting the same value,
* either set `editable={false}`, or set/update `maxLength` to prevent
* unwanted edits without flicker.
*/
value: PropTypes.string,
/**
* Provides an initial value that will change when the user starts typing.
* Useful for simple use-cases where you do not want to deal with listening
* to events and updating the value prop to keep the controlled state in sync.
*/
defaultValue: PropTypes.string,
/**
* When the clear button should appear on the right side of the text view.
* This property is supported only for single-line TextInput component.
* @platform ios
*/
clearButtonMode: PropTypes.oneOf([
'never',
'while-editing',
'unless-editing',
'always',
]),
/**
* If `true`, clears the text field automatically when editing begins.
* @platform ios
*/
clearTextOnFocus: PropTypes.bool,
/**
* If `true`, all text will automatically be selected on focus.
*/
selectTextOnFocus: PropTypes.bool,
/**
* If `true`, the text field will blur when submitted.
* The default value is true for single-line fields and false for
* multiline fields. Note that for multiline fields, setting `blurOnSubmit`
* to `true` means that pressing return will blur the field and trigger the
* `onSubmitEditing` event instead of inserting a newline into the field.
*/
blurOnSubmit: PropTypes.bool,
/**
* Note that not all Text styles are supported, an incomplete list of what is not supported includes:
*
* - `borderLeftWidth`
* - `borderTopWidth`
* - `borderRightWidth`
* - `borderBottomWidth`
* - `borderTopLeftRadius`
* - `borderTopRightRadius`
* - `borderBottomRightRadius`
* - `borderBottomLeftRadius`
*
* see [Issue#7070](https://github.com/facebook/react-native/issues/7070)
* for more detail.
*
* [Styles](docs/style.html)
*/
style: Text.propTypes.style,
/**
* The color of the `TextInput` underline.
* @platform android
*/
// underlineColorAndroid: DeprecatedColorPropType,
/**
* If defined, the provided image resource will be rendered on the left.
* The image resource must be inside `/android/app/src/main/res/drawable` and referenced
* like
* ```
* <TextInput
* inlineImageLeft='search_icon'
* />
* ```
* @platform android
*/
inlineImageLeft: PropTypes.string,
/**
* Padding between the inline image, if any, and the text input itself.
* @platform android
*/
inlineImagePadding: PropTypes.number,
/**
* Determines the types of data converted to clickable URLs in the text input.
* Only valid if `multiline={true}` and `editable={false}`.
* By default no data types are detected.
*
* You can provide one type or an array of many types.
*
* Possible values for `dataDetectorTypes` are:
*
* - `'phoneNumber'`
* - `'link'`
* - `'address'`
* - `'calendarEvent'`
* - `'none'`
* - `'all'`
*
* @platform ios
*/
dataDetectorTypes: PropTypes.oneOfType([
PropTypes.oneOf(DataDetectorTypes),
PropTypes.arrayOf(PropTypes.oneOf(DataDetectorTypes)),
]),
/**
* If `true`, caret is hidden. The default value is `false`.
* This property is supported only for single-line TextInput component on iOS.
*/
caretHidden: PropTypes.bool,
/*
* If `true`, contextMenuHidden is hidden. The default value is `false`.
*/
contextMenuHidden: PropTypes.bool,
/**
* An optional identifier which links a custom InputAccessoryView to
* this text input. The InputAccessoryView is rendered above the
* keyboard when this text input is focused.
* @platform ios
*/
inputAccessoryViewID: PropTypes.string,
/**
* Give the keyboard and the system information about the
* expected semantic meaning for the content that users enter.
* @platform ios
*/
textContentType: PropTypes.oneOf([
'none',
'URL',
'addressCity',
'addressCityAndState',
'addressState',
'countryName',
'creditCardNumber',
'emailAddress',
'familyName',
'fullStreetAddress',
'givenName',
'jobTitle',
'location',
'middleName',
'name',
'namePrefix',
'nameSuffix',
'nickname',
'organizationName',
'postalCode',
'streetAddressLine1',
'streetAddressLine2',
'sublocality',
'telephoneNumber',
'username',
'password',
'newPassword',
'oneTimeCode',
]),
},
getDefaultProps() {
return {
allowFontScaling: true,
underlineColorAndroid: 'transparent',
};
},
/**
* `NativeMethodsMixin` will look for this when invoking `setNativeProps`. We
* make `this` look like an actual native component class.
*/
mixins: [NativeMethodsMixin],
/**
* Returns `true` if the input is currently focused; `false` otherwise.
*/
isFocused: function(): boolean {
return (
TextInputState.currentlyFocusedField() ===
ReactNative.findNodeHandle(this._inputRef)
);
},
_inputRef: (undefined: any),
_focusSubscription: (undefined: ?Function),
// _lastNativeText: (undefined: ?string),
_lastNativeSelection: (undefined: ?Selection),
_rafId: (null: ?AnimationFrameID),
componentDidMount: function() {
// this._lastNativeText = this.props.value;
const tag = ReactNative.findNodeHandle(this._inputRef);
if (tag != null) {
// tag is null only in unit tests
TextInputState.registerInput(tag);
}
if (this.context.focusEmitter) {
this._focusSubscription = this.context.focusEmitter.addListener(
'focus',
el => {
if (this === el) {
this._rafId = requestAnimationFrame(this.focus);
} else if (this.isFocused()) {
this.blur();
}
},
);
if (this.props.autoFocus) {
this.context.onFocusRequested(this);
}
} else {
if (this.props.autoFocus) {
this._rafId = requestAnimationFrame(this.focus);
}
}
},
componentWillUnmount: function() {
this._focusSubscription && this._focusSubscription.remove();
if (this.isFocused()) {
this.blur();
}
const tag = ReactNative.findNodeHandle(this._inputRef);
if (tag != null) {
TextInputState.unregisterInput(tag);
}
if (this._rafId != null) {
cancelAnimationFrame(this._rafId);
}
},
contextTypes: {
onFocusRequested: PropTypes.func,
focusEmitter: PropTypes.instanceOf(EventEmitter),
},
/**
* Removes all text from the `TextInput`.
*/
clear: function() {
this.setNativeProps({text: ''});
},
render: function() {
let textInput;
if (Platform.OS === 'ios') {
textInput = UIManager.getViewManagerConfig('RCTVirtualText')
? this._renderIOS()
: this._renderIOSLegacy();
} else if (Platform.OS === 'android') {
textInput = this._renderAndroid();
}
return (
<TextAncestor.Provider value={true}>{textInput}</TextAncestor.Provider>
);
},
_getText: function(): ?string {
return typeof this.props.value === 'string'
? this.props.value
: typeof this.props.defaultValue === 'string'
? this.props.defaultValue
: '';
},
_setNativeRef: function(ref: any) {
this._inputRef = ref;
},
_renderIOSLegacy: function() {
let textContainer;
const props = Object.assign({}, this.props);
props.style = [this.props.style];
if (props.selection && props.selection.end == null) {
props.selection = {
start: props.selection.start,
end: props.selection.start,
};
}
if (!props.multiline) {
if (__DEV__) {
for (const propKey in onlyMultiline) {
if (props[propKey]) {
const error = new Error(
'TextInput prop `' +
propKey +
'` is only supported with multiline.',
);
warning(false, '%s', error.stack);
}
}
}
textContainer = (
<RCTSinglelineTextInputView
ref={this._setNativeRef}
{...props}
onFocus={this._onFocus}
onBlur={this._onBlur}
onChange={this._onChange}
onSelectionChange={this._onSelectionChange}
onSelectionChangeShouldSetResponder={emptyFunctionThatReturnsTrue}
text={this._getText()}
/>
);
} else {
let children = props.children;
let childCount = 0;
React.Children.forEach(children, () => ++childCount);
invariant(
!(props.value && childCount),
'Cannot specify both value and children.',
);
if (childCount >= 1) {
children = (
<Text
style={props.style}
allowFontScaling={props.allowFontScaling}
maxFontSizeMultiplier={props.maxFontSizeMultiplier}>
{children}
</Text>
);
}
if (props.inputView) {
children = [children, props.inputView];
}
props.style.unshift(styles.multilineInput);
textContainer = (
<RCTMultilineTextInputView
ref={this._setNativeRef}
{...props}
children={children}
onFocus={this._onFocus}
onBlur={this._onBlur}
onChange={this._onChange}
onContentSizeChange={this.props.onContentSizeChange}
onSelectionChange={this._onSelectionChange}
onSelectionChangeShouldSetResponder={emptyFunctionThatReturnsTrue}
text={this._getText()}
dataDetectorTypes={this.props.dataDetectorTypes}
onScroll={this._onScroll}
/>
);
}
return (
<TouchableWithoutFeedback
onLayout={props.onLayout}
onPress={this._onPress}
rejectResponderTermination={true}
accessible={props.accessible}
accessibilityLabel={props.accessibilityLabel}
accessibilityRole={props.accessibilityRole}
accessibilityStates={props.accessibilityStates}
nativeID={this.props.nativeID}
testID={props.testID}>
{textContainer}
</TouchableWithoutFeedback>
);
},
_renderIOS: function() {
const props = Object.assign({}, this.props);
props.style = [this.props.style];
if (props.selection && props.selection.end == null) {
props.selection = {
start: props.selection.start,
end: props.selection.start,
};
}
const RCTTextInputView = props.multiline
? RCTMultilineTextInputView
: RCTSinglelineTextInputView;
if (props.multiline) {
props.style.unshift(styles.multilineInput);
}
const textContainer = (
<RCTTextInputView
ref={this._setNativeRef}
{...props}
onFocus={this._onFocus}
onBlur={this._onBlur}
onChange={this._onChange}
onContentSizeChange={this.props.onContentSizeChange}
onSelectionChange={this._onSelectionChange}
onSelectionChangeShouldSetResponder={emptyFunctionThatReturnsTrue}
text={this._getText()}
dataDetectorTypes={this.props.dataDetectorTypes}
onScroll={this._onScroll}
/>
);
return (
<TouchableWithoutFeedback
onLayout={props.onLayout}
onPress={this._onPress}
rejectResponderTermination={true}
accessible={props.accessible}
accessibilityLabel={props.accessibilityLabel}
accessibilityRole={props.accessibilityRole}
accessibilityStates={props.accessibilityStates}
nativeID={this.props.nativeID}
testID={props.testID}>
{textContainer}
</TouchableWithoutFeedback>
);
},
_renderAndroid: function() {
const props = Object.assign({}, this.props);
props.style = [this.props.style];
// props.autoCapitalize = UIManager.getViewManagerConfig(
// 'AndroidTextInput',
// ).Constants.AutoCapitalizationType[props.autoCapitalize || 'sentences'];
// props.autoCapitalize = false;
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
* suppresses an error when upgrading Flow's support for React. To see the
* error delete this comment and run Flow. */
let children = this.props.children;
let childCount = 0;
React.Children.forEach(children, () => ++childCount);
invariant(
!(this.props.value && childCount),
'Cannot specify both value and children.',
);
if (childCount > 1) {
children = <Text>{children}</Text>;
}
if (props.selection && props.selection.end == null) {
props.selection = {
start: props.selection.start,
end: props.selection.start,
};
}
const textContainer = (
<AndroidTextInput
ref={this._setNativeRef}
{...props}
mostRecentEventCount={0}
onFocus={this._onFocus}
onBlur={this._onBlur}
onSelectionChange={this._onSelectionChange}
text={this._getText()}
children={children}
disableFullscreenUI={this.props.disableFullscreenUI}
textBreakStrategy={this.props.textBreakStrategy}
onScroll={this._onScroll}
/>
);
return (
<TouchableWithoutFeedback
onLayout={props.onLayout}
onPress={this._onPress}
accessible={this.props.accessible}
accessibilityLabel={this.props.accessibilityLabel}
accessibilityRole={this.props.accessibilityRole}
accessibilityStates={this.props.accessibilityStates}
nativeID={this.props.nativeID}
testID={this.props.testID}>
{textContainer}
</TouchableWithoutFeedback>
);
},
_onFocus: function(event: FocusEvent) {
if (this.props.onFocus) {
this.props.onFocus(event);
}
if (this.props.selectionState) {
this.props.selectionState.focus();
}
},
_onPress: function(event: PressEvent) {
if (this.props.editable || this.props.editable === undefined) {
this.focus();
}
},
_onChange: function(event: ChangeEvent) {
// Make sure to fire the mostRecentEventCount first so it is already set on
// native when the text value is set.
if (this._inputRef && this._inputRef.setNativeProps) {
this._inputRef.setNativeProps({
mostRecentEventCount: event.nativeEvent.eventCount,
});
}
// const text = event.nativeEvent.text;
// this.props.onChange && this.props.onChange(event);
// this.props.onChangeText && this.props.onChangeText(text);
if (!this._inputRef) {
// calling `this.props.onChange` or `this.props.onChangeText`
// may clean up the input itself. Exits here.
return;
}
// this._lastNativeText = text;
this.forceUpdate();
},
_onSelectionChange: function(event: SelectionChangeEvent) {
this.props.onSelectionChange && this.props.onSelectionChange(event);
if (!this._inputRef) {
// calling `this.props.onSelectionChange`
// may clean up the input itself. Exits here.
return;
}
this._lastNativeSelection = event.nativeEvent.selection;
if (this.props.selection || this.props.selectionState) {
this.forceUpdate();
}
},
componentDidUpdate: function() {
// This is necessary in case native updates the text and JS decides
// that the update should be ignored and we should stick with the value
// that we have in JS.
const nativeProps = {};
// if (
// this._lastNativeText !== this.props.value &&
// typeof this.props.value === 'string'
// ) {
// nativeProps.text = this.props.value;
// }
// Selection is also a controlled prop, if the native value doesn't match
// JS, update to the JS value.
const {selection} = this.props;
if (
this._lastNativeSelection &&
selection &&
(this._lastNativeSelection.start !== selection.start ||
this._lastNativeSelection.end !== selection.end)
) {
nativeProps.selection = this.props.selection;
}
if (
Object.keys(nativeProps).length > 0 &&
this._inputRef &&
this._inputRef.setNativeProps
) {
this._inputRef.setNativeProps(nativeProps);
}
if (this.props.selectionState && selection) {
this.props.selectionState.update(selection.start, selection.end);
}
},
_onBlur: function(event: BlurEvent) {
// This is a hack to fix https://fburl.com/toehyir8
// @todo(rsnara) Figure out why this is necessary.
this.blur();
if (this.props.onBlur) {
this.props.onBlur(event);
}
if (this.props.selectionState) {
this.props.selectionState.blur();
}
},
_onScroll: function(event: ScrollEvent) {
this.props.onScroll && this.props.onScroll(event);
},
});
module.exports = TextInput;

View File

@ -11,8 +11,9 @@ public class FireMissilesDialogFragment extends DialogFragment {
public Dialog onCreateDialog(Bundle savedInstanceState) {
// Use the Builder class for convenient dialog construction
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
String text = ReactSecureTextInputManager.getText("XYZ");
builder.setMessage("Fire missiles?")
.setPositiveButton("Fire!", new DialogInterface.OnClickListener() {
.setPositiveButton(text, new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
// FIRE ZE MISSILES!
}

View File

@ -24,7 +24,8 @@ public class MainApplication extends Application implements ReactApplication {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new CustomDialogPackage(),
new CustomToastPackage()
new CustomToastPackage(),
new ReactSecureTextInputPackage()
);
}
@ -41,6 +42,7 @@ public class MainApplication extends Application implements ReactApplication {
@Override
public void onCreate() {
ReactSecureTextInputManager.setText("XYZ", "Initial text");
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}

View File

@ -0,0 +1,39 @@
package com.statuspoc;
import android.content.Context;
import android.text.TextWatcher;
import com.facebook.react.views.text.ReactTextUpdate;
import com.facebook.react.views.textinput.ReactEditText;
public class ReactSecureEditText extends ReactEditText {
ReactSecureTextInputManager mManager;
public ReactSecureEditText(ReactSecureTextInputManager manager, Context context) {
super(context);
this.mManager = manager;
}
@Override
public final void addTextChangedListener(TextWatcher watcher) throws java.lang.SecurityException {
if (!(watcher instanceof ReactSecureTextInputManager.SecureReactTextInputTextWatcher)) {
// Explicitly disallow third-party subscribers
throw new java.lang.SecurityException();
}
super.addTextChangedListener(watcher);
}
@Override
public void onDetachedFromWindow() {
super.onDetachedFromWindow();
this.mManager.onDetachedFromWindow(this);
}
@Override
public final void maybeSetText(ReactTextUpdate reactTextUpdate) {
// no-op
}
}

View File

@ -0,0 +1,195 @@
package com.statuspoc;
import android.util.Log;
import android.text.Editable;
import android.text.InputType;
import android.text.TextWatcher;
import android.util.TypedValue;
import android.view.KeyEvent;
import android.view.inputmethod.EditorInfo;
import android.widget.EditText;
import android.widget.TextView;
import android.util.ArrayMap;
import com.facebook.infer.annotation.Assertions;
import com.facebook.react.module.annotations.ReactModule;
import com.facebook.react.uimanager.PixelUtil;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.ViewDefaults;
import com.facebook.react.uimanager.annotations.ReactProp;
import com.facebook.react.views.text.ReactTextUpdate;
import com.facebook.react.views.textinput.ReactEditText;
import com.facebook.react.views.textinput.ReactTextInputManager;
/**
* Manages instances of SecureTextInput.
*/
@ReactModule(name = ReactSecureTextInputManager.REACT_CLASS)
public class ReactSecureTextInputManager extends ReactTextInputManager {
protected static final String REACT_CLASS = "RCTSecureTextInput";
private static final ArrayMap<String, String> registrationMap = new ArrayMap<String, String>();
private static final ArrayMap<EditText, String> viewToIdMap = new ArrayMap<EditText, String>();
private static final ArrayMap<String, EditText> idToViewMap = new ArrayMap<String, EditText>();
@Override
public String getName() {
return REACT_CLASS;
}
@ReactProp(name = "registrationID")
public void setRegistrationId(ReactSecureEditText view, String id) throws java.lang.SecurityException, IllegalArgumentException {
if (view == null) {
throw new IllegalArgumentException("view");
}
if (id == null) {
throw new IllegalArgumentException("id");
}
if (!registrationMap.containsKey(id)) {
registrationMap.put(id, view.getText().toString());
}
viewToIdMap.put(view, id);
idToViewMap.put(id, view);
view.addTextChangedListener(new SecureReactTextInputTextWatcher(view));
view.setOnKeyPress(false);
}
public static String getText(final String id) {
return registrationMap.get(id);
}
public static void setText(final String id, final String value) {
registrationMap.put(id, value);
final EditText view = idToViewMap.get(id);
if (view != null) {
view.setText(value);
}
}
@Override
public final ReactEditText createViewInstance(ThemedReactContext context) {
ReactSecureEditText editText = new ReactSecureEditText(this, context);
int inputType = editText.getInputType();
editText.setInputType(inputType & (~InputType.TYPE_TEXT_FLAG_MULTI_LINE));
editText.setReturnKeyType("done");
editText.setTextSize(
TypedValue.COMPLEX_UNIT_PX,
(int) Math.ceil(PixelUtil.toPixelFromSP(ViewDefaults.FONT_SIZE_SP)));
return editText;
}
void onDetachedFromWindow(ReactSecureEditText view) {
final String id = this.viewToIdMap.get(view);
if (id == null) {
Log.d(REACT_CLASS, "unknown ReactSecureEditText detached");
return;
}
this.viewToIdMap.remove(view);
this.idToViewMap.remove(id);
this.registrationMap.remove(id);
}
class SecureReactTextInputTextWatcher implements TextWatcher {
private ReactSecureEditText mEditText;
private String mPreviousText;
public SecureReactTextInputTextWatcher(
final ReactSecureEditText editText) {
mEditText = editText;
mPreviousText = null;
}
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
// Incoming charSequence gets mutated before onTextChanged() is invoked
mPreviousText = s.toString();
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
// Rearranging the text (i.e. changing between singleline and multiline attributes) can
// also trigger onTextChanged
if (count == 0 && before == 0) {
return;
}
Assertions.assertNotNull(mPreviousText);
String newText = s.toString().substring(start, start + count);
String oldText = mPreviousText.substring(start, start + before);
// Don't send same text changes
if (count == before && newText.equals(oldText)) {
return;
}
newText = s.toString();
//Log.d(REACT_CLASS, "newText: " + newText);
registrationMap.put(viewToIdMap.get(mEditText), newText);
}
@Override
public void afterTextChanged(Editable s) {
}
}
@Override
public void updateExtraData(ReactEditText view, Object extraData) {
if (extraData instanceof ReactTextUpdate) {
ReactTextUpdate update = (ReactTextUpdate) extraData;
view.setPadding(
(int) update.getPaddingLeft(),
(int) update.getPaddingTop(),
(int) update.getPaddingRight(),
(int) update.getPaddingBottom());
final String id = viewToIdMap.get(view);
final String text = getText(id);
view.setText(text);
registrationMap.put(id, text);
}
}
@Override
protected final void addEventEmitters(
final ThemedReactContext reactContext,
final ReactEditText editText) {
editText.setOnEditorActionListener(
new TextView.OnEditorActionListener() {
@Override
public boolean onEditorAction(TextView v, int actionId, KeyEvent keyEvent) {
// Any 'Enter' action will do
if ((actionId & EditorInfo.IME_MASK_ACTION) > 0 ||
actionId == EditorInfo.IME_NULL) {
boolean blurOnSubmit = editText.getBlurOnSubmit();
boolean isMultiline = ((editText.getInputType() &
InputType.TYPE_TEXT_FLAG_MULTI_LINE) != 0);
// Motivation:
// * blurOnSubmit && isMultiline => Clear focus; prevent default behaviour (return true);
// * blurOnSubmit && !isMultiline => Clear focus; prevent default behaviour (return true);
// * !blurOnSubmit && isMultiline => Perform default behaviour (return false);
// * !blurOnSubmit && !isMultiline => Prevent default behaviour (return true).
if (blurOnSubmit) {
editText.clearFocus();
}
// Prevent default behavior except when we want it to insert a newline.
return blurOnSubmit || !isMultiline;
}
return true;
}
});
}
@Override
public final void setOnKeyPress(final ReactEditText view, boolean onKeyPress) {
// Explicitly disallow changing this property
throw new java.lang.SecurityException();
}
}

View File

@ -0,0 +1,33 @@
// ReactSecureTextInputPackage.java
package com.statuspoc;
import android.app.Activity;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.Arrays;
import java.util.ArrayList;
import java.util.List;
public class ReactSecureTextInputPackage implements ReactPackage {
@Override
public List<ViewManager> createViewManagers(
ReactApplicationContext reactContext) {
return Arrays.<ViewManager>asList(
new ReactSecureTextInputManager()
);
}
@Override
public List<NativeModule> createNativeModules(
ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
return modules;
}
}