Skip to content

Commit

Permalink
Update keyboard example
Browse files Browse the repository at this point in the history
  • Loading branch information
@Saadnajmi
Saadnajmi committed Aug 22, 2024
1 parent 9f0f9c2 commit bb48a1d
Showing 1 changed file with 77 additions and 138 deletions.
215 changes: 77 additions & 138 deletions packages/rn-tester/js/examples/KeyboardEventsExample/KeyboardEventsExample.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,6 @@ const {
View,
} = ReactNative;

const switchStyle = {
alignItems: 'center',
padding: 10,
flexDirection: 'row',
justifyContent: 'space-between',
};

function KeyEventExample(): React.Node {
// $FlowFixMe[missing-empty-array-annot]
const [log, setLog] = React.useState([]);
Expand Down Expand Up @@ -65,30 +58,6 @@ function KeyEventExample(): React.Node {
[appendLog],
);

const [showView, setShowView] = React.useState(true);
const toggleShowView = React.useCallback(
(value: boolean) => {
setShowView(value);
},
[setShowView],
);

const [showTextInput, setShowTextInput] = React.useState(true);
const toggleShowTextInput = React.useCallback(
(value: boolean) => {
setShowTextInput(value);
},
[setShowTextInput],
);

const [showTextInput2, setShowTextInput2] = React.useState(true);
const toggleShowTextInput2 = React.useCallback(
(value: boolean) => {
setShowTextInput2(value);
},
[setShowTextInput2],
);

return (
<ScrollView>
<View style={{padding: 10}}>
Expand All @@ -100,111 +69,81 @@ function KeyEventExample(): React.Node {
<View>
{Platform.OS === 'macos' ? (
<>
<View style={switchStyle}>
<Text style={styles.title}>View</Text>
<Switch value={showView} onValueChange={toggleShowView} />
</View>
{showView ? (
<>
<Text style={styles.text}>
keyDownEvents: [g, Escape, Enter, ArrowLeft]{'\n'}
keyUpEvents: [c, d]
</Text>
<View
focusable={true}
style={styles.row}
keyDownEvents={[
{key: 'g'},
{key: 'Escape'},
{key: 'Enter'},
{key: 'ArrowLeft'},
]}
onKeyDown={handleKeyDown}
validKeysUp={[{key: 'c'}, {key: 'd'}]}
onKeyUp={handleKeyUp}
/>
</>
) : null}
<View style={switchStyle}>
<Text style={styles.title}>TextInput</Text>
<Switch
value={showTextInput}
onValueChange={toggleShowTextInput}
/>
</View>
{showTextInput ? (
<>
<Text style={styles.text}>
keyDownEvents: [ArrowRight, ArrowDown, Ctrl+Enter]{'\n'}
keyUpEvents: [Escape, Enter]
</Text>
<TextInput
blurOnSubmit={false}
placeholder={'Singleline textInput'}
multiline={false}
focusable={true}
style={styles.row}
keyDownEvents={[
{key: 'ArrowRight'},
{key: 'ArrowDown'},
{key: 'Enter', ctrlKey: true},
]}
onKeyDown={handleKeyDown}
keyUpEvents={[{key: 'Escape'}, {key: 'Enter'}]}
onKeyUp={handleKeyUp}
/>
<TextInput
placeholder={'Multiline textInput'}
multiline={true}
focusable={true}
style={styles.row}
keyDownEvents={[
{key: 'ArrowRight'},
{key: 'ArrowDown'},
{key: 'Enter', ctrlKey: true},
]}
onKeyDown={handleKeyDown}
validKeysUp={['Escape', 'Enter']}
onKeyUp={handleKeyUp}
/>
</>
) : null}
<View style={switchStyle}>
<Text style={styles.title}>TextInput with no handled keys</Text>
<Switch
value={showTextInput2}
onValueChange={toggleShowTextInput2}
/>
</View>
{showTextInput2 ? (
<>
<Text style={styles.text}>
keyDownEvents: []{'\n'}
keyUpEvents: []
</Text>
<TextInput
blurOnSubmit={false}
placeholder={'Singleline textInput'}
multiline={false}
focusable={true}
style={styles.row}
keyDownEvents={[]}
onKeyDown={handleKeyDown}
keyUpEvents={[]}
onKeyUp={handleKeyUp}
/>
<TextInput
placeholder={'Multiline textInput'}
multiline={true}
focusable={true}
style={styles.row}
keyDownEvents={[]}
onKeyDown={handleKeyDown}
keyUpEvents={[]}
onKeyUp={handleKeyUp}
/>
</>
) : null}
<Text style={styles.text}>
keyDownEvents: [g, Escape, Enter, ArrowLeft]{'\n'}
keyUpEvents: [c, d]
</Text>
<View
focusable={true}
style={styles.row}
keyDownEvents={[
{key: 'g'},
{key: 'Escape'},
{key: 'Enter'},
{key: 'ArrowLeft'},
]}
onKeyDown={handleKeyDown}
validKeysUp={[{key: 'c'}, {key: 'd'}]}
onKeyUp={handleKeyUp}
/>
<Text style={styles.text}>
keyDownEvents: [ArrowRight, ArrowDown, Ctrl+Enter]{'\n'}
keyUpEvents: [Escape, Enter]
</Text>
<TextInput
blurOnSubmit={false}
placeholder={'Singleline textInput'}
multiline={false}
focusable={true}
style={styles.row}
keyDownEvents={[
{key: 'ArrowRight'},
{key: 'ArrowDown'},
{key: 'Enter', ctrlKey: true},
]}
onKeyDown={handleKeyDown}
keyUpEvents={[{key: 'Escape'}, {key: 'Enter'}]}
onKeyUp={handleKeyUp}
/>
<TextInput
placeholder={'Multiline textInput'}
multiline={true}
focusable={true}
style={styles.row}
keyDownEvents={[
{key: 'ArrowRight'},
{key: 'ArrowDown'},
{key: 'Enter', ctrlKey: true},
]}
onKeyDown={handleKeyDown}
validKeysUp={['Escape', 'Enter']}
onKeyUp={handleKeyUp}
/>
<Text style={styles.text}>
keyDownEvents: []{'\n'}
keyUpEvents: []
</Text>
<TextInput
blurOnSubmit={false}
placeholder={'Singleline textInput'}
multiline={false}
focusable={true}
style={styles.row}
// keyDownEvents={[]}
onKeyDown={handleKeyDown}
// keyUpEvents={[]}
onKeyUp={handleKeyUp}
/>
<TextInput
placeholder={'Multiline textInput'}
multiline={true}
focusable={true}
style={styles.row}
// keyDownEvents={[]}
onKeyDown={handleKeyDown}
// keyUpEvents={[]}
onKeyUp={handleKeyUp}
/>
</>
) : null}
<Button
Expand Down Expand Up @@ -238,8 +177,8 @@ const styles = StyleSheet.create({
},
});

exports.title = 'Key Events';
exports.description = 'Examples that show how Key events can be used.';
exports.title = 'Keyboard Events';
exports.description = 'Examples that show how Keyboard events can be used.';
exports.examples = [
{
title: 'KeyEventExample',
Expand Down

0 comments on commit bb48a1d

Please sign in to comment.