diff --git a/RNTester/js/examples/TextInput/TextInputExample.android.js b/RNTester/js/examples/TextInput/TextInputExample.android.js index e08b07630f9..28a3e535922 100644 --- a/RNTester/js/examples/TextInput/TextInputExample.android.js +++ b/RNTester/js/examples/TextInput/TextInputExample.android.js @@ -21,6 +21,10 @@ const { Switch, } = require('react-native'); +const TextInputSharedExamples = require('./TextInputSharedExamples.js'); + +import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes'; + class TextEventsExample extends React.Component<{...}, $FlowFixMeState> { state = { curText: '', @@ -82,41 +86,6 @@ class TextEventsExample extends React.Component<{...}, $FlowFixMeState> { } } -class RewriteExample extends React.Component<$FlowFixMeProps, $FlowFixMeState> { - constructor(props) { - super(props); - this.state = {text: ''}; - } - render() { - const limit = 20; - const remainder = limit - this.state.text.length; - const remainderColor = remainder > 5 ? 'blue' : 'red'; - return ( - /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found - * when making Flow check .android.js files. */ - - { - text = text.replace(/ /g, '_'); - this.setState({text}); - }} - /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was - * found when making Flow check .android.js files. */ - style={styles.default} - value={this.state.text} - /> - {/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was - * found when making Flow check .android.js files. */} - - {remainder} - - - ); - } -} - class TokenizedTextExample extends React.Component< $FlowFixMeProps, $FlowFixMeState, @@ -443,86 +412,8 @@ const styles = StyleSheet.create({ exports.title = ''; exports.description = 'Single and multi-line text inputs.'; -exports.examples = [ - { - title: 'Auto-focus', - render: function(): React.Node { - return ( - =0.78.0 site=react_native_android_fb) This issue was - * found when making Flow check .android.js files. */ - style={styles.input} - accessibilityLabel="I am the accessibility label for text input" - /> - ); - }, - }, - { - title: "Live Re-Write ( -> '_')", - render: function(): React.Node { - return ; - }, - }, - { - title: 'Auto-capitalize', - render: function(): React.Node { - const autoCapitalizeTypes = ['none', 'sentences', 'words', 'characters']; - const examples = autoCapitalizeTypes.map(type => { - return ( - - ); - }); - return {examples}; - }, - }, - { - title: 'Auto-correct', - render: function(): React.Node { - return ( - - - - - ); - }, - }, - { - title: 'Keyboard types', - render: function(): React.Node { - const keyboardTypes = [ - 'default', - 'email-address', - 'numeric', - 'phone-pad', - ]; - const examples = keyboardTypes.map(type => { - return ( - - ); - }); - return {examples}; - }, - }, +exports.examples = ([ + ...TextInputSharedExamples, { title: 'Blur on submit', render: function(): React.Element { @@ -873,4 +764,4 @@ exports.examples = [ ); }, }, -]; +]: Array); diff --git a/RNTester/js/examples/TextInput/TextInputExample.ios.js b/RNTester/js/examples/TextInput/TextInputExample.ios.js index 7854bb3c122..da8c9848797 100644 --- a/RNTester/js/examples/TextInput/TextInputExample.ios.js +++ b/RNTester/js/examples/TextInput/TextInputExample.ios.js @@ -24,6 +24,10 @@ const { Alert, } = require('react-native'); +const TextInputSharedExamples = require('./TextInputSharedExamples.js'); + +import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes'; + class WithLabel extends React.Component<$FlowFixMeProps> { render() { return ( @@ -128,96 +132,6 @@ class TextInputAccessoryViewExample extends React.Component<{...}, *> { } } -class RewriteExample extends React.Component<$FlowFixMeProps, any> { - constructor(props) { - super(props); - this.state = {text: ''}; - } - render() { - const limit = 20; - const remainder = limit - this.state.text.length; - const remainderColor = remainder > 5 ? 'blue' : 'red'; - return ( - - { - text = text.replace(/ /g, '_'); - this.setState({text}); - }} - style={styles.default} - value={this.state.text} - /> - - {remainder} - - - ); - } -} - -class RewriteExampleInvalidCharacters extends React.Component< - $FlowFixMeProps, - any, -> { - constructor(props) { - super(props); - this.state = {text: ''}; - } - render() { - return ( - - { - this.setState({text: text.replace(/\s/g, '')}); - }} - style={styles.default} - value={this.state.text} - /> - - ); - } -} - -class RewriteInvalidCharactersAndClearExample extends React.Component< - $FlowFixMeProps, - any, -> { - inputRef: ?React.ElementRef = null; - - constructor(props) { - super(props); - this.state = {text: ''}; - } - render() { - return ( - - { - this.inputRef = ref; - }} - multiline={false} - onChangeText={text => { - this.setState({text: text.replace(/\s/g, '')}); - }} - style={styles.default} - value={this.state.text} - /> -