mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Pieter Vanderwerff
66c6a75650
Summary: Add annotations to function parameters required for Flow's Local Type Inference project. This codemod prepares the codebase to match Flow's new typechecking algorithm. The new algorithm will make Flow more reliable and predictable. Reviewed By: bradzacher Differential Revision: D37388949 fbshipit-source-id: cdcbc98035ce9b6994842005ea46df42de54f9b8
466 lines
13 KiB
JavaScript
466 lines
13 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.
|
|
*
|
|
* @format
|
|
* @flow
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
const React = require('react');
|
|
|
|
const {
|
|
Text,
|
|
TextInput,
|
|
View,
|
|
StyleSheet,
|
|
Slider,
|
|
Switch,
|
|
} = require('react-native');
|
|
|
|
const TextInputSharedExamples = require('./TextInputSharedExamples.js');
|
|
|
|
import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
|
|
|
|
class ToggleDefaultPaddingExample extends React.Component<
|
|
$FlowFixMeProps,
|
|
$FlowFixMeState,
|
|
> {
|
|
/* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
|
|
* LTI update could not be added via codemod */
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {hasPadding: false};
|
|
}
|
|
render() {
|
|
return (
|
|
<View>
|
|
<TextInput style={this.state.hasPadding ? {padding: 0} : null} />
|
|
<Text
|
|
onPress={() => this.setState({hasPadding: !this.state.hasPadding})}>
|
|
Toggle padding
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
class AutogrowingTextInputExample extends React.Component<{...}> {
|
|
/* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
|
|
* LTI update could not be added via codemod */
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
|
|
* when making Flow check .android.js files. */
|
|
this.state = {
|
|
width: 100,
|
|
multiline: true,
|
|
text: '',
|
|
contentSize: {
|
|
width: 0,
|
|
height: 0,
|
|
},
|
|
};
|
|
}
|
|
|
|
/* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
|
|
* LTI update could not be added via codemod */
|
|
UNSAFE_componentWillReceiveProps(props) {
|
|
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
|
|
* when making Flow check .android.js files. */
|
|
this.setState({
|
|
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
|
|
* when making Flow check .android.js files. */
|
|
multiline: props.multiline,
|
|
});
|
|
}
|
|
|
|
render() {
|
|
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
|
|
* when making Flow check .android.js files. */
|
|
const {style, multiline, ...props} = this.props;
|
|
return (
|
|
<View>
|
|
<Text>Width:</Text>
|
|
<Slider
|
|
value={100}
|
|
minimumValue={0}
|
|
maximumValue={100}
|
|
step={10}
|
|
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
|
|
* found when making Flow check .android.js files. */
|
|
onValueChange={value => this.setState({width: value})}
|
|
/>
|
|
<Text>Multiline:</Text>
|
|
<Switch
|
|
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
|
|
* found when making Flow check .android.js files. */
|
|
value={this.state.multiline}
|
|
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
|
|
* found when making Flow check .android.js files. */
|
|
onValueChange={value => this.setState({multiline: value})}
|
|
/>
|
|
<Text>TextInput:</Text>
|
|
{/* $FlowFixMe(>=0.122.0 site=react_native_android_fb) This comment
|
|
* suppresses an error found when Flow v0.122.0 was deployed. To see
|
|
* the error, delete this comment and run Flow. */}
|
|
<TextInput
|
|
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
|
|
* found when making Flow check .android.js files. */
|
|
multiline={this.state.multiline}
|
|
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
|
|
* found when making Flow check .android.js files. */
|
|
style={[style, {width: this.state.width + '%'}]}
|
|
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
|
|
* found when making Flow check .android.js files. */
|
|
onChangeText={value => this.setState({text: value})}
|
|
onContentSizeChange={event =>
|
|
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
|
|
* found when making Flow check .android.js files. */
|
|
this.setState({contentSize: event.nativeEvent.contentSize})
|
|
}
|
|
{...props}
|
|
/>
|
|
<Text>Plain text value representation:</Text>
|
|
{/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
|
|
* found when making Flow check .android.js files. */}
|
|
<Text>{this.state.text}</Text>
|
|
{/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
|
|
* found when making Flow check .android.js files. */}
|
|
<Text>Content Size: {JSON.stringify(this.state.contentSize)}</Text>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
multiline: {
|
|
height: 60,
|
|
fontSize: 16,
|
|
},
|
|
singleLine: {
|
|
fontSize: 16,
|
|
},
|
|
singleLineWithHeightTextInput: {
|
|
height: 30,
|
|
},
|
|
});
|
|
|
|
exports.title = 'TextInput';
|
|
exports.documentationURL = 'https://reactnative.dev/docs/textinput';
|
|
exports.category = 'Basic';
|
|
exports.description = 'Single and multi-line text inputs.';
|
|
exports.examples = ([
|
|
...TextInputSharedExamples,
|
|
{
|
|
title: 'Colors and text inputs',
|
|
render: function (): React.Node {
|
|
return (
|
|
<View>
|
|
<TextInput
|
|
style={[styles.singleLine]}
|
|
defaultValue="Default color text"
|
|
/>
|
|
<TextInput
|
|
style={[styles.singleLine, {color: 'green'}]}
|
|
defaultValue="Green Text"
|
|
/>
|
|
<TextInput
|
|
placeholder="Default placeholder text color"
|
|
style={styles.singleLine}
|
|
/>
|
|
<TextInput
|
|
placeholder="Red placeholder text color"
|
|
placeholderTextColor="red"
|
|
style={styles.singleLine}
|
|
/>
|
|
<TextInput
|
|
placeholder="Default underline color"
|
|
style={styles.singleLine}
|
|
/>
|
|
<TextInput
|
|
placeholder="Blue underline color"
|
|
style={styles.singleLine}
|
|
underlineColorAndroid="blue"
|
|
/>
|
|
<TextInput
|
|
defaultValue="Same BackgroundColor as View "
|
|
style={[
|
|
styles.singleLine,
|
|
{backgroundColor: 'rgba(100, 100, 100, 0.3)'},
|
|
]}>
|
|
<Text style={{backgroundColor: 'rgba(100, 100, 100, 0.3)'}}>
|
|
Darker backgroundColor
|
|
</Text>
|
|
</TextInput>
|
|
<TextInput
|
|
defaultValue="Highlight Color is red"
|
|
selectionColor={'red'}
|
|
style={styles.singleLine}
|
|
/>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Font Weight',
|
|
render: function (): React.Node {
|
|
return (
|
|
<View>
|
|
<TextInput
|
|
defaultValue="Font Weight (default)"
|
|
style={[styles.singleLine]}
|
|
/>
|
|
{[
|
|
'normal',
|
|
'bold',
|
|
'900',
|
|
'800',
|
|
'700',
|
|
'600',
|
|
'500',
|
|
'400',
|
|
'300',
|
|
'200',
|
|
'100',
|
|
].map(fontWeight => (
|
|
<TextInput
|
|
defaultValue={`Font Weight (${fontWeight})`}
|
|
key={fontWeight}
|
|
style={[styles.singleLine, {fontWeight}]}
|
|
/>
|
|
))}
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Text input, themes and heights',
|
|
render: function (): React.Node {
|
|
return (
|
|
<TextInput
|
|
placeholder="If you set height, beware of padding set from themes"
|
|
style={[styles.singleLineWithHeightTextInput]}
|
|
/>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'letterSpacing',
|
|
render: function (): React.Node {
|
|
return (
|
|
<View>
|
|
<TextInput
|
|
style={[styles.singleLine, {letterSpacing: 0}]}
|
|
placeholder="letterSpacing = 0"
|
|
/>
|
|
<TextInput
|
|
style={[styles.singleLine, {letterSpacing: 2}]}
|
|
placeholder="letterSpacing = 2"
|
|
/>
|
|
<TextInput
|
|
style={[styles.singleLine, {letterSpacing: 9}]}
|
|
placeholder="letterSpacing = 9"
|
|
/>
|
|
<TextInput
|
|
style={[styles.singleLine, {letterSpacing: -1}]}
|
|
placeholder="letterSpacing = -1"
|
|
/>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Passwords',
|
|
render: function (): React.Node {
|
|
return (
|
|
<View>
|
|
<TextInput
|
|
defaultValue="iloveturtles"
|
|
secureTextEntry={true}
|
|
style={styles.singleLine}
|
|
/>
|
|
<TextInput
|
|
secureTextEntry={true}
|
|
style={[styles.singleLine, {color: 'red'}]}
|
|
placeholder="color is supported too"
|
|
placeholderTextColor="red"
|
|
/>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Editable',
|
|
render: function (): React.Node {
|
|
return (
|
|
<TextInput
|
|
defaultValue="Can't touch this! (>'-')> ^(' - ')^ <('-'<) (>'-')> ^(' - ')^"
|
|
editable={false}
|
|
style={styles.singleLine}
|
|
/>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Multiline',
|
|
render: function (): React.Node {
|
|
return (
|
|
<View>
|
|
<TextInput
|
|
autoCorrect={true}
|
|
placeholder="multiline, aligned top-left"
|
|
placeholderTextColor="red"
|
|
multiline={true}
|
|
style={[
|
|
styles.multiline,
|
|
{textAlign: 'left', textAlignVertical: 'top'},
|
|
]}
|
|
/>
|
|
<TextInput
|
|
autoCorrect={true}
|
|
placeholder="multiline, aligned center"
|
|
placeholderTextColor="green"
|
|
multiline={true}
|
|
style={[
|
|
styles.multiline,
|
|
{textAlign: 'center', textAlignVertical: 'center'},
|
|
]}
|
|
/>
|
|
<TextInput
|
|
autoCorrect={true}
|
|
multiline={true}
|
|
style={[
|
|
styles.multiline,
|
|
{color: 'blue'},
|
|
{textAlign: 'right', textAlignVertical: 'bottom'},
|
|
]}>
|
|
<Text style={styles.multiline}>
|
|
multiline with children, aligned bottom-right
|
|
</Text>
|
|
</TextInput>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Fixed number of lines',
|
|
platform: 'android',
|
|
render: function (): React.Node {
|
|
return (
|
|
<View>
|
|
<TextInput
|
|
numberOfLines={2}
|
|
multiline={true}
|
|
placeholder="Two line input"
|
|
/>
|
|
<TextInput
|
|
numberOfLines={5}
|
|
multiline={true}
|
|
placeholder="Five line input"
|
|
/>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Auto-expanding',
|
|
render: function (): React.Node {
|
|
return (
|
|
<View>
|
|
<AutogrowingTextInputExample
|
|
enablesReturnKeyAutomatically={true}
|
|
returnKeyType="done"
|
|
multiline={true}
|
|
style={{maxHeight: 400, minHeight: 20, backgroundColor: '#eeeeee'}}>
|
|
generic generic generic
|
|
<Text style={{fontSize: 6, color: 'red'}}>
|
|
small small small small small small
|
|
</Text>
|
|
<Text>regular regular</Text>
|
|
<Text style={{fontSize: 30, color: 'green'}}>
|
|
huge huge huge huge huge
|
|
</Text>
|
|
generic generic generic
|
|
</AutogrowingTextInputExample>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Return key',
|
|
render: function (): React.Node {
|
|
const returnKeyTypes = [
|
|
'none',
|
|
'go',
|
|
'search',
|
|
'send',
|
|
'done',
|
|
'previous',
|
|
'next',
|
|
];
|
|
const returnKeyLabels = ['Compile', 'React Native'];
|
|
const examples = returnKeyTypes.map(type => {
|
|
return (
|
|
<TextInput
|
|
key={type}
|
|
returnKeyType={type}
|
|
placeholder={'returnKeyType: ' + type}
|
|
style={styles.singleLine}
|
|
/>
|
|
);
|
|
});
|
|
const types = returnKeyLabels.map(type => {
|
|
return (
|
|
<TextInput
|
|
key={type}
|
|
returnKeyLabel={type}
|
|
placeholder={'returnKeyLabel: ' + type}
|
|
style={styles.singleLine}
|
|
/>
|
|
);
|
|
});
|
|
return (
|
|
<View>
|
|
{examples}
|
|
{types}
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Inline Images',
|
|
render: function (): React.Node {
|
|
return (
|
|
<View>
|
|
<TextInput
|
|
inlineImageLeft="ic_menu_black_24dp"
|
|
placeholder="This has drawableLeft set"
|
|
style={styles.singleLine}
|
|
/>
|
|
<TextInput
|
|
inlineImageLeft="ic_menu_black_24dp"
|
|
inlineImagePadding={30}
|
|
placeholder="This has drawableLeft and drawablePadding set"
|
|
style={styles.singleLine}
|
|
/>
|
|
<TextInput
|
|
placeholder="This does not have drawable props set"
|
|
style={styles.singleLine}
|
|
/>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Toggle Default Padding',
|
|
render: function (): React.Node {
|
|
return <ToggleDefaultPaddingExample />;
|
|
},
|
|
},
|
|
]: Array<RNTesterModuleExample>);
|