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 {
};
componentDidMount() {
const topValue = this.props.ending * height;
Animated.timing(
// Animate over time
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
}
).start(); // Starts the animation
......
components/SwipeableRow.js
......@@ -16,9 +16,11 @@ const Row = ({ data }) => {
<RectButton style={styles.rectButton} onPress={() => alert('hello ' + data.name)}>
<View style={{ flexDirection: 'row', paddingVertical: 5 }}>
<View style={{ flex: 1 }}>
<Text style={[theme.title]}>
<Text style={[theme.title, { color: !data.active && color.grey }]}>
{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>
<View style={theme.rowContainer}>
{data.repeatDays.map((item, index) => (
......@@ -43,7 +45,9 @@ const Row = ({ data }) => {
</View>
</View>
<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>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
......@@ -185,7 +189,7 @@ const styles = StyleSheet.create({
backgroundColor: color.primary,
color: color.white,
justifyContent: 'center',
borderRadius: 9,
borderRadius: 100,
},
cfDelOverlay: {
padding: 20,
......
screens/Private/TimerScreen/TimerScreen.js
......@@ -285,7 +285,7 @@ export default class TimerScreen extends Component {
value={this.state.search}
/>
<Icon
name="funnel"
name="md-funnel"
style={{ color: '#c7cad1', fontSize: 14, marginLeft: 10 }}
onPress={() => this.onOpenModal()}
/>
......@@ -312,125 +312,193 @@ export default class TimerScreen extends Component {
<Modal
transparent
presentationStyle={'overFullScreen'}
animationType="slide"
animationType="fade"
visible={this.state.isVisible}
>
<FadeDimBG />
<View style={{ flex: 1, backgroundColor: 'transparent' }}>
<ScrollView contentContainerStyle={[styles.scrollContainer]}>
<Text style={theme.title}>Create Timer</Text>
<SlideUpModal ending={0.1} style={styles.scrollContainer}>
<ScrollView>
<Text style={theme.title}>Create Timer</Text>
<Text style={[theme.normalText, theme.textDark]}>Set Time</Text>
<DatePicker
date={this.state.timer}
onDateChange={date => this.setState({ timer: date })}
mode="time"
style={{ height: 100 }}
/>
<View>
<Text style={[theme.normalText, theme.textDark]}>Name</Text>
<InputField placeholder="Name" customStyle={[theme.input, { marginTop: 0 }]} />
</View>
<View style={[styles.rowContainer]}>
<Text style={[theme.normalText, theme.textDark]}>Power</Text>
<Switch value={this.state.power} onValueChange={this.togglePower} />
</View>
<View style={[styles.rowContainer]}>
<Text style={[theme.normalText, theme.textDark]}>Active</Text>
<Switch value={this.state.active} onValueChange={this.toggleActive} />
</View>
<View>
<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={[
styles.dayBtn,
{
borderColor: this.state.repeatDays[index].isRepeat
? color.primary
: color.grey,
},
]}
onPress={() => this.toggleRepeatDays(index)}
>
<Text
<Text style={[theme.normalText, theme.textDark, theme.mt2]}>Set Time</Text>
<DatePicker
date={this.state.timer}
onDateChange={date => this.setState({ timer: date })}
mode="time"
style={{ height: 100 }}
/>
<Text style={[theme.normalText, theme.textDark, theme.mt2]}>Select Breaker</Text>
<View
style={[
theme.mt2,
{
borderWidth: 1,
borderColor: '#dcdcdc',
borderRadius: 5,
padding: 10,
},
]}
>
<RNPickerSelect
onValueChange={(value, index) =>
this.setState({ selectedBreaker: breaker[index - 1].sub })
}
placeholder={{ label: 'Select Breaker', value: null }}
items={breaker}
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={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={[
theme.normalText,
styles.dayBtn,
{
color: this.state.repeatDays[index].isRepeat
borderColor: this.state.repeatDays[index].isRepeat
? color.primary
: color.grey,
},
]}
onPress={() => this.toggleRepeatDays(index)}
>
{item.day}
</Text>
</TouchableOpacity>
))}
<Text
style={[
theme.normalText,
{
color: this.state.repeatDays[index].isRepeat
? color.primary
: color.grey,
},
]}
>
{item.day}
</Text>
</TouchableOpacity>
))}
</View>
</View>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}>
<Button
transparent
style={{ flex: 1, justifyContent: 'center' }}
onPress={() =>
this.setState({
isVisible: false,
timer: new Date(),
active: false,
power: false,
repeatDays: [
{ day: 'S', isRepeat: false },
{ day: 'M', isRepeat: false },
{ day: 'T', isRepeat: false },
{ day: 'W', isRepeat: false },
{ day: 'T', isRepeat: false },
{ day: 'F', isRepeat: false },
{ day: 'S', isRepeat: false },
],
})
}
>
<Text style={{ color: color.grey }}>Cancel</Text>
</Button>
<Button
rounded
style={{
flex: 1,
justifyContent: 'center',
backgroundColor: color.primary,
}}
onPress={async () => {
await MultipleMockData[0].timer.push({
name: 'Slot 1',
time: this.state.timer,
active: this.state.active,
power: this.state.power,
repeatDays: this.state.repeatDays,
});
this.setState({
isVisible: false,
timer: new Date(),
active: false,
power: false,
repeatDays: [
{ day: 'S', isRepeat: false },
{ day: 'M', isRepeat: false },
{ day: 'T', isRepeat: false },
{ day: 'W', isRepeat: false },
{ day: 'T', isRepeat: false },
{ day: 'F', isRepeat: false },
{ day: 'S', isRepeat: false },
],
});
}}
>
<Text style={{ color: color.white }}>Confirm</Text>
</Button>
</View>
</ScrollView>
<View style={[{ flexDirection: 'row', justifyContent: 'space-evenly' }, theme.mt2]}>
<Button
transparent
style={{ flex: 1, justifyContent: 'center' }}
onPress={() =>
this.setState({
isVisible: false,
timer: new Date(),
active: false,
power: false,
repeatDays: [
{ day: 'S', isRepeat: false },
{ day: 'M', isRepeat: false },
{ day: 'T', isRepeat: false },
{ day: 'W', isRepeat: false },
{ day: 'T', isRepeat: false },
{ day: 'F', isRepeat: false },
{ day: 'S', isRepeat: false },
],
})
}
>
<Text style={{ color: color.grey }}>Cancel</Text>
</Button>
<Button
rounded
style={{
flex: 1,
justifyContent: 'center',
backgroundColor: color.primary,
}}
onPress={async () => {
await MultipleMockData[0].timer.push({
name: 'Slot 1',
time: this.state.timer,
active: this.state.active,
power: this.state.power,
repeatDays: this.state.repeatDays,
});
this.setState({
isVisible: false,
timer: new Date(),
active: false,
power: false,
repeatDays: [
{ day: 'S', isRepeat: false },
{ day: 'M', isRepeat: false },
{ day: 'T', isRepeat: false },
{ day: 'W', isRepeat: false },
{ day: 'T', isRepeat: false },
{ day: 'F', isRepeat: false },
{ day: 'S', isRepeat: false },
],
});
}}
>
<Text style={{ color: color.white }}>Confirm</Text>
</Button>
</View>
</ScrollView>
</SlideUpModal>
</View>
</Modal>
{this.renderTimerFab()}
......@@ -444,7 +512,7 @@ export default class TimerScreen extends Component {
>
<FadeDimBG />
<View style={{ flex: 1, backgroundColor: 'transparent' }}>
<SlideUpModal style={styles.filterModal}>
<SlideUpModal ending={0.3} style={styles.filterModal}>
<View
style={[
theme.rowContainer,
......@@ -563,10 +631,10 @@ const styles = StyleSheet.create({
justifyContent: 'center',
},
scrollContainer: {
flex: 0.95,
top: height * 0.05,
flex: 0.9,
top: height * 0.1,
paddingTop: 20,
paddingBottom: 18,
paddingBottom: 30,
paddingHorizontal: 25,
backgroundColor: '#fff',
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