From fb457d4df06bef62b632964ecee32be5cacf9675 Mon Sep 17 00:00:00 2001 From: Neil Gabbadon Date: Thu, 11 Feb 2016 00:11:19 -0500 Subject: [PATCH] Remove style-propable from date-picker components --- src/date-picker/calendar-year.jsx | 5 - src/date-picker/calendar.jsx | 23 ++--- src/date-picker/date-display.jsx | 129 +++++++++++-------------- src/date-picker/date-picker-dialog.jsx | 10 +- src/date-picker/date-picker.jsx | 15 +-- src/date-picker/day-button.jsx | 128 ++++++++++++------------ src/date-picker/year-button.jsx | 112 ++++++++++----------- 7 files changed, 202 insertions(+), 220 deletions(-) diff --git a/src/date-picker/calendar-year.jsx b/src/date-picker/calendar-year.jsx index 325edcfd05dd96..0f2bdd0b8032f3 100644 --- a/src/date-picker/calendar-year.jsx +++ b/src/date-picker/calendar-year.jsx @@ -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'; @@ -15,10 +14,6 @@ const CalendarYear = React.createClass({ selectedDate: React.PropTypes.object.isRequired, }, - mixins: [ - StylePropable, - ], - componentDidMount() { this._scrollToSelectedYear(); }, diff --git a/src/date-picker/calendar.jsx b/src/date-picker/calendar.jsx index c6ce0173d3ecd8..747ff51cc2520b 100644 --- a/src/date-picker/calendar.jsx +++ b/src/date-picker/calendar.jsx @@ -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'; @@ -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, ], @@ -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(); @@ -83,6 +77,8 @@ const Calendar = React.createClass({ selectedDate: d, }); } + + this.setState({muiTheme}); }, windowListeners: { @@ -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(); @@ -293,7 +294,7 @@ const Calendar = React.createClass({ }, }; - const weekTitleDayStyle = this.prepareStyles(styles.weekTitleDay); + const weekTitleDayStyle = prepareStyles(styles.weekTitleDay); const { DateTimeFormat, locale, @@ -301,7 +302,7 @@ const Calendar = React.createClass({ } = this.props; return ( - + {this.state.displayMonthDay && -
+
} {!this.state.displayMonthDay && -
+
{this._yearSelector()}
} diff --git a/src/date-picker/date-display.jsx b/src/date-picker/date-display.jsx index 519f4a986cbda2..eb2a8d36ebcc7e 100644 --- a/src/date-picker/date-display.jsx +++ b/src/date-picker/date-display.jsx @@ -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: { @@ -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, @@ -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; @@ -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(); @@ -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', @@ -168,22 +157,22 @@ const DateDisplay = React.createClass({ }).format(this.props.selectedDate); return ( -
+
-
+
{year}
{dateTimeFormatted} diff --git a/src/date-picker/date-picker-dialog.jsx b/src/date-picker/date-picker-dialog.jsx index 4b96b38acc441b..4e7bcf3b4835b6 100644 --- a/src/date-picker/date-picker-dialog.jsx +++ b/src/date-picker/date-picker-dialog.jsx @@ -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'; @@ -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, ], @@ -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: { diff --git a/src/date-picker/date-picker.jsx b/src/date-picker/date-picker.jsx index de67b022aed5eb..4c4b7026d29fcd 100644 --- a/src/date-picker/date-picker.jsx +++ b/src/date-picker/date-picker.jsx @@ -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'; @@ -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, ], @@ -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); @@ -284,8 +281,12 @@ const DatePicker = React.createClass({ ...other, } = this.props; + const { + prepareStyles, + } = this.state.muiTheme; + return ( -
+
-
- {this.props.date.getDate()} +
+ {this.props.date.getDate()} ) : ( - + ); }, diff --git a/src/date-picker/year-button.jsx b/src/date-picker/year-button.jsx index 1b8497aaff25be..680aaeecfead42 100644 --- a/src/date-picker/year-button.jsx +++ b/src/date-picker/year-button.jsx @@ -1,8 +1,51 @@ import React from 'react'; -import StylePropable from '../mixins/style-propable'; import EnhancedButton from '../enhanced-button'; import getMuiTheme from '../styles/getMuiTheme'; +function getStyles(props, state) { + const { + selected, + year, + } = props; + + const { + hover, + } = state; + + const { + baseTheme, + datePicker, + } = state.muiTheme; + + return { + root: { + boxSizing: 'border-box', + WebkitTapHighlightColor: 'rgba(0,0,0,0)', + position: 'relative', + display: 'block', + margin: '0 auto', + width: 36, + fontSize: 14, + padding: '8px 2px', + color: year === new Date().getFullYear() && datePicker.color, + }, + label: { + position: 'relative', + top: -1, + color: hover || selected ? datePicker.selectTextColor : baseTheme.palette.textColor, + }, + buttonState: { + position: 'absolute', + height: 32, + width: 32, + opacity: hover ? 0.6 : selected ? 1 : 0, + borderRadius: '50%', + transform: hover || selected ? 'scale(1.5)' : 'scale(0)', + backgroundColor: datePicker.selectColor, + }, + }; +} + const YearButton = React.createClass({ propTypes: { @@ -19,15 +62,10 @@ const YearButton = React.createClass({ muiTheme: React.PropTypes.object, }, - //for passing default theme context to children childContextTypes: { muiTheme: React.PropTypes.object, }, - mixins: [ - StylePropable, - ], - getDefaultProps() { return { selected: false, @@ -47,15 +85,10 @@ const YearButton = 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}); - }, - - getTheme() { - return this.state.muiTheme.datePicker; + this.setState({ + muiTheme: nextContext.muiTheme || this.state.muiTheme, + }); }, _handleMouseEnter() { @@ -79,50 +112,11 @@ const YearButton = React.createClass({ ...other, } = this.props; - let styles = { - root: { - boxSizing: 'border-box', - WebkitTapHighlightColor: 'rgba(0,0,0,0)', - position: 'relative', - display: 'block', - margin: '0 auto', - width: 36, - fontSize: 14, - padding: '8px 2px', - }, - - label: { - position: 'relative', - top: -1, - color: this.state.muiTheme.rawTheme.palette.textColor, - }, - - buttonState: { - position: 'absolute', - height: 32, - width: 32, - opacity: 0, - borderRadius: '50%', - transform: 'scale(0)', - backgroundColor: this.getTheme().selectColor, - }, - }; - - if (this.state.hover) { - styles.label.color = this.getTheme().selectTextColor; - styles.buttonState.opacity = 0.6; - styles.buttonState.transform = 'scale(1.5)'; - } - - if (selected) { - styles.label.color = this.getTheme().selectTextColor; - styles.buttonState.opacity = 1; - styles.buttonState.transform = 'scale(1.5)'; - } + const { + prepareStyles, + } = this.state.muiTheme; - if (year === new Date().getFullYear()) { - styles.root.color = this.getTheme().color; - } + const styles = getStyles(this.props, this.state); return ( -
- {year} +
+ {year} ); },