/
ModeView.js
75 lines (69 loc) · 2.04 KB
/
ModeView.js
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
import React from 'react';
import { View, StyleSheet } from 'react-native';
import ComposeOptions from './ComposeOptions';
import ModeSelector from './ModeSelector';
import StreamBox from './ModeViews/StreamBox';
import { isTopicNarrow, isStreamNarrow, isPrivateOrGroupNarrow } from '../utils/narrow';
const inlineStyles = StyleSheet.create({
wrapper: {
flexDirection: 'row',
},
divider: {
width: 2,
backgroundColor: '#ecf0f1',
margin: 4
},
});
export default class ModeView extends React.Component {
constructor() {
super();
this.state = {
modeSelected: 0,
};
}
handleModeChanged = () => {
const { setOperator, setOperand, narrow } = this.props;
if (this.state.modeSelected === 0 && (isTopicNarrow(narrow) || isStreamNarrow(narrow))) {
if (narrow.length === 1) {
setOperand(narrow[0].operand);
setOperator('');
} else {
setOperand(narrow[0].operand);
setOperator(narrow[1].operand);
}
} else {
setOperator(null);
setOperand(null);
}
this.setState({
modeSelected: (this.state.modeSelected === 1) ? 0 : this.state.modeSelected + 1
});
};
render() {
const { modeSelected } = this.state;
const { setOperator, setOperand, operator, operand,
optionSelected, handleOptionSelected, narrow } = this.props;
return (
<View style={inlineStyles.wrapper}>
{(isTopicNarrow(narrow) || isStreamNarrow(narrow)) &&
<View style={inlineStyles.wrapper}>
<ModeSelector modeSelected={modeSelected} onModeChange={this.handleModeChanged} />
<View style={inlineStyles.divider} />
</View>
}
{modeSelected === 0 &&
<ComposeOptions selected={optionSelected} onChange={handleOptionSelected} />
}
{modeSelected === 1 &&
<StreamBox
operator={operator}
operand={operand}
setOperator={setOperator}
setOperand={setOperand}
narrow={narrow}
/>
}
</View>
);
}
}