Skip to content

S
safetcut-app
Commit 2dc1e6fd by Tonk
Options

add search bar and filter modal

parent 1ce4c850
Showing with 171 additions and 6 deletions
screens/Private/TimerScreen/TimerScreen.js
import React, { Component } from 'react';
import { Fab, Icon, Text } from 'native-base';
import { View, StyleSheet, FlatList, ScrollView, TouchableHighlight, Modal } from 'react-native';
import { Switch, Button, Tab, Tabs, ScrollableTab } from 'native-base';
import { Switch, Button, Tab, Tabs, ScrollableTab, Icon, Fab, Text, Picker } from 'native-base';
import { HeaderButtons, Item as HeaderItem } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
import { color, theme } from '../../../constants/Styles';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { Badge } from 'react-native-elements';
import { TouchableOpacity, TextInput } from 'react-native-gesture-handler';
import { Badge, CheckBox } from 'react-native-elements';
import SwipeableRow from '../../../components/SwipeableRow';
import DatePicker from 'react-native-date-picker';
import { height } from '../../../constants/Layout';
import InputField from '../../../components/InputField';
import { isIphoneX } from '../../../utils/isPhoneX';
import RNPickerSelect from 'react-native-picker-select';
import { red } from 'ansi-colors';
// mock data
const MultipleMockData = [
......@@ -102,7 +103,7 @@ export default class TimerScreen extends Component {
headerRight: (
<TouchableOpacity onPress={() => console.log('clicked')}>
<View style={{ marginRight: 17 }}>
<Icon name="ios-notifications" style={{ color: '#fff' }} />
<Icon name="ios-notifications" style={{ color: color.white }} />
<Badge
badgeStyle={{
width: 12,
......@@ -122,6 +123,8 @@ export default class TimerScreen extends Component {
state = {
currentTime: new Date(),
isVisible: false,
filterOpen: false,
checked: [],
};
// renderTimerFab = () => {
......@@ -147,16 +150,51 @@ export default class TimerScreen extends Component {
this.currentlyOpenSwipe = swipeInstance;
};
onValueChange(value) {
this.setState({
selected: value,
});
}
render() {
console.log(MultipleMockData[0]);
return (
<>
{/* Search Bar */}
<View style={{ padding: 15, flexDirection: 'row', alignItems: 'center' }}>
<View
style={[
{
paddingVertical: 5,
paddingHorizontal: 10,
borderColor: '#c7cad1',
borderWidth: 1,
borderRadius: 21,
flex: 1,
},
theme.rowContainer,
]}
>
<Icon name="search" style={{ color: '#c7cad1', fontSize: 14, marginRight: 10 }} />
<TextInput
placeholder="Search"
placeholderTextColor="#b9bdc5"
style={{ fontSize: 14, fontFamily: 'Avenir-Roman' }}
/>
</View>
<Icon
name="funnel"
style={{ color: '#c7cad1', fontSize: 14, marginLeft: 10 }}
onPress={() => this.setState({ filterOpen: true })}
/>
</View>
{/* List Timer */}
<FlatList
contentContainerStyle={{ paddingBottom: isIphoneX() ? 90 : 55 }}
data={MultipleMockData[0].timer}
ListEmptyComponent={() => (
<View>
<Text style={[theme.normalText, theme.mt2]}>No Data</Text>
<Text style={[theme.normalText, theme.mt2]}>No Subbreaker</Text>
</View>
)}
ItemSeparatorComponent={() => <View style={styles.separator} />}
......@@ -167,6 +205,7 @@ export default class TimerScreen extends Component {
keyExtractor={(item, index) => `timer ${index}`}
/>
{/* Create & Update Timer Modal */}
<Modal
transparent
presentationStyle={'overFullScreen'}
......@@ -267,6 +306,119 @@ export default class TimerScreen extends Component {
</ScrollView>
</View>
</Modal>
{/* Filter Modal */}
<Modal
transparent
presentationStyle={'overFullScreen'}
animationType="slide"
visible={this.state.filterOpen}
>
<View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }}>
<ScrollView
contentContainerStyle={{
flex: 0.7,
top: height * 0.3,
paddingTop: 20,
paddingBottom: 18,
paddingHorizontal: 25,
backgroundColor: color.white,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
}}
>
<View
style={[
theme.rowContainer,
{
justifyContent: 'space-between',
paddingBottom: 10,
borderBottomColor: 'rgba(189, 192, 200, 0.3)',
borderBottomWidth: 1,
},
]}
>
<Text style={[theme.smallTitle, theme.textDark]}>Reset</Text>
<Text style={[theme.smallTitle, theme.textDark]}>Filters</Text>
<Text
style={[theme.smallTitle, theme.textDanger]}
onPress={() =>
this.setState({
filterOpen: false,
})
}
>
Done
</Text>
</View>
<Text style={[theme.smallTitle, theme.textDanger, theme.mt2]}>Select Breaker</Text>
<View
style={[
theme.mt2,
{
borderWidth: 1,
borderColor: '#dcdcdc',
borderRadius: 5,
padding: 10,
},
]}
>
<RNPickerSelect
onValueChange={value => console.log(value)}
placeholder={{ label: 'Select Breaker', value: null }}
items={[
{ label: 'Football', value: 'football' },
{ label: 'Baseball', value: 'baseball' },
{ label: 'Hockey', value: 'hockey' },
]}
style={{
inputIOS: {
color: color.darkGrey,
fontFamily: 'Avenir-Roman',
},
iconContainer: {
right: 0,
},
}}
Icon={() => {
return <Icon name="arrow-down" style={{ fontSize: 14, color: '#c8c8c8' }} />;
}}
/>
</View>
<FlatList
style={theme.mt2}
data={[1, 2, 3, 4, 5, 6, 7, 8]}
ListEmptyComponent={() => (
<View>
<Text style={[theme.normalText, theme.mt2]}>No Sub breaker</Text>
</View>
)}
ItemSeparatorComponent={() => <View style={theme.mt1} />}
renderItem={({ item, index }) => (
<CheckBox
containerStyle={{
border: 0,
borderColor: 'transparent',
backgroundColor: color.white,
padding: 0,
margin: 0,
}}
fontFamily={'Avenir-Roman'}
textStyle={{ fontWeight: 'normal', color: color.darkGrey }}
title={'Sub breaker ' + (index + 1)}
checked={this.state.checked[index]}
checkedIcon={
<Icon name="checkbox" style={{ color: color.primary, fontSize: 26 }} />
}
uncheckedIcon={<Icon name="square-outline" style={{ color: '#9b9b9b' }} />}
onPress={() => this.setState({ checked: !this.state.checked })}
/>
)}
keyExtractor={(item, index) => `sub ${index}`}
/>
</ScrollView>
</View>
</Modal>
{/* {this.renderTimerFab()} */}
</>
);
......
yarn.lock
......@@ -4481,6 +4481,11 @@ lodash.clone@^4.5.0:
resolved "https://registry.yarnpkg.com/lodash.clone/-/lodash.clone-4.5.0.tgz#195870450f5a13192478df4bc3d23d2dea1907b6"
integrity sha1-GVhwRQ9aExkkeN9Lw9I9LeoZB7Y=
lodash.isequal@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
lodash.merge@^4.6.1:
version "4.6.2"
resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
......@@ -5962,6 +5967,13 @@ react-native-permissions@^1.2.0:
resolved "https://registry.yarnpkg.com/react-native-permissions/-/react-native-permissions-1.2.0.tgz#0deb616bf1565c17c91f1cb1f953809b2892c29e"
integrity sha512-+KrP1JZ30RI9p30wsGlGQx22qwiClDnznSQZPpvBMkOIZQ9kXOkLAFXS+vwiHRiiRu/pBMBXYHfI7ng6t2+LbQ==
react-native-picker-select@^6.3.0:
version "6.3.0"
resolved "https://registry.yarnpkg.com/react-native-picker-select/-/react-native-picker-select-6.3.0.tgz#0a4a4692085e80580662d6914eb1750e30b05b71"
integrity sha512-1NGlZzPDTyJYU3aMC3zJTBydCCejKd4n2h8KDtpyPcYGAYIzvHXOQgvrjgPz0gRTFQes14KoICCKqc+b1Eewig==
dependencies:
lodash.isequal "^4.5.0"
react-native-platform-touchable@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/react-native-platform-touchable/-/react-native-platform-touchable-1.1.1.tgz#fde4acc65eea585d28b164d0c3716a42129a68e4"
......
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