Skip to content

S
safetcut-app
Commit dc862415 by Tonk
Options

increase font size, add smart device search

parent dedcc765
Showing with 42 additions and 24 deletions
screens/Private/SettingScreen/SettingScreen.js
...@@ -58,7 +58,7 @@ class SettingScreen extends React.Component { ...@@ -58,7 +58,7 @@ class SettingScreen extends React.Component {
const { data } = this.state; const { data } = this.state;
return ( return (
<View style={[theme.container]}> <View style={[theme.container]}>
<Text style={[theme.description, theme.mt2, { marginLeft: 25, color: '#a8a8a8' }]}> <Text style={[theme.description, theme.mt2, { marginLeft: 25, color: '#a8a8a8', fontSize: 14 }]}>
{data.type === 'main' && 'Main Breaker'} {data.type === 'main' && 'Main Breaker'}
</Text> </Text>
......
screens/Private/SmartMeterScreen/SmartMeterDetailScreen.js
...@@ -106,7 +106,7 @@ class SmartMeterDetailScreen extends Component { ...@@ -106,7 +106,7 @@ class SmartMeterDetailScreen extends Component {
<Switch value={isPowerOn} /> <Switch value={isPowerOn} />
</Right> </Right>
</Row> </Row>
<Text numberOfLines={2} style={[theme.description, theme.mt1]}> <Text numberOfLines={2} style={[theme.description, theme.mt1, { fontSize: 14 }]}>
{description || ''} {description || ''}
</Text> </Text>
<Row style={theme.mt1}> <Row style={theme.mt1}>
...@@ -223,7 +223,12 @@ class SmartMeterDetailScreen extends Component { ...@@ -223,7 +223,12 @@ class SmartMeterDetailScreen extends Component {
}; };
return ( return (
<View> <Card
style={{
borderColor: color.white,
borderRadius: 8,
}}
>
<Row <Row
style={{ paddingVertical: 7, paddingLeft: 7, paddingRight: Platform.OS === 'android' ? 12 : 7 }} style={{ paddingVertical: 7, paddingLeft: 7, paddingRight: Platform.OS === 'android' ? 12 : 7 }}
onPress={handleOnPressMcbLink} onPress={handleOnPressMcbLink}
...@@ -249,7 +254,7 @@ class SmartMeterDetailScreen extends Component { ...@@ -249,7 +254,7 @@ class SmartMeterDetailScreen extends Component {
renderItem={({ item, index }) => renderSubBreaker(item, index)} renderItem={({ item, index }) => renderSubBreaker(item, index)}
/> />
)} )}
</View> </Card>
); );
}; };
...@@ -285,22 +290,23 @@ class SmartMeterDetailScreen extends Component { ...@@ -285,22 +290,23 @@ class SmartMeterDetailScreen extends Component {
<ActivityIndicator color={color.primary} /> <ActivityIndicator color={color.primary} />
</View> </View>
) : ( ) : (
<Card // <Card
style={{ // style={{
borderColor: color.white, // borderColor: color.white,
borderRadius: 8, // borderRadius: 8,
marginTop: 20, // marginTop: 20,
marginBottom: isIphoneX() ? 115 : 75, // marginBottom: isIphoneX() ? 115 : 75,
}} // }}
> // >
<FlatList <FlatList
data={mcbLinksInfo} data={mcbLinksInfo}
extraData={this.state} extraData={this.state}
contentContainerStyle={{ overflow: 'hidden' }} contentContainerStyle={{ overflow: 'hidden' }}
keyExtractor={(item, index) => `mcbLinkItem${item.name}`} keyExtractor={(item, index) => `mcbLinkItem${item.name}`}
renderItem={({ item, index }) => this.renderMCBLinksList(item, index)} renderItem={({ item, index }) => this.renderMCBLinksList(item, index)}
/> style={{ marginBottom: isIphoneX() ? 115 : 75, marginTop: 20 }}
</Card> />
// </Card>
)} )}
</ScrollView> </ScrollView>
); );
......
screens/Private/SmartMeterScreen/SmartMeterScreen.js
...@@ -22,12 +22,16 @@ class SmartMeterScreen extends PureComponent { ...@@ -22,12 +22,16 @@ class SmartMeterScreen extends PureComponent {
state = { state = {
search: '', search: '',
data: [],
}; };
_isMounted = false; _isMounted = false;
componentDidMount = async () => { componentDidMount = async () => {
await this.getData(); await this.getData();
this._isMounted = true; this._isMounted = true;
this.setState({
data: this.props.allMainDeviceInfo,
});
}; };
renderItem = ({ item, index }) => { renderItem = ({ item, index }) => {
...@@ -44,14 +48,22 @@ class SmartMeterScreen extends PureComponent { ...@@ -44,14 +48,22 @@ class SmartMeterScreen extends PureComponent {
await this.props.getAllMainDeviceInfo(); await this.props.getAllMainDeviceInfo();
}; };
updateSearch = text => { updateSearch = search => {
this.setState({ search });
const newData = this.props.allMainDeviceInfo.filter(item => {
const itemData = `${item.name.toUpperCase()}`;
const textData = search.toUpperCase();
return itemData.indexOf(textData) > -1;
});
this.setState({ this.setState({
search: text, data: newData,
}); });
}; };
render() { render() {
const { allMainDeviceInfo, isLoading, error } = this.props; const { isLoading, error } = this.props;
const { data } = this.state;
return !error ? ( return !error ? (
<> <>
...@@ -87,7 +99,7 @@ class SmartMeterScreen extends PureComponent { ...@@ -87,7 +99,7 @@ class SmartMeterScreen extends PureComponent {
} }
style={[theme.container]} style={[theme.container]}
contentContainerStyle={[theme.containerWithPadding, { paddingBottom: isIphoneX() ? 90 : 55 }]} //iPhoneX BottomSpace = 34 contentContainerStyle={[theme.containerWithPadding, { paddingBottom: isIphoneX() ? 90 : 55 }]} //iPhoneX BottomSpace = 34
data={allMainDeviceInfo} data={data}
keyExtractor={(item, index) => item.deviceId} keyExtractor={(item, index) => item.deviceId}
ItemSeparatorComponent={() => <View style={theme.mt1} />} ItemSeparatorComponent={() => <View style={theme.mt1} />}
ListEmptyComponent={() => ( ListEmptyComponent={() => (
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment