413 lines
13 KiB
JavaScript
413 lines
13 KiB
JavaScript
|
/**
|
||
|
|
* Copyright (c) Nicolas Gallagher.
|
||
|
|
* 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.
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
import { forwardRef, useCallback, useMemo, useRef } from 'react';
|
||
|
|
import createElement from '../createElement';
|
||
|
|
import css from '../StyleSheet/css';
|
||
|
|
import pick from '../../modules/pick';
|
||
|
|
import useElementLayout from '../../hooks/useElementLayout';
|
||
|
|
import useLayoutEffect from '../../hooks/useLayoutEffect';
|
||
|
|
import useMergeRefs from '../../modules/useMergeRefs';
|
||
|
|
import usePlatformMethods from '../../hooks/usePlatformMethods';
|
||
|
|
import useResponderEvents from '../../hooks/useResponderEvents';
|
||
|
|
import StyleSheet from '../StyleSheet';
|
||
|
|
import TextInputState from '../../modules/TextInputState';
|
||
|
|
/**
|
||
|
|
* Determines whether a 'selection' prop differs from a node's existing
|
||
|
|
* selection state.
|
||
|
|
*/
|
||
|
|
|
||
|
|
var isSelectionStale = function isSelectionStale(node, selection) {
|
||
|
|
var selectionEnd = node.selectionEnd,
|
||
|
|
selectionStart = node.selectionStart;
|
||
|
|
var start = selection.start,
|
||
|
|
end = selection.end;
|
||
|
|
return start !== selectionStart || end !== selectionEnd;
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Certain input types do no support 'selectSelectionRange' and will throw an
|
||
|
|
* error.
|
||
|
|
*/
|
||
|
|
|
||
|
|
|
||
|
|
var setSelection = function setSelection(node, selection) {
|
||
|
|
if (isSelectionStale(node, selection)) {
|
||
|
|
var start = selection.start,
|
||
|
|
end = selection.end;
|
||
|
|
|
||
|
|
try {
|
||
|
|
node.setSelectionRange(start, end || start);
|
||
|
|
} catch (e) {}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var forwardPropsList = {
|
||
|
|
accessibilityLabel: true,
|
||
|
|
accessibilityLiveRegion: true,
|
||
|
|
accessibilityRole: true,
|
||
|
|
accessibilityState: true,
|
||
|
|
accessibilityValue: true,
|
||
|
|
accessible: true,
|
||
|
|
autoCapitalize: true,
|
||
|
|
autoComplete: true,
|
||
|
|
autoCorrect: true,
|
||
|
|
autoFocus: true,
|
||
|
|
children: true,
|
||
|
|
classList: true,
|
||
|
|
defaultValue: true,
|
||
|
|
dir: true,
|
||
|
|
disabled: true,
|
||
|
|
importantForAccessibility: true,
|
||
|
|
maxLength: true,
|
||
|
|
nativeID: true,
|
||
|
|
onBlur: true,
|
||
|
|
onChange: true,
|
||
|
|
onClick: true,
|
||
|
|
onClickCapture: true,
|
||
|
|
onContextMenu: true,
|
||
|
|
onFocus: true,
|
||
|
|
onScroll: true,
|
||
|
|
onTouchCancel: true,
|
||
|
|
onTouchCancelCapture: true,
|
||
|
|
onTouchEnd: true,
|
||
|
|
onTouchEndCapture: true,
|
||
|
|
onTouchMove: true,
|
||
|
|
onTouchMoveCapture: true,
|
||
|
|
onTouchStart: true,
|
||
|
|
onTouchStartCapture: true,
|
||
|
|
placeholder: true,
|
||
|
|
pointerEvents: true,
|
||
|
|
readOnly: true,
|
||
|
|
ref: true,
|
||
|
|
rows: true,
|
||
|
|
spellCheck: true,
|
||
|
|
style: true,
|
||
|
|
value: true,
|
||
|
|
testID: true,
|
||
|
|
type: true,
|
||
|
|
// unstable
|
||
|
|
dataSet: true,
|
||
|
|
onMouseDown: true,
|
||
|
|
onMouseEnter: true,
|
||
|
|
onMouseLeave: true,
|
||
|
|
onMouseMove: true,
|
||
|
|
onMouseOver: true,
|
||
|
|
onMouseOut: true,
|
||
|
|
onMouseUp: true
|
||
|
|
};
|
||
|
|
|
||
|
|
var pickProps = function pickProps(props) {
|
||
|
|
return pick(props, forwardPropsList);
|
||
|
|
}; // If an Input Method Editor is processing key input, the 'keyCode' is 229.
|
||
|
|
// https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode
|
||
|
|
|
||
|
|
|
||
|
|
function isEventComposing(nativeEvent) {
|
||
|
|
return nativeEvent.isComposing || nativeEvent.keyCode === 229;
|
||
|
|
}
|
||
|
|
|
||
|
|
var TextInput = forwardRef(function (props, forwardedRef) {
|
||
|
|
var _props$autoCapitalize = props.autoCapitalize,
|
||
|
|
autoCapitalize = _props$autoCapitalize === void 0 ? 'sentences' : _props$autoCapitalize,
|
||
|
|
autoComplete = props.autoComplete,
|
||
|
|
autoCompleteType = props.autoCompleteType,
|
||
|
|
_props$autoCorrect = props.autoCorrect,
|
||
|
|
autoCorrect = _props$autoCorrect === void 0 ? true : _props$autoCorrect,
|
||
|
|
blurOnSubmit = props.blurOnSubmit,
|
||
|
|
clearTextOnFocus = props.clearTextOnFocus,
|
||
|
|
dir = props.dir,
|
||
|
|
_props$editable = props.editable,
|
||
|
|
editable = _props$editable === void 0 ? true : _props$editable,
|
||
|
|
_props$keyboardType = props.keyboardType,
|
||
|
|
keyboardType = _props$keyboardType === void 0 ? 'default' : _props$keyboardType,
|
||
|
|
_props$multiline = props.multiline,
|
||
|
|
multiline = _props$multiline === void 0 ? false : _props$multiline,
|
||
|
|
_props$numberOfLines = props.numberOfLines,
|
||
|
|
numberOfLines = _props$numberOfLines === void 0 ? 1 : _props$numberOfLines,
|
||
|
|
onBlur = props.onBlur,
|
||
|
|
onChange = props.onChange,
|
||
|
|
onChangeText = props.onChangeText,
|
||
|
|
onContentSizeChange = props.onContentSizeChange,
|
||
|
|
onFocus = props.onFocus,
|
||
|
|
onKeyPress = props.onKeyPress,
|
||
|
|
onLayout = props.onLayout,
|
||
|
|
onMoveShouldSetResponder = props.onMoveShouldSetResponder,
|
||
|
|
onMoveShouldSetResponderCapture = props.onMoveShouldSetResponderCapture,
|
||
|
|
onResponderEnd = props.onResponderEnd,
|
||
|
|
onResponderGrant = props.onResponderGrant,
|
||
|
|
onResponderMove = props.onResponderMove,
|
||
|
|
onResponderReject = props.onResponderReject,
|
||
|
|
onResponderRelease = props.onResponderRelease,
|
||
|
|
onResponderStart = props.onResponderStart,
|
||
|
|
onResponderTerminate = props.onResponderTerminate,
|
||
|
|
onResponderTerminationRequest = props.onResponderTerminationRequest,
|
||
|
|
onScrollShouldSetResponder = props.onScrollShouldSetResponder,
|
||
|
|
onScrollShouldSetResponderCapture = props.onScrollShouldSetResponderCapture,
|
||
|
|
onSelectionChange = props.onSelectionChange,
|
||
|
|
onSelectionChangeShouldSetResponder = props.onSelectionChangeShouldSetResponder,
|
||
|
|
onSelectionChangeShouldSetResponderCapture = props.onSelectionChangeShouldSetResponderCapture,
|
||
|
|
onStartShouldSetResponder = props.onStartShouldSetResponder,
|
||
|
|
onStartShouldSetResponderCapture = props.onStartShouldSetResponderCapture,
|
||
|
|
onSubmitEditing = props.onSubmitEditing,
|
||
|
|
placeholderTextColor = props.placeholderTextColor,
|
||
|
|
returnKeyType = props.returnKeyType,
|
||
|
|
_props$secureTextEntr = props.secureTextEntry,
|
||
|
|
secureTextEntry = _props$secureTextEntr === void 0 ? false : _props$secureTextEntr,
|
||
|
|
selection = props.selection,
|
||
|
|
selectTextOnFocus = props.selectTextOnFocus,
|
||
|
|
spellCheck = props.spellCheck;
|
||
|
|
var type;
|
||
|
|
var inputMode;
|
||
|
|
|
||
|
|
switch (keyboardType) {
|
||
|
|
case 'email-address':
|
||
|
|
type = 'email';
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 'number-pad':
|
||
|
|
case 'numeric':
|
||
|
|
inputMode = 'numeric';
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 'decimal-pad':
|
||
|
|
inputMode = 'decimal';
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 'phone-pad':
|
||
|
|
type = 'tel';
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 'search':
|
||
|
|
case 'web-search':
|
||
|
|
type = 'search';
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 'url':
|
||
|
|
type = 'url';
|
||
|
|
break;
|
||
|
|
|
||
|
|
default:
|
||
|
|
type = 'text';
|
||
|
|
}
|
||
|
|
|
||
|
|
if (secureTextEntry) {
|
||
|
|
type = 'password';
|
||
|
|
}
|
||
|
|
|
||
|
|
var dimensions = useRef({
|
||
|
|
height: null,
|
||
|
|
width: null
|
||
|
|
});
|
||
|
|
var hostRef = useRef(null);
|
||
|
|
var handleContentSizeChange = useCallback(function () {
|
||
|
|
var node = hostRef.current;
|
||
|
|
|
||
|
|
if (multiline && onContentSizeChange && node != null) {
|
||
|
|
var newHeight = node.scrollHeight;
|
||
|
|
var newWidth = node.scrollWidth;
|
||
|
|
|
||
|
|
if (newHeight !== dimensions.current.height || newWidth !== dimensions.current.width) {
|
||
|
|
dimensions.current.height = newHeight;
|
||
|
|
dimensions.current.width = newWidth;
|
||
|
|
onContentSizeChange({
|
||
|
|
nativeEvent: {
|
||
|
|
contentSize: {
|
||
|
|
height: dimensions.current.height,
|
||
|
|
width: dimensions.current.width
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, [hostRef, multiline, onContentSizeChange]);
|
||
|
|
var imperativeRef = useMemo(function () {
|
||
|
|
return function (hostNode) {
|
||
|
|
// TextInput needs to add more methods to the hostNode in addition to those
|
||
|
|
// added by `usePlatformMethods`. This is temporarily until an API like
|
||
|
|
// `TextInput.clear(hostRef)` is added to React Native.
|
||
|
|
if (hostNode != null) {
|
||
|
|
hostNode.clear = function () {
|
||
|
|
if (hostNode != null) {
|
||
|
|
hostNode.value = '';
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
hostNode.isFocused = function () {
|
||
|
|
return hostNode != null && TextInputState.currentlyFocusedField() === hostNode;
|
||
|
|
};
|
||
|
|
|
||
|
|
handleContentSizeChange();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}, [handleContentSizeChange]);
|
||
|
|
|
||
|
|
function handleBlur(e) {
|
||
|
|
TextInputState._currentlyFocusedNode = null;
|
||
|
|
|
||
|
|
if (onBlur) {
|
||
|
|
e.nativeEvent.text = e.target.value;
|
||
|
|
onBlur(e);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleChange(e) {
|
||
|
|
var text = e.target.value;
|
||
|
|
e.nativeEvent.text = text;
|
||
|
|
handleContentSizeChange();
|
||
|
|
|
||
|
|
if (onChange) {
|
||
|
|
onChange(e);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (onChangeText) {
|
||
|
|
onChangeText(text);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleFocus(e) {
|
||
|
|
var node = hostRef.current;
|
||
|
|
|
||
|
|
if (node != null) {
|
||
|
|
TextInputState._currentlyFocusedNode = node;
|
||
|
|
|
||
|
|
if (onFocus) {
|
||
|
|
e.nativeEvent.text = e.target.value;
|
||
|
|
onFocus(e);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (clearTextOnFocus) {
|
||
|
|
node.value = '';
|
||
|
|
}
|
||
|
|
|
||
|
|
if (selectTextOnFocus) {
|
||
|
|
node.select();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleKeyDown(e) {
|
||
|
|
// Prevent key events bubbling (see #612)
|
||
|
|
e.stopPropagation();
|
||
|
|
var blurOnSubmitDefault = !multiline;
|
||
|
|
var shouldBlurOnSubmit = blurOnSubmit == null ? blurOnSubmitDefault : blurOnSubmit;
|
||
|
|
var nativeEvent = e.nativeEvent;
|
||
|
|
var isComposing = isEventComposing(nativeEvent);
|
||
|
|
|
||
|
|
if (onKeyPress) {
|
||
|
|
onKeyPress(e);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (e.key === 'Enter' && !e.shiftKey && // Do not call submit if composition is occuring.
|
||
|
|
!isComposing && !e.isDefaultPrevented()) {
|
||
|
|
if ((blurOnSubmit || !multiline) && onSubmitEditing) {
|
||
|
|
// prevent "Enter" from inserting a newline or submitting a form
|
||
|
|
e.preventDefault();
|
||
|
|
nativeEvent.text = e.target.value;
|
||
|
|
onSubmitEditing(e);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (shouldBlurOnSubmit && hostRef.current != null) {
|
||
|
|
hostRef.current.blur();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleSelectionChange(e) {
|
||
|
|
if (onSelectionChange) {
|
||
|
|
try {
|
||
|
|
var node = e.target;
|
||
|
|
var selectionStart = node.selectionStart,
|
||
|
|
selectionEnd = node.selectionEnd;
|
||
|
|
e.nativeEvent.selection = {
|
||
|
|
start: selectionStart,
|
||
|
|
end: selectionEnd
|
||
|
|
};
|
||
|
|
e.nativeEvent.text = e.target.value;
|
||
|
|
onSelectionChange(e);
|
||
|
|
} catch (e) {}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
useLayoutEffect(function () {
|
||
|
|
var node = hostRef.current;
|
||
|
|
|
||
|
|
if (node != null && selection != null) {
|
||
|
|
setSelection(node, selection);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (document.activeElement === node) {
|
||
|
|
TextInputState._currentlyFocusedNode = node;
|
||
|
|
}
|
||
|
|
}, [hostRef, selection]);
|
||
|
|
var component = multiline ? 'textarea' : 'input';
|
||
|
|
var classList = [classes.textinput];
|
||
|
|
var style = StyleSheet.compose(props.style, placeholderTextColor && {
|
||
|
|
placeholderTextColor: placeholderTextColor
|
||
|
|
});
|
||
|
|
useElementLayout(hostRef, onLayout);
|
||
|
|
useResponderEvents(hostRef, {
|
||
|
|
onMoveShouldSetResponder: onMoveShouldSetResponder,
|
||
|
|
onMoveShouldSetResponderCapture: onMoveShouldSetResponderCapture,
|
||
|
|
onResponderEnd: onResponderEnd,
|
||
|
|
onResponderGrant: onResponderGrant,
|
||
|
|
onResponderMove: onResponderMove,
|
||
|
|
onResponderReject: onResponderReject,
|
||
|
|
onResponderRelease: onResponderRelease,
|
||
|
|
onResponderStart: onResponderStart,
|
||
|
|
onResponderTerminate: onResponderTerminate,
|
||
|
|
onResponderTerminationRequest: onResponderTerminationRequest,
|
||
|
|
onScrollShouldSetResponder: onScrollShouldSetResponder,
|
||
|
|
onScrollShouldSetResponderCapture: onScrollShouldSetResponderCapture,
|
||
|
|
onSelectionChangeShouldSetResponder: onSelectionChangeShouldSetResponder,
|
||
|
|
onSelectionChangeShouldSetResponderCapture: onSelectionChangeShouldSetResponderCapture,
|
||
|
|
onStartShouldSetResponder: onStartShouldSetResponder,
|
||
|
|
onStartShouldSetResponderCapture: onStartShouldSetResponderCapture
|
||
|
|
});
|
||
|
|
var supportedProps = pickProps(props);
|
||
|
|
supportedProps.autoCapitalize = autoCapitalize;
|
||
|
|
supportedProps.autoComplete = autoComplete || autoCompleteType || 'on';
|
||
|
|
supportedProps.autoCorrect = autoCorrect ? 'on' : 'off';
|
||
|
|
supportedProps.classList = classList; // 'auto' by default allows browsers to infer writing direction
|
||
|
|
|
||
|
|
supportedProps.dir = dir !== undefined ? dir : 'auto';
|
||
|
|
supportedProps.enterkeyhint = returnKeyType;
|
||
|
|
supportedProps.onBlur = handleBlur;
|
||
|
|
supportedProps.onChange = handleChange;
|
||
|
|
supportedProps.onFocus = handleFocus;
|
||
|
|
supportedProps.onKeyDown = handleKeyDown;
|
||
|
|
supportedProps.onSelect = handleSelectionChange;
|
||
|
|
supportedProps.readOnly = !editable;
|
||
|
|
supportedProps.rows = multiline ? numberOfLines : undefined;
|
||
|
|
supportedProps.spellCheck = spellCheck != null ? spellCheck : autoCorrect;
|
||
|
|
supportedProps.style = style;
|
||
|
|
supportedProps.type = multiline ? undefined : type;
|
||
|
|
supportedProps.inputMode = inputMode;
|
||
|
|
var platformMethodsRef = usePlatformMethods(supportedProps);
|
||
|
|
var setRef = useMergeRefs(hostRef, platformMethodsRef, imperativeRef, forwardedRef);
|
||
|
|
supportedProps.ref = setRef;
|
||
|
|
return createElement(component, supportedProps);
|
||
|
|
});
|
||
|
|
TextInput.displayName = 'TextInput'; // $FlowFixMe
|
||
|
|
|
||
|
|
TextInput.State = TextInputState;
|
||
|
|
var classes = css.create({
|
||
|
|
textinput: {
|
||
|
|
MozAppearance: 'textfield',
|
||
|
|
WebkitAppearance: 'none',
|
||
|
|
backgroundColor: 'transparent',
|
||
|
|
border: '0 solid black',
|
||
|
|
borderRadius: 0,
|
||
|
|
boxSizing: 'border-box',
|
||
|
|
font: '14px System',
|
||
|
|
margin: 0,
|
||
|
|
padding: 0,
|
||
|
|
resize: 'none'
|
||
|
|
}
|
||
|
|
});
|
||
|
|
export default TextInput;
|