Skip to content

Commit

Permalink
Merge pull request #3291 from newoga/#2852/date-picker
Browse files Browse the repository at this point in the history
[DatePicker] Remove style-propable mixin
  • Loading branch information
oliviertassinari committed Feb 11, 2016
2 parents 70fa10b + fb457d4 commit d7570ef
Show file tree
Hide file tree
Showing 7 changed files with 202 additions and 220 deletions.
5 changes: 0 additions & 5 deletions src/date-picker/calendar-year.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import StylePropable from '../mixins/style-propable';
import Colors from '../styles/colors';
import DateTime from '../utils/date-time';
import YearButton from './year-button';
Expand All @@ -15,10 +14,6 @@ const CalendarYear = React.createClass({
selectedDate: React.PropTypes.object.isRequired,
},

mixins: [
StylePropable,
],

componentDidMount() {
this._scrollToSelectedYear();
},
Expand Down
23 changes: 12 additions & 11 deletions src/date-picker/calendar.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from 'react';
import StylePropable from '../mixins/style-propable';
import WindowListenable from '../mixins/window-listenable';
import DateTime from '../utils/date-time';
import KeyCode from '../utils/key-code';
Expand Down Expand Up @@ -34,13 +33,11 @@ const Calendar = React.createClass({
muiTheme: React.PropTypes.object,
},

//for passing default theme context to children
childContextTypes: {
muiTheme: React.PropTypes.object,
},

mixins: [
StylePropable,
WindowListenable,
],

Expand Down Expand Up @@ -70,11 +67,8 @@ const Calendar = React.createClass({
};
},

//to update theme inside state whenever a new theme is passed down
//from the parent / owner using context
componentWillReceiveProps(nextProps, nextContext) {
let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
this.setState({muiTheme: newMuiTheme});
const muiTheme = nextContext.muiTheme || this.state.muiTheme;

if (nextProps.initialDate !== this.props.initialDate) {
let d = nextProps.initialDate || new Date();
Expand All @@ -83,6 +77,8 @@ const Calendar = React.createClass({
selectedDate: d,
});
}

this.setState({muiTheme});
},

windowListeners: {
Expand Down Expand Up @@ -244,6 +240,11 @@ const Calendar = React.createClass({
},

render() {

const {
prepareStyles,
} = this.state.muiTheme;

let yearCount = DateTime.yearDiff(this.props.maxDate, this.props.minDate) + 1;
let weekCount = DateTime.getWeekArray(this.state.displayDate, this.props.firstDayOfWeek).length;
let toolbarInteractions = this._getToolbarInteractions();
Expand Down Expand Up @@ -293,15 +294,15 @@ const Calendar = React.createClass({
},
};

const weekTitleDayStyle = this.prepareStyles(styles.weekTitleDay);
const weekTitleDayStyle = prepareStyles(styles.weekTitleDay);
const {
DateTimeFormat,
locale,
firstDayOfWeek,
} = this.props;

return (
<ClearFix style={this.mergeStyles(styles.root)}>
<ClearFix style={styles.root}>
<DateDisplay
DateTimeFormat={DateTimeFormat}
locale={locale}
Expand All @@ -315,7 +316,7 @@ const Calendar = React.createClass({
weekCount={weekCount}
/>
{this.state.displayMonthDay &&
<div style={this.prepareStyles(styles.calendarContainer)}>
<div style={prepareStyles(styles.calendarContainer)}>
<CalendarToolbar
DateTimeFormat={DateTimeFormat}
locale={locale}
Expand Down Expand Up @@ -350,7 +351,7 @@ const Calendar = React.createClass({
</div>
}
{!this.state.displayMonthDay &&
<div style={this.prepareStyles(styles.yearContainer)}>
<div style={prepareStyles(styles.yearContainer)}>
{this._yearSelector()}
</div>
}
Expand Down
129 changes: 59 additions & 70 deletions src/date-picker/date-display.jsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,53 @@
import React from 'react';
import StylePropable from '../mixins/style-propable';
import Transitions from '../styles/transitions';
import SlideInTransitionGroup from '../transition-groups/slide-in';
import getMuiTheme from '../styles/getMuiTheme';

function getStyles(props, state) {
const {
datePicker,
} = state.muiTheme;

const styles = {
root: {
backgroundColor: datePicker.selectColor,
borderTopLeftRadius: 2,
borderTopRightRadius: 2,
color: datePicker.textColor,
height: 60,
padding: 20,
},
monthDay: {
display: 'inline-block',
fontSize: 36,
fontWeight: '400',
lineHeight: '36px',
height: props.mode === 'landscape' ? 76 : 38,
opacity: state.selectedYear ? 0.7 : 1.0,
transition: Transitions.easeOut(),
width: '100%',
},
monthDayTitle: {
cursor: !state.selectedYear ? 'default' : 'pointer',
},
year: {
margin: 0,
fontSize: 16,
fontWeight: '400',
lineHeight: '16px',
height: 16,
opacity: state.selectedYear ? 1.0 : 0.7,
transition: Transitions.easeOut(),
marginBottom: 10,
},
yearTitle: {
cursor: (state.selectedYear && !props.disableYearSelection) ? 'pointer' : 'default',
},
};

return styles;
}

const DateDisplay = React.createClass({

propTypes: {
Expand All @@ -27,15 +71,10 @@ const DateDisplay = React.createClass({
muiTheme: React.PropTypes.object,
},

//for passing default theme context to children
childContextTypes: {
muiTheme: React.PropTypes.object,
},

mixins: [
StylePropable,
],

getDefaultProps() {
return {
disableYearSelection: false,
Expand All @@ -59,8 +98,9 @@ const DateDisplay = React.createClass({
},

componentWillReceiveProps(nextProps, nextContext) {
let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
this.setState({muiTheme: newMuiTheme});
this.setState({
muiTheme: nextContext.muiTheme || this.state.muiTheme,
});

let direction;

Expand All @@ -76,62 +116,6 @@ const DateDisplay = React.createClass({
}
},

getTheme() {
return this.state.muiTheme.datePicker;
},

getStyles() {
const theme = this.getTheme();
const isLandscape = this.props.mode === 'landscape';

const styles = {
root: {
backgroundColor: theme.selectColor,
borderTopLeftRadius: 2,
borderTopRightRadius: 2,
color: theme.textColor,
height: 60,
padding: 20,
},

monthDay: {
root: {
display: 'inline-block',
fontSize: 36,
fontWeight: '400',
lineHeight: '36px',
height: isLandscape ? 76 : 38,
opacity: this.state.selectedYear ? 0.7 : 1.0,
transition: Transitions.easeOut(),
width: '100%',
},

title: {
cursor: !this.state.selectedYear ? 'default' : 'pointer',
},
},

year: {
root: {
margin: 0,
fontSize: 16,
fontWeight: '400',
lineHeight: '16px',
height: 16,
opacity: this.state.selectedYear ? 1.0 : 0.7,
transition: Transitions.easeOut(),
marginBottom: 10,
},

title: {
cursor: (this.state.selectedYear && !this.props.disableYearSelection) ? 'pointer' : 'default',
},
},
};

return styles;
},

_handleMonthDayClick() {
if (this.props.handleMonthDayClick && this.state.selectedYear) {
this.props.handleMonthDayClick();
Expand All @@ -158,8 +142,13 @@ const DateDisplay = React.createClass({
style,
...other,
} = this.props;

const {
prepareStyles,
} = this.state.muiTheme;

const year = this.props.selectedDate.getFullYear();
const styles = this.getStyles();
const styles = getStyles(this.props, this.state);

const dateTimeFormatted = new DateTimeFormat(locale, {
month: 'short',
Expand All @@ -168,22 +157,22 @@ const DateDisplay = React.createClass({
}).format(this.props.selectedDate);

return (
<div {...other} style={this.prepareStyles(styles.root, this.props.style)}>
<div {...other} style={prepareStyles(Object.assign(styles.root, style))}>
<SlideInTransitionGroup
style={styles.year.root}
style={styles.year}
direction={this.state.transitionDirection}
>
<div key={year} style={styles.year.title} onTouchTap={this._handleYearClick}>
<div key={year} style={styles.yearTitle} onTouchTap={this._handleYearClick}>
{year}
</div>
</SlideInTransitionGroup>
<SlideInTransitionGroup
style={styles.monthDay.root}
style={styles.monthDay}
direction={this.state.transitionDirection}
>
<div
key={dateTimeFormatted}
style={styles.monthDay.title}
style={styles.monthDayTitle}
onTouchTap={this._handleMonthDayClick}
>
{dateTimeFormatted}
Expand Down
10 changes: 3 additions & 7 deletions src/date-picker/date-picker-dialog.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react';
import ContextPure from '../mixins/context-pure';
import StylePropable from '../mixins/style-propable';
import WindowListenable from '../mixins/window-listenable';
import KeyCode from '../utils/key-code';
import Calendar from './calendar';
Expand Down Expand Up @@ -39,13 +38,11 @@ const DatePickerDialog = React.createClass({
muiTheme: React.PropTypes.object,
},

//for passing default theme context to children
childContextTypes: {
muiTheme: React.PropTypes.object,
},

mixins: [
StylePropable,
WindowListenable,
ContextPure,
],
Expand Down Expand Up @@ -89,11 +86,10 @@ const DatePickerDialog = React.createClass({
};
},

//to update theme inside state whenever a new theme is passed down
//from the parent / owner using context
componentWillReceiveProps(nextProps, nextContext) {
let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
this.setState({muiTheme: newMuiTheme});
this.setState({
muiTheme: nextContext.muiTheme || this.state.muiTheme,
});
},

windowListeners: {
Expand Down
15 changes: 8 additions & 7 deletions src/date-picker/date-picker.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from 'react';
import StylePropable from '../mixins/style-propable';
import WindowListenable from '../mixins/window-listenable';
import DateTime from '../utils/date-time';
import DatePickerDialog from './date-picker-dialog';
Expand Down Expand Up @@ -145,13 +144,11 @@ const DatePicker = React.createClass({
muiTheme: React.PropTypes.object,
},

//for passing default theme context to children
childContextTypes: {
muiTheme: React.PropTypes.object,
},

mixins: [
StylePropable,
WindowListenable,
],

Expand Down Expand Up @@ -181,9 +178,9 @@ const DatePicker = React.createClass({
},

componentWillReceiveProps(nextProps, nextContext) {
if (nextContext.muiTheme) {
this.setState({muiTheme: nextContext.muiTheme});
}
this.setState({
muiTheme: nextContext.muiTheme || this.state.muiTheme,
});

if (this._isControlled()) {
let newDate = this._getControlledDate(nextProps);
Expand Down Expand Up @@ -284,8 +281,12 @@ const DatePicker = React.createClass({
...other,
} = this.props;

const {
prepareStyles,
} = this.state.muiTheme;

return (
<div style={this.prepareStyles(style)}>
<div style={prepareStyles(Object.assign({}, style))}>
<TextField
{...other}
style={textFieldStyle}
Expand Down
Loading

0 comments on commit d7570ef

Please sign in to comment.