Skip to content

S
safetcut-app
Commit 78757682 by Tonk
Options

update dragable filter on timescreen and notification screen

parent 53de1c34
Showing with 187 additions and 186 deletions
components/Form/EmailForm.js
...@@ -34,10 +34,6 @@ class Email extends Component { ...@@ -34,10 +34,6 @@ class Email extends Component {
forwardRef forwardRef
ref={c => (this.email = c)} ref={c => (this.email = c)}
refField="email" refField="email"
returnKeyType="next"
onSubmitEditing={() =>
this.password.getRenderedComponent().refs.password.focus()
}
name="email" name="email"
keyboardType="email-address" keyboardType="email-address"
component={Input} component={Input}
......
screens/Private/NotificationScreen/NotificationScreen.js
...@@ -4,14 +4,15 @@ import { View, StyleSheet, ScrollView, Modal, TouchableOpacity } from 'react-nat ...@@ -4,14 +4,15 @@ import { View, StyleSheet, ScrollView, Modal, TouchableOpacity } from 'react-nat
import { color, theme } from '../../../constants/Styles'; import { color, theme } from '../../../constants/Styles';
import { SearchBar } from 'react-native-elements'; import { SearchBar } from 'react-native-elements';
import { format, isToday, isYesterday, isSameDay, isThisMonth, startOfDay, getTime, endOfDay } from 'date-fns'; import { format, isToday, isYesterday, isSameDay, isThisMonth, startOfDay, getTime, endOfDay } from 'date-fns';
import SlideUpModal from '../../../components/SlideUpModal';
import FadeDimBG from '../../../components/FadeDimBG';
import { width, height } from '../../../constants/Layout'; import { width, height } from '../../../constants/Layout';
import RNPickerSelect from 'react-native-picker-select'; import RNPickerSelect from 'react-native-picker-select';
import CalendarPicker from 'react-native-calendar-picker'; import CalendarPicker from 'react-native-calendar-picker';
import { TouchableWithoutFeedback } from 'react-native-gesture-handler'; import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
import { withNavigationFocus } from 'react-navigation'; import { withNavigationFocus } from 'react-navigation';
import dt2 from './notification.json'; import dt2 from './notification.json';
import Modal2 from 'react-native-modalbox';
import { isIphoneX } from '../../../utils/isPhoneX';
const tabHeader = [ const tabHeader = [
{ type: 'all', label: 'All' }, { type: 'all', label: 'All' },
{ type: 'notification', label: 'Notification' }, { type: 'notification', label: 'Notification' },
...@@ -168,13 +169,14 @@ class NotificationScreen extends React.Component { ...@@ -168,13 +169,14 @@ class NotificationScreen extends React.Component {
} }
// render component ----------------------------------------------- // render component -----------------------------------------------
renderActionCard(data) { renderActionCard(data, index) {
return ( return (
<View <View
style={[ style={[
styles.actionContainer, styles.actionContainer,
// { backgroundColor: !data.read ? 'rgba(238, 84, 84, 0.15)' : color.white }, // { backgroundColor: !data.read ? 'rgba(238, 84, 84, 0.15)' : color.white },
]} ]}
key={`action${index}`}
> >
{data.type === 'log' ? ( {data.type === 'log' ? (
<Icon <Icon
...@@ -247,12 +249,12 @@ class NotificationScreen extends React.Component { ...@@ -247,12 +249,12 @@ class NotificationScreen extends React.Component {
<Text style={[theme.normalText, { paddingHorizontal: 30, paddingVertical: 10 }]}> <Text style={[theme.normalText, { paddingHorizontal: 30, paddingVertical: 10 }]}>
Today Today
</Text> </Text>
{this.renderActionCard(data[i])} {this.renderActionCard(data[i], i)}
</> </>
); );
day = data[i].time * 1000; day = data[i].time * 1000;
} else if (isSameDay(day, data[i].time * 1000)) { } else if (isSameDay(day, data[i].time * 1000)) {
view.push(this.renderActionCard(data[i])); view.push(this.renderActionCard(data[i], i));
day = data[i].time * 1000; day = data[i].time * 1000;
} else { } else {
view.push( view.push(
...@@ -262,7 +264,7 @@ class NotificationScreen extends React.Component { ...@@ -262,7 +264,7 @@ class NotificationScreen extends React.Component {
? 'Yesterday' ? 'Yesterday'
: format(data[i].time * 1000, 'DD/MM/YYYY')} : format(data[i].time * 1000, 'DD/MM/YYYY')}
</Text> </Text>
{this.renderActionCard(data[i])} {this.renderActionCard(data[i], i)}
</> </>
); );
day = data[i].time * 1000; day = data[i].time * 1000;
...@@ -295,7 +297,7 @@ class NotificationScreen extends React.Component { ...@@ -295,7 +297,7 @@ class NotificationScreen extends React.Component {
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
{toggleCalendar && ( {toggleCalendar && (
<View style={styles.pickerContainer}> <View style={[styles.pickerContainer, { marginBottom: isIphoneX() ? 120 : 85 }]}>
<CalendarPicker <CalendarPicker
startFromMonday={true} startFromMonday={true}
allowRangeSelection={true} allowRangeSelection={true}
...@@ -331,6 +333,50 @@ class NotificationScreen extends React.Component { ...@@ -331,6 +333,50 @@ class NotificationScreen extends React.Component {
</> </>
); );
} }
renderFilter = () => {
return (
<>
<View style={styles.dragIndicator} />
<View
style={{ paddingTop: 20, paddingBottom: 18, paddingHorizontal: 25, backgroundColor: color.white }}
>
<View style={styles.filterHeader}>
<Text style={[theme.smallTitle, theme.textDark]} onPress={() => this.clear()}>
Reset
</Text>
<Text style={[theme.smallTitle, theme.textDark]}>Filters</Text>
<Text style={[theme.smallTitle, theme.textDanger]} onPress={() => this.filterByDate()}>
Done
</Text>
</View>
<Text style={[theme.smallTitle, theme.textDanger, theme.mt2]}>Select Date</Text>
<ScrollView>
<View style={styles.pickerContainer}>
<RNPickerSelect
onValueChange={value => this.setState({ filterBy: value })}
placeholder={{ label: 'All', value: 'all' }}
items={[
{ label: 'Today', value: 'today' },
{ label: 'Yesterday', value: 'yesterday' },
{ label: 'Last 7 days', value: '7days' },
{ label: 'Last 30 days', value: '30days' },
{ label: 'This month', value: 'month' },
{ label: 'Last month', value: 'lastMonth' },
{ label: 'Custom', value: 'custom' },
]}
useNativeAndroidPickerStyle={false}
value={this.state.filterBy}
style={pickerStyle}
Icon={() => <Icon name="ios-arrow-down" style={{ fontSize: 14, color: '#c8c8c8' }} />}
/>
</View>
{this.state.filterBy === 'custom' && this.renderCalendar()}
</ScrollView>
</View>
</>
);
};
render() { render() {
const TabStyle = { const TabStyle = {
textStyle: theme.description, textStyle: theme.description,
...@@ -355,25 +401,11 @@ class NotificationScreen extends React.Component { ...@@ -355,25 +401,11 @@ class NotificationScreen extends React.Component {
<View style={theme.container}> <View style={theme.container}>
<Tabs <Tabs
tabBarUnderlineStyle={{ backgroundColor: 'transparent' }} tabBarUnderlineStyle={{ backgroundColor: 'transparent' }}
renderTabBar={() => ( renderTabBar={() => <ScrollableTab style={styles.scrollTab} />}
<ScrollableTab
style={{
backgroundColor: color.defaultBg,
borderWidth: 0,
marginTop: 10,
}}
/>
)}
> >
{tabHeader.map((item, index) => ( {tabHeader.map((item, index) => (
<Tab heading={item.label} {...TabStyle} key={`tab${index}`}> <Tab heading={item.label} {...TabStyle} key={`tab${index}`}>
<View <View style={styles.tabContainer}>
style={{
padding: 15,
flexDirection: 'row',
alignItems: 'center',
}}
>
<SearchBar <SearchBar
containerStyle={styles.searchBarContainer} containerStyle={styles.searchBarContainer}
inputContainerStyle={styles.searchBarInputContainer} inputContainerStyle={styles.searchBarInputContainer}
...@@ -403,43 +435,19 @@ class NotificationScreen extends React.Component { ...@@ -403,43 +435,19 @@ class NotificationScreen extends React.Component {
animationType="fade" animationType="fade"
visible={this.state.isfilterVisible} visible={this.state.isfilterVisible}
> >
<FadeDimBG /> <Modal2
<SlideUpModal ending={0.3} style={styles.filterModal}> swipeArea={45}
<View style={[theme.rowContainer, styles.filterHeader]}> swipeThreshold={65}
<Text style={[theme.smallTitle, theme.textDark]} onPress={() => this.clear()}> backdropPressToClose={false}
Reset style={[styles.filterModal]}
</Text> position={'bottom'}
<Text style={[theme.smallTitle, theme.textDark]}>Filters</Text> isOpen={this.state.isfilterVisible}
<Text style={[theme.smallTitle, theme.textDanger]} onPress={() => this.filterByDate()}> onClosed={() => {
Done this.setState({ isfilterVisible: false });
</Text> }}
</View> >
<Text style={[theme.smallTitle, theme.textDanger, theme.mt2]}>Select Date</Text> {this.renderFilter()}
<ScrollView> </Modal2>
<View style={styles.pickerContainer}>
<RNPickerSelect
onValueChange={value => this.setState({ filterBy: value })}
placeholder={{ label: 'All', value: 'all' }}
items={[
{ label: 'Today', value: 'today' },
{ label: 'Yesterday', value: 'yesterday' },
{ label: 'Last 7 days', value: '7days' },
{ label: 'Last 30 days', value: '30days' },
{ label: 'This month', value: 'month' },
{ label: 'Last month', value: 'lastMonth' },
{ label: 'Custom', value: 'custom' },
]}
useNativeAndroidPickerStyle={false}
value={this.state.filterBy}
style={pickerStyle}
Icon={() => (
<Icon name="ios-arrow-down" style={{ fontSize: 14, color: '#c8c8c8' }} />
)}
/>
</View>
{this.state.filterBy === 'custom' && this.renderCalendar()}
</ScrollView>
</SlideUpModal>
</Modal> </Modal>
<Footer style={{ backgroundColor: 'transparent', borderColor: 'transparent' }} /> <Footer style={{ backgroundColor: 'transparent', borderColor: 'transparent' }} />
...@@ -469,6 +477,15 @@ const pickerStyle = { ...@@ -469,6 +477,15 @@ const pickerStyle = {
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
dragIndicator: {
marginTop: 10,
width: 50,
height: 5,
borderRadius: 3,
backgroundColor: color.grey,
display: 'flex',
alignSelf: 'center',
},
searchBarContainer: { searchBarContainer: {
flex: 1, flex: 1,
display: 'flex', display: 'flex',
...@@ -505,16 +522,12 @@ const styles = StyleSheet.create({ ...@@ -505,16 +522,12 @@ const styles = StyleSheet.create({
justifyContent: 'center', justifyContent: 'center',
}, },
filterModal: { filterModal: {
flex: 0.7, height: height * 0.7,
top: height * 0.3,
paddingTop: 20,
paddingBottom: 18,
paddingHorizontal: 25,
backgroundColor: color.white,
borderTopLeftRadius: 10, borderTopLeftRadius: 10,
borderTopRightRadius: 10, borderTopRightRadius: 10,
}, },
filterHeader: { filterHeader: {
...theme.rowContainer,
justifyContent: 'space-between', justifyContent: 'space-between',
paddingBottom: 10, paddingBottom: 10,
borderBottomColor: 'rgba(189, 192, 200, 0.3)', borderBottomColor: 'rgba(189, 192, 200, 0.3)',
...@@ -532,4 +545,14 @@ const styles = StyleSheet.create({ ...@@ -532,4 +545,14 @@ const styles = StyleSheet.create({
color: color.white, color: color.white,
height: '90%', height: '90%',
}, },
scrollTab: {
backgroundColor: color.defaultBg,
borderWidth: 0,
marginTop: 10,
},
tabContainer: {
padding: 15,
flexDirection: 'row',
alignItems: 'center',
},
}); });
screens/Private/TimerScreen/TimerScreen.ios.js
...@@ -10,8 +10,6 @@ import SwipeableRow from '../../../components/SwipeableRow'; ...@@ -10,8 +10,6 @@ import SwipeableRow from '../../../components/SwipeableRow';
import DatePicker from 'react-native-date-picker'; import DatePicker from 'react-native-date-picker';
import { height } from '../../../constants/Layout'; import { height } from '../../../constants/Layout';
import { isIphoneX } from '../../../utils/isPhoneX'; import { isIphoneX } from '../../../utils/isPhoneX';
import FadeDimBG from '../../../components/FadeDimBG';
import SlideUpModal from '../../../components/SlideUpModal';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { import {
getTimers, getTimers,
...@@ -52,7 +50,6 @@ const initState = { ...@@ -52,7 +50,6 @@ const initState = {
...initTimeSetting, ...initTimeSetting,
isAddVisible: false, isAddVisible: false,
isfilterVisible: false, isfilterVisible: false,
isModalVisible: false,
search: '', search: '',
...@@ -280,7 +277,7 @@ class TimerScreen extends Component { ...@@ -280,7 +277,7 @@ class TimerScreen extends Component {
{isAddVisible && ( {isAddVisible && (
<> <>
<Text style={[theme.modalText, theme.textDark, theme.mt2]}>Select Breaker</Text> <Text style={[theme.modalText, theme.textDark, theme.mt2]}>Select Breaker</Text>
<View style={styles.selectBreakerStyle}> <View style={styles.pickerContainer}>
<RNPickerSelect <RNPickerSelect
items={this.state.pickerSelectData} items={this.state.pickerSelectData}
useNativeAndroidPickerStyle={false} useNativeAndroidPickerStyle={false}
...@@ -420,6 +417,77 @@ class TimerScreen extends Component { ...@@ -420,6 +417,77 @@ class TimerScreen extends Component {
); );
}; };
renderFilterModal = () => {
return (
<>
<View style={styles.dragIndicator} />
<View
style={{ paddingTop: 20, paddingBottom: 18, paddingHorizontal: 25, backgroundColor: color.white }}
>
<View style={styles.filterHeaderContainer}>
<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({ isfilterVisible: false })}
>
Done
</Text>
</View>
<Text style={[theme.smallTitle, theme.textDanger, theme.mt2]}>Select Breaker</Text>
<View style={styles.pickerContainer}>
<RNPickerSelect
items={this.state.pickerSelectData}
onValueChange={(value, index) => {
this.setState({ selectedBreaker: value });
}}
useNativeAndroidPickerStyle={false}
placeholder={{ label: 'Select...', value: null }}
style={pickerStyle}
Icon={() => <Icon name="ios-arrow-down" style={{ fontSize: 14, color: '#c8c8c8' }} />}
/>
</View>
<FlatList
style={theme.mt2}
data={this.state.subBreakerList}
ListEmptyComponent={() => (
<View>
<Text style={[theme.modalText, theme.mt2]}>No Sub breaker</Text>
</View>
)}
ItemSeparatorComponent={() => <View style={theme.mt1} />}
renderItem={({ item, index }) => (
<CheckBox
containerStyle={styles.checkboxContainer}
fontFamily={'Avenir-Roman'}
textStyle={{ fontWeight: 'normal', color: color.darkGrey }}
title={`Sub Breaker ${item.id} ${item.name ? `[${item.name}]` : ''}`}
checked={this.state.subBreakerList[index].selected}
checkedIcon={<Icon name="md-checkbox" style={{ color: color.primary, fontSize: 26 }} />}
uncheckedIcon={
<Icon name="md-square-outline" style={{ color: color.grey, fontSize: 26 }} />
}
onPress={() => {
this.setState(prevState => ({
subBreakerList: prevState.subBreakerList.map((el, elementIndex) =>
elementIndex === index
? {
...el,
selected: !this.state.subBreakerList[index].selected,
}
: { ...el }
),
}));
}}
/>
)}
keyExtractor={(item, index) => `sub${index}`}
/>
</View>
</>
);
};
render() { render() {
return ( return (
<> <>
...@@ -490,90 +558,19 @@ class TimerScreen extends Component { ...@@ -490,90 +558,19 @@ class TimerScreen extends Component {
animationType="fade" animationType="fade"
visible={this.state.isfilterVisible} visible={this.state.isfilterVisible}
> >
<FadeDimBG /> <Modal2
<SlideUpModal ending={0.3} style={styles.filterModal}> swipeArea={45}
<View swipeThreshold={65}
style={[ backdropPressToClose={false}
theme.rowContainer, style={[styles.filterModal]}
{ position={'bottom'}
justifyContent: 'space-between', isOpen={this.state.isfilterVisible}
paddingBottom: 10, onClosed={() => {
borderBottomColor: 'rgba(189, 192, 200, 0.3)', this.setState({ isfilterVisible: false });
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({ isfilterVisible: 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
items={this.state.pickerSelectData}
onValueChange={(value, index) => {
this.setState({ selectedBreaker: value });
}}
useNativeAndroidPickerStyle={false}
placeholder={{ label: 'Select...', value: null }}
style={pickerStyle}
Icon={() => <Icon name="ios-arrow-down" style={{ fontSize: 14, color: '#c8c8c8' }} />}
/>
</View>
<FlatList
style={theme.mt2}
data={this.state.subBreakerList}
ListEmptyComponent={() => (
<View>
<Text style={[theme.modalText, theme.mt2]}>No Sub breaker</Text>
</View>
)}
ItemSeparatorComponent={() => <View style={theme.mt1} />}
renderItem={({ item, index }) => (
<CheckBox
containerStyle={styles.checkboxContainer}
fontFamily={'Avenir-Roman'}
textStyle={{ fontWeight: 'normal', color: color.darkGrey }}
title={`Sub Breaker ${item.id} ${item.name ? `[${item.name}]` : ''}`}
checked={this.state.subBreakerList[index].selected}
checkedIcon={
<Icon name="md-checkbox" style={{ color: color.primary, fontSize: 26 }} />
}
uncheckedIcon={
<Icon name="md-square-outline" style={{ color: color.grey, fontSize: 26 }} />
}
onPress={() => {
this.setState(prevState => ({
subBreakerList: prevState.subBreakerList.map((el, elementIndex) =>
elementIndex === index
? {
...el,
selected: !this.state.subBreakerList[index].selected,
}
: { ...el }
),
}));
}} }}
/> >
)} {this.renderFilterModal()}
keyExtractor={(item, index) => `sub${index}`} </Modal2>
/>
</SlideUpModal>
</Modal> </Modal>
</> </>
); );
...@@ -621,13 +618,6 @@ const pickerStyle = { ...@@ -621,13 +618,6 @@ const pickerStyle = {
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
selectBreakerStyle: {
...theme.mt2,
borderWidth: 1,
borderColor: '#dcdcdc',
borderRadius: 5,
padding: 10,
},
searchBarContainer: { searchBarContainer: {
flex: 1, flex: 1,
display: 'flex', display: 'flex',
...@@ -668,32 +658,17 @@ const styles = StyleSheet.create({ ...@@ -668,32 +658,17 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
}, },
scrollContainer: { filterModal: {
flex: 0.9, height: height * 0.7,
top: height * 0.1,
paddingTop: 30,
backgroundColor: '#fff',
borderTopLeftRadius: 10, borderTopLeftRadius: 10,
borderTopRightRadius: 10, borderTopRightRadius: 10,
alignContent: 'space-between',
justifyContent: 'space-between',
}, },
timerInputContainer: { filterHeaderContainer: {
flex: 1, ...theme.rowContainer,
minHeight: 450,
maxHeight: 500,
paddingVertical: 10,
justifyContent: 'space-between', justifyContent: 'space-between',
}, paddingBottom: 10,
filterModal: { borderBottomColor: 'rgba(189, 192, 200, 0.3)',
flex: 0.7, borderBottomWidth: 1,
top: height * 0.3,
paddingTop: 20,
paddingBottom: 18,
paddingHorizontal: 25,
backgroundColor: color.white,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
}, },
checkboxContainer: { checkboxContainer: {
borderColor: 'transparent', borderColor: 'transparent',
...@@ -716,4 +691,11 @@ const styles = StyleSheet.create({ ...@@ -716,4 +691,11 @@ const styles = StyleSheet.create({
display: 'flex', display: 'flex',
alignSelf: 'center', alignSelf: 'center',
}, },
pickerContainer: {
...theme.mt2,
borderWidth: 1,
borderColor: '#dcdcdc',
borderRadius: 5,
padding: 10,
},
}); });
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