Skip to content

S
safetcut-app
Commit 78757682 by Tonk
Options

update dragable filter on timescreen and notification screen

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