mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
empyrical
427b54eef6
Summary: This pull request moves `TextInput`'s proptypes to `DeprecatedTextInputPropTypes`. This is in line with what is happening with other components. ## Changelog [General] [Deprecated] - Moved `TextInput`'s proptypes to `DeprecatedTextInputPropTypes` Pull Request resolved: https://github.com/facebook/react-native/pull/26042 Test Plan: Flow checks pass. Differential Revision: D16782322 Pulled By: cpojer fbshipit-source-id: c5f9caa402c0c5cd878e7fff502d380c7b468cbd
845 lines
23 KiB
JavaScript
845 lines
23 KiB
JavaScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow
|
|
* @format
|
|
*/
|
|
'use strict';
|
|
|
|
const DeprecatedTextInputPropTypes = require('../../DeprecatedPropTypes/DeprecatedTextInputPropTypes');
|
|
const DocumentSelectionState = require('../../vendor/document/selection/DocumentSelectionState');
|
|
const NativeMethodsMixin = require('../../Renderer/shims/NativeMethodsMixin');
|
|
const Platform = require('../../Utilities/Platform');
|
|
const React = require('react');
|
|
const ReactNative = require('../../Renderer/shims/ReactNative');
|
|
const StyleSheet = require('../../StyleSheet/StyleSheet');
|
|
const Text = require('../../Text/Text');
|
|
const TextAncestor = require('../../Text/TextAncestor');
|
|
const TextInputState = require('./TextInputState');
|
|
const TouchableWithoutFeedback = require('../Touchable/TouchableWithoutFeedback');
|
|
const UIManager = require('../../ReactNative/UIManager');
|
|
|
|
const createReactClass = require('create-react-class');
|
|
const invariant = require('invariant');
|
|
const requireNativeComponent = require('../../ReactNative/requireNativeComponent');
|
|
const warning = require('fbjs/lib/warning');
|
|
|
|
import type {TextStyleProp, ViewStyleProp} from '../../StyleSheet/StyleSheet';
|
|
import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
|
|
import type {ViewProps} from '../View/ViewPropTypes';
|
|
import type {SyntheticEvent, ScrollEvent} from '../../Types/CoreEventTypes';
|
|
import type {PressEvent} from '../../Types/CoreEventTypes';
|
|
|
|
let AndroidTextInput;
|
|
let RCTMultilineTextInputView;
|
|
let RCTSinglelineTextInputView;
|
|
|
|
if (Platform.OS === 'android') {
|
|
AndroidTextInput = requireNativeComponent('AndroidTextInput');
|
|
} else if (Platform.OS === 'ios') {
|
|
RCTMultilineTextInputView = requireNativeComponent(
|
|
'RCTMultilineTextInputView',
|
|
);
|
|
RCTSinglelineTextInputView = requireNativeComponent(
|
|
'RCTSinglelineTextInputView',
|
|
);
|
|
}
|
|
|
|
const onlyMultiline = {
|
|
onTextInput: true,
|
|
children: true,
|
|
};
|
|
|
|
export type ChangeEvent = SyntheticEvent<
|
|
$ReadOnly<{|
|
|
eventCount: number,
|
|
target: number,
|
|
text: string,
|
|
|}>,
|
|
>;
|
|
|
|
export type TextInputEvent = SyntheticEvent<
|
|
$ReadOnly<{|
|
|
eventCount: number,
|
|
previousText: string,
|
|
range: $ReadOnly<{|
|
|
start: number,
|
|
end: number,
|
|
|}>,
|
|
target: number,
|
|
text: string,
|
|
|}>,
|
|
>;
|
|
|
|
export type ContentSizeChangeEvent = SyntheticEvent<
|
|
$ReadOnly<{|
|
|
target: number,
|
|
contentSize: $ReadOnly<{|
|
|
width: number,
|
|
height: number,
|
|
|}>,
|
|
|}>,
|
|
>;
|
|
|
|
type TargetEvent = SyntheticEvent<
|
|
$ReadOnly<{|
|
|
target: number,
|
|
|}>,
|
|
>;
|
|
|
|
export type BlurEvent = TargetEvent;
|
|
export type FocusEvent = TargetEvent;
|
|
|
|
type Selection = $ReadOnly<{|
|
|
start: number,
|
|
end: number,
|
|
|}>;
|
|
|
|
export type SelectionChangeEvent = SyntheticEvent<
|
|
$ReadOnly<{|
|
|
selection: Selection,
|
|
target: number,
|
|
|}>,
|
|
>;
|
|
|
|
export type KeyPressEvent = SyntheticEvent<
|
|
$ReadOnly<{|
|
|
key: string,
|
|
target?: ?number,
|
|
eventCount?: ?number,
|
|
|}>,
|
|
>;
|
|
|
|
export type EditingEvent = SyntheticEvent<
|
|
$ReadOnly<{|
|
|
eventCount: number,
|
|
text: string,
|
|
target: number,
|
|
|}>,
|
|
>;
|
|
|
|
type DataDetectorTypesType =
|
|
| 'phoneNumber'
|
|
| 'link'
|
|
| 'address'
|
|
| 'calendarEvent'
|
|
| 'none'
|
|
| 'all';
|
|
|
|
export type KeyboardType =
|
|
// Cross Platform
|
|
| 'default'
|
|
| 'email-address'
|
|
| 'numeric'
|
|
| 'phone-pad'
|
|
| 'number-pad'
|
|
| 'decimal-pad'
|
|
// iOS-only
|
|
| 'ascii-capable'
|
|
| 'numbers-and-punctuation'
|
|
| 'url'
|
|
| 'name-phone-pad'
|
|
| 'twitter'
|
|
| 'web-search'
|
|
// Android-only
|
|
| 'visible-password';
|
|
|
|
export type ReturnKeyType =
|
|
// Cross Platform
|
|
| 'done'
|
|
| 'go'
|
|
| 'next'
|
|
| 'search'
|
|
| 'send'
|
|
// Android-only
|
|
| 'none'
|
|
| 'previous'
|
|
// iOS-only
|
|
| 'default'
|
|
| 'emergency-call'
|
|
| 'google'
|
|
| 'join'
|
|
| 'route'
|
|
| 'yahoo';
|
|
|
|
export type AutoCapitalize = 'none' | 'sentences' | 'words' | 'characters';
|
|
|
|
export type TextContentType =
|
|
| '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';
|
|
|
|
type PasswordRules = string;
|
|
|
|
type IOSProps = $ReadOnly<{|
|
|
spellCheck?: ?boolean,
|
|
keyboardAppearance?: ?('default' | 'light' | 'dark'),
|
|
enablesReturnKeyAutomatically?: ?boolean,
|
|
selectionState?: ?DocumentSelectionState,
|
|
clearButtonMode?: ?('never' | 'while-editing' | 'unless-editing' | 'always'),
|
|
clearTextOnFocus?: ?boolean,
|
|
dataDetectorTypes?:
|
|
| ?DataDetectorTypesType
|
|
| $ReadOnlyArray<DataDetectorTypesType>,
|
|
inputAccessoryViewID?: ?string,
|
|
textContentType?: ?TextContentType,
|
|
PasswordRules?: ?PasswordRules,
|
|
scrollEnabled?: ?boolean,
|
|
|}>;
|
|
|
|
type AndroidProps = $ReadOnly<{|
|
|
autoCompleteType?: ?(
|
|
| 'cc-csc'
|
|
| 'cc-exp'
|
|
| 'cc-exp-month'
|
|
| 'cc-exp-year'
|
|
| 'cc-number'
|
|
| 'email'
|
|
| 'name'
|
|
| 'password'
|
|
| 'postal-code'
|
|
| 'street-address'
|
|
| 'tel'
|
|
| 'username'
|
|
| 'off'
|
|
),
|
|
returnKeyLabel?: ?string,
|
|
numberOfLines?: ?number,
|
|
disableFullscreenUI?: ?boolean,
|
|
textBreakStrategy?: ?('simple' | 'highQuality' | 'balanced'),
|
|
underlineColorAndroid?: ?ColorValue,
|
|
inlineImageLeft?: ?string,
|
|
inlineImagePadding?: ?number,
|
|
importantForAutofill?: ?(
|
|
| 'auto'
|
|
| 'no'
|
|
| 'noExcludeDescendants'
|
|
| 'yes'
|
|
| 'yesExcludeDescendants'
|
|
),
|
|
showSoftInputOnFocus?: ?boolean,
|
|
|}>;
|
|
|
|
type Props = $ReadOnly<{|
|
|
...$Diff<ViewProps, $ReadOnly<{|style: ?ViewStyleProp|}>>,
|
|
...IOSProps,
|
|
...AndroidProps,
|
|
autoCapitalize?: ?AutoCapitalize,
|
|
autoCorrect?: ?boolean,
|
|
autoFocus?: ?boolean,
|
|
allowFontScaling?: ?boolean,
|
|
maxFontSizeMultiplier?: ?number,
|
|
editable?: ?boolean,
|
|
keyboardType?: ?KeyboardType,
|
|
returnKeyType?: ?ReturnKeyType,
|
|
maxLength?: ?number,
|
|
multiline?: ?boolean,
|
|
onBlur?: ?(e: BlurEvent) => mixed,
|
|
onFocus?: ?(e: FocusEvent) => mixed,
|
|
onChange?: ?(e: ChangeEvent) => mixed,
|
|
onChangeText?: ?(text: string) => mixed,
|
|
onContentSizeChange?: ?(e: ContentSizeChangeEvent) => mixed,
|
|
onTextInput?: ?(e: TextInputEvent) => mixed,
|
|
onEndEditing?: ?(e: EditingEvent) => mixed,
|
|
onSelectionChange?: ?(e: SelectionChangeEvent) => mixed,
|
|
onSubmitEditing?: ?(e: EditingEvent) => mixed,
|
|
onKeyPress?: ?(e: KeyPressEvent) => mixed,
|
|
onScroll?: ?(e: ScrollEvent) => mixed,
|
|
placeholder?: ?Stringish,
|
|
placeholderTextColor?: ?ColorValue,
|
|
secureTextEntry?: ?boolean,
|
|
selectionColor?: ?ColorValue,
|
|
selection?: ?$ReadOnly<{|
|
|
start: number,
|
|
end?: ?number,
|
|
|}>,
|
|
value?: ?Stringish,
|
|
defaultValue?: ?Stringish,
|
|
selectTextOnFocus?: ?boolean,
|
|
blurOnSubmit?: ?boolean,
|
|
style?: ?TextStyleProp,
|
|
caretHidden?: ?boolean,
|
|
contextMenuHidden?: ?boolean,
|
|
|}>;
|
|
|
|
const emptyFunctionThatReturnsTrue = () => true;
|
|
|
|
/**
|
|
* A foundational component for inputting text into the app via a
|
|
* keyboard. Props provide configurability for several features, such as
|
|
* auto-correction, auto-capitalization, placeholder text, and different keyboard
|
|
* types, such as a numeric keypad.
|
|
*
|
|
* The simplest use case is to plop down a `TextInput` and subscribe to the
|
|
* `onChangeText` events to read the user input. There are also other events,
|
|
* such as `onSubmitEditing` and `onFocus` that can be subscribed to. A simple
|
|
* example:
|
|
*
|
|
* ```ReactNativeWebPlayer
|
|
* import React, { Component } from 'react';
|
|
* import { AppRegistry, TextInput } from 'react-native';
|
|
*
|
|
* export default class UselessTextInput extends Component {
|
|
* constructor(props) {
|
|
* super(props);
|
|
* this.state = { text: 'Useless Placeholder' };
|
|
* }
|
|
*
|
|
* render() {
|
|
* return (
|
|
* <TextInput
|
|
* style={{height: 40, borderColor: 'gray', borderWidth: 1}}
|
|
* onChangeText={(text) => this.setState({text})}
|
|
* value={this.state.text}
|
|
* />
|
|
* );
|
|
* }
|
|
* }
|
|
*
|
|
* // skip this line if using Create React Native App
|
|
* AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);
|
|
* ```
|
|
*
|
|
* Two methods exposed via the native element are .focus() and .blur() that
|
|
* will focus or blur the TextInput programmatically.
|
|
*
|
|
* Note that some props are only available with `multiline={true/false}`.
|
|
* Additionally, border styles that apply to only one side of the element
|
|
* (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if
|
|
* `multiline=false`. To achieve the same effect, you can wrap your `TextInput`
|
|
* in a `View`:
|
|
*
|
|
* ```ReactNativeWebPlayer
|
|
* import React, { Component } from 'react';
|
|
* import { AppRegistry, View, TextInput } from 'react-native';
|
|
*
|
|
* class UselessTextInput extends Component {
|
|
* render() {
|
|
* return (
|
|
* <TextInput
|
|
* {...this.props} // Inherit any props passed to it; e.g., multiline, numberOfLines below
|
|
* editable = {true}
|
|
* maxLength = {40}
|
|
* />
|
|
* );
|
|
* }
|
|
* }
|
|
*
|
|
* export default class UselessTextInputMultiline extends Component {
|
|
* constructor(props) {
|
|
* super(props);
|
|
* this.state = {
|
|
* text: 'Useless Multiline Placeholder',
|
|
* };
|
|
* }
|
|
*
|
|
* // If you type something in the text box that is a color, the background will change to that
|
|
* // color.
|
|
* render() {
|
|
* return (
|
|
* <View style={{
|
|
* backgroundColor: this.state.text,
|
|
* borderBottomColor: '#000000',
|
|
* borderBottomWidth: 1 }}
|
|
* >
|
|
* <UselessTextInput
|
|
* multiline = {true}
|
|
* numberOfLines = {4}
|
|
* onChangeText={(text) => this.setState({text})}
|
|
* value={this.state.text}
|
|
* />
|
|
* </View>
|
|
* );
|
|
* }
|
|
* }
|
|
*
|
|
* // skip these lines if using Create React Native App
|
|
* AppRegistry.registerComponent(
|
|
* 'AwesomeProject',
|
|
* () => UselessTextInputMultiline
|
|
* );
|
|
* ```
|
|
*
|
|
* `TextInput` has by default a border at the bottom of its view. This border
|
|
* has its padding set by the background image provided by the system, and it
|
|
* cannot be changed. Solutions to avoid this is to either not set height
|
|
* explicitly, case in which the system will take care of displaying the border
|
|
* in the correct position, or to not display the border by setting
|
|
* `underlineColorAndroid` to transparent.
|
|
*
|
|
* Note that on Android performing text selection in input can change
|
|
* app's activity `windowSoftInputMode` param to `adjustResize`.
|
|
* This may cause issues with components that have position: 'absolute'
|
|
* while keyboard is active. To avoid this behavior either specify `windowSoftInputMode`
|
|
* in AndroidManifest.xml ( https://developer.android.com/guide/topics/manifest/activity-element.html )
|
|
* or control this param programmatically with native code.
|
|
*
|
|
*/
|
|
|
|
const TextInput = createReactClass({
|
|
displayName: 'TextInput',
|
|
statics: {
|
|
State: {
|
|
currentlyFocusedField: TextInputState.currentlyFocusedField,
|
|
focusTextInput: TextInputState.focusTextInput,
|
|
blurTextInput: TextInputState.blurTextInput,
|
|
},
|
|
},
|
|
propTypes: DeprecatedTextInputPropTypes,
|
|
getDefaultProps() {
|
|
return {
|
|
allowFontScaling: true,
|
|
rejectResponderTermination: 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.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);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 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}
|
|
onTextInput={this._onTextInput}
|
|
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}
|
|
accessibilityState={props.accessibilityState}
|
|
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}
|
|
onTextInput={this._onTextInput}
|
|
onSelectionChangeShouldSetResponder={emptyFunctionThatReturnsTrue}
|
|
text={this._getText()}
|
|
dataDetectorTypes={this.props.dataDetectorTypes}
|
|
onScroll={this._onScroll}
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<TouchableWithoutFeedback
|
|
onLayout={props.onLayout}
|
|
onPress={this._onPress}
|
|
rejectResponderTermination={props.rejectResponderTermination}
|
|
accessible={props.accessible}
|
|
accessibilityLabel={props.accessibilityLabel}
|
|
accessibilityRole={props.accessibilityRole}
|
|
accessibilityStates={props.accessibilityStates}
|
|
accessibilityState={props.accessibilityState}
|
|
nativeID={this.props.nativeID}
|
|
testID={props.testID}>
|
|
{textContainer}
|
|
</TouchableWithoutFeedback>
|
|
);
|
|
},
|
|
|
|
_renderAndroid: function() {
|
|
const props = Object.assign({}, this.props);
|
|
props.style = [this.props.style];
|
|
props.autoCapitalize = props.autoCapitalize || 'sentences';
|
|
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}
|
|
onChange={this._onChange}
|
|
onSelectionChange={this._onSelectionChange}
|
|
onTextInput={this._onTextInput}
|
|
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}
|
|
accessibilityState={this.props.accessibilityState}
|
|
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) {
|
|
ReactNative.setNativeProps(this._inputRef, {
|
|
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
|
|
) {
|
|
ReactNative.setNativeProps(this._inputRef, 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();
|
|
}
|
|
},
|
|
|
|
_onTextInput: function(event: TextInputEvent) {
|
|
this.props.onTextInput && this.props.onTextInput(event);
|
|
},
|
|
|
|
_onScroll: function(event: ScrollEvent) {
|
|
this.props.onScroll && this.props.onScroll(event);
|
|
},
|
|
});
|
|
|
|
class InternalTextInputType extends ReactNative.NativeComponent<Props> {
|
|
clear() {}
|
|
|
|
// $FlowFixMe
|
|
isFocused(): boolean {}
|
|
}
|
|
|
|
const TypedTextInput = ((TextInput: any): Class<InternalTextInputType>);
|
|
|
|
const styles = StyleSheet.create({
|
|
multilineInput: {
|
|
// This default top inset makes RCTMultilineTextInputView seem as close as possible
|
|
// to single-line RCTSinglelineTextInputView defaults, using the system defaults
|
|
// of font size 17 and a height of 31 points.
|
|
paddingTop: 5,
|
|
},
|
|
});
|
|
|
|
module.exports = TypedTextInput;
|