Skip to content

S
safetcut-app
Commit 6e1212a9 by Tonk
Options

add searchbar on SmartMeter

parent ae091c57
Showing with 77 additions and 23 deletions
screens/Private/SmartMeterScreen/SmartMeterScreen.js
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { Text } from 'native-base'; import { Text } from 'native-base';
import { FlatList, View } from 'react-native'; import { FlatList, View, StyleSheet } from 'react-native';
import { theme } from '../../../constants/Styles'; import { theme, color } from '../../../constants/Styles';
import MeterCard from '../../../components/MeterCard'; import MeterCard from '../../../components/MeterCard';
import { HeaderButtons, Item } from 'react-navigation-header-buttons'; import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton'; import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
...@@ -10,6 +10,7 @@ import { getAllMainDeviceInfo } from '../../../reduxStore/actions/allMainDeviceA ...@@ -10,6 +10,7 @@ import { getAllMainDeviceInfo } from '../../../reduxStore/actions/allMainDeviceA
import { setCurrentSelected } from '../../../reduxStore/actions/currentSelectedAction'; import { setCurrentSelected } from '../../../reduxStore/actions/currentSelectedAction';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { getTimers } from '../../../reduxStore/actions/timersAction'; import { getTimers } from '../../../reduxStore/actions/timersAction';
import { SearchBar } from 'react-native-elements';
class SmartMeterScreen extends PureComponent { class SmartMeterScreen extends PureComponent {
static navigationOptions = ({ navigation }) => ({ static navigationOptions = ({ navigation }) => ({
...@@ -28,6 +29,7 @@ class SmartMeterScreen extends PureComponent { ...@@ -28,6 +29,7 @@ class SmartMeterScreen extends PureComponent {
state = { state = {
data: [], data: [],
search: '',
}; };
_isMounted = false; _isMounted = false;
...@@ -59,31 +61,58 @@ class SmartMeterScreen extends PureComponent { ...@@ -59,31 +61,58 @@ class SmartMeterScreen extends PureComponent {
await this.props.getAllMainDeviceInfo(); await this.props.getAllMainDeviceInfo();
}; };
updateSearch = text => {
this.setState({
search: text,
});
};
render() { render() {
const { allMainDeviceInfo, isLoading, error } = this.props; const { allMainDeviceInfo, isLoading, error } = this.props;
return !error ? ( return !error ? (
<FlatList <>
removeClippedSubviews={true} <View
refreshing={isLoading} style={{
onRefresh={this.getData} padding: 15,
style={[theme.container, theme.containerWithPadding]} flexDirection: 'row',
contentContainerStyle={{ paddingBottom: isIphoneX() ? 90 : 55 }} //iPhoneX BottomSpace = 34 alignItems: 'center',
data={allMainDeviceInfo} backgroundColor: color.defaultBg,
extraData={this.props} }}
keyExtractor={(item, index) => `Card${item.deviceId}`} >
ListEmptyComponent={() => ( <SearchBar
<View> containerStyle={styles.searchBarContainer}
<Text style={[theme.normalText, { marginTop: 20 }]}> inputContainerStyle={styles.searchBarInputContainer}
{isLoading ? '' : this._isMounted ? 'No Device Connected' : ''} inputStyle={styles.searchBarInput}
</Text> round
</View> lightTheme
)} placeholder="Search..."
ListHeaderComponent={() => ( onChangeText={text => this.updateSearch(text)}
<Text style={[theme.smallTitle, theme.textDark, { marginBottom: 10 }]}>Smart meter</Text> value={this.state.search}
)} />
renderItem={this.renderItem} </View>
/> <FlatList
removeClippedSubviews={true}
refreshing={isLoading}
onRefresh={this.getData}
style={[theme.container, theme.containerWithPadding]}
contentContainerStyle={{ paddingBottom: isIphoneX() ? 90 : 55 }} //iPhoneX BottomSpace = 34
data={allMainDeviceInfo}
extraData={allMainDeviceInfo}
keyExtractor={(item, index) => `Card${item.deviceId}`}
ListEmptyComponent={() => (
<View>
<Text style={[theme.normalText, { marginTop: 20 }]}>
{isLoading ? '' : this._isMounted ? 'No Device Connected' : ''}
</Text>
</View>
)}
ListHeaderComponent={() => (
<Text style={[theme.smallTitle, theme.textDark, { marginBottom: 10 }]}>Smart meter</Text>
)}
renderItem={this.renderItem}
/>
</>
) : ( ) : (
<View> <View>
<Text>{error}</Text> <Text>{error}</Text>
...@@ -92,6 +121,31 @@ class SmartMeterScreen extends PureComponent { ...@@ -92,6 +121,31 @@ class SmartMeterScreen extends PureComponent {
} }
} }
const styles = StyleSheet.create({
searchBarContainer: {
flex: 1,
display: 'flex',
backgroundColor: 'transparent',
height: 30,
paddingVertical: 0,
borderTopWidth: 0,
borderBottomWidth: 0,
},
searchBarInputContainer: {
borderWidth: 1,
borderBottomWidth: 1,
backgroundColor: 'transparent',
minHeight: 10,
height: 30,
borderColor: '#c7cad1',
},
searchBarInput: {
fontFamily: 'Avenir-Roman',
fontSize: 12,
color: color.grey,
},
});
const mapStateToProps = state => ({ const mapStateToProps = state => ({
allMainDeviceInfo: state.allMainDeviceReducer.allMainDeviceInfo, allMainDeviceInfo: state.allMainDeviceReducer.allMainDeviceInfo,
isLoading: state.allMainDeviceReducer.isLoading, isLoading: state.allMainDeviceReducer.isLoading,
......
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