Skip to content

S
safetcut-app
Commit ff9c98ea by Tonk
Options

update timer style

parent b9694aaa
Showing with 189 additions and 116 deletions
components/SlideUpModal.js
...@@ -8,11 +8,12 @@ export default class SlideUpModal extends React.Component { ...@@ -8,11 +8,12 @@ export default class SlideUpModal extends React.Component {
}; };
componentDidMount() { componentDidMount() {
const topValue = this.props.ending * height;
Animated.timing( Animated.timing(
// Animate over time // Animate over time
this.state.slide, // The animated value to drive this.state.slide, // The animated value to drive
{ {
toValue: height * 0.3, // Animate to opacity: 1 (opaque) toValue: topValue, // Animate to opacity: 1 (opaque)
duration: 500, // Make it take a while duration: 500, // Make it take a while
} }
).start(); // Starts the animation ).start(); // Starts the animation
......
components/SwipeableRow.js
...@@ -16,9 +16,11 @@ const Row = ({ data }) => { ...@@ -16,9 +16,11 @@ const Row = ({ data }) => {
<RectButton style={styles.rectButton} onPress={() => alert('hello ' + data.name)}> <RectButton style={styles.rectButton} onPress={() => alert('hello ' + data.name)}>
<View style={{ flexDirection: 'row', paddingVertical: 5 }}> <View style={{ flexDirection: 'row', paddingVertical: 5 }}>
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<Text style={[theme.title]}> <Text style={[theme.title, { color: !data.active && color.grey }]}>
{format(data.time, 'h:mm')}{' '} {format(data.time, 'h:mm')}{' '}
<Text style={[theme.description, theme.textDark]}>{format(data.time, 'A')}</Text> <Text style={[theme.description, theme.textDark, { color: !data.active && color.grey }]}>
{format(data.time, 'A')}
</Text>
</Text> </Text>
<View style={theme.rowContainer}> <View style={theme.rowContainer}>
{data.repeatDays.map((item, index) => ( {data.repeatDays.map((item, index) => (
...@@ -43,7 +45,9 @@ const Row = ({ data }) => { ...@@ -43,7 +45,9 @@ const Row = ({ data }) => {
</View> </View>
</View> </View>
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<Text style={[theme.title, { fontWeight: 'normal' }]}>{data.name}</Text> <Text style={[theme.title, { fontWeight: 'normal', color: !data.active && color.grey }]}>
{data.name}
</Text>
<Text style={theme.description}>{data.active ? 'Active' : 'Inactive'} </Text> <Text style={theme.description}>{data.active ? 'Active' : 'Inactive'} </Text>
</View> </View>
<View style={{ flex: 1, alignItems: 'flex-end' }}> <View style={{ flex: 1, alignItems: 'flex-end' }}>
...@@ -185,7 +189,7 @@ const styles = StyleSheet.create({ ...@@ -185,7 +189,7 @@ const styles = StyleSheet.create({
backgroundColor: color.primary, backgroundColor: color.primary,
color: color.white, color: color.white,
justifyContent: 'center', justifyContent: 'center',
borderRadius: 9, borderRadius: 100,
}, },
cfDelOverlay: { cfDelOverlay: {
padding: 20, padding: 20,
......
screens/Private/TimerScreen/TimerScreen.js
...@@ -285,7 +285,7 @@ export default class TimerScreen extends Component { ...@@ -285,7 +285,7 @@ export default class TimerScreen extends Component {
value={this.state.search} value={this.state.search}
/> />
<Icon <Icon
name="funnel" name="md-funnel"
style={{ color: '#c7cad1', fontSize: 14, marginLeft: 10 }} style={{ color: '#c7cad1', fontSize: 14, marginLeft: 10 }}
onPress={() => this.onOpenModal()} onPress={() => this.onOpenModal()}
/> />
...@@ -312,125 +312,193 @@ export default class TimerScreen extends Component { ...@@ -312,125 +312,193 @@ export default class TimerScreen extends Component {
<Modal <Modal
transparent transparent
presentationStyle={'overFullScreen'} presentationStyle={'overFullScreen'}
animationType="slide" animationType="fade"
visible={this.state.isVisible} visible={this.state.isVisible}
> >
<FadeDimBG /> <FadeDimBG />
<View style={{ flex: 1, backgroundColor: 'transparent' }}> <View style={{ flex: 1, backgroundColor: 'transparent' }}>
<ScrollView contentContainerStyle={[styles.scrollContainer]}> <SlideUpModal ending={0.1} style={styles.scrollContainer}>
<Text style={theme.title}>Create Timer</Text> <ScrollView>
<Text style={theme.title}>Create Timer</Text>
<Text style={[theme.normalText, theme.textDark]}>Set Time</Text> <Text style={[theme.normalText, theme.textDark, theme.mt2]}>Set Time</Text>
<DatePicker <DatePicker
date={this.state.timer} date={this.state.timer}
onDateChange={date => this.setState({ timer: date })} onDateChange={date => this.setState({ timer: date })}
mode="time" mode="time"
style={{ height: 100 }} style={{ height: 100 }}
/> />
<View> <Text style={[theme.normalText, theme.textDark, theme.mt2]}>Select Breaker</Text>
<Text style={[theme.normalText, theme.textDark]}>Name</Text> <View
<InputField placeholder="Name" customStyle={[theme.input, { marginTop: 0 }]} /> style={[
</View> theme.mt2,
<View style={[styles.rowContainer]}> {
<Text style={[theme.normalText, theme.textDark]}>Power</Text> borderWidth: 1,
<Switch value={this.state.power} onValueChange={this.togglePower} /> borderColor: '#dcdcdc',
</View> borderRadius: 5,
<View style={[styles.rowContainer]}> padding: 10,
<Text style={[theme.normalText, theme.textDark]}>Active</Text> },
<Switch value={this.state.active} onValueChange={this.toggleActive} /> ]}
</View> >
<View> <RNPickerSelect
<Text style={[theme.normalText, theme.textDark, { marginBottom: 10 }]}>Repeat</Text> onValueChange={(value, index) =>
<View style={styles.dayContainer}> this.setState({ selectedBreaker: breaker[index - 1].sub })
{this.state.repeatDays.map((item, index) => ( }
<TouchableOpacity placeholder={{ label: 'Select Breaker', value: null }}
key={`repeatDay${index}`} items={breaker}
style={[ style={{
styles.dayBtn, inputIOS: {
{ color: color.darkGrey,
borderColor: this.state.repeatDays[index].isRepeat fontFamily: 'Avenir-Roman',
? color.primary },
: color.grey, iconContainer: {
}, right: 0,
]} },
onPress={() => this.toggleRepeatDays(index)} }}
> Icon={() => {
<Text return (
<Icon name="arrow-down" style={{ fontSize: 14, color: '#c8c8c8' }} />
);
}}
/>
</View>
<FlatList
style={theme.mt2}
data={this.state.selectedBreaker}
ListEmptyComponent={() => (
<View>
<Text style={[theme.normalText, theme.mt1]}>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}
checked={this.state.selectedBreaker[index].active}
checkedIcon={
<Icon name="checkbox" style={{ color: color.primary, fontSize: 26 }} />
}
uncheckedIcon={<Icon name="square-outline" style={{ color: color.grey }} />}
onPress={() =>
this.setState(prevState => ({
selectedBreaker: prevState.selectedBreaker.map(el =>
el.id === index + 1
? {
...el,
active: !this.state.selectedBreaker[index].active,
}
: el
),
}))
}
/>
)}
keyExtractor={(item, index) => `sub${index}`}
/>
<View style={[styles.rowContainer, theme.mt2]}>
<Text style={[theme.normalText, theme.textDark]}>Power</Text>
<Switch value={this.state.power} onValueChange={this.togglePower} />
</View>
<View style={[styles.rowContainer, theme.mt2]}>
<Text style={[theme.normalText, theme.textDark]}>Active</Text>
<Switch value={this.state.active} onValueChange={this.toggleActive} />
</View>
<View style={theme.mt2}>
<Text style={[theme.normalText, theme.textDark, { marginBottom: 10 }]}>Repeat</Text>
<View style={styles.dayContainer}>
{this.state.repeatDays.map((item, index) => (
<TouchableOpacity
key={`repeatDay${index}`}
style={[ style={[
theme.normalText, styles.dayBtn,
{ {
color: this.state.repeatDays[index].isRepeat borderColor: this.state.repeatDays[index].isRepeat
? color.primary ? color.primary
: color.grey, : color.grey,
}, },
]} ]}
onPress={() => this.toggleRepeatDays(index)}
> >
{item.day} <Text
</Text> style={[
</TouchableOpacity> theme.normalText,
))} {
color: this.state.repeatDays[index].isRepeat
? color.primary
: color.grey,
},
]}
>
{item.day}
</Text>
</TouchableOpacity>
))}
</View>
</View> </View>
</View> <View style={[{ flexDirection: 'row', justifyContent: 'space-evenly' }, theme.mt2]}>
<View style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}> <Button
<Button transparent
transparent style={{ flex: 1, justifyContent: 'center' }}
style={{ flex: 1, justifyContent: 'center' }} onPress={() =>
onPress={() => this.setState({
this.setState({ isVisible: false,
isVisible: false, timer: new Date(),
timer: new Date(), active: false,
active: false, power: false,
power: false, repeatDays: [
repeatDays: [ { day: 'S', isRepeat: false },
{ day: 'S', isRepeat: false }, { day: 'M', isRepeat: false },
{ day: 'M', isRepeat: false }, { day: 'T', isRepeat: false },
{ day: 'T', isRepeat: false }, { day: 'W', isRepeat: false },
{ day: 'W', isRepeat: false }, { day: 'T', isRepeat: false },
{ day: 'T', isRepeat: false }, { day: 'F', isRepeat: false },
{ day: 'F', isRepeat: false }, { day: 'S', isRepeat: false },
{ day: 'S', isRepeat: false }, ],
], })
}) }
} >
> <Text style={{ color: color.grey }}>Cancel</Text>
<Text style={{ color: color.grey }}>Cancel</Text> </Button>
</Button> <Button
<Button rounded
rounded style={{
style={{ flex: 1,
flex: 1, justifyContent: 'center',
justifyContent: 'center', backgroundColor: color.primary,
backgroundColor: color.primary, }}
}} onPress={async () => {
onPress={async () => { await MultipleMockData[0].timer.push({
await MultipleMockData[0].timer.push({ name: 'Slot 1',
name: 'Slot 1', time: this.state.timer,
time: this.state.timer, active: this.state.active,
active: this.state.active, power: this.state.power,
power: this.state.power, repeatDays: this.state.repeatDays,
repeatDays: this.state.repeatDays, });
}); this.setState({
this.setState({ isVisible: false,
isVisible: false, timer: new Date(),
timer: new Date(), active: false,
active: false, power: false,
power: false, repeatDays: [
repeatDays: [ { day: 'S', isRepeat: false },
{ day: 'S', isRepeat: false }, { day: 'M', isRepeat: false },
{ day: 'M', isRepeat: false }, { day: 'T', isRepeat: false },
{ day: 'T', isRepeat: false }, { day: 'W', isRepeat: false },
{ day: 'W', isRepeat: false }, { day: 'T', isRepeat: false },
{ day: 'T', isRepeat: false }, { day: 'F', isRepeat: false },
{ day: 'F', isRepeat: false }, { day: 'S', isRepeat: false },
{ day: 'S', isRepeat: false }, ],
], });
}); }}
}} >
> <Text style={{ color: color.white }}>Confirm</Text>
<Text style={{ color: color.white }}>Confirm</Text> </Button>
</Button> </View>
</View> </ScrollView>
</ScrollView> </SlideUpModal>
</View> </View>
</Modal> </Modal>
{this.renderTimerFab()} {this.renderTimerFab()}
...@@ -444,7 +512,7 @@ export default class TimerScreen extends Component { ...@@ -444,7 +512,7 @@ export default class TimerScreen extends Component {
> >
<FadeDimBG /> <FadeDimBG />
<View style={{ flex: 1, backgroundColor: 'transparent' }}> <View style={{ flex: 1, backgroundColor: 'transparent' }}>
<SlideUpModal style={styles.filterModal}> <SlideUpModal ending={0.3} style={styles.filterModal}>
<View <View
style={[ style={[
theme.rowContainer, theme.rowContainer,
...@@ -563,10 +631,10 @@ const styles = StyleSheet.create({ ...@@ -563,10 +631,10 @@ const styles = StyleSheet.create({
justifyContent: 'center', justifyContent: 'center',
}, },
scrollContainer: { scrollContainer: {
flex: 0.95, flex: 0.9,
top: height * 0.05, top: height * 0.1,
paddingTop: 20, paddingTop: 20,
paddingBottom: 18, paddingBottom: 30,
paddingHorizontal: 25, paddingHorizontal: 25,
backgroundColor: '#fff', backgroundColor: '#fff',
borderTopLeftRadius: 10, borderTopLeftRadius: 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