1 | import PropTypes from 'prop-types';
|
2 | import React from 'react';
|
3 | import { StyleSheet, View, Keyboard, } from 'react-native';
|
4 | import Composer from './Composer';
|
5 | import Send from './Send';
|
6 | import Actions from './Actions';
|
7 | import Color from './Color';
|
8 | import { StylePropType } from './utils';
|
9 | const styles = StyleSheet.create({
|
10 | container: {
|
11 | borderTopWidth: StyleSheet.hairlineWidth,
|
12 | borderTopColor: Color.defaultColor,
|
13 | backgroundColor: Color.white,
|
14 | bottom: 0,
|
15 | left: 0,
|
16 | right: 0,
|
17 | },
|
18 | primary: {
|
19 | flexDirection: 'row',
|
20 | alignItems: 'flex-end',
|
21 | },
|
22 | accessory: {
|
23 | height: 44,
|
24 | },
|
25 | });
|
26 | export default class InputToolbar extends React.Component {
|
27 | constructor() {
|
28 | super(...arguments);
|
29 | this.state = {
|
30 | position: 'absolute',
|
31 | };
|
32 | this.keyboardWillShowListener = undefined;
|
33 | this.keyboardWillHideListener = undefined;
|
34 | this.keyboardWillShow = () => {
|
35 | if (this.state.position !== 'relative') {
|
36 | this.setState({
|
37 | position: 'relative',
|
38 | });
|
39 | }
|
40 | };
|
41 | this.keyboardWillHide = () => {
|
42 | if (this.state.position !== 'absolute') {
|
43 | this.setState({
|
44 | position: 'absolute',
|
45 | });
|
46 | }
|
47 | };
|
48 | }
|
49 | componentDidMount() {
|
50 | this.keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow);
|
51 | this.keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide);
|
52 | }
|
53 | componentWillUnmount() {
|
54 | if (this.keyboardWillShowListener) {
|
55 | this.keyboardWillShowListener.remove();
|
56 | }
|
57 | if (this.keyboardWillHideListener) {
|
58 | this.keyboardWillHideListener.remove();
|
59 | }
|
60 | }
|
61 | renderActions() {
|
62 | const { containerStyle, ...props } = this.props;
|
63 | if (this.props.renderActions) {
|
64 | return this.props.renderActions(props);
|
65 | }
|
66 | else if (this.props.onPressActionButton) {
|
67 | return <Actions {...props}/>;
|
68 | }
|
69 | return null;
|
70 | }
|
71 | renderSend() {
|
72 | if (this.props.renderSend) {
|
73 | return this.props.renderSend(this.props);
|
74 | }
|
75 | return <Send {...this.props}/>;
|
76 | }
|
77 | renderComposer() {
|
78 | if (this.props.renderComposer) {
|
79 | return this.props.renderComposer(this.props);
|
80 | }
|
81 | return <Composer {...this.props}/>;
|
82 | }
|
83 | renderAccessory() {
|
84 | if (this.props.renderAccessory) {
|
85 | return (<View style={[styles.accessory, this.props.accessoryStyle]}>
|
86 | {this.props.renderAccessory(this.props)}
|
87 | </View>);
|
88 | }
|
89 | return null;
|
90 | }
|
91 | render() {
|
92 | return (<View style={[
|
93 | styles.container,
|
94 | { position: this.state.position },
|
95 | this.props.containerStyle,
|
96 | ]}>
|
97 | <View style={[styles.primary, this.props.primaryStyle]}>
|
98 | {this.renderActions()}
|
99 | {this.renderComposer()}
|
100 | {this.renderSend()}
|
101 | </View>
|
102 | {this.renderAccessory()}
|
103 | </View>);
|
104 | }
|
105 | }
|
106 | InputToolbar.defaultProps = {
|
107 | renderAccessory: null,
|
108 | renderActions: null,
|
109 | renderSend: null,
|
110 | renderComposer: null,
|
111 | containerStyle: {},
|
112 | primaryStyle: {},
|
113 | accessoryStyle: {},
|
114 | onPressActionButton: () => { },
|
115 | };
|
116 | InputToolbar.propTypes = {
|
117 | renderAccessory: PropTypes.func,
|
118 | renderActions: PropTypes.func,
|
119 | renderSend: PropTypes.func,
|
120 | renderComposer: PropTypes.func,
|
121 | onPressActionButton: PropTypes.func,
|
122 | containerStyle: StylePropType,
|
123 | primaryStyle: StylePropType,
|
124 | accessoryStyle: StylePropType,
|
125 | };
|
126 | //# sourceMappingURL=InputToolbar.js.map |
\ | No newline at end of file |