From 32e258474aa92b1db67cfb0cd3b5334f9cd5fb09 Mon Sep 17 00:00:00 2001 From: Ian MacLeod Date: Sat, 1 Aug 2015 17:42:41 -0700 Subject: [PATCH 001/118] IconButton tooltips accept nodes, not just strings --- src/icon-button.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/icon-button.jsx b/src/icon-button.jsx index 6a4e4b32918ebe..0a5b79b2aef549 100644 --- a/src/icon-button.jsx +++ b/src/icon-button.jsx @@ -24,7 +24,7 @@ let IconButton = React.createClass({ onBlur: React.PropTypes.func, onFocus: React.PropTypes.func, onKeyboardFocus: React.PropTypes.func, - tooltip: React.PropTypes.string, + tooltip: React.PropTypes.node, tooltipStyles: React.PropTypes.object, tooltipPosition: PropTypes.cornersAndCenter, touch: React.PropTypes.bool, From 4e68a7c11a88af24a2dd7d088b930397e582ce6b Mon Sep 17 00:00:00 2001 From: Ian MacLeod Date: Sat, 1 Aug 2015 17:49:46 -0700 Subject: [PATCH 002/118] Tooltips accept nodes for label Or at least they do now, and it's very handy - think it's worth making it part of the contract? Also see https://github.com/callemall/material-ui/pull/1314 --- src/tooltip.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tooltip.jsx b/src/tooltip.jsx index c81852706d7c69..3891703e319ace 100644 --- a/src/tooltip.jsx +++ b/src/tooltip.jsx @@ -14,7 +14,7 @@ let Tooltip = React.createClass({ propTypes: { className: React.PropTypes.string, - label: React.PropTypes.string.isRequired, + label: React.PropTypes.node.isRequired, show: React.PropTypes.bool, touch: React.PropTypes.bool, verticalPosition: React.PropTypes.oneOf(['top','bottom']), From a19f53d826faaa2e80a28dbc8c0b46122cc20c1b Mon Sep 17 00:00:00 2001 From: Barry Gribben Date: Tue, 25 Aug 2015 15:14:54 +0100 Subject: [PATCH 003/118] Added hintStyle property --- docs/src/app/components/pages/components/text-fields.jsx | 4 ++++ docs/src/app/components/raw-code/text-fields-code.txt | 4 ++++ src/text-field.jsx | 4 +++- 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/docs/src/app/components/pages/components/text-fields.jsx b/docs/src/app/components/pages/components/text-fields.jsx index 825e3baefb0158..9199556254383b 100644 --- a/docs/src/app/components/pages/components/text-fields.jsx +++ b/docs/src/app/components/pages/components/text-fields.jsx @@ -210,6 +210,10 @@ let TextFieldsPage = React.createClass({
+
+ diff --git a/src/text-field.jsx b/src/text-field.jsx index ba2a3e706afdaf..5ea3333a26eb13 100644 --- a/src/text-field.jsx +++ b/src/text-field.jsx @@ -33,6 +33,7 @@ let TextField = React.createClass({ React.PropTypes.string, React.PropTypes.element, ]), + hintStyle: React.PropTypes.object, id: React.PropTypes.string, inputStyle: React.PropTypes.object, multiLine: React.PropTypes.bool, @@ -240,6 +241,7 @@ let TextField = React.createClass({ floatingLabelText, fullWidth, hintText, + hintStyle, id, multiLine, onBlur, @@ -259,7 +261,7 @@ let TextField = React.createClass({ ) : null; let hintTextElement = hintText ? ( -
{hintText}
+
{hintText}
) : null; let floatingLabelTextElement = floatingLabelText ? ( From c5be6188cdded1f9d6c30be37b483a841c87377a Mon Sep 17 00:00:00 2001 From: David Cumps Date: Sat, 29 Aug 2015 03:38:30 +0200 Subject: [PATCH 004/118] Provide isScrollbarVisible for table --- src/table/table.jsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/table/table.jsx b/src/table/table.jsx index 5e2d00af9bffc1..bfb64293a8b085 100644 --- a/src/table/table.jsx +++ b/src/table/table.jsx @@ -136,8 +136,8 @@ let Table = React.createClass({ return (
{headerTable} -
- +
+
{inlineHeader} {inlineFooter} {tBody} @@ -148,6 +148,13 @@ let Table = React.createClass({ ); }, + isScrollbarVisible() { + const tableDivHeight = React.findDOMNode(this.refs.tableDiv).clientHeight; + const tableBodyHeight = React.findDOMNode(this.refs.tableBody).clientHeight; + + return tableBodyHeight > tableDivHeight; + }, + _createTableHeader(base) { return React.cloneElement( base, From b17921b30cb5e0bec8f2995f0955dff2e10ae82b Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 29 Aug 2015 19:54:35 +0100 Subject: [PATCH 005/118] [ListItem] render children if there is --- src/lists/list-item.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lists/list-item.jsx b/src/lists/list-item.jsx index daf135a7a482f8..b0cf7889212983 100644 --- a/src/lists/list-item.jsx +++ b/src/lists/list-item.jsx @@ -215,7 +215,7 @@ const ListItem = React.createClass({ }, }; - let contentChildren = []; + let contentChildren = [children]; if (leftIcon) { this._pushElement( From 8bb82b8c357eab7c0f7111e1fde1017b6de70d67 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 30 Aug 2015 16:10:35 +0100 Subject: [PATCH 006/118] [ListItem] add onTouchTap to the doc --- docs/src/app/components/pages/components/lists.jsx | 8 +++++++- src/lists/list-item.jsx | 3 +++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/docs/src/app/components/pages/components/lists.jsx b/docs/src/app/components/pages/components/lists.jsx index 1d246da93a604d..67d3c08498550b 100644 --- a/docs/src/app/components/pages/components/lists.jsx +++ b/docs/src/app/components/pages/components/lists.jsx @@ -204,7 +204,13 @@ class ListsPage extends React.Component { type: 'function(e)', header: 'optional', desc: 'Called when touches start.' - } + }, + { + name: 'onTouchTap', + type: 'function(event)', + header: 'optional', + desc: 'Called when a touch tap event occures on the component.' + }, ] } ]; diff --git a/src/lists/list-item.jsx b/src/lists/list-item.jsx index daf135a7a482f8..b95af437cc8227 100644 --- a/src/lists/list-item.jsx +++ b/src/lists/list-item.jsx @@ -38,6 +38,7 @@ const ListItem = React.createClass({ onMouseLeave: React.PropTypes.func, onNestedListToggle: React.PropTypes.func, onTouchStart: React.PropTypes.func, + onTouchTap: React.PropTypes.func, rightAvatar: React.PropTypes.element, rightIcon: React.PropTypes.element, rightIconButton: React.PropTypes.element, @@ -90,6 +91,7 @@ const ListItem = React.createClass({ onMouseLeave, onMouseEnter, onTouchStart, + onTouchTap, rightAvatar, rightIcon, rightIconButton, @@ -333,6 +335,7 @@ const ListItem = React.createClass({ onMouseLeave={this._handleMouseLeave} onMouseEnter={this._handleMouseEnter} onTouchStart={this._handleTouchStart} + onTouchTap={onTouchTap} ref="enhancedButton" style={this.mergeAndPrefix(styles.root, style)}>
From 98b3f9fb5712333aa53a067f0103e2d4b734f585 Mon Sep 17 00:00:00 2001 From: Joshua Date: Sun, 30 Aug 2015 19:55:31 +0100 Subject: [PATCH 007/118] support underlineStyle on --- src/select-field.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/select-field.jsx b/src/select-field.jsx index 43feb0e7e6230c..1155a08709c938 100644 --- a/src/select-field.jsx +++ b/src/select-field.jsx @@ -120,7 +120,7 @@ let SelectField = React.createClass({ style: this.mergeAndPrefix(styles.root, selectFieldRoot), labelStyle: this.mergeAndPrefix(styles.label, labelStyle), iconStyle: this.mergeAndPrefix(styles.icon, iconStyle), - underlineStyle: this.mergeAndPrefix(styles.underline), + underlineStyle: this.mergeAndPrefix(styles.underline, underlineStyle), autoWidth: false, }; From eb2a2e8fbbfd4851d33d7f9cf9505a57728442df Mon Sep 17 00:00:00 2001 From: Raffaele Date: Tue, 1 Sep 2015 13:19:47 +0200 Subject: [PATCH 008/118] Fix isBrowser definition --- src/left-nav.jsx | 7 ++++++- src/styles/auto-prefix.js | 7 ++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/left-nav.jsx b/src/left-nav.jsx index b0789b7920149c..8350ed7f515926 100644 --- a/src/left-nav.jsx +++ b/src/left-nav.jsx @@ -1,4 +1,9 @@ -const isBrowser = typeof window !== 'undefined'; +const isBrowser = !!( + typeof window !== 'undefined' && + window.document && + window.document.createElement +); + let Modernizr = isBrowser ? require('./utils/modernizr.custom') : undefined; let React = require('react'); diff --git a/src/styles/auto-prefix.js b/src/styles/auto-prefix.js index 6d44ced3f40cba..064872975c028b 100644 --- a/src/styles/auto-prefix.js +++ b/src/styles/auto-prefix.js @@ -1,4 +1,9 @@ -const isBrowser = typeof window !== 'undefined'; +const isBrowser = !!( + typeof window !== 'undefined' && + window.document && + window.document.createElement +); + const Modernizr = isBrowser ? require('../utils/modernizr.custom') : undefined; //Keep track of already prefixed keys so we can skip Modernizr prefixing From 5eee78d880e4bf7551f0b88ca1a8af846b309372 Mon Sep 17 00:00:00 2001 From: Raffaele Date: Tue, 1 Sep 2015 14:19:48 +0200 Subject: [PATCH 009/118] Const to var fix --- src/left-nav.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/left-nav.jsx b/src/left-nav.jsx index 8350ed7f515926..3ad85ebe2c91d1 100644 --- a/src/left-nav.jsx +++ b/src/left-nav.jsx @@ -1,4 +1,4 @@ -const isBrowser = !!( +let isBrowser = !!( typeof window !== 'undefined' && window.document && window.document.createElement From 085ef01d8029568163c1371b44e68be9d9f1f10e Mon Sep 17 00:00:00 2001 From: Raffaele Date: Tue, 1 Sep 2015 15:09:08 +0200 Subject: [PATCH 010/118] isBrowser util --- src/left-nav.jsx | 6 +----- src/styles/auto-prefix.js | 6 +----- src/utils/is-browser.js | 5 +++++ 3 files changed, 7 insertions(+), 10 deletions(-) create mode 100644 src/utils/is-browser.js diff --git a/src/left-nav.jsx b/src/left-nav.jsx index 3ad85ebe2c91d1..0611fb304fbbdb 100644 --- a/src/left-nav.jsx +++ b/src/left-nav.jsx @@ -1,8 +1,4 @@ -let isBrowser = !!( - typeof window !== 'undefined' && - window.document && - window.document.createElement -); +let isBrowser = require('./utils/is-browser'); let Modernizr = isBrowser ? require('./utils/modernizr.custom') : undefined; diff --git a/src/styles/auto-prefix.js b/src/styles/auto-prefix.js index 064872975c028b..558ccc325247c6 100644 --- a/src/styles/auto-prefix.js +++ b/src/styles/auto-prefix.js @@ -1,8 +1,4 @@ -const isBrowser = !!( - typeof window !== 'undefined' && - window.document && - window.document.createElement -); +const isBrowser = require('../utils/is-browser'); const Modernizr = isBrowser ? require('../utils/modernizr.custom') : undefined; diff --git a/src/utils/is-browser.js b/src/utils/is-browser.js new file mode 100644 index 00000000000000..dc05dfd7c90093 --- /dev/null +++ b/src/utils/is-browser.js @@ -0,0 +1,5 @@ +module.exports = !!( + typeof window !== 'undefined' && + window.document && + window.document.createElement +); From 27353702e456747fb7c3a61f68eec37212a5dfd0 Mon Sep 17 00:00:00 2001 From: Raffaele Date: Wed, 2 Sep 2015 10:48:34 +0200 Subject: [PATCH 011/118] Update left-nav.jsx --- src/left-nav.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/left-nav.jsx b/src/left-nav.jsx index 0611fb304fbbdb..bb10dc954143d7 100644 --- a/src/left-nav.jsx +++ b/src/left-nav.jsx @@ -1,4 +1,4 @@ -let isBrowser = require('./utils/is-browser'); +const isBrowser = require('./utils/is-browser'); let Modernizr = isBrowser ? require('./utils/modernizr.custom') : undefined; From 574c77a5474cf27269ae0918ff6111bb513ece78 Mon Sep 17 00:00:00 2001 From: Ruslan Sayfutdinov Date: Thu, 3 Sep 2015 23:19:23 +0300 Subject: [PATCH 012/118] Slider performance improvement, code refactoring. --- src/slider.jsx | 27 ++++----------------------- 1 file changed, 4 insertions(+), 23 deletions(-) diff --git a/src/slider.jsx b/src/slider.jsx index d6111ea5df3383..af24553d69c964 100644 --- a/src/slider.jsx +++ b/src/slider.jsx @@ -330,36 +330,17 @@ let Slider = React.createClass({ _alignValue(val) { let { step, min } = this.props; - - let valModStep = (val - min) % step; - let alignValue = val - valModStep; - - if (Math.abs(valModStep) * 2 >= step) { - alignValue += (valModStep > 0) ? step : (-step); - } - + let alignValue = Math.round((val - min) / step) * step; return parseFloat(alignValue.toFixed(5)); }, _constrain() { let { min, max, step } = this.props; + let steps = (max - min) / step; return (pos) => { let pixelMax = React.findDOMNode(this.refs.track).clientWidth; - let pixelStep = pixelMax / ((max - min) / step); - - let cursor = min; - let i; - for (i = 0; i < (max - min) / step; i++) { - let distance = (pos.left - cursor); - let nextDistance = (cursor + pixelStep) - pos.left; - if (Math.abs(distance) > Math.abs(nextDistance)) { - cursor += pixelStep; - } - else { - break; - } - } - + let pixelStep = pixelMax / steps; + let cursor = Math.round(pos.left / pixelStep) * pixelStep; return { left: cursor, }; From 19090caeffcab28a1ec8158087107b806dffcd7a Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 5 Sep 2015 12:21:56 +0200 Subject: [PATCH 013/118] [IconMenu] use apply the classname on the root element instead of on the menu --- src/menus/icon-menu.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/menus/icon-menu.jsx b/src/menus/icon-menu.jsx index 8eb0e5cd9caaf2..153d9ee578a7d7 100644 --- a/src/menus/icon-menu.jsx +++ b/src/menus/icon-menu.jsx @@ -63,6 +63,7 @@ let IconMenu = React.createClass({ render() { let { + className, closeOnItemTouchTap, iconButtonElement, openDirection, @@ -123,6 +124,7 @@ let IconMenu = React.createClass({ return (
Date: Sun, 6 Sep 2015 04:06:12 -0400 Subject: [PATCH 014/118] [MenuItem] Fix issue when using number and data When number is added after data, it is shoved below MenuItem because data is display:block --- src/menu/menu-item.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/menu/menu-item.jsx b/src/menu/menu-item.jsx index d274c74dc46263..c0174d84dad38c 100644 --- a/src/menu/menu-item.jsx +++ b/src/menu/menu-item.jsx @@ -161,9 +161,9 @@ let MenuItem = React.createClass({ {icon} {this.props.children} - {data} - {attribute} {number} + {attribute} + {data} {toggleElement} {iconRight} From 839a02100463ad9fbd2c17ef6969224f7e082ece Mon Sep 17 00:00:00 2001 From: Barry Gribben Date: Tue, 8 Sep 2015 09:29:10 +0100 Subject: [PATCH 015/118] Updated TextField docs to include hintStyle prop --- docs/src/app/components/pages/components/text-fields.jsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/src/app/components/pages/components/text-fields.jsx b/docs/src/app/components/pages/components/text-fields.jsx index 9199556254383b..a93f965ca40ca7 100644 --- a/docs/src/app/components/pages/components/text-fields.jsx +++ b/docs/src/app/components/pages/components/text-fields.jsx @@ -79,6 +79,12 @@ let TextFieldsPage = React.createClass({ header: 'optional', desc: 'If true, the field receives the property width 100%.' }, + { + name: 'hintStyle', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the TextField\'s hint text element.' + }, { name: 'hintText', type: 'string', From 67a1c1599b76ba782328f27947648ca1da339a50 Mon Sep 17 00:00:00 2001 From: Yanxi Date: Sat, 12 Sep 2015 16:47:46 +0800 Subject: [PATCH 016/118] fix a typo --- docs/src/www/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/www/index.html b/docs/src/www/index.html index 363195205650da..81427ebc9d3076 100644 --- a/docs/src/www/index.html +++ b/docs/src/www/index.html @@ -30,7 +30,7 @@
-
+
From 3f44d9d6f9f38d9f3ae3345dd5138878dc0198bc Mon Sep 17 00:00:00 2001 From: Keith Yao Date: Mon, 14 Sep 2015 20:31:11 +0800 Subject: [PATCH 017/118] remove extra comma --- src/slider.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/slider.jsx b/src/slider.jsx index d6111ea5df3383..400b092e1c5984 100644 --- a/src/slider.jsx +++ b/src/slider.jsx @@ -229,7 +229,7 @@ let Slider = React.createClass({ this.state.focused && {outline: 'none'}, (this.state.hovered || this.state.focused) && !this.props.disabled && styles.handleWhenPercentZeroAndFocused, - this.props.disabled && styles.handleWhenPercentZeroAndDisabled, + this.props.disabled && styles.handleWhenPercentZeroAndDisabled ) : this.mergeAndPrefix( styles.handle, this.state.active && styles.handleWhenActive, @@ -238,7 +238,7 @@ let Slider = React.createClass({ ); let rippleStyle = this.mergeAndPrefix( styles.ripple, - percent === 0 && styles.rippleWhenPercentZero, + percent === 0 && styles.rippleWhenPercentZero ); let remainingStyles = styles.remaining; if ((this.state.hovered || this.state.focused) && !this.props.disabled) { From 129f58de2620a0f0b8939eafcda1d043901d63dd Mon Sep 17 00:00:00 2001 From: mullwaden Date: Wed, 16 Sep 2015 19:12:04 +0200 Subject: [PATCH 018/118] Updated app-bar to support the IconStyle prop of iconButtons --- src/app-bar.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app-bar.jsx b/src/app-bar.jsx index abab0b1ccb9868..9d44fbd7926918 100644 --- a/src/app-bar.jsx +++ b/src/app-bar.jsx @@ -133,7 +133,7 @@ let AppBar = React.createClass({ switch (iconElementLeft.type.displayName) { case 'IconButton': iconElementLeft = React.cloneElement(iconElementLeft, { - iconStyle: this.mergeAndPrefix(styles.iconButton.iconStyle), + iconStyle: this.mergeAndPrefix(styles.iconButton.iconStyle, iconElementLeft.props.iconStyle), }); break; } @@ -163,7 +163,7 @@ let AppBar = React.createClass({ switch (iconElementRight.type.displayName) { case 'IconButton': iconElementRight = React.cloneElement(iconElementRight, { - iconStyle: this.mergeAndPrefix(styles.iconButton.iconStyle), + iconStyle: this.mergeAndPrefix(styles.iconButton.iconStyle, iconElementRight.props.iconStyle), }); break; From 23461a84dd359e7c5cd0100e952d7fcfcdb9e10c Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 16 Sep 2015 22:19:45 +0100 Subject: [PATCH 019/118] Update style-resizable.js --- src/mixins/style-resizable.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/mixins/style-resizable.js b/src/mixins/style-resizable.js index c153bdaa00d2ba..faa9bb5d2221dd 100644 --- a/src/mixins/style-resizable.js +++ b/src/mixins/style-resizable.js @@ -33,10 +33,10 @@ module.exports = { }, _updateDeviceSize() { - let width = window.innerWidth; + const width = window.innerWidth; if (width >= 992) this.setState({deviceSize: Sizes.LARGE}); else if (width >= 768) this.setState({deviceSize: Sizes.MEDIUM}); - else this.setState({deviceSize: Sizes.SMALL}); // width >= 375 + else this.setState({deviceSize: Sizes.SMALL}); // width < 768 }, _bindResize() { From be06d98923c92278a996f1e75a17820e1e98ff29 Mon Sep 17 00:00:00 2001 From: Nathan Brown Date: Sat, 19 Sep 2015 16:44:38 -0700 Subject: [PATCH 020/118] Update floating-action-button-code.txt Fix prematurely closed tag. --- .../src/app/components/raw-code/floating-action-button-code.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/app/components/raw-code/floating-action-button-code.txt b/docs/src/app/components/raw-code/floating-action-button-code.txt index faa13a947bce9f..cde82789477d25 100644 --- a/docs/src/app/components/raw-code/floating-action-button-code.txt +++ b/docs/src/app/components/raw-code/floating-action-button-code.txt @@ -6,7 +6,7 @@ + href="https://github.com/callemall/material-ui"> From 4ec054382af04224e4f909b14d856900c2dc96d4 Mon Sep 17 00:00:00 2001 From: Ruslan Sayfutdinov Date: Sun, 20 Sep 2015 18:52:10 +0300 Subject: [PATCH 021/118] [Slider] Fix bug with value aligning --- src/slider.jsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/slider.jsx b/src/slider.jsx index af24553d69c964..b221e9af02e581 100644 --- a/src/slider.jsx +++ b/src/slider.jsx @@ -330,7 +330,7 @@ let Slider = React.createClass({ _alignValue(val) { let { step, min } = this.props; - let alignValue = Math.round((val - min) / step) * step; + let alignValue = Math.round((val - min) / step) * step + min; return parseFloat(alignValue.toFixed(5)); }, @@ -407,9 +407,6 @@ let Slider = React.createClass({ _dragX(e, pos) { let max = React.findDOMNode(this.refs.track).clientWidth; if (pos < 0) pos = 0; else if (pos > max) pos = max; - if (pos === this.props.min) { - return this._updateWithChangeEvent(e, 0); - } this._updateWithChangeEvent(e, pos / max); }, From 3480c98efa2504e21b91342ed25d3919c9ca2c72 Mon Sep 17 00:00:00 2001 From: Nathan Brown Date: Mon, 21 Sep 2015 09:23:59 -0700 Subject: [PATCH 022/118] Update floating-action-button-code.txt Fixed element that should have been self closing. --- .../src/app/components/raw-code/floating-action-button-code.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/app/components/raw-code/floating-action-button-code.txt b/docs/src/app/components/raw-code/floating-action-button-code.txt index cde82789477d25..53f171752b1d1a 100644 --- a/docs/src/app/components/raw-code/floating-action-button-code.txt +++ b/docs/src/app/components/raw-code/floating-action-button-code.txt @@ -4,7 +4,7 @@ - + From d1b3c9a2dcc5473df0489aa57a65335944e757c4 Mon Sep 17 00:00:00 2001 From: Shaurya Arora Date: Wed, 9 Sep 2015 15:26:28 -0500 Subject: [PATCH 023/118] Improved theming by introducing concept of "raw theme" and "mui theme" Raw Theme is made up of spacing, palette, and font family, whereas MUI theme is made of key:value pairs, each of which represents the styling of a material-ui component based on the given raw theme. In addition, the MUI theme also contains a reference to the raw theme from which it was produced. In every material-ui component, the "state" is used for the theme, and theme is passed down using context. Within the component, theme is always accessed using state. When a component is first mounted, we check whether a theme object is passed down using context in the getInitialState() method. If one is not found, we initialize a default MUI theme based on the default (light) raw theme. Moreover, to listen for updates when the parent changes the theme, the new context is always checked in componentWillReceiveProps(). Now, the ThemeManager module simply contains functions that return new MUI theme objects (support for immutability). The theme itself (raw theme) is a plain JS object containing key:value pairs for spacing, palette, and font family. Users can easily define their own raw themes and require() them in their modules. --- src/app-bar.jsx | 46 +++- src/app-canvas.jsx | 34 ++- src/avatar.jsx | 36 ++- src/before-after-wrapper.jsx | 8 +- src/buttons/flat-button-label.jsx | 31 ++- src/card/card-actions.jsx | 6 +- src/card/card-expandable.jsx | 45 +++- src/card/card-header.jsx | 10 +- src/card/card-media.jsx | 8 +- src/card/card-text.jsx | 8 +- src/card/card-title.jsx | 8 +- src/card/card.jsx | 10 +- src/checkbox.jsx | 37 ++- src/circular-progress.jsx | 39 ++- src/clearfix.jsx | 6 +- src/date-picker/calendar-month.jsx | 10 +- src/date-picker/calendar-toolbar.jsx | 24 +- src/date-picker/calendar-year.jsx | 12 +- src/date-picker/calendar.jsx | 30 +-- src/date-picker/date-display.jsx | 25 +- src/date-picker/date-picker-dialog.jsx | 44 +++- src/date-picker/date-picker.jsx | 14 +- src/date-picker/day-button.jsx | 38 ++- src/date-picker/year-button.jsx | 34 ++- src/dialog.jsx | 78 ++++-- src/drop-down-icon.jsx | 37 ++- src/drop-down-menu.jsx | 47 ++-- src/enhanced-button.jsx | 21 +- src/enhanced-switch.jsx | 48 ++-- src/enhanced-textarea.jsx | 9 +- src/flat-button.jsx | 28 ++- src/floating-action-button.jsx | 46 ++-- src/font-icon.jsx | 34 ++- src/icon-button.jsx | 46 +++- src/index.js | 1 - src/ink-bar.jsx | 37 ++- src/left-nav.jsx | 52 ++-- src/linear-progress.jsx | 37 ++- src/lists/list-divider.jsx | 35 ++- src/lists/list-item.jsx | 44 +++- src/lists/list.jsx | 27 ++- src/menu/link-menu-item.jsx | 34 ++- src/menu/menu-item.jsx | 48 +++- src/menu/menu.jsx | 84 ++++--- src/menu/subheader-menu-item.jsx | 39 ++- src/menus/icon-menu.jsx | 44 +++- src/menus/menu-divider.jsx | 34 ++- src/menus/menu-item.jsx | 31 ++- src/menus/menu.jsx | 53 ++-- src/overlay.jsx | 10 +- src/paper.jsx | 31 ++- src/radio-button-group.jsx | 6 +- src/radio-button.jsx | 43 +++- src/raised-button.jsx | 41 +++- src/refresh-indicator.jsx | 30 ++- src/ripples/circle-ripple.jsx | 4 +- src/select-field.jsx | 37 ++- src/slider.jsx | 38 ++- src/snackbar.jsx | 26 +- src/styles/index.js | 2 + src/styles/raw-themes/dark-raw-theme.js | 20 ++ src/styles/raw-themes/light-raw-theme.js | 26 ++ src/styles/theme-manager.js | 296 ++++++++++++++++++----- src/svg-icon.jsx | 24 +- src/table/table-body.jsx | 12 +- src/table/table-footer.jsx | 37 ++- src/table/table-header-column.jsx | 34 ++- src/table/table-header.jsx | 39 ++- src/table/table-row-column.jsx | 32 ++- src/table/table-row.jsx | 32 ++- src/table/table.jsx | 34 ++- src/tabs/tab.jsx | 35 ++- src/tabs/tabTemplate.jsx | 4 +- src/tabs/tabs.jsx | 34 ++- src/text-field.jsx | 37 ++- src/time-picker/clock-button.jsx | 39 ++- src/time-picker/clock-hours.jsx | 10 +- src/time-picker/clock-minutes.jsx | 37 ++- src/time-picker/clock-number.jsx | 35 ++- src/time-picker/clock-pointer.jsx | 31 ++- src/time-picker/clock.jsx | 14 +- src/time-picker/time-display.jsx | 27 ++- src/time-picker/time-picker-dialog.jsx | 47 +++- src/time-picker/time-picker.jsx | 12 +- src/toggle.jsx | 38 ++- src/toolbar/toolbar-group.jsx | 41 +++- src/toolbar/toolbar-separator.jsx | 37 ++- src/toolbar/toolbar-title.jsx | 37 ++- src/toolbar/toolbar.jsx | 37 ++- src/tooltip.jsx | 36 ++- src/transition-groups/scale-in-child.jsx | 4 +- src/transition-groups/slide-in-child.jsx | 14 +- src/transition-groups/slide-in.jsx | 10 +- 93 files changed, 2316 insertions(+), 711 deletions(-) create mode 100644 src/styles/raw-themes/dark-raw-theme.js create mode 100644 src/styles/raw-themes/light-raw-theme.js diff --git a/src/app-bar.jsx b/src/app-bar.jsx index abab0b1ccb9868..b39f0d44203548 100644 --- a/src/app-bar.jsx +++ b/src/app-bar.jsx @@ -1,12 +1,14 @@ -let React = require('react'); -let StylePropable = require('./mixins/style-propable'); -let Typography = require('./styles/typography'); -let IconButton = require('./icon-button'); -let NavigationMenu = require('./svg-icons/navigation/menu'); -let Paper = require('./paper'); +const React = require('react'); +const StylePropable = require('./mixins/style-propable'); +const Typography = require('./styles/typography'); +const IconButton = require('./icon-button'); +const NavigationMenu = require('./svg-icons/navigation/menu'); +const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme'); +const ThemeManager = require('./styles/theme-manager'); +const Paper = require('./paper'); -let AppBar = React.createClass({ +const AppBar = React.createClass({ mixins: [StylePropable], @@ -14,6 +16,17 @@ let AppBar = React.createClass({ muiTheme: React.PropTypes.object, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + propTypes: { onLeftIconButtonTouchTap: React.PropTypes.func, onRightIconButtonTouchTap: React.PropTypes.func, @@ -28,6 +41,19 @@ let AppBar = React.createClass({ zDepth: React.PropTypes.number, }, + getInitialState () { + return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + }, + + //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}); + }, + getDefaultProps() { return { showMenuIconButton: true, @@ -55,9 +81,9 @@ let AppBar = React.createClass({ }, getStyles() { - let spacing = this.context.muiTheme.spacing; - let themeVariables = this.context.muiTheme.component.appBar; - let iconButtonSize = this.context.muiTheme.component.button.iconButtonSize; + let spacing = this.state.muiTheme.rawTheme.spacing; + let themeVariables = this.state.muiTheme.appBar; + let iconButtonSize = this.state.muiTheme.button.iconButtonSize; let flatButtonSize = 36; let styles = { root: { diff --git a/src/app-canvas.jsx b/src/app-canvas.jsx index 1781ad954cae8f..2e4bc084b1806a 100644 --- a/src/app-canvas.jsx +++ b/src/app-canvas.jsx @@ -1,7 +1,9 @@ -let React = require('react'); -let StylePropable = require('./mixins/style-propable'); +const React = require('react'); +const StylePropable = require('./mixins/style-propable'); +const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme'); +const ThemeManager = require('./styles/theme-manager'); -let AppCanvas = React.createClass({ +const AppCanvas = React.createClass({ mixins: [StylePropable], @@ -9,10 +11,34 @@ let AppCanvas = React.createClass({ muiTheme: React.PropTypes.object, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState () { + return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + }, + + //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}); + }, + render() { let styles = { height: '100%', - backgroundColor: this.context.muiTheme.palette.canvasColor, + backgroundColor: this.state.muiTheme.rawTheme.palette.canvasColor, WebkitFontSmoothing: 'antialiased', }; diff --git a/src/avatar.jsx b/src/avatar.jsx index 4a64e8f6825507..9ff730642e5dfc 100644 --- a/src/avatar.jsx +++ b/src/avatar.jsx @@ -1,8 +1,10 @@ -let React = require('react/addons'); -let StylePropable = require('./mixins/style-propable'); -let Colors = require('./styles/colors'); +const React = require('react/addons'); +const StylePropable = require('./mixins/style-propable'); +const Colors = require('./styles/colors'); +const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme'); +const ThemeManager = require('./styles/theme-manager'); -let Avatar = React.createClass({ +const Avatar = React.createClass({ mixins: [StylePropable], @@ -10,6 +12,17 @@ let Avatar = React.createClass({ muiTheme: React.PropTypes.object, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + propTypes: { backgroundColor: React.PropTypes.string, color: React.PropTypes.string, @@ -19,6 +32,19 @@ let Avatar = React.createClass({ style: React.PropTypes.object, }, + getInitialState () { + return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + }, + + //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}); + }, + getDefaultProps() { return { backgroundColor: Colors.grey400, @@ -49,7 +75,7 @@ let Avatar = React.createClass({ }; if (src) { - const borderColor = this.context.muiTheme.component.avatar.borderColor; + const borderColor = this.state.muiTheme.avatar.borderColor; if(borderColor) { styles.root = this.mergeStyles(styles.root, { diff --git a/src/before-after-wrapper.jsx b/src/before-after-wrapper.jsx index 643bcfe5dddd5e..ad866568fd005c 100644 --- a/src/before-after-wrapper.jsx +++ b/src/before-after-wrapper.jsx @@ -1,6 +1,6 @@ -let React = require('react'); -let StylePropable = require('./mixins/style-propable'); -let AutoPrefix = require('./styles/auto-prefix'); +const React = require('react'); +const StylePropable = require('./mixins/style-propable'); +const AutoPrefix = require('./styles/auto-prefix'); /** * BeforeAfterWrapper @@ -36,7 +36,7 @@ let AutoPrefix = require('./styles/auto-prefix'); * and afterElement have a defined style position. */ -let BeforeAfterWrapper = React.createClass({ +const BeforeAfterWrapper = React.createClass({ mixins: [StylePropable], diff --git a/src/buttons/flat-button-label.jsx b/src/buttons/flat-button-label.jsx index 6a0d5e14c57438..f50f56a385dbab 100644 --- a/src/buttons/flat-button-label.jsx +++ b/src/buttons/flat-button-label.jsx @@ -1,7 +1,8 @@ const React = require('react/addons'); const PureRenderMixin = React.addons.PureRenderMixin; const Styles = require('../utils/styles'); - +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); const FlatButtonLabel = React.createClass({ @@ -16,11 +17,35 @@ const FlatButtonLabel = React.createClass({ style: React.PropTypes.object, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState () { + return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + }, + + //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}); + }, + getContextProps() { - const theme = this.context.muiTheme; + const theme = this.state.muiTheme; return { - spacingDesktopGutterLess: theme.spacing.desktopGutterLess, + spacingDesktopGutterLess: theme.rawTheme.spacing.desktopGutterLess, }; }, diff --git a/src/card/card-actions.jsx b/src/card/card-actions.jsx index 2f0d350a16e97c..23faccb7ec3c5e 100644 --- a/src/card/card-actions.jsx +++ b/src/card/card-actions.jsx @@ -1,8 +1,8 @@ -let React = require('react'); -let StylePropable = require('../mixins/style-propable'); +const React = require('react'); +const StylePropable = require('../mixins/style-propable'); -let CardActions = React.createClass({ +const CardActions = React.createClass({ mixins: [StylePropable], getStyles() { diff --git a/src/card/card-expandable.jsx b/src/card/card-expandable.jsx index e05f628fc0dd57..ea60af64171cb7 100644 --- a/src/card/card-expandable.jsx +++ b/src/card/card-expandable.jsx @@ -1,12 +1,13 @@ -let React = require('react'); -let Extend = require('../utils/extend'); -let OpenIcon = require('../svg-icons/hardware/keyboard-arrow-up'); -let CloseIcon = require('../svg-icons/hardware/keyboard-arrow-down'); -let IconButton = require('../icon-button'); -let StylePropable = require('../mixins/style-propable'); - - -let CardExpandable = React.createClass({ +const React = require('react'); +const Extend = require('../utils/extend'); +const OpenIcon = require('../svg-icons/hardware/keyboard-arrow-up'); +const CloseIcon = require('../svg-icons/hardware/keyboard-arrow-down'); +const IconButton = require('../icon-button'); +const StylePropable = require('../mixins/style-propable'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); + +const CardExpandable = React.createClass({ mixins: [StylePropable], getStyles() { @@ -37,14 +38,38 @@ let CardExpandable = React.createClass({ expanded: React.PropTypes.bool, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + getContextProps() { - const theme = this.context.muiTheme; + const theme = this.state.muiTheme; return { isRtl: theme.isRtl, }; }, + getInitialState() { + return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + }, + + //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}); + }, + _onExpanding() { if (this.props.expanded === true) this.props.onExpanding(false); diff --git a/src/card/card-header.jsx b/src/card/card-header.jsx index 0e4018b23ebfc2..e02fab5ff063a7 100644 --- a/src/card/card-header.jsx +++ b/src/card/card-header.jsx @@ -1,10 +1,10 @@ -let React = require('react'); -let Styles = require('../styles'); -let Avatar = require('../avatar'); -let StylePropable = require('../mixins/style-propable'); +const React = require('react'); +const Styles = require('../styles'); +const Avatar = require('../avatar'); +const StylePropable = require('../mixins/style-propable'); -let CardHeader = React.createClass({ +const CardHeader = React.createClass({ mixins: [StylePropable], diff --git a/src/card/card-media.jsx b/src/card/card-media.jsx index 772880ec2cc489..3dc01ea68e80b3 100644 --- a/src/card/card-media.jsx +++ b/src/card/card-media.jsx @@ -1,9 +1,9 @@ -let React = require('react'); -let Styles = require('../styles'); -let StylePropable = require('../mixins/style-propable'); +const React = require('react'); +const Styles = require('../styles'); +const StylePropable = require('../mixins/style-propable'); -let CardMedia = React.createClass({ +const CardMedia = React.createClass({ mixins:[StylePropable], diff --git a/src/card/card-text.jsx b/src/card/card-text.jsx index 1c2235a71d937d..a0e7c9720aaf94 100644 --- a/src/card/card-text.jsx +++ b/src/card/card-text.jsx @@ -1,9 +1,9 @@ -let React = require('react'); -let Styles = require('../styles'); -let StylePropable = require('../mixins/style-propable'); +const React = require('react'); +const Styles = require('../styles'); +const StylePropable = require('../mixins/style-propable'); -let CardText = React.createClass({ +const CardText = React.createClass({ mixins:[StylePropable], diff --git a/src/card/card-title.jsx b/src/card/card-title.jsx index 630400536e4f63..e37415b1a6851f 100644 --- a/src/card/card-title.jsx +++ b/src/card/card-title.jsx @@ -1,9 +1,9 @@ -let React = require('react'); -let Styles = require('../styles'); -let StylePropable = require('../mixins/style-propable'); +const React = require('react'); +const Styles = require('../styles'); +const StylePropable = require('../mixins/style-propable'); -let CardTitle = React.createClass({ +const CardTitle = React.createClass({ mixins:[StylePropable], diff --git a/src/card/card.jsx b/src/card/card.jsx index 7b1af41670429d..c0ce5b018db92c 100644 --- a/src/card/card.jsx +++ b/src/card/card.jsx @@ -1,9 +1,9 @@ -let React = require('react'); -let Paper = require('../paper'); -let StylePropable = require('../mixins/style-propable'); -let CardExpandable = require('./card-expandable'); +const React = require('react'); +const Paper = require('../paper'); +const StylePropable = require('../mixins/style-propable'); +const CardExpandable = require('./card-expandable'); -let Card = React.createClass({ +const Card = React.createClass({ mixins:[StylePropable], getInitialState() { diff --git a/src/checkbox.jsx b/src/checkbox.jsx index e569720c4c07a0..b4fb7fd5efaa3c 100644 --- a/src/checkbox.jsx +++ b/src/checkbox.jsx @@ -1,12 +1,14 @@ -let React = require('react'); -let EnhancedSwitch = require('./enhanced-switch'); -let StylePropable = require('./mixins/style-propable'); -let Transitions = require('./styles/transitions'); -let CheckboxOutline = require('./svg-icons/toggle/check-box-outline-blank'); -let CheckboxChecked = require('./svg-icons/toggle/check-box'); +const React = require('react'); +const EnhancedSwitch = require('./enhanced-switch'); +const StylePropable = require('./mixins/style-propable'); +const Transitions = require('./styles/transitions'); +const CheckboxOutline = require('./svg-icons/toggle/check-box-outline-blank'); +const CheckboxChecked = require('./svg-icons/toggle/check-box'); +const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme'); +const ThemeManager = require('./styles/theme-manager'); -let Checkbox = React.createClass({ +const Checkbox = React.createClass({ mixins: [StylePropable], @@ -14,6 +16,17 @@ let Checkbox = React.createClass({ muiTheme: React.PropTypes.object, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + propTypes: { checked: React.PropTypes.bool, checkedIcon: React.PropTypes.element, @@ -31,11 +44,19 @@ let Checkbox = React.createClass({ this.props.defaultChecked || (this.props.valueLink && this.props.valueLink.value) || false, + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, + //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.context.muiTheme.component.checkbox; + return this.state.muiTheme.checkbox; }, getStyles() { diff --git a/src/circular-progress.jsx b/src/circular-progress.jsx index 94e78ca257f371..9abeaf00f07104 100644 --- a/src/circular-progress.jsx +++ b/src/circular-progress.jsx @@ -1,10 +1,11 @@ -let React = require('react'); -let StylePropable = require('./mixins/style-propable'); -let AutoPrefix = require('./styles/auto-prefix'); -let Transitions = require("./styles/transitions"); +const React = require('react'); +const StylePropable = require('./mixins/style-propable'); +const AutoPrefix = require('./styles/auto-prefix'); +const Transitions = require("./styles/transitions"); +const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme'); +const ThemeManager = require('./styles/theme-manager'); - -let CircularProgress = React.createClass({ +const CircularProgress = React.createClass({ mixins: [StylePropable], @@ -22,6 +23,30 @@ let CircularProgress = React.createClass({ muiTheme: React.PropTypes.object, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState () { + return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + }, + + //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}); + }, + _getRelativeValue() { let value = this.props.value; let min = this.props.min; @@ -96,7 +121,7 @@ let CircularProgress = React.createClass({ }, getTheme() { - return this.context.muiTheme.palette; + return this.state.muiTheme.rawTheme.palette; }, getStyles(zoom) { diff --git a/src/clearfix.jsx b/src/clearfix.jsx index 48ace8afc516e8..a2f34b49ee78a5 100644 --- a/src/clearfix.jsx +++ b/src/clearfix.jsx @@ -1,8 +1,8 @@ -let React = require('react'); -let BeforeAfterWrapper = require('./before-after-wrapper'); +const React = require('react'); +const BeforeAfterWrapper = require('./before-after-wrapper'); -let ClearFix = React.createClass({ +const ClearFix = React.createClass({ render() { let { diff --git a/src/date-picker/calendar-month.jsx b/src/date-picker/calendar-month.jsx index 3203f577544873..86bcd12bb3f6f8 100644 --- a/src/date-picker/calendar-month.jsx +++ b/src/date-picker/calendar-month.jsx @@ -1,10 +1,10 @@ -let React = require('react'); -let DateTime = require('../utils/date-time'); -let DayButton = require('./day-button'); -let ClearFix = require('../clearfix'); +const React = require('react'); +const DateTime = require('../utils/date-time'); +const DayButton = require('./day-button'); +const ClearFix = require('../clearfix'); -let CalendarMonth = React.createClass({ +const CalendarMonth = React.createClass({ propTypes: { displayDate: React.PropTypes.object.isRequired, diff --git a/src/date-picker/calendar-toolbar.jsx b/src/date-picker/calendar-toolbar.jsx index b16a281a913972..e2e3c07626572d 100644 --- a/src/date-picker/calendar-toolbar.jsx +++ b/src/date-picker/calendar-toolbar.jsx @@ -1,14 +1,16 @@ -let React = require('react'); -let DateTime = require('../utils/date-time'); -let IconButton = require('../icon-button'); -let Toolbar = require('../toolbar/toolbar'); -let ToolbarGroup = require('../toolbar/toolbar-group'); -let NavigationChevronLeft = require('../svg-icons/navigation/chevron-left'); -let NavigationChevronRight = require('../svg-icons/navigation/chevron-right'); -let SlideInTransitionGroup = require('../transition-groups/slide-in'); - - -let CalendarToolbar = React.createClass({ +const React = require('react'); +const DateTime = require('../utils/date-time'); +const IconButton = require('../icon-button'); +const Toolbar = require('../toolbar/toolbar'); +const ToolbarGroup = require('../toolbar/toolbar-group'); +const NavigationChevronLeft = require('../svg-icons/navigation/chevron-left'); +const NavigationChevronLeftDouble = require('../svg-icons/navigation-chevron-left-double'); +const NavigationChevronRight = require('../svg-icons/navigation/chevron-right'); +const NavigationChevronRightDouble = require('../svg-icons/navigation-chevron-right-double'); +const SlideInTransitionGroup = require('../transition-groups/slide-in'); + + +const CalendarToolbar = React.createClass({ propTypes: { displayDate: React.PropTypes.object.isRequired, diff --git a/src/date-picker/calendar-year.jsx b/src/date-picker/calendar-year.jsx index d924b96f990f1a..998c254f191d4a 100644 --- a/src/date-picker/calendar-year.jsx +++ b/src/date-picker/calendar-year.jsx @@ -1,11 +1,11 @@ -let React = require('react'); -let StylePropable = require('../mixins/style-propable'); -let Colors = require('../styles/colors'); -let DateTime = require('../utils/date-time'); -let YearButton = require('./year-button'); +const React = require('react'); +const StylePropable = require('../mixins/style-propable'); +const Colors = require('../styles/colors'); +const DateTime = require('../utils/date-time'); +const YearButton = require('./year-button'); -let CalendarYear = React.createClass({ +const CalendarYear = React.createClass({ mixins: [StylePropable], diff --git a/src/date-picker/calendar.jsx b/src/date-picker/calendar.jsx index ef4e33b09b465a..22a09dfe0c1830 100644 --- a/src/date-picker/calendar.jsx +++ b/src/date-picker/calendar.jsx @@ -1,18 +1,18 @@ -let React = require('react'); -let StylePropable = require('../mixins/style-propable'); -let WindowListenable = require('../mixins/window-listenable'); -let DateTime = require('../utils/date-time'); -let KeyCode = require('../utils/key-code'); -let Transitions = require('../styles/transitions'); -let CalendarMonth = require('./calendar-month'); -let CalendarYear = require('./calendar-year'); -let CalendarToolbar = require('./calendar-toolbar'); -let DateDisplay = require('./date-display'); -let SlideInTransitionGroup = require('../transition-groups/slide-in'); -let ClearFix = require('../clearfix'); - - -let Calendar = React.createClass({ +const React = require('react'); +const StylePropable = require('../mixins/style-propable'); +const WindowListenable = require('../mixins/window-listenable'); +const DateTime = require('../utils/date-time'); +const KeyCode = require('../utils/key-code'); +const Transitions = require('../styles/transitions'); +const CalendarMonth = require('./calendar-month'); +const CalendarYear = require('./calendar-year'); +const CalendarToolbar = require('./calendar-toolbar'); +const DateDisplay = require('./date-display'); +const SlideInTransitionGroup = require('../transition-groups/slide-in'); +const ClearFix = require('../clearfix'); + + +const Calendar = React.createClass({ mixins: [StylePropable, WindowListenable], diff --git a/src/date-picker/date-display.jsx b/src/date-picker/date-display.jsx index 7300b3217089fe..669169e76631fd 100644 --- a/src/date-picker/date-display.jsx +++ b/src/date-picker/date-display.jsx @@ -2,10 +2,12 @@ const React = require('react'); const StylePropable = require('../mixins/style-propable'); const DateTime = require('../utils/date-time'); const Transitions = require('../styles/transitions'); +const AutoPrefix = require('../styles/auto-prefix'); const SlideInTransitionGroup = require('../transition-groups/slide-in'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); - -let DateDisplay = React.createClass({ +const DateDisplay = React.createClass({ mixins: [StylePropable], @@ -20,6 +22,17 @@ let DateDisplay = React.createClass({ weekCount: React.PropTypes.number, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + getDefaultProps() { return { disableYearSelection: false, @@ -32,10 +45,14 @@ let DateDisplay = React.createClass({ return { selectedYear: !this.props.monthDaySelected, transitionDirection: 'up', + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, - componentWillReceiveProps(nextProps) { + componentWillReceiveProps(nextProps, nextContext) { + let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; + this.setState({muiTheme: newMuiTheme}); + let direction; if (nextProps.selectedDate !== this.props.selectedDate) { @@ -51,7 +68,7 @@ let DateDisplay = React.createClass({ }, getTheme() { - return this.context.muiTheme.component.datePicker; + return this.state.muiTheme.datePicker; }, getStyles() { diff --git a/src/date-picker/date-picker-dialog.jsx b/src/date-picker/date-picker-dialog.jsx index 2a5623dc7fad21..6cba219b1983b7 100644 --- a/src/date-picker/date-picker-dialog.jsx +++ b/src/date-picker/date-picker-dialog.jsx @@ -1,14 +1,15 @@ -let React = require('react'); -let StylePropable = require('../mixins/style-propable'); -let WindowListenable = require('../mixins/window-listenable'); -let CssEvent = require('../utils/css-event'); -let KeyCode = require('../utils/key-code'); -let Calendar = require('./calendar'); -let Dialog = require('../dialog'); -let FlatButton = require('../flat-button'); - - -let DatePickerDialog = React.createClass({ +const React = require('react'); +const StylePropable = require('../mixins/style-propable'); +const WindowListenable = require('../mixins/window-listenable'); +const CssEvent = require('../utils/css-event'); +const KeyCode = require('../utils/key-code'); +const Calendar = require('./calendar'); +const Dialog = require('../dialog'); +const FlatButton = require('../flat-button'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); + +const DatePickerDialog = React.createClass({ mixins: [StylePropable, WindowListenable], @@ -29,6 +30,17 @@ let DatePickerDialog = React.createClass({ showYearSelector: React.PropTypes.bool, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + windowListeners: { keyup: '_handleWindowKeyUp', }, @@ -37,9 +49,17 @@ let DatePickerDialog = React.createClass({ return { isCalendarActive: false, showMonthDayPicker: true, + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, + //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}); + }, + render() { let { initialDate, @@ -50,8 +70,8 @@ let DatePickerDialog = React.createClass({ let styles = { root: { - color: this.context.muiTheme.component.datePicker.calendarTextColor, fontSize: 14, + color: this.state.muiTheme.datePicker.calendarTextColor, }, dialogContent: { diff --git a/src/date-picker/date-picker.jsx b/src/date-picker/date-picker.jsx index 1672d8f7d70cf0..75b3d88807f049 100644 --- a/src/date-picker/date-picker.jsx +++ b/src/date-picker/date-picker.jsx @@ -1,12 +1,12 @@ -let React = require('react'); -let StylePropable = require('../mixins/style-propable'); -let WindowListenable = require('../mixins/window-listenable'); -let DateTime = require('../utils/date-time'); -let DatePickerDialog = require('./date-picker-dialog'); -let TextField = require('../text-field'); +const React = require('react'); +const StylePropable = require('../mixins/style-propable'); +const WindowListenable = require('../mixins/window-listenable'); +const DateTime = require('../utils/date-time'); +const DatePickerDialog = require('./date-picker-dialog'); +const TextField = require('../text-field'); -let DatePicker = React.createClass({ +const DatePicker = React.createClass({ mixins: [StylePropable, WindowListenable], diff --git a/src/date-picker/day-button.jsx b/src/date-picker/day-button.jsx index 63f7d791c83ad1..18e525415239d9 100644 --- a/src/date-picker/day-button.jsx +++ b/src/date-picker/day-button.jsx @@ -1,11 +1,12 @@ -let React = require('react'); -let StylePropable = require('../mixins/style-propable'); -let Transition = require('../styles/transitions'); -let DateTime = require('../utils/date-time'); -let EnhancedButton = require('../enhanced-button'); +const React = require('react'); +const StylePropable = require('../mixins/style-propable'); +const Transition = require('../styles/transitions'); +const DateTime = require('../utils/date-time'); +const EnhancedButton = require('../enhanced-button'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); - -let DayButton = React.createClass({ +const DayButton = React.createClass({ mixins: [StylePropable], @@ -20,6 +21,17 @@ let DayButton = React.createClass({ disabled: React.PropTypes.bool, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + getDefaultProps() { return { selected: false, @@ -30,11 +42,19 @@ let DayButton = React.createClass({ getInitialState() { return { hover: false, + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, + //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.context.muiTheme.component.datePicker; + return this.state.muiTheme.datePicker; }, render() { @@ -57,7 +77,7 @@ let DayButton = React.createClass({ label: { position: 'relative', - color: this.context.muiTheme.palette.textColor, + color: this.state.muiTheme.rawTheme.palette.textColor, }, buttonState: { diff --git a/src/date-picker/year-button.jsx b/src/date-picker/year-button.jsx index 60a692a031745c..b26dfc963f8a13 100644 --- a/src/date-picker/year-button.jsx +++ b/src/date-picker/year-button.jsx @@ -1,9 +1,10 @@ -let React = require('react'); -let StylePropable = require('../mixins/style-propable'); -let EnhancedButton = require('../enhanced-button'); +const React = require('react'); +const StylePropable = require('../mixins/style-propable'); +const EnhancedButton = require('../enhanced-button'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); - -let YearButton = React.createClass({ +const YearButton = React.createClass({ mixins: [StylePropable], @@ -17,6 +18,17 @@ let YearButton = React.createClass({ selected: React.PropTypes.bool, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + getDefaultProps() { return { selected: false, @@ -26,11 +38,19 @@ let YearButton = React.createClass({ getInitialState() { return { hover: false, + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, + //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.context.muiTheme.component.datePicker; + return this.state.muiTheme.datePicker; }, render() { @@ -57,7 +77,7 @@ let YearButton = React.createClass({ label: { position: 'relative', top: -1, - color: this.context.muiTheme.palette.textColor, + color: this.state.muiTheme.rawTheme.palette.textColor, }, buttonState: { diff --git a/src/dialog.jsx b/src/dialog.jsx index d3c01bc8691973..4b961ce5e04c5a 100644 --- a/src/dialog.jsx +++ b/src/dialog.jsx @@ -1,30 +1,51 @@ -let React = require('react/addons'); -let WindowListenable = require('./mixins/window-listenable'); -let CssEvent = require('./utils/css-event'); -let KeyCode = require('./utils/key-code'); -let Transitions = require('./styles/transitions'); -let StylePropable = require('./mixins/style-propable'); -let FlatButton = require('./flat-button'); -let Overlay = require('./overlay'); -let Paper = require('./paper'); - -let ReactTransitionGroup = React.addons.TransitionGroup; - -let TransitionItem = React.createClass({ +const React = require('react/addons'); +const WindowListenable = require('./mixins/window-listenable'); +const CssEvent = require('./utils/css-event'); +const KeyCode = require('./utils/key-code'); +const Transitions = require('./styles/transitions'); +const StylePropable = require('./mixins/style-propable'); +const FlatButton = require('./flat-button'); +const Overlay = require('./overlay'); +const Paper = require('./paper'); +const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme'); +const ThemeManager = require('./styles/theme-manager'); + +const ReactTransitionGroup = React.addons.TransitionGroup; + +const TransitionItem = React.createClass({ mixins: [StylePropable], contextTypes: { muiTheme: React.PropTypes.object, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + getInitialState() { return { style: {}, + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, + //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}); + }, + componentWillEnter(callback) { - let spacing = this.context.muiTheme.spacing; + let spacing = this.state.muiTheme.rawTheme.spacing; this.setState({ style: { @@ -46,7 +67,7 @@ let TransitionItem = React.createClass({ setTimeout(() => { if (this.isMounted()) callback(); - }.bind(this), 450); // matches transition duration + }, 450); // matches transition duration }, render() { @@ -69,6 +90,17 @@ let Dialog = React.createClass({ muiTheme: React.PropTypes.object, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + propTypes: { actions: React.PropTypes.array, autoDetectWindowHeight: React.PropTypes.bool, @@ -103,9 +135,17 @@ let Dialog = React.createClass({ getInitialState() { return { open: this.props.openImmediately || false, + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, + //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}); + }, + componentDidMount() { this._positionDialog(); if (this.props.openImmediately) { @@ -119,7 +159,7 @@ let Dialog = React.createClass({ }, getStyles() { - let spacing = this.context.muiTheme.spacing; + let spacing = this.state.muiTheme.rawTheme.spacing; let main = { position: 'fixed', @@ -154,7 +194,7 @@ let Dialog = React.createClass({ let title = { margin: 0, padding: gutter + gutter + '0 ' + gutter, - color: this.context.muiTheme.palette.textColor, + color: this.state.muiTheme.rawTheme.palette.textColor, fontSize: 24, lineHeight: '32px', fontWeight: '400', @@ -172,7 +212,7 @@ let Dialog = React.createClass({ main: this.mergeAndPrefix(main, this.props.style), content: this.mergeAndPrefix(content, this.props.contentStyle), paper: { - background: this.context.muiTheme.canvasColor, + background: this.state.muiTheme.rawTheme.palette.canvasColor, }, body: this.mergeStyles(body, this.props.bodyStyle), title: this.mergeStyles(title, this.props.titleStyle), @@ -227,7 +267,7 @@ let Dialog = React.createClass({ dismiss() { CssEvent.onTransitionEnd(this.getDOMNode(), () => { this.refs.dialogOverlay.allowScrolling(); - }.bind(this)); + }); this.setState({ open: false }); this._onDismiss(); diff --git a/src/drop-down-icon.jsx b/src/drop-down-icon.jsx index 29e2af6cd3c4bf..a851a4e7da9fbc 100644 --- a/src/drop-down-icon.jsx +++ b/src/drop-down-icon.jsx @@ -1,12 +1,14 @@ -let React = require('react'); -let StylePropable = require('./mixins/style-propable'); -let Transitions = require('./styles/transitions'); -let ClickAwayable = require('./mixins/click-awayable'); -let FontIcon = require('./font-icon'); -let Menu = require('./menu/menu'); +const React = require('react'); +const StylePropable = require('./mixins/style-propable'); +const Transitions = require('./styles/transitions'); +const ClickAwayable = require('./mixins/click-awayable'); +const FontIcon = require('./font-icon'); +const Menu = require('./menu/menu'); +const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme'); +const ThemeManager = require('./styles/theme-manager'); -let DropDownIcon = React.createClass({ +const DropDownIcon = React.createClass({ mixins: [StylePropable, ClickAwayable], @@ -14,6 +16,17 @@ let DropDownIcon = React.createClass({ muiTheme: React.PropTypes.object, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + propTypes: { onChange: React.PropTypes.func, menuItems: React.PropTypes.array.isRequired, @@ -26,9 +39,17 @@ let DropDownIcon = React.createClass({ getInitialState() { return { open: false, + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, + //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}); + }, + getDefaultProps() { return { closeOnMenuItemTouchTap: true, @@ -47,7 +68,7 @@ let DropDownIcon = React.createClass({ }, getStyles() { - let spacing = this.context.muiTheme.spacing; + let spacing = this.state.muiTheme.rawTheme.spacing; let iconWidth = 48; let styles = { root: { diff --git a/src/drop-down-menu.jsx b/src/drop-down-menu.jsx index cee002f7d8f885..0cae587dd2bf32 100644 --- a/src/drop-down-menu.jsx +++ b/src/drop-down-menu.jsx @@ -1,14 +1,16 @@ -let React = require('react'); -let StylePropable = require('./mixins/style-propable'); -let Transitions = require('./styles/transitions'); -let KeyCode = require('./utils/key-code'); -let DropDownArrow = require('./svg-icons/navigation/arrow-drop-down'); -let Paper = require('./paper'); -let Menu = require('./menu/menu'); -let ClearFix = require('./clearfix'); +const React = require('react'); +const StylePropable = require('./mixins/style-propable'); +const Transitions = require('./styles/transitions'); +const KeyCode = require('./utils/key-code'); +const DropDownArrow = require('./svg-icons/navigation/arrow-drop-down'); +const Paper = require('./paper'); +const Menu = require('./menu/menu'); +const ClearFix = require('./clearfix'); +const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme'); +const ThemeManager = require('./styles/theme-manager'); -let DropDownMenu = React.createClass({ +const DropDownMenu = React.createClass({ mixins: [StylePropable], @@ -16,6 +18,17 @@ let DropDownMenu = React.createClass({ muiTheme: React.PropTypes.object, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + // The nested styles for drop-down-menu are modified by toolbar and possibly // other user components, so it will give full access to its js styles rather // than just the parent. @@ -47,6 +60,7 @@ let DropDownMenu = React.createClass({ return { open: false, selectedIndex: this._isControlled() ? null : (this.props.selectedIndex || 0), + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, @@ -55,7 +69,10 @@ let DropDownMenu = React.createClass({ if (this.props.hasOwnProperty('selectedIndex')) this._setSelectedIndex(this.props); }, - componentWillReceiveProps(nextProps) { + componentWillReceiveProps(nextProps, nextContext) { + let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; + this.setState({muiTheme: newMuiTheme}); + if (this.props.autoWidth) this._setWidth(); if (nextProps.hasOwnProperty('value') || nextProps.hasOwnProperty('valueLink')) { return; @@ -68,9 +85,9 @@ let DropDownMenu = React.createClass({ getStyles(){ const {disabled} = this.props; let zIndex = 5; // As AppBar - let spacing = this.context.muiTheme.spacing; - let accentColor = this.context.muiTheme.component.dropDownMenu.accentColor; - let backgroundColor = this.context.muiTheme.component.menu.backgroundColor; + let spacing = this.state.muiTheme.rawTheme.spacing; + let accentColor = this.state.muiTheme.dropDownMenu.accentColor; + let backgroundColor = this.state.muiTheme.menu.backgroundColor; let styles = { root: { transition: Transitions.easeOut(), @@ -96,7 +113,7 @@ let DropDownMenu = React.createClass({ position: 'absolute', top: ((spacing.desktopToolbarHeight - 24) / 2), right: spacing.desktopGutterLess, - fill: this.context.muiTheme.component.dropDownMenu.accentColor, + fill: this.state.muiTheme.dropDownMenu.accentColor, }, label: { transition: Transitions.easeOut(), @@ -105,7 +122,7 @@ let DropDownMenu = React.createClass({ paddingLeft: spacing.desktopGutter, top: 0, opacity: 1, - color: disabled ? this.context.muiTheme.palette.disabledColor : this.context.muiTheme.palette.textColor, + color: disabled ? this.state.muiTheme.rawTheme.palette.disabledColor : this.state.muiTheme.rawTheme.palette.textColor, }, underline: { borderTop: 'solid 1px ' + accentColor, diff --git a/src/enhanced-button.jsx b/src/enhanced-button.jsx index 772cf4d85d00c8..a21b1f7a8e89da 100644 --- a/src/enhanced-button.jsx +++ b/src/enhanced-button.jsx @@ -7,6 +7,8 @@ const Events = require('./utils/events'); const KeyCode = require('./utils/key-code'); const FocusRipple = require('./ripples/focus-ripple'); const TouchRipple = require('./ripples/touch-ripple'); +const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme'); +const ThemeManager = require('./styles/theme-manager'); let styleInjected = false; let listening = false; @@ -46,6 +48,17 @@ const EnhancedButton = React.createClass({ muiTheme: React.PropTypes.object, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + propTypes: { centerRipple: React.PropTypes.bool, containerElement: React.PropTypes.oneOfType([ @@ -90,10 +103,14 @@ const EnhancedButton = React.createClass({ isKeyboardFocused: !this.props.disabled && this.props.keyboardFocused && !this.props.disableKeyboardFocus, + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, - componentWillReceiveProps(nextProps) { + componentWillReceiveProps(nextProps, nextContext) { + let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; + this.setState({muiTheme: newMuiTheme}); + if ((nextProps.disabled || nextProps.disableKeyboardFocus) && this.state.isKeyboardFocused) { this.setState({isKeyboardFocused: false}); @@ -139,7 +156,7 @@ const EnhancedButton = React.createClass({ boxSizing: 'border-box', display: 'inline-block', font: 'inherit', - fontFamily: this.context.muiTheme.contentFontFamily, + fontFamily: this.state.muiTheme.rawTheme.fontFamily, tapHighlightColor: Colors.transparent, appearance: linkButton ? null : 'button', cursor: disabled ? 'default' : 'pointer', diff --git a/src/enhanced-switch.jsx b/src/enhanced-switch.jsx index 814a34036dc375..6edd67fadd34b1 100644 --- a/src/enhanced-switch.jsx +++ b/src/enhanced-switch.jsx @@ -1,16 +1,17 @@ -let React = require('react'); -let KeyCode = require('./utils/key-code'); -let StylePropable = require('./mixins/style-propable'); -let Transitions = require('./styles/transitions'); -let UniqueId = require('./utils/unique-id'); -let WindowListenable = require('./mixins/window-listenable'); -let ClearFix = require('./clearfix'); -let FocusRipple = require('./ripples/focus-ripple'); -let TouchRipple = require('./ripples/touch-ripple'); -let Paper = require('./paper'); - - -let EnhancedSwitch = React.createClass({ +const React = require('react'); +const KeyCode = require('./utils/key-code'); +const StylePropable = require('./mixins/style-propable'); +const Transitions = require('./styles/transitions'); +const UniqueId = require('./utils/unique-id'); +const WindowListenable = require('./mixins/window-listenable'); +const ClearFix = require('./clearfix'); +const FocusRipple = require('./ripples/focus-ripple'); +const TouchRipple = require('./ripples/touch-ripple'); +const Paper = require('./paper'); +const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme'); +const ThemeManager = require('./styles/theme-manager'); + +const EnhancedSwitch = React.createClass({ mixins: [WindowListenable, StylePropable], @@ -18,6 +19,17 @@ let EnhancedSwitch = React.createClass({ muiTheme: React.PropTypes.object, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + propTypes: { id: React.PropTypes.string, inputType: React.PropTypes.string.isRequired, @@ -51,6 +63,7 @@ let EnhancedSwitch = React.createClass({ return { isKeyboardFocused: false, parentWidth: 100, + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, @@ -77,7 +90,7 @@ let EnhancedSwitch = React.createClass({ window.removeEventListener("resize", this._handleResize); }, - componentWillReceiveProps(nextProps) { + componentWillReceiveProps(nextProps, nextContext) { let hasCheckedLinkProp = nextProps.hasOwnProperty('checkedLink'); let hasCheckedProp = nextProps.hasOwnProperty('checked'); let hasToggledProp = nextProps.hasOwnProperty('toggled'); @@ -85,6 +98,7 @@ let EnhancedSwitch = React.createClass({ (nextProps.hasOwnProperty('defaultSwitched') && (nextProps.defaultSwitched !== this.props.defaultSwitched)); let newState = {}; + newState.muiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; if (hasCheckedProp) { newState.switched = nextProps.checked; @@ -102,14 +116,16 @@ let EnhancedSwitch = React.createClass({ if (newState.switched !== undefined && (newState.switched !== this.props.switched)) { this.props.onParentShouldUpdate(newState.switched); } + + this.setState(newState); }, getTheme() { - return this.context.muiTheme.palette; + return this.state.muiTheme.rawTheme.palette; }, getStyles() { - let spacing = this.context.muiTheme.spacing; + let spacing = this.state.muiTheme.rawTheme.spacing; let switchWidth = 60 - spacing.desktopGutterLess; let labelWidth = 'calc(100% - 60px)'; let styles = { diff --git a/src/enhanced-textarea.jsx b/src/enhanced-textarea.jsx index 36e2e43bbcf3af..c9043ca2e28cd4 100644 --- a/src/enhanced-textarea.jsx +++ b/src/enhanced-textarea.jsx @@ -1,9 +1,8 @@ -let React = require('react'); -let StylePropable = require('./mixins/style-propable'); -let AutoPrefix = require('./styles/auto-prefix'); +const React = require('react'); +const StylePropable = require('./mixins/style-propable'); +const AutoPrefix = require('./styles/auto-prefix'); - -let EnhancedTextarea = React.createClass({ +const EnhancedTextarea = React.createClass({ mixins: [StylePropable], diff --git a/src/flat-button.jsx b/src/flat-button.jsx index 35d61c53275f94..536ce6be99a958 100644 --- a/src/flat-button.jsx +++ b/src/flat-button.jsx @@ -7,7 +7,8 @@ const ImmutabilityHelper = require('./utils/immutability-helper'); const Typography = require('./styles/typography'); const EnhancedButton = require('./enhanced-button'); const FlatButtonLabel = require('./buttons/flat-button-label'); - +const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme'); +const ThemeManager = require('./styles/theme-manager'); function validateLabel (props, propName, componentName) { if (!props.children && !props.label) { @@ -24,6 +25,17 @@ const FlatButton = React.createClass({ muiTheme: React.PropTypes.object, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + propTypes: { disabled: React.PropTypes.bool, hoverColor: React.PropTypes.string, @@ -55,13 +67,21 @@ const FlatButton = React.createClass({ hovered: false, isKeyboardFocused: false, touch: false, + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, + //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}); + }, + getContextProps() { - const theme = this.context.muiTheme; - const buttonTheme = theme.component.button; - const flatButtonTheme = theme.component.flatButton; + const theme = this.state.muiTheme; + const buttonTheme = theme.button; + const flatButtonTheme = theme.flatButton; return { buttonColor: flatButtonTheme.color, diff --git a/src/floating-action-button.jsx b/src/floating-action-button.jsx index bbb003df65f18e..00f29dc3269ecd 100644 --- a/src/floating-action-button.jsx +++ b/src/floating-action-button.jsx @@ -1,12 +1,13 @@ -let React = require('react'); -let StylePropable = require('./mixins/style-propable'); -let Transitions = require('./styles/transitions'); -let ColorManipulator = require('./utils/color-manipulator'); -let EnhancedButton = require('./enhanced-button'); -let FontIcon = require('./font-icon'); -let Paper = require('./paper'); -let Children = require('./utils/children'); - +const React = require('react'); +const StylePropable = require('./mixins/style-propable'); +const Transitions = require('./styles/transitions'); +const ColorManipulator = require('./utils/color-manipulator'); +const EnhancedButton = require('./enhanced-button'); +const FontIcon = require('./font-icon'); +const Paper = require('./paper'); +const Children = require('./utils/children'); +const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme'); +const ThemeManager = require('./styles/theme-manager'); let getZDepth = function(disabled) { let zDepth = disabled ? 0 : 2; @@ -17,7 +18,7 @@ let getZDepth = function(disabled) { }; -let FloatingActionButton = React.createClass({ +const FloatingActionButton = React.createClass({ mixins: [StylePropable], @@ -25,6 +26,17 @@ let FloatingActionButton = React.createClass({ muiTheme: React.PropTypes.object, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + propTypes: { backgroundColor: React.PropTypes.string, disabled: React.PropTypes.bool, @@ -47,6 +59,7 @@ let FloatingActionButton = React.createClass({ initialZDepth: zDepth, touch: false, zDepth: zDepth, + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, @@ -54,7 +67,10 @@ let FloatingActionButton = React.createClass({ this.setState(getZDepth(this.props.disabled)); }, - componentWillReceiveProps(newProps) { + componentWillReceiveProps(newProps, nextContext) { + let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; + this.setState({muiTheme: newMuiTheme}); + if (newProps.disabled !== this.props.disabled) { this.setState(getZDepth(newProps.disabled)); } @@ -80,17 +96,17 @@ let FloatingActionButton = React.createClass({ getTheme() { - return this.context.muiTheme.component.floatingActionButton; + return this.state.muiTheme.floatingActionButton; }, _getIconColor() { return this.props.disabled ? this.getTheme().disabledTextColor : - this.props.secondary ? this.getTheme().secondaryIconColor : - this.getTheme().iconColor; + (this.props.secondary ? this.getTheme().secondaryIconColor : + this.getTheme().iconColor); }, getStyles() { - let themeVariables = this.context.muiTheme.component.floatingActionButton; + let themeVariables = this.state.muiTheme.floatingActionButton; let styles = { root: { diff --git a/src/font-icon.jsx b/src/font-icon.jsx index c4ab455d8eef7a..8b9aa643ff3a5d 100644 --- a/src/font-icon.jsx +++ b/src/font-icon.jsx @@ -1,9 +1,10 @@ -let React = require('react'); -let StylePropable = require('./mixins/style-propable'); -let Transitions = require('./styles/transitions'); +const React = require('react'); +const StylePropable = require('./mixins/style-propable'); +const Transitions = require('./styles/transitions'); +const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme'); +const ThemeManager = require('./styles/theme-manager'); - -let FontIcon = React.createClass({ +const FontIcon = React.createClass({ mixins: [StylePropable], @@ -11,6 +12,17 @@ let FontIcon = React.createClass({ muiTheme: React.PropTypes.object, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + propTypes: { color: React.PropTypes.string, hoverColor: React.PropTypes.string, @@ -21,9 +33,17 @@ let FontIcon = React.createClass({ getInitialState() { return { hovered: false, + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, + //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}); + }, + render() { let { color, @@ -34,10 +54,10 @@ let FontIcon = React.createClass({ ...other, } = this.props; - let spacing = this.context.muiTheme.spacing; + let spacing = this.state.muiTheme.rawTheme.spacing; let offColor = color ? color : style && style.color ? style.color : - this.context.muiTheme.palette.textColor; + this.state.muiTheme.rawTheme.palette.textColor; let onColor = hoverColor ? hoverColor : offColor; let mergedStyles = this.mergeAndPrefix({ diff --git a/src/icon-button.jsx b/src/icon-button.jsx index 6a4e4b32918ebe..ac9d98aa4b2079 100644 --- a/src/icon-button.jsx +++ b/src/icon-button.jsx @@ -1,14 +1,15 @@ -let React = require('react'); -let StylePropable = require('./mixins/style-propable'); -let Transitions = require('./styles/transitions'); -let PropTypes = require('./utils/prop-types'); -let EnhancedButton = require('./enhanced-button'); -let FontIcon = require('./font-icon'); -let Tooltip = require('./tooltip'); -let Children = require('./utils/children'); - - -let IconButton = React.createClass({ +const React = require('react'); +const StylePropable = require('./mixins/style-propable'); +const Transitions = require('./styles/transitions'); +const PropTypes = require('./utils/prop-types'); +const EnhancedButton = require('./enhanced-button'); +const FontIcon = require('./font-icon'); +const Tooltip = require('./tooltip'); +const Children = require('./utils/children'); +const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme'); +const ThemeManager = require('./styles/theme-manager'); + +const IconButton = React.createClass({ mixins: [StylePropable], @@ -16,6 +17,17 @@ let IconButton = React.createClass({ muiTheme: React.PropTypes.object, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + propTypes: { className: React.PropTypes.string, disabled: React.PropTypes.bool, @@ -33,9 +45,17 @@ let IconButton = React.createClass({ getInitialState() { return { tooltipShown: false, + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, + //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}); + }, + getDefaultProps() { return { iconStyle: {}, @@ -44,8 +64,8 @@ let IconButton = React.createClass({ }, getStyles() { - let spacing = this.context.muiTheme.spacing; - let palette = this.context.muiTheme.palette; + let spacing = this.state.muiTheme.rawTheme.spacing; + let palette = this.state.muiTheme.rawTheme.palette; let styles = { root: { diff --git a/src/index.js b/src/index.js index c8783205d1c4c7..d52345e6ed3ade 100644 --- a/src/index.js +++ b/src/index.js @@ -58,7 +58,6 @@ module.exports = { TableHeaderColumn: require('./table/table-header-column'), TableRow: require('./table/table-row'), TableRowColumn: require('./table/table-row-column'), - Theme: require('./theme'), Toggle: require('./toggle'), TimePicker: require('./time-picker'), TextField: require('./text-field'), diff --git a/src/ink-bar.jsx b/src/ink-bar.jsx index 4a9b184ee3bece..c7191907d0616b 100644 --- a/src/ink-bar.jsx +++ b/src/ink-bar.jsx @@ -1,20 +1,45 @@ -let React = require('react'); -let Transitions = require('./styles/transitions'); -let StylePropable = require('./mixins/style-propable'); +const React = require('react'); +const Transitions = require('./styles/transitions'); +const StylePropable = require('./mixins/style-propable'); +const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme'); +const ThemeManager = require('./styles/theme-manager'); - -let InkBar = React.createClass({ +const InkBar = React.createClass({ contextTypes: { muiTheme: React.PropTypes.object, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + propTypes: { color: React.PropTypes.string, left: React.PropTypes.string.isRequired, width: React.PropTypes.string.isRequired, }, + getInitialState () { + return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + }, + + //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}); + }, + mixins: [StylePropable], render() { @@ -32,7 +57,7 @@ let InkBar = React.createClass({ width: width, bottom: 0, display: 'block', - backgroundColor: this.context.muiTheme.component.inkBar.backgroundColor, + backgroundColor: this.state.muiTheme.inkBar.backgroundColor, height: 2, marginTop: -2, position: 'relative', diff --git a/src/left-nav.jsx b/src/left-nav.jsx index b0789b7920149c..4f414e37fc0eaf 100644 --- a/src/left-nav.jsx +++ b/src/left-nav.jsx @@ -1,20 +1,22 @@ const isBrowser = typeof window !== 'undefined'; let Modernizr = isBrowser ? require('./utils/modernizr.custom') : undefined; -let React = require('react'); -let KeyCode = require('./utils/key-code'); -let StylePropable = require('./mixins/style-propable'); -let AutoPrefix = require('./styles/auto-prefix'); -let Transitions = require('./styles/transitions'); -let WindowListenable = require('./mixins/window-listenable'); -let Overlay = require('./overlay'); -let Paper = require('./paper'); -let Menu = require('./menu/menu'); +const React = require('react'); +const KeyCode = require('./utils/key-code'); +const StylePropable = require('./mixins/style-propable'); +const AutoPrefix = require('./styles/auto-prefix'); +const Transitions = require('./styles/transitions'); +const WindowListenable = require('./mixins/window-listenable'); +const Overlay = require('./overlay'); +const Paper = require('./paper'); +const Menu = require('./menu/menu'); +const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme'); +const ThemeManager = require('./styles/theme-manager'); let openNavEventHandler = null; -let LeftNav = React.createClass({ +const LeftNav = React.createClass({ mixins: [StylePropable, WindowListenable], @@ -22,6 +24,17 @@ let LeftNav = React.createClass({ muiTheme: React.PropTypes.object, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + propTypes: { className: React.PropTypes.string, disableSwipeToOpen: React.PropTypes.bool, @@ -59,9 +72,17 @@ let LeftNav = React.createClass({ return { open: this.props.docked, swiping: null, + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, + //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}); + }, + componentDidMount() { this._updateMenuHeight(); this._enableSwipeHandling(); @@ -94,11 +115,11 @@ let LeftNav = React.createClass({ }, getThemePalette() { - return this.context.muiTheme.palette; + return this.state.muiTheme.rawTheme.palette; }, getTheme() { - return this.context.muiTheme.component.leftNav; + return this.state.muiTheme.leftNav; }, getStyles() { @@ -123,8 +144,8 @@ let LeftNav = React.createClass({ borderRadius: '0', }, menuItem: { - height: this.context.muiTheme.spacing.desktopLeftNavMenuItemHeight, - lineHeight: this.context.muiTheme.spacing.desktopLeftNavMenuItemHeight + 'px', + height: this.state.muiTheme.rawTheme.spacing.desktopLeftNavMenuItemHeight, + lineHeight: this.state.muiTheme.rawTheme.spacing.desktopLeftNavMenuItemHeight + 'px', }, rootWhenOpenRight: { left: 'auto', @@ -155,8 +176,7 @@ let LeftNav = React.createClass({ ref="overlay" show={this.state.open || !!this.state.swiping} transitionEnabled={!this.state.swiping} - onTouchTap={this._onOverlayTouchTap} - /> + onTouchTap={this._onOverlayTouchTap} /> ); } diff --git a/src/linear-progress.jsx b/src/linear-progress.jsx index ababaa8236865b..5dda0218f3739b 100644 --- a/src/linear-progress.jsx +++ b/src/linear-progress.jsx @@ -1,9 +1,10 @@ -let React = require('react'); -let StylePropable = require('./mixins/style-propable'); -let Transitions = require("./styles/transitions"); +const React = require('react'); +const StylePropable = require('./mixins/style-propable'); +const Transitions = require("./styles/transitions"); +const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme'); +const ThemeManager = require('./styles/theme-manager'); - -let LinearProgress = React.createClass({ +const LinearProgress = React.createClass({ mixins: [StylePropable], @@ -18,6 +19,30 @@ let LinearProgress = React.createClass({ muiTheme: React.PropTypes.object, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState () { + return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + }, + + //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}); + }, + _getRelativeValue() { let value = this.props.value; let min = this.props.min; @@ -79,7 +104,7 @@ let LinearProgress = React.createClass({ }, getTheme() { - return this.context.muiTheme.palette; + return this.state.muiTheme.rawTheme.palette; }, getStyles() { diff --git a/src/lists/list-divider.jsx b/src/lists/list-divider.jsx index f4cd8a90b7f3fa..73f39d844a9a50 100644 --- a/src/lists/list-divider.jsx +++ b/src/lists/list-divider.jsx @@ -1,8 +1,9 @@ -let React = require('react/addons'); -let StylePropable = require('../mixins/style-propable'); +const React = require('react/addons'); +const StylePropable = require('../mixins/style-propable'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); - -let ListDivider = React.createClass({ +const ListDivider = React.createClass({ mixins: [StylePropable], @@ -14,6 +15,30 @@ let ListDivider = React.createClass({ inset: React.PropTypes.bool, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState () { + return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + }, + + //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}); + }, + render() { let { inset, @@ -27,7 +52,7 @@ let ListDivider = React.createClass({ marginLeft: inset ? 72 : 0, height: 1, border: 'none', - backgroundColor: this.context.muiTheme.palette.borderColor, + backgroundColor: this.state.muiTheme.rawTheme.palette.borderColor, }, style); return ( diff --git a/src/lists/list-item.jsx b/src/lists/list-item.jsx index daf135a7a482f8..1c9098e8f874de 100644 --- a/src/lists/list-item.jsx +++ b/src/lists/list-item.jsx @@ -10,7 +10,8 @@ const IconButton = require('../icon-button'); const OpenIcon = require('../svg-icons/navigation/arrow-drop-up'); const CloseIcon = require('../svg-icons/navigation/arrow-drop-down'); const NestedList = require('./nested-list'); - +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); const ListItem = React.createClass({ @@ -47,6 +48,17 @@ const ListItem = React.createClass({ secondaryTextLines: React.PropTypes.oneOf([1, 2]), }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + getDefaultProps() { return { autoGenerateNestedIndicator: true, @@ -70,9 +82,17 @@ const ListItem = React.createClass({ rightIconButtonHovered: false, rightIconButtonKeyboardFocused: false, touch: false, + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, + //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}); + }, + render() { const { autoGenerateNestedIndicator, @@ -101,7 +121,7 @@ const ListItem = React.createClass({ ...other, } = this.props; - const textColor = this.context.muiTheme.palette.textColor; + const textColor = this.state.muiTheme.rawTheme.palette.textColor; const hoverColor = ColorManipulator.fade(textColor, 0.1); const singleAvatar = !secondaryText && (leftAvatar || rightAvatar); const singleNoAvatar = !secondaryText && !(leftAvatar || rightAvatar); @@ -124,7 +144,7 @@ const ListItem = React.createClass({ //This inner div is needed so that ripples will span the entire container innerDiv: { - marginLeft: nestedLevel * this.context.muiTheme.component.listItem.nestedLevelDepth, + marginLeft: nestedLevel * this.state.muiTheme.listItem.nestedLevelDepth, paddingLeft: leftIcon || leftAvatar || leftCheckbox || insetChildren ? 72 : 16, paddingRight: rightIcon || rightAvatar || rightIconButton ? 56 : rightToggle ? 72 : 16, paddingBottom: singleAvatar ? 20 : 16, @@ -221,7 +241,7 @@ const ListItem = React.createClass({ this._pushElement( contentChildren, leftIcon, - this.mergeStyles(styles.icons, styles.leftIcon), + this.mergeStyles(styles.icons, styles.leftIcon) ); } @@ -229,7 +249,7 @@ const ListItem = React.createClass({ this._pushElement( contentChildren, rightIcon, - this.mergeStyles(styles.icons, styles.rightIcon), + this.mergeStyles(styles.icons, styles.rightIcon) ); } @@ -237,7 +257,7 @@ const ListItem = React.createClass({ this._pushElement( contentChildren, leftAvatar, - this.mergeStyles(styles.avatars, styles.leftAvatar), + this.mergeStyles(styles.avatars, styles.leftAvatar) ); } @@ -245,7 +265,7 @@ const ListItem = React.createClass({ this._pushElement( contentChildren, rightAvatar, - this.mergeStyles(styles.avatars, styles.rightAvatar), + this.mergeStyles(styles.avatars, styles.rightAvatar) ); } @@ -253,7 +273,7 @@ const ListItem = React.createClass({ this._pushElement( contentChildren, leftCheckbox, - this.mergeStyles(styles.leftCheckbox), + this.mergeStyles(styles.leftCheckbox) ); } @@ -285,7 +305,7 @@ const ListItem = React.createClass({ contentChildren, rightIconButtonElement, this.mergeStyles(styles.rightIconButton), - rightIconButtonHandlers, + rightIconButtonHandlers ); } @@ -293,7 +313,7 @@ const ListItem = React.createClass({ this._pushElement( contentChildren, rightToggle, - this.mergeStyles(styles.rightToggle), + this.mergeStyles(styles.rightToggle) ); } @@ -375,7 +395,7 @@ const ListItem = React.createClass({ styles.root, styles.innerDiv, innerDivStyle, - style, + style ); return React.createElement('div', { style: mergedDivStyles }, contentChildren); @@ -392,7 +412,7 @@ const ListItem = React.createClass({ styles.innerDiv, innerDivStyle, styles.label, - style, + style ); return React.createElement('label', { style: mergedLabelStyles }, contentChildren); diff --git a/src/lists/list.jsx b/src/lists/list.jsx index ee55e7d18210bc..fb2a3e7a90c43b 100644 --- a/src/lists/list.jsx +++ b/src/lists/list.jsx @@ -4,7 +4,8 @@ const PropTypes = require('../utils/prop-types'); const StylePropable = require('../mixins/style-propable'); const Typography = require('../styles/typography'); const Paper = require('../paper'); - +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); const List = React.createClass({ @@ -21,12 +22,36 @@ const List = React.createClass({ zDepth: PropTypes.zDepth, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + getDefaultProps() { return { zDepth: 0, }; }, + getInitialState () { + return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + }, + + //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}); + }, + render() { const { children, diff --git a/src/menu/link-menu-item.jsx b/src/menu/link-menu-item.jsx index 69b322b731faee..d47f9933854792 100644 --- a/src/menu/link-menu-item.jsx +++ b/src/menu/link-menu-item.jsx @@ -1,8 +1,9 @@ -let React = require('react'); -let StylePropable = require('../mixins/style-propable'); +const React = require('react'); +const StylePropable = require('../mixins/style-propable'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); - -let LinkMenuItem = React.createClass({ +const LinkMenuItem = React.createClass({ mixins: [StylePropable], @@ -27,14 +28,33 @@ let LinkMenuItem = React.createClass({ }; }, - getInitialState() { + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState () { return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), hovered: false, }; }, + //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.context.muiTheme.component.menuItem; + return this.state.muiTheme.menuItem; }, getStyles() { @@ -55,7 +75,7 @@ let LinkMenuItem = React.createClass({ }, rootWhenDisabled: { cursor: 'default', - color: this.context.muiTheme.palette.disabledColor, + color: this.state.muiTheme.rawTheme.palette.disabledColor, }, }; diff --git a/src/menu/menu-item.jsx b/src/menu/menu-item.jsx index d274c74dc46263..dee26e832d2abf 100644 --- a/src/menu/menu-item.jsx +++ b/src/menu/menu-item.jsx @@ -1,7 +1,9 @@ -let React = require('react'); -let StylePropable = require('../mixins/style-propable'); -let FontIcon = require('../font-icon'); -let Toggle = require('../toggle'); +const React = require('react'); +const StylePropable = require('../mixins/style-propable'); +const FontIcon = require('../font-icon'); +const Toggle = require('../toggle'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); const Types = { LINK: 'LINK', @@ -10,7 +12,7 @@ const Types = { }; -let MenuItem = React.createClass({ +const MenuItem = React.createClass({ mixins: [StylePropable], @@ -36,6 +38,30 @@ let MenuItem = React.createClass({ active: React.PropTypes.bool, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState () { + return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + }, + + //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}); + }, + statics: { Types: Types, }, @@ -49,11 +75,11 @@ let MenuItem = React.createClass({ }, getTheme() { - return this.context.muiTheme.component.menuItem; + return this.state.muiTheme.menuItem; }, getSpacing() { - return this.context.muiTheme.spacing; + return this.state.muiTheme.rawTheme.spacing; }, getStyles() { @@ -64,7 +90,7 @@ let MenuItem = React.createClass({ lineHeight: this.getTheme().height + 'px', paddingLeft: this.getTheme().padding, paddingRight: this.getTheme().padding, - color: this.context.muiTheme.palette.textColor, + color: this.state.muiTheme.rawTheme.palette.textColor, }, number: { float: 'right', @@ -92,10 +118,10 @@ let MenuItem = React.createClass({ top: -12, position: 'relative', fontWeight: 300, - color: this.context.muiTheme.palette.textColor, + color: this.state.muiTheme.rawTheme.palette.textColor, }, toggle: { - marginTop: ((this.getTheme().height - this.context.muiTheme.component.radioButton.size) / 2), + marginTop: ((this.getTheme().height - this.state.muiTheme.radioButton.size) / 2), float: 'right', width: 42, }, @@ -107,7 +133,7 @@ let MenuItem = React.createClass({ }, rootWhenDisabled: { cursor: 'default', - color: this.context.muiTheme.palette.disabledColor, + color: this.state.muiTheme.rawTheme.palette.disabledColor, }, }; diff --git a/src/menu/menu.jsx b/src/menu/menu.jsx index f20d543a4f7cc9..51f43fd5815db4 100644 --- a/src/menu/menu.jsx +++ b/src/menu/menu.jsx @@ -1,20 +1,21 @@ -let React = require('react'); -let CssEvent = require('../utils/css-event'); -let KeyLine = require('../utils/key-line'); -let KeyCode = require('../utils/key-code'); -let StylePropable = require('../mixins/style-propable'); -let Transitions = require('../styles/transitions'); -let ClickAwayable = require('../mixins/click-awayable'); -let Paper = require('../paper'); -let MenuItem = require('./menu-item'); -let LinkMenuItem = require('./link-menu-item'); -let SubheaderMenuItem = require('./subheader-menu-item'); - +const React = require('react'); +const CssEvent = require('../utils/css-event'); +const KeyLine = require('../utils/key-line'); +const KeyCode = require('../utils/key-code'); +const StylePropable = require('../mixins/style-propable'); +const Transitions = require('../styles/transitions'); +const ClickAwayable = require('../mixins/click-awayable'); +const Paper = require('../paper'); +const MenuItem = require('./menu-item'); +const LinkMenuItem = require('./link-menu-item'); +const SubheaderMenuItem = require('./subheader-menu-item'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); /*********************** * Nested Menu Component ***********************/ -let NestedMenuItem = React.createClass({ +const NestedMenuItem = React.createClass({ mixins: [ClickAwayable, StylePropable], @@ -39,8 +40,20 @@ let NestedMenuItem = React.createClass({ }; }, - getInitialState() { + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState () { return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), open: false, activeIndex: 0, }; @@ -61,7 +74,7 @@ let NestedMenuItem = React.createClass({ }, getSpacing() { - return this.context.muiTheme.spacing; + return this.state.muiTheme.rawTheme.spacing; }, getStyles() { @@ -70,7 +83,7 @@ let NestedMenuItem = React.createClass({ userSelect: 'none', cursor: 'pointer', lineHeight: this.getTheme().height + 'px', - color: this.context.muiTheme.palette.textColor, + color: this.state.muiTheme.rawTheme.palette.textColor, }, icon: { float: 'left', @@ -78,7 +91,7 @@ let NestedMenuItem = React.createClass({ marginRight: this.getSpacing().desktopGutter, }, toggle: { - marginTop: ((this.getTheme().height - this.context.muiTheme.component.radioButton.size) / 2), + marginTop: ((this.getTheme().height - this.state.muiTheme.radioButton.size) / 2), float: 'right', width: 42, }, @@ -90,7 +103,7 @@ let NestedMenuItem = React.createClass({ }, rootWhenDisabled: { cursor: 'default', - color: this.context.muiTheme.palette.disabledColor, + color: this.state.muiTheme.rawTheme.palette.disabledColor, }, }; @@ -98,7 +111,7 @@ let NestedMenuItem = React.createClass({ }, getTheme() { - return this.context.muiTheme.component.menuItem; + return this.state.muiTheme.menuItem; }, render() { @@ -110,7 +123,7 @@ let NestedMenuItem = React.createClass({ let iconCustomArrowDropRight = { marginRight: this.getSpacing().desktopGutterMini * -1, - color: this.context.muiTheme.component.dropDownMenu.accentColor, + color: this.state.muiTheme.dropDownMenu.accentColor, }; let { @@ -194,7 +207,7 @@ let NestedMenuItem = React.createClass({ /**************** * Menu Component ****************/ -let Menu = React.createClass({ +const Menu = React.createClass({ mixins: [StylePropable], @@ -220,8 +233,20 @@ let Menu = React.createClass({ menuItemClassNameLink: React.PropTypes.string, }, - getInitialState() { + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState () { return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), nestedMenuShown: false, activeIndex: 0, }; @@ -253,17 +278,22 @@ let Menu = React.createClass({ } }, - componentWillReceiveProps() { + //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}); + //Set the menu width this._setKeyWidth(React.findDOMNode(this)); }, getTheme() { - return this.context.muiTheme.component.menu; + return this.state.muiTheme.menu; }, getSpacing() { - return this.context.muiTheme.spacing; + return this.state.muiTheme.rawTheme.spacing; }, getStyles() { @@ -276,8 +306,8 @@ let Menu = React.createClass({ outline:'none !important', }, subheader: { - paddingLeft: this.context.muiTheme.component.menuSubheader.padding, - paddingRight: this.context.muiTheme.component.menuSubheader.padding, + paddingLeft: this.state.muiTheme.menuSubheader.padding, + paddingRight: this.state.muiTheme.menuSubheader.padding, }, hideable: { overflow: 'hidden', diff --git a/src/menu/subheader-menu-item.jsx b/src/menu/subheader-menu-item.jsx index cae63131ebbed9..0124c09aafd654 100644 --- a/src/menu/subheader-menu-item.jsx +++ b/src/menu/subheader-menu-item.jsx @@ -1,9 +1,10 @@ -let React = require('react'); -let StylePropable = require('../mixins/style-propable'); -let Typography = require('../styles/typography'); +const React = require('react'); +const StylePropable = require('../mixins/style-propable'); +const Typography = require('../styles/typography'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); - -let SubheaderMenuItem = React.createClass({ +const SubheaderMenuItem = React.createClass({ mixins: [StylePropable], @@ -18,12 +19,36 @@ let SubheaderMenuItem = React.createClass({ className: React.PropTypes.string, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState () { + return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + }, + + //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.context.muiTheme.component.menuSubheader; + return this.state.muiTheme.menuSubheader; }, getSpacing() { - return this.context.muiTheme.spacing; + return this.state.muiTheme.rawTheme.spacing; }, getStyles() { diff --git a/src/menus/icon-menu.jsx b/src/menus/icon-menu.jsx index 8eb0e5cd9caaf2..2b02d4f1ed3dad 100644 --- a/src/menus/icon-menu.jsx +++ b/src/menus/icon-menu.jsx @@ -1,13 +1,14 @@ -let React = require('react/addons'); -let ReactTransitionGroup = React.addons.TransitionGroup; -let ClickAwayable = require('../mixins/click-awayable'); -let StylePropable = require('../mixins/style-propable'); -let Events = require('../utils/events'); -let PropTypes = require('../utils/prop-types'); -let Menu = require('../menus/menu'); - - -let IconMenu = React.createClass({ +const React = require('react/addons'); +const ReactTransitionGroup = React.addons.TransitionGroup; +const ClickAwayable = require('../mixins/click-awayable'); +const StylePropable = require('../mixins/style-propable'); +const Events = require('../utils/events'); +const PropTypes = require('../utils/prop-types'); +const Menu = require('../menus/menu'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); + +const IconMenu = React.createClass({ mixins: [StylePropable, ClickAwayable], @@ -45,14 +46,33 @@ let IconMenu = React.createClass({ }; }, - getInitialState() { + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState () { return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), iconButtonRef: this.props.iconButtonElement.props.ref || 'iconButton', menuInitiallyKeyboardFocused: false, open: false, }; }, + //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}); + }, + componentWillUnmount() { if (this._timeout) clearTimeout(this._timeout); }, @@ -104,7 +124,7 @@ let IconMenu = React.createClass({ onTouchTap: (e) => { this.open(Events.isKeyboard(e)); if (iconButtonElement.props.onTouchTap) iconButtonElement.props.onTouchTap(e); - }.bind(this), + }, ref: this.state.iconButtonRef, }); diff --git a/src/menus/menu-divider.jsx b/src/menus/menu-divider.jsx index d373f593302547..38eb4c814b26bc 100644 --- a/src/menus/menu-divider.jsx +++ b/src/menus/menu-divider.jsx @@ -1,8 +1,10 @@ -let React = require('react/addons'); -let StylePropable = require('../mixins/style-propable'); -let ListDivider = require('../lists/list-divider'); +const React = require('react/addons'); +const StylePropable = require('../mixins/style-propable'); +const ListDivider = require('../lists/list-divider'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); -let MenuDivider = React.createClass({ +const MenuDivider = React.createClass({ mixins: [StylePropable], @@ -10,6 +12,30 @@ let MenuDivider = React.createClass({ muiTheme: React.PropTypes.object, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState () { + return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + }, + + //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}); + }, + render() { let { style, diff --git a/src/menus/menu-item.jsx b/src/menus/menu-item.jsx index f81d5893e73e7e..79e1a7a6d1c75f 100644 --- a/src/menus/menu-item.jsx +++ b/src/menus/menu-item.jsx @@ -4,7 +4,8 @@ const StylePropable = require('../mixins/style-propable'); const Colors = require('../styles/colors'); const CheckIcon = require('../svg-icons/navigation/check'); const ListItem = require('../lists/list-item'); - +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); const MenuItem = React.createClass({ @@ -31,6 +32,30 @@ const MenuItem = React.createClass({ value: React.PropTypes.string, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState () { + return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + }, + + //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}); + }, + getDefaultProps() { return { focusState: 'none', @@ -62,8 +87,8 @@ const MenuItem = React.createClass({ ...other, } = this.props; - const disabledColor = this.context.muiTheme.palette.disabledColor; - const textColor = this.context.muiTheme.palette.textColor; + const disabledColor = this.state.muiTheme.rawTheme.palette.disabledColor; + const textColor = this.state.muiTheme.rawTheme.palette.textColor; const leftIndent = desktop ? 64 : 72; const sidePadding = desktop ? 24 : 16; diff --git a/src/menus/menu.jsx b/src/menus/menu.jsx index 46b393320c520c..be228b35b28934 100644 --- a/src/menus/menu.jsx +++ b/src/menus/menu.jsx @@ -1,16 +1,17 @@ -let React = require('react/addons'); -let update = React.addons.update; -let Controllable = require('../mixins/controllable'); -let StylePropable = require('../mixins/style-propable'); -let AutoPrefix = require('../styles/auto-prefix'); -let Transitions = require('../styles/transitions'); -let KeyCode = require('../utils/key-code'); -let PropTypes = require('../utils/prop-types'); -let List = require('../lists/list'); -let Paper = require('../paper'); - - -let Menu = React.createClass({ +const React = require('react/addons'); +const update = React.addons.update; +const Controllable = require('../mixins/controllable'); +const StylePropable = require('../mixins/style-propable'); +const AutoPrefix = require('../styles/auto-prefix'); +const Transitions = require('../styles/transitions'); +const KeyCode = require('../utils/key-code'); +const PropTypes = require('../utils/prop-types'); +const List = require('../lists/list'); +const Paper = require('../paper'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); + +const Menu = React.createClass({ mixins: [StylePropable, Controllable], @@ -48,6 +49,17 @@ let Menu = React.createClass({ }; }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + getInitialState() { let selectedIndex = this._getSelectedIndex(this.props); @@ -55,6 +67,7 @@ let Menu = React.createClass({ focusIndex: selectedIndex >= 0 ? selectedIndex : 0, isKeyboardFocused: this.props.initiallyKeyboardFocused, keyWidth: this.props.desktop ? 64 : 56, + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, @@ -81,15 +94,17 @@ let Menu = React.createClass({ setTimeout(() => { if (this.isMounted()) callback(); - }.bind(this), 250); + }, 250); }, - componentWillReceiveProps(nextProps) { + componentWillReceiveProps(nextProps, nextContext) { let selectedIndex = this._getSelectedIndex(nextProps); + let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; this.setState({ focusIndex: selectedIndex >= 0 ? selectedIndex : 0, keyWidth: nextProps.desktop ? 64 : 56, + muiTheme: newMuiTheme, }); }, @@ -154,7 +169,7 @@ let Menu = React.createClass({ }, selectedMenuItem: { - color: this.context.muiTheme.palette.accent1Color, + color: this.state.muiTheme.rawTheme.palette.accent1Color, }, }; @@ -201,7 +216,7 @@ let Menu = React.createClass({
{clonedChild}
) : clonedChild; - }.bind(this)); + }); return (
{ if (this.isMounted()) callback(); - }.bind(this), 2000); + }, 2000); }, render() { @@ -85,7 +85,7 @@ const CircleRipple = React.createClass({ AutoPrefix.set(style, 'transform', 'scale(0)'); setTimeout(() => { if (this.isMounted()) callback(); - }.bind(this), 0); + }, 0); }, }); diff --git a/src/select-field.jsx b/src/select-field.jsx index 43feb0e7e6230c..31d3440e805247 100644 --- a/src/select-field.jsx +++ b/src/select-field.jsx @@ -1,10 +1,11 @@ -let React = require('react'); -let StylePropable = require('./mixins/style-propable'); -let TextField = require('./text-field'); -let DropDownMenu = require('./drop-down-menu'); +const React = require('react'); +const StylePropable = require('./mixins/style-propable'); +const TextField = require('./text-field'); +const DropDownMenu = require('./drop-down-menu'); +const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme'); +const ThemeManager = require('./styles/theme-manager'); - -let SelectField = React.createClass({ +const SelectField = React.createClass({ mixins: [StylePropable], @@ -38,12 +39,36 @@ let SelectField = React.createClass({ selectedIndex: React.PropTypes.number, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState () { + return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + }, + getDefaultProps() { return { fullWidth: false, }; }, + //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}); + }, + getStyles() { let styles = { root: { diff --git a/src/slider.jsx b/src/slider.jsx index d6111ea5df3383..1603f69ae347b6 100644 --- a/src/slider.jsx +++ b/src/slider.jsx @@ -1,9 +1,10 @@ -let React = require('react'); -let StylePropable = require('./mixins/style-propable'); -let Draggable = require('react-draggable2'); -let Transitions = require('./styles/transitions'); -let FocusRipple = require('./ripples/focus-ripple'); - +const React = require('react'); +const StylePropable = require('./mixins/style-propable'); +const Draggable = require('react-draggable2'); +const Transitions = require('./styles/transitions'); +const FocusRipple = require('./ripples/focus-ripple'); +const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme'); +const ThemeManager = require('./styles/theme-manager'); /** * Verifies min/max range. @@ -40,7 +41,7 @@ let valueInRangePropType = (props, propName, componentName) => { }; -let Slider = React.createClass({ +const Slider = React.createClass({ mixins: [StylePropable], @@ -66,6 +67,17 @@ let Slider = React.createClass({ value: valueInRangePropType, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + getDefaultProps() { return { defaultValue: 0, @@ -92,17 +104,21 @@ let Slider = React.createClass({ hovered: false, percent: percent, value: value, + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, - componentWillReceiveProps(nextProps) { + componentWillReceiveProps(nextProps, nextContext) { + let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; + this.setState({muiTheme: newMuiTheme}); + if (nextProps.value !== undefined) { this.setValue(nextProps.value); } }, getTheme() { - return this.context.muiTheme.component.slider; + return this.state.muiTheme.slider; }, getStyles() { @@ -229,7 +245,7 @@ let Slider = React.createClass({ this.state.focused && {outline: 'none'}, (this.state.hovered || this.state.focused) && !this.props.disabled && styles.handleWhenPercentZeroAndFocused, - this.props.disabled && styles.handleWhenPercentZeroAndDisabled, + this.props.disabled && styles.handleWhenPercentZeroAndDisabled ) : this.mergeAndPrefix( styles.handle, this.state.active && styles.handleWhenActive, @@ -238,7 +254,7 @@ let Slider = React.createClass({ ); let rippleStyle = this.mergeAndPrefix( styles.ripple, - percent === 0 && styles.rippleWhenPercentZero, + percent === 0 && styles.rippleWhenPercentZero ); let remainingStyles = styles.remaining; if ((this.state.hovered || this.state.focused) && !this.props.disabled) { diff --git a/src/snackbar.jsx b/src/snackbar.jsx index 372e9464f1923f..b1c8e31e82a582 100644 --- a/src/snackbar.jsx +++ b/src/snackbar.jsx @@ -4,7 +4,8 @@ const StylePropable = require('./mixins/style-propable'); const Transitions = require('./styles/transitions'); const ClickAwayable = require('./mixins/click-awayable'); const FlatButton = require('./flat-button'); - +const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme'); +const ThemeManager = require('./styles/theme-manager'); const Snackbar = React.createClass({ @@ -29,12 +30,31 @@ const Snackbar = React.createClass({ openOnMount: React.PropTypes.bool, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + getInitialState() { return { open: this.props.openOnMount || false, + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, + //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}); + }, + componentDidMount() { if (this.props.openOnMount) { this._setAutoHideTimer(); @@ -68,11 +88,11 @@ const Snackbar = React.createClass({ }, getTheme() { - return this.context.muiTheme.component.snackbar; + return this.state.muiTheme.snackbar; }, getSpacing() { - return this.context.muiTheme.spacing; + return this.state.muiTheme.rawTheme.spacing; }, getStyles() { diff --git a/src/styles/index.js b/src/styles/index.js index 4d5d8cca335536..703e1afc63245b 100644 --- a/src/styles/index.js +++ b/src/styles/index.js @@ -5,4 +5,6 @@ module.exports = { ThemeManager: require('./theme-manager'), Transitions: require('./transitions'), Typography: require('./typography'), + LightRawTheme: require('./raw-themes/light-raw-theme'), + DarkRawTheme: require('./raw-themes/dark-raw-theme'), }; diff --git a/src/styles/raw-themes/dark-raw-theme.js b/src/styles/raw-themes/dark-raw-theme.js new file mode 100644 index 00000000000000..7e55a9d4d93bb3 --- /dev/null +++ b/src/styles/raw-themes/dark-raw-theme.js @@ -0,0 +1,20 @@ +let Colors = require('../colors'); +let ColorManipulator = require('../../utils/color-manipulator'); +let Spacing = require('../spacing'); + +module.exports = { + spacing: Spacing, + fontFamily: 'Roboto, sans-serif', + palette: { + primary1Color: Colors.teal200, + primary2Color: Colors.cyan700, + primary3Color: Colors.cyan100, + accent1Color: Colors.pinkA200, + accent2Color: Colors.pinkA400, + accent3Color: Colors.pinkA100, + textColor: Colors.fullWhite, + canvasColor: '#303030', + borderColor: ColorManipulator.fade(Colors.fullWhite, 0.3), + disabledColor: ColorManipulator.fade(Colors.fullWhite, 0.3), + }, +}; diff --git a/src/styles/raw-themes/light-raw-theme.js b/src/styles/raw-themes/light-raw-theme.js new file mode 100644 index 00000000000000..c97881d921ad9e --- /dev/null +++ b/src/styles/raw-themes/light-raw-theme.js @@ -0,0 +1,26 @@ +let Colors = require('../colors'); +let ColorManipulator = require('../../utils/color-manipulator'); +let Spacing = require('../spacing'); + +/* + * Light Theme is the default theme used in material-ui. It is guaranteed to + * have all theme variables needed for every component. Variables not defined + * in a custom theme will default to these values. + */ + +module.exports = { + spacing: Spacing, + fontFamily: 'Roboto, sans-serif', + palette: { + primary1Color: Colors.cyan500, + primary2Color: Colors.cyan700, + primary3Color: Colors.cyan100, + accent1Color: Colors.pinkA200, + accent2Color: Colors.pinkA400, + accent3Color: Colors.pinkA100, + textColor: Colors.darkBlack, + canvasColor: Colors.white, + borderColor: Colors.grey300, + disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3), + }, +}; diff --git a/src/styles/theme-manager.js b/src/styles/theme-manager.js index e7d085aeb69fb6..6aa2f90285bd3b 100644 --- a/src/styles/theme-manager.js +++ b/src/styles/theme-manager.js @@ -1,67 +1,233 @@ -let Extend = require('../utils/extend'); +const Colors = require('./colors'); +const ColorManipulator = require('../utils/color-manipulator'); +const Extend = require('../utils/extend'); +const update = require('react').addons.update; + +module.exports = { + + //get the MUI theme corresponding to a raw theme + getMuiTheme: function (rawTheme) { + let returnObj = { + appBar: { + color: rawTheme.palette.primary1Color, + textColor: Colors.darkWhite, + height: rawTheme.spacing.desktopKeylineIncrement, + }, + avatar: { + borderColor: 'rgba(0, 0, 0, 0.08)', + }, + button: { + height: 36, + minWidth: 88, + iconButtonSize: rawTheme.spacing.iconSize * 2, + }, + checkbox: { + boxColor: rawTheme.palette.textColor, + checkedColor: rawTheme.palette.primary1Color, + requiredColor: rawTheme.palette.primary1Color, + disabledColor: rawTheme.palette.disabledColor, + labelColor: rawTheme.palette.textColor, + labelDisabledColor: rawTheme.palette.disabledColor, + }, + datePicker: { + color: rawTheme.palette.primary1Color, + textColor: Colors.white, + calendarTextColor: rawTheme.palette.textColor, + selectColor: rawTheme.palette.primary2Color, + selectTextColor: Colors.white, + }, + dropDownMenu: { + accentColor: rawTheme.palette.borderColor, + }, + flatButton: { + color: rawTheme.palette.canvasColor, + textColor: rawTheme.palette.textColor, + primaryTextColor: rawTheme.palette.accent1Color, + secondaryTextColor: rawTheme.palette.primary1Color, + }, + floatingActionButton: { + buttonSize: 56, + miniSize: 40, + color: rawTheme.palette.accent1Color, + iconColor: Colors.white, + secondaryColor: rawTheme.palette.primary1Color, + secondaryIconColor: Colors.white, + disabledTextColor: rawTheme.palette.disabledColor, + }, + inkBar: { + backgroundColor: rawTheme.palette.accent1Color, + }, + leftNav: { + width: rawTheme.spacing.desktopKeylineIncrement * 4, + color: Colors.white, + }, + listItem: { + nestedLevelDepth: 18, + }, + menu: { + backgroundColor: Colors.white, + containerBackgroundColor: Colors.white, + }, + menuItem: { + dataHeight: 32, + height: 48, + hoverColor: 'rgba(0, 0, 0, .035)', + padding: rawTheme.spacing.desktopGutter, + selectedTextColor: rawTheme.palette.accent1Color, + }, + menuSubheader: { + padding: rawTheme.spacing.desktopGutter, + borderColor: rawTheme.palette.borderColor, + textColor: rawTheme.palette.primary1Color, + }, + paper: { + backgroundColor: Colors.white, + }, + radioButton: { + borderColor: rawTheme.palette.textColor, + backgroundColor: Colors.white, + checkedColor: rawTheme.palette.primary1Color, + requiredColor: rawTheme.palette.primary1Color, + disabledColor: rawTheme.palette.disabledColor, + size: 24, + labelColor: rawTheme.palette.textColor, + labelDisabledColor: rawTheme.palette.disabledColor, + }, + raisedButton: { + color: Colors.white, + textColor: rawTheme.palette.textColor, + primaryColor: rawTheme.palette.accent1Color, + primaryTextColor: Colors.white, + secondaryColor: rawTheme.palette.primary1Color, + secondaryTextColor: Colors.white, + }, + refreshIndicator: { + strokeColor: Colors.grey300, + loadingStrokeColor: rawTheme.palette.primary1Color, + }, + slider: { + trackSize: 2, + trackColor: Colors.minBlack, + trackColorSelected: Colors.grey500, + handleSize: 12, + handleSizeDisabled: 8, + handleSizeActive: 18, + handleColorZero: Colors.grey400, + handleFillColor: Colors.white, + selectionColor: rawTheme.palette.primary3Color, + rippleColor: rawTheme.palette.primary1Color, + }, + snackbar: { + textColor: Colors.white, + backgroundColor: '#323232', + actionColor: rawTheme.palette.accent1Color, + }, + table: { + backgroundColor: Colors.white, + }, + tableHeader: { + borderColor: rawTheme.palette.borderColor, + }, + tableHeaderColumn: { + textColor: Colors.lightBlack, + height: 56, + spacing: 24, + }, + tableFooter: { + borderColor: rawTheme.palette.borderColor, + textColor: Colors.lightBlack, + }, + tableRow: { + hoverColor: Colors.grey200, + stripeColor: ColorManipulator.lighten(rawTheme.palette.primary1Color, 0.55), + selectedColor: Colors.grey300, + textColor: Colors.darkBlack, + borderColor: rawTheme.palette.borderColor, + }, + tableRowColumn: { + height: 48, + spacing: 24, + }, + timePicker: { + color: Colors.white, + textColor: Colors.grey600, + accentColor: rawTheme.palette.primary1Color, + clockColor: Colors.black, + selectColor: rawTheme.palette.primary2Color, + selectTextColor: Colors.white, + }, + toggle: { + thumbOnColor: rawTheme.palette.primary1Color, + thumbOffColor: Colors.grey50, + thumbDisabledColor: Colors.grey400, + thumbRequiredColor: rawTheme.palette.primary1Color, + trackOnColor: ColorManipulator.fade(rawTheme.palette.primary1Color, 0.5), + trackOffColor: Colors.minBlack, + trackDisabledColor: Colors.faintBlack, + labelColor: rawTheme.palette.textColor, + labelDisabledColor: rawTheme.palette.disabledColor, + }, + toolbar: { + backgroundColor: ColorManipulator.darken('#eeeeee', 0.05), + height: 56, + titleFontSize: 20, + iconColor: 'rgba(0, 0, 0, .40)', + separatorColor: 'rgba(0, 0, 0, .175)', + menuHoverColor: 'rgba(0, 0, 0, .10)', + }, + tabs: { + backgroundColor: rawTheme.palette.primary1Color, + }, + textField: { + textColor: rawTheme.palette.textColor, + hintColor: rawTheme.palette.disabledColor, + floatingLabelColor: rawTheme.palette.textColor, + disabledTextColor: rawTheme.palette.disabledColor, + errorColor: Colors.red500, + focusColor: rawTheme.palette.primary1Color, + backgroundColor: 'transparent', + borderColor: rawTheme.palette.borderColor, + }, + }; + + //add properties to objects inside 'returnObj' that depend on existing properties + returnObj.flatButton.disabledTextColor = ColorManipulator.fade(returnObj.flatButton.textColor, 0.3); + returnObj.raisedButton.disabledColor = ColorManipulator.darken(returnObj.raisedButton.color, 0.1); + returnObj.raisedButton.disabledTextColor = ColorManipulator.fade(returnObj.raisedButton.textColor, 0.3); + returnObj.toggle.trackRequiredColor = ColorManipulator.fade(returnObj.toggle.thumbRequiredColor, 0.5); + + //finally, append the raw theme object to 'returnObj' + returnObj.rawTheme = rawTheme; + + return returnObj; + }, + + //functions to modify properties of raw theme, namely spacing, palette + //and font family. These functions use the React update immutability helper + //to create a new object for the raw theme, and return a new MUI theme object + + //function to modify the spacing of the raw theme. This function recomputes + //the MUI theme and returns it based on the new theme. + modifyRawThemeSpacing: function (muiTheme, newSpacing) { + let newRawTheme = update (muiTheme.rawTheme, {spacing: {$set: newSpacing}}); + return this.getMuiTheme(newRawTheme); + }, + + + //function to modify the palette of the raw theme. This function recomputes + //the MUI theme and returns it based on the new raw theme. + //keys inside 'newPalette' override values for existing keys in palette + modifyRawThemePalette: function (muiTheme, newPaletteKeys) { + let newPalette = Extend(muiTheme.rawTheme.palette, newPaletteKeys); + let newRawTheme = update (muiTheme.rawTheme, {palette: {$set: newPalette}}); + return this.getMuiTheme(newRawTheme); + }, + + //function to modify the font family of the raw theme. This function recomputes + //the MUI theme and returns it based on the new raw theme. + modifyRawThemeFontFamily: function (muiTheme, newFontFamily) { + let newRawTheme = update (muiTheme.rawTheme, {fontFamily: {$set: newFontFamily}}); + return this.getMuiTheme(newRawTheme); + }, - -const Types = { - LIGHT: require('./themes/light-theme'), - DARK: require('./themes/dark-theme'), -}; - - -let ThemeManager = () => { - return { - - //In most cases, theme variables remain static thoughout the life of an - //app. If you plan on mutating theme variables after the theme has been - //intialized, set static to false. This will allow components to update - //when theme variables change. For more information see issue #1176 - static: true, - - types: Types, - template: Types.LIGHT, - - spacing: Types.LIGHT.spacing, - contentFontFamily: 'Roboto, sans-serif', - - palette: Types.LIGHT.getPalette(), - component: Types.LIGHT.getComponentThemes(Types.LIGHT.getPalette()), - - getCurrentTheme() { - return this; - }, - - // Component gets updated to reflect palette changes. - setTheme(newTheme) { - this.setSpacing(newTheme.spacing); - this.setContentFontFamily(newTheme.contentFontFamily); - this.setPalette(newTheme.getPalette()); - this.setComponentThemes(newTheme.getComponentThemes(newTheme.getPalette())); - }, - - setSpacing(newSpacing) { - this.spacing = Extend(this.spacing, newSpacing); - this.component = Extend(this.component, this.template.getComponentThemes(this.palette, this.spacing)); - }, - - setContentFontFamily(newContentFontFamily) { - if (typeof newContentFontFamily !== "undefined" && newContentFontFamily !== null) { - this.contentFontFamily = newContentFontFamily; - this.component = Extend(this.component, this.template.getComponentThemes(this.palette, this.spacing)); - } - }, - - setPalette(newPalette) { - this.palette = Extend(this.palette, newPalette); - this.component = Extend(this.component, this.template.getComponentThemes(this.palette)); - }, - - setComponentThemes(overrides) { - this.component = Extend(this.component, overrides); - }, - - setIsRtl(isRtl) { - this.isRtl = !! isRtl; - }, - }; }; - -module.exports = ThemeManager; diff --git a/src/svg-icon.jsx b/src/svg-icon.jsx index 096b41369fb39b..d46350aecf9b44 100644 --- a/src/svg-icon.jsx +++ b/src/svg-icon.jsx @@ -1,7 +1,8 @@ const React = require('react'); const StylePropable = require('./mixins/style-propable'); const Transitions = require('./styles/transitions'); - +const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme'); +const ThemeManager = require('./styles/theme-manager'); const SvgIcon = React.createClass({ @@ -19,9 +20,21 @@ const SvgIcon = React.createClass({ viewBox: React.PropTypes.string, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + getInitialState() { return { hovered: false, + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, @@ -33,6 +46,13 @@ const SvgIcon = 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}); + }, + render() { const { children, @@ -47,7 +67,7 @@ const SvgIcon = React.createClass({ const offColor = color ? color : style && style.fill ? style.fill : - this.context.muiTheme.palette.textColor; + this.state.muiTheme.rawTheme.palette.textColor; const onColor = hoverColor ? hoverColor : offColor; const mergedStyles = this.mergeAndPrefix({ diff --git a/src/table/table-body.jsx b/src/table/table-body.jsx index 574162570a52a8..d8234e3a0b2fc1 100644 --- a/src/table/table-body.jsx +++ b/src/table/table-body.jsx @@ -1,11 +1,11 @@ -let React = require('react'); -let Checkbox = require('../checkbox'); -let TableRowColumn = require('./table-row-column'); -let ClickAwayable = require('../mixins/click-awayable'); -let StylePropable = require('../mixins/style-propable'); +const React = require('react'); +const Checkbox = require('../checkbox'); +const TableRowColumn = require('./table-row-column'); +const ClickAwayable = require('../mixins/click-awayable'); +const StylePropable = require('../mixins/style-propable'); -let TableBody = React.createClass({ +const TableBody = React.createClass({ mixins: [ClickAwayable, StylePropable], diff --git a/src/table/table-footer.jsx b/src/table/table-footer.jsx index c4a1fad89aa61d..e846c74fdf9db5 100644 --- a/src/table/table-footer.jsx +++ b/src/table/table-footer.jsx @@ -1,9 +1,10 @@ -let React = require('react'); -let TableRowColumn = require('./table-row-column'); -let StylePropable = require('../mixins/style-propable'); +const React = require('react'); +const TableRowColumn = require('./table-row-column'); +const StylePropable = require('../mixins/style-propable'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); - -let TableFooter = React.createClass({ +const TableFooter = React.createClass({ mixins: [StylePropable], @@ -16,6 +17,30 @@ let TableFooter = React.createClass({ style: React.PropTypes.object, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState () { + return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + }, + + //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}); + }, + getDefaultProps() { return { adjustForCheckbox: true, @@ -23,7 +48,7 @@ let TableFooter = React.createClass({ }, getTheme() { - return this.context.muiTheme.component.tableFooter; + return this.state.muiTheme.tableFooter; }, getStyles() { diff --git a/src/table/table-header-column.jsx b/src/table/table-header-column.jsx index cbd91340f4aecc..df661df8ea4680 100644 --- a/src/table/table-header-column.jsx +++ b/src/table/table-header-column.jsx @@ -1,9 +1,10 @@ -let React = require('react'); -let StylePropable = require('../mixins/style-propable'); -let Tooltip = require('../tooltip'); +const React = require('react'); +const StylePropable = require('../mixins/style-propable'); +const Tooltip = require('../tooltip'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); - -let TableHeaderColumn = React.createClass({ +const TableHeaderColumn = React.createClass({ mixins: [StylePropable], @@ -19,14 +20,33 @@ let TableHeaderColumn = React.createClass({ tooltipStyle: React.PropTypes.object, }, - getInitialState() { + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState () { return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), hovered: false, }; }, + //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.context.muiTheme.component.tableHeaderColumn; + return this.state.muiTheme.tableHeaderColumn; }, getStyles() { diff --git a/src/table/table-header.jsx b/src/table/table-header.jsx index 0f9674d09dbd36..3e251e8aa62563 100644 --- a/src/table/table-header.jsx +++ b/src/table/table-header.jsx @@ -1,10 +1,11 @@ -let React = require('react'); -let Checkbox = require('../checkbox'); -let StylePropable = require('../mixins/style-propable'); -let TableHeaderColumn = require('./table-header-column'); +const React = require('react'); +const Checkbox = require('../checkbox'); +const StylePropable = require('../mixins/style-propable'); +const TableHeaderColumn = require('./table-header-column'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); - -let TableHeader = React.createClass({ +const TableHeader = React.createClass({ mixins: [StylePropable], @@ -21,6 +22,30 @@ let TableHeader = React.createClass({ style: React.PropTypes.object, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState () { + return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + }, + + //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}); + }, + getDefaultProps() { return { adjustForCheckbox: true, @@ -31,7 +56,7 @@ let TableHeader = React.createClass({ }, getTheme() { - return this.context.muiTheme.component.tableHeader; + return this.state.muiTheme.tableHeader; }, getStyles() { diff --git a/src/table/table-row-column.jsx b/src/table/table-row-column.jsx index 810fadba3bbd6e..0bae6da827e7e7 100644 --- a/src/table/table-row-column.jsx +++ b/src/table/table-row-column.jsx @@ -1,8 +1,9 @@ -let React = require('react'); -let StylePropable = require('../mixins/style-propable'); +const React = require('react'); +const StylePropable = require('../mixins/style-propable'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); - -let TableRowColumn = React.createClass({ +const TableRowColumn = React.createClass({ mixins: [StylePropable], @@ -25,14 +26,33 @@ let TableRowColumn = React.createClass({ }; }, - getInitialState() { + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState () { return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), hovered: false, }; }, + //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.context.muiTheme.component.tableRowColumn; + return this.state.muiTheme.tableRowColumn; }, getStyles() { diff --git a/src/table/table-row.jsx b/src/table/table-row.jsx index 6d1120e2c7c209..eb7049b39e3d69 100644 --- a/src/table/table-row.jsx +++ b/src/table/table-row.jsx @@ -1,8 +1,9 @@ -let React = require('react'); -let StylePropable = require('../mixins/style-propable'); +const React = require('react'); +const StylePropable = require('../mixins/style-propable'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); - -let TableRow = React.createClass({ +const TableRow = React.createClass({ mixins: [StylePropable], @@ -37,14 +38,33 @@ let TableRow = React.createClass({ }; }, - getInitialState() { + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState () { return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), hovered: false, }; }, + //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.context.muiTheme.component.tableRow; + return this.state.muiTheme.tableRow; }, getStyles() { diff --git a/src/table/table.jsx b/src/table/table.jsx index 5e2d00af9bffc1..50c20b3fbec51e 100644 --- a/src/table/table.jsx +++ b/src/table/table.jsx @@ -1,8 +1,9 @@ -let React = require('react'); -let StylePropable = require('../mixins/style-propable'); +const React = require('react'); +const StylePropable = require('../mixins/style-propable'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); - -let Table = React.createClass({ +const Table = React.createClass({ mixins: [StylePropable], @@ -37,21 +38,40 @@ let Table = React.createClass({ }; }, - getInitialState() { + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState () { return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), allRowsSelected: this.props.allRowsSelected, }; }, + //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.context.muiTheme.component.table; + return this.state.muiTheme.table; }, getStyles() { let styles = { root: { backgroundColor: this.getTheme().backgroundColor, - padding: '0 ' + this.context.muiTheme.spacing.desktopGutter + 'px', + padding: '0 ' + this.state.muiTheme.rawTheme.spacing.desktopGutter + 'px', width: '100%', borderCollapse: 'collapse', borderSpacing: 0, diff --git a/src/tabs/tab.jsx b/src/tabs/tab.jsx index 807667592c7deb..2b63110c7e1030 100644 --- a/src/tabs/tab.jsx +++ b/src/tabs/tab.jsx @@ -1,8 +1,9 @@ -let React = require('react'); -let StylePropable = require('../mixins/style-propable'); +const React = require('react'); +const StylePropable = require('../mixins/style-propable'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); - -let Tab = React.createClass({ +const Tab = React.createClass({ mixins: [StylePropable], @@ -19,6 +20,17 @@ let Tab = React.createClass({ value: React.PropTypes.string, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + getDefaultProps(){ return { onActive: () => {}, @@ -26,6 +38,19 @@ let Tab = React.createClass({ }; }, + getInitialState () { + return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + }, + + //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}); + }, + render() { let { label, @@ -48,7 +73,7 @@ let Tab = React.createClass({ fontSize: 14, fontWeight: 500, whiteSpace: 'initial', - fontFamily: this.context.muiTheme.contentFontFamily, + fontFamily: this.state.muiTheme.rawTheme.fontFamily, boxSizing: 'border-box', width: width, }, style); diff --git a/src/tabs/tabTemplate.jsx b/src/tabs/tabTemplate.jsx index d8a43f5b8bed39..519c18db1c1bd0 100644 --- a/src/tabs/tabTemplate.jsx +++ b/src/tabs/tabTemplate.jsx @@ -1,7 +1,7 @@ -let React = require('react'); +const React = require('react'); -let TabTemplate = React.createClass({ +const TabTemplate = React.createClass({ render() { let styles = { diff --git a/src/tabs/tabs.jsx b/src/tabs/tabs.jsx index 290d7507ee8a5e..93b8032b32da7b 100644 --- a/src/tabs/tabs.jsx +++ b/src/tabs/tabs.jsx @@ -1,11 +1,12 @@ -let React = require('react/addons'); -let TabTemplate = require('./tabTemplate'); -let InkBar = require('../ink-bar'); -let StylePropable = require('../mixins/style-propable'); -let Controllable = require('../mixins/controllable'); +const React = require('react/addons'); +const TabTemplate = require('./tabTemplate'); +const InkBar = require('../ink-bar'); +const StylePropable = require('../mixins/style-propable'); +const Controllable = require('../mixins/controllable'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); - -let Tabs = React.createClass({ +const Tabs = React.createClass({ mixins: [StylePropable, Controllable], @@ -20,6 +21,17 @@ let Tabs = React.createClass({ tabItemContainerStyle: React.PropTypes.object, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + getDefaultProps() { return { initialSelectedIndex : 0, @@ -36,6 +48,7 @@ let Tabs = React.createClass({ initialIndex < this.getTabCount() ? initialIndex : 0, + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, @@ -51,12 +64,15 @@ let Tabs = React.createClass({ return React.Children.count(this.props.children); }, - componentWillReceiveProps(newProps) { + componentWillReceiveProps(newProps, nextContext) { let valueLink = this.getValueLink(newProps); + let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; if (valueLink.value){ this.setState({selectedIndex: this._getSelectedIndex(newProps)}); } + + this.setState({muiTheme: newMuiTheme}); }, render() { @@ -71,7 +87,7 @@ let Tabs = React.createClass({ ...other, } = this.props; - let themeVariables = this.context.muiTheme.component.tabs; + let themeVariables = this.state.muiTheme.tabs; let styles = { tabItemContainer: { margin: 0, diff --git a/src/text-field.jsx b/src/text-field.jsx index 65c9542bb5d1c5..295c78522b4004 100644 --- a/src/text-field.jsx +++ b/src/text-field.jsx @@ -1,9 +1,11 @@ -let React = require('react'); -let ColorManipulator = require('./utils/color-manipulator'); -let StylePropable = require('./mixins/style-propable'); -let Transitions = require('./styles/transitions'); -let UniqueId = require('./utils/unique-id'); -let EnhancedTextarea = require('./enhanced-textarea'); +const React = require('react'); +const ColorManipulator = require('./utils/color-manipulator'); +const StylePropable = require('./mixins/style-propable'); +const Transitions = require('./styles/transitions'); +const UniqueId = require('./utils/unique-id'); +const EnhancedTextarea = require('./enhanced-textarea'); +const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme'); +const ThemeManager = require('./styles/theme-manager'); /** * Check if a value is valid to be displayed inside an input. @@ -15,7 +17,7 @@ function isValid(value) { return value || value === 0; } -let TextField = React.createClass({ +const TextField = React.createClass({ mixins: [StylePropable], @@ -48,6 +50,17 @@ let TextField = React.createClass({ underlineDisabledStyle: React.PropTypes.object, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + getDefaultProps() { return { fullWidth: false, @@ -57,7 +70,7 @@ let TextField = React.createClass({ }, getContextProps() { - const theme = this.context.muiTheme; + const theme = this.state.muiTheme; return { isRtl: theme.isRtl, @@ -71,19 +84,21 @@ let TextField = React.createClass({ errorText: this.props.errorText, hasValue: isValid(props.value) || isValid(props.defaultValue) || (props.valueLink && isValid(props.valueLink.value)), + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, getTheme() { - return this.context.muiTheme.component.textField; + return this.state.muiTheme.textField; }, componentDidMount() { this._uniqueId = UniqueId.generate(); }, - componentWillReceiveProps(nextProps) { + componentWillReceiveProps(nextProps, nextContext) { let newState = {}; + newState.muiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; newState.errorText = nextProps.errorText; if (nextProps.children && nextProps.children.props) { @@ -120,7 +135,7 @@ let TextField = React.createClass({ height: (props.rows - 1) * 24 + (props.floatingLabelText ? 72 : 48), display: 'inline-block', position: 'relative', - fontFamily: this.context.muiTheme.contentFontFamily, + fontFamily: this.state.muiTheme.rawTheme.fontFamily, transition: Transitions.easeOut('200ms', 'height'), }, error: { diff --git a/src/time-picker/clock-button.jsx b/src/time-picker/clock-button.jsx index 06cd0df26927f1..90cd552d52a1a5 100644 --- a/src/time-picker/clock-button.jsx +++ b/src/time-picker/clock-button.jsx @@ -1,10 +1,11 @@ -let React = require('react'); -let StylePropable = require('../mixins/style-propable'); -let EnhancedButton = require('../enhanced-button'); -let Transitions = require('../styles/transitions'); +const React = require('react'); +const StylePropable = require('../mixins/style-propable'); +const EnhancedButton = require('../enhanced-button'); +const Transitions = require('../styles/transitions'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); - -let ClockButton = React.createClass({ +const ClockButton = React.createClass({ mixins: [StylePropable], @@ -16,6 +17,30 @@ let ClockButton = React.createClass({ position: React.PropTypes.oneOf(['left', 'right']), }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState () { + return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + }, + + //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}); + }, + getDefaultProps() { return { position: "left", @@ -30,7 +55,7 @@ let ClockButton = React.createClass({ }, getTheme() { - return this.context.muiTheme.component.timePicker; + return this.state.muiTheme.timePicker; }, render() { diff --git a/src/time-picker/clock-hours.jsx b/src/time-picker/clock-hours.jsx index 284573962b1930..57030b95dda8ac 100644 --- a/src/time-picker/clock-hours.jsx +++ b/src/time-picker/clock-hours.jsx @@ -1,7 +1,7 @@ -let React = require('react'); -let StylePropable = require('../mixins/style-propable'); -let ClockNumber = require("./clock-number"); -let ClockPointer = require("./clock-pointer"); +const React = require('react'); +const StylePropable = require('../mixins/style-propable'); +const ClockNumber = require("./clock-number"); +const ClockPointer = require("./clock-pointer"); function rad2deg(rad) { @@ -21,7 +21,7 @@ function getTouchEventOffsetValues(e) { } -let ClockHours = React.createClass({ +const ClockHours = React.createClass({ mixins: [StylePropable], diff --git a/src/time-picker/clock-minutes.jsx b/src/time-picker/clock-minutes.jsx index f66a97a46f2725..edb0c756f83452 100644 --- a/src/time-picker/clock-minutes.jsx +++ b/src/time-picker/clock-minutes.jsx @@ -1,8 +1,9 @@ -let React = require('react'); -let StylePropable = require('../mixins/style-propable'); -let ClockNumber = require("./clock-number"); -let ClockPointer = require("./clock-pointer"); - +const React = require('react'); +const StylePropable = require('../mixins/style-propable'); +const ClockNumber = require("./clock-number"); +const ClockPointer = require("./clock-pointer"); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); function rad2deg(rad) { return rad * 57.29577951308232; @@ -21,7 +22,7 @@ function getTouchEventOffsetValues(e) { } -let ClockMinutes = React.createClass({ +const ClockMinutes = React.createClass({ mixins: [StylePropable], @@ -34,6 +35,30 @@ let ClockMinutes = React.createClass({ onChange: React.PropTypes.func, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState () { + return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + }, + + //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}); + }, + center: {x: 0, y: 0}, basePoint: {x: 0, y: 0}, diff --git a/src/time-picker/clock-number.jsx b/src/time-picker/clock-number.jsx index 0b5758946eb22c..cfafd52d5cb7db 100644 --- a/src/time-picker/clock-number.jsx +++ b/src/time-picker/clock-number.jsx @@ -1,8 +1,9 @@ -let React = require('react'); -let StylePropable = require('../mixins/style-propable'); +const React = require('react'); +const StylePropable = require('../mixins/style-propable'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); - -let ClockNumber = React.createClass({ +const ClockNumber = React.createClass({ mixins: [StylePropable], @@ -17,6 +18,30 @@ let ClockNumber = React.createClass({ isSelected: React.PropTypes.bool, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState () { + return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + }, + + //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}); + }, + getDefaultProps() { return { value: 0, @@ -26,7 +51,7 @@ let ClockNumber = React.createClass({ }, getTheme() { - return this.context.muiTheme.component.timePicker; + return this.state.muiTheme.timePicker; }, render() { diff --git a/src/time-picker/clock-pointer.jsx b/src/time-picker/clock-pointer.jsx index 1743437320c65c..fb29626a7ad35c 100644 --- a/src/time-picker/clock-pointer.jsx +++ b/src/time-picker/clock-pointer.jsx @@ -1,8 +1,9 @@ -let React = require('react'); -let StylePropable = require('../mixins/style-propable'); +const React = require('react'); +const StylePropable = require('../mixins/style-propable'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); - -let ClockPointer = React.createClass({ +const ClockPointer = React.createClass({ mixins: [StylePropable], @@ -15,9 +16,21 @@ let ClockPointer = React.createClass({ type: React.PropTypes.oneOf(['hour', 'minute']), }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + getInitialState() { - return { - inner: this.isInner(this.props.value), + return { + inner: this.isInner(this.props.value), + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, @@ -29,9 +42,11 @@ let ClockPointer = React.createClass({ }; }, - componentWillReceiveProps(nextProps) { + componentWillReceiveProps(nextProps, nextContext) { + let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; this.setState({ inner: this.isInner(nextProps.value), + muiTheme: newMuiTheme, }); }, @@ -57,7 +72,7 @@ let ClockPointer = React.createClass({ }, getTheme() { - return this.context.muiTheme.component.timePicker; + return this.state.muiTheme.timePicker; }, render() { diff --git a/src/time-picker/clock.jsx b/src/time-picker/clock.jsx index 87863dbd3fe600..458b5e3802dafc 100644 --- a/src/time-picker/clock.jsx +++ b/src/time-picker/clock.jsx @@ -1,12 +1,12 @@ -let React = require('react'); -let StylePropable = require('../mixins/style-propable'); -let TimeDisplay = require("./time-display"); -let ClockButton = require("./clock-button"); -let ClockHours = require("./clock-hours"); -let ClockMinutes = require("./clock-minutes"); +const React = require('react'); +const StylePropable = require('../mixins/style-propable'); +const TimeDisplay = require("./time-display"); +const ClockButton = require("./clock-button"); +const ClockHours = require("./clock-hours"); +const ClockMinutes = require("./clock-minutes"); -let Clock = React.createClass({ +const Clock = React.createClass({ mixins: [StylePropable], diff --git a/src/time-picker/time-display.jsx b/src/time-picker/time-display.jsx index b020ed7cc99921..26749f5afae656 100644 --- a/src/time-picker/time-display.jsx +++ b/src/time-picker/time-display.jsx @@ -1,8 +1,9 @@ -let React = require('react'); -let StylePropable = require('../mixins/style-propable'); +const React = require('react'); +const StylePropable = require('../mixins/style-propable'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); - -let TimeDisplay = React.createClass({ +const TimeDisplay = React.createClass({ mixins: [StylePropable], @@ -17,9 +18,21 @@ let TimeDisplay = React.createClass({ affix: React.PropTypes.oneOf(['', 'pm', 'am']), }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + getInitialState() { return { transitionDirection: 'up', + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, @@ -30,8 +43,10 @@ let TimeDisplay = React.createClass({ }; }, - componentWillReceiveProps(nextProps) { + componentWillReceiveProps(nextProps, nextContext) { let direction; + let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; + this.setState({muiTheme: newMuiTheme}); if (nextProps.selectedTime !== this.props.selectedTime) { direction = nextProps.selectedTime > this.props.selectedTime ? 'up' : 'down'; @@ -59,7 +74,7 @@ let TimeDisplay = React.createClass({ }, getTheme() { - return this.context.muiTheme.component.timePicker; + return this.state.muiTheme.timePicker; }, render() { diff --git a/src/time-picker/time-picker-dialog.jsx b/src/time-picker/time-picker-dialog.jsx index b65d47949fab93..3a3bd04ed65be9 100644 --- a/src/time-picker/time-picker-dialog.jsx +++ b/src/time-picker/time-picker-dialog.jsx @@ -1,13 +1,14 @@ -let React = require('react'); -let StylePropable = require('../mixins/style-propable'); -let WindowListenable = require('../mixins/window-listenable'); -let KeyCode = require('../utils/key-code'); -let Clock = require('./clock'); -let Dialog = require('../dialog'); -let FlatButton = require('../flat-button'); - - -let TimePickerDialog = React.createClass({ +const React = require('react'); +const StylePropable = require('../mixins/style-propable'); +const WindowListenable = require('../mixins/window-listenable'); +const KeyCode = require('../utils/key-code'); +const Clock = require('./clock'); +const Dialog = require('../dialog'); +const FlatButton = require('../flat-button'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); + +const TimePickerDialog = React.createClass({ mixins: [StylePropable, WindowListenable], @@ -22,13 +23,37 @@ let TimePickerDialog = React.createClass({ onDismiss: React.PropTypes.func, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState () { + return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + }, + + //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}); + }, + windowListeners: { keyup: '_handleWindowKeyUp', }, getTheme() { - return this.context.muiTheme.component.timePicker; + return this.state.muiTheme.timePicker; }, render() { diff --git a/src/time-picker/time-picker.jsx b/src/time-picker/time-picker.jsx index d44de81872568e..9b9e8b53e2175c 100644 --- a/src/time-picker/time-picker.jsx +++ b/src/time-picker/time-picker.jsx @@ -1,8 +1,8 @@ -let React = require('react'); -let StylePropable = require('../mixins/style-propable'); -let WindowListenable = require('../mixins/window-listenable'); -let TimePickerDialog = require('./time-picker-dialog'); -let TextField = require('../text-field'); +const React = require('react'); +const StylePropable = require('../mixins/style-propable'); +const WindowListenable = require('../mixins/window-listenable'); +const TimePickerDialog = require('./time-picker-dialog'); +const TextField = require('../text-field'); let emptyTime = new Date(); @@ -10,7 +10,7 @@ emptyTime.setHours(0); emptyTime.setMinutes(0); -let TimePicker = React.createClass({ +const TimePicker = React.createClass({ mixins: [StylePropable, WindowListenable], diff --git a/src/toggle.jsx b/src/toggle.jsx index dc6df24f94195b..21fd6046d41203 100644 --- a/src/toggle.jsx +++ b/src/toggle.jsx @@ -1,11 +1,12 @@ -let React = require('react'); -let StylePropable = require('./mixins/style-propable'); -let Transitions = require('./styles/transitions'); -let Paper = require('./paper'); -let EnhancedSwitch = require('./enhanced-switch'); +const React = require('react'); +const StylePropable = require('./mixins/style-propable'); +const Transitions = require('./styles/transitions'); +const Paper = require('./paper'); +const EnhancedSwitch = require('./enhanced-switch'); +const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme'); +const ThemeManager = require('./styles/theme-manager'); - -let Toggle = React.createClass({ +const Toggle = React.createClass({ mixins: [StylePropable], @@ -21,6 +22,17 @@ let Toggle = React.createClass({ defaultToggled: React.PropTypes.bool, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + getInitialState() { return { switched: @@ -28,11 +40,19 @@ let Toggle = React.createClass({ this.props.defaultToggled || (this.props.valueLink && this.props.valueLink.value) || false, + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, + //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.context.muiTheme.component.toggle; + return this.state.muiTheme.toggle; }, getStyles() { @@ -126,7 +146,7 @@ let Toggle = React.createClass({ }, this.props.rippleStyle); let rippleColor = this.state.switched ? - this.getTheme().thumbOnColor : this.context.muiTheme.component.textColor; + this.getTheme().thumbOnColor : this.state.muiTheme.textColor; let iconStyle = this.mergeAndPrefix( styles.icon, diff --git a/src/toolbar/toolbar-group.jsx b/src/toolbar/toolbar-group.jsx index d6320f535b0903..e5760e21776257 100644 --- a/src/toolbar/toolbar-group.jsx +++ b/src/toolbar/toolbar-group.jsx @@ -1,9 +1,10 @@ -let React = require('react'); -let Colors = require('../styles/colors'); -let StylePropable = require('../mixins/style-propable'); +const React = require('react'); +const Colors = require('../styles/colors'); +const StylePropable = require('../mixins/style-propable'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); - -let ToolbarGroup = React.createClass({ +const ToolbarGroup = React.createClass({ mixins: [StylePropable], @@ -16,23 +17,47 @@ let ToolbarGroup = React.createClass({ float: React.PropTypes.string, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + getDefaultProps() { return { float: 'left', }; }, + getInitialState () { + return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + }, + + //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.context.muiTheme.component.toolbar; + return this.state.muiTheme.toolbar; }, getSpacing() { - return this.context.muiTheme.spacing.desktopGutter; + return this.state.muiTheme.rawTheme.spacing.desktopGutter; }, getStyles() { let marginHorizontal = this.getSpacing(); - let marginVertical = (this.getTheme().height - this.context.muiTheme.component.button.height) / 2; + let marginVertical = (this.getTheme().height - this.state.muiTheme.button.height) / 2; let styles = { root: { position: 'relative', diff --git a/src/toolbar/toolbar-separator.jsx b/src/toolbar/toolbar-separator.jsx index da0d24f5fb128e..d424b6b08e09a8 100644 --- a/src/toolbar/toolbar-separator.jsx +++ b/src/toolbar/toolbar-separator.jsx @@ -1,8 +1,9 @@ -let React = require('react'); -let StylePropable = require('../mixins/style-propable'); +const React = require('react'); +const StylePropable = require('../mixins/style-propable'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); - -let ToolbarSeparator = React.createClass({ +const ToolbarSeparator = React.createClass({ mixins: [StylePropable], @@ -10,12 +11,36 @@ let ToolbarSeparator = React.createClass({ muiTheme: React.PropTypes.object, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState () { + return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + }, + + //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.context.muiTheme.component.toolbar; + return this.state.muiTheme.toolbar; }, getSpacing() { - return this.context.muiTheme.spacing; + return this.state.muiTheme.rawTheme.spacing; }, render() { diff --git a/src/toolbar/toolbar-title.jsx b/src/toolbar/toolbar-title.jsx index a4b1ae70b684c3..b94515fa722196 100644 --- a/src/toolbar/toolbar-title.jsx +++ b/src/toolbar/toolbar-title.jsx @@ -1,8 +1,9 @@ -let React = require('react'); -let StylePropable = require('../mixins/style-propable'); +const React = require('react'); +const StylePropable = require('../mixins/style-propable'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); - -let ToolbarTitle = React.createClass({ +const ToolbarTitle = React.createClass({ mixins: [StylePropable], @@ -14,8 +15,32 @@ let ToolbarTitle = React.createClass({ text: React.PropTypes.string, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState () { + return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + }, + + //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.context.muiTheme.component.toolbar; + return this.state.muiTheme.toolbar; }, render() { @@ -26,7 +51,7 @@ let ToolbarTitle = React.createClass({ } = this.props; let styles = this.mergeAndPrefix({ - paddingRight: this.context.muiTheme.spacing.desktopGutterLess, + paddingRight: this.state.muiTheme.rawTheme.spacing.desktopGutterLess, lineHeight: this.getTheme().height + 'px', fontSize: this.getTheme().titleFontSize + 'px', display: 'inline-block', diff --git a/src/toolbar/toolbar.jsx b/src/toolbar/toolbar.jsx index a871cc45174e5c..c960cf29bef346 100644 --- a/src/toolbar/toolbar.jsx +++ b/src/toolbar/toolbar.jsx @@ -1,8 +1,9 @@ -let React = require('react'); -let StylePropable = require('../mixins/style-propable'); +const React = require('react'); +const StylePropable = require('../mixins/style-propable'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const ThemeManager = require('../styles/theme-manager'); - -let Toolbar = React.createClass({ +const Toolbar = React.createClass({ mixins: [StylePropable], @@ -15,8 +16,32 @@ let Toolbar = React.createClass({ style: React.PropTypes.object, }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState () { + return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + }, + + //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.context.muiTheme.component.toolbar; + return this.state.muiTheme.toolbar; }, getStyles() { @@ -26,7 +51,7 @@ let Toolbar = React.createClass({ backgroundColor: this.getTheme().backgroundColor, height: this.getTheme().height, width: '100%', - padding: this.props.noGutter ? 0 : '0px ' + this.context.muiTheme.spacing.desktopGutter + 'px', + padding: this.props.noGutter ? 0 : '0px ' + this.state.muiTheme.rawTheme.spacing.desktopGutter + 'px', }, this.props.style); }, diff --git a/src/tooltip.jsx b/src/tooltip.jsx index 79ac41abfb2a6e..b00540ac55fa1c 100644 --- a/src/tooltip.jsx +++ b/src/tooltip.jsx @@ -1,10 +1,11 @@ -let React = require('react'); -let StylePropable = require('./mixins/style-propable'); -let Transitions = require('./styles/transitions'); -let Colors = require('./styles/colors'); +const React = require('react'); +const StylePropable = require('./mixins/style-propable'); +const Transitions = require('./styles/transitions'); +const Colors = require('./styles/colors'); +const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme'); +const ThemeManager = require('./styles/theme-manager'); - -let Tooltip = React.createClass({ +const Tooltip = React.createClass({ mixins: [StylePropable], @@ -21,15 +22,31 @@ let Tooltip = React.createClass({ horizontalPosition: React.PropTypes.oneOf(['left', 'right', 'center']), }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + componentDidMount() { this._setRippleSize(); this._setTooltipPosition(); }, - componentWillReceiveProps() { + //to update theme inside state whenever a new theme is passed down + //from the parent / owner using context + componentWillReceiveProps (nextProps, nextContext) { this._setTooltipPosition(); + + let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; + this.setState({muiTheme: newMuiTheme}); }, - + componentDidUpdate() { this._setRippleSize(); }, @@ -37,6 +54,7 @@ let Tooltip = React.createClass({ getInitialState() { return { offsetWidth: null, + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, @@ -51,7 +69,7 @@ let Tooltip = React.createClass({ let styles = { root: { position: 'absolute', - fontFamily: this.context.muiTheme.contentFontFamily, + fontFamily: this.state.muiTheme.rawTheme.fontFamily, fontSize: '10px', lineHeight: '22px', padding: '0 8px', diff --git a/src/transition-groups/scale-in-child.jsx b/src/transition-groups/scale-in-child.jsx index 16d81085809608..eea492d6209fb2 100644 --- a/src/transition-groups/scale-in-child.jsx +++ b/src/transition-groups/scale-in-child.jsx @@ -47,7 +47,7 @@ const ScaleInChild = React.createClass({ setTimeout(() => { if (this.isMounted()) callback(); - }.bind(this), 450); + }, 450); }, render() { @@ -89,7 +89,7 @@ const ScaleInChild = React.createClass({ setTimeout(() => { if (this.isMounted()) callback(); - }.bind(this), this.props.enterDelay); + }, this.props.enterDelay); }, }); diff --git a/src/transition-groups/slide-in-child.jsx b/src/transition-groups/slide-in-child.jsx index 84413c4e78fb6f..3dc4033645fb05 100644 --- a/src/transition-groups/slide-in-child.jsx +++ b/src/transition-groups/slide-in-child.jsx @@ -1,10 +1,10 @@ -let React = require('react/addons'); -let StylePropable = require('../mixins/style-propable'); -let AutoPrefix = require('../styles/auto-prefix'); -let Transitions = require('../styles/transitions'); +const React = require('react/addons'); +const StylePropable = require('../mixins/style-propable'); +const AutoPrefix = require('../styles/auto-prefix'); +const Transitions = require('../styles/transitions'); -let SlideInChild = React.createClass({ +const SlideInChild = React.createClass({ mixins: [StylePropable], @@ -33,7 +33,7 @@ let SlideInChild = React.createClass({ setTimeout(() => { if (this.isMounted()) callback(); - }.bind(this), this.props.enterDelay); + }, this.props.enterDelay); }, componentDidEnter() { @@ -55,7 +55,7 @@ let SlideInChild = React.createClass({ setTimeout(() => { if (this.isMounted()) callback(); - }.bind(this), 450); + }, 450); }, render() { diff --git a/src/transition-groups/slide-in.jsx b/src/transition-groups/slide-in.jsx index a200f31b12ce07..999db3b1a6e53c 100644 --- a/src/transition-groups/slide-in.jsx +++ b/src/transition-groups/slide-in.jsx @@ -1,10 +1,10 @@ -let React = require('react/addons'); -let ReactTransitionGroup = React.addons.TransitionGroup; -let StylePropable = require('../mixins/style-propable'); -let SlideInChild = require('./slide-in-child'); +const React = require('react/addons'); +const ReactTransitionGroup = React.addons.TransitionGroup; +const StylePropable = require('../mixins/style-propable'); +const SlideInChild = require('./slide-in-child'); -let SlideIn = React.createClass({ +const SlideIn = React.createClass({ mixins: [StylePropable], From 5cb4cbc7d70c2e2340d56c1ff144aa2d3b9038df Mon Sep 17 00:00:00 2001 From: Shaurya Arora Date: Thu, 10 Sep 2015 10:16:22 -0500 Subject: [PATCH 024/118] Removing "themes" folder and theme.jsx component as they are no longer needed --- src/styles/themes/dark-theme.js | 66 --------- src/styles/themes/light-theme.js | 225 ------------------------------- src/theme.jsx | 66 --------- 3 files changed, 357 deletions(-) delete mode 100644 src/styles/themes/dark-theme.js delete mode 100644 src/styles/themes/light-theme.js delete mode 100644 src/theme.jsx diff --git a/src/styles/themes/dark-theme.js b/src/styles/themes/dark-theme.js deleted file mode 100644 index 4e320d2b014505..00000000000000 --- a/src/styles/themes/dark-theme.js +++ /dev/null @@ -1,66 +0,0 @@ -let Colors = require('../colors'); -let ColorManipulator = require('../../utils/color-manipulator'); - - -let DarkTheme = { - getPalette() { - return { - textColor: Colors.fullWhite, - canvasColor: '#303030', - borderColor: ColorManipulator.fade(Colors.fullWhite, 0.3), //Colors.grey300 - disabledColor: ColorManipulator.fade(Colors.fullWhite, 0.3), - primary1Color: Colors.teal200, - }; - }, - getComponentThemes(palette) { - let cardColor = Colors.grey800; - return { - avatar: { - borderColor: 'rgba(0, 0, 0, 0.5)', - }, - floatingActionButton: { - disabledColor: ColorManipulator.fade(palette.textColor, 0.12), - }, - leftNav: { - color: cardColor, - }, - menu: { - backgroundColor: cardColor, - containerBackgroundColor: cardColor, - }, - menuItem: { - hoverColor: 'rgba(255, 255, 255, .03)', - }, - menuSubheader: { - borderColor: 'rgba(255, 255, 255, 0.3)', - }, - paper: { - backgroundColor: cardColor, - }, - raisedButton: { - color: Colors.grey500, - }, - toggle: { - thumbOnColor: Colors.cyan200, - thumbOffColor: Colors.grey400, - thumbDisabledColor: Colors.grey800, - thumbRequiredColor: Colors.cyan200, - trackOnColor: ColorManipulator.fade(Colors.cyan200, 0.5), - trackOffColor: 'rgba(255, 255, 255, 0.3)', - trackDisabledColor: 'rgba(255, 255, 255, 0.1)', - }, - refreshIndicator: { - strokeColor: Colors.grey700, - loadingStrokeColor: Colors.teal300, - }, - slider: { - trackColor: Colors.minBlack, - handleColorZero: cardColor, - handleFillColor: cardColor, - selectionColor: Colors.cyan200, - }, - }; - }, -}; - -module.exports = DarkTheme; diff --git a/src/styles/themes/light-theme.js b/src/styles/themes/light-theme.js deleted file mode 100644 index 614c297d4b6202..00000000000000 --- a/src/styles/themes/light-theme.js +++ /dev/null @@ -1,225 +0,0 @@ -let Colors = require('../colors'); -let Spacing = require('../spacing'); -let ColorManipulator = require('../../utils/color-manipulator'); - - -/** - * Light Theme is the default theme used in material-ui. It is guaranteed to - * have all theme variables needed for every component. Variables not defined - * in a custom theme will default to these values. - */ - -let LightTheme = { - spacing: Spacing, - contentFontFamily: 'Roboto, sans-serif', - getPalette() { - return { - primary1Color: Colors.cyan500, - primary2Color: Colors.cyan700, - primary3Color: Colors.cyan100, - accent1Color: Colors.pinkA200, - accent2Color: Colors.pinkA400, - accent3Color: Colors.pinkA100, - textColor: Colors.darkBlack, - canvasColor: Colors.white, - borderColor: Colors.grey300, - disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3), - }; - }, - getComponentThemes(palette, spacing) { - spacing = spacing || Spacing; - let obj = { - appBar: { - color: palette.primary1Color, - textColor: Colors.darkWhite, - height: spacing.desktopKeylineIncrement, - }, - avatar: { - borderColor: 'rgba(0, 0, 0, 0.08)', - }, - button: { - height: 36, - minWidth: 88, - iconButtonSize: spacing.iconSize * 2, - }, - checkbox: { - boxColor: palette.textColor, - checkedColor: palette.primary1Color, - requiredColor: palette.primary1Color, - disabledColor: palette.disabledColor, - labelColor: palette.textColor, - labelDisabledColor: palette.disabledColor, - }, - datePicker: { - color: palette.primary1Color, - textColor: Colors.white, - calendarTextColor: palette.textColor, - selectColor: palette.primary2Color, - selectTextColor: Colors.white, - }, - dropDownMenu: { - accentColor: palette.borderColor, - }, - flatButton: { - color: palette.canvasColor, - textColor: palette.textColor, - primaryTextColor: palette.accent1Color, - secondaryTextColor: palette.primary1Color, - }, - floatingActionButton: { - buttonSize: 56, - miniSize: 40, - color: palette.accent1Color, - iconColor: Colors.white, - secondaryColor: palette.primary1Color, - secondaryIconColor: Colors.white, - }, - inkBar: { - backgroundColor: palette.accent1Color, - }, - leftNav: { - width: spacing.desktopKeylineIncrement * 4, - color: Colors.white, - }, - listItem: { - nestedLevelDepth: 18, - }, - menu: { - backgroundColor: Colors.white, - containerBackgroundColor: Colors.white, - }, - menuItem: { - dataHeight: 32, - height: 48, - hoverColor: 'rgba(0, 0, 0, .035)', - padding: spacing.desktopGutter, - selectedTextColor: palette.accent1Color, - }, - menuSubheader: { - padding: spacing.desktopGutter, - borderColor: palette.borderColor, - textColor: palette.primary1Color, - }, - paper: { - backgroundColor: Colors.white, - }, - radioButton: { - borderColor: palette.textColor, - backgroundColor: Colors.white, - checkedColor: palette.primary1Color, - requiredColor: palette.primary1Color, - disabledColor: palette.disabledColor, - size: 24, - labelColor: palette.textColor, - labelDisabledColor: palette.disabledColor, - }, - raisedButton: { - color: Colors.white, - textColor: palette.textColor, - primaryColor: palette.accent1Color, - primaryTextColor: Colors.white, - secondaryColor: palette.primary1Color, - secondaryTextColor: Colors.white, - }, - refreshIndicator: { - strokeColor: Colors.grey300, - loadingStrokeColor: palette.primary1Color, - }, - slider: { - trackSize: 2, - trackColor: Colors.minBlack, - trackColorSelected: Colors.grey500, - handleSize: 12, - handleSizeDisabled: 8, - handleSizeActive: 18, - handleColorZero: Colors.grey400, - handleFillColor: Colors.white, - selectionColor: palette.primary3Color, - rippleColor: palette.primary1Color, - }, - snackbar: { - textColor: Colors.white, - backgroundColor: '#323232', - actionColor: palette.accent1Color, - }, - table: { - backgroundColor: Colors.white, - }, - tableHeader: { - borderColor: palette.borderColor, - }, - tableHeaderColumn: { - textColor: Colors.lightBlack, - height: 56, - spacing: 24, - }, - tableFooter: { - borderColor: palette.borderColor, - textColor: Colors.lightBlack, - }, - tableRow: { - hoverColor: Colors.grey200, - stripeColor: ColorManipulator.lighten(palette.primary1Color, 0.55), - selectedColor: Colors.grey300, - textColor: Colors.darkBlack, - borderColor: palette.borderColor, - }, - tableRowColumn: { - height: 48, - spacing: 24, - }, - timePicker: { - color: Colors.white, - textColor: Colors.grey600, - accentColor: palette.primary1Color, - clockColor: Colors.black, - selectColor: palette.primary2Color, - selectTextColor: Colors.white, - }, - toggle: { - thumbOnColor: palette.primary1Color, - thumbOffColor: Colors.grey50, - thumbDisabledColor: Colors.grey400, - thumbRequiredColor: palette.primary1Color, - trackOnColor: ColorManipulator.fade(palette.primary1Color, 0.5), - trackOffColor: Colors.minBlack, - trackDisabledColor: Colors.faintBlack, - labelColor: palette.textColor, - labelDisabledColor: palette.disabledColor, - }, - toolbar: { - backgroundColor: ColorManipulator.darken('#eeeeee', 0.05), - height: 56, - titleFontSize: 20, - iconColor: 'rgba(0, 0, 0, .40)', - separatorColor: 'rgba(0, 0, 0, .175)', - menuHoverColor: 'rgba(0, 0, 0, .10)', - }, - tabs: { - backgroundColor: palette.primary1Color, - }, - textField: { - textColor: palette.textColor, - hintColor: palette.disabledColor, - floatingLabelColor: palette.textColor, - disabledTextColor: palette.disabledColor, - errorColor: Colors.red500, - focusColor: palette.primary1Color, - backgroundColor: 'transparent', - borderColor: palette.borderColor, - }, - }; - - // Properties based on previous properties - obj.flatButton.disabledTextColor = ColorManipulator.fade(obj.flatButton.textColor, 0.3); - obj.floatingActionButton.disabledColor = ColorManipulator.darken(Colors.white, 0.1); - obj.floatingActionButton.disabledTextColor = ColorManipulator.fade(palette.textColor, 0.3); - obj.raisedButton.disabledColor = ColorManipulator.darken(obj.raisedButton.color, 0.1); - obj.raisedButton.disabledTextColor = ColorManipulator.fade(obj.raisedButton.textColor, 0.3); - obj.toggle.trackRequiredColor = ColorManipulator.fade(obj.toggle.thumbRequiredColor, 0.5); - - return obj; - }, -}; - -module.exports = LightTheme; diff --git a/src/theme.jsx b/src/theme.jsx deleted file mode 100644 index a13ee31b4788de..00000000000000 --- a/src/theme.jsx +++ /dev/null @@ -1,66 +0,0 @@ -let React = require('react'); -let ThemeManager = require('./styles/theme-manager'); - - -let Theme = React.createClass({ - - propTypes: { - theme: React.PropTypes.object, - }, - - childContextTypes: { - muiTheme: React.PropTypes.object.isRequired, - muiThemeManager: React.PropTypes.object.isRequired, - }, - - getChildContext() { - return { - muiTheme: this.themeManager.getCurrentTheme(), - muiThemeManager: this.themeManager, - }; - }, - - componentWillMount() { - this.themeManager = new ThemeManager(); - - if (this.props.theme) { - this.themeManager.setTheme(this.props.theme); - } - }, - - render() { - return this.props.children({ - muiTheme: this.themeManager.getCurrentTheme(), - muiThemeManager: this.themeManager, - }); - }, -}); - - -function getDisplayName(Component) { - return Component.displayName || Component.name || 'Component'; -} - -function theme(customTheme) { - return (Component) => { - return React.createClass({ - - displayName: 'Theme(' + getDisplayName(Component) + ')', - - render() { - return ( - - { - function(props) { - return ; - }.bind(this) - } - - ); - }, - }); - }; -} - -module.exports = Theme; -module.exports.theme = theme; From 060100d5a4e31a5e5d01da06c088c35bd6ca89a8 Mon Sep 17 00:00:00 2001 From: Shaurya Arora Date: Thu, 10 Sep 2015 10:34:43 -0500 Subject: [PATCH 025/118] Updated documentation website source code to be consistent with new theming approach --- .../components/code-example/code-block.jsx | 49 ++++++---- .../components/code-example/code-example.jsx | 57 ++++++++---- docs/src/app/components/component-doc.jsx | 42 +++++++-- docs/src/app/components/component-info.jsx | 39 ++++++-- docs/src/app/components/master.jsx | 90 ++++++++++--------- .../components/pages/customization/colors.jsx | 12 +-- .../pages/customization/inline-styles.jsx | 18 ++-- .../components/pages/customization/themes.jsx | 66 +++++++++----- .../components/pages/get-started/examples.jsx | 47 +++++++--- .../pages/get-started/installation.jsx | 51 ++++++++--- .../pages/get-started/prerequisites.jsx | 51 ++++++++--- docs/src/app/components/pages/home.jsx | 21 ++--- 12 files changed, 367 insertions(+), 176 deletions(-) diff --git a/docs/src/app/components/code-example/code-block.jsx b/docs/src/app/components/code-example/code-block.jsx index b4140020661cdd..eca4639767ec0b 100644 --- a/docs/src/app/components/code-example/code-block.jsx +++ b/docs/src/app/components/code-example/code-block.jsx @@ -1,14 +1,35 @@ -let React = require('react'); -let { Styles } = require('material-ui'); -let { Spacing } = Styles; +const React = require('react'); +const { Styles } = require('material-ui'); +const { Spacing } = Styles; -class CodeBlock extends React.Component { +const CodeBlock = React.createClass({ - constructor() { - super(); - this.componentDidMount = this.componentDidMount.bind(this); - } + contextTypes : { + muiTheme: React.PropTypes.object + }, + + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + + getInitialState () { + return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + }, + + componentWillReceiveProps (nextProps, nextContext) { + let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; + this.setState({muiTheme: newMuiTheme}); + }, componentDidMount() { var code = React.findDOMNode(this.refs.code); @@ -21,21 +42,17 @@ class CodeBlock extends React.Component { readOnly: true, }); }); - } + }, shouldComponentUpdate({children}, nextState){ return this.props.children !== children; - } + }, render() { return (