Skip to content

Commit

Permalink
fix(style): correct theming for unit-day
Browse files Browse the repository at this point in the history
  • Loading branch information
Tautvilas committed May 11, 2017
1 parent 6dca033 commit b1cfbd5
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 81 deletions.
13 changes: 12 additions & 1 deletion example/src/screens/calendars.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,18 @@ export default class CalendarsScreen extends Component {
minDate={'2012-05-10'}
displayLoadingIndicator
markingType={'interactive'}
markedDates={{'2012-05-24': [{startingDay: true, color: 'gray'}], '2012-05-25': [{endingDay: true, color: 'gray'}]}}
theme={{
calendarBackground: '#333248',
textSectionTitleColor: 'white',
dayTextColor: 'white',
todayTextColor: 'white',
selectedDayTextColor: 'white',
monthTextColor: 'white',
selectedDayBackgroundColor: '#333248'
}}
markedDates={{
'2012-05-24': [{startingDay: true, color: 'gray'}],
'2012-05-25': [{endingDay: true, color: 'gray'}]}}
hideArrows={true}
/>
</ScrollView>
Expand Down
39 changes: 21 additions & 18 deletions src/calendar/unit-day/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,14 @@ import {
View
} from 'react-native';

import style from './style';
import * as defaultStyle from '../style';
import styleConstructor from './style';

class Day extends Component {
constructor(props) {
super(props);
this.theme = {...defaultStyle, ...(props.theme || {})};
this.style = styleConstructor(props.theme);
this.markingStyle = this.getDrawingStyle(props.marked);
}

Expand Down Expand Up @@ -41,16 +44,16 @@ class Day extends Component {
return marking.reduce((prev, next) => {
if (next.quickAction) {
if (next.first || next.last) {
prev.containerStyle = style.firstQuickAction;
prev.textStyle = style.firstQuickActionText;
prev.containerStyle = this.style.firstQuickAction;
prev.textStyle = this.style.firstQuickActionText;
if (next.endSelected && next.first && !next.last) {
prev.rightFillerStyle = '#c1e4fe';
} else if (next.endSelected && next.last && !next.first) {
prev.leftFillerStyle = '#c1e4fe';
}
} else if (!next.endSelected) {
prev.containerStyle = style.quickAction;
prev.textStyle = style.quickActionText;
prev.containerStyle = this.style.quickAction;
prev.textStyle = this.style.quickActionText;
} else if (next.endSelected) {
prev.leftFillerStyle = '#c1e4fe';
prev.rightFillerStyle = '#c1e4fe';
Expand All @@ -60,7 +63,7 @@ class Day extends Component {

const color = next.color;
if (next.status === 'NotAvailable') {
prev.textStyle = style.naText;
prev.textStyle = this.style.naText;
}
if (next.startingDay) {
prev.startingDay = {
Expand All @@ -82,16 +85,16 @@ class Day extends Component {
}

render() {
const containerStyle = [style.base];
const textStyle = [style.text];
const containerStyle = [this.style.base];
const textStyle = [this.style.text];
let leftFillerStyle = {};
let rightFillerStyle = {};
let fillers;

if (this.props.state === 'disabled') {
textStyle.push(style.disabledText);
textStyle.push(this.style.disabledText);
} else if (this.props.state === 'today') {
textStyle.push(style.todayText);
textStyle.push(this.style.todayText);
}

if (this.props.marked) {
Expand All @@ -115,7 +118,7 @@ class Day extends Component {

if (flags.startingDay && !flags.endingDay) {
leftFillerStyle = {
backgroundColor: 'white'
backgroundColor: this.theme.calendarBackground
};
rightFillerStyle = {
backgroundColor: flags.startingDay.color
Expand All @@ -125,7 +128,7 @@ class Day extends Component {
});
} else if (flags.endingDay && !flags.startingDay) {
rightFillerStyle = {
backgroundColor: 'white'
backgroundColor: this.theme.calendarBackground
};
leftFillerStyle = {
backgroundColor: flags.endingDay.color
Expand All @@ -138,27 +141,27 @@ class Day extends Component {
rightFillerStyle = {backgroundColor: flags.day.color};
} else if (flags.endingDay && flags.startingDay) {
rightFillerStyle = {
backgroundColor: 'white'
backgroundColor: this.theme.calendarBackground
};
leftFillerStyle = {
backgroundColor: 'white'
backgroundColor: this.theme.calendarBackground
};
containerStyle.push({
backgroundColor: flags.endingDay.color
});
}

fillers = (
<View style={style.fillers}>
<View style={[style.leftFiller, leftFillerStyle]}/>
<View style={[style.rightFiller, rightFillerStyle]}/>
<View style={this.style.fillers}>
<View style={[this.style.leftFiller, leftFillerStyle]}/>
<View style={[this.style.rightFiller, rightFillerStyle]}/>
</View>
);
}

return (
<TouchableWithoutFeedback onPress={this.props.onPress}>
<View style={style.wrapper}>
<View style={this.style.wrapper}>
{fillers}
<View style={containerStyle}>
<Text style={textStyle}>{this.props.children}</Text>
Expand Down
128 changes: 66 additions & 62 deletions src/calendar/unit-day/style.js
Original file line number Diff line number Diff line change
@@ -1,67 +1,71 @@
import {StyleSheet} from 'react-native';
import * as appStyle from '../../style';
import * as defaultStyle from '../../style';

const FILLER_HEIGHT = 34;

export default StyleSheet.create({
wrapper: {
flex: 1,
alignItems: 'center',
alignSelf: 'stretch',
marginLeft: -1
},
base: {
//borderWidth: 1,
width: 38,
height: FILLER_HEIGHT,
alignItems: 'center'
},
fillers: {
position: 'absolute',
height: FILLER_HEIGHT,
flexDirection: 'row',
left: 0,
right: 0
},
leftFiller: {
height: FILLER_HEIGHT,
flex: 1
},
rightFiller: {
height: FILLER_HEIGHT,
flex: 1
},
text: {
marginTop: 7,
fontSize: 16,
fontWeight: '300',
color: '#2d4150',
backgroundColor: 'rgba(255, 255, 255, 0)'
},
todayText: {
fontWeight: '500',
//color: appStyle.textLinkColor
},
disabledText: {
color: appStyle.textDisabledColor
},
quickAction: {
backgroundColor: 'white',
borderWidth: 1,
borderColor: '#c1e4fe'
},
quickActionText: {
marginTop: 6,
color: appStyle.textColor
},
firstQuickAction: {
backgroundColor: appStyle.textLinkColor
},
firstQuickActionText: {
color: 'white'
},
naText: {
color: '#b6c1cd'
}
});
export default function styleConstructor(theme={}) {
const appStyle = {...defaultStyle, ...theme};
return StyleSheet.create({
wrapper: {
flex: 1,
alignItems: 'center',
alignSelf: 'stretch',
marginLeft: -1
},
base: {
//borderWidth: 1,
width: 38,
height: FILLER_HEIGHT,
alignItems: 'center'
},
fillers: {
position: 'absolute',
height: FILLER_HEIGHT,
flexDirection: 'row',
left: 0,
right: 0
},
leftFiller: {
height: FILLER_HEIGHT,
flex: 1
},
rightFiller: {
height: FILLER_HEIGHT,
flex: 1
},
text: {
marginTop: 7,
fontSize: 16,
fontWeight: '300',
color: appStyle.dayTextColor || '#2d4150',
backgroundColor: 'rgba(255, 255, 255, 0)'
},
todayText: {
fontWeight: '500',
color: appStyle.todayTextColor || '#2d4150',
//color: appStyle.textLinkColor
},
disabledText: {
color: appStyle.textDisabledColor
},
quickAction: {
backgroundColor: 'white',
borderWidth: 1,
borderColor: '#c1e4fe'
},
quickActionText: {
marginTop: 6,
color: appStyle.textColor
},
firstQuickAction: {
backgroundColor: appStyle.textLinkColor
},
firstQuickActionText: {
color: 'white'
},
naText: {
color: '#b6c1cd'
}
});
}

0 comments on commit b1cfbd5

Please sign in to comment.