Files
react-native/Libraries/Components/TextInput/RCTTextInputViewConfig.js
T
bang9 048194849b feat(iOS): added lineBreakStrategy attribute to Text/TextInput (#31272)
Summary:
iOS did not support the implementation of Korean word-wrap(line-break) before iOS14.
If the attribute applied, the word-wrap of Korean will works.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[iOS] [Added] -  Line break strategy for Text and TextInput components

Pull Request resolved: https://github.com/facebook/react-native/pull/31272

Test Plan:
1. Test build and run on above iOS 14.
2. Test it does not affect existing text components when set default(none) strategy.
3. Test whether word-wrap works with Korean when set hangul-word strategy.

<img src="https://user-images.githubusercontent.com/26326015/112963967-d7f70c00-9182-11eb-9a34-8c758b80c219.png" width="300" height="" style="max-width:100%;">

Reviewed By: javache

Differential Revision: D39824809

Pulled By: lunaleaps

fbshipit-source-id: 42cb0385221a38c84e80d3494d1bfc1934ecf32b
2022-10-17 13:14:17 -07:00

166 lines
4.2 KiB
JavaScript

/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow strict-local
* @format
*/
import type {PartialViewConfig} from '../../Renderer/shims/ReactNativeTypes';
import {ConditionallyIgnoredEventHandlers} from '../../NativeComponent/ViewConfigIgnore';
type PartialViewConfigWithoutName = $Rest<
PartialViewConfig,
{uiViewClassName: string},
>;
const RCTTextInputViewConfig = {
bubblingEventTypes: {
topBlur: {
phasedRegistrationNames: {
bubbled: 'onBlur',
captured: 'onBlurCapture',
},
},
topChange: {
phasedRegistrationNames: {
bubbled: 'onChange',
captured: 'onChangeCapture',
},
},
topContentSizeChange: {
phasedRegistrationNames: {
captured: 'onContentSizeChangeCapture',
bubbled: 'onContentSizeChange',
},
},
topEndEditing: {
phasedRegistrationNames: {
bubbled: 'onEndEditing',
captured: 'onEndEditingCapture',
},
},
topFocus: {
phasedRegistrationNames: {
bubbled: 'onFocus',
captured: 'onFocusCapture',
},
},
topKeyPress: {
phasedRegistrationNames: {
bubbled: 'onKeyPress',
captured: 'onKeyPressCapture',
},
},
topSubmitEditing: {
phasedRegistrationNames: {
bubbled: 'onSubmitEditing',
captured: 'onSubmitEditingCapture',
},
},
topTouchCancel: {
phasedRegistrationNames: {
bubbled: 'onTouchCancel',
captured: 'onTouchCancelCapture',
},
},
topTouchEnd: {
phasedRegistrationNames: {
bubbled: 'onTouchEnd',
captured: 'onTouchEndCapture',
},
},
topTouchMove: {
phasedRegistrationNames: {
bubbled: 'onTouchMove',
captured: 'onTouchMoveCapture',
},
},
},
directEventTypes: {
topTextInput: {
registrationName: 'onTextInput',
},
topKeyPressSync: {
registrationName: 'onKeyPressSync',
},
topScroll: {
registrationName: 'onScroll',
},
topSelectionChange: {
registrationName: 'onSelectionChange',
},
topChangeSync: {
registrationName: 'onChangeSync',
},
},
validAttributes: {
fontSize: true,
fontWeight: true,
fontVariant: true,
// flowlint-next-line untyped-import:off
textShadowOffset: {diff: require('../../Utilities/differ/sizesDiffer')},
allowFontScaling: true,
fontStyle: true,
textTransform: true,
textAlign: true,
fontFamily: true,
lineHeight: true,
isHighlighted: true,
writingDirection: true,
textDecorationLine: true,
textShadowRadius: true,
letterSpacing: true,
textDecorationStyle: true,
textDecorationColor: {process: require('../../StyleSheet/processColor')},
color: {process: require('../../StyleSheet/processColor')},
maxFontSizeMultiplier: true,
textShadowColor: {process: require('../../StyleSheet/processColor')},
editable: true,
inputAccessoryViewID: true,
caretHidden: true,
enablesReturnKeyAutomatically: true,
placeholderTextColor: {process: require('../../StyleSheet/processColor')},
clearButtonMode: true,
keyboardType: true,
selection: true,
returnKeyType: true,
submitBehavior: true,
mostRecentEventCount: true,
scrollEnabled: true,
selectionColor: {process: require('../../StyleSheet/processColor')},
contextMenuHidden: true,
secureTextEntry: true,
placeholder: true,
autoCorrect: true,
multiline: true,
textContentType: true,
maxLength: true,
autoCapitalize: true,
keyboardAppearance: true,
passwordRules: true,
spellCheck: true,
selectTextOnFocus: true,
text: true,
clearTextOnFocus: true,
showSoftInputOnFocus: true,
autoFocus: true,
lineBreakStrategyIOS: true,
...ConditionallyIgnoredEventHandlers({
onChange: true,
onSelectionChange: true,
onContentSizeChange: true,
onScroll: true,
onChangeSync: true,
onKeyPressSync: true,
onTextInput: true,
}),
},
};
module.exports = (RCTTextInputViewConfig: PartialViewConfigWithoutName);