-
Notifications
You must be signed in to change notification settings - Fork 3
/
MathKeyboard.tsx
86 lines (76 loc) · 2.58 KB
/
MathKeyboard.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import React, { Component } from 'react';
import { View, ScrollView, Text, TouchableOpacity, Platform, StyleSheet } from 'react-native';
// @ts-ignore
import { KeyboardAccessoryView } from 'react-native-keyboard-input';
const TrackInteractive = true;
interface MathKeyboardProps {
customKeyboard: {
component?: string;
initialProps?: {};
};
onKeyboardItemSelected: (keyboardId: string, params: object) => void;
isKeyboardShown: boolean;
inputRef: any;
onKeyboardResigned: () => void;
toolbarButtons: { text: string; testID: string; onPress: () => any }[];
}
interface MathKeyboardState {
keyboardAccessoryViewHeight: number;
}
class MathKeyboard extends Component<MathKeyboardProps, MathKeyboardState> {
state = {
keyboardAccessoryViewHeight: 0,
};
setKeyboardAccessoryViewHeight = (height: number) => this.setState({ keyboardAccessoryViewHeight: height });
keyboardAccessoryViewContent = () => (
<View style={styles.keyboardContainer}>
{(this.props.isKeyboardShown || this.props.customKeyboard.component) &&
this.props.inputRef &&
this.props.inputRef.isFocused() && (
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} keyboardShouldPersistTaps='handled'>
{this.props.toolbarButtons.map((button, index) => (
<TouchableOpacity
onPress={button.onPress}
style={{ paddingHorizontal: 8, paddingVertical: 10 }}
key={index}
testID={button.testID}
>
<Text>{button.text}</Text>
</TouchableOpacity>
))}
</ScrollView>
)}
</View>
);
render() {
return (
<KeyboardAccessoryView
renderContent={this.keyboardAccessoryViewContent}
onHeightChanged={Platform.OS === 'ios' ? this.setKeyboardAccessoryViewHeight : undefined}
trackInteractive={TrackInteractive}
kbInputRef={this.props.inputRef}
kbComponent={this.props.customKeyboard.component}
kbInitialProps={this.props.customKeyboard.initialProps}
onItemSelected={this.props.onKeyboardItemSelected}
onKeyboardResigned={this.props.onKeyboardResigned}
revealKeyboardInteractive
// requiresSameParentToManageScrollView
// addBottomView
// bottomViewColor='red'
// allowHitsOutsideBounds
/>
);
}
}
export { MathKeyboard };
const COLOR = '#F5FCFF';
const styles = StyleSheet.create({
keyboardContainer: {
...Platform.select({
ios: {
flex: 1,
backgroundColor: COLOR,
},
}),
},
});