Skip to content

Commit 31c34c4

Browse files
ethansharethanshar
committed
Refactor KeyboardInput example screen
1 parent 12d713b commit 31c34c4

File tree

3 files changed

+134
-116
lines changed

3 files changed

+134
-116
lines changed

‎demo/src/screens/nativeComponentScreens/keyboardInput/KeyboardInputViewScreen.js

Lines changed: 89 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,36 @@
11
import React, {PureComponent} from 'react';
22
import {ScrollView, StyleSheet, TextInput} from 'react-native';
3-
import {Keyboard, Text, View, Colors, Spacings, Constants, Typography, Button, Switch} from 'react-native-ui-lib';
3+
import {
4+
Keyboard,
5+
Text,
6+
View,
7+
Colors,
8+
Spacings,
9+
Constants,
10+
Typography,
11+
Button,
12+
Switch,
13+
Assets
14+
} from 'react-native-ui-lib';
15+
import _ from 'lodash';
16+
import './demoKeyboards';
17+
418
const KeyboardAccessoryView = Keyboard.KeyboardAccessoryView;
519
const KeyboardUtils = Keyboard.KeyboardUtils;
6-
import {_} from 'lodash';
7-
8-
import './demoKeyboards';
920
const KeyboardRegistry = Keyboard.KeyboardRegistry;
10-
1121
const TrackInteractive = true;
1222

23+
const keyboards = [
24+
{
25+
id: 'unicorn.ImagesKeyboard',
26+
icon: Assets.icons.demo.image
27+
},
28+
{
29+
id: 'unicorn.CustomKeyboard',
30+
icon: Assets.icons.demo.dashboard
31+
}
32+
];
33+
1334
export default class KeyboardInputViewScreen extends PureComponent {
1435
state = {
1536
customKeyboard: {
@@ -22,48 +43,28 @@ export default class KeyboardInputViewScreen extends PureComponent {
2243
};
2344

2445
onKeyboardItemSelected = (keyboardId, params) => {
25-
const receivedKeyboardData = `onItemSelected from "${keyboardId}"\nreceived params: ${JSON.stringify(params)}`;
46+
const receivedKeyboardData = `onItemSelected from "${keyboardId}"\nreceived params: ${JSON.stringify(
47+
params
48+
)}`;
2649
this.setState({receivedKeyboardData});
2750
};
2851

2952
onKeyboardResigned = () => {
3053
this.resetKeyboardView();
3154
};
3255

33-
getToolbarButtons() {
34-
const keyboards = KeyboardRegistry.getAllKeyboards();
35-
const buttons = [];
36-
for (let index = 0; index < keyboards.length; ++index) {
37-
const string = `Show KB ${index + 1}`;
38-
const title = `Title ${index + 1} (passed prop)`;
39-
buttons.push({
40-
text: string,
41-
testID: string,
42-
onPress: () => this.showKeyboardView(keyboards[index].id, title)
43-
});
44-
}
45-
46-
buttons.push({
47-
text: 'reset',
48-
testID: 'reset',
49-
onPress: () => this.resetKeyboardView()
50-
});
51-
52-
return buttons;
53-
}
54-
5556
isCustomKeyboardOpen = () => {
5657
const {keyboardOpenState, customKeyboard} = this.state;
5758
return keyboardOpenState && !_.isEmpty(customKeyboard);
58-
}
59+
};
5960

6061
resetKeyboardView = () => {
6162
this.setState({customKeyboard: {}});
6263
};
6364

6465
dismissKeyboard = () => {
6566
KeyboardUtils.dismiss();
66-
}
67+
};
6768

6869
toggleUseSafeArea = () => {
6970
const {useSafeArea} = this.state;
@@ -97,42 +98,58 @@ export default class KeyboardInputViewScreen extends PureComponent {
9798
});
9899
}
99100

100-
onHeightChanged = keyboardAccessoryViewHeight => {
101+
onHeightChanged = (keyboardAccessoryViewHeight) => {
101102
if (Constants.isIOS) {
102103
this.setState({keyboardAccessoryViewHeight});
103104
}
104105
};
105106

106-
keyboardAccessoryViewContent = () => {
107+
renderKeyboardAccessoryViewContent = () => {
107108
return (
108-
<View style={styles.keyboardContainer}>
109-
<View row padding-s5>
109+
<View style={styles.keyboardContainer} paddingV-s4>
110+
<View row paddingH-s4>
110111
<TextInput
111-
maxHeight={200}
112112
style={styles.textInput}
113-
ref={r => {
113+
ref={(r) => {
114114
this.textInputRef = r;
115115
}}
116116
placeholder={'Message'}
117117
underlineColorAndroid="transparent"
118118
onFocus={this.resetKeyboardView}
119119
/>
120-
<Button label="Close" link onPress={KeyboardUtils.dismiss} style={styles.button}/>
120+
<Button
121+
link
122+
grey10
123+
iconSource={Assets.icons.demo.close}
124+
onPress={KeyboardUtils.dismiss}
125+
marginL-s2
126+
/>
121127
</View>
122-
<View row>
123-
{this.getToolbarButtons().map((button, index) => (
124-
<Button label={button.text} link onPress={button.onPress} key={index} style={styles.button}/>
125-
))}
128+
<View row paddingH-s4 marginT-s2 spread>
129+
<View row>
130+
{keyboards.map((keyboard) => (
131+
<Button
132+
key={keyboard.id}
133+
grey10
134+
link
135+
iconSource={keyboard.icon}
136+
onPress={() => this.showKeyboardView(keyboard.id)}
137+
marginR-s2
138+
/>
139+
))}
140+
</View>
141+
142+
<Button grey10 label="Reset" link onPress={this.resetKeyboardView} />
126143
</View>
127144
</View>
128145
);
129146
};
130147

131148
requestShowKeyboard = () => {
132-
KeyboardRegistry.requestShowKeyboard('KeyboardView1');
149+
KeyboardRegistry.requestShowKeyboard('unicorn.ImagesKeyboard');
133150
};
134151

135-
onRequestShowKeyboard = componentID => {
152+
onRequestShowKeyboard = (componentID) => {
136153
this.setState({
137154
customKeyboard: {
138155
component: componentID,
@@ -142,21 +159,27 @@ export default class KeyboardInputViewScreen extends PureComponent {
142159
};
143160

144161
safeAreaSwitchToggle = () => {
145-
if (!Constants.isIOS) {
162+
if (!Constants.isIOS) {
146163
return;
147164
}
148165
const {useSafeArea} = this.state;
149-
return (
166+
return (
150167
<View column center>
151-
<View style={styles.separatorLine}/>
168+
<View style={styles.separatorLine} />
152169
<View centerV row margin-10>
153-
<Text text80 dark40>Safe Area Enabled:</Text>
154-
<Switch value={useSafeArea} onValueChange={this.toggleUseSafeArea} marginL-14/>
170+
<Text text80 dark40>
171+
Safe Area Enabled:
172+
</Text>
173+
<Switch
174+
value={useSafeArea}
175+
onValueChange={this.toggleUseSafeArea}
176+
marginL-14
177+
/>
155178
</View>
156-
<View style={styles.separatorLine}/>
179+
<View style={styles.separatorLine} />
157180
</View>
158181
);
159-
}
182+
};
160183

161184
render() {
162185
const {message} = this.props;
@@ -171,12 +194,17 @@ export default class KeyboardInputViewScreen extends PureComponent {
171194
{message || 'Keyboards example'}
172195
</Text>
173196
<Text testID={'demo-message'}>{receivedKeyboardData}</Text>
174-
<Button label={'Open keyboard #1'} link onPress={this.requestShowKeyboard} style={styles.button}/>
175-
{ this.safeAreaSwitchToggle() }
197+
<Button
198+
label={'Open Images Keyboard'}
199+
link
200+
onPress={this.requestShowKeyboard}
201+
style={styles.button}
202+
/>
203+
{this.safeAreaSwitchToggle()}
176204
</ScrollView>
177205

178206
<KeyboardAccessoryView
179-
renderContent={this.keyboardAccessoryViewContent}
207+
renderContent={this.renderKeyboardAccessoryViewContent}
180208
onHeightChanged={this.onHeightChanged}
181209
trackInteractive={TrackInteractive}
182210
kbInputRef={this.textInputRef}
@@ -201,8 +229,12 @@ const styles = StyleSheet.create({
201229
},
202230
textInput: {
203231
flex: 1,
204-
padding: Spacings.s1,
205-
...Typography.text70
232+
paddingVertical: Spacings.s2,
233+
paddingHorizontal: Spacings.s3,
234+
...Typography.text70,
235+
lineHeight: undefined,
236+
backgroundColor: Colors.grey60,
237+
borderRadius: 8
206238
},
207239
button: {
208240
padding: Spacings.s2
@@ -211,9 +243,9 @@ const styles = StyleSheet.create({
211243
backgroundColor: Colors.white,
212244
borderWidth: 1,
213245
borderColor: Colors.dark60
214-
},
246+
},
215247
separatorLine: {
216-
flex: 1,
248+
flex: 1,
217249
height: 1,
218250
backgroundColor: Colors.dark80
219251
}

‎demo/src/screens/nativeComponentScreens/keyboardInput/KeyboardView.js

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎demo/src/screens/nativeComponentScreens/keyboardInput/demoKeyboards.js

Lines changed: 45 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,52 @@
1-
import React, {Component} from 'react';
2-
import PropTypes from 'prop-types';
3-
import {Keyboard, Colors} from 'react-native-ui-lib';
1+
import React from 'react';
2+
import {ScrollView} from 'react-native';
3+
import {Keyboard, View, Text, Image, Spacings} from 'react-native-ui-lib';
4+
import _ from 'lodash';
45
const KeyboardRegistry = Keyboard.KeyboardRegistry;
5-
import KeyboardView from './KeyboardView';
66

7-
class KeyboardView1 extends Component {
8-
static propTypes = {
9-
title: PropTypes.string
10-
};
7+
const images = [
8+
'https://images.pexels.com/photos/1148521/pexels-photo-1148521.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=200',
9+
'https://images.pexels.com/photos/1528975/pexels-photo-1528975.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=200',
10+
'https://images.pexels.com/photos/1495580/pexels-photo-1495580.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=200',
11+
'https://images.pexels.com/photos/943150/pexels-photo-943150.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=200',
12+
'https://images.pexels.com/photos/1769408/pexels-photo-1769408.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=200'
13+
];
1114

12-
onButtonPress() {
13-
KeyboardRegistry.onItemSelected('KeyboardView1', {
14-
message: 'Item selected from keyboard 1'
15-
});
16-
}
17-
18-
render() {
19-
const {title} = this.props;
20-
return <KeyboardView title={title} backgroundColor={Colors.violet10} onPress={this.onButtonPress}/>;
21-
}
15+
function ImagesKeyboard() {
16+
return (
17+
<View flex>
18+
<ScrollView
19+
horizontal
20+
showsHorizontalScrollIndicator={false}
21+
contentContainerStyle={{padding: Spacings.s4}}
22+
>
23+
{_.map(images, (image) => {
24+
return (
25+
<Image
26+
source={{uri: image}}
27+
style={{height: '100%', width: 200}}
28+
marginR-s4
29+
/>
30+
);
31+
})}
32+
</ScrollView>
33+
</View>
34+
);
2235
}
2336

24-
class KeyboardView2 extends Component {
25-
static propTypes = {
26-
title: PropTypes.string
27-
};
28-
29-
onButtonPress() {
30-
KeyboardRegistry.onItemSelected('KeyboardView2', {
31-
message: 'Item selected from keyboard 2'
32-
});
33-
}
34-
35-
render() {
36-
const {title} = this.props;
37-
return <KeyboardView title={title} backgroundColor={Colors.yellow20} onPress={this.onButtonPress}/>;
38-
}
37+
function CustomKeyboard() {
38+
return (
39+
<View flex padding-s4>
40+
<Text h3>Custom Keyboard</Text>
41+
</View>
42+
);
3943
}
4044

41-
KeyboardRegistry.registerKeyboard('KeyboardView1', () => KeyboardView1);
42-
KeyboardRegistry.registerKeyboard('KeyboardView2', () => KeyboardView2);
45+
KeyboardRegistry.registerKeyboard(
46+
'unicorn.ImagesKeyboard',
47+
() => ImagesKeyboard
48+
);
49+
KeyboardRegistry.registerKeyboard(
50+
'unicorn.CustomKeyboard',
51+
() => CustomKeyboard
52+
);

0 commit comments

Comments
 (0)