From c2ab8e5c3d91588fd9e68ffb57aa0049a92c9360 Mon Sep 17 00:00:00 2001 From: mbrookes Date: Tue, 15 Dec 2015 22:56:29 +0000 Subject: [PATCH 01/70] Map raw-themes to base-themes --- docs/src/app/components/master.jsx | 2 +- .../components/pages/customization/themes.jsx | 4 +-- docs/src/app/components/pages/home.jsx | 2 +- src/styles/baseThemes/darkBaseTheme.js | 23 ++++++++++++ src/styles/baseThemes/lightBaseTheme.js | 29 +++++++++++++++ src/styles/index.js | 4 +++ src/styles/raw-themes/dark-raw-theme.js | 29 ++++----------- src/styles/raw-themes/light-raw-theme.js | 35 ++++--------------- 8 files changed, 74 insertions(+), 54 deletions(-) create mode 100644 src/styles/baseThemes/darkBaseTheme.js create mode 100644 src/styles/baseThemes/lightBaseTheme.js diff --git a/docs/src/app/components/master.jsx b/docs/src/app/components/master.jsx index 185733effd4af0..2af306d8e507c2 100644 --- a/docs/src/app/components/master.jsx +++ b/docs/src/app/components/master.jsx @@ -14,7 +14,7 @@ import {AppBar, const {StylePropable} = Mixins; const {Colors, Spacing, Typography} = Styles; const ThemeManager = Styles.ThemeManager; -const DefaultRawTheme = Styles.LightRawTheme; +const DefaultRawTheme = Styles.lightBaseTheme; const Master = React.createClass({ diff --git a/docs/src/app/components/pages/customization/themes.jsx b/docs/src/app/components/pages/customization/themes.jsx index f524687226ce1d..40639bd621cb7f 100644 --- a/docs/src/app/components/pages/customization/themes.jsx +++ b/docs/src/app/components/pages/customization/themes.jsx @@ -30,8 +30,8 @@ const { const {StylePropable, StyleResizable} = Mixins; const {Typography} = Styles; const ThemeManager = Styles.ThemeManager; -const DefaultRawTheme = Styles.LightRawTheme; -const DarkRawTheme = Styles.DarkRawTheme; +const DefaultRawTheme = Styles.lightBaseTheme; +const DarkRawTheme = Styles.darkBaseTheme; const ThemesPage = React.createClass({ diff --git a/docs/src/app/components/pages/home.jsx b/docs/src/app/components/pages/home.jsx index c2f12ed584f532..57e269103e1126 100644 --- a/docs/src/app/components/pages/home.jsx +++ b/docs/src/app/components/pages/home.jsx @@ -6,7 +6,7 @@ import FullWidthSection from '../full-width-section'; const {StylePropable, StyleResizable} = Mixins; const {Colors, Spacing, Typography} = Styles; -const DefaultRawTheme = Styles.LightRawTheme; +const DefaultRawTheme = Styles.lightBaseTheme; const HomePage = React.createClass({ diff --git a/src/styles/baseThemes/darkBaseTheme.js b/src/styles/baseThemes/darkBaseTheme.js new file mode 100644 index 00000000000000..e140f554056c96 --- /dev/null +++ b/src/styles/baseThemes/darkBaseTheme.js @@ -0,0 +1,23 @@ +import Colors from '../colors'; +import ColorManipulator from '../../utils/color-manipulator'; +import Spacing from '../spacing'; + +export default { + spacing: Spacing, + fontFamily: 'Roboto, sans-serif', + palette: { + primary1Color: Colors.cyan700, + primary2Color: Colors.cyan700, + primary3Color: Colors.grey600, + accent1Color: Colors.pinkA200, + accent2Color: Colors.pinkA400, + accent3Color: Colors.pinkA100, + textColor: Colors.fullWhite, + alternateTextColor: '#303030', + canvasColor: '#303030', + borderColor: ColorManipulator.fade(Colors.fullWhite, 0.3), + disabledColor: ColorManipulator.fade(Colors.fullWhite, 0.3), + pickerHeaderColor: ColorManipulator.fade(Colors.fullWhite, 0.12), + clockCircleColor: ColorManipulator.fade(Colors.fullWhite, 0.12), + }, +}; diff --git a/src/styles/baseThemes/lightBaseTheme.js b/src/styles/baseThemes/lightBaseTheme.js new file mode 100644 index 00000000000000..aa739f5b9218ea --- /dev/null +++ b/src/styles/baseThemes/lightBaseTheme.js @@ -0,0 +1,29 @@ +import Colors from '../colors'; +import ColorManipulator from '../../utils/color-manipulator'; +import Spacing from '../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. + */ + +export default { + spacing: Spacing, + fontFamily: 'Roboto, sans-serif', + palette: { + primary1Color: Colors.cyan500, + primary2Color: Colors.cyan700, + primary3Color: Colors.grey400, + accent1Color: Colors.pinkA200, + accent2Color: Colors.grey100, + accent3Color: Colors.grey500, + textColor: Colors.darkBlack, + alternateTextColor: Colors.white, + canvasColor: Colors.white, + borderColor: Colors.grey300, + disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3), + pickerHeaderColor: Colors.cyan500, + clockCircleColor: ColorManipulator.fade(Colors.darkBlack, 0.07), + }, +}; diff --git a/src/styles/index.js b/src/styles/index.js index 1061383dcf5902..6c004240846645 100644 --- a/src/styles/index.js +++ b/src/styles/index.js @@ -5,7 +5,9 @@ import ThemeManager from './theme-manager'; import Transitions from './transitions'; import Typography from './typography'; import LightRawTheme from './raw-themes/light-raw-theme'; +import lightBaseTheme from './baseThemes/lightBaseTheme'; import DarkRawTheme from './raw-themes/dark-raw-theme'; +import darkBaseTheme from './baseThemes/darkBaseTheme'; import ThemeDecorator from './theme-decorator'; import ZIndex from './zIndex'; @@ -27,7 +29,9 @@ export default { ThemeManager, Transitions, Typography, + lightBaseTheme, LightRawTheme, + darkBaseTheme, DarkRawTheme, ThemeDecorator, ZIndex, diff --git a/src/styles/raw-themes/dark-raw-theme.js b/src/styles/raw-themes/dark-raw-theme.js index e140f554056c96..551d8fdd2bb1b8 100644 --- a/src/styles/raw-themes/dark-raw-theme.js +++ b/src/styles/raw-themes/dark-raw-theme.js @@ -1,23 +1,8 @@ -import Colors from '../colors'; -import ColorManipulator from '../../utils/color-manipulator'; -import Spacing from '../spacing'; +import darkBaseTheme from '../baseThemes/darkBaseTheme'; +import deprecatedExport from '../../utils/deprecatedExport'; -export default { - spacing: Spacing, - fontFamily: 'Roboto, sans-serif', - palette: { - primary1Color: Colors.cyan700, - primary2Color: Colors.cyan700, - primary3Color: Colors.grey600, - accent1Color: Colors.pinkA200, - accent2Color: Colors.pinkA400, - accent3Color: Colors.pinkA100, - textColor: Colors.fullWhite, - alternateTextColor: '#303030', - canvasColor: '#303030', - borderColor: ColorManipulator.fade(Colors.fullWhite, 0.3), - disabledColor: ColorManipulator.fade(Colors.fullWhite, 0.3), - pickerHeaderColor: ColorManipulator.fade(Colors.fullWhite, 0.12), - clockCircleColor: ColorManipulator.fade(Colors.fullWhite, 0.12), - }, -}; +export default deprecatedExport( + darkBaseTheme, + 'material-ui/lib/styles/raw-themes/dark-raw-theme', + 'material-ui/lib/styles/baseThemes/darkBaseTheme' +); diff --git a/src/styles/raw-themes/light-raw-theme.js b/src/styles/raw-themes/light-raw-theme.js index aa739f5b9218ea..13cd3d657128f5 100644 --- a/src/styles/raw-themes/light-raw-theme.js +++ b/src/styles/raw-themes/light-raw-theme.js @@ -1,29 +1,8 @@ -import Colors from '../colors'; -import ColorManipulator from '../../utils/color-manipulator'; -import Spacing from '../spacing'; +import lightBaseTheme from '../baseThemes/lightBaseTheme'; +import deprecatedExport from '../../utils/deprecatedExport'; -/* - * 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. - */ - -export default { - spacing: Spacing, - fontFamily: 'Roboto, sans-serif', - palette: { - primary1Color: Colors.cyan500, - primary2Color: Colors.cyan700, - primary3Color: Colors.grey400, - accent1Color: Colors.pinkA200, - accent2Color: Colors.grey100, - accent3Color: Colors.grey500, - textColor: Colors.darkBlack, - alternateTextColor: Colors.white, - canvasColor: Colors.white, - borderColor: Colors.grey300, - disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3), - pickerHeaderColor: Colors.cyan500, - clockCircleColor: ColorManipulator.fade(Colors.darkBlack, 0.07), - }, -}; +export default deprecatedExport( + lightBaseTheme, + 'material-ui/lib/styles/raw-themes/light-raw-theme', + 'material-ui/lib/styles/baseThemes/lightBaseTheme' +); From aeefc97d6b7315edf02a832982d9a0f68f0132f3 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Fri, 18 Dec 2015 18:47:01 +0330 Subject: [PATCH 02/70] add lodash.merge as a required dependency --- package.json | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index d5a7abff928019..4f56452d187d92 100644 --- a/package.json +++ b/package.json @@ -31,11 +31,12 @@ "homepage": "http://material-ui.com/", "dependencies": { "inline-style-prefixer": "^0.5.2", + "lodash.merge": "^3.3.2", "lodash.throttle": "~3.0.4", - "react-addons-transition-group": "^0.14.0", - "react-addons-update": "^0.14.0", "react-addons-create-fragment": "^0.14.0", "react-addons-pure-render-mixin": "^0.14.0", + "react-addons-transition-group": "^0.14.0", + "react-addons-update": "^0.14.0", "warning": "^2.1.0" }, "peerDependencies": { From 1d58e3aa9dd5f4aa532951de8b25762ab002b11c Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Fri, 18 Dec 2015 18:47:47 +0330 Subject: [PATCH 03/70] major improvement to theme handling --- src/MuiThemeProvider.jsx | 4 +- src/muiThemeable.js | 13 +- src/styles/getMuiTheme.js | 226 ++++++++++++++++++++++++++++ src/styles/theme-decorator.js | 4 +- src/styles/theme-manager.js | 275 +++------------------------------- 5 files changed, 256 insertions(+), 266 deletions(-) create mode 100644 src/styles/getMuiTheme.js diff --git a/src/MuiThemeProvider.jsx b/src/MuiThemeProvider.jsx index 6b59ca31de3162..3dde7cafb6ac6f 100644 --- a/src/MuiThemeProvider.jsx +++ b/src/MuiThemeProvider.jsx @@ -8,12 +8,12 @@ class MuiThemeProvider extends Component { }; static childContextTypes = { - muiTheme: PropTypes.object, + _muiTheme: PropTypes.object, }; getChildContext() { return { - muiTheme: this.props.muiTheme, + _muiTheme: this.props.muiTheme, }; } diff --git a/src/muiThemeable.js b/src/muiThemeable.js index eecd64b3436128..038f74ab7ce52f 100644 --- a/src/muiThemeable.js +++ b/src/muiThemeable.js @@ -1,22 +1,21 @@ import React from 'react'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; +import getMuiTheme from './styles/getMuiTheme'; function getDisplayName(WrappedComponent) { return WrappedComponent.displayName || WrappedComponent.name || 'Component'; } export default function muiThemeable(WrappedComponent) { - const MuiComponent = (props, {muiTheme = ThemeManager.getMuiTheme(DefaultRawTheme)}) => { - return ; - }; + function MuiComponent(props, {_muiTheme = getMuiTheme()}) { + return React.createElement(WrappedComponent, {_muiTheme, ...props}); + } MuiComponent.displayName = getDisplayName(WrappedComponent); MuiComponent.contextTypes = { - muiTheme: React.PropTypes.object, + _muiTheme: React.PropTypes.object, }; MuiComponent.childContextTypes = { - muiTheme: React.PropTypes.object, + _muiTheme: React.PropTypes.object, }; return MuiComponent; diff --git a/src/styles/getMuiTheme.js b/src/styles/getMuiTheme.js new file mode 100644 index 00000000000000..95d4f6d8f3e3e8 --- /dev/null +++ b/src/styles/getMuiTheme.js @@ -0,0 +1,226 @@ +import merge from 'lodash.merge'; +import Colors from './colors'; +import ColorManipulator from '../utils/color-manipulator'; +import lightBaseTheme from './baseThemes/lightBaseTheme'; +import zIndex from './zIndex'; + +/** + * Get the MUI theme corresponding to a base theme. + * It's possible to override the computed theme values + * by providing a second argument. The calculated + * theme will be deeply merged with the second argument. + */ +export default function getMuiTheme(baseTheme, muiTheme) { + baseTheme = merge({}, lightBaseTheme, baseTheme); + const {palette, spacing} = baseTheme; + + return merge({ + isRtl: false, + zIndex, + baseTheme, + rawTheme: baseTheme, // To provide backward compatibility. + appBar: { + color: palette.primary1Color, + textColor: palette.alternateTextColor, + height: spacing.desktopKeylineIncrement, + }, + avatar: { + borderColor: 'rgba(0, 0, 0, 0.08)', + }, + badge: { + color: palette.alternateTextColor, + textColor: palette.textColor, + primaryColor: palette.accent1Color, + primaryTextColor: palette.alternateTextColor, + secondaryColor: palette.primary1Color, + secondaryTextColor: palette.alternateTextColor, + }, + button: { + height: 36, + minWidth: 88, + iconButtonSize: spacing.iconSize * 2, + }, + cardText: { + textColor: palette.textColor, + }, + checkbox: { + boxColor: palette.textColor, + checkedColor: palette.primary1Color, + requiredColor: palette.primary1Color, + disabledColor: palette.disabledColor, + labelColor: palette.textColor, + labelDisabledColor: palette.disabledColor, + }, + datePicker: { + color: palette.primary1Color, + textColor: palette.alternateTextColor, + calendarTextColor: palette.textColor, + selectColor: palette.primary2Color, + selectTextColor: palette.alternateTextColor, + }, + dropDownMenu: { + accentColor: palette.borderColor, + }, + flatButton: { + color: Colors.transparent, + buttonFilterColor: '#999999', + disabledTextColor: ColorManipulator.fade(palette.textColor, 0.3), + textColor: palette.textColor, + primaryTextColor: palette.accent1Color, + secondaryTextColor: palette.primary1Color, + }, + floatingActionButton: { + buttonSize: 56, + miniSize: 40, + color: palette.accent1Color, + iconColor: palette.alternateTextColor, + secondaryColor: palette.primary1Color, + secondaryIconColor: palette.alternateTextColor, + disabledTextColor: palette.disabledColor, + }, + gridTile: { + textColor: Colors.white, + }, + inkBar: { + backgroundColor: palette.accent1Color, + }, + leftNav: { + width: spacing.desktopKeylineIncrement * 4, + color: palette.canvasColor, + }, + listItem: { + nestedLevelDepth: 18, + }, + menu: { + backgroundColor: palette.canvasColor, + containerBackgroundColor: palette.canvasColor, + }, + 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: palette.canvasColor, + }, + radioButton: { + borderColor: palette.textColor, + backgroundColor: palette.alternateTextColor, + checkedColor: palette.primary1Color, + requiredColor: palette.primary1Color, + disabledColor: palette.disabledColor, + size: 24, + labelColor: palette.textColor, + labelDisabledColor: palette.disabledColor, + }, + raisedButton: { + color: palette.alternateTextColor, + textColor: palette.textColor, + primaryColor: palette.accent1Color, + primaryTextColor: palette.alternateTextColor, + secondaryColor: palette.primary1Color, + secondaryTextColor: palette.alternateTextColor, + disabledColor: ColorManipulator.darken(palette.alternateTextColor, 0.1), + disabledTextColor: ColorManipulator.fade(palette.textColor, 0.3), + }, + refreshIndicator: { + strokeColor: palette.borderColor, + loadingStrokeColor: palette.primary1Color, + }, + slider: { + trackSize: 2, + trackColor: palette.primary3Color, + trackColorSelected: palette.accent3Color, + handleSize: 12, + handleSizeDisabled: 8, + handleSizeActive: 18, + handleColorZero: palette.primary3Color, + handleFillColor: palette.alternateTextColor, + selectionColor: palette.primary1Color, + rippleColor: palette.primary1Color, + }, + snackbar: { + textColor: palette.alternateTextColor, + backgroundColor: palette.textColor, + actionColor: palette.accent1Color, + }, + table: { + backgroundColor: palette.canvasColor, + }, + tableHeader: { + borderColor: palette.borderColor, + }, + tableHeaderColumn: { + textColor: palette.accent3Color, + height: 56, + spacing: 24, + }, + tableFooter: { + borderColor: palette.borderColor, + textColor: palette.accent3Color, + }, + tableRow: { + hoverColor: palette.accent2Color, + stripeColor: ColorManipulator.lighten(palette.primary1Color, 0.55), + selectedColor: palette.borderColor, + textColor: palette.textColor, + borderColor: palette.borderColor, + }, + tableRowColumn: { + height: 48, + spacing: 24, + }, + timePicker: { + color: palette.alternateTextColor, + textColor: palette.accent3Color, + accentColor: palette.primary1Color, + clockColor: palette.textColor, + clockCircleColor: palette.clockCircleColor, + headerColor: palette.pickerHeaderColor || palette.primary1Color, + selectColor: palette.primary2Color, + selectTextColor: palette.alternateTextColor, + }, + toggle: { + thumbOnColor: palette.primary1Color, + thumbOffColor: palette.accent2Color, + thumbDisabledColor: palette.borderColor, + thumbRequiredColor: palette.primary1Color, + trackOnColor: ColorManipulator.fade(palette.primary1Color, 0.5), + trackOffColor: palette.primary3Color, + trackDisabledColor: palette.primary3Color, + labelColor: palette.textColor, + labelDisabledColor: palette.disabledColor, + trackRequiredColor: ColorManipulator.fade(palette.primary1Color, 0.5), + }, + toolbar: { + backgroundColor: ColorManipulator.darken(palette.accent2Color, 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, + textColor: ColorManipulator.fade(palette.alternateTextColor, 0.6), + selectedTextColor: palette.alternateTextColor, + }, + textField: { + textColor: palette.textColor, + hintColor: palette.disabledColor, + floatingLabelColor: palette.textColor, + disabledTextColor: palette.disabledColor, + errorColor: Colors.red500, + focusColor: palette.primary1Color, + backgroundColor: 'transparent', + borderColor: palette.borderColor, + }, + }, muiTheme); +} diff --git a/src/styles/theme-decorator.js b/src/styles/theme-decorator.js index dfa8b0e68aba22..6965c24ca68362 100644 --- a/src/styles/theme-decorator.js +++ b/src/styles/theme-decorator.js @@ -7,12 +7,12 @@ export default (customTheme) => { return React.createClass({ childContextTypes: { - muiTheme: React.PropTypes.object, + _muiTheme: React.PropTypes.object, }, getChildContext() { return { - muiTheme: customTheme, + _muiTheme: customTheme, }; }, diff --git a/src/styles/theme-manager.js b/src/styles/theme-manager.js index fdbd8f2cdce4f1..2e4aef8f386758 100644 --- a/src/styles/theme-manager.js +++ b/src/styles/theme-manager.js @@ -1,257 +1,22 @@ -import Colors from './colors'; -import ColorManipulator from '../utils/color-manipulator'; -import Extend from '../utils/extend'; import update from 'react-addons-update'; -import zIndex from './zIndex'; - -export default { - - //get the MUI theme corresponding to a raw theme - getMuiTheme: function(rawTheme) { - let returnObj = { - appBar: { - color: rawTheme.palette.primary1Color, - textColor: rawTheme.palette.alternateTextColor, - height: rawTheme.spacing.desktopKeylineIncrement, - }, - avatar: { - borderColor: 'rgba(0, 0, 0, 0.08)', - }, - badge: { - color: rawTheme.palette.alternateTextColor, - textColor: rawTheme.palette.textColor, - primaryColor: rawTheme.palette.accent1Color, - primaryTextColor: rawTheme.palette.alternateTextColor, - secondaryColor: rawTheme.palette.primary1Color, - secondaryTextColor: rawTheme.palette.alternateTextColor, - }, - button: { - height: 36, - minWidth: 88, - iconButtonSize: rawTheme.spacing.iconSize * 2, - }, - cardText: { - textColor: rawTheme.palette.textColor, - }, - 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: rawTheme.palette.alternateTextColor, - calendarTextColor: rawTheme.palette.textColor, - selectColor: rawTheme.palette.primary2Color, - selectTextColor: rawTheme.palette.alternateTextColor, - }, - dropDownMenu: { - accentColor: rawTheme.palette.borderColor, - }, - flatButton: { - color: Colors.transparent, - buttonFilterColor: '#999999', - textColor: rawTheme.palette.textColor, - primaryTextColor: rawTheme.palette.accent1Color, - secondaryTextColor: rawTheme.palette.primary1Color, - }, - floatingActionButton: { - buttonSize: 56, - miniSize: 40, - color: rawTheme.palette.accent1Color, - iconColor: rawTheme.palette.alternateTextColor, - secondaryColor: rawTheme.palette.primary1Color, - secondaryIconColor: rawTheme.palette.alternateTextColor, - disabledTextColor: rawTheme.palette.disabledColor, - }, - gridTile: { - textColor: Colors.white, - }, - inkBar: { - backgroundColor: rawTheme.palette.accent1Color, - }, - leftNav: { - width: rawTheme.spacing.desktopKeylineIncrement * 4, - color: rawTheme.palette.canvasColor, - }, - listItem: { - nestedLevelDepth: 18, - }, - menu: { - backgroundColor: rawTheme.palette.canvasColor, - containerBackgroundColor: rawTheme.palette.canvasColor, - }, - 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: rawTheme.palette.canvasColor, - }, - radioButton: { - borderColor: rawTheme.palette.textColor, - backgroundColor: rawTheme.palette.alternateTextColor, - checkedColor: rawTheme.palette.primary1Color, - requiredColor: rawTheme.palette.primary1Color, - disabledColor: rawTheme.palette.disabledColor, - size: 24, - labelColor: rawTheme.palette.textColor, - labelDisabledColor: rawTheme.palette.disabledColor, - }, - raisedButton: { - color: rawTheme.palette.alternateTextColor, - textColor: rawTheme.palette.textColor, - primaryColor: rawTheme.palette.accent1Color, - primaryTextColor: rawTheme.palette.alternateTextColor, - secondaryColor: rawTheme.palette.primary1Color, - secondaryTextColor: rawTheme.palette.alternateTextColor, - }, - refreshIndicator: { - strokeColor: rawTheme.palette.borderColor, - loadingStrokeColor: rawTheme.palette.primary1Color, - }, - slider: { - trackSize: 2, - trackColor: rawTheme.palette.primary3Color, - trackColorSelected: rawTheme.palette.accent3Color, - handleSize: 12, - handleSizeDisabled: 8, - handleSizeActive: 18, - handleColorZero: rawTheme.palette.primary3Color, - handleFillColor: rawTheme.palette.alternateTextColor, - selectionColor: rawTheme.palette.primary1Color, - rippleColor: rawTheme.palette.primary1Color, - }, - snackbar: { - textColor: rawTheme.palette.alternateTextColor, - backgroundColor: rawTheme.palette.textColor, - actionColor: rawTheme.palette.accent1Color, - }, - table: { - backgroundColor: rawTheme.palette.canvasColor, - }, - tableHeader: { - borderColor: rawTheme.palette.borderColor, - }, - tableHeaderColumn: { - textColor: rawTheme.palette.accent3Color, - height: 56, - spacing: 24, - }, - tableFooter: { - borderColor: rawTheme.palette.borderColor, - textColor: rawTheme.palette.accent3Color, - }, - tableRow: { - hoverColor: rawTheme.palette.accent2Color, - stripeColor: ColorManipulator.lighten(rawTheme.palette.primary1Color, 0.55), - selectedColor: rawTheme.palette.borderColor, - textColor: rawTheme.palette.textColor, - borderColor: rawTheme.palette.borderColor, - }, - tableRowColumn: { - height: 48, - spacing: 24, - }, - timePicker: { - color: rawTheme.palette.alternateTextColor, - textColor: rawTheme.palette.accent3Color, - accentColor: rawTheme.palette.primary1Color, - clockColor: rawTheme.palette.textColor, - clockCircleColor: rawTheme.palette.clockCircleColor, - headerColor: rawTheme.palette.pickerHeaderColor || rawTheme.palette.primary1Color, - selectColor: rawTheme.palette.primary2Color, - selectTextColor: rawTheme.palette.alternateTextColor, - }, - toggle: { - thumbOnColor: rawTheme.palette.primary1Color, - thumbOffColor: rawTheme.palette.accent2Color, - thumbDisabledColor: rawTheme.palette.borderColor, - thumbRequiredColor: rawTheme.palette.primary1Color, - trackOnColor: ColorManipulator.fade(rawTheme.palette.primary1Color, 0.5), - trackOffColor: rawTheme.palette.primary3Color, - trackDisabledColor: rawTheme.palette.primary3Color, - labelColor: rawTheme.palette.textColor, - labelDisabledColor: rawTheme.palette.disabledColor, - }, - toolbar: { - backgroundColor: ColorManipulator.darken(rawTheme.palette.accent2Color, 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, - textColor: ColorManipulator.fade(rawTheme.palette.alternateTextColor, 0.6), - selectedTextColor: rawTheme.palette.alternateTextColor, - }, - 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, - }, - isRtl: false, - zIndex: zIndex, - }; - - //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); - - //append the raw theme object to 'returnObj' - returnObj.rawTheme = rawTheme; - - //set 'static' key as true (by default) on return object. This is to support the ContextPure mixin. - returnObj.static = true; - - 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); +import extend from '../utils/extend'; +import getMuiTheme from './getMuiTheme'; +import deprecatedExport from '../utils/deprecatedExport'; + +export default deprecatedExport( + { + getMuiTheme, + modifyRawThemeSpacing(muiTheme, spacing) { + return getMuiTheme(update(muiTheme.baseTheme, {spacing: {$set: spacing}})); + }, + modifyRawThemePalette(muiTheme, palette) { + const newPalette = extend(muiTheme.baseTheme.palette, palette); + return getMuiTheme(update(muiTheme.baseTheme, {palette: {$set: newPalette}})); + }, + modifyRawThemeFontFamily(muiTheme, fontFamily) { + return getMuiTheme(update(muiTheme.baseTheme, {fontFamily: {$set: fontFamily}})); + }, }, -}; + 'material-ui/lib/styles/theme-manager', + 'material-ui/lib/styles/themeManager' +); From 5d822a2c42cef4471a19307b95e7b4132f6745a6 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Fri, 18 Dec 2015 21:02:06 +0330 Subject: [PATCH 04/70] migrate divider to use the new theme standard --- src/divider.jsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/divider.jsx b/src/divider.jsx index 8caa21083d8fd5..864de50e072e95 100644 --- a/src/divider.jsx +++ b/src/divider.jsx @@ -3,6 +3,11 @@ import muiThemeable from './muiThemeable'; import styleUtils from './utils/styles'; const propTypes = { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + /** * CSS class that will be added to the divider's root element */ @@ -23,7 +28,7 @@ const defaultProps = { inset: false, }; -let Divider = ({inset, muiTheme, style, ...other}) => { +let Divider = ({inset, _muiTheme, style, ...other}) => { const styles = { root: { margin: 0, @@ -31,12 +36,12 @@ let Divider = ({inset, muiTheme, style, ...other}) => { marginLeft: inset ? 72 : 0, height: 1, border: 'none', - backgroundColor: muiTheme.rawTheme.palette.borderColor, + backgroundColor: _muiTheme.baseTheme.palette.borderColor, }, }; return ( -
+
); }; From e749b297670b04cf138d56cae8bf34cb8bd77977 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Fri, 18 Dec 2015 21:03:46 +0330 Subject: [PATCH 05/70] migrate dialog to use the new theme standard --- src/Dialog/Dialog.jsx | 161 ++++++++ src/Dialog/DialogInline.jsx | 352 ++++++++++++++++ src/Dialog/DialogTransitionItem.jsx | 63 +++ src/Dialog/index.js | 3 + src/dialog.jsx | 607 +--------------------------- 5 files changed, 580 insertions(+), 606 deletions(-) create mode 100644 src/Dialog/Dialog.jsx create mode 100644 src/Dialog/DialogInline.jsx create mode 100644 src/Dialog/DialogTransitionItem.jsx create mode 100644 src/Dialog/index.js diff --git a/src/Dialog/Dialog.jsx b/src/Dialog/Dialog.jsx new file mode 100644 index 00000000000000..c47b205690e4eb --- /dev/null +++ b/src/Dialog/Dialog.jsx @@ -0,0 +1,161 @@ +import React from 'react'; +import RenderToLayer from '../render-to-layer'; +import muiThemeable from '../muiThemeable'; +import deprecated from '../utils/deprecatedPropType'; +import DialogInline from './DialogInline'; + +let Dialog = React.createClass({ + + propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + + /** + * The `ref` of the action to focus on when the `Dialog` is displayed. + */ + actionFocus: deprecated(React.PropTypes.string, + 'Instead, use a custom `actions` property.'), + + /** + * This prop can be either a JSON object containing the actions to render (This is **DEPRECATED**), + * a react elements, or an array of react elements. + */ + actions: React.PropTypes.node, + + /** + * The `className` to add to the actions container's root element. + */ + actionsContainerClassName: React.PropTypes.string, + + /** + * Overrides the inline-styles of the actions container's root element. + */ + actionsContainerStyle: React.PropTypes.object, + + /** + * If set to true, the height of the `Dialog` will be auto detected. A max height + * will be enforced so that the content does not extend beyond the viewport. + */ + autoDetectWindowHeight: React.PropTypes.bool, + + /** + * If set to true, the body content of the `Dialog` will be scrollable. + */ + autoScrollBodyContent: React.PropTypes.bool, + + /** + * The `className` to add to the content's root element under the title. + */ + bodyClassName: React.PropTypes.string, + + /** + * Overrides the inline-styles of the content's root element under the title. + */ + bodyStyle: React.PropTypes.object, + + /** + * The contents of the `Dialog`. + */ + children: React.PropTypes.node, + + /** + * The css class name of the root element. + */ + className: React.PropTypes.string, + + /** + * The `className` to add to the content container. + */ + contentClassName: React.PropTypes.string, + + /** + * Overrides the inline-styles of the content container. + */ + contentStyle: React.PropTypes.object, + + /** + * Force the user to use one of the actions in the `Dialog`. + * Clicking outside the `Dialog` will not trigger the `onRequestClose`. + */ + modal: React.PropTypes.bool, + + /** + * Fired when the `Dialog is requested to be closed by a click outside the `Dialog` or on the buttons. + */ + onRequestClose: React.PropTypes.func, + + /** + * Controls whether the Dialog is opened or not. + */ + open: React.PropTypes.bool.isRequired, + + /** + * The `className` to add to the `Overlay` component that is rendered behind the `Dialog`. + */ + overlayClassName: React.PropTypes.string, + + /** + * Overrides the inline-styles of the `Overlay` component that is rendered behind the `Dialog`. + */ + overlayStyle: React.PropTypes.object, + + /** + * Determines whether the `Dialog` should be repositioned when it's contents are updated. + */ + repositionOnUpdate: React.PropTypes.bool, + + /** + * Override the inline-styles of the root element. + */ + style: React.PropTypes.object, + + /** + * The title to display on the `Dialog`. Could be number, string, element or an array containing these types. + */ + title: React.PropTypes.node, + + /** + * The `className` to add to the title's root container element. + */ + titleClassName: React.PropTypes.string, + + /** + * Overrides the inline-styles of the title's root container element. + */ + titleStyle: React.PropTypes.object, + + /** + * Changes the width of the `Dialog`. + */ + width: React.PropTypes.any, + }, + + getDefaultProps() { + return { + autoDetectWindowHeight: true, + autoScrollBodyContent: false, + modal: false, + repositionOnUpdate: true, + width: '75%', + }; + }, + + render() { + return ( + + ); + }, + + renderLayer() { + return ( + + ); + }, + +}); + +Dialog = muiThemeable(Dialog); + +export default Dialog; diff --git a/src/Dialog/DialogInline.jsx b/src/Dialog/DialogInline.jsx new file mode 100644 index 00000000000000..0c6c8afe00f6f1 --- /dev/null +++ b/src/Dialog/DialogInline.jsx @@ -0,0 +1,352 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import ReactTransitionGroup from 'react-addons-transition-group'; +import WindowListenable from '../mixins/window-listenable'; +import KeyCode from '../utils/key-code'; +import Transitions from '../styles/transitions'; +import FlatButton from '../flat-button'; +import Overlay from '../overlay'; +import Paper from '../paper'; +import styleUtils from '../utils/styles'; +import warning from 'warning'; +import DialogTransitionItem from './DialogTransitionItem'; + +const DialogInline = React.createClass({ + + mixins: [WindowListenable], + + propTypes: { + _muiTheme: React.PropTypes.object.isRequired, + actionFocus: React.PropTypes.string, + actions: React.PropTypes.node, + actionsContainerClassName: React.PropTypes.string, + actionsContainerStyle: React.PropTypes.object, + autoDetectWindowHeight: React.PropTypes.bool, + autoScrollBodyContent: React.PropTypes.bool, + bodyClassName: React.PropTypes.string, + bodyStyle: React.PropTypes.object, + children: React.PropTypes.node, + className: React.PropTypes.string, + contentClassName: React.PropTypes.string, + contentStyle: React.PropTypes.object, + modal: React.PropTypes.bool, + onRequestClose: React.PropTypes.func, + open: React.PropTypes.bool.isRequired, + overlayClassName: React.PropTypes.string, + overlayStyle: React.PropTypes.object, + repositionOnUpdate: React.PropTypes.bool, + style: React.PropTypes.object, + title: React.PropTypes.node, + titleClassName: React.PropTypes.string, + titleStyle: React.PropTypes.object, + width: React.PropTypes.any, + }, + + windowListeners: { + keyup: '_handleWindowKeyUp', + resize: '_handleResize', + }, + + componentDidMount() { + this._positionDialog(); + }, + + componentDidUpdate() { + this._positionDialog(); + }, + + getStyles() { + const { + _muiTheme, + autoScrollBodyContent, + open, + width, + } = this.props; + + const baseTheme = _muiTheme.baseTheme; + const spacing = baseTheme.spacing; + const gutter = spacing.desktopGutter; + + return { + root: { + position: 'fixed', + boxSizing: 'border-box', + WebkitTapHighlightColor: 'rgba(0,0,0,0)', + zIndex: _muiTheme.zIndex.dialog, + top: 0, + left: open ? 0 : -10000, + width: '100%', + height: '100%', + transition: open + ? Transitions.easeOut('0ms', 'left', '0ms') + : Transitions.easeOut('0ms', 'left', '450ms'), + }, + content: { + boxSizing: 'border-box', + WebkitTapHighlightColor: 'rgba(0,0,0,0)', + transition: Transitions.easeOut(), + position: 'relative', + width: width, + maxWidth: spacing.desktopKeylineIncrement * 12, + margin: '0 auto', + zIndex: _muiTheme.zIndex.dialog, + }, + body: { + padding: gutter, + overflowY: autoScrollBodyContent ? 'auto' : 'hidden', + overflowX: 'hidden', + }, + actionsContainer: { + boxSizing: 'border-box', + WebkitTapHighlightColor: 'rgba(0,0,0,0)', + padding: 8, + marginBottom: 8, + width: '100%', + textAlign: 'right', + }, + paper: { + background: baseTheme.palette.canvasColor, + }, + overlay: { + zIndex: _muiTheme.zIndex.dialogOverlay, + }, + title: { + margin: 0, + padding: `${gutter}px ${gutter}px 0 ${gutter}px`, + color: baseTheme.palette.textColor, + fontSize: 24, + lineHeight: '32px', + fontWeight: 400, + }, + }; + }, + + render() { + const { + _muiTheme, + actions, + actionsContainerClassName, + actionsContainerStyle, + bodyClassName, + bodyStyle, + children, + className, + contentClassName, + contentStyle, + overlayClassName, + overlayStyle, + open, + titleClassName, + titleStyle, + title, + style, + } = this.props; + + const styles = this.getStyles(); + + styles.root = styleUtils.merge(styles.root, style); + styles.content = styleUtils.merge(styles.content, contentStyle); + styles.body = styleUtils.merge(styles.body, bodyStyle); + styles.actionsContainer = styleUtils.merge(styles.actionsContainer, actionsContainerStyle); + styles.overlay = styleUtils.merge(styles.overlay, overlayStyle); + styles.title = styleUtils.merge(styles.title, titleStyle); + + const actionsContainer = this._getActionsContainer(actions, styles.actionsContainer, actionsContainerClassName); + + const titleElement = typeof title === 'string' + ?

{title}

+ : title; + + return ( +
+ + {open && + + + {titleElement} +
+ {children} +
+ {actionsContainer} + + } + + +
+ ); + }, + + _getAction(actionJSON) { + warning(false, `using actionsJSON is deprecated on Dialog, please provide an array of + buttons, or any other components instead. For more information please refer to documentations.`); + const props = { + secondary: true, + onClick: actionJSON.onClick, + onTouchTap: () => { + if (actionJSON.onTouchTap) { + actionJSON.onTouchTap.call(undefined); + } + if (!(actionJSON.onClick || actionJSON.onTouchTap)) { + this._requestClose(true); + } + }, + label: actionJSON.text, + style: { + marginRight: 8, + }, + }; + + if (actionJSON.ref) { + props.ref = actionJSON.ref; + props.keyboardFocused = actionJSON.ref === this.props.actionFocus; + } + if (actionJSON.id) { + props.id = actionJSON.id; + } + + return ( + + ); + }, + + _getActionObjects(actions) { + const actionObjects = []; + + // ------- Replace this selction with: + // + // React.Children.forEach(actions, action => { + // if (React.isValidElement(action)) { + // actionObjects.push(action); + // } + // }); + // + // Also the return element will not need a call to React.Children.toArray + // + // for the 0.15.0 release + + if (actions) { + + if (React.isValidElement(actions)) { + actionObjects.push(actions); + } else { + actions.forEach(action => { + if (action) { + if (!React.isValidElement(action)) { + action = this._getAction(action); + } + actionObjects.push(action); + } + }); + } + } + + // ------- End of section + + return actionObjects; + }, + + _getActionsContainer(actions, styles, className) { + const actionObjects = this._getActionObjects(actions); + + return actionObjects.length > 0 && ( +
+ {React.Children.toArray(actionObjects)} +
+ ); + }, + + _positionDialog() { + const { + actions, + autoDetectWindowHeight, + autoScrollBodyContent, + bodyStyle, + open, + repositionOnUpdate, + title, + } = this.props; + + if (!open) { + return; + } + + const clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; + const container = ReactDOM.findDOMNode(this); + const dialogWindow = ReactDOM.findDOMNode(this.refs.dialogWindow); + const dialogContent = ReactDOM.findDOMNode(this.refs.dialogContent); + const minPaddingTop = 16; + + //Reset the height in case the window was resized. + dialogWindow.style.height = ''; + dialogContent.style.height = ''; + + const dialogWindowHeight = dialogWindow.offsetHeight; + let paddingTop = ((clientHeight - dialogWindowHeight) / 2) - 64; + if (paddingTop < minPaddingTop) paddingTop = minPaddingTop; + + //Vertically center the dialog window, but make sure it doesn't + //transition to that position. + if (repositionOnUpdate || !container.style.paddingTop) { + container.style.paddingTop = paddingTop + 'px'; + } + + // Force a height if the dialog is taller than clientHeight + if (autoDetectWindowHeight || autoScrollBodyContent) { + const styles = this.getStyles(); + styles.body = styleUtils.merge(styles.body, bodyStyle); + let maxDialogContentHeight = clientHeight - 2 * (styles.body.padding + 64); + + if (title) maxDialogContentHeight -= dialogContent.previousSibling.offsetHeight; + + const hasActions = this._getActionObjects(actions).length > 0; + if (hasActions) maxDialogContentHeight -= dialogContent.nextSibling.offsetHeight; + + dialogContent.style.maxHeight = maxDialogContentHeight + 'px'; + } + }, + + _requestClose(buttonClicked) { + + if (!buttonClicked && this.props.modal) { + return; + } + + if (this.props.onRequestClose) { + this.props.onRequestClose(!!buttonClicked); + } + }, + + _handleOverlayTouchTap() { + this._requestClose(false); + }, + + _handleWindowKeyUp(event) { + if (event.keyCode === KeyCode.ESC) { + this._requestClose(false); + } + }, + + _handleResize() { + if (this.props.open) { + this._positionDialog(); + } + }, + +}); + +export default DialogInline; diff --git a/src/Dialog/DialogTransitionItem.jsx b/src/Dialog/DialogTransitionItem.jsx new file mode 100644 index 00000000000000..3c2cca7d51bc19 --- /dev/null +++ b/src/Dialog/DialogTransitionItem.jsx @@ -0,0 +1,63 @@ +import React from 'react'; +import styleUtils from '../utils/styles'; + +const DialogTransitionItem = React.createClass({ + propTypes: { + _muiTheme: React.PropTypes.object.isRequired, + children: React.PropTypes.node, + style: React.PropTypes.object, + }, + + getInitialState() { + return { + style: {}, + }; + }, + + componentWillEnter(callback) { + this.componentWillAppear(callback); + }, + + componentWillAppear(callback) { + const spacing = this.props._muiTheme.baseTheme.spacing; + + this.setState({ + style: { + opacity: 1, + transform: 'translate3d(0, ' + spacing.desktopKeylineIncrement + 'px, 0)', + }, + }); + + setTimeout(callback, 450); // matches transition duration + }, + + componentWillLeave(callback) { + this.setState({ + style: { + opacity: 0, + transform: 'translate3d(0, 0, 0)', + }, + }); + + setTimeout(() => { // TODO: remove isMounted with cancellation + if (this.isMounted()) callback(); + }, 450); // matches transition duration + }, + + render() { + const { + _muiTheme, + children, + style, + ...other, + } = this.props; + + return ( +
+ {children} +
+ ); + }, +}); + +export default DialogTransitionItem; diff --git a/src/Dialog/index.js b/src/Dialog/index.js new file mode 100644 index 00000000000000..d0a54d2eecda38 --- /dev/null +++ b/src/Dialog/index.js @@ -0,0 +1,3 @@ +import Dialog from './Dialog'; + +export default Dialog; diff --git a/src/dialog.jsx b/src/dialog.jsx index ba3b8704081a65..2e8c2372647c3b 100644 --- a/src/dialog.jsx +++ b/src/dialog.jsx @@ -1,608 +1,3 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import WindowListenable from './mixins/window-listenable'; -import KeyCode from './utils/key-code'; -import Transitions from './styles/transitions'; -import StylePropable from './mixins/style-propable'; -import FlatButton from './flat-button'; -import Overlay from './overlay'; -import RenderToLayer from './render-to-layer'; -import Paper from './paper'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; -import warning from 'warning'; -import deprecated from './utils/deprecatedPropType'; - -import ReactTransitionGroup from 'react-addons-transition-group'; - -const TransitionItem = React.createClass({ - mixins: [StylePropable], - - propTypes: { - children: React.PropTypes.node, - style: React.PropTypes.object, - }, - - 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) { - const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - this.setState({muiTheme: newMuiTheme}); - }, - - componentWillEnter(callback) { - this.componentWillAppear(callback); - }, - - componentWillAppear(callback) { - const spacing = this.state.muiTheme.rawTheme.spacing; - - this.setState({ - style: { - opacity: 1, - transform: 'translate3d(0, ' + spacing.desktopKeylineIncrement + 'px, 0)', - }, - }); - - setTimeout(callback, 450); // matches transition duration - }, - - componentWillLeave(callback) { - this.setState({ - style: { - opacity: 0, - transform: 'translate3d(0, 0, 0)', - }, - }); - - setTimeout(() => { - if (this.isMounted()) callback(); - }, 450); // matches transition duration - }, - - render() { - const { - style, - children, - ...other, - } = this.props; - - return ( -
- {children} -
- ); - }, -}); - -const DialogInline = React.createClass({ - - mixins: [WindowListenable, StylePropable], - - contextTypes: { - muiTheme: React.PropTypes.object, - }, - - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - - propTypes: { - actionFocus: React.PropTypes.string, - actions: React.PropTypes.node, - actionsContainerClassName: React.PropTypes.string, - actionsContainerStyle: React.PropTypes.object, - autoDetectWindowHeight: React.PropTypes.bool, - autoScrollBodyContent: React.PropTypes.bool, - bodyClassName: React.PropTypes.string, - bodyStyle: React.PropTypes.object, - children: React.PropTypes.node, - className: React.PropTypes.string, - contentClassName: React.PropTypes.string, - contentStyle: React.PropTypes.object, - modal: React.PropTypes.bool, - onRequestClose: React.PropTypes.func, - open: React.PropTypes.bool.isRequired, - overlayClassName: React.PropTypes.string, - overlayStyle: React.PropTypes.object, - repositionOnUpdate: React.PropTypes.bool, - style: React.PropTypes.object, - title: React.PropTypes.node, - titleClassName: React.PropTypes.string, - titleStyle: React.PropTypes.object, - width: React.PropTypes.any, - }, - - windowListeners: { - keyup: '_handleWindowKeyUp', - resize: '_handleResize', - }, - - getInitialState() { - return { - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), - }; - }, - - componentWillReceiveProps(nextProps, nextContext) { - const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - this.setState({muiTheme: newMuiTheme}); - }, - - componentDidMount() { - this._positionDialog(); - }, - - componentDidUpdate() { - this._positionDialog(); - }, - - getStyles() { - const { - autoScrollBodyContent, - open, - width, - } = this.props; - - const muiTheme = this.state.muiTheme; - const rawTheme = muiTheme.rawTheme; - const spacing = rawTheme.spacing; - const gutter = spacing.desktopGutter; - - return { - root: { - position: 'fixed', - boxSizing: 'border-box', - WebkitTapHighlightColor: 'rgba(0,0,0,0)', - zIndex: muiTheme.zIndex.dialog, - top: 0, - left: open ? 0 : -10000, - width: '100%', - height: '100%', - transition: open - ? Transitions.easeOut('0ms', 'left', '0ms') - : Transitions.easeOut('0ms', 'left', '450ms'), - }, - content: { - boxSizing: 'border-box', - WebkitTapHighlightColor: 'rgba(0,0,0,0)', - transition: Transitions.easeOut(), - position: 'relative', - width: width, - maxWidth: spacing.desktopKeylineIncrement * 12, - margin: '0 auto', - zIndex: muiTheme.zIndex.dialog, - }, - body: { - padding: spacing.desktopGutter, - overflowY: autoScrollBodyContent ? 'auto' : 'hidden', - overflowX: 'hidden', - }, - actionsContainer: { - boxSizing: 'border-box', - WebkitTapHighlightColor: 'rgba(0,0,0,0)', - padding: 8, - marginBottom: 8, - width: '100%', - textAlign: 'right', - }, - paper: { - background: rawTheme.palette.canvasColor, - }, - overlay: { - zIndex: muiTheme.zIndex.dialogOverlay, - }, - title: { - margin: 0, - padding: `${gutter}px ${gutter}px 0 ${gutter}px`, - color: rawTheme.palette.textColor, - fontSize: 24, - lineHeight: '32px', - fontWeight: 400, - }, - }; - }, - - render() { - const { - actions, - actionsContainerClassName, - actionsContainerStyle, - bodyClassName, - bodyStyle, - children, - className, - contentClassName, - contentStyle, - overlayClassName, - overlayStyle, - open, - titleClassName, - titleStyle, - title, - style, - } = this.props; - - const styles = this.getStyles(); - - styles.root = this.mergeStyles(styles.root, style); - styles.content = this.mergeStyles(styles.content, contentStyle); - styles.body = this.mergeStyles(styles.body, bodyStyle); - styles.actionsContainer = this.mergeStyles(styles.actionsContainer, actionsContainerStyle); - styles.overlay = this.mergeStyles(styles.overlay, overlayStyle); - styles.title = this.mergeStyles(styles.title, titleStyle); - - const actionsContainer = this._getActionsContainer(actions, styles.actionsContainer, actionsContainerClassName); - - const titleElement = typeof title === 'string' - ?

{title}

- : title; - - return ( -
- - {open && - - - {titleElement} -
- {children} -
- {actionsContainer} - - } - - -
- ); - }, - - _getAction(actionJSON) { - warning(false, `using actionsJSON is deprecated on Dialog, please provide an array of - buttons, or any other components instead. For more information please refer to documentations.`); - const props = { - secondary: true, - onClick: actionJSON.onClick, - onTouchTap: () => { - if (actionJSON.onTouchTap) { - actionJSON.onTouchTap.call(undefined); - } - if (!(actionJSON.onClick || actionJSON.onTouchTap)) { - this._requestClose(true); - } - }, - label: actionJSON.text, - style: { - marginRight: 8, - }, - }; - - if (actionJSON.ref) { - props.ref = actionJSON.ref; - props.keyboardFocused = actionJSON.ref === this.props.actionFocus; - } - if (actionJSON.id) { - props.id = actionJSON.id; - } - - return ( - - ); - }, - - _getActionObjects(actions) { - const actionObjects = []; - - // ------- Replace this selction with: - // - // React.Children.forEach(actions, action => { - // if (React.isValidElement(action)) { - // actionObjects.push(action); - // } - // }); - // - // Also the return element will not need a call to React.Children.toArray - // - // for the 0.15.0 release - - if (actions) { - - if (React.isValidElement(actions)) { - actionObjects.push(actions); - } else { - actions.forEach(action => { - if (action) { - if (!React.isValidElement(action)) { - action = this._getAction(action); - } - actionObjects.push(action); - } - }); - } - } - - // ------- End of section - - return actionObjects; - }, - - _getActionsContainer(actions, styles, className) { - const actionObjects = this._getActionObjects(actions); - - return actionObjects.length > 0 && ( -
- {React.Children.toArray(actionObjects)} -
- ); - }, - - _positionDialog() { - const { - actions, - autoDetectWindowHeight, - autoScrollBodyContent, - bodyStyle, - open, - repositionOnUpdate, - title, - } = this.props; - - if (!open) { - return; - } - - const clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; - const container = ReactDOM.findDOMNode(this); - const dialogWindow = ReactDOM.findDOMNode(this.refs.dialogWindow); - const dialogContent = ReactDOM.findDOMNode(this.refs.dialogContent); - const minPaddingTop = 16; - - //Reset the height in case the window was resized. - dialogWindow.style.height = ''; - dialogContent.style.height = ''; - - const dialogWindowHeight = dialogWindow.offsetHeight; - let paddingTop = ((clientHeight - dialogWindowHeight) / 2) - 64; - if (paddingTop < minPaddingTop) paddingTop = minPaddingTop; - - //Vertically center the dialog window, but make sure it doesn't - //transition to that position. - if (repositionOnUpdate || !container.style.paddingTop) { - container.style.paddingTop = paddingTop + 'px'; - } - - // Force a height if the dialog is taller than clientHeight - if (autoDetectWindowHeight || autoScrollBodyContent) { - const styles = this.getStyles(); - styles.body = this.mergeStyles(styles.body, bodyStyle); - let maxDialogContentHeight = clientHeight - 2 * (styles.body.padding + 64); - - if (title) maxDialogContentHeight -= dialogContent.previousSibling.offsetHeight; - - const hasActions = this._getActionObjects(actions).length > 0; - if (hasActions) maxDialogContentHeight -= dialogContent.nextSibling.offsetHeight; - - dialogContent.style.maxHeight = maxDialogContentHeight + 'px'; - } - }, - - _requestClose(buttonClicked) { - - if (!buttonClicked && this.props.modal) { - return; - } - - if (this.props.onRequestClose) { - this.props.onRequestClose(!!buttonClicked); - } - }, - - _handleOverlayTouchTap() { - this._requestClose(false); - }, - - _handleWindowKeyUp(event) { - if (event.keyCode === KeyCode.ESC) { - this._requestClose(false); - } - }, - - _handleResize() { - if (this.props.open) { - this._positionDialog(); - } - }, - -}); - -const Dialog = React.createClass({ - - propTypes: { - /** - * The `ref` of the action to focus on when the `Dialog` is displayed. - */ - actionFocus: deprecated(React.PropTypes.string, - 'Instead, use a custom `actions` property.'), - - /** - * This prop can be either a JSON object containing the actions to render (This is **DEPRECATED**), - * a react elements, or an array of react elements. - */ - actions: React.PropTypes.node, - - /** - * The `className` to add to the actions container's root element. - */ - actionsContainerClassName: React.PropTypes.string, - - /** - * Overrides the inline-styles of the actions container's root element. - */ - actionsContainerStyle: React.PropTypes.object, - - /** - * If set to true, the height of the `Dialog` will be auto detected. A max height - * will be enforced so that the content does not extend beyond the viewport. - */ - autoDetectWindowHeight: React.PropTypes.bool, - - /** - * If set to true, the body content of the `Dialog` will be scrollable. - */ - autoScrollBodyContent: React.PropTypes.bool, - - /** - * The `className` to add to the content's root element under the title. - */ - bodyClassName: React.PropTypes.string, - - /** - * Overrides the inline-styles of the content's root element under the title. - */ - bodyStyle: React.PropTypes.object, - - /** - * The contents of the `Dialog`. - */ - children: React.PropTypes.node, - - /** - * The css class name of the root element. - */ - className: React.PropTypes.string, - - /** - * The `className` to add to the content container. - */ - contentClassName: React.PropTypes.string, - - /** - * Overrides the inline-styles of the content container. - */ - contentStyle: React.PropTypes.object, - - /** - * Force the user to use one of the actions in the `Dialog`. - * Clicking outside the `Dialog` will not trigger the `onRequestClose`. - */ - modal: React.PropTypes.bool, - - /** - * Fired when the `Dialog is requested to be closed by a click outside the `Dialog` or on the buttons. - */ - onRequestClose: React.PropTypes.func, - - /** - * Controls whether the Dialog is opened or not. - */ - open: React.PropTypes.bool.isRequired, - - /** - * The `className` to add to the `Overlay` component that is rendered behind the `Dialog`. - */ - overlayClassName: React.PropTypes.string, - - /** - * Overrides the inline-styles of the `Overlay` component that is rendered behind the `Dialog`. - */ - overlayStyle: React.PropTypes.object, - - /** - * Determines whether the `Dialog` should be repositioned when it's contents are updated. - */ - repositionOnUpdate: React.PropTypes.bool, - - /** - * Override the inline-styles of the root element. - */ - style: React.PropTypes.object, - - /** - * The title to display on the `Dialog`. Could be number, string, element or an array containing these types. - */ - title: React.PropTypes.node, - - /** - * The `className` to add to the title's root container element. - */ - titleClassName: React.PropTypes.string, - - /** - * Overrides the inline-styles of the title's root container element. - */ - titleStyle: React.PropTypes.object, - - /** - * Changes the width of the `Dialog`. - */ - width: React.PropTypes.any, - }, - - getDefaultProps() { - return { - autoDetectWindowHeight: true, - autoScrollBodyContent: false, - modal: false, - repositionOnUpdate: true, - width: '75%', - }; - }, - - render() { - return ( - - ); - }, - - renderLayer() { - return ( - - ); - }, - -}); +import Dialog from './Dialog/'; export default Dialog; From e7302ddaca4f029ee7f1449b7898cdb716082139 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sat, 19 Dec 2015 03:54:41 +0330 Subject: [PATCH 06/70] migrate DropDownMenu to use the new theme standard --- src/DropDownMenu/DropDownMenu.jsx | 52 +++++++++++-------------------- 1 file changed, 18 insertions(+), 34 deletions(-) diff --git a/src/DropDownMenu/DropDownMenu.jsx b/src/DropDownMenu/DropDownMenu.jsx index 16455bf666c989..4a0208ac4899a9 100644 --- a/src/DropDownMenu/DropDownMenu.jsx +++ b/src/DropDownMenu/DropDownMenu.jsx @@ -3,36 +3,22 @@ import Transitions from '../styles/transitions'; import DropDownArrow from '../svg-icons/navigation/arrow-drop-down'; import Menu from '../menus/menu'; import MenuItem from '../menus/menu-item'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; import ClearFix from '../clearfix'; -import ThemeManager from '../styles/theme-manager'; import Popover from '../popover/popover'; import PopoverAnimationFromTop from '../popover/popover-animation-from-top'; import styleUtils from '../utils/styles'; +import muiThemeable from '../muiThemeable'; import warning from 'warning'; import deprecated from '../utils/deprecatedPropType'; -const DropDownMenu = React.createClass({ +let DropDownMenu = 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, - }; - }, - - // 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. propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + /** * The width will automatically be set according to the items inside the menu. * To control this width in css instead, set this prop to false. @@ -153,7 +139,6 @@ const DropDownMenu = React.createClass({ return { open: this.props.openImmediately, selectedIndex: this._isControlled() ? null : (this.props.selectedIndex || 0), - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, @@ -162,10 +147,7 @@ const DropDownMenu = React.createClass({ if (this.props.hasOwnProperty('selectedIndex')) this._setSelectedIndex(this.props.selectedIndex); }, - componentWillReceiveProps(nextProps, nextContext) { - const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - this.setState({muiTheme: newMuiTheme}); - + componentWillReceiveProps(nextProps) { if (this.props.autoWidth) this._setWidth(); if (nextProps.hasOwnProperty('value') || nextProps.hasOwnProperty('valueLink')) { return; @@ -176,10 +158,10 @@ const DropDownMenu = React.createClass({ }, getStyles() { - const {disabled} = this.props; - const spacing = this.state.muiTheme.rawTheme.spacing; - const palette = this.state.muiTheme.rawTheme.palette; - const accentColor = this.state.muiTheme.dropDownMenu.accentColor; + const {_muiTheme, disabled} = this.props; + const spacing = _muiTheme.rawTheme.spacing; + const palette = _muiTheme.rawTheme.palette; + const accentColor = _muiTheme.dropDownMenu.accentColor; return { control: { cursor: disabled ? 'not-allowed' : 'pointer', @@ -243,6 +225,7 @@ const DropDownMenu = React.createClass({ render() { const { + _muiTheme, autoWidth, children, className, @@ -263,7 +246,6 @@ const DropDownMenu = React.createClass({ const { anchorEl, open, - muiTheme, } = this.state; const styles = this.getStyles(); @@ -331,14 +313,14 @@ const DropDownMenu = React.createClass({ {...other} ref="root" className={className} - style={styleUtils.prepareStyles(muiTheme, styles.root, open && styles.rootWhenOpen, style)} + style={styleUtils.prepareStyles(_muiTheme, styles.root, open && styles.rootWhenOpen, style)} > -
+
{displayValue}
-
+
Date: Sat, 19 Dec 2015 23:59:21 +0330 Subject: [PATCH 07/70] partially migrate docs to adhere to the new naming strategy --- docs/src/app/app-routes.jsx | 23 ++++--- .../app/components/Card/ExampleWithAvatar.jsx | 41 ------------ .../components/Card/ExampleWithoutAvatar.jsx | 37 ----------- .../CodeBlock.jsx} | 0 .../index.jsx} | 64 +++++-------------- ...ile-tear-sheet.jsx => MobileTearSheet.jsx} | 0 .../components}/AppBar/ExampleIcon.jsx | 0 .../components}/AppBar/ExampleIconButton.jsx | 0 .../components}/AppBar/ExampleIconMenu.jsx | 0 .../{ => pages/components}/AppBar/README.md | 0 .../pages/components/AppBar/index.jsx | 33 ++++++++++ .../components}/Avatar/ExampleSimple.jsx | 0 .../{ => pages/components}/Avatar/README.md | 0 .../{avatar.jsx => Avatar/index.jsx} | 12 ++-- .../components}/Badge/ExampleContent.jsx | 0 .../components}/Badge/ExampleSimple.jsx | 0 .../{ => pages/components}/Badge/README.md | 0 .../pages/components/Badge/index.jsx | 27 ++++++++ .../components/Cards/ExampleWithAvatar.jsx | 38 +++++++++++ .../components/Cards/ExampleWithoutAvatar.jsx | 34 ++++++++++ .../components/Cards}/README.md | 9 +-- .../pages/components/Cards/index.jsx | 27 ++++++++ .../components}/Dialog/ExampleModal.jsx | 0 .../components}/Dialog/ExampleSimple.jsx | 0 .../{ => pages/components}/Dialog/README.md | 0 .../pages/components/Dialog/index.jsx | 27 ++++++++ .../components}/Divider/ExampleForm.jsx | 0 .../components}/Divider/ExampleList.jsx | 2 +- .../components}/Divider/ExampleMenu.jsx | 0 .../{ => pages/components}/Divider/README.md | 0 .../pages/components/Divider/index.jsx | 32 ++++++++++ .../index.jsx} | 20 +++--- .../components}/LeftNav/ExampleOpenRight.jsx | 0 .../components}/LeftNav/ExampleSimple.jsx | 0 .../components}/LeftNav/ExampleUndocked.jsx | 0 .../{ => pages/components}/LeftNav/README.md | 0 .../pages/components/LeftNav/index.jsx | 32 ++++++++++ .../components}/Snackbar/ExampleSimple.jsx | 0 .../components}/Snackbar/ExampleTwice.jsx | 0 .../{ => pages/components}/Snackbar/README.md | 0 .../pages/components/Snackbar/index.jsx | 27 ++++++++ .../components}/Tabs/ExampleControlled.jsx | 0 .../components}/Tabs/ExampleSimple.jsx | 0 .../components}/Tabs/ExampleSwipeable.jsx | 0 .../{ => pages/components}/Tabs/README.md | 0 .../{ => pages/components}/Tabs/Tab.md | 0 .../{ => pages/components}/Tabs/Tabs.md | 0 .../components/{tabs.jsx => Tabs/index.jsx} | 24 +++---- .../components}/Toolbars/ExampleSimple.jsx | 2 +- .../{ => pages/components}/Toolbars/README.md | 0 .../components}/Toolbars/Toolbar.md | 0 .../components}/Toolbars/ToolbarGroup.md | 0 .../components}/Toolbars/ToolbarSeparator.md | 0 .../components}/Toolbars/ToolbarTitle.md | 0 .../{toolbars.jsx => Toolbars/index.jsx} | 20 +++--- .../components/pages/components/app-bar.jsx | 37 ----------- .../pages/components/auto-complete.jsx | 2 +- .../app/components/pages/components/badge.jsx | 27 -------- .../components/pages/components/buttons.jsx | 4 +- .../app/components/pages/components/cards.jsx | 32 ---------- .../pages/components/date-picker.jsx | 4 +- .../components/pages/components/dialog.jsx | 27 -------- .../components/pages/components/divider.jsx | 32 ---------- .../components/pages/components/grid-list.jsx | 4 +- .../pages/components/icon-buttons.jsx | 4 +- .../pages/components/icon-menus.jsx | 4 +- .../app/components/pages/components/icons.jsx | 4 +- .../components/pages/components/left-nav.jsx | 32 ---------- .../app/components/pages/components/lists.jsx | 6 +- .../app/components/pages/components/menus.jsx | 4 +- .../app/components/pages/components/paper.jsx | 4 +- .../components/pages/components/popover.jsx | 2 +- .../components/pages/components/progress.jsx | 4 +- .../pages/components/refresh-indicator.jsx | 4 +- .../pages/components/select-fields.jsx | 4 +- .../components/pages/components/sliders.jsx | 4 +- .../components/pages/components/snackbar.jsx | 27 -------- .../components/pages/components/switches.jsx | 4 +- .../app/components/pages/components/table.jsx | 4 +- .../pages/components/text-fields.jsx | 4 +- .../pages/components/time-picker.jsx | 4 +- .../pages/customization/inline-styles.jsx | 2 +- .../components/pages/customization/themes.jsx | 2 +- .../pages/get-started/installation.jsx | 2 +- src/card/card.jsx | 16 ++--- 85 files changed, 397 insertions(+), 444 deletions(-) delete mode 100644 docs/src/app/components/Card/ExampleWithAvatar.jsx delete mode 100644 docs/src/app/components/Card/ExampleWithoutAvatar.jsx rename docs/src/app/components/{code-example/code-block.jsx => CodeExample/CodeBlock.jsx} (100%) rename docs/src/app/components/{code-example/code-example.jsx => CodeExample/index.jsx} (50%) rename docs/src/app/components/{mobile-tear-sheet.jsx => MobileTearSheet.jsx} (100%) rename docs/src/app/components/{ => pages/components}/AppBar/ExampleIcon.jsx (100%) rename docs/src/app/components/{ => pages/components}/AppBar/ExampleIconButton.jsx (100%) rename docs/src/app/components/{ => pages/components}/AppBar/ExampleIconMenu.jsx (100%) rename docs/src/app/components/{ => pages/components}/AppBar/README.md (100%) create mode 100644 docs/src/app/components/pages/components/AppBar/index.jsx rename docs/src/app/components/{ => pages/components}/Avatar/ExampleSimple.jsx (100%) rename docs/src/app/components/{ => pages/components}/Avatar/README.md (100%) rename docs/src/app/components/pages/components/{avatar.jsx => Avatar/index.jsx} (53%) rename docs/src/app/components/{ => pages/components}/Badge/ExampleContent.jsx (100%) rename docs/src/app/components/{ => pages/components}/Badge/ExampleSimple.jsx (100%) rename docs/src/app/components/{ => pages/components}/Badge/README.md (100%) create mode 100644 docs/src/app/components/pages/components/Badge/index.jsx create mode 100644 docs/src/app/components/pages/components/Cards/ExampleWithAvatar.jsx create mode 100644 docs/src/app/components/pages/components/Cards/ExampleWithoutAvatar.jsx rename docs/src/app/components/{Card => pages/components/Cards}/README.md (73%) create mode 100644 docs/src/app/components/pages/components/Cards/index.jsx rename docs/src/app/components/{ => pages/components}/Dialog/ExampleModal.jsx (100%) rename docs/src/app/components/{ => pages/components}/Dialog/ExampleSimple.jsx (100%) rename docs/src/app/components/{ => pages/components}/Dialog/README.md (100%) create mode 100644 docs/src/app/components/pages/components/Dialog/index.jsx rename docs/src/app/components/{ => pages/components}/Divider/ExampleForm.jsx (100%) rename docs/src/app/components/{ => pages/components}/Divider/ExampleList.jsx (92%) rename docs/src/app/components/{ => pages/components}/Divider/ExampleMenu.jsx (100%) rename docs/src/app/components/{ => pages/components}/Divider/README.md (100%) create mode 100644 docs/src/app/components/pages/components/Divider/index.jsx rename docs/src/app/components/pages/components/{drop-down-menu.jsx => DropDownMenu/index.jsx} (50%) rename docs/src/app/components/{ => pages/components}/LeftNav/ExampleOpenRight.jsx (100%) rename docs/src/app/components/{ => pages/components}/LeftNav/ExampleSimple.jsx (100%) rename docs/src/app/components/{ => pages/components}/LeftNav/ExampleUndocked.jsx (100%) rename docs/src/app/components/{ => pages/components}/LeftNav/README.md (100%) create mode 100644 docs/src/app/components/pages/components/LeftNav/index.jsx rename docs/src/app/components/{ => pages/components}/Snackbar/ExampleSimple.jsx (100%) rename docs/src/app/components/{ => pages/components}/Snackbar/ExampleTwice.jsx (100%) rename docs/src/app/components/{ => pages/components}/Snackbar/README.md (100%) create mode 100644 docs/src/app/components/pages/components/Snackbar/index.jsx rename docs/src/app/components/{ => pages/components}/Tabs/ExampleControlled.jsx (100%) rename docs/src/app/components/{ => pages/components}/Tabs/ExampleSimple.jsx (100%) rename docs/src/app/components/{ => pages/components}/Tabs/ExampleSwipeable.jsx (100%) rename docs/src/app/components/{ => pages/components}/Tabs/README.md (100%) rename docs/src/app/components/{ => pages/components}/Tabs/Tab.md (100%) rename docs/src/app/components/{ => pages/components}/Tabs/Tabs.md (100%) rename docs/src/app/components/pages/components/{tabs.jsx => Tabs/index.jsx} (51%) rename docs/src/app/components/{ => pages/components}/Toolbars/ExampleSimple.jsx (97%) rename docs/src/app/components/{ => pages/components}/Toolbars/README.md (100%) rename docs/src/app/components/{ => pages/components}/Toolbars/Toolbar.md (100%) rename docs/src/app/components/{ => pages/components}/Toolbars/ToolbarGroup.md (100%) rename docs/src/app/components/{ => pages/components}/Toolbars/ToolbarSeparator.md (100%) rename docs/src/app/components/{ => pages/components}/Toolbars/ToolbarTitle.md (100%) rename docs/src/app/components/pages/components/{toolbars.jsx => Toolbars/index.jsx} (61%) delete mode 100644 docs/src/app/components/pages/components/app-bar.jsx delete mode 100644 docs/src/app/components/pages/components/badge.jsx delete mode 100644 docs/src/app/components/pages/components/cards.jsx delete mode 100644 docs/src/app/components/pages/components/dialog.jsx delete mode 100644 docs/src/app/components/pages/components/divider.jsx delete mode 100644 docs/src/app/components/pages/components/left-nav.jsx delete mode 100644 docs/src/app/components/pages/components/snackbar.jsx diff --git a/docs/src/app/app-routes.jsx b/docs/src/app/app-routes.jsx index 9c5891157373fc..9e97db14b301d0 100644 --- a/docs/src/app/app-routes.jsx +++ b/docs/src/app/app-routes.jsx @@ -20,21 +20,21 @@ import Themes from './components/pages/customization/themes'; import InlineStyles from './components/pages/customization/inline-styles'; import Components from './components/pages/components'; -import AppBar from './components/pages/components/app-bar'; +import AppBar from './components/pages/components/AppBar'; import AutoComplete from './components/pages/components/auto-complete'; -import Avatar from './components/pages/components/avatar'; -import Badge from './components/pages/components/badge'; +import Avatar from './components/pages/components/Avatar'; +import Badge from './components/pages/components/Badge'; import Buttons from './components/pages/components/buttons'; -import Cards from './components/pages/components/cards'; +import Cards from './components/pages/components/Cards'; import DatePicker from './components/pages/components/date-picker'; -import Dialog from './components/pages/components/dialog'; -import Divider from './components/pages/components/divider'; -import DropDownMenu from './components/pages/components/drop-down-menu'; +import Dialog from './components/pages/components/Dialog'; +import Divider from './components/pages/components/Divider'; +import DropDownMenu from './components/pages/components/DropDownMenu'; import GridList from './components/pages/components/grid-list'; import Icons from './components/pages/components/icons'; import IconButtons from './components/pages/components/icon-buttons'; import IconMenus from './components/pages/components/icon-menus'; -import LeftNav from './components/pages/components/left-nav'; +import LeftNav from './components/pages/components/LeftNav'; import Lists from './components/pages/components/lists'; import Menus from './components/pages/components/menus'; import Paper from './components/pages/components/paper'; @@ -43,14 +43,13 @@ import Progress from './components/pages/components/progress'; import RefreshIndicator from './components/pages/components/refresh-indicator'; import SelectFields from './components/pages/components/select-fields'; import Sliders from './components/pages/components/sliders'; -import Snackbar from './components/pages/components/snackbar'; +import Snackbar from './components/pages/components/Snackbar'; import Switches from './components/pages/components/switches'; import Table from './components/pages/components/table'; -import Tabs from './components/pages/components/tabs'; +import Tabs from './components/pages/components/Tabs'; import TextFields from './components/pages/components/text-fields'; import TimePicker from './components/pages/components/time-picker'; -import Toolbars from './components/pages/components/toolbars'; - +import Toolbars from './components/pages/components/Toolbars'; /** * Routes: https://github.com/rackt/react-router/blob/master/docs/api/components/Route.md diff --git a/docs/src/app/components/Card/ExampleWithAvatar.jsx b/docs/src/app/components/Card/ExampleWithAvatar.jsx deleted file mode 100644 index b24c8a6d609006..00000000000000 --- a/docs/src/app/components/Card/ExampleWithAvatar.jsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import Avatar from 'material-ui/lib/avatar'; -import Card from 'material-ui/lib/card/card'; -import CardActions from 'material-ui/lib/card/card-actions'; -import CardHeader from 'material-ui/lib/card/card-header'; -import CardMedia from 'material-ui/lib/card/card-media'; -import CardTitle from 'material-ui/lib/card/card-title'; -import FlatButton from 'material-ui/lib/flat-button'; -import CardText from 'material-ui/lib/card/card-text'; - -const CardExampleWithAvatar = React.createClass({ - render() { - return ( - - A}/> - - }> - - - - - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi. - Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque. - Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio. - - - ); - }, -}); -export default CardExampleWithAvatar; diff --git a/docs/src/app/components/Card/ExampleWithoutAvatar.jsx b/docs/src/app/components/Card/ExampleWithoutAvatar.jsx deleted file mode 100644 index 205fb138939bb0..00000000000000 --- a/docs/src/app/components/Card/ExampleWithoutAvatar.jsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import Card from 'material-ui/lib/card/card'; -import CardActions from 'material-ui/lib/card/card-actions'; -import CardHeader from 'material-ui/lib/card/card-header'; -import FlatButton from 'material-ui/lib/flat-button'; -import CardText from 'material-ui/lib/card/card-text'; - -const CardExampleWithoutAvatar = React.createClass({ - render() { - return ( - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi. - Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque. - Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio. - - - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi. - Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque. - Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio. - - - ); - }, -}); -export default CardExampleWithoutAvatar; diff --git a/docs/src/app/components/code-example/code-block.jsx b/docs/src/app/components/CodeExample/CodeBlock.jsx similarity index 100% rename from docs/src/app/components/code-example/code-block.jsx rename to docs/src/app/components/CodeExample/CodeBlock.jsx diff --git a/docs/src/app/components/code-example/code-example.jsx b/docs/src/app/components/CodeExample/index.jsx similarity index 50% rename from docs/src/app/components/code-example/code-example.jsx rename to docs/src/app/components/CodeExample/index.jsx index 824b4576a491a1..02c07fc62b13ba 100644 --- a/docs/src/app/components/code-example/code-example.jsx +++ b/docs/src/app/components/CodeExample/index.jsx @@ -1,67 +1,33 @@ import React from 'react'; +import CodeBlock from './CodeBlock'; +import ClearFix from 'material-ui/lib/clearfix'; +import Paper from 'material-ui/lib/paper'; +import Spacing from 'material-ui/lib/styles/spacing'; +import Typography from 'material-ui/lib/styles/typography'; +import muiThemeable from 'material-ui/lib/muiThemeable'; -import { - ClearFix, - Paper, - Styles, -} from 'material-ui'; - -const { - Spacing, - Typography, -} = Styles; - -import CodeBlock from './code-block'; -const ThemeManager = Styles.ThemeManager; -const DefaultRawTheme = Styles.LightRawTheme; - -const CodeExample = React.createClass({ +let CodeExample = React.createClass({ propTypes: { + _muiTheme: React.PropTypes.object.isRequired, children: React.PropTypes.node, code: React.PropTypes.string.isRequired, layoutSideBySide: React.PropTypes.bool, }, - 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}); - }, - render() { - - let { + const { + _muiTheme, children, code, layoutSideBySide, } = this.props; - let palette = this.state.muiTheme.rawTheme.palette; - let borderColor = palette.borderColor; - let canvasColor = palette.canvasColor; + const palette = _muiTheme.baseTheme.palette; + const borderColor = palette.borderColor; + const canvasColor = palette.canvasColor; - let styles = { + const styles = { root: { backgroundColor: canvasColor, marginBottom: 32, @@ -94,4 +60,6 @@ const CodeExample = React.createClass({ }, }); +CodeExample = muiThemeable(CodeExample); + export default CodeExample; diff --git a/docs/src/app/components/mobile-tear-sheet.jsx b/docs/src/app/components/MobileTearSheet.jsx similarity index 100% rename from docs/src/app/components/mobile-tear-sheet.jsx rename to docs/src/app/components/MobileTearSheet.jsx diff --git a/docs/src/app/components/AppBar/ExampleIcon.jsx b/docs/src/app/components/pages/components/AppBar/ExampleIcon.jsx similarity index 100% rename from docs/src/app/components/AppBar/ExampleIcon.jsx rename to docs/src/app/components/pages/components/AppBar/ExampleIcon.jsx diff --git a/docs/src/app/components/AppBar/ExampleIconButton.jsx b/docs/src/app/components/pages/components/AppBar/ExampleIconButton.jsx similarity index 100% rename from docs/src/app/components/AppBar/ExampleIconButton.jsx rename to docs/src/app/components/pages/components/AppBar/ExampleIconButton.jsx diff --git a/docs/src/app/components/AppBar/ExampleIconMenu.jsx b/docs/src/app/components/pages/components/AppBar/ExampleIconMenu.jsx similarity index 100% rename from docs/src/app/components/AppBar/ExampleIconMenu.jsx rename to docs/src/app/components/pages/components/AppBar/ExampleIconMenu.jsx diff --git a/docs/src/app/components/AppBar/README.md b/docs/src/app/components/pages/components/AppBar/README.md similarity index 100% rename from docs/src/app/components/AppBar/README.md rename to docs/src/app/components/pages/components/AppBar/README.md diff --git a/docs/src/app/components/pages/components/AppBar/index.jsx b/docs/src/app/components/pages/components/AppBar/index.jsx new file mode 100644 index 00000000000000..d02144b19ae044 --- /dev/null +++ b/docs/src/app/components/pages/components/AppBar/index.jsx @@ -0,0 +1,33 @@ +import React from 'react'; +import CodeExample from '../../../CodeExample'; +import PropTypeDescription from '../../../PropTypeDescription'; +import MarkdownElement from '../../../MarkdownElement'; +import appBarReadmeText from './README'; +import AppBarExampleIcon from './ExampleIcon'; +import appBarExampleIconCode from '!raw!./ExampleIcon'; +import AppBarExampleIconButton from './ExampleIconButton'; +import appBarExampleIconButtonCode from '!raw!./ExampleIconButton'; +import AppBarExampleIconMenu from './ExampleIconMenu'; +import appBarExampleIconMenuCode from '!raw!./ExampleIconMenu'; +import appBarCode from '!raw!material-ui/lib/app-bar'; + +export default class AppBarPage extends React.Component { + + render() { + return ( +
+ + + + + + + + + + + +
+ ); + } +} diff --git a/docs/src/app/components/Avatar/ExampleSimple.jsx b/docs/src/app/components/pages/components/Avatar/ExampleSimple.jsx similarity index 100% rename from docs/src/app/components/Avatar/ExampleSimple.jsx rename to docs/src/app/components/pages/components/Avatar/ExampleSimple.jsx diff --git a/docs/src/app/components/Avatar/README.md b/docs/src/app/components/pages/components/Avatar/README.md similarity index 100% rename from docs/src/app/components/Avatar/README.md rename to docs/src/app/components/pages/components/Avatar/README.md diff --git a/docs/src/app/components/pages/components/avatar.jsx b/docs/src/app/components/pages/components/Avatar/index.jsx similarity index 53% rename from docs/src/app/components/pages/components/avatar.jsx rename to docs/src/app/components/pages/components/Avatar/index.jsx index 690c40c9159e12..f1f1652a7bd449 100644 --- a/docs/src/app/components/pages/components/avatar.jsx +++ b/docs/src/app/components/pages/components/Avatar/index.jsx @@ -1,11 +1,11 @@ import React from 'react'; +import CodeExample from '../../../CodeExample'; +import PropTypeDescription from '../../../PropTypeDescription'; +import MarkdownElement from '../../../MarkdownElement'; +import avatarReadmeText from './README'; +import AvatarExampleSimple from './ExampleSimple'; +import avatarExampleSimpleCode from '!raw!./ExampleSimple'; import avatarCode from '!raw!material-ui/lib/avatar'; -import CodeExample from '../../code-example/code-example'; -import PropTypeDescription from '../../PropTypeDescription'; -import AvatarExampleSimple from '../../Avatar/ExampleSimple'; -import avatarExampleSimpleCode from '!raw!../../Avatar/ExampleSimple'; -import MarkdownElement from '../../MarkdownElement'; -import avatarReadmeText from '../../Avatar/README'; export default class AvatarsPage extends React.Component { render() { diff --git a/docs/src/app/components/Badge/ExampleContent.jsx b/docs/src/app/components/pages/components/Badge/ExampleContent.jsx similarity index 100% rename from docs/src/app/components/Badge/ExampleContent.jsx rename to docs/src/app/components/pages/components/Badge/ExampleContent.jsx diff --git a/docs/src/app/components/Badge/ExampleSimple.jsx b/docs/src/app/components/pages/components/Badge/ExampleSimple.jsx similarity index 100% rename from docs/src/app/components/Badge/ExampleSimple.jsx rename to docs/src/app/components/pages/components/Badge/ExampleSimple.jsx diff --git a/docs/src/app/components/Badge/README.md b/docs/src/app/components/pages/components/Badge/README.md similarity index 100% rename from docs/src/app/components/Badge/README.md rename to docs/src/app/components/pages/components/Badge/README.md diff --git a/docs/src/app/components/pages/components/Badge/index.jsx b/docs/src/app/components/pages/components/Badge/index.jsx new file mode 100644 index 00000000000000..d701ad4a512e85 --- /dev/null +++ b/docs/src/app/components/pages/components/Badge/index.jsx @@ -0,0 +1,27 @@ +import React from 'react'; +import CodeExample from '../../../CodeExample'; +import PropTypeDescription from '../../../PropTypeDescription'; +import MarkdownElement from '../../../MarkdownElement'; +import badgeReadmeText from './README'; +import BadgeExampleSimple from './ExampleSimple'; +import badgeExampleSimpleCode from '!raw!./ExampleSimple'; +import BadgeExampleContent from './ExampleContent'; +import badgeExampleContentCode from '!raw!./ExampleContent'; +import badgeCode from '!raw!material-ui/lib/badge'; + +const BadgePage = () => { + return ( +
+ + + + + + + + +
+ ); +}; + +export default BadgePage; diff --git a/docs/src/app/components/pages/components/Cards/ExampleWithAvatar.jsx b/docs/src/app/components/pages/components/Cards/ExampleWithAvatar.jsx new file mode 100644 index 00000000000000..d7589c8466c473 --- /dev/null +++ b/docs/src/app/components/pages/components/Cards/ExampleWithAvatar.jsx @@ -0,0 +1,38 @@ +import React from 'react'; +import Avatar from 'material-ui/lib/avatar'; +import Card from 'material-ui/lib/card/card'; +import CardActions from 'material-ui/lib/card/card-actions'; +import CardHeader from 'material-ui/lib/card/card-header'; +import CardMedia from 'material-ui/lib/card/card-media'; +import CardTitle from 'material-ui/lib/card/card-title'; +import FlatButton from 'material-ui/lib/flat-button'; +import CardText from 'material-ui/lib/card/card-text'; + +const CardExampleWithAvatar = () => ( + + A}/> + + }> + + + + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi. + Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque. + Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio. + + +); + +export default CardExampleWithAvatar; diff --git a/docs/src/app/components/pages/components/Cards/ExampleWithoutAvatar.jsx b/docs/src/app/components/pages/components/Cards/ExampleWithoutAvatar.jsx new file mode 100644 index 00000000000000..2a137b9fb0b65f --- /dev/null +++ b/docs/src/app/components/pages/components/Cards/ExampleWithoutAvatar.jsx @@ -0,0 +1,34 @@ +import React from 'react'; +import Card from 'material-ui/lib/card/card'; +import CardActions from 'material-ui/lib/card/card-actions'; +import CardHeader from 'material-ui/lib/card/card-header'; +import FlatButton from 'material-ui/lib/flat-button'; +import CardText from 'material-ui/lib/card/card-text'; + +const CardExampleWithoutAvatar = () => ( + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi. + Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque. + Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio. + + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi. + Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque. + Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio. + + +); + +export default CardExampleWithoutAvatar; diff --git a/docs/src/app/components/Card/README.md b/docs/src/app/components/pages/components/Cards/README.md similarity index 73% rename from docs/src/app/components/Card/README.md rename to docs/src/app/components/pages/components/Cards/README.md index da4287695b45c5..a4ac6061eafa3f 100644 --- a/docs/src/app/components/Card/README.md +++ b/docs/src/app/components/pages/components/Cards/README.md @@ -1,11 +1,12 @@ ## Card -A [card](https://www.google.com/design/spec/components/cards.html) is a piece of paper with unique related data that serves as an -entry point to more detailed information. For example, a card could +A [card](https://www.google.com/design/spec/components/cards.html) +is a piece of paper with unique related data that serves as an +entry point to more detailed information. For example, a card could contain a photo, text, and a link about a single subject. -Cards have a constant width and variable height. The maximum height is -limited to the height of the available space on a platform, +Cards have a constant width and variable height. The maximum height is +limited to the height of the available space on a platform, but it can temporarily expand (for example, to display a comment field). Cards do not flip over to reveal information on the back. diff --git a/docs/src/app/components/pages/components/Cards/index.jsx b/docs/src/app/components/pages/components/Cards/index.jsx new file mode 100644 index 00000000000000..548b641cc849f4 --- /dev/null +++ b/docs/src/app/components/pages/components/Cards/index.jsx @@ -0,0 +1,27 @@ +import React from 'react'; +import CodeExample from '../../../CodeExample'; +import PropTypeDescription from '../../../PropTypeDescription'; +import MarkdownElement from '../../../MarkdownElement'; +import cardReadmeText from './README'; +import cardExampleWithAvatarCode from '!raw!./ExampleWithAvatar'; +import CardExampleWithAvatar from './ExampleWithAvatar'; +import cardExampleWithoutAvatarCode from '!raw!./ExampleWithoutAvatar'; +import CardExampleWithoutAvatar from './ExampleWithoutAvatar'; +import cardCode from '!raw!material-ui/lib/card/card'; + +export default class CardPage extends React.Component { + render() { + return ( +
+ + + + + + + + +
+ ); + } +} diff --git a/docs/src/app/components/Dialog/ExampleModal.jsx b/docs/src/app/components/pages/components/Dialog/ExampleModal.jsx similarity index 100% rename from docs/src/app/components/Dialog/ExampleModal.jsx rename to docs/src/app/components/pages/components/Dialog/ExampleModal.jsx diff --git a/docs/src/app/components/Dialog/ExampleSimple.jsx b/docs/src/app/components/pages/components/Dialog/ExampleSimple.jsx similarity index 100% rename from docs/src/app/components/Dialog/ExampleSimple.jsx rename to docs/src/app/components/pages/components/Dialog/ExampleSimple.jsx diff --git a/docs/src/app/components/Dialog/README.md b/docs/src/app/components/pages/components/Dialog/README.md similarity index 100% rename from docs/src/app/components/Dialog/README.md rename to docs/src/app/components/pages/components/Dialog/README.md diff --git a/docs/src/app/components/pages/components/Dialog/index.jsx b/docs/src/app/components/pages/components/Dialog/index.jsx new file mode 100644 index 00000000000000..c692d585619678 --- /dev/null +++ b/docs/src/app/components/pages/components/Dialog/index.jsx @@ -0,0 +1,27 @@ +import React from 'react'; +import CodeExample from '../../../CodeExample'; +import PropTypeDescription from '../../../PropTypeDescription'; +import MarkdownElement from '../../../MarkdownElement'; +import dialogReadmeText from './README'; +import DialogExampleSimple from './ExampleSimple'; +import DialogExampleSimpleCode from '!raw!./ExampleSimple'; +import DialogExampleModal from './ExampleModal'; +import DialogExampleModalCode from '!raw!./ExampleModal'; +import dialogCode from '!raw!material-ui/lib/Dialog/Dialog'; + +export default class DialogPage extends React.Component { + render() { + return ( +
+ + + + + + + + +
+ ); + } +} diff --git a/docs/src/app/components/Divider/ExampleForm.jsx b/docs/src/app/components/pages/components/Divider/ExampleForm.jsx similarity index 100% rename from docs/src/app/components/Divider/ExampleForm.jsx rename to docs/src/app/components/pages/components/Divider/ExampleForm.jsx diff --git a/docs/src/app/components/Divider/ExampleList.jsx b/docs/src/app/components/pages/components/Divider/ExampleList.jsx similarity index 92% rename from docs/src/app/components/Divider/ExampleList.jsx rename to docs/src/app/components/pages/components/Divider/ExampleList.jsx index b0d3fb4450fa68..57bd3bedb966aa 100644 --- a/docs/src/app/components/Divider/ExampleList.jsx +++ b/docs/src/app/components/pages/components/Divider/ExampleList.jsx @@ -3,7 +3,7 @@ import Divider from 'material-ui/lib/divider'; import List from 'material-ui/lib/lists/list'; import ListItem from 'material-ui/lib/lists/list-item'; -import MobileTearSheet from '../mobile-tear-sheet'; +import MobileTearSheet from '../../../MobileTearSheet'; const DividerExampleList = () => ( diff --git a/docs/src/app/components/Divider/ExampleMenu.jsx b/docs/src/app/components/pages/components/Divider/ExampleMenu.jsx similarity index 100% rename from docs/src/app/components/Divider/ExampleMenu.jsx rename to docs/src/app/components/pages/components/Divider/ExampleMenu.jsx diff --git a/docs/src/app/components/Divider/README.md b/docs/src/app/components/pages/components/Divider/README.md similarity index 100% rename from docs/src/app/components/Divider/README.md rename to docs/src/app/components/pages/components/Divider/README.md diff --git a/docs/src/app/components/pages/components/Divider/index.jsx b/docs/src/app/components/pages/components/Divider/index.jsx new file mode 100644 index 00000000000000..b61f35d04dee49 --- /dev/null +++ b/docs/src/app/components/pages/components/Divider/index.jsx @@ -0,0 +1,32 @@ +import React from 'react'; +import CodeExample from '../../../CodeExample'; +import PropTypeDescription from '../../../PropTypeDescription'; +import MarkdownElement from '../../../MarkdownElement'; +import dividerReadmeText from './README'; +import DividerExampleForm from './ExampleForm'; +import dividerExampleFormCode from '!raw!./ExampleForm'; +import DividerExampleList from './ExampleList'; +import dividerExampleListCode from '!raw!./ExampleList'; +import DividerExampleMenu from './ExampleMenu'; +import dividerExampleMenuCode from '!raw!./ExampleMenu'; +import dividerCode from '!raw!material-ui/lib/Divider'; + +const DividerPage = () => { + return ( +
+ + + + + + + + + + + +
+ ); +}; + +export default DividerPage; diff --git a/docs/src/app/components/pages/components/drop-down-menu.jsx b/docs/src/app/components/pages/components/DropDownMenu/index.jsx similarity index 50% rename from docs/src/app/components/pages/components/drop-down-menu.jsx rename to docs/src/app/components/pages/components/DropDownMenu/index.jsx index 3b28d2b7c29b80..0c4d714002d324 100644 --- a/docs/src/app/components/pages/components/drop-down-menu.jsx +++ b/docs/src/app/components/pages/components/DropDownMenu/index.jsx @@ -1,14 +1,14 @@ import React from 'react'; -import MarkdownElement from '../../MarkdownElement'; -import CodeExample from '../../code-example/code-example'; -import PropTypeDescription from '../../PropTypeDescription'; -import dropDownMenuReadmeText from './DropDownMenu/README'; -import DropDownMenuSimpleExample from './DropDownMenu/ExampleSimple'; -import dropDownMenuSimpleExampleCode from '!raw!./DropDownMenu/ExampleSimple'; -import DropDownMenuLongMenuExample from './DropDownMenu/ExampleLongMenu'; -import dropDownMenuLongMenuExampleCode from '!raw!./DropDownMenu/ExampleLongMenu'; -import DropDownMenuLabeledExample from './DropDownMenu/ExampleLabeled'; -import dropDownMenuLabeledExampleCode from '!raw!./DropDownMenu/ExampleLabeled'; +import CodeExample from '../../../CodeExample'; +import PropTypeDescription from '../../../PropTypeDescription'; +import MarkdownElement from '../../../MarkdownElement'; +import dropDownMenuReadmeText from './README'; +import DropDownMenuSimpleExample from './ExampleSimple'; +import dropDownMenuSimpleExampleCode from '!raw!./ExampleSimple'; +import DropDownMenuLongMenuExample from './ExampleLongMenu'; +import dropDownMenuLongMenuExampleCode from '!raw!./ExampleLongMenu'; +import DropDownMenuLabeledExample from './ExampleLabeled'; +import dropDownMenuLabeledExampleCode from '!raw!./ExampleLabeled'; import dropDownMenuCode from '!raw!material-ui/lib/DropDownMenu/DropDownMenu'; export default class LeftNavPage extends React.Component { diff --git a/docs/src/app/components/LeftNav/ExampleOpenRight.jsx b/docs/src/app/components/pages/components/LeftNav/ExampleOpenRight.jsx similarity index 100% rename from docs/src/app/components/LeftNav/ExampleOpenRight.jsx rename to docs/src/app/components/pages/components/LeftNav/ExampleOpenRight.jsx diff --git a/docs/src/app/components/LeftNav/ExampleSimple.jsx b/docs/src/app/components/pages/components/LeftNav/ExampleSimple.jsx similarity index 100% rename from docs/src/app/components/LeftNav/ExampleSimple.jsx rename to docs/src/app/components/pages/components/LeftNav/ExampleSimple.jsx diff --git a/docs/src/app/components/LeftNav/ExampleUndocked.jsx b/docs/src/app/components/pages/components/LeftNav/ExampleUndocked.jsx similarity index 100% rename from docs/src/app/components/LeftNav/ExampleUndocked.jsx rename to docs/src/app/components/pages/components/LeftNav/ExampleUndocked.jsx diff --git a/docs/src/app/components/LeftNav/README.md b/docs/src/app/components/pages/components/LeftNav/README.md similarity index 100% rename from docs/src/app/components/LeftNav/README.md rename to docs/src/app/components/pages/components/LeftNav/README.md diff --git a/docs/src/app/components/pages/components/LeftNav/index.jsx b/docs/src/app/components/pages/components/LeftNav/index.jsx new file mode 100644 index 00000000000000..fee9ff44ef0988 --- /dev/null +++ b/docs/src/app/components/pages/components/LeftNav/index.jsx @@ -0,0 +1,32 @@ +import React from 'react'; +import CodeExample from '../../../CodeExample'; +import PropTypeDescription from '../../../PropTypeDescription'; +import MarkdownElement from '../../../MarkdownElement'; +import leftNavReadmeText from './README'; +import LeftNavSimpleExample from './ExampleSimple'; +import leftNavSimpleExampleCode from '!raw!./ExampleSimple'; +import LeftNavUndockedExample from './ExampleUndocked'; +import leftNavUndockedExampleCode from '!raw!./ExampleUndocked'; +import LeftNavOpenRightExample from './ExampleOpenRight'; +import leftNavOpenRightExampleCode from '!raw!./ExampleOpenRight'; +import leftNavCode from '!raw!material-ui/lib/left-nav'; + +export default class LeftNavPage extends React.Component { + render() { + return ( +
+ + + + + + + + + + + +
+ ); + } +} diff --git a/docs/src/app/components/Snackbar/ExampleSimple.jsx b/docs/src/app/components/pages/components/Snackbar/ExampleSimple.jsx similarity index 100% rename from docs/src/app/components/Snackbar/ExampleSimple.jsx rename to docs/src/app/components/pages/components/Snackbar/ExampleSimple.jsx diff --git a/docs/src/app/components/Snackbar/ExampleTwice.jsx b/docs/src/app/components/pages/components/Snackbar/ExampleTwice.jsx similarity index 100% rename from docs/src/app/components/Snackbar/ExampleTwice.jsx rename to docs/src/app/components/pages/components/Snackbar/ExampleTwice.jsx diff --git a/docs/src/app/components/Snackbar/README.md b/docs/src/app/components/pages/components/Snackbar/README.md similarity index 100% rename from docs/src/app/components/Snackbar/README.md rename to docs/src/app/components/pages/components/Snackbar/README.md diff --git a/docs/src/app/components/pages/components/Snackbar/index.jsx b/docs/src/app/components/pages/components/Snackbar/index.jsx new file mode 100644 index 00000000000000..d8f867b20142b6 --- /dev/null +++ b/docs/src/app/components/pages/components/Snackbar/index.jsx @@ -0,0 +1,27 @@ +import React from 'react'; +import CodeExample from '../../../CodeExample'; +import PropTypeDescription from '../../../PropTypeDescription'; +import MarkdownElement from '../../../MarkdownElement'; +import SnackbarReadmeText from './README'; +import SnackbarExampleSimple from './ExampleSimple'; +import SnackbarExampleSimpleCode from '!raw!./ExampleSimple'; +import SnackbarExampleTwice from './ExampleTwice'; +import SnackbarExampleTwiceCode from '!raw!./ExampleTwice'; +import SnackbarCode from '!raw!material-ui/lib/snackbar'; + +const SnackbarPage = () => { + return ( +
+ + + + + + + + +
+ ); +}; + +export default SnackbarPage; diff --git a/docs/src/app/components/Tabs/ExampleControlled.jsx b/docs/src/app/components/pages/components/Tabs/ExampleControlled.jsx similarity index 100% rename from docs/src/app/components/Tabs/ExampleControlled.jsx rename to docs/src/app/components/pages/components/Tabs/ExampleControlled.jsx diff --git a/docs/src/app/components/Tabs/ExampleSimple.jsx b/docs/src/app/components/pages/components/Tabs/ExampleSimple.jsx similarity index 100% rename from docs/src/app/components/Tabs/ExampleSimple.jsx rename to docs/src/app/components/pages/components/Tabs/ExampleSimple.jsx diff --git a/docs/src/app/components/Tabs/ExampleSwipeable.jsx b/docs/src/app/components/pages/components/Tabs/ExampleSwipeable.jsx similarity index 100% rename from docs/src/app/components/Tabs/ExampleSwipeable.jsx rename to docs/src/app/components/pages/components/Tabs/ExampleSwipeable.jsx diff --git a/docs/src/app/components/Tabs/README.md b/docs/src/app/components/pages/components/Tabs/README.md similarity index 100% rename from docs/src/app/components/Tabs/README.md rename to docs/src/app/components/pages/components/Tabs/README.md diff --git a/docs/src/app/components/Tabs/Tab.md b/docs/src/app/components/pages/components/Tabs/Tab.md similarity index 100% rename from docs/src/app/components/Tabs/Tab.md rename to docs/src/app/components/pages/components/Tabs/Tab.md diff --git a/docs/src/app/components/Tabs/Tabs.md b/docs/src/app/components/pages/components/Tabs/Tabs.md similarity index 100% rename from docs/src/app/components/Tabs/Tabs.md rename to docs/src/app/components/pages/components/Tabs/Tabs.md diff --git a/docs/src/app/components/pages/components/tabs.jsx b/docs/src/app/components/pages/components/Tabs/index.jsx similarity index 51% rename from docs/src/app/components/pages/components/tabs.jsx rename to docs/src/app/components/pages/components/Tabs/index.jsx index 00856d81ee8192..ef12302d19ad94 100644 --- a/docs/src/app/components/pages/components/tabs.jsx +++ b/docs/src/app/components/pages/components/Tabs/index.jsx @@ -1,18 +1,18 @@ import React from 'react'; +import CodeExample from '../../../CodeExample'; +import PropTypeDescription from '../../../PropTypeDescription'; +import MarkdownElement from '../../../MarkdownElement'; +import tabsReadmeText from './README'; +import tabsExampleSimpleCode from '!raw!./ExampleSimple'; +import TabsExampleSimple from './ExampleSimple'; +import tabsExampleControlledCode from '!raw!./ExampleControlled'; +import TabsExampleControlled from './ExampleControlled'; +import tabsExampleSwipeableCode from '!raw!./ExampleSwipeable'; +import TabsExampleSwipeable from './ExampleSwipeable'; import tabsCode from '!raw!material-ui/lib/tabs/tabs'; -import tabsText from '../../Tabs/Tabs'; +import tabsText from './Tabs'; import tabCode from '!raw!material-ui/lib/tabs/tab'; -import tabText from '../../Tabs/Tab'; -import CodeExample from '../../code-example/code-example'; -import PropTypeDescription from '../../PropTypeDescription'; -import TabsExampleSimple from '../../Tabs/ExampleSimple'; -import tabsExampleSimpleCode from '!raw!../../Tabs/ExampleSimple'; -import TabsExampleControlled from '../../Tabs/ExampleControlled'; -import tabsExampleControlledCode from '!raw!../../Tabs/ExampleControlled'; -import TabsExampleSwipeable from '../../Tabs/ExampleSwipeable'; -import tabsExampleSwipeableCode from '!raw!../../Tabs/ExampleSwipeable'; -import MarkdownElement from '../../MarkdownElement'; -import tabsReadmeText from '../../Tabs/README'; +import tabText from './Tab'; const TabsPage = () => { return ( diff --git a/docs/src/app/components/Toolbars/ExampleSimple.jsx b/docs/src/app/components/pages/components/Toolbars/ExampleSimple.jsx similarity index 97% rename from docs/src/app/components/Toolbars/ExampleSimple.jsx rename to docs/src/app/components/pages/components/Toolbars/ExampleSimple.jsx index 0c6fb5d1e4e394..ea374856128197 100644 --- a/docs/src/app/components/Toolbars/ExampleSimple.jsx +++ b/docs/src/app/components/pages/components/Toolbars/ExampleSimple.jsx @@ -4,7 +4,7 @@ import IconButton from 'material-ui/lib/icon-button'; import FontIcon from 'material-ui/lib/font-icon'; import NavigationExpandMoreIcon from 'material-ui/lib/svg-icons/navigation/expand-more'; import MenuItem from 'material-ui/lib/menus/menu-item'; -import DropDownMenu from 'material-ui/lib/drop-down-menu'; +import DropDownMenu from 'material-ui/lib/DropDownMenu'; import RaisedButton from 'material-ui/lib/raised-button'; import Toolbar from 'material-ui/lib/toolbar/toolbar'; import ToolbarGroup from 'material-ui/lib/toolbar/toolbar-group'; diff --git a/docs/src/app/components/Toolbars/README.md b/docs/src/app/components/pages/components/Toolbars/README.md similarity index 100% rename from docs/src/app/components/Toolbars/README.md rename to docs/src/app/components/pages/components/Toolbars/README.md diff --git a/docs/src/app/components/Toolbars/Toolbar.md b/docs/src/app/components/pages/components/Toolbars/Toolbar.md similarity index 100% rename from docs/src/app/components/Toolbars/Toolbar.md rename to docs/src/app/components/pages/components/Toolbars/Toolbar.md diff --git a/docs/src/app/components/Toolbars/ToolbarGroup.md b/docs/src/app/components/pages/components/Toolbars/ToolbarGroup.md similarity index 100% rename from docs/src/app/components/Toolbars/ToolbarGroup.md rename to docs/src/app/components/pages/components/Toolbars/ToolbarGroup.md diff --git a/docs/src/app/components/Toolbars/ToolbarSeparator.md b/docs/src/app/components/pages/components/Toolbars/ToolbarSeparator.md similarity index 100% rename from docs/src/app/components/Toolbars/ToolbarSeparator.md rename to docs/src/app/components/pages/components/Toolbars/ToolbarSeparator.md diff --git a/docs/src/app/components/Toolbars/ToolbarTitle.md b/docs/src/app/components/pages/components/Toolbars/ToolbarTitle.md similarity index 100% rename from docs/src/app/components/Toolbars/ToolbarTitle.md rename to docs/src/app/components/pages/components/Toolbars/ToolbarTitle.md diff --git a/docs/src/app/components/pages/components/toolbars.jsx b/docs/src/app/components/pages/components/Toolbars/index.jsx similarity index 61% rename from docs/src/app/components/pages/components/toolbars.jsx rename to docs/src/app/components/pages/components/Toolbars/index.jsx index 8fad18a8a7fa66..127accdd8a7ab5 100644 --- a/docs/src/app/components/pages/components/toolbars.jsx +++ b/docs/src/app/components/pages/components/Toolbars/index.jsx @@ -1,18 +1,18 @@ import React from 'react'; +import CodeExample from '../../../CodeExample'; +import PropTypeDescription from '../../../PropTypeDescription'; +import MarkdownElement from '../../../MarkdownElement'; +import toolbarsReadmeText from './README'; +import toolbarsExampleSimpleCode from '!raw!./ExampleSimple'; +import ToolbarsExampleSimple from './ExampleSimple'; import toolbarCode from '!raw!material-ui/toolbar/toolbar'; +import toolbarReadmeText from './Toolbar'; import toolbarGroupCode from '!raw!material-ui/toolbar/toolbar-group'; +import toolbarGroupReadmeText from './ToolbarGroup'; import toolbarSeparatorCode from '!raw!material-ui/toolbar/toolbar-separator'; +import toolbarSeparatorReadmeText from './ToolbarSeparator'; import toolbarTitleCode from '!raw!material-ui/toolbar/toolbar-title'; -import CodeExample from '../../code-example/code-example'; -import PropTypeDescription from '../../PropTypeDescription'; -import ToolbarsExampleSimple from '../../Toolbars/ExampleSimple'; -import toolbarsExampleSimpleCode from '!raw!../../Toolbars/ExampleSimple'; -import MarkdownElement from '../../MarkdownElement'; -import toolbarsReadmeText from '../../Toolbars/README'; -import toolbarReadmeText from '../../Toolbars/Toolbar'; -import toolbarGroupReadmeText from '../../Toolbars/ToolbarGroup'; -import toolbarSeparatorReadmeText from '../../Toolbars/ToolbarSeparator'; -import toolbarTitleReadmeText from '../../Toolbars/ToolbarTitle'; +import toolbarTitleReadmeText from './ToolbarTitle'; export default class ToolbarPage extends React.Component { render() { diff --git a/docs/src/app/components/pages/components/app-bar.jsx b/docs/src/app/components/pages/components/app-bar.jsx deleted file mode 100644 index 4194fcce47a397..00000000000000 --- a/docs/src/app/components/pages/components/app-bar.jsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import appBarCode from '!raw!material-ui/lib/app-bar'; -import CodeExample from '../../code-example/code-example'; -import PropTypeDescription from '../../PropTypeDescription'; -import AppBarExampleIcon from '../../AppBar/ExampleIcon'; -import appBarExampleIconCode from '!raw!../../AppBar/ExampleIcon'; -import AppBarExampleIconButton from '../../AppBar/ExampleIconButton'; -import appBarExampleIconButtonCode from '!raw!../../AppBar/ExampleIconButton'; -import AppBarExampleIconMenu from '../../AppBar/ExampleIconMenu'; -import appBarExampleIconMenuCode from '!raw!../../AppBar/ExampleIconMenu'; -import MarkdownElement from '../../MarkdownElement'; -import appBarReadmeText from '../../AppBar/README'; - -export default class AppBarPage extends React.Component { - - constructor(props) { - super(props); - } - - render() { - return ( -
- - - - - - - - - - - -
- ); - } -} diff --git a/docs/src/app/components/pages/components/auto-complete.jsx b/docs/src/app/components/pages/components/auto-complete.jsx index b3bb40480dae8f..0690702e74df50 100644 --- a/docs/src/app/components/pages/components/auto-complete.jsx +++ b/docs/src/app/components/pages/components/auto-complete.jsx @@ -2,7 +2,7 @@ import React from 'react'; import {AutoComplete} from 'material-ui'; import ComponentDoc from '../../component-doc'; -import CodeExample from '../../code-example/code-example'; +import CodeExample from '../../CodeExample'; import Code from 'auto-complete-code'; diff --git a/docs/src/app/components/pages/components/badge.jsx b/docs/src/app/components/pages/components/badge.jsx deleted file mode 100644 index 7202a6ff5b1182..00000000000000 --- a/docs/src/app/components/pages/components/badge.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import badgeCode from '!raw!material-ui/lib/badge'; -import CodeExample from '../../code-example/code-example'; -import PropTypeDescription from '../../PropTypeDescription'; -import MarkdownElement from '../../MarkdownElement'; -import badgeReadmeText from '../../Badge/README'; -import BadgeExampleSimple from '../../Badge/ExampleSimple'; -import badgeExampleSimpleCode from '!raw!../../Badge/ExampleSimple'; -import BadgeExampleContent from '../../Badge/ExampleContent'; -import badgeExampleContentCode from '!raw!../../Badge/ExampleContent'; - -const BadgePage = () => { - return ( -
- - - - - - - - -
- ); -}; - -export default BadgePage; diff --git a/docs/src/app/components/pages/components/buttons.jsx b/docs/src/app/components/pages/components/buttons.jsx index f2ab66c85939e8..4dc2923581bdd3 100644 --- a/docs/src/app/components/pages/components/buttons.jsx +++ b/docs/src/app/components/pages/components/buttons.jsx @@ -18,8 +18,8 @@ const {Colors, Typography} = Styles; import RaisedButtonCode from 'raised-button-code'; import FloatingActionButtonCode from 'floating-action-button-code'; import FlatButtonCode from 'flat-button-code'; -import CodeExample from '../../code-example/code-example'; -import CodeBlock from '../../code-example/code-block'; +import CodeExample from '../../CodeExample'; +import CodeBlock from '../../CodeExample/CodeBlock'; export default class ButtonPage extends React.Component { diff --git a/docs/src/app/components/pages/components/cards.jsx b/docs/src/app/components/pages/components/cards.jsx deleted file mode 100644 index 1af88bad946e43..00000000000000 --- a/docs/src/app/components/pages/components/cards.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import cardCode from '!raw!material-ui/lib/card/card'; -import CodeExample from '../../code-example/code-example'; -import PropTypeDescription from '../../PropTypeDescription'; -import MarkdownElement from '../../MarkdownElement'; -import CardExampleWithAvatar from '../../Card/ExampleWithAvatar'; -import cardExampleWithAvatarCode from '!raw!../../Card/ExampleWithAvatar'; -import CardExampleWithoutAvatar from '../../Card/ExampleWithoutAvatar'; -import cardExampleWithoutAvatarCode from '!raw!../../Card/ExampleWithoutAvatar'; -import cardReadmeText from '../../Card/README'; - -export default class CardPage extends React.Component { - - constructor(props) { - super(props); - } - - render() { - return ( -
- - - - - - - - -
- ); - } -} diff --git a/docs/src/app/components/pages/components/date-picker.jsx b/docs/src/app/components/pages/components/date-picker.jsx index 0db3d955881f8b..9ed2e82b2e3f16 100644 --- a/docs/src/app/components/pages/components/date-picker.jsx +++ b/docs/src/app/components/pages/components/date-picker.jsx @@ -2,8 +2,8 @@ import React from 'react'; import {DatePicker, TextField, Paper, Toggle} from 'material-ui'; import ComponentDoc from '../../component-doc'; import Code from 'date-picker-code'; -import CodeExample from '../../code-example/code-example'; -import CodeBlock from '../../code-example/code-block'; +import CodeExample from '../../CodeExample'; +import CodeBlock from '../../CodeExample/CodeBlock'; if (!window.Intl) { require('intl'); diff --git a/docs/src/app/components/pages/components/dialog.jsx b/docs/src/app/components/pages/components/dialog.jsx deleted file mode 100644 index 585902aa8948d5..00000000000000 --- a/docs/src/app/components/pages/components/dialog.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import dialogCode from '!raw!material-ui/lib/dialog'; -import CodeExample from '../../code-example/code-example'; -import PropTypeDescription from '../../PropTypeDescription'; -import MarkdownElement from '../../MarkdownElement'; -import DialogExampleSimple from '../../Dialog/ExampleSimple'; -import DialogExampleSimpleCode from '!raw!../../Dialog/ExampleSimple'; -import DialogExampleModal from '../../Dialog/ExampleModal'; -import DialogExampleModalCode from '!raw!../../Dialog/ExampleModal'; -import dialogReadmeText from '../../Dialog/README'; - -export default class DialogPage extends React.Component { - render() { - return ( -
- - - - - - - - -
- ); - } -} diff --git a/docs/src/app/components/pages/components/divider.jsx b/docs/src/app/components/pages/components/divider.jsx deleted file mode 100644 index 5a6d5782a3b046..00000000000000 --- a/docs/src/app/components/pages/components/divider.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import dividerCode from '!raw!material-ui/lib/divider'; -import CodeExample from '../../code-example/code-example'; -import PropTypeDescription from '../../PropTypeDescription'; -import DividerExampleForm from '../../Divider/ExampleForm'; -import dividerExampleFormCode from '!raw!../../Divider/ExampleForm'; -import DividerExampleList from '../../Divider/ExampleList'; -import dividerExampleListCode from '!raw!../../Divider/ExampleList'; -import DividerExampleMenu from '../../Divider/ExampleMenu'; -import dividerExampleMenuCode from '!raw!../../Divider/ExampleMenu'; -import MarkdownElement from '../../MarkdownElement'; -import dividerReadmeText from '../../Divider/README'; - -const DividerPage = () => { - return ( -
- - - - - - - - - - - -
- ); -}; - -export default DividerPage; diff --git a/docs/src/app/components/pages/components/grid-list.jsx b/docs/src/app/components/pages/components/grid-list.jsx index 9bf31d2b6f597f..aea92f1ee37de6 100644 --- a/docs/src/app/components/pages/components/grid-list.jsx +++ b/docs/src/app/components/pages/components/grid-list.jsx @@ -6,8 +6,8 @@ import IconButton from 'icon-button'; import ComponentDoc from '../../component-doc'; import Code from 'grid-list-code'; -import CodeExample from '../../code-example/code-example'; -import CodeBlock from '../../code-example/code-block'; +import CodeExample from '../../CodeExample'; +import CodeBlock from '../../CodeExample/CodeBlock'; class GridListPage extends React.Component { diff --git a/docs/src/app/components/pages/components/icon-buttons.jsx b/docs/src/app/components/pages/components/icon-buttons.jsx index d6b9678f86b04a..243d27969f1cc2 100644 --- a/docs/src/app/components/pages/components/icon-buttons.jsx +++ b/docs/src/app/components/pages/components/icon-buttons.jsx @@ -7,8 +7,8 @@ import { import ComponentDoc from '../../component-doc'; import ActionGrade from 'material-ui/svg-icons/action/grade'; import Code from 'icon-buttons-code'; -import CodeExample from '../../code-example/code-example'; -import CodeBlock from '../../code-example/code-block'; +import CodeExample from '../../CodeExample'; +import CodeBlock from '../../CodeExample/CodeBlock'; export default class IconButtonsPage extends React.Component { diff --git a/docs/src/app/components/pages/components/icon-menus.jsx b/docs/src/app/components/pages/components/icon-menus.jsx index 2ce61dc040562c..a02256ed1597d1 100644 --- a/docs/src/app/components/pages/components/icon-menus.jsx +++ b/docs/src/app/components/pages/components/icon-menus.jsx @@ -15,8 +15,8 @@ import MapsPlace from 'material-ui/svg-icons/maps/place'; import PersonAdd from 'material-ui/svg-icons/social/person-add'; import RemoveRedEye from 'material-ui/svg-icons/image/remove-red-eye'; import Code from 'icon-menus-code'; -import CodeExample from '../../code-example/code-example'; -import CodeBlock from '../../code-example/code-block'; +import CodeExample from '../../CodeExample'; +import CodeBlock from '../../CodeExample/CodeBlock'; export default class IconMenus extends React.Component { diff --git a/docs/src/app/components/pages/components/icons.jsx b/docs/src/app/components/pages/components/icons.jsx index df48d271448a8c..2d773e7ac8b378 100644 --- a/docs/src/app/components/pages/components/icons.jsx +++ b/docs/src/app/components/pages/components/icons.jsx @@ -1,13 +1,13 @@ import React from 'react'; import {FontIcon, Styles, Paper} from 'material-ui'; -import CodeBlock from '../../code-example/code-block'; import ComponentDoc from '../../component-doc'; import ActionHome from 'material-ui/svg-icons/action/home'; const {Colors, Typography} = Styles; import IconButtonCode from 'icons-code'; import SvgIconsCode from 'svg-icons-code'; -import CodeExample from '../../code-example/code-example'; +import CodeExample from '../../CodeExample'; +import CodeBlock from '../../CodeExample/CodeBlock'; export default class FontIconPage extends React.Component { diff --git a/docs/src/app/components/pages/components/left-nav.jsx b/docs/src/app/components/pages/components/left-nav.jsx deleted file mode 100644 index 3c7a77f73eed82..00000000000000 --- a/docs/src/app/components/pages/components/left-nav.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import MarkdownElement from '../../MarkdownElement'; -import CodeExample from '../../code-example/code-example'; -import PropTypeDescription from '../../PropTypeDescription'; -import leftNavReadmeText from '../../LeftNav/README'; -import LeftNavSimpleExample from '../../LeftNav/ExampleSimple'; -import leftNavSimpleExampleCode from '!raw!../../LeftNav/ExampleSimple'; -import LeftNavUndockedExample from '../../LeftNav/ExampleUndocked'; -import leftNavUndockedExampleCode from '!raw!../../LeftNav/ExampleUndocked'; -import LeftNavOpenRightExample from '../../LeftNav/ExampleOpenRight'; -import leftNavOpenRightExampleCode from '!raw!../../LeftNav/ExampleOpenRight'; -import leftNavCode from '!raw!material-ui/lib/left-nav'; - -export default class LeftNavPage extends React.Component { - render() { - return ( -
- - - - - - - - - - - -
- ); - } -} diff --git a/docs/src/app/components/pages/components/lists.jsx b/docs/src/app/components/pages/components/lists.jsx index e88f27b62512c6..e7e78f235b6a05 100644 --- a/docs/src/app/components/pages/components/lists.jsx +++ b/docs/src/app/components/pages/components/lists.jsx @@ -1,7 +1,7 @@ import React from 'react'; import mui from 'material-ui'; import ComponentDoc from '../../component-doc'; -import MobileTearSheet from '../../mobile-tear-sheet'; +import MobileTearSheet from '../../MobileTearSheet'; import ActionAssignment from 'material-ui/svg-icons/action/assignment'; import ActionGrade from 'material-ui/svg-icons/action/grade'; import ActionInfo from 'material-ui/svg-icons/action/info'; @@ -33,8 +33,8 @@ import MenuItem from 'menus/menu-item'; const {Colors} = Styles; import Code from 'lists-code'; -import CodeExample from '../../code-example/code-example'; -import CodeBlock from '../../code-example/code-block'; +import CodeExample from '../../CodeExample'; +import CodeBlock from '../../CodeExample/CodeBlock'; let SelectableList = SelectableContainerEnhance(List); const Typography = Styles.Typography; diff --git a/docs/src/app/components/pages/components/menus.jsx b/docs/src/app/components/pages/components/menus.jsx index ede9f299117a28..f5ad1b1865877b 100644 --- a/docs/src/app/components/pages/components/menus.jsx +++ b/docs/src/app/components/pages/components/menus.jsx @@ -14,8 +14,8 @@ import Download from 'material-ui/svg-icons/file/file-download'; import PersonAdd from 'material-ui/svg-icons/social/person-add'; import RemoveRedEye from 'material-ui/svg-icons/image/remove-red-eye'; import Code from 'menus-code'; -import CodeExample from '../../code-example/code-example'; -import CodeBlock from '../../code-example/code-block'; +import CodeExample from '../../CodeExample'; +import CodeBlock from '../../CodeExample/CodeBlock'; export default class MenusPage extends React.Component { diff --git a/docs/src/app/components/pages/components/paper.jsx b/docs/src/app/components/pages/components/paper.jsx index 6264503ee2087f..129eb6a80f981a 100644 --- a/docs/src/app/components/pages/components/paper.jsx +++ b/docs/src/app/components/pages/components/paper.jsx @@ -4,8 +4,8 @@ import ComponentDoc from '../../component-doc'; const {StyleResizable} = Mixins; import Code from 'paper-code'; -import CodeExample from '../../code-example/code-example'; -import CodeBlock from '../../code-example/code-block'; +import CodeExample from '../../CodeExample'; +import CodeBlock from '../../CodeExample/CodeBlock'; const PaperPage = React.createClass({ diff --git a/docs/src/app/components/pages/components/popover.jsx b/docs/src/app/components/pages/components/popover.jsx index 5580a7ec6cf513..edf87f22ac7162 100644 --- a/docs/src/app/components/pages/components/popover.jsx +++ b/docs/src/app/components/pages/components/popover.jsx @@ -2,7 +2,7 @@ import React from 'react'; import {Popover, RadioButton, RaisedButton} from 'material-ui'; import ComponentDoc from '../../component-doc'; import Code from 'popover-code'; -import CodeExample from '../../code-example/code-example'; +import CodeExample from '../../CodeExample'; let PopoverPage = React.createClass({ diff --git a/docs/src/app/components/pages/components/progress.jsx b/docs/src/app/components/pages/components/progress.jsx index 310b4fac6f0fde..5bf49723c9509e 100644 --- a/docs/src/app/components/pages/components/progress.jsx +++ b/docs/src/app/components/pages/components/progress.jsx @@ -2,8 +2,8 @@ import React from 'react'; import {CircularProgress, LinearProgress, Paper} from 'material-ui'; import ComponentDoc from '../../component-doc'; import Code from 'progress-code'; -import CodeExample from '../../code-example/code-example'; -import CodeBlock from '../../code-example/code-block'; +import CodeExample from '../../CodeExample'; +import CodeBlock from '../../CodeExample/CodeBlock'; const ProgressPage = React.createClass({ diff --git a/docs/src/app/components/pages/components/refresh-indicator.jsx b/docs/src/app/components/pages/components/refresh-indicator.jsx index b8bc275bdff858..f74a46b00d1108 100644 --- a/docs/src/app/components/pages/components/refresh-indicator.jsx +++ b/docs/src/app/components/pages/components/refresh-indicator.jsx @@ -2,8 +2,8 @@ import React from 'react'; import {RefreshIndicator, Paper} from 'material-ui'; import ComponentDoc from '../../component-doc'; import Code from 'refresh-indicator-code'; -import CodeExample from '../../code-example/code-example'; -import CodeBlock from '../../code-example/code-block'; +import CodeExample from '../../CodeExample'; +import CodeBlock from '../../CodeExample/CodeBlock'; let RefreshIndicatorPage = React.createClass({ diff --git a/docs/src/app/components/pages/components/select-fields.jsx b/docs/src/app/components/pages/components/select-fields.jsx index d67e1aadbb4a11..9423a7fef129de 100644 --- a/docs/src/app/components/pages/components/select-fields.jsx +++ b/docs/src/app/components/pages/components/select-fields.jsx @@ -3,9 +3,9 @@ import {ClearFix, Mixins, SelectField, Paper, MenuItem} from 'material-ui'; import ComponentDoc from '../../component-doc'; const {StyleResizable} = Mixins; import Code from 'select-fields-code'; -import CodeExample from '../../code-example/code-example'; import LinkedStateMixin from 'react-addons-linked-state-mixin'; -import CodeBlock from '../../code-example/code-block'; +import CodeExample from '../../CodeExample'; +import CodeBlock from '../../CodeExample/CodeBlock'; const SelectFieldsPage = React.createClass({ diff --git a/docs/src/app/components/pages/components/sliders.jsx b/docs/src/app/components/pages/components/sliders.jsx index 4e8ed0a2b4da98..2dc99ef09d0037 100644 --- a/docs/src/app/components/pages/components/sliders.jsx +++ b/docs/src/app/components/pages/components/sliders.jsx @@ -2,8 +2,8 @@ import React from 'react'; import {Paper, Slider} from 'material-ui'; import ComponentDoc from '../../component-doc'; import Code from 'sliders-code'; -import CodeExample from '../../code-example/code-example'; -import CodeBlock from '../../code-example/code-block'; +import CodeExample from '../../CodeExample'; +import CodeBlock from '../../CodeExample/CodeBlock'; export default class SlidersPage extends React.Component { diff --git a/docs/src/app/components/pages/components/snackbar.jsx b/docs/src/app/components/pages/components/snackbar.jsx deleted file mode 100644 index 7feaea81f0b2a0..00000000000000 --- a/docs/src/app/components/pages/components/snackbar.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import SnackbarCode from '!raw!material-ui/lib/snackbar'; -import CodeExample from '../../code-example/code-example'; -import PropTypeDescription from '../../PropTypeDescription'; -import SnackbarExampleSimple from '../../Snackbar/ExampleSimple'; -import SnackbarExampleSimpleCode from '!raw!../../Snackbar/ExampleSimple'; -import SnackbarExampleTwice from '../../Snackbar/ExampleTwice'; -import SnackbarExampleTwiceCode from '!raw!../../Snackbar/ExampleTwice'; -import MarkdownElement from '../../MarkdownElement'; -import SnackbarReadmeText from '../../Snackbar/README'; - -const SnackbarPage = () => { - return ( -
- - - - - - - - -
- ); -}; - -export default SnackbarPage; diff --git a/docs/src/app/components/pages/components/switches.jsx b/docs/src/app/components/pages/components/switches.jsx index 7193d360e7b85d..92ee9d729b7ef9 100644 --- a/docs/src/app/components/pages/components/switches.jsx +++ b/docs/src/app/components/pages/components/switches.jsx @@ -1,6 +1,5 @@ import React from 'react'; import mui from 'material-ui'; -import CodeExample from '../../code-example/code-example'; import ComponentDoc from '../../component-doc'; import ToggleStar from 'material-ui/svg-icons/toggle/star'; import ToggleStarBorder from 'material-ui/svg-icons/toggle/star-border'; @@ -20,7 +19,8 @@ const {Typography} = Styles; import CheckboxCode from 'checkbox-code'; import RadioButtonCode from 'radio-buttons-code'; import ToggleCode from 'toggle-code'; -import CodeBlock from '../../code-example/code-block'; +import CodeExample from '../../CodeExample'; +import CodeBlock from '../../CodeExample/CodeBlock'; export default class SwitchesPage extends React.Component { diff --git a/docs/src/app/components/pages/components/table.jsx b/docs/src/app/components/pages/components/table.jsx index c62ca8de4538a1..20f724793ffdf4 100644 --- a/docs/src/app/components/pages/components/table.jsx +++ b/docs/src/app/components/pages/components/table.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import CodeExample from '../../code-example/code-example'; import ComponentDoc from '../../component-doc'; import { Table, @@ -15,7 +14,8 @@ import { } from 'material-ui'; import Code from 'table-code'; -import CodeBlock from '../../code-example/code-block'; +import CodeExample from '../../CodeExample'; +import CodeBlock from '../../CodeExample/CodeBlock'; export default class TablePage extends React.Component { diff --git a/docs/src/app/components/pages/components/text-fields.jsx b/docs/src/app/components/pages/components/text-fields.jsx index 58f7dfb1fb18f8..2507954fe7e8fb 100644 --- a/docs/src/app/components/pages/components/text-fields.jsx +++ b/docs/src/app/components/pages/components/text-fields.jsx @@ -4,9 +4,9 @@ import ComponentDoc from '../../component-doc'; const {Colors} = Styles; const {StyleResizable} = Mixins; import Code from 'text-fields-code'; -import CodeExample from '../../code-example/code-example'; import LinkedStateMixin from 'react-addons-linked-state-mixin'; -import CodeBlock from '../../code-example/code-block'; +import CodeExample from '../../CodeExample'; +import CodeBlock from '../../CodeExample/CodeBlock'; const TextFieldsPage = React.createClass({ diff --git a/docs/src/app/components/pages/components/time-picker.jsx b/docs/src/app/components/pages/components/time-picker.jsx index 5a3a88e52e63aa..33ab98327578a5 100644 --- a/docs/src/app/components/pages/components/time-picker.jsx +++ b/docs/src/app/components/pages/components/time-picker.jsx @@ -2,8 +2,8 @@ import React from 'react'; import {TimePicker, Paper} from 'material-ui'; import ComponentDoc from '../../component-doc'; import Code from 'time-picker-code'; -import CodeExample from '../../code-example/code-example'; -import CodeBlock from '../../code-example/code-block'; +import CodeExample from '../../CodeExample'; +import CodeBlock from '../../CodeExample/CodeBlock'; const TimePickerPage = React.createClass({ diff --git a/docs/src/app/components/pages/customization/inline-styles.jsx b/docs/src/app/components/pages/customization/inline-styles.jsx index 8533e9f6e97be8..9748cfd6019054 100644 --- a/docs/src/app/components/pages/customization/inline-styles.jsx +++ b/docs/src/app/components/pages/customization/inline-styles.jsx @@ -1,6 +1,6 @@ import React from 'react'; import {Checkbox, Styles} from 'material-ui'; -import CodeExample from '../../code-example/code-example'; +import CodeExample from '../../CodeExample'; const {Typography} = Styles; diff --git a/docs/src/app/components/pages/customization/themes.jsx b/docs/src/app/components/pages/customization/themes.jsx index 40639bd621cb7f..39c9a789d7b9f6 100644 --- a/docs/src/app/components/pages/customization/themes.jsx +++ b/docs/src/app/components/pages/customization/themes.jsx @@ -1,6 +1,6 @@ import React from 'react'; import mui from 'material-ui'; -import CodeBlock from '../../code-example/code-block'; +import CodeBlock from '../../CodeExample/CodeBlock'; import ComponentDoc from '../../component-doc'; const { diff --git a/docs/src/app/components/pages/get-started/installation.jsx b/docs/src/app/components/pages/get-started/installation.jsx index 507f050b178ad3..b813caf110c902 100644 --- a/docs/src/app/components/pages/get-started/installation.jsx +++ b/docs/src/app/components/pages/get-started/installation.jsx @@ -1,6 +1,6 @@ import React from 'react'; import {Paper, Styles} from 'material-ui'; -import CodeBlock from '../../code-example/code-block'; +import CodeBlock from '../../CodeExample/CodeBlock'; const {Typography} = Styles; const ThemeManager = Styles.ThemeManager; diff --git a/src/card/card.jsx b/src/card/card.jsx index dda5186fef403e..98ba40af764060 100644 --- a/src/card/card.jsx +++ b/src/card/card.jsx @@ -12,14 +12,6 @@ const Card = React.createClass({ }; }, - getDefaultProps() { - return { - expandable: false, - initiallyExpanded: true, - actAsExpander: false, - }; - }, - propTypes: { /** * Whether a click on this card component expands the card. Can be set on any child of the Card component. @@ -60,6 +52,14 @@ const Card = React.createClass({ style: React.PropTypes.object, }, + getDefaultProps() { + return { + expandable: false, + initiallyExpanded: false, + actAsExpander: false, + }; + }, + _onExpandable(event) { event.preventDefault(); let newExpandedState = !(this.state.expanded === true); From a50b881619b1fb457c36a92c045c2e6c1910c035 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 01:19:46 +0330 Subject: [PATCH 08/70] rename muiTheme to _muiTheme in TextFieldUnderline.jsx --- src/TextField/TextFieldUnderline.jsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/TextField/TextFieldUnderline.jsx b/src/TextField/TextFieldUnderline.jsx index 310d8e1884a0bc..29730a27331ea5 100644 --- a/src/TextField/TextFieldUnderline.jsx +++ b/src/TextField/TextFieldUnderline.jsx @@ -3,6 +3,11 @@ import Transitions from '../styles/transitions'; import styleUtils from '../utils/styles'; const propTypes = { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + /** * True if the parent `TextField` is disabled. */ @@ -33,11 +38,6 @@ const propTypes = { */ focusStyle: React.PropTypes.object, - /** - * The material-ui theme applied to this component. - */ - muiTheme: React.PropTypes.object.isRequired, - /** * Override the inline-styles of the underline. */ @@ -57,13 +57,13 @@ const defaultProps = { const TextFieldUnderline = (props) => { const { + _muiTheme, disabled, disabledStyle, error, errorStyle, focus, focusStyle, - muiTheme, style, } = props; @@ -78,7 +78,7 @@ const TextFieldUnderline = (props) => { errorColor, focusColor, }, - } = muiTheme; + } = _muiTheme; const styles = { From 96a1bb6400b2d3802ca2cf83fdf2535ecaf8c458 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 01:32:25 +0330 Subject: [PATCH 09/70] add _muiTheme as a required prop globally --- docs/src/app/components/CodeExample/index.jsx | 4 ++++ docs/src/app/components/MobileTearSheet.jsx | 5 +++++ docs/src/app/components/app-left-nav.jsx | 5 +++++ docs/src/app/components/component-doc.jsx | 5 +++++ docs/src/app/components/component-info.jsx | 5 +++++ docs/src/app/components/master.jsx | 5 +++++ docs/src/app/components/pages/customization/themes.jsx | 7 +++++++ docs/src/app/components/pages/get-started/examples.jsx | 7 +++++++ docs/src/app/components/pages/get-started/installation.jsx | 7 +++++++ .../src/app/components/pages/get-started/prerequisites.jsx | 7 +++++++ docs/src/app/components/pages/page-with-nav.jsx | 5 +++++ src/TextField/TextField.jsx | 5 +++++ src/app-bar.jsx | 5 +++++ src/app-canvas.jsx | 5 +++++ src/auto-complete.jsx | 5 +++++ src/avatar.jsx | 5 +++++ src/badge.jsx | 5 +++++ src/before-after-wrapper.jsx | 5 +++++ src/buttons/flat-button-label.jsx | 5 +++++ src/card/card-actions.jsx | 5 +++++ src/card/card-expandable.jsx | 5 +++++ src/card/card-header.jsx | 5 +++++ src/card/card-media.jsx | 5 +++++ src/card/card-text.jsx | 5 +++++ src/card/card-title.jsx | 5 +++++ src/card/card.jsx | 5 +++++ src/checkbox.jsx | 5 +++++ src/circular-progress.jsx | 5 +++++ src/date-picker/calendar-toolbar.jsx | 5 +++++ src/date-picker/calendar.jsx | 5 +++++ src/date-picker/date-display.jsx | 5 +++++ src/date-picker/date-picker-dialog.jsx | 5 +++++ src/date-picker/date-picker.jsx | 5 +++++ src/date-picker/day-button.jsx | 5 +++++ src/date-picker/year-button.jsx | 5 +++++ src/drop-down-icon.jsx | 5 +++++ src/enhanced-button.jsx | 5 +++++ src/enhanced-switch.jsx | 5 +++++ src/enhanced-textarea.jsx | 5 +++++ src/flat-button.jsx | 5 +++++ src/floating-action-button.jsx | 5 +++++ src/font-icon.jsx | 5 +++++ src/grid-list/grid-list.jsx | 5 +++++ src/grid-list/grid-tile.jsx | 5 +++++ src/hoc/selectable-enhance.js | 5 +++++ src/icon-button.jsx | 5 +++++ src/ink-bar.jsx | 5 +++++ src/left-nav.jsx | 5 +++++ src/linear-progress.jsx | 5 +++++ src/lists/list-item.jsx | 5 +++++ src/lists/list.jsx | 5 +++++ src/menu/link-menu-item.jsx | 5 +++++ src/menu/menu-item.jsx | 5 +++++ src/menu/menu.jsx | 5 +++++ src/menu/subheader-menu-item.jsx | 5 +++++ src/menus/icon-menu.jsx | 5 +++++ src/menus/menu-divider.jsx | 5 +++++ src/menus/menu-item.jsx | 5 +++++ src/menus/menu.jsx | 5 +++++ src/overlay.jsx | 5 +++++ src/paper.jsx | 5 +++++ src/popover/popover-animation-from-top.jsx | 5 +++++ src/popover/popover-default-animation.jsx | 5 +++++ src/popover/popover.jsx | 5 +++++ src/radio-button-group.jsx | 5 +++++ src/radio-button.jsx | 5 +++++ src/raised-button.jsx | 5 +++++ src/refresh-indicator.jsx | 5 +++++ src/render-to-layer.jsx | 5 +++++ src/select-field.jsx | 5 +++++ src/slider.jsx | 5 +++++ src/snackbar.jsx | 5 +++++ src/svg-icon.jsx | 5 +++++ src/table/table-body.jsx | 5 +++++ src/table/table-footer.jsx | 5 +++++ src/table/table-header-column.jsx | 5 +++++ src/table/table-header.jsx | 5 +++++ src/table/table-row-column.jsx | 5 +++++ src/table/table-row.jsx | 5 +++++ src/table/table.jsx | 5 +++++ src/tabs/tab.jsx | 5 +++++ src/tabs/tabs.jsx | 5 +++++ src/time-picker/clock-button.jsx | 5 +++++ src/time-picker/clock-hours.jsx | 5 +++++ src/time-picker/clock-minutes.jsx | 5 +++++ src/time-picker/clock-number.jsx | 5 +++++ src/time-picker/clock-pointer.jsx | 5 +++++ src/time-picker/clock.jsx | 5 +++++ src/time-picker/time-display.jsx | 5 +++++ src/time-picker/time-picker-dialog.jsx | 5 +++++ src/time-picker/time-picker.jsx | 5 +++++ src/toggle.jsx | 5 +++++ src/toolbar/toolbar-group.jsx | 5 +++++ src/toolbar/toolbar-separator.jsx | 5 +++++ src/toolbar/toolbar-title.jsx | 5 +++++ src/toolbar/toolbar.jsx | 5 +++++ src/tooltip.jsx | 5 +++++ src/transition-groups/scale-in-child.jsx | 5 +++++ src/transition-groups/scale-in.jsx | 5 +++++ src/transition-groups/slide-in-child.jsx | 5 +++++ src/transition-groups/slide-in.jsx | 5 +++++ 101 files changed, 512 insertions(+) diff --git a/docs/src/app/components/CodeExample/index.jsx b/docs/src/app/components/CodeExample/index.jsx index 02c07fc62b13ba..10f173f7f492ba 100644 --- a/docs/src/app/components/CodeExample/index.jsx +++ b/docs/src/app/components/CodeExample/index.jsx @@ -9,7 +9,11 @@ import muiThemeable from 'material-ui/lib/muiThemeable'; let CodeExample = React.createClass({ propTypes: { + /** + * The MUI Theme to use to render this component with. + */ _muiTheme: React.PropTypes.object.isRequired, + children: React.PropTypes.node, code: React.PropTypes.string.isRequired, layoutSideBySide: React.PropTypes.bool, diff --git a/docs/src/app/components/MobileTearSheet.jsx b/docs/src/app/components/MobileTearSheet.jsx index d1d475d5c45279..a07938622181b7 100644 --- a/docs/src/app/components/MobileTearSheet.jsx +++ b/docs/src/app/components/MobileTearSheet.jsx @@ -11,6 +11,11 @@ const MobileTearSheet = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + children: React.PropTypes.node, height: React.PropTypes.number, }, diff --git a/docs/src/app/components/app-left-nav.jsx b/docs/src/app/components/app-left-nav.jsx index 9f7f989c5a6673..36a0ec7dfb31a0 100644 --- a/docs/src/app/components/app-left-nav.jsx +++ b/docs/src/app/components/app-left-nav.jsx @@ -18,6 +18,11 @@ const AppLeftNav = React.createClass({ mixins: [StylePropable], propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + history: React.PropTypes.object, location: React.PropTypes.object, }, diff --git a/docs/src/app/components/component-doc.jsx b/docs/src/app/components/component-doc.jsx index cc45ec853d49b4..f53aa48957c7f7 100644 --- a/docs/src/app/components/component-doc.jsx +++ b/docs/src/app/components/component-doc.jsx @@ -15,6 +15,11 @@ const ComponentDoc = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + children: React.PropTypes.node, componentInfo: React.PropTypes.array.isRequired, desc: React.PropTypes.oneOfType([ diff --git a/docs/src/app/components/component-info.jsx b/docs/src/app/components/component-info.jsx index 9359f8ebfd9c03..8122762f34abb4 100644 --- a/docs/src/app/components/component-info.jsx +++ b/docs/src/app/components/component-info.jsx @@ -15,6 +15,11 @@ const ComponentInfo = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + infoArray: React.PropTypes.array.isRequired, name: React.PropTypes.string.isRequired, style: React.PropTypes.object, diff --git a/docs/src/app/components/master.jsx b/docs/src/app/components/master.jsx index 2af306d8e507c2..8ed3e24f46b4e8 100644 --- a/docs/src/app/components/master.jsx +++ b/docs/src/app/components/master.jsx @@ -30,6 +30,11 @@ const Master = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + children: React.PropTypes.node, history: React.PropTypes.object, location: React.PropTypes.object, diff --git a/docs/src/app/components/pages/customization/themes.jsx b/docs/src/app/components/pages/customization/themes.jsx index 39c9a789d7b9f6..602748f9cc49c5 100644 --- a/docs/src/app/components/pages/customization/themes.jsx +++ b/docs/src/app/components/pages/customization/themes.jsx @@ -37,6 +37,13 @@ const ThemesPage = React.createClass({ mixins: [StylePropable, StyleResizable], + propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + }, + contextTypes: { muiTheme: React.PropTypes.object, }, diff --git a/docs/src/app/components/pages/get-started/examples.jsx b/docs/src/app/components/pages/get-started/examples.jsx index a28b6b94d25169..d039da52241e37 100644 --- a/docs/src/app/components/pages/get-started/examples.jsx +++ b/docs/src/app/components/pages/get-started/examples.jsx @@ -7,6 +7,13 @@ const DefaultRawTheme = Styles.LightRawTheme; const Examples = React.createClass({ + propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + }, + contextTypes: { muiTheme: React.PropTypes.object, }, diff --git a/docs/src/app/components/pages/get-started/installation.jsx b/docs/src/app/components/pages/get-started/installation.jsx index b813caf110c902..972552c3bb18b9 100644 --- a/docs/src/app/components/pages/get-started/installation.jsx +++ b/docs/src/app/components/pages/get-started/installation.jsx @@ -8,6 +8,13 @@ const DefaultRawTheme = Styles.LightRawTheme; const Installation = React.createClass({ + propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + }, + contextTypes: { muiTheme: React.PropTypes.object, }, diff --git a/docs/src/app/components/pages/get-started/prerequisites.jsx b/docs/src/app/components/pages/get-started/prerequisites.jsx index aa592390290acb..aa9422d57dc8d6 100644 --- a/docs/src/app/components/pages/get-started/prerequisites.jsx +++ b/docs/src/app/components/pages/get-started/prerequisites.jsx @@ -7,6 +7,13 @@ const DefaultRawTheme = Styles.LightRawTheme; const Prerequisites = React.createClass({ + propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + }, + contextTypes: { muiTheme: React.PropTypes.object, }, diff --git a/docs/src/app/components/pages/page-with-nav.jsx b/docs/src/app/components/pages/page-with-nav.jsx index 9b03c36f8e832a..98456f19265453 100644 --- a/docs/src/app/components/pages/page-with-nav.jsx +++ b/docs/src/app/components/pages/page-with-nav.jsx @@ -18,6 +18,11 @@ let PageWithNav = React.createClass({ mixins: [StyleResizable, StylePropable, History], propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + children: React.PropTypes.node, location: React.PropTypes.object, menuItems: React.PropTypes.array, diff --git a/src/TextField/TextField.jsx b/src/TextField/TextField.jsx index b524a29fbc5703..442e1d59c809b5 100644 --- a/src/TextField/TextField.jsx +++ b/src/TextField/TextField.jsx @@ -34,6 +34,11 @@ const TextField = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + children: React.PropTypes.node, /** diff --git a/src/app-bar.jsx b/src/app-bar.jsx index 9e49cbd5c8fcd9..f0e4760204d5bd 100644 --- a/src/app-bar.jsx +++ b/src/app-bar.jsx @@ -28,6 +28,11 @@ const AppBar = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + /** * Can be used to render a tab inside an app bar for instance. */ diff --git a/src/app-canvas.jsx b/src/app-canvas.jsx index 370ce35142566e..eeaaa61bb33025 100644 --- a/src/app-canvas.jsx +++ b/src/app-canvas.jsx @@ -12,6 +12,11 @@ const AppCanvas = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + children: React.PropTypes.node, }, diff --git a/src/auto-complete.jsx b/src/auto-complete.jsx index 91b6d4ab79700d..58118721dc5a61 100644 --- a/src/auto-complete.jsx +++ b/src/auto-complete.jsx @@ -20,6 +20,11 @@ const AutoComplete = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + animated: React.PropTypes.bool, dataSource: React.PropTypes.array, disableFocusRipple: React.PropTypes.bool, diff --git a/src/avatar.jsx b/src/avatar.jsx index cab5f903b8b2dd..4e0d7ca4889983 100644 --- a/src/avatar.jsx +++ b/src/avatar.jsx @@ -24,6 +24,11 @@ const Avatar = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + /** * The backgroundColor of the avatar. Does not apply to image avatars. */ diff --git a/src/badge.jsx b/src/badge.jsx index d665c0cb2ced3a..6c7a9e90ef77a3 100644 --- a/src/badge.jsx +++ b/src/badge.jsx @@ -20,6 +20,11 @@ const Badge = React.createClass({ }; }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + /** * This is the content rendered within the badge. */ diff --git a/src/before-after-wrapper.jsx b/src/before-after-wrapper.jsx index 3b121d0199a1a2..05700e804ee1f4 100644 --- a/src/before-after-wrapper.jsx +++ b/src/before-after-wrapper.jsx @@ -47,6 +47,11 @@ const BeforeAfterWrapper = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + afterElementType: React.PropTypes.string, afterStyle: React.PropTypes.object, beforeElementType: React.PropTypes.string, diff --git a/src/buttons/flat-button-label.jsx b/src/buttons/flat-button-label.jsx index 14c188f909e8e6..56ffa0032a1e5b 100644 --- a/src/buttons/flat-button-label.jsx +++ b/src/buttons/flat-button-label.jsx @@ -16,6 +16,11 @@ const FlatButtonLabel = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + label: React.PropTypes.node, /** diff --git a/src/card/card-actions.jsx b/src/card/card-actions.jsx index cdbc87ca39c394..ad134f07e39140 100644 --- a/src/card/card-actions.jsx +++ b/src/card/card-actions.jsx @@ -46,6 +46,11 @@ const CardActions = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + actAsExpander: React.PropTypes.bool, children: React.PropTypes.node, expandable: React.PropTypes.bool, diff --git a/src/card/card-expandable.jsx b/src/card/card-expandable.jsx index def79514b4c254..853020b6d34ecc 100644 --- a/src/card/card-expandable.jsx +++ b/src/card/card-expandable.jsx @@ -38,6 +38,11 @@ const CardExpandable = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + expanded: React.PropTypes.bool, onExpanding: React.PropTypes.func.isRequired, diff --git a/src/card/card-header.jsx b/src/card/card-header.jsx index b4c69f6fb12896..a276cd9a887f1f 100644 --- a/src/card/card-header.jsx +++ b/src/card/card-header.jsx @@ -40,6 +40,11 @@ const CardHeader = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + actAsExpander: React.PropTypes.bool, avatar: React.PropTypes.node, children: React.PropTypes.node, diff --git a/src/card/card-media.jsx b/src/card/card-media.jsx index 508a3ef172a776..af2c25430faed1 100644 --- a/src/card/card-media.jsx +++ b/src/card/card-media.jsx @@ -40,6 +40,11 @@ const CardMedia = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + actAsExpander: React.PropTypes.bool, children: React.PropTypes.node, expandable: React.PropTypes.bool, diff --git a/src/card/card-text.jsx b/src/card/card-text.jsx index 85a326a6f7346c..11d8d12dbaa0be 100644 --- a/src/card/card-text.jsx +++ b/src/card/card-text.jsx @@ -38,6 +38,11 @@ const CardText = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + actAsExpander: React.PropTypes.bool, children: React.PropTypes.node, color: React.PropTypes.string, diff --git a/src/card/card-title.jsx b/src/card/card-title.jsx index b713d4a04dbe75..b438ddd0ba21ca 100644 --- a/src/card/card-title.jsx +++ b/src/card/card-title.jsx @@ -41,6 +41,11 @@ const CardTitle = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + actAsExpander: React.PropTypes.bool, children: React.PropTypes.node, expandable: React.PropTypes.bool, diff --git a/src/card/card.jsx b/src/card/card.jsx index 98ba40af764060..69920ee2a11e5c 100644 --- a/src/card/card.jsx +++ b/src/card/card.jsx @@ -13,6 +13,11 @@ const Card = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + /** * Whether a click on this card component expands the card. Can be set on any child of the Card component. */ diff --git a/src/checkbox.jsx b/src/checkbox.jsx index 6b694654c5033a..451a7c3784b334 100644 --- a/src/checkbox.jsx +++ b/src/checkbox.jsx @@ -28,6 +28,11 @@ const Checkbox = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + checked: React.PropTypes.bool, checkedIcon: React.PropTypes.element, defaultChecked: React.PropTypes.bool, diff --git a/src/circular-progress.jsx b/src/circular-progress.jsx index a4b33824fe4223..3e25a4c2df6e3d 100644 --- a/src/circular-progress.jsx +++ b/src/circular-progress.jsx @@ -11,6 +11,11 @@ const CircularProgress = React.createClass({ mixins: [StylePropable], propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + color: React.PropTypes.string, innerStyle: React.PropTypes.object, max: React.PropTypes.number, diff --git a/src/date-picker/calendar-toolbar.jsx b/src/date-picker/calendar-toolbar.jsx index 44b95a61b7726e..8ce1415994400a 100644 --- a/src/date-picker/calendar-toolbar.jsx +++ b/src/date-picker/calendar-toolbar.jsx @@ -43,6 +43,11 @@ const CalendarToolbar = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + DateTimeFormat: React.PropTypes.func.isRequired, displayDate: React.PropTypes.object.isRequired, locale: React.PropTypes.string.isRequired, diff --git a/src/date-picker/calendar.jsx b/src/date-picker/calendar.jsx index e3f390f0bc8518..69e3b3e30c0d7b 100644 --- a/src/date-picker/calendar.jsx +++ b/src/date-picker/calendar.jsx @@ -37,6 +37,11 @@ const Calendar = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + DateTimeFormat: React.PropTypes.func.isRequired, disableYearSelection: React.PropTypes.bool, initialDate: React.PropTypes.object, diff --git a/src/date-picker/date-display.jsx b/src/date-picker/date-display.jsx index 1009df84c5b131..38b2119451f8f1 100644 --- a/src/date-picker/date-display.jsx +++ b/src/date-picker/date-display.jsx @@ -16,6 +16,11 @@ const DateDisplay = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + DateTimeFormat: React.PropTypes.func.isRequired, disableYearSelection: React.PropTypes.bool, handleMonthDayClick: React.PropTypes.func, diff --git a/src/date-picker/date-picker-dialog.jsx b/src/date-picker/date-picker-dialog.jsx index d87f73df71c422..9b3dbf23e4f09b 100644 --- a/src/date-picker/date-picker-dialog.jsx +++ b/src/date-picker/date-picker-dialog.jsx @@ -38,6 +38,11 @@ const DatePickerDialog = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + DateTimeFormat: React.PropTypes.func, autoOk: React.PropTypes.bool, container: React.PropTypes.oneOf(['dialog', 'inline']), diff --git a/src/date-picker/date-picker.jsx b/src/date-picker/date-picker.jsx index 647dd7b86c508e..9e34fb0d4a11ed 100644 --- a/src/date-picker/date-picker.jsx +++ b/src/date-picker/date-picker.jsx @@ -30,6 +30,11 @@ const DatePicker = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + DateTimeFormat: React.PropTypes.func, autoOk: React.PropTypes.bool, container: React.PropTypes.oneOf(['dialog', 'inline']), diff --git a/src/date-picker/day-button.jsx b/src/date-picker/day-button.jsx index 4739f62e97cfc1..5f503674ac3f9f 100644 --- a/src/date-picker/day-button.jsx +++ b/src/date-picker/day-button.jsx @@ -17,6 +17,11 @@ const DayButton = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + date: React.PropTypes.object, disabled: React.PropTypes.bool, onKeyboardFocus: React.PropTypes.func, diff --git a/src/date-picker/year-button.jsx b/src/date-picker/year-button.jsx index db91d75b51c5b5..017453fa6ed9d3 100644 --- a/src/date-picker/year-button.jsx +++ b/src/date-picker/year-button.jsx @@ -15,6 +15,11 @@ const YearButton = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + /** * The css class name of the root element. */ diff --git a/src/drop-down-icon.jsx b/src/drop-down-icon.jsx index 885cd1d2c0c45a..f441c1b5092b56 100644 --- a/src/drop-down-icon.jsx +++ b/src/drop-down-icon.jsx @@ -28,6 +28,11 @@ const DropDownIcon = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + children: React.PropTypes.node, closeOnMenuItemTouchTap: React.PropTypes.bool, iconClassName: React.PropTypes.string, diff --git a/src/enhanced-button.jsx b/src/enhanced-button.jsx index 93ab00d8414ba7..1d5131ed221139 100644 --- a/src/enhanced-button.jsx +++ b/src/enhanced-button.jsx @@ -60,6 +60,11 @@ const EnhancedButton = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + centerRipple: React.PropTypes.bool, children: React.PropTypes.node, containerElement: React.PropTypes.oneOfType([ diff --git a/src/enhanced-switch.jsx b/src/enhanced-switch.jsx index 2e1ca38d832bbc..ad21c9d4e077f9 100644 --- a/src/enhanced-switch.jsx +++ b/src/enhanced-switch.jsx @@ -35,6 +35,11 @@ const EnhancedSwitch = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + checked: React.PropTypes.bool, /** diff --git a/src/enhanced-textarea.jsx b/src/enhanced-textarea.jsx index c958932d8e2466..1ac8b03621e15f 100644 --- a/src/enhanced-textarea.jsx +++ b/src/enhanced-textarea.jsx @@ -49,6 +49,11 @@ const EnhancedTextarea = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + defaultValue: React.PropTypes.any, disabled: React.PropTypes.bool, onChange: React.PropTypes.func, diff --git a/src/flat-button.jsx b/src/flat-button.jsx index db88e2ff074076..135c92fa2ab2b9 100644 --- a/src/flat-button.jsx +++ b/src/flat-button.jsx @@ -65,6 +65,11 @@ const FlatButton = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + backgroundColor: React.PropTypes.string, children: React.PropTypes.node, disabled: React.PropTypes.bool, diff --git a/src/floating-action-button.jsx b/src/floating-action-button.jsx index 2a70d490a46843..ea7403469e98e3 100644 --- a/src/floating-action-button.jsx +++ b/src/floating-action-button.jsx @@ -33,6 +33,11 @@ const FloatingActionButton = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + backgroundColor: React.PropTypes.string, children: React.PropTypes.node, disabled: React.PropTypes.bool, diff --git a/src/font-icon.jsx b/src/font-icon.jsx index 601dbb3e0d68d6..1618d327c53101 100644 --- a/src/font-icon.jsx +++ b/src/font-icon.jsx @@ -24,6 +24,11 @@ const FontIcon = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + color: React.PropTypes.string, hoverColor: React.PropTypes.string, onMouseEnter: React.PropTypes.func, diff --git a/src/grid-list/grid-list.jsx b/src/grid-list/grid-list.jsx index 728197a31513ee..d5304d9fc66ccd 100644 --- a/src/grid-list/grid-list.jsx +++ b/src/grid-list/grid-list.jsx @@ -14,6 +14,11 @@ const GridList = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + cellHeight: React.PropTypes.number, children: React.PropTypes.node, cols: React.PropTypes.number, diff --git a/src/grid-list/grid-tile.jsx b/src/grid-list/grid-tile.jsx index adb7fa801c2b75..d15234ff0cb1e1 100644 --- a/src/grid-list/grid-tile.jsx +++ b/src/grid-list/grid-tile.jsx @@ -15,6 +15,11 @@ const GridTile = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + actionIcon: React.PropTypes.element, actionPosition: React.PropTypes.oneOf(['left', 'right']), children: React.PropTypes.node, diff --git a/src/hoc/selectable-enhance.js b/src/hoc/selectable-enhance.js index 18925c6e77f73d..07c1b94c1813e1 100644 --- a/src/hoc/selectable-enhance.js +++ b/src/hoc/selectable-enhance.js @@ -18,6 +18,11 @@ export const SelectableContainerEnhance = (Component) => { displayName: `Selectable${Component.displayName}`, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + children: React.PropTypes.node, selectedItemStyle: React.PropTypes.object, valueLink: React.PropTypes.shape({ diff --git a/src/icon-button.jsx b/src/icon-button.jsx index e44881d385462c..eef8efdb5ce67b 100644 --- a/src/icon-button.jsx +++ b/src/icon-button.jsx @@ -54,6 +54,11 @@ const IconButton = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + children: React.PropTypes.node, /** diff --git a/src/ink-bar.jsx b/src/ink-bar.jsx index 3f4b214c658207..cae85b746ea9d9 100644 --- a/src/ink-bar.jsx +++ b/src/ink-bar.jsx @@ -22,6 +22,11 @@ const InkBar = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + color: React.PropTypes.string, left: React.PropTypes.string.isRequired, diff --git a/src/left-nav.jsx b/src/left-nav.jsx index d2cb627e3e32ac..5a259185518713 100644 --- a/src/left-nav.jsx +++ b/src/left-nav.jsx @@ -41,6 +41,11 @@ const LeftNav = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + /** * The contents of the `LeftNav` */ diff --git a/src/linear-progress.jsx b/src/linear-progress.jsx index 3b995cf36a5102..3804c03b5d0202 100644 --- a/src/linear-progress.jsx +++ b/src/linear-progress.jsx @@ -10,6 +10,11 @@ const LinearProgress = React.createClass({ mixins: [StylePropable], propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + color: React.PropTypes.string, max: React.PropTypes.number, min: React.PropTypes.number, diff --git a/src/lists/list-item.jsx b/src/lists/list-item.jsx index db03365e6239af..7e53a2ab9fb4aa 100644 --- a/src/lists/list-item.jsx +++ b/src/lists/list-item.jsx @@ -26,6 +26,11 @@ const ListItem = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + autoGenerateNestedIndicator: React.PropTypes.bool, children: React.PropTypes.node, disableKeyboardFocus: React.PropTypes.bool, diff --git a/src/lists/list.jsx b/src/lists/list.jsx index 84c3758aeedb4c..1080c0b2cb8e7c 100644 --- a/src/lists/list.jsx +++ b/src/lists/list.jsx @@ -19,6 +19,11 @@ const List = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + children: React.PropTypes.node, insetSubheader: React.PropTypes.bool, diff --git a/src/menu/link-menu-item.jsx b/src/menu/link-menu-item.jsx index 08d2e12b5cdc80..160e1e099c70ac 100644 --- a/src/menu/link-menu-item.jsx +++ b/src/menu/link-menu-item.jsx @@ -12,6 +12,11 @@ const LinkMenuItem = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + active: React.PropTypes.bool, className: React.PropTypes.string, disabled: React.PropTypes.bool, diff --git a/src/menu/menu-item.jsx b/src/menu/menu-item.jsx index 3373f13786a6c1..f26bdda9aa6a1f 100644 --- a/src/menu/menu-item.jsx +++ b/src/menu/menu-item.jsx @@ -22,6 +22,11 @@ const MenuItem = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + active: React.PropTypes.bool, attribute: React.PropTypes.string, children: React.PropTypes.node, diff --git a/src/menu/menu.jsx b/src/menu/menu.jsx index ec2ff3b3ad86c9..31143e8e429c84 100644 --- a/src/menu/menu.jsx +++ b/src/menu/menu.jsx @@ -26,6 +26,11 @@ const NestedMenuItem = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + active: React.PropTypes.bool, disabled: React.PropTypes.bool, index: React.PropTypes.number.isRequired, diff --git a/src/menu/subheader-menu-item.jsx b/src/menu/subheader-menu-item.jsx index 2f1820c86208aa..4292649de2df64 100644 --- a/src/menu/subheader-menu-item.jsx +++ b/src/menu/subheader-menu-item.jsx @@ -13,6 +13,11 @@ const SubheaderMenuItem = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + className: React.PropTypes.string, firstChild: React.PropTypes.bool, index: React.PropTypes.number.isRequired, diff --git a/src/menus/icon-menu.jsx b/src/menus/icon-menu.jsx index 4f67394d6f7c86..4f117977bdf185 100644 --- a/src/menus/icon-menu.jsx +++ b/src/menus/icon-menu.jsx @@ -20,6 +20,11 @@ const IconMenu = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + anchorOrigin: PropTypes.origin, children: React.PropTypes.node, diff --git a/src/menus/menu-divider.jsx b/src/menus/menu-divider.jsx index b4cede602a1940..361f8097eb9e93 100644 --- a/src/menus/menu-divider.jsx +++ b/src/menus/menu-divider.jsx @@ -6,6 +6,11 @@ import warning from 'warning'; const MenuDivider = React.createClass({ propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + /** * Override the inline-styles of the root element. */ diff --git a/src/menus/menu-item.jsx b/src/menus/menu-item.jsx index 0d614420523a54..201e7e44464dbc 100644 --- a/src/menus/menu-item.jsx +++ b/src/menus/menu-item.jsx @@ -26,6 +26,11 @@ const MenuItem = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + checked: React.PropTypes.bool, children: React.PropTypes.node, desktop: React.PropTypes.bool, diff --git a/src/menus/menu.jsx b/src/menus/menu.jsx index e8857ad9a90cf2..de33b6eaee8235 100644 --- a/src/menus/menu.jsx +++ b/src/menus/menu.jsx @@ -26,6 +26,11 @@ const Menu = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + animated: React.PropTypes.bool, autoWidth: React.PropTypes.bool, children: React.PropTypes.node, diff --git a/src/overlay.jsx b/src/overlay.jsx index 7b9aa87c319a24..d206ced149f1d7 100644 --- a/src/overlay.jsx +++ b/src/overlay.jsx @@ -23,6 +23,11 @@ const Overlay = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + autoLockScrolling: React.PropTypes.bool, show: React.PropTypes.bool.isRequired, diff --git a/src/paper.jsx b/src/paper.jsx index fbf6f56548fbc6..7cd857b430f369 100644 --- a/src/paper.jsx +++ b/src/paper.jsx @@ -42,6 +42,11 @@ const Paper = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + children: React.PropTypes.node, circle: React.PropTypes.bool, rounded: React.PropTypes.bool, diff --git a/src/popover/popover-animation-from-top.jsx b/src/popover/popover-animation-from-top.jsx index f63c8eaf6f27aa..4e811255e09241 100644 --- a/src/popover/popover-animation-from-top.jsx +++ b/src/popover/popover-animation-from-top.jsx @@ -10,6 +10,11 @@ const PopoverAnimationFromTop = React.createClass({ mixins: [StylePropable], propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + children: React.PropTypes.node, className: React.PropTypes.string, open: React.PropTypes.bool.isRequired, diff --git a/src/popover/popover-default-animation.jsx b/src/popover/popover-default-animation.jsx index 09b73c1cfbf592..b977dd7b920ae4 100644 --- a/src/popover/popover-default-animation.jsx +++ b/src/popover/popover-default-animation.jsx @@ -10,6 +10,11 @@ const PopoverDefaultAnimation = React.createClass({ mixins: [StylePropable], propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + children: React.PropTypes.node, /** diff --git a/src/popover/popover.jsx b/src/popover/popover.jsx index 8b377c9aa1f060..ef45e401c3d48a 100644 --- a/src/popover/popover.jsx +++ b/src/popover/popover.jsx @@ -18,6 +18,11 @@ const Popover = React.createClass({ ], propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + anchorEl: React.PropTypes.object, anchorOrigin: PropTypes.origin, animated: React.PropTypes.bool, diff --git a/src/radio-button-group.jsx b/src/radio-button-group.jsx index 7e6354607f4faf..3ef286048dbfe8 100644 --- a/src/radio-button-group.jsx +++ b/src/radio-button-group.jsx @@ -25,6 +25,11 @@ const RadioButtonGroup = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + children: React.PropTypes.node, /** diff --git a/src/radio-button.jsx b/src/radio-button.jsx index 3887b5ff02799b..43c0c59905daea 100644 --- a/src/radio-button.jsx +++ b/src/radio-button.jsx @@ -40,6 +40,11 @@ const RadioButton = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + checked: React.PropTypes.bool, disabled: React.PropTypes.bool, iconStyle: React.PropTypes.object, diff --git a/src/raised-button.jsx b/src/raised-button.jsx index 747a431845af30..30923965c90eb7 100644 --- a/src/raised-button.jsx +++ b/src/raised-button.jsx @@ -40,6 +40,11 @@ const RaisedButton = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + backgroundColor: React.PropTypes.string, children: React.PropTypes.node, diff --git a/src/refresh-indicator.jsx b/src/refresh-indicator.jsx index d33756e462abd6..836fdf4bb94204 100644 --- a/src/refresh-indicator.jsx +++ b/src/refresh-indicator.jsx @@ -16,6 +16,11 @@ const RefreshIndicator = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + color: React.PropTypes.string, left: React.PropTypes.number.isRequired, loadingColor: React.PropTypes.string, diff --git a/src/render-to-layer.jsx b/src/render-to-layer.jsx index ba31794948de6b..b02bd0a1028edb 100644 --- a/src/render-to-layer.jsx +++ b/src/render-to-layer.jsx @@ -8,6 +8,11 @@ import ThemeManager from './styles/theme-manager'; const RenderToLayer = React.createClass({ propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + componentClickAway: React.PropTypes.func, open: React.PropTypes.bool.isRequired, render: React.PropTypes.func.isRequired, diff --git a/src/select-field.jsx b/src/select-field.jsx index 72e11f5a0d924d..5274da08e739ae 100644 --- a/src/select-field.jsx +++ b/src/select-field.jsx @@ -27,6 +27,11 @@ const SelectField = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + autoWidth: React.PropTypes.bool, children: React.PropTypes.node, disabled: React.PropTypes.bool, diff --git a/src/slider.jsx b/src/slider.jsx index d103786f9bbad2..88485d820e2235 100644 --- a/src/slider.jsx +++ b/src/slider.jsx @@ -50,6 +50,11 @@ const Slider = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + defaultValue: valueInRangePropType, description: React.PropTypes.string, disableFocusRipple: React.PropTypes.bool, diff --git a/src/snackbar.jsx b/src/snackbar.jsx index 760225f899ea07..ac8aba588afa36 100644 --- a/src/snackbar.jsx +++ b/src/snackbar.jsx @@ -52,6 +52,11 @@ const Snackbar = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + /** * The name of the action on the snackbar. */ diff --git a/src/svg-icon.jsx b/src/svg-icon.jsx index b4b0900ba94779..49d68259e53340 100644 --- a/src/svg-icon.jsx +++ b/src/svg-icon.jsx @@ -15,6 +15,11 @@ const SvgIcon = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + children: React.PropTypes.node, color: React.PropTypes.string, hoverColor: React.PropTypes.string, diff --git a/src/table/table-body.jsx b/src/table/table-body.jsx index 6c97ebfe0dbaee..b54bb2fa58b23c 100644 --- a/src/table/table-body.jsx +++ b/src/table/table-body.jsx @@ -30,6 +30,11 @@ const TableBody = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + allRowsSelected: React.PropTypes.bool, children: React.PropTypes.node, diff --git a/src/table/table-footer.jsx b/src/table/table-footer.jsx index 0315e4261f4ae7..9925d973d317e3 100644 --- a/src/table/table-footer.jsx +++ b/src/table/table-footer.jsx @@ -15,6 +15,11 @@ const TableFooter = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + adjustForCheckbox: React.PropTypes.bool, children: React.PropTypes.node, diff --git a/src/table/table-header-column.jsx b/src/table/table-header-column.jsx index 85440d6a0d6514..7c4ddaedb219a5 100644 --- a/src/table/table-header-column.jsx +++ b/src/table/table-header-column.jsx @@ -13,6 +13,11 @@ const TableHeaderColumn = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + children: React.PropTypes.node, /** diff --git a/src/table/table-header.jsx b/src/table/table-header.jsx index 39102c8596bbab..f09632c21751b1 100644 --- a/src/table/table-header.jsx +++ b/src/table/table-header.jsx @@ -16,6 +16,11 @@ const TableHeader = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + adjustForCheckbox: React.PropTypes.bool, children: React.PropTypes.node, diff --git a/src/table/table-row-column.jsx b/src/table/table-row-column.jsx index 06e29ae0692b8c..ce8f9bec27bac3 100644 --- a/src/table/table-row-column.jsx +++ b/src/table/table-row-column.jsx @@ -14,6 +14,11 @@ const TableRowColumn = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + children: React.PropTypes.node, /** diff --git a/src/table/table-row.jsx b/src/table/table-row.jsx index 18b85ee8cd3ffd..6ef8afc035c2b9 100644 --- a/src/table/table-row.jsx +++ b/src/table/table-row.jsx @@ -12,6 +12,11 @@ const TableRow = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + children: React.PropTypes.node, /** diff --git a/src/table/table.jsx b/src/table/table.jsx index c9059a65bd1fbd..31e58b1bc4e526 100644 --- a/src/table/table.jsx +++ b/src/table/table.jsx @@ -13,6 +13,11 @@ const Table = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + allRowsSelected: React.PropTypes.bool, bodyStyle: React.PropTypes.object, children: React.PropTypes.node, diff --git a/src/tabs/tab.jsx b/src/tabs/tab.jsx index 8fc9f4e4a7fb50..e2654a5306c004 100644 --- a/src/tabs/tab.jsx +++ b/src/tabs/tab.jsx @@ -14,6 +14,11 @@ const Tab = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + /** * The css class name of the root element. */ diff --git a/src/tabs/tabs.jsx b/src/tabs/tabs.jsx index 7d3cbf34679d09..5f0e95ca42864d 100644 --- a/src/tabs/tabs.jsx +++ b/src/tabs/tabs.jsx @@ -21,6 +21,11 @@ const Tabs = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + /** * Should be used to pass Tab components. */ diff --git a/src/time-picker/clock-button.jsx b/src/time-picker/clock-button.jsx index c43bba07f0d398..5e6a69d77d8779 100644 --- a/src/time-picker/clock-button.jsx +++ b/src/time-picker/clock-button.jsx @@ -14,6 +14,11 @@ const ClockButton = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + children: React.PropTypes.node, /** diff --git a/src/time-picker/clock-hours.jsx b/src/time-picker/clock-hours.jsx index 71cc578ad2156f..125135eadbe068 100644 --- a/src/time-picker/clock-hours.jsx +++ b/src/time-picker/clock-hours.jsx @@ -57,6 +57,11 @@ const ClockHours = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + format: React.PropTypes.oneOf(['ampm', '24hr']), initialHours: React.PropTypes.number, onChange: React.PropTypes.func, diff --git a/src/time-picker/clock-minutes.jsx b/src/time-picker/clock-minutes.jsx index e16019b1db5ccf..a3af1f3d3bb0af 100644 --- a/src/time-picker/clock-minutes.jsx +++ b/src/time-picker/clock-minutes.jsx @@ -32,6 +32,11 @@ const ClockMinutes = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + initialMinutes: React.PropTypes.number, onChange: React.PropTypes.func, }, diff --git a/src/time-picker/clock-number.jsx b/src/time-picker/clock-number.jsx index df114bd626dc13..ad588c5bce8c00 100644 --- a/src/time-picker/clock-number.jsx +++ b/src/time-picker/clock-number.jsx @@ -12,6 +12,11 @@ const ClockNumber = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + isSelected: React.PropTypes.bool, onSelected: React.PropTypes.func, type: React.PropTypes.oneOf(['hour', 'minute']), diff --git a/src/time-picker/clock-pointer.jsx b/src/time-picker/clock-pointer.jsx index b7831bc50704b2..047694e682f39e 100644 --- a/src/time-picker/clock-pointer.jsx +++ b/src/time-picker/clock-pointer.jsx @@ -12,6 +12,11 @@ const ClockPointer = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + hasSelected: React.PropTypes.bool, type: React.PropTypes.oneOf(['hour', 'minute']), value: React.PropTypes.number, diff --git a/src/time-picker/clock.jsx b/src/time-picker/clock.jsx index e85becdbb546eb..ef42c8c34cb6d2 100644 --- a/src/time-picker/clock.jsx +++ b/src/time-picker/clock.jsx @@ -13,6 +13,11 @@ const Clock = React.createClass({ mixins: [StylePropable], propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + format: React.PropTypes.oneOf(['ampm', '24hr']), initialTime: React.PropTypes.object, isActive: React.PropTypes.bool, diff --git a/src/time-picker/time-display.jsx b/src/time-picker/time-display.jsx index fbdfc6014d87ec..4a05206d3cbf26 100644 --- a/src/time-picker/time-display.jsx +++ b/src/time-picker/time-display.jsx @@ -12,6 +12,11 @@ const TimeDisplay = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + affix: React.PropTypes.oneOf(['', 'pm', 'am']), format: React.PropTypes.oneOf(['ampm', '24hr']), mode: React.PropTypes.oneOf(['hour', 'minute']), diff --git a/src/time-picker/time-picker-dialog.jsx b/src/time-picker/time-picker-dialog.jsx index 6ee9f79b24c5bd..f78382d0edd68a 100644 --- a/src/time-picker/time-picker-dialog.jsx +++ b/src/time-picker/time-picker-dialog.jsx @@ -17,6 +17,11 @@ const TimePickerDialog = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + autoOk: React.PropTypes.bool, format: React.PropTypes.oneOf(['ampm', '24hr']), initialTime: React.PropTypes.object, diff --git a/src/time-picker/time-picker.jsx b/src/time-picker/time-picker.jsx index fb09cbd2e2912e..5cae68c89360ce 100644 --- a/src/time-picker/time-picker.jsx +++ b/src/time-picker/time-picker.jsx @@ -19,6 +19,11 @@ const TimePicker = React.createClass({ mixins: [StylePropable, WindowListenable], propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + autoOk: React.PropTypes.bool, defaultTime: React.PropTypes.object, format: React.PropTypes.oneOf(['ampm', '24hr']), diff --git a/src/toggle.jsx b/src/toggle.jsx index 64c0eb42d8780f..d21e16013267b5 100644 --- a/src/toggle.jsx +++ b/src/toggle.jsx @@ -17,6 +17,11 @@ const Toggle = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + defaultToggled: React.PropTypes.bool, disabled: React.PropTypes.bool, elementStyle: React.PropTypes.object, diff --git a/src/toolbar/toolbar-group.jsx b/src/toolbar/toolbar-group.jsx index 01e0ef99dea044..278f95c8450c29 100644 --- a/src/toolbar/toolbar-group.jsx +++ b/src/toolbar/toolbar-group.jsx @@ -13,6 +13,11 @@ const ToolbarGroup = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + /** * Can be any node or number of nodes. */ diff --git a/src/toolbar/toolbar-separator.jsx b/src/toolbar/toolbar-separator.jsx index 76abdd886d7521..c7b0801768f153 100644 --- a/src/toolbar/toolbar-separator.jsx +++ b/src/toolbar/toolbar-separator.jsx @@ -12,6 +12,11 @@ const ToolbarSeparator = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + /** * The css class name of the root element. */ diff --git a/src/toolbar/toolbar-title.jsx b/src/toolbar/toolbar-title.jsx index 64475763990167..d91af437fd84c1 100644 --- a/src/toolbar/toolbar-title.jsx +++ b/src/toolbar/toolbar-title.jsx @@ -12,6 +12,11 @@ const ToolbarTitle = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + /** * The css class name of the root element. */ diff --git a/src/toolbar/toolbar.jsx b/src/toolbar/toolbar.jsx index 8df65062b95369..e69022d872a19b 100644 --- a/src/toolbar/toolbar.jsx +++ b/src/toolbar/toolbar.jsx @@ -12,6 +12,11 @@ const Toolbar = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + /** * Can be a `ToolbarGroup` to render a group of related items. */ diff --git a/src/tooltip.jsx b/src/tooltip.jsx index 17425fdbcf1825..413d98335e5295 100644 --- a/src/tooltip.jsx +++ b/src/tooltip.jsx @@ -15,6 +15,11 @@ const Tooltip = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + /** * The css class name of the root element. */ diff --git a/src/transition-groups/scale-in-child.jsx b/src/transition-groups/scale-in-child.jsx index 7f3286cd9d913d..fdae37cf9c73da 100644 --- a/src/transition-groups/scale-in-child.jsx +++ b/src/transition-groups/scale-in-child.jsx @@ -41,6 +41,11 @@ const ScaleInChild = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + children: React.PropTypes.node, enterDelay: React.PropTypes.number, maxScale: React.PropTypes.number, diff --git a/src/transition-groups/scale-in.jsx b/src/transition-groups/scale-in.jsx index c0eb04e9f9a4ce..513de6321b5183 100644 --- a/src/transition-groups/scale-in.jsx +++ b/src/transition-groups/scale-in.jsx @@ -40,6 +40,11 @@ const ScaleIn = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + childStyle: React.PropTypes.object, children: React.PropTypes.node, enterDelay: React.PropTypes.number, diff --git a/src/transition-groups/slide-in-child.jsx b/src/transition-groups/slide-in-child.jsx index df06b3fcca74a0..0f0819cef9dff3 100644 --- a/src/transition-groups/slide-in-child.jsx +++ b/src/transition-groups/slide-in-child.jsx @@ -40,6 +40,11 @@ const SlideInChild = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + children: React.PropTypes.node, direction: React.PropTypes.string, enterDelay: React.PropTypes.number, diff --git a/src/transition-groups/slide-in.jsx b/src/transition-groups/slide-in.jsx index 1d22e4e82feb26..3ecba3976c8048 100644 --- a/src/transition-groups/slide-in.jsx +++ b/src/transition-groups/slide-in.jsx @@ -39,6 +39,11 @@ const SlideIn = React.createClass({ }, propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + childStyle: React.PropTypes.object, children: React.PropTypes.node, direction: React.PropTypes.oneOf(['left', 'right', 'up', 'down']), From 4b8b38de09512f7cebfecf845bf89c59612c8bb3 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 01:32:54 +0330 Subject: [PATCH 10/70] patch theme-wrapper to work with new naming convention --- src/theme-wrapper.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/theme-wrapper.jsx b/src/theme-wrapper.jsx index e8e7a1c4ba1601..09238b5b3f536e 100644 --- a/src/theme-wrapper.jsx +++ b/src/theme-wrapper.jsx @@ -7,12 +7,12 @@ export default React.createClass({ }, childContextTypes: { - muiTheme: React.PropTypes.object, + _muiTheme: React.PropTypes.object, }, getChildContext() { return { - muiTheme: this.props.theme, + _muiTheme: this.props.theme, }; }, From 77f030de761b6a888152b9abb9b7b6272a53eca0 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 01:53:38 +0330 Subject: [PATCH 11/70] eslint fixes --- src/TextField/TextFieldUnderline.jsx | 4 ++-- src/date-picker/calendar-toolbar.jsx | 2 +- src/date-picker/calendar.jsx | 2 +- src/date-picker/date-display.jsx | 2 +- src/date-picker/date-picker-dialog.jsx | 2 +- src/date-picker/date-picker.jsx | 2 +- src/hoc/selectable-enhance.js | 8 ++++---- 7 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/TextField/TextFieldUnderline.jsx b/src/TextField/TextFieldUnderline.jsx index 29730a27331ea5..1fee306060c974 100644 --- a/src/TextField/TextFieldUnderline.jsx +++ b/src/TextField/TextFieldUnderline.jsx @@ -117,8 +117,8 @@ const TextFieldUnderline = (props) => { return (
-
-
+
+
); }; diff --git a/src/date-picker/calendar-toolbar.jsx b/src/date-picker/calendar-toolbar.jsx index 8ce1415994400a..48035f9c98f36f 100644 --- a/src/date-picker/calendar-toolbar.jsx +++ b/src/date-picker/calendar-toolbar.jsx @@ -43,12 +43,12 @@ const CalendarToolbar = React.createClass({ }, propTypes: { + DateTimeFormat: React.PropTypes.func.isRequired, /** * The MUI Theme to use to render this component with. */ _muiTheme: React.PropTypes.object.isRequired, - DateTimeFormat: React.PropTypes.func.isRequired, displayDate: React.PropTypes.object.isRequired, locale: React.PropTypes.string.isRequired, nextMonth: React.PropTypes.bool, diff --git a/src/date-picker/calendar.jsx b/src/date-picker/calendar.jsx index 69e3b3e30c0d7b..697595883c18bc 100644 --- a/src/date-picker/calendar.jsx +++ b/src/date-picker/calendar.jsx @@ -37,12 +37,12 @@ const Calendar = React.createClass({ }, propTypes: { + DateTimeFormat: React.PropTypes.func.isRequired, /** * The MUI Theme to use to render this component with. */ _muiTheme: React.PropTypes.object.isRequired, - DateTimeFormat: React.PropTypes.func.isRequired, disableYearSelection: React.PropTypes.bool, initialDate: React.PropTypes.object, locale: React.PropTypes.string.isRequired, diff --git a/src/date-picker/date-display.jsx b/src/date-picker/date-display.jsx index 38b2119451f8f1..a113bab1296ab8 100644 --- a/src/date-picker/date-display.jsx +++ b/src/date-picker/date-display.jsx @@ -16,12 +16,12 @@ const DateDisplay = React.createClass({ }, propTypes: { + DateTimeFormat: React.PropTypes.func.isRequired, /** * The MUI Theme to use to render this component with. */ _muiTheme: React.PropTypes.object.isRequired, - DateTimeFormat: React.PropTypes.func.isRequired, disableYearSelection: React.PropTypes.bool, handleMonthDayClick: React.PropTypes.func, handleYearClick: React.PropTypes.func, diff --git a/src/date-picker/date-picker-dialog.jsx b/src/date-picker/date-picker-dialog.jsx index 9b3dbf23e4f09b..1097171b2a8a09 100644 --- a/src/date-picker/date-picker-dialog.jsx +++ b/src/date-picker/date-picker-dialog.jsx @@ -38,12 +38,12 @@ const DatePickerDialog = React.createClass({ }, propTypes: { + DateTimeFormat: React.PropTypes.func, /** * The MUI Theme to use to render this component with. */ _muiTheme: React.PropTypes.object.isRequired, - DateTimeFormat: React.PropTypes.func, autoOk: React.PropTypes.bool, container: React.PropTypes.oneOf(['dialog', 'inline']), disableYearSelection: React.PropTypes.bool, diff --git a/src/date-picker/date-picker.jsx b/src/date-picker/date-picker.jsx index 9e34fb0d4a11ed..2860408b3b0402 100644 --- a/src/date-picker/date-picker.jsx +++ b/src/date-picker/date-picker.jsx @@ -30,12 +30,12 @@ const DatePicker = React.createClass({ }, propTypes: { + DateTimeFormat: React.PropTypes.func, /** * The MUI Theme to use to render this component with. */ _muiTheme: React.PropTypes.object.isRequired, - DateTimeFormat: React.PropTypes.func, autoOk: React.PropTypes.bool, container: React.PropTypes.oneOf(['dialog', 'inline']), defaultDate: React.PropTypes.object, diff --git a/src/hoc/selectable-enhance.js b/src/hoc/selectable-enhance.js index 07c1b94c1813e1..8ebb1af00030d2 100644 --- a/src/hoc/selectable-enhance.js +++ b/src/hoc/selectable-enhance.js @@ -18,10 +18,10 @@ export const SelectableContainerEnhance = (Component) => { displayName: `Selectable${Component.displayName}`, propTypes: { - /** - * The MUI Theme to use to render this component with. - */ - _muiTheme: React.PropTypes.object.isRequired, + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, children: React.PropTypes.node, selectedItemStyle: React.PropTypes.object, From 346cff1ff42376112f8b04d1fa7e262296a98214 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 02:31:53 +0330 Subject: [PATCH 12/70] migrate TextField to use the new theme handling --- src/TextField/TextField.jsx | 35 ++++++++++----------------------- src/TextField/TextFieldHint.jsx | 8 ++++---- 2 files changed, 14 insertions(+), 29 deletions(-) diff --git a/src/TextField/TextField.jsx b/src/TextField/TextField.jsx index 442e1d59c809b5..3450517fbf7c33 100644 --- a/src/TextField/TextField.jsx +++ b/src/TextField/TextField.jsx @@ -5,11 +5,10 @@ import StylePropable from '../mixins/style-propable'; import Transitions from '../styles/transitions'; import UniqueId from '../utils/unique-id'; import EnhancedTextarea from '../enhanced-textarea'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; import ContextPure from '../mixins/context-pure'; import TextFieldHint from './TextFieldHint'; import TextFieldUnderline from './TextFieldUnderline'; +import muiThemeable from '../muiThemeable'; import warning from 'warning'; /** @@ -22,17 +21,13 @@ function isValid(value) { return Boolean(value || value === 0); } -const TextField = React.createClass({ +let TextField = React.createClass({ mixins: [ ContextPure, StylePropable, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -78,17 +73,6 @@ const TextField = React.createClass({ value: React.PropTypes.any, }, - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - getDefaultProps() { return { fullWidth: false, @@ -126,7 +110,6 @@ const 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), }; }, @@ -134,9 +117,8 @@ const TextField = React.createClass({ this._uniqueId = UniqueId.generate(); }, - componentWillReceiveProps(nextProps, nextContext) { + componentWillReceiveProps(nextProps) { let newState = {}; - newState.muiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; newState.errorText = nextProps.errorText; if (nextProps.children && nextProps.children.props) { @@ -170,7 +152,7 @@ const TextField = React.createClass({ backgroundColor, hintColor, errorColor, - } = this.constructor.getRelevantContextKeys(this.state.muiTheme); + } = this.constructor.getRelevantContextKeys(props._muiTheme); let styles = { root: { @@ -181,7 +163,7 @@ const TextField = React.createClass({ display: 'inline-block', position: 'relative', backgroundColor: backgroundColor, - fontFamily: this.state.muiTheme.rawTheme.fontFamily, + fontFamily: props._muiTheme.baseTheme.fontFamily, transition: Transitions.easeOut('200ms', 'height'), }, error: { @@ -261,6 +243,7 @@ const TextField = React.createClass({ render() { let { + _muiTheme, className, disabled, errorStyle, @@ -350,7 +333,7 @@ const TextField = React.createClass({ {floatingLabelTextElement} {hintText ? : null @@ -467,4 +450,6 @@ const TextField = React.createClass({ }); +TextField = muiThemeable(TextField); + export default TextField; diff --git a/src/TextField/TextFieldHint.jsx b/src/TextField/TextFieldHint.jsx index 2b5e876351e905..a91bbf67594228 100644 --- a/src/TextField/TextFieldHint.jsx +++ b/src/TextField/TextFieldHint.jsx @@ -6,7 +6,7 @@ const propTypes = { /** * The material-ui theme applied to this component. */ - muiTheme: React.PropTypes.object.isRequired, + _muiTheme: React.PropTypes.object.isRequired, /** * True if the hint text should be visible. @@ -31,7 +31,7 @@ const defaultProps = { const TextFieldHint = (props) => { const { - muiTheme, + _muiTheme, show, style, text, @@ -41,7 +41,7 @@ const TextFieldHint = (props) => { textField: { hintColor, }, - } = muiTheme; + } = _muiTheme; const styles = { root: { @@ -55,7 +55,7 @@ const TextFieldHint = (props) => { return (
{text} + style={styleUtils.prepareStyles(_muiTheme, styles.root, style)}>{text}
); }; From 713d03121017bd02027a34b8527dda7f1c1395d5 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 02:37:24 +0330 Subject: [PATCH 13/70] migrate menu to use the new theme handling --- src/menus/icon-menu.jsx | 28 +--------------------------- src/menus/menu-divider.jsx | 5 ----- src/menus/menu-item.jsx | 35 ++++++++--------------------------- src/menus/menu.jsx | 33 +++++++-------------------------- 4 files changed, 16 insertions(+), 85 deletions(-) diff --git a/src/menus/icon-menu.jsx b/src/menus/icon-menu.jsx index 4f117977bdf185..a952c656f83767 100644 --- a/src/menus/icon-menu.jsx +++ b/src/menus/icon-menu.jsx @@ -3,9 +3,7 @@ import ReactDOM from 'react-dom'; import StylePropable from '../mixins/style-propable'; import Events from '../utils/events'; import PropTypes from '../utils/prop-types'; -import Menu from '../menus/menu'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import Menu from './menu'; import Popover from '../popover/popover'; import warning from 'warning'; @@ -15,16 +13,7 @@ const IconMenu = React.createClass({ StylePropable, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { - /** - * The MUI Theme to use to render this component with. - */ - _muiTheme: React.PropTypes.object.isRequired, - anchorOrigin: PropTypes.origin, children: React.PropTypes.node, @@ -78,24 +67,12 @@ const IconMenu = React.createClass({ }; }, - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - getInitialState() { if (process.env.NODE_ENV !== 'production') { this._warningIfNeeded(); } return { - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), iconButtonRef: this.props.iconButtonElement.props.ref || 'iconButton', menuInitiallyKeyboardFocused: false, open: false, @@ -109,9 +86,6 @@ const IconMenu = React.createClass({ this._warningIfNeeded(); } - let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - this.setState({muiTheme: newMuiTheme}); - if (nextProps.open === true || nextProps.open === false) { this.setState({open: nextProps.open}); } diff --git a/src/menus/menu-divider.jsx b/src/menus/menu-divider.jsx index 361f8097eb9e93..b4cede602a1940 100644 --- a/src/menus/menu-divider.jsx +++ b/src/menus/menu-divider.jsx @@ -6,11 +6,6 @@ import warning from 'warning'; const MenuDivider = React.createClass({ propTypes: { - /** - * The MUI Theme to use to render this component with. - */ - _muiTheme: React.PropTypes.object.isRequired, - /** * Override the inline-styles of the root element. */ diff --git a/src/menus/menu-item.jsx b/src/menus/menu-item.jsx index 201e7e44464dbc..32c231cb94689b 100644 --- a/src/menus/menu-item.jsx +++ b/src/menus/menu-item.jsx @@ -6,25 +6,20 @@ import Colors from '../styles/colors'; import Popover from '../popover/popover'; import CheckIcon from '../svg-icons/navigation/check'; import ListItem from '../lists/list-item'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; import Menu from './menu'; const nestedMenuStyle = { position: 'relative', }; -const MenuItem = React.createClass({ +let MenuItem = React.createClass({ mixins: [ PureRenderMixin, StylePropable, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -55,30 +50,13 @@ const MenuItem = React.createClass({ value: React.PropTypes.any, }, - //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, }; }, - //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}); - + componentWillReceiveProps(nextProps) { if (this.state.open && nextProps.focusState === 'none') { this._onRequestClose(); } @@ -108,6 +86,7 @@ const MenuItem = React.createClass({ render() { const { + _muiTheme, checked, children, desktop, @@ -124,8 +103,8 @@ const MenuItem = React.createClass({ ...other, } = this.props; - const disabledColor = this.state.muiTheme.rawTheme.palette.disabledColor; - const textColor = this.state.muiTheme.rawTheme.palette.textColor; + const disabledColor = _muiTheme.baseTheme.palette.disabledColor; + const textColor = _muiTheme.baseTheme.palette.textColor; const leftIndent = desktop ? 64 : 72; const sidePadding = desktop ? 24 : 16; @@ -266,4 +245,6 @@ const MenuItem = React.createClass({ }, }); +MenuItem = muiThemeable(MenuItem); + export default MenuItem; diff --git a/src/menus/menu.jsx b/src/menus/menu.jsx index de33b6eaee8235..10f02a12718b39 100644 --- a/src/menus/menu.jsx +++ b/src/menus/menu.jsx @@ -10,10 +10,9 @@ import KeyCode from '../utils/key-code'; import PropTypes from '../utils/prop-types'; import List from '../lists/list'; import Paper from '../paper'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; -const Menu = React.createClass({ +let Menu = React.createClass({ mixins: [ StylePropable, @@ -21,10 +20,6 @@ const Menu = React.createClass({ ClickAwayable, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -68,17 +63,6 @@ const Menu = React.createClass({ }; }, - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - getInitialState() { const filteredChildren = this._getFilteredChildren(this.props.children); let selectedIndex = this._getSelectedIndex(this.props, filteredChildren); @@ -87,7 +71,6 @@ const 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), }; }, @@ -119,12 +102,10 @@ const Menu = React.createClass({ componentWillReceiveProps(nextProps, nextContext) { const filteredChildren = this._getFilteredChildren(nextProps.children); let selectedIndex = this._getSelectedIndex(nextProps, filteredChildren); - let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; this.setState({ focusIndex: selectedIndex >= 0 ? selectedIndex : 0, keyWidth: nextProps.desktop ? 64 : 56, - muiTheme: newMuiTheme, }); }, @@ -136,6 +117,7 @@ const Menu = React.createClass({ render() { let { + _muiTheme, animated, autoWidth, children, @@ -157,15 +139,12 @@ const Menu = React.createClass({ let openDown = openDirection.split('-')[0] === 'bottom'; let openLeft = openDirection.split('-')[1] === 'left'; - const muiTheme = this.state.muiTheme; - const rawTheme = muiTheme.rawTheme; - let styles = { root: { //Nested div bacause the List scales x faster than //it scales y transition: animated ? Transitions.easeOut('250ms', 'transform') : null, - zIndex: muiTheme.zIndex.menu, + zIndex: _muiTheme.zIndex.menu, top: openDown ? 0 : null, bottom: !openDown ? 0 : null, left: !openLeft ? 0 : null, @@ -202,7 +181,7 @@ const Menu = React.createClass({ }, selectedMenuItem: { - color: rawTheme.palette.accent1Color, + color: _muiTheme.baseTheme.palette.accent1Color, }, }; @@ -512,4 +491,6 @@ const Menu = React.createClass({ }); +Menu = muiThemeable(Menu); + export default Menu; From 67aac58c1b176c3fe04f0ec40f32e84043dd591e Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 02:37:38 +0330 Subject: [PATCH 14/70] remove theme from before-after-wrapper --- src/before-after-wrapper.jsx | 35 ----------------------------------- 1 file changed, 35 deletions(-) diff --git a/src/before-after-wrapper.jsx b/src/before-after-wrapper.jsx index 05700e804ee1f4..291170130b7bd9 100644 --- a/src/before-after-wrapper.jsx +++ b/src/before-after-wrapper.jsx @@ -1,8 +1,6 @@ import React from 'react'; import StylePropable from './mixins/style-propable'; import AutoPrefix from './styles/auto-prefix'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; /** * BeforeAfterWrapper @@ -42,16 +40,7 @@ const BeforeAfterWrapper = React.createClass({ mixins: [StylePropable], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { - /** - * The MUI Theme to use to render this component with. - */ - _muiTheme: React.PropTypes.object.isRequired, - afterElementType: React.PropTypes.string, afterStyle: React.PropTypes.object, beforeElementType: React.PropTypes.string, @@ -73,30 +62,6 @@ const BeforeAfterWrapper = React.createClass({ }; }, - //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 { beforeStyle, From b9ca804e5fd3fe6b724eac681e2179f6efbf76bb Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 02:43:55 +0330 Subject: [PATCH 15/70] eslint fixes --- src/menus/icon-menu.jsx | 2 +- src/menus/menu.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/menus/icon-menu.jsx b/src/menus/icon-menu.jsx index a952c656f83767..afe278ec28cb53 100644 --- a/src/menus/icon-menu.jsx +++ b/src/menus/icon-menu.jsx @@ -81,7 +81,7 @@ const IconMenu = React.createClass({ //to update theme inside state whenever a new theme is passed down //from the parent / owner using context - componentWillReceiveProps(nextProps, nextContext) { + componentWillReceiveProps(nextProps) { if (process.env.NODE_ENV !== 'production') { this._warningIfNeeded(); } diff --git a/src/menus/menu.jsx b/src/menus/menu.jsx index 10f02a12718b39..b3fc5227ea947b 100644 --- a/src/menus/menu.jsx +++ b/src/menus/menu.jsx @@ -99,7 +99,7 @@ let Menu = React.createClass({ }, 250); }, - componentWillReceiveProps(nextProps, nextContext) { + componentWillReceiveProps(nextProps) { const filteredChildren = this._getFilteredChildren(nextProps.children); let selectedIndex = this._getSelectedIndex(nextProps, filteredChildren); From f8c03fdb40d6368a37c9fc87ea0d3a6b8ea50b5b Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 02:45:22 +0330 Subject: [PATCH 16/70] patch up the old menus --- src/menu/link-menu-item.jsx | 15 +++++---------- src/menu/menu-item.jsx | 15 +++++---------- src/menu/menu.jsx | 21 ++++++++------------- src/menu/subheader-menu-item.jsx | 13 ++++--------- 4 files changed, 22 insertions(+), 42 deletions(-) diff --git a/src/menu/link-menu-item.jsx b/src/menu/link-menu-item.jsx index 160e1e099c70ac..500d3d299e34bb 100644 --- a/src/menu/link-menu-item.jsx +++ b/src/menu/link-menu-item.jsx @@ -8,15 +8,10 @@ const LinkMenuItem = React.createClass({ mixins: [StylePropable], contextTypes: { - muiTheme: React.PropTypes.object, + _muiTheme: React.PropTypes.object, }, propTypes: { - /** - * The MUI Theme to use to render this component with. - */ - _muiTheme: React.PropTypes.object.isRequired, - active: React.PropTypes.bool, className: React.PropTypes.string, disabled: React.PropTypes.bool, @@ -39,18 +34,18 @@ const LinkMenuItem = React.createClass({ //for passing default theme context to children childContextTypes: { - muiTheme: React.PropTypes.object, + _muiTheme: React.PropTypes.object, }, getChildContext() { return { - muiTheme: this.state.muiTheme, + _muiTheme: this.state.muiTheme, }; }, getInitialState() { return { - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + muiTheme: this.context._muiTheme ? this.context._muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), hovered: false, }; }, @@ -58,7 +53,7 @@ const LinkMenuItem = 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; + let newMuiTheme = nextContext._muiTheme ? nextContext._muiTheme : this.state.muiTheme; this.setState({muiTheme: newMuiTheme}); }, diff --git a/src/menu/menu-item.jsx b/src/menu/menu-item.jsx index f26bdda9aa6a1f..1a15d2a3d1e800 100644 --- a/src/menu/menu-item.jsx +++ b/src/menu/menu-item.jsx @@ -22,11 +22,6 @@ const MenuItem = React.createClass({ }, propTypes: { - /** - * The MUI Theme to use to render this component with. - */ - _muiTheme: React.PropTypes.object.isRequired, - active: React.PropTypes.bool, attribute: React.PropTypes.string, children: React.PropTypes.node, @@ -51,12 +46,12 @@ const MenuItem = React.createClass({ //for passing default theme context to children childContextTypes: { - muiTheme: React.PropTypes.object, + _muiTheme: React.PropTypes.object, }, getChildContext() { return { - muiTheme: this.state.muiTheme, + _muiTheme: this.state.muiTheme, }; }, @@ -64,14 +59,14 @@ const MenuItem = React.createClass({ warning(false, 'This menu item component is deprecated use menus/menu-item instead.'); return { - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + 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; + let newMuiTheme = nextContext._muiTheme ? nextContext._muiTheme : this.state.muiTheme; this.setState({muiTheme: newMuiTheme}); }, @@ -96,7 +91,7 @@ const MenuItem = React.createClass({ }, getStyles() { - const isRtl = this.context.muiTheme.isRtl; + const isRtl = this.context._muiTheme.isRtl; const right = isRtl ? 'left' : 'right'; const left = isRtl ? 'right' : 'left'; diff --git a/src/menu/menu.jsx b/src/menu/menu.jsx index 31143e8e429c84..5fab1549d2d659 100644 --- a/src/menu/menu.jsx +++ b/src/menu/menu.jsx @@ -22,15 +22,10 @@ const NestedMenuItem = React.createClass({ mixins: [ClickAwayable, StylePropable], contextTypes: { - muiTheme: React.PropTypes.object, + _muiTheme: React.PropTypes.object, }, propTypes: { - /** - * The MUI Theme to use to render this component with. - */ - _muiTheme: React.PropTypes.object.isRequired, - active: React.PropTypes.bool, disabled: React.PropTypes.bool, index: React.PropTypes.number.isRequired, @@ -52,18 +47,18 @@ const NestedMenuItem = React.createClass({ //for passing default theme context to children childContextTypes: { - muiTheme: React.PropTypes.object, + _muiTheme: React.PropTypes.object, }, getChildContext() { return { - muiTheme: this.state.muiTheme, + _muiTheme: this.state.muiTheme, }; }, getInitialState() { return { - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + muiTheme: this.context._muiTheme ? this.context._muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), open: false, activeIndex: 0, }; @@ -246,12 +241,12 @@ const Menu = React.createClass({ //for passing default theme context to children childContextTypes: { - muiTheme: React.PropTypes.object, + _muiTheme: React.PropTypes.object, }, getChildContext() { return { - muiTheme: this.state.muiTheme, + _muiTheme: this.state.muiTheme, }; }, @@ -259,7 +254,7 @@ const Menu = React.createClass({ warning(false, 'This menu component is deprecated use menus/menu instead.'); return { - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + muiTheme: this.context._muiTheme ? this.context._muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), nestedMenuShown: false, activeIndex: 0, }; @@ -294,7 +289,7 @@ const Menu = 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; + let newMuiTheme = nextContext._muiTheme ? nextContext._muiTheme : this.state.muiTheme; this.setState({muiTheme: newMuiTheme}); //Set the menu width diff --git a/src/menu/subheader-menu-item.jsx b/src/menu/subheader-menu-item.jsx index 4292649de2df64..cb60a629262fba 100644 --- a/src/menu/subheader-menu-item.jsx +++ b/src/menu/subheader-menu-item.jsx @@ -13,11 +13,6 @@ const SubheaderMenuItem = React.createClass({ }, propTypes: { - /** - * The MUI Theme to use to render this component with. - */ - _muiTheme: React.PropTypes.object.isRequired, - className: React.PropTypes.string, firstChild: React.PropTypes.bool, index: React.PropTypes.number.isRequired, @@ -27,25 +22,25 @@ const SubheaderMenuItem = React.createClass({ //for passing default theme context to children childContextTypes: { - muiTheme: React.PropTypes.object, + _muiTheme: React.PropTypes.object, }, getChildContext() { return { - muiTheme: this.state.muiTheme, + _muiTheme: this.state.muiTheme, }; }, getInitialState() { return { - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + 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; + let newMuiTheme = nextContext._muiTheme ? nextContext._muiTheme : this.state.muiTheme; this.setState({muiTheme: newMuiTheme}); }, From 15c84ef1cbe46c7ffeec9e5190accb43aaa74a63 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 03:00:06 +0330 Subject: [PATCH 17/70] migrate icon-button to use the new theme handling --- src/icon-button.jsx | 36 +++++++----------------------------- 1 file changed, 7 insertions(+), 29 deletions(-) diff --git a/src/icon-button.jsx b/src/icon-button.jsx index eef8efdb5ce67b..24e4dd94ea2a77 100644 --- a/src/icon-button.jsx +++ b/src/icon-button.jsx @@ -7,24 +7,19 @@ import EnhancedButton from './enhanced-button'; import FontIcon from './font-icon'; import Tooltip from './tooltip'; import Children from './utils/children'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; +import muiThemeable from './muiThemeable'; -const IconButton = React.createClass({ +let IconButton = React.createClass({ mixins: [ StylePropable, ContextPure, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - statics: { getRelevantContextKeys(muiTheme) { - const spacing = muiTheme.rawTheme.spacing; - const palette = muiTheme.rawTheme.palette; + const spacing = muiTheme.baseTheme.spacing; + const palette = muiTheme.baseTheme.palette; return { iconSize: spacing.iconSize, @@ -42,17 +37,6 @@ const IconButton = React.createClass({ }, }, - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -87,17 +71,9 @@ const 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: {}, @@ -110,7 +86,7 @@ const IconButton = React.createClass({ iconSize, textColor, disabledColor, - } = this.constructor.getRelevantContextKeys(this.state.muiTheme); + } = this.constructor.getRelevantContextKeys(this.props._muiTheme); let styles = { root: { @@ -262,4 +238,6 @@ const IconButton = React.createClass({ }); +IconButton = muiThemeable(IconButton); + export default IconButton; From 57bf391d7b24bc106f4c2cf75fa4e98f70bd1288 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 03:09:37 +0330 Subject: [PATCH 18/70] migrate tabs to use the new theme handling --- src/tabs/tab.jsx | 40 +++++++--------------------------------- src/tabs/tabs.jsx | 31 +++++++------------------------ 2 files changed, 14 insertions(+), 57 deletions(-) diff --git a/src/tabs/tab.jsx b/src/tabs/tab.jsx index e2654a5306c004..f8393b0c4876bc 100644 --- a/src/tabs/tab.jsx +++ b/src/tabs/tab.jsx @@ -1,18 +1,13 @@ import React from 'react'; import StylePropable from '../mixins/style-propable'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; -const Tab = React.createClass({ +let Tab = React.createClass({ mixins: [ StylePropable, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -65,32 +60,9 @@ const Tab = React.createClass({ width: 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}); - }, - render() { const { + _muiTheme, label, onActive, onTouchTap, @@ -107,12 +79,12 @@ const Tab = React.createClass({ textAlign: 'center', verticalAlign: 'middle', height: 48, - color: selected ? this.state.muiTheme.tabs.selectedTextColor : this.state.muiTheme.tabs.textColor, + color: selected ? _muiTheme.tabs.selectedTextColor : _muiTheme.tabs.textColor, outline: 'none', fontSize: 14, fontWeight: 500, whiteSpace: 'initial', - fontFamily: this.state.muiTheme.rawTheme.fontFamily, + fontFamily: _muiTheme.baseTheme.fontFamily, boxSizing: 'border-box', width: width, }, style); @@ -135,4 +107,6 @@ const Tab = React.createClass({ }); +Tab = muiThemeable(Tab); + export default Tab; diff --git a/src/tabs/tabs.jsx b/src/tabs/tabs.jsx index 5f0e95ca42864d..14ce79c1497bee 100644 --- a/src/tabs/tabs.jsx +++ b/src/tabs/tabs.jsx @@ -5,21 +5,16 @@ const TabTemplate = require('./tabTemplate'); import InkBar from '../ink-bar'; import StylePropable from '../mixins/style-propable'; import Controllable from '../mixins/controllable'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; import warning from 'warning'; -const Tabs = React.createClass({ +let Tabs = React.createClass({ mixins: [ StylePropable, Controllable, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -85,16 +80,6 @@ const Tabs = React.createClass({ value: React.PropTypes.any, }, - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - getDefaultProps() { return { initialSelectedIndex: 0, @@ -112,7 +97,6 @@ const Tabs = React.createClass({ initialIndex < this.getTabCount() ? initialIndex : 0, - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, @@ -128,19 +112,16 @@ const Tabs = React.createClass({ return React.Children.count(this.props.children); }, - componentWillReceiveProps(newProps, nextContext) { + componentWillReceiveProps(newProps) { const valueLink = this.getValueLink(newProps); - const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - if (valueLink.value !== undefined) { this.setState({selectedIndex: this._getSelectedIndex(newProps)}); } - - this.setState({muiTheme: newMuiTheme}); }, render() { let { + _muiTheme, children, contentContainerClassName, contentContainerStyle, @@ -152,7 +133,7 @@ const Tabs = React.createClass({ ...other, } = this.props; - let themeVariables = this.state.muiTheme.tabs; + let themeVariables = _muiTheme.tabs; let styles = { tabItemContainer: { margin: 0, @@ -266,4 +247,6 @@ const Tabs = React.createClass({ }); +Tabs = muiThemeable(Tabs); + export default Tabs; From 91a4f1641bdf530084e3520ed58d57f5b835f50e Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 03:10:09 +0330 Subject: [PATCH 19/70] migrate enhanced-button to use the new theme handling --- src/enhanced-button.jsx | 31 +++++++------------------------ 1 file changed, 7 insertions(+), 24 deletions(-) diff --git a/src/enhanced-button.jsx b/src/enhanced-button.jsx index 1d5131ed221139..778ee3d17b12b0 100644 --- a/src/enhanced-button.jsx +++ b/src/enhanced-button.jsx @@ -7,8 +7,7 @@ import Events from './utils/events'; import KeyCode from './utils/key-code'; import FocusRipple from './ripples/focus-ripple'; import TouchRipple from './ripples/touch-ripple'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; +import muiThemeable from './muiThemeable'; let styleInjected = false; let listening = false; @@ -40,25 +39,10 @@ function listenForTabPresses() { } } -const EnhancedButton = React.createClass({ +let EnhancedButton = React.createClass({ mixins: [PureRenderMixin, StylePropable], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -115,14 +99,10 @@ 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, nextContext) { - let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - this.setState({muiTheme: newMuiTheme}); - + componentWillReceiveProps(nextProps) { if ((nextProps.disabled || nextProps.disableKeyboardFocus) && this.state.isKeyboardFocused) { this.setState({isKeyboardFocused: false}); @@ -139,6 +119,7 @@ const EnhancedButton = React.createClass({ render() { const { + _muiTheme, centerRipple, children, containerElement, @@ -168,7 +149,7 @@ const EnhancedButton = React.createClass({ boxSizing: 'border-box', display: 'inline-block', font: 'inherit', - fontFamily: this.state.muiTheme.rawTheme.fontFamily, + fontFamily: _muiTheme.baseTheme.fontFamily, tapHighlightColor: Colors.transparent, appearance: linkButton ? null : 'button', cursor: disabled ? 'default' : 'pointer', @@ -322,4 +303,6 @@ const EnhancedButton = React.createClass({ }); +EnhancedButton = muiThemeable(EnhancedButton); + export default EnhancedButton; From e9d5dc6d9601bef6c59da1815a8adc1006191342 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 03:10:55 +0330 Subject: [PATCH 20/70] patch style-propable to consider props and _muiTheme on state --- src/mixins/style-propable.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/mixins/style-propable.js b/src/mixins/style-propable.js index 0631d629fbf8d2..3a1fb140ec10a4 100644 --- a/src/mixins/style-propable.js +++ b/src/mixins/style-propable.js @@ -34,6 +34,7 @@ export default { // If you call it twice you'll get a warning anyway. prepareStyles() { return Styles.prepareStyles.apply(Styles, - [(this.state && this.state.muiTheme) || this.context.muiTheme].concat([].slice.apply(arguments))); + [(this.state && (this.state._muiTheme || this.state.muiTheme)) + || this.props._muiTheme].concat([].slice.apply(arguments))); }, }; From b4fecb3893bc0b5e2136b50e88dc448ce9f8d13b Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 03:17:12 +0330 Subject: [PATCH 21/70] migrate paper to use the new theme handling --- src/paper.jsx | 40 +++++++--------------------------------- 1 file changed, 7 insertions(+), 33 deletions(-) diff --git a/src/paper.jsx b/src/paper.jsx index 7cd857b430f369..cf83ae3db04b31 100644 --- a/src/paper.jsx +++ b/src/paper.jsx @@ -3,44 +3,15 @@ import PureRenderMixin from 'react-addons-pure-render-mixin'; import StylePropable from './mixins/style-propable'; import PropTypes from './utils/prop-types'; import Transitions from './styles/transitions'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; +import muiThemeable from './muiThemeable'; -const Paper = React.createClass({ +let Paper = React.createClass({ mixins: [ PureRenderMixin, 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 { - 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) { - const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - this.setState({muiTheme: newMuiTheme}); - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -70,6 +41,7 @@ const Paper = React.createClass({ render() { const { + _muiTheme, children, circle, rounded, @@ -80,10 +52,10 @@ const Paper = React.createClass({ } = this.props; const styles = { - backgroundColor: this.state.muiTheme.paper.backgroundColor, + backgroundColor: _muiTheme.paper.backgroundColor, transition: transitionEnabled && Transitions.easeOut(), boxSizing: 'border-box', - fontFamily: this.state.muiTheme.rawTheme.fontFamily, + fontFamily: _muiTheme.baseTheme.fontFamily, WebkitTapHighlightColor: 'rgba(0,0,0,0)', boxShadow: this._getZDepthShadows(zDepth), borderRadius: circle ? '50%' : rounded ? '2px' : '0px', @@ -111,4 +83,6 @@ const Paper = React.createClass({ }); +Paper = muiThemeable(Paper); + export default Paper; From 513dfbf41c066ff0db4497d1b4383bf2adff5cce Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 03:17:27 +0330 Subject: [PATCH 22/70] migrate app-canvas to use the new theme handling --- src/app-canvas.jsx | 37 +++++-------------------------------- 1 file changed, 5 insertions(+), 32 deletions(-) diff --git a/src/app-canvas.jsx b/src/app-canvas.jsx index eeaaa61bb33025..eb85036f8c7bd4 100644 --- a/src/app-canvas.jsx +++ b/src/app-canvas.jsx @@ -1,16 +1,11 @@ import React from 'react'; import StylePropable from './mixins/style-propable'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; +import muiThemeable from './muiThemeable'; -const AppCanvas = React.createClass({ +let AppCanvas = React.createClass({ mixins: [StylePropable], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -20,34 +15,10 @@ const AppCanvas = React.createClass({ children: React.PropTypes.node, }, - //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.state.muiTheme.rawTheme.palette.canvasColor, + backgroundColor: this.props._muiTheme.baseTheme.palette.canvasColor, WebkitFontSmoothing: 'antialiased', direction: 'ltr', }; @@ -78,4 +49,6 @@ const AppCanvas = React.createClass({ }); +AppCanvas = muiThemeable(AppCanvas); + export default AppCanvas; From bf22ccb8f3155601f69bceec83405458ace659f9 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 03:21:01 +0330 Subject: [PATCH 23/70] migrate icons to use the new theme handling --- src/font-icon.jsx | 35 +++++++---------------------------- src/svg-icon.jsx | 33 ++++++--------------------------- 2 files changed, 13 insertions(+), 55 deletions(-) diff --git a/src/font-icon.jsx b/src/font-icon.jsx index 1618d327c53101..193bfd61c59d09 100644 --- a/src/font-icon.jsx +++ b/src/font-icon.jsx @@ -1,28 +1,12 @@ import React from 'react'; import StylePropable from './mixins/style-propable'; import Transitions from './styles/transitions'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; +import muiThemeable from './muiThemeable'; -const FontIcon = React.createClass({ +let FontIcon = 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, - }; - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -43,19 +27,12 @@ const 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 { + _muiTheme, color, hoverColor, onMouseLeave, @@ -64,10 +41,10 @@ const FontIcon = React.createClass({ ...other, } = this.props; - let spacing = this.state.muiTheme.rawTheme.spacing; + let spacing = _muiTheme.baseTheme.spacing; let offColor = color ? color : style && style.color ? style.color : - this.state.muiTheme.rawTheme.palette.textColor; + _muiTheme.baseTheme.palette.textColor; let onColor = hoverColor ? hoverColor : offColor; let mergedStyles = this.prepareStyles({ @@ -108,4 +85,6 @@ const FontIcon = React.createClass({ }, }); +FontIcon = muiThemeable(FontIcon); + export default FontIcon; diff --git a/src/svg-icon.jsx b/src/svg-icon.jsx index 49d68259e53340..899db60a783f5b 100644 --- a/src/svg-icon.jsx +++ b/src/svg-icon.jsx @@ -1,19 +1,14 @@ import React from 'react'; import StylePropable from './mixins/style-propable'; import Transitions from './styles/transitions'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; +import muiThemeable from './muiThemeable'; -const SvgIcon = React.createClass({ +let SvgIcon = React.createClass({ mixins: [ StylePropable, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -33,21 +28,9 @@ 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), }; }, @@ -59,15 +42,9 @@ 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 { + _muiTheme, children, color, hoverColor, @@ -80,7 +57,7 @@ const SvgIcon = React.createClass({ const offColor = color ? color : style && style.fill ? style.fill : - this.state.muiTheme.rawTheme.palette.textColor; + _muiTheme.baseTheme.palette.textColor; const onColor = hoverColor ? hoverColor : offColor; const mergedStyles = this.prepareStyles({ @@ -121,4 +98,6 @@ const SvgIcon = React.createClass({ }, }); +SvgIcon = muiThemeable(SvgIcon); + export default SvgIcon; From 2bfe05b1de1db6b279e0f0250d164463834e42d2 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 03:25:07 +0330 Subject: [PATCH 24/70] migrate ink-bar to use the new theme handling --- src/ink-bar.jsx | 38 ++++++-------------------------------- 1 file changed, 6 insertions(+), 32 deletions(-) diff --git a/src/ink-bar.jsx b/src/ink-bar.jsx index cae85b746ea9d9..60060222524a92 100644 --- a/src/ink-bar.jsx +++ b/src/ink-bar.jsx @@ -1,25 +1,9 @@ import React from 'react'; import Transitions from './styles/transitions'; import StylePropable from './mixins/style-propable'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; +import muiThemeable from './muiThemeable'; -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, - }; - }, +let InkBar = React.createClass({ propTypes: { /** @@ -37,23 +21,11 @@ const InkBar = React.createClass({ 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() { let { + _muiTheme, color, left, width, @@ -67,7 +39,7 @@ const InkBar = React.createClass({ width: width, bottom: 0, display: 'block', - backgroundColor: this.state.muiTheme.inkBar.backgroundColor, + backgroundColor: _muiTheme.inkBar.backgroundColor, height: 2, marginTop: -2, position: 'relative', @@ -83,4 +55,6 @@ const InkBar = React.createClass({ }); +InkBar = muiThemeable(InkBar); + export default InkBar; From 095af3cdc9ed354705c30cd5210186cc29ec2eed Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 03:28:36 +0330 Subject: [PATCH 25/70] migrate before-after-wrapper to use the new theme handling --- src/before-after-wrapper.jsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/before-after-wrapper.jsx b/src/before-after-wrapper.jsx index 291170130b7bd9..7b7c7e7072b6b6 100644 --- a/src/before-after-wrapper.jsx +++ b/src/before-after-wrapper.jsx @@ -1,6 +1,7 @@ import React from 'react'; import StylePropable from './mixins/style-propable'; import AutoPrefix from './styles/auto-prefix'; +import muiThemeable from './muiThemeable'; /** * BeforeAfterWrapper @@ -36,11 +37,16 @@ import AutoPrefix from './styles/auto-prefix'; * and afterElement have a defined style position. */ -const BeforeAfterWrapper = React.createClass({ +let BeforeAfterWrapper = React.createClass({ mixins: [StylePropable], propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, + afterElementType: React.PropTypes.string, afterStyle: React.PropTypes.object, beforeElementType: React.PropTypes.string, @@ -100,4 +106,6 @@ const BeforeAfterWrapper = React.createClass({ }); +BeforeAfterWrapper = muiThemeable(BeforeAfterWrapper); + export default BeforeAfterWrapper; From b529453638ccd13649a9da8e4f9ff238c508438d Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 04:07:42 +0330 Subject: [PATCH 26/70] migrate card to use the new theme handling --- src/card/card-actions.jsx | 35 ++++------------------------------ src/card/card-expandable.jsx | 37 +++++------------------------------- src/card/card-header.jsx | 35 ++++------------------------------ src/card/card-media.jsx | 36 ++++------------------------------- src/card/card-text.jsx | 37 +++++------------------------------- src/card/card-title.jsx | 37 ++++-------------------------------- src/card/card.jsx | 5 ----- 7 files changed, 26 insertions(+), 196 deletions(-) diff --git a/src/card/card-actions.jsx b/src/card/card-actions.jsx index ad134f07e39140..cf1ca4b23d1e0f 100644 --- a/src/card/card-actions.jsx +++ b/src/card/card-actions.jsx @@ -1,41 +1,12 @@ import React from 'react'; import StylePropable from '../mixins/style-propable'; -import ThemeManager from '../styles/theme-manager'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; +import muiThemeable from '../muiThemeable'; -const CardActions = React.createClass({ +let CardActions = 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 { - 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) { - const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - this.setState({muiTheme: newMuiTheme}); - }, - getStyles() { return { root: { @@ -79,4 +50,6 @@ const CardActions = React.createClass({ }, }); +CardActions = muiThemeable(CardActions); + export default CardActions; diff --git a/src/card/card-expandable.jsx b/src/card/card-expandable.jsx index 853020b6d34ecc..2d40eeb48c933c 100644 --- a/src/card/card-expandable.jsx +++ b/src/card/card-expandable.jsx @@ -4,18 +4,17 @@ import OpenIcon from '../svg-icons/hardware/keyboard-arrow-up'; import CloseIcon from '../svg-icons/hardware/keyboard-arrow-down'; import IconButton from '../icon-button'; import StylePropable from '../mixins/style-propable'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; import ContextPure from '../mixins/context-pure'; -const CardExpandable = React.createClass({ +let CardExpandable = React.createClass({ mixins: [ StylePropable, ContextPure, ], getStyles() { - const contextKeys = this.constructor.getRelevantContextKeys(this.state.muiTheme); + const contextKeys = this.constructor.getRelevantContextKeys(this.props._muiTheme); const directionStyle = contextKeys.isRtl ? { left: 4, @@ -33,10 +32,6 @@ const CardExpandable = React.createClass({ }; }, - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -52,17 +47,6 @@ const CardExpandable = React.createClass({ style: React.PropTypes.object, }, - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - statics: { getRelevantContextKeys(muiTheme) { return { @@ -76,19 +60,6 @@ const CardExpandable = 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 styles = this.getStyles(); @@ -113,4 +84,6 @@ const CardExpandable = React.createClass({ }, }); +CardExpandable = muiThemeable(CardExpandable); + export default CardExpandable; diff --git a/src/card/card-header.jsx b/src/card/card-header.jsx index a276cd9a887f1f..003811bb059a1c 100644 --- a/src/card/card-header.jsx +++ b/src/card/card-header.jsx @@ -2,43 +2,14 @@ import React from 'react'; import Styles from '../styles'; import Avatar from '../avatar'; import StylePropable from '../mixins/style-propable'; -import ThemeManager from '../styles/theme-manager'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; +import muiThemeable from '../muiThemeable'; -const CardHeader = React.createClass({ +let CardHeader = 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 { - 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}); - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -130,4 +101,6 @@ const CardHeader = React.createClass({ }, }); +CardHeader = muiThemeable(CardHeader); + export default CardHeader; diff --git a/src/card/card-media.jsx b/src/card/card-media.jsx index af2c25430faed1..7061a7ec05583e 100644 --- a/src/card/card-media.jsx +++ b/src/card/card-media.jsx @@ -1,44 +1,14 @@ import React from 'react'; import Styles from '../styles'; import StylePropable from '../mixins/style-propable'; -import ThemeManager from '../styles/theme-manager'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; +import muiThemeable from '../muiThemeable'; - -const CardMedia = React.createClass({ +let CardMedia = 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 { - 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}); - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -141,4 +111,6 @@ const CardMedia = React.createClass({ }, }); +CardMedia = muiThemeable(CardMedia); + export default CardMedia; diff --git a/src/card/card-text.jsx b/src/card/card-text.jsx index 11d8d12dbaa0be..bc9b095c4ed2b4 100644 --- a/src/card/card-text.jsx +++ b/src/card/card-text.jsx @@ -1,42 +1,13 @@ import React from 'react'; import StylePropable from '../mixins/style-propable'; -import ThemeManager from '../styles/theme-manager'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; +import muiThemeable from '../muiThemeable'; -const CardText = React.createClass({ +let CardText = 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 { - 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}); - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -55,7 +26,7 @@ const CardText = React.createClass({ }, getStyles() { - const themeVariables = this.state.muiTheme.cardText; + const themeVariables = this.props._muiTheme.cardText; return { root: { padding: 16, @@ -77,4 +48,6 @@ const CardText = React.createClass({ }, }); +CardText = muiThemeable(CardText); + export default CardText; diff --git a/src/card/card-title.jsx b/src/card/card-title.jsx index b438ddd0ba21ca..4428f5c9ac0575 100644 --- a/src/card/card-title.jsx +++ b/src/card/card-title.jsx @@ -1,45 +1,14 @@ import React from 'react'; import Styles from '../styles'; import StylePropable from '../mixins/style-propable'; -import ThemeManager from '../styles/theme-manager'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; +import muiThemeable from '../muiThemeable'; -const CardTitle = React.createClass({ +let CardTitle = 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 { - 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) { - const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - this.setState({ - muiTheme: newMuiTheme, - }); - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -110,4 +79,6 @@ const CardTitle = React.createClass({ }, }); +CardTitle = muiThemeable(CardTitle); + export default CardTitle; diff --git a/src/card/card.jsx b/src/card/card.jsx index 69920ee2a11e5c..98ba40af764060 100644 --- a/src/card/card.jsx +++ b/src/card/card.jsx @@ -13,11 +13,6 @@ const Card = React.createClass({ }, propTypes: { - /** - * The MUI Theme to use to render this component with. - */ - _muiTheme: React.PropTypes.object.isRequired, - /** * Whether a click on this card component expands the card. Can be set on any child of the Card component. */ From bb26e986eeb37fbe449152c0a36cad5d96b5e433 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 04:08:20 +0330 Subject: [PATCH 27/70] migrate flat button and text area to use the new theme handling --- src/buttons/flat-button-label.jsx | 40 ++++++------------------------- src/enhanced-textarea.jsx | 27 ++++----------------- src/flat-button.jsx | 33 +++++-------------------- 3 files changed, 18 insertions(+), 82 deletions(-) diff --git a/src/buttons/flat-button-label.jsx b/src/buttons/flat-button-label.jsx index 56ffa0032a1e5b..4f7e60bbe7feb8 100644 --- a/src/buttons/flat-button-label.jsx +++ b/src/buttons/flat-button-label.jsx @@ -1,20 +1,15 @@ import React from 'react'; import ContextPure from '../mixins/context-pure'; import StylePropable from '../mixins/style-propable'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; -const FlatButtonLabel = React.createClass({ +let FlatButtonLabel = React.createClass({ mixins: [ ContextPure, StylePropable, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -29,45 +24,22 @@ 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}); - }, - statics: { getRelevantContextKeys(muiTheme) { return { - spacingDesktopGutterLess: muiTheme.rawTheme.spacing.desktopGutterLess, + spacingDesktopGutterLess: muiTheme.baseTheme.spacing.desktopGutterLess, }; }, }, render: function() { const { + _muiTheme, label, style, } = this.props; - const contextKeys = this.constructor.getRelevantContextKeys(this.state.muiTheme); + const contextKeys = this.constructor.getRelevantContextKeys(_muiTheme); const mergedRootStyles = this.mergeStyles({ position: 'relative', @@ -81,4 +53,6 @@ const FlatButtonLabel = React.createClass({ }); +FlatButtonLabel = muiThemeable(FlatButtonLabel); + export default FlatButtonLabel; diff --git a/src/enhanced-textarea.jsx b/src/enhanced-textarea.jsx index 1ac8b03621e15f..7f6da52f3b208e 100644 --- a/src/enhanced-textarea.jsx +++ b/src/enhanced-textarea.jsx @@ -1,8 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import StylePropable from './mixins/style-propable'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; +import muiThemeable from './muiThemeable'; const rowsHeight = 24; @@ -27,27 +26,12 @@ const styles = { }, }; -const EnhancedTextarea = React.createClass({ +let EnhancedTextarea = 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, - }; - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -79,7 +63,6 @@ const EnhancedTextarea = React.createClass({ getInitialState() { return { height: this.props.rows * rowsHeight, - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, @@ -180,13 +163,13 @@ const EnhancedTextarea = React.createClass({ } }, - componentWillReceiveProps(nextProps, nextContext) { + componentWillReceiveProps(nextProps) { if (nextProps.value !== this.props.value) { this._syncHeightWithShadow(nextProps.value); } - let newState = {}; - newState.muiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; }, }); +EnhancedTextarea = muiThemeable(EnhancedTextarea); + export default EnhancedTextarea; diff --git a/src/flat-button.jsx b/src/flat-button.jsx index 135c92fa2ab2b9..7fed22387b92da 100644 --- a/src/flat-button.jsx +++ b/src/flat-button.jsx @@ -7,8 +7,7 @@ import ImmutabilityHelper from './utils/immutability-helper'; import Typography from './styles/typography'; import EnhancedButton from './enhanced-button'; import FlatButtonLabel from './buttons/flat-button-label'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; +import muiThemeable from './muiThemeable'; function validateLabel(props, propName, componentName) { if (!props.children && !props.label) { @@ -17,7 +16,7 @@ function validateLabel(props, propName, componentName) { } } -const FlatButton = React.createClass({ +let FlatButton = React.createClass({ mixins: [ ContextPure, @@ -49,21 +48,6 @@ const FlatButton = 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: { /** * The MUI Theme to use to render this component with. @@ -110,19 +94,12 @@ 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}); - }, - render() { const { + _muiTheme, children, disabled, hoverColor, @@ -147,7 +124,7 @@ const FlatButton = React.createClass({ secondaryTextColor, textColor, textTransform, - } = this.constructor.getRelevantContextKeys(this.state.muiTheme); + } = this.constructor.getRelevantContextKeys(_muiTheme); const defaultTextColor = disabled ? disabledTextColor : primary ? primaryTextColor : @@ -234,4 +211,6 @@ const FlatButton = React.createClass({ }); +FlatButton = muiThemeable(FlatButton); + export default FlatButton; From 02153889c2697cb0e261e7dd1aea2918b80f0644 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 23:10:23 +0330 Subject: [PATCH 28/70] migrate date-picker --- src/date-picker/calendar-toolbar.jsx | 33 +++++---------------- src/date-picker/calendar.jsx | 31 ++++---------------- src/date-picker/date-display.jsx | 30 ++++--------------- src/date-picker/date-picker-dialog.jsx | 32 ++++----------------- src/date-picker/date-picker.jsx | 29 ++++--------------- src/date-picker/day-button.jsx | 40 ++++---------------------- src/date-picker/year-button.jsx | 40 ++++---------------------- 7 files changed, 40 insertions(+), 195 deletions(-) diff --git a/src/date-picker/calendar-toolbar.jsx b/src/date-picker/calendar-toolbar.jsx index 48035f9c98f36f..5fc7052a8ecb40 100644 --- a/src/date-picker/calendar-toolbar.jsx +++ b/src/date-picker/calendar-toolbar.jsx @@ -5,8 +5,7 @@ import ToolbarGroup from '../toolbar/toolbar-group'; import NavigationChevronLeft from '../svg-icons/navigation/chevron-left'; import NavigationChevronRight from '../svg-icons/navigation/chevron-right'; import SlideInTransitionGroup from '../transition-groups/slide-in'; -import ThemeManager from '../styles/theme-manager'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; +import muiThemeable from '../muiThemeable'; const styles = { root: { @@ -26,21 +25,7 @@ const styles = { }, }; -const CalendarToolbar = 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, - }; - }, +let CalendarToolbar = React.createClass({ propTypes: { DateTimeFormat: React.PropTypes.func.isRequired, @@ -65,17 +50,11 @@ const CalendarToolbar = React.createClass({ getInitialState() { return { - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), transitionDirection: 'up', }; }, - //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}); - + componentWillReceiveProps(nextProps) { let direction; if (nextProps.displayDate !== this.props.displayDate) { @@ -98,8 +77,8 @@ const CalendarToolbar = React.createClass({ year: 'numeric', }).format(displayDate); - const nextButtonIcon = this.state.muiTheme.isRtl ? : ; - const prevButtonIcon = this.state.muiTheme.isRtl ? : ; + const nextButtonIcon = this.props._muiTheme.isRtl ? : ; + const prevButtonIcon = this.props._muiTheme.isRtl ? : ; return ( @@ -140,4 +119,6 @@ const CalendarToolbar = React.createClass({ }); +CalendarToolbar = muiThemeable(CalendarToolbar); + export default CalendarToolbar; diff --git a/src/date-picker/calendar.jsx b/src/date-picker/calendar.jsx index 697595883c18bc..fd96ea03a6d8d6 100644 --- a/src/date-picker/calendar.jsx +++ b/src/date-picker/calendar.jsx @@ -10,32 +10,15 @@ import CalendarToolbar from './calendar-toolbar'; import DateDisplay from './date-display'; import SlideInTransitionGroup from '../transition-groups/slide-in'; import ClearFix from '../clearfix'; -import ThemeManager from '../styles/theme-manager'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; +import muiThemeable from './muiThemeable'; - -const Calendar = React.createClass({ +let Calendar = React.createClass({ mixins: [ StylePropable, WindowListenable, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - propTypes: { DateTimeFormat: React.PropTypes.func.isRequired, /** @@ -69,7 +52,6 @@ const Calendar = React.createClass({ getInitialState() { return { - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), displayDate: DateTime.getFirstDayOfMonth(this.props.initialDate), displayMonthDay: true, selectedDate: this.props.initialDate, @@ -78,12 +60,7 @@ const Calendar = React.createClass({ }; }, - //to update theme inside state whenever a new theme is passed down - //from the parent / owner using context - componentWillReceiveProps(nextProps, nextContext) { - let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - this.setState({muiTheme: newMuiTheme}); - + componentWillReceiveProps(nextProps) { if (nextProps.initialDate !== this.props.initialDate) { let d = nextProps.initialDate || new Date(); this.setState({ @@ -365,4 +342,6 @@ const Calendar = React.createClass({ }); +Calendar = muiThemeable(Calendar); + export default Calendar; diff --git a/src/date-picker/date-display.jsx b/src/date-picker/date-display.jsx index a113bab1296ab8..f7a0eeb209f6a1 100644 --- a/src/date-picker/date-display.jsx +++ b/src/date-picker/date-display.jsx @@ -2,19 +2,14 @@ import React from 'react'; import StylePropable from '../mixins/style-propable'; import Transitions from '../styles/transitions'; import SlideInTransitionGroup from '../transition-groups/slide-in'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; -const DateDisplay = React.createClass({ +let DateDisplay = React.createClass({ mixins: [ StylePropable, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { DateTimeFormat: React.PropTypes.func.isRequired, /** @@ -37,17 +32,6 @@ const 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, @@ -60,14 +44,10 @@ const DateDisplay = React.createClass({ return { selectedYear: !this.props.monthDaySelected, transitionDirection: 'up', - 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}); - + componentWillReceiveProps(nextProps) { let direction; if (nextProps.selectedDate !== this.props.selectedDate) { @@ -83,7 +63,7 @@ const DateDisplay = React.createClass({ }, getTheme() { - return this.state.muiTheme.datePicker; + return this.props._muiTheme.datePicker; }, getStyles() { @@ -197,4 +177,6 @@ const DateDisplay = React.createClass({ }); +DateDisplay = muiThemeable(DateDisplay); + export default DateDisplay; diff --git a/src/date-picker/date-picker-dialog.jsx b/src/date-picker/date-picker-dialog.jsx index 1097171b2a8a09..93c75363e90c75 100644 --- a/src/date-picker/date-picker-dialog.jsx +++ b/src/date-picker/date-picker-dialog.jsx @@ -7,11 +7,10 @@ import Calendar from './calendar'; import Dialog from '../dialog'; import DatePickerInline from './date-picker-inline'; import FlatButton from '../flat-button'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; import DateTime from '../utils/date-time'; +import muiThemeable from '../muiThemeable'; -const DatePickerDialog = React.createClass({ +let DatePickerDialog = React.createClass({ mixins: [ StylePropable, @@ -33,10 +32,6 @@ const DatePickerDialog = React.createClass({ }, }, - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { DateTimeFormat: React.PropTypes.func, /** @@ -65,17 +60,6 @@ const DatePickerDialog = React.createClass({ wordings: React.PropTypes.object, }, - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - getDefaultProps: function() { return { DateTimeFormat: DateTime.DateTimeFormat, @@ -95,17 +79,9 @@ const DatePickerDialog = 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}); - }, - render() { let { DateTimeFormat, @@ -120,7 +96,7 @@ const DatePickerDialog = React.createClass({ const { calendarTextColor, - } = this.constructor.getRelevantContextKeys(this.state.muiTheme); + } = this.constructor.getRelevantContextKeys(this.props._muiTheme); let styles = { root: { @@ -235,4 +211,6 @@ const DatePickerDialog = React.createClass({ }); +DatePickerDialog = muiThemeable(DatePickerDialog); + export default DatePickerDialog; diff --git a/src/date-picker/date-picker.jsx b/src/date-picker/date-picker.jsx index 2860408b3b0402..277b2f6e764c09 100644 --- a/src/date-picker/date-picker.jsx +++ b/src/date-picker/date-picker.jsx @@ -4,31 +4,15 @@ import WindowListenable from '../mixins/window-listenable'; import DateTime from '../utils/date-time'; import DatePickerDialog from './date-picker-dialog'; import TextField from '../text-field'; -import ThemeManager from '../styles/theme-manager'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; +import muiThemeable from '../muiThemeable'; -const DatePicker = React.createClass({ +let DatePicker = React.createClass({ mixins: [ StylePropable, WindowListenable, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - propTypes: { DateTimeFormat: React.PropTypes.func, /** @@ -80,15 +64,10 @@ const DatePicker = React.createClass({ return { date: this._isControlled() ? this._getControlledDate() : this.props.defaultDate, dialogDate: new Date(), - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, - componentWillReceiveProps(nextProps, nextContext) { - if (nextContext.muiTheme) { - this.setState({muiTheme: nextContext.muiTheme}); - } - + componentWillReceiveProps(nextProps) { if (this._isControlled()) { let newDate = this._getControlledDate(nextProps); if (!DateTime.isEqualDate(this.state.date, newDate)) { @@ -222,4 +201,6 @@ const DatePicker = React.createClass({ }); +DatePicker = muiThemeable(DatePicker); + export default DatePicker; diff --git a/src/date-picker/day-button.jsx b/src/date-picker/day-button.jsx index 5f503674ac3f9f..80f23857911813 100644 --- a/src/date-picker/day-button.jsx +++ b/src/date-picker/day-button.jsx @@ -3,19 +3,14 @@ import StylePropable from '../mixins/style-propable'; import Transition from '../styles/transitions'; import DateTime from '../utils/date-time'; import EnhancedButton from '../enhanced-button'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; -const DayButton = React.createClass({ +let DayButton = React.createClass({ mixins: [ StylePropable, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -29,17 +24,6 @@ const DayButton = 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, @@ -47,22 +31,8 @@ const 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.state.muiTheme.datePicker; + return this.props._muiTheme.datePicker; }, render() { @@ -85,7 +55,7 @@ const DayButton = React.createClass({ label: { position: 'relative', - color: this.state.muiTheme.rawTheme.palette.textColor, + color: this.props._muiTheme.baseTheme.palette.textColor, }, buttonState: { @@ -159,4 +129,6 @@ const DayButton = React.createClass({ }); +DayButton = muiThemeable(DayButton); + export default DayButton; diff --git a/src/date-picker/year-button.jsx b/src/date-picker/year-button.jsx index 017453fa6ed9d3..960dedd214b720 100644 --- a/src/date-picker/year-button.jsx +++ b/src/date-picker/year-button.jsx @@ -1,19 +1,14 @@ import React from 'react'; import StylePropable from '../mixins/style-propable'; import EnhancedButton from '../enhanced-button'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; -const YearButton = React.createClass({ +let YearButton = React.createClass({ mixins: [ StylePropable, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -29,39 +24,14 @@ const YearButton = React.createClass({ year: React.PropTypes.number, }, - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - getDefaultProps() { return { selected: false, }; }, - 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.state.muiTheme.datePicker; + return this.props._muiTheme.datePicker; }, render() { @@ -88,7 +58,7 @@ const YearButton = React.createClass({ label: { position: 'relative', top: -1, - color: this.state.muiTheme.rawTheme.palette.textColor, + color: this.props._muiTheme.baseTheme.palette.textColor, }, buttonState: { @@ -146,4 +116,6 @@ const YearButton = React.createClass({ }); +YearButton = muiThemeable(YearButton); + export default YearButton; From 58d263321434bf052b2bf5555d4e6f13b027f88e Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 23:10:37 +0330 Subject: [PATCH 29/70] migrate CircularProgress --- src/circular-progress.jsx | 37 +++++-------------------------------- 1 file changed, 5 insertions(+), 32 deletions(-) diff --git a/src/circular-progress.jsx b/src/circular-progress.jsx index 3e25a4c2df6e3d..9254d0fec8ac86 100644 --- a/src/circular-progress.jsx +++ b/src/circular-progress.jsx @@ -3,10 +3,9 @@ import ReactDOM from 'react-dom'; import StylePropable from './mixins/style-propable'; import AutoPrefix from './styles/auto-prefix'; import Transitions from './styles/transitions'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; +import muiThemeable from './muiThemeable'; -const CircularProgress = React.createClass({ +let CircularProgress = React.createClass({ mixins: [StylePropable], @@ -30,34 +29,6 @@ const CircularProgress = React.createClass({ value: React.PropTypes.number, }, - 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), - }; - }, - - //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; @@ -130,7 +101,7 @@ const CircularProgress = React.createClass({ }, getTheme() { - return this.state.muiTheme.rawTheme.palette; + return this.prop._muiTheme.baseTheme.palette; }, getStyles(zoom) { @@ -206,4 +177,6 @@ const CircularProgress = React.createClass({ }, }); +CircularProgress = muiThemeable(CircularProgress); + export default CircularProgress; From 9bfa7212ed3463246e55cf61483872e41910aee6 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 23:11:49 +0330 Subject: [PATCH 30/70] migrate Checkbox --- src/checkbox.jsx | 32 ++++++-------------------------- 1 file changed, 6 insertions(+), 26 deletions(-) diff --git a/src/checkbox.jsx b/src/checkbox.jsx index 451a7c3784b334..729fc05c24dc2b 100644 --- a/src/checkbox.jsx +++ b/src/checkbox.jsx @@ -4,29 +4,12 @@ import StylePropable from './mixins/style-propable'; import Transitions from './styles/transitions'; import CheckboxOutline from './svg-icons/toggle/check-box-outline-blank'; import CheckboxChecked from './svg-icons/toggle/check-box'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; +import muiThemeable from './muiThemeable'; - -const Checkbox = React.createClass({ +let Checkbox = 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, - }; - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -52,16 +35,11 @@ const 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; + componentWillReceiveProps(nextProps) { this.setState({ - muiTheme: newMuiTheme, switched: this.props.checked !== nextProps.checked ? nextProps.checked : this.state.switched, @@ -69,7 +47,7 @@ const Checkbox = React.createClass({ }, getTheme() { - return this.state.muiTheme.checkbox; + return this.state._muiTheme.checkbox; }, getStyles() { @@ -206,4 +184,6 @@ const Checkbox = React.createClass({ }); +Checkbox = muiThemeable(Checkbox); + export default Checkbox; From 92db8d0806f53766cd698cb4ef6cdecb7abc8bb8 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 23:12:32 +0330 Subject: [PATCH 31/70] migrate Badge --- src/badge.jsx | 36 ++++++++---------------------------- 1 file changed, 8 insertions(+), 28 deletions(-) diff --git a/src/badge.jsx b/src/badge.jsx index 6c7a9e90ef77a3..9c350267413318 100644 --- a/src/badge.jsx +++ b/src/badge.jsx @@ -1,24 +1,11 @@ import React from 'react'; import Typography from './styles/typography'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; import StylePropable from './mixins/style-propable'; +import muiThemeable from './muiThemeable'; -// Badge -const Badge = React.createClass({ +let Badge = 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, - }; - }, + propTypes: { /** * The MUI Theme to use to render this component with. @@ -60,25 +47,16 @@ const Badge = React.createClass({ */ style: React.PropTypes.object, }, - getInitialState() { - return { - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), - }; - }, + getDefaultProps() { return { primary: false, secondary: false, }; }, - componentWillReceiveProps(nextProps, nextContext) { - let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - this.setState({ - muiTheme: newMuiTheme, - }); - }, + getStyles() { - const theme = this.state.muiTheme.badge; + const theme = this.props._muiTheme.badge; const badgeBackgroundColor = this.props.primary ? theme.primaryColor @@ -143,4 +121,6 @@ const Badge = React.createClass({ }, }); +Badge = muiThemeable(Badge); + export default Badge; From 17cbd771c5fdcc05e6ad993b24b08482dc4609b3 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 23:12:40 +0330 Subject: [PATCH 32/70] migrate avatar --- src/avatar.jsx | 37 +++++-------------------------------- 1 file changed, 5 insertions(+), 32 deletions(-) diff --git a/src/avatar.jsx b/src/avatar.jsx index 4e0d7ca4889983..5ebab41ba6caa8 100644 --- a/src/avatar.jsx +++ b/src/avatar.jsx @@ -1,28 +1,12 @@ import React from 'react'; import StylePropable from './mixins/style-propable'; import Colors from './styles/colors'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; +import muiThemeable from './muiThemeable'; -const Avatar = React.createClass({ +let Avatar = 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, - }; - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -70,19 +54,6 @@ const 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, @@ -114,7 +85,7 @@ const Avatar = React.createClass({ }; if (src) { - const borderColor = this.state.muiTheme.avatar.borderColor; + const borderColor = this.props._muiTheme.avatar.borderColor; if (borderColor) { styles.root = this.mergeStyles(styles.root, { @@ -164,4 +135,6 @@ const Avatar = React.createClass({ }, }); +Avatar = muiThemeable(Avatar); + export default Avatar; From bb1380de3c3759e19ffc5633a5377b987373f872 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 23:12:58 +0330 Subject: [PATCH 33/70] migrate auto-complete --- src/auto-complete.jsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/auto-complete.jsx b/src/auto-complete.jsx index 58118721dc5a61..c86adaaa407bc8 100644 --- a/src/auto-complete.jsx +++ b/src/auto-complete.jsx @@ -15,16 +15,7 @@ const AutoComplete = React.createClass({ ClickAwayable, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { - /** - * The MUI Theme to use to render this component with. - */ - _muiTheme: React.PropTypes.object.isRequired, - animated: React.PropTypes.bool, dataSource: React.PropTypes.array, disableFocusRipple: React.PropTypes.bool, From a97f6894d0c9c0aa87e3e47dbdf6163c21fac532 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 23:13:07 +0330 Subject: [PATCH 34/70] migrate appbar --- src/app-bar.jsx | 45 +++++++++------------------------------------ 1 file changed, 9 insertions(+), 36 deletions(-) diff --git a/src/app-bar.jsx b/src/app-bar.jsx index f0e4760204d5bd..67f8e123d9176d 100644 --- a/src/app-bar.jsx +++ b/src/app-bar.jsx @@ -3,30 +3,14 @@ import StylePropable from './mixins/style-propable'; import Typography from './styles/typography'; import IconButton from './icon-button'; import NavigationMenu from './svg-icons/navigation/menu'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; import Paper from './paper'; import PropTypes from './utils/prop-types'; +import muiThemeable from './muiThemeable'; -const AppBar = React.createClass({ +let AppBar = 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, - }; - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -114,19 +98,6 @@ const AppBar = React.createClass({ zDepth: PropTypes.zDepth, }, - 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, @@ -154,17 +125,17 @@ const AppBar = React.createClass({ }, getStyles() { - const muiTheme = this.state.muiTheme; - const rawTheme = muiTheme.rawTheme; + const theme = this.props._muiTheme; + const rawTheme = theme.baseTheme; - let themeVariables = muiTheme.appBar; - let iconButtonSize = muiTheme.button.iconButtonSize; + let themeVariables = theme.appBar; + let iconButtonSize = theme.button.iconButtonSize; let flatButtonSize = 36; let styles = { root: { position: 'relative', - zIndex: muiTheme.zIndex.appBar, + zIndex: theme.zIndex.appBar, width: '100%', display: 'flex', minHeight: themeVariables.height, @@ -343,4 +314,6 @@ const AppBar = React.createClass({ }); +AppBar = muiThemeable(AppBar); + export default AppBar; From c53a0ecf93f98b25947aa3f1ed4ea400873d2f58 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 23:36:24 +0330 Subject: [PATCH 35/70] migrated SelectableContainerEnhance --- src/hoc/selectable-enhance.js | 37 +++++++---------------------------- 1 file changed, 7 insertions(+), 30 deletions(-) diff --git a/src/hoc/selectable-enhance.js b/src/hoc/selectable-enhance.js index 8ebb1af00030d2..2434eee7974f38 100644 --- a/src/hoc/selectable-enhance.js +++ b/src/hoc/selectable-enhance.js @@ -1,20 +1,15 @@ import React from 'react'; -import ThemeManager from '../styles/theme-manager'; import StylePropable from '../mixins/style-propable'; import ColorManipulator from '../utils/color-manipulator'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; +import muiThemeable from '../muiThemeable'; -export const SelectableContainerEnhance = (Component) => { - const composed = React.createClass({ +const SelectableContainerEnhance = (Component) => { + let composed = React.createClass({ mixins: [ StylePropable, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - displayName: `Selectable${Component.displayName}`, propTypes: { @@ -31,27 +26,6 @@ export const SelectableContainerEnhance = (Component) => { }).isRequired, }, - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - - componentWillReceiveProps(nextProps, nextContext) { - let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - this.setState({muiTheme: newMuiTheme}); - }, - - getInitialState() { - return { - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), - }; - }, - getValueLink: function(props) { return props.valueLink || { value: props.value, @@ -66,7 +40,7 @@ export const SelectableContainerEnhance = (Component) => { let styles = {}; if (!selectedItemStyle) { - let textColor = this.state.muiTheme.rawTheme.palette.textColor; + let textColor = this.props._muiTheme.baseTheme.palette.textColor; let selectedColor = ColorManipulator.fade(textColor, 0.2); styles = { backgroundColor: selectedColor, @@ -127,6 +101,9 @@ export const SelectableContainerEnhance = (Component) => { }, }); + composed = muiThemeable(composed); + return composed; }; +export default SelectableContainerEnhance; From 3d5881e2cf876d6c677dc13f1b48359586c0cc8f Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 23:36:43 +0330 Subject: [PATCH 36/70] migrated grid list --- src/grid-list/grid-list.jsx | 35 ++++----------------------------- src/grid-list/grid-tile.jsx | 39 ++++++------------------------------- 2 files changed, 10 insertions(+), 64 deletions(-) diff --git a/src/grid-list/grid-list.jsx b/src/grid-list/grid-list.jsx index d5304d9fc66ccd..42321a13862448 100644 --- a/src/grid-list/grid-list.jsx +++ b/src/grid-list/grid-list.jsx @@ -1,18 +1,13 @@ import React from 'react'; import StylePropable from '../mixins/style-propable'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; -const GridList = React.createClass({ +let GridList = React.createClass({ mixins: [ StylePropable, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -30,17 +25,6 @@ const GridList = React.createClass({ style: React.PropTypes.object, }, - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - getDefaultProps() { return { cols: 2, @@ -49,19 +33,6 @@ const GridList = 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}); - }, - getStyles() { return { root: { @@ -107,4 +78,6 @@ const GridList = React.createClass({ }, }); +GridList = muiThemeable(GridList); + export default GridList; diff --git a/src/grid-list/grid-tile.jsx b/src/grid-list/grid-tile.jsx index d15234ff0cb1e1..23fc107e19b74e 100644 --- a/src/grid-list/grid-tile.jsx +++ b/src/grid-list/grid-tile.jsx @@ -1,19 +1,14 @@ import React from 'react'; import ReactDOM from 'react-dom'; import StylePropable from '../mixins/style-propable'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from './muiThemeable'; -const GridTile = React.createClass({ +let GridTile = React.createClass({ mixins: [ StylePropable, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -40,17 +35,6 @@ const GridTile = React.createClass({ titlePosition: React.PropTypes.oneOf(['top', 'bottom']), }, - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - getDefaultProps() { return { titlePosition: 'bottom', @@ -62,23 +46,10 @@ const GridTile = 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}); - }, - getStyles() { - const spacing = this.state.muiTheme.rawTheme.spacing; - const themeVariables = this.state.muiTheme.gridTile; + const spacing = this.props._muiTheme.baseTheme.spacing; + const themeVariables = this.props._muiTheme.gridTile; const actionPos = this.props.actionIcon ? this.props.actionPosition : null; const gutterLess = spacing.desktopGutterLess; @@ -226,4 +197,6 @@ const GridTile = React.createClass({ }, }); +GridTile = muiThemeable(GridTile); + export default GridTile; From e0a2f1b8c946e2718e29878eaaa32b2126a5571c Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 23:37:07 +0330 Subject: [PATCH 37/70] migrated overlay --- src/overlay.jsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/overlay.jsx b/src/overlay.jsx index d206ced149f1d7..14a80f2ac2a0a1 100644 --- a/src/overlay.jsx +++ b/src/overlay.jsx @@ -3,8 +3,9 @@ import ReactDOM from 'react-dom'; import StylePropable from './mixins/style-propable'; import Transitions from './styles/transitions'; import Colors from './styles/colors'; +import muiThemeable from './muiThemeable'; -const Overlay = React.createClass({ +let Overlay = React.createClass({ _originalBodyOverflow: '', @@ -12,10 +13,6 @@ const Overlay = React.createClass({ StylePropable, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - componentWillReceiveProps(nextProps) { if (this.props.show !== nextProps.show) { this._applyAutoLockScrolling(nextProps); @@ -130,4 +127,6 @@ const Overlay = React.createClass({ }); +Overlay = muiThemeable(Overlay); + export default Overlay; From 185c1dfb9995157367823f96f046ca730458bae8 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 23:37:27 +0330 Subject: [PATCH 38/70] migrated left-nav --- src/left-nav.jsx | 43 ++++++++++++------------------------------- 1 file changed, 12 insertions(+), 31 deletions(-) diff --git a/src/left-nav.jsx b/src/left-nav.jsx index 5a259185518713..5b88574c840af9 100644 --- a/src/left-nav.jsx +++ b/src/left-nav.jsx @@ -8,38 +8,21 @@ import WindowListenable from './mixins/window-listenable'; import Overlay from './overlay'; import Paper from './paper'; import Menu from './menu/menu'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; import warning from 'warning'; import deprecated from './utils/deprecatedPropType'; import isBrowser from './utils/is-browser'; +import muiThemeable from './muiThemeable'; const Modernizr = isBrowser ? require('./utils/modernizr.custom') : undefined; let openNavEventHandler = null; - -const LeftNav = React.createClass({ +let LeftNav = React.createClass({ mixins: [ StylePropable, WindowListenable, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -199,15 +182,11 @@ const LeftNav = React.createClass({ return { open: (this.props.open !== null ) ? this.props.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) { - const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - const newState = {muiTheme: newMuiTheme}; + componentWillReceiveProps(nextProps) { + const newState = {}; // If docked is changed, change the open state for when uncontrolled. if (this.props.docked !== nextProps.docked) newState.open = nextProps.docked; @@ -254,9 +233,9 @@ const LeftNav = React.createClass({ }, getStyles() { - const muiTheme = this.state.muiTheme; + const muiTheme = this.props._muiTheme; const theme = muiTheme.leftNav; - const rawTheme = muiTheme.rawTheme; + const baseTheme = muiTheme.baseTheme; const x = this._getTranslateMultiplier() * (this.state.open ? 0 : this._getMaxTranslateX()); const styles = { @@ -283,8 +262,8 @@ const LeftNav = React.createClass({ pointerEvents: this.state.open ? 'auto' : 'none', // Bypass mouse events when left nav is closing. }, menuItem: { - height: rawTheme.spacing.desktopLeftNavMenuItemHeight, - lineHeight: `${rawTheme.spacing.desktopLeftNavMenuItemHeight}px`, + height: baseTheme.spacing.desktopLeftNavMenuItemHeight, + lineHeight: `${baseTheme.spacing.desktopLeftNavMenuItemHeight}px`, }, rootWhenOpenRight: { left: 'auto', @@ -295,7 +274,7 @@ const LeftNav = React.createClass({ styles.menuItemLink = this.mergeStyles(styles.menuItem, { display: 'block', textDecoration: 'none', - color: rawTheme.palette.textColor, + color: baseTheme.palette.textColor, }); styles.menuItemSubheader = this.mergeStyles(styles.menuItem, { overflow: 'hidden', @@ -423,7 +402,7 @@ const LeftNav = React.createClass({ }, _getMaxTranslateX() { - const width = this.props.width || this.state.muiTheme.leftNav.width; + const width = this.props.width || this.props._muiTheme.leftNav.width; return width + 10; }, @@ -570,4 +549,6 @@ const LeftNav = React.createClass({ }); +LeftNav = muiThemeable(LeftNav); + export default LeftNav; From f4eb1d486d3991c07466b8d6997e1df7fe31df9b Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 23:37:38 +0330 Subject: [PATCH 39/70] migrated FAB --- src/floating-action-button.jsx | 32 +++++++------------------------- 1 file changed, 7 insertions(+), 25 deletions(-) diff --git a/src/floating-action-button.jsx b/src/floating-action-button.jsx index ea7403469e98e3..52017b7a863dbf 100644 --- a/src/floating-action-button.jsx +++ b/src/floating-action-button.jsx @@ -7,31 +7,15 @@ import EnhancedButton from './enhanced-button'; import FontIcon from './font-icon'; import Paper from './paper'; import Children from './utils/children'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; import warning from 'warning'; +import muiThemeable from './muiThemeable'; -const FloatingActionButton = React.createClass({ +let FloatingActionButton = 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, - }; - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -67,14 +51,10 @@ const FloatingActionButton = React.createClass({ initialZDepth: zDepth, touch: false, zDepth: zDepth, - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, - componentWillReceiveProps(newProps, nextContext) { - let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - this.setState({muiTheme: newMuiTheme}); - + componentWillReceiveProps(newProps) { if (newProps.disabled !== this.props.disabled) { const zDepth = newProps.disabled ? 0 : 2; @@ -101,7 +81,7 @@ const FloatingActionButton = React.createClass({ getTheme() { - return this.state.muiTheme.floatingActionButton; + return this.props._muiTheme.floatingActionButton; }, _getIconColor() { @@ -111,7 +91,7 @@ const FloatingActionButton = React.createClass({ }, getStyles() { - let themeVariables = this.state.muiTheme.floatingActionButton; + let themeVariables = this.props._muiTheme.floatingActionButton; let styles = { root: { @@ -287,4 +267,6 @@ const FloatingActionButton = React.createClass({ }); +FloatingActionButton = muiThemeable(FloatingActionButton); + export default FloatingActionButton; From 1f662c7ec5de1a505539b24361431b6ad62d8d70 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 23:37:49 +0330 Subject: [PATCH 40/70] migrated EnhancedSwitch --- src/enhanced-switch.jsx | 32 ++++++++------------------------ 1 file changed, 8 insertions(+), 24 deletions(-) diff --git a/src/enhanced-switch.jsx b/src/enhanced-switch.jsx index ad21c9d4e077f9..28349545ce8ca1 100644 --- a/src/enhanced-switch.jsx +++ b/src/enhanced-switch.jsx @@ -9,31 +9,15 @@ import ClearFix from './clearfix'; import FocusRipple from './ripples/focus-ripple'; import TouchRipple from './ripples/touch-ripple'; import Paper from './paper'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; +import muiThemeable from './muiThemeable'; -const EnhancedSwitch = React.createClass({ +let EnhancedSwitch = React.createClass({ mixins: [ WindowListenable, StylePropable, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -90,7 +74,6 @@ const EnhancedSwitch = React.createClass({ return { isKeyboardFocused: false, parentWidth: 100, - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, @@ -117,7 +100,7 @@ const EnhancedSwitch = React.createClass({ window.removeEventListener('resize', this._handleResize); }, - componentWillReceiveProps(nextProps, nextContext) { + componentWillReceiveProps(nextProps) { let hasCheckedLinkProp = nextProps.hasOwnProperty('checkedLink'); let hasCheckedProp = nextProps.hasOwnProperty('checked'); let hasToggledProp = nextProps.hasOwnProperty('toggled'); @@ -125,7 +108,6 @@ const 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; @@ -148,11 +130,11 @@ const EnhancedSwitch = React.createClass({ }, getTheme() { - return this.state.muiTheme.rawTheme.palette; + return this.props._muiTheme.rawTheme.palette; }, getStyles() { - let spacing = this.state.muiTheme.rawTheme.spacing; + let spacing = this.props._muiTheme.rawTheme.spacing; let switchWidth = 60 - spacing.desktopGutterLess; let labelWidth = 'calc(100% - 60px)'; let styles = { @@ -188,7 +170,7 @@ const EnhancedSwitch = React.createClass({ width: labelWidth, lineHeight: '24px', color: this.getTheme().textColor, - fontFamily: this.state.muiTheme.rawTheme.fontFamily, + fontFamily: this.props._muiTheme.rawTheme.fontFamily, }, wrap: { transition: Transitions.easeOut(), @@ -462,4 +444,6 @@ const EnhancedSwitch = React.createClass({ }); +EnhancedSwitch = muiThemeable(EnhancedSwitch); + export default EnhancedSwitch; From 7e48fbb31f7451924e7646fd9179181f877f3cec Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 23:38:06 +0330 Subject: [PATCH 41/70] patch drop down icon --- src/drop-down-icon.jsx | 33 +++++---------------------------- 1 file changed, 5 insertions(+), 28 deletions(-) diff --git a/src/drop-down-icon.jsx b/src/drop-down-icon.jsx index f441c1b5092b56..932e0971dd18b4 100644 --- a/src/drop-down-icon.jsx +++ b/src/drop-down-icon.jsx @@ -4,29 +4,12 @@ import Transitions from './styles/transitions'; import ClickAwayable from './mixins/click-awayable'; import FontIcon from './font-icon'; import Menu from './menu/menu'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; +import muiThemeable from './muiThemeable'; - -const DropDownIcon = React.createClass({ +let DropDownIcon = React.createClass({ mixins: [StylePropable, ClickAwayable], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -50,17 +33,9 @@ const 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, @@ -79,7 +54,7 @@ const DropDownIcon = React.createClass({ }, getStyles() { - let spacing = this.state.muiTheme.rawTheme.spacing; + let spacing = this.props._muiTheme.baseTheme.spacing; let iconWidth = 48; let styles = { root: { @@ -156,4 +131,6 @@ const DropDownIcon = React.createClass({ }, }); +DropDownIcon = muiThemeable(DropDownIcon); + export default DropDownIcon; From 8cb134e88cb09c09e9017f47715c8c89269a9b3d Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 23:47:21 +0330 Subject: [PATCH 42/70] migrate list --- src/lists/list-item.jsx | 34 ++++++---------------------------- src/lists/list.jsx | 35 ++++------------------------------- 2 files changed, 10 insertions(+), 59 deletions(-) diff --git a/src/lists/list-item.jsx b/src/lists/list-item.jsx index 7e53a2ab9fb4aa..2b0a4cd6e28aa0 100644 --- a/src/lists/list-item.jsx +++ b/src/lists/list-item.jsx @@ -11,20 +11,15 @@ import IconButton from '../icon-button'; import OpenIcon from '../svg-icons/navigation/arrow-drop-up'; import CloseIcon from '../svg-icons/navigation/arrow-drop-down'; import NestedList from './nested-list'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; -const ListItem = React.createClass({ +let ListItem = React.createClass({ mixins: [ PureRenderMixin, StylePropable, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -65,17 +60,6 @@ const ListItem = React.createClass({ style: React.PropTypes.object, }, - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - getDefaultProps() { return { autoGenerateNestedIndicator: true, @@ -100,17 +84,9 @@ 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, @@ -141,7 +117,7 @@ const ListItem = React.createClass({ ...other, } = this.props; - const textColor = this.state.muiTheme.rawTheme.palette.textColor; + const textColor = this.props._muiTheme.baseTheme.palette.textColor; const hoverColor = ColorManipulator.fade(textColor, 0.1); const singleAvatar = !secondaryText && (leftAvatar || rightAvatar); const singleNoAvatar = !secondaryText && !(leftAvatar || rightAvatar); @@ -164,7 +140,7 @@ const ListItem = React.createClass({ //This inner div is needed so that ripples will span the entire container innerDiv: { - marginLeft: nestedLevel * this.state.muiTheme.listItem.nestedLevelDepth, + marginLeft: nestedLevel * this.props._muiTheme.listItem.nestedLevelDepth, paddingLeft: leftIcon || leftAvatar || leftCheckbox || insetChildren ? 72 : 16, paddingRight: rightIcon || rightAvatar || rightIconButton ? 56 : rightToggle ? 72 : 16, paddingBottom: singleAvatar ? 20 : 16, @@ -539,4 +515,6 @@ const ListItem = React.createClass({ }); +ListItem = muiThemeable(ListItem); + export default ListItem; diff --git a/src/lists/list.jsx b/src/lists/list.jsx index 1080c0b2cb8e7c..0098a5201b5496 100644 --- a/src/lists/list.jsx +++ b/src/lists/list.jsx @@ -4,20 +4,15 @@ import PropTypes from '../utils/prop-types'; import StylePropable from '../mixins/style-propable'; import Typography from '../styles/typography'; import Paper from '../paper'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; -const List = React.createClass({ +let List = React.createClass({ mixins: [ PureRenderMixin, StylePropable, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -36,36 +31,12 @@ 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, @@ -111,4 +82,6 @@ const List = React.createClass({ }, }); +List = muiThemeable(List); + export default List; From daef770a83604b16b11f98f17c5f8295a3609a87 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 23:47:33 +0330 Subject: [PATCH 43/70] migrate linear-progress --- src/linear-progress.jsx | 41 +++++++---------------------------------- 1 file changed, 7 insertions(+), 34 deletions(-) diff --git a/src/linear-progress.jsx b/src/linear-progress.jsx index 3804c03b5d0202..06b121206214dc 100644 --- a/src/linear-progress.jsx +++ b/src/linear-progress.jsx @@ -2,10 +2,9 @@ import React from 'react'; import ReactDOM from 'react-dom'; import StylePropable from './mixins/style-propable'; import Transitions from './styles/transitions'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; +import muiThemeable from './muiThemeable'; -const LinearProgress = React.createClass({ +let LinearProgress = React.createClass({ mixins: [StylePropable], @@ -27,34 +26,6 @@ const LinearProgress = React.createClass({ value: React.PropTypes.number, }, - 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), - }; - }, - - //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; @@ -90,8 +61,8 @@ const LinearProgress = React.createClass({ if (!this.isMounted()) return; if (this.props.mode !== 'indeterminate') return; - const right = this.state.muiTheme.isRtl ? 'left' : 'right'; - const left = this.state.muiTheme.isRtl ? 'right' : 'left'; + const right = this.props._muiTheme.isRtl ? 'left' : 'right'; + const left = this.props._muiTheme.isRtl ? 'right' : 'left'; if (step === 0) { barElement.style[left] = stepValues[0][0] + '%'; @@ -119,7 +90,7 @@ const LinearProgress = React.createClass({ }, getTheme() { - return this.state.muiTheme.rawTheme.palette; + return this.props._muiTheme.baseTheme.palette; }, getStyles() { @@ -188,4 +159,6 @@ const LinearProgress = React.createClass({ }, }); +LinearProgress = muiThemeable(LinearProgress); + export default LinearProgress; From 6c6371fb243c739326d856713bab97ea78fe7c93 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Sun, 20 Dec 2015 23:59:14 +0330 Subject: [PATCH 44/70] migrate popover --- src/popover/popover-animation-from-top.jsx | 30 +++++---------------- src/popover/popover-default-animation.jsx | 31 +++++----------------- src/popover/popover.jsx | 27 +++---------------- 3 files changed, 16 insertions(+), 72 deletions(-) diff --git a/src/popover/popover-animation-from-top.jsx b/src/popover/popover-animation-from-top.jsx index 4e811255e09241..90a8eda8a9728d 100644 --- a/src/popover/popover-animation-from-top.jsx +++ b/src/popover/popover-animation-from-top.jsx @@ -2,11 +2,10 @@ import Transitions from '../styles/transitions'; import React from 'react'; import PropTypes from '../utils/prop-types'; import StylePropable from '../mixins/style-propable'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; import Paper from '../paper'; +import muiThemeable from '../muiThemeable'; -const PopoverAnimationFromTop = React.createClass({ +let PopoverAnimationFromTop = React.createClass({ mixins: [StylePropable], propTypes: { @@ -29,26 +28,10 @@ const PopoverAnimationFromTop = React.createClass({ getInitialState() { return { - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), open: false, }; }, - contextTypes: { - muiTheme: React.PropTypes.object, - }, - - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - getDefaultProps() { return { style: {}, @@ -60,12 +43,9 @@ const PopoverAnimationFromTop = React.createClass({ this.setState({open: true}); //eslint-disable-line react/no-did-mount-set-state }, - componentWillReceiveProps(nextProps, nextContext) { - let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - + componentWillReceiveProps(nextProps) { this.setState({ open: nextProps.open, - muiTheme: newMuiTheme, }); }, @@ -79,7 +59,7 @@ const PopoverAnimationFromTop = React.createClass({ transform: 'scaleY(0)', transformOrigin: `${horizontal} ${targetOrigin.vertical}`, position: 'fixed', - zIndex: this.state.muiTheme.zIndex.popover, + zIndex: this.props._muiTheme.zIndex.popover, transition: Transitions.easeOut('450ms', ['transform', 'opacity']), maxHeight: '100%', }, @@ -119,4 +99,6 @@ const PopoverAnimationFromTop = React.createClass({ }, }); +PopoverAnimationFromTop = muiThemeable(PopoverAnimationFromTop); + export default PopoverAnimationFromTop; diff --git a/src/popover/popover-default-animation.jsx b/src/popover/popover-default-animation.jsx index b977dd7b920ae4..1e5850396e6f7c 100644 --- a/src/popover/popover-default-animation.jsx +++ b/src/popover/popover-default-animation.jsx @@ -2,11 +2,10 @@ import Transitions from '../styles/transitions'; import React from 'react'; import PropTypes from '../utils/prop-types'; import StylePropable from '../mixins/style-propable'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; import Paper from '../paper'; +import muiThemeable from '../muiThemeable'; -const PopoverDefaultAnimation = React.createClass({ +let PopoverDefaultAnimation = React.createClass({ mixins: [StylePropable], propTypes: { @@ -33,26 +32,10 @@ const PopoverDefaultAnimation = React.createClass({ getInitialState() { return { - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), open: false, }; }, - contextTypes: { - muiTheme: React.PropTypes.object, - }, - - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - getDefaultProps() { return { style: {}, @@ -64,12 +47,9 @@ const PopoverDefaultAnimation = React.createClass({ this.setState({open: true}); //eslint-disable-line react/no-did-mount-set-state }, - componentWillReceiveProps(nextProps, nextContext) { - let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - + componentWillReceiveProps(nextProps, ) { this.setState({ open: nextProps.open, - muiTheme: newMuiTheme, }); }, @@ -84,10 +64,9 @@ const PopoverDefaultAnimation = React.createClass({ transform: 'scale(0, 0)', transformOrigin: `${horizontal} ${targetOrigin.vertical}`, position: 'fixed', - zIndex: this.state.muiTheme.zIndex.popover, + zIndex: this.props._muiTheme.zIndex.popover, transition: Transitions.easeOut('250ms', ['transform', 'opacity']), maxHeight: '100%', - }, horizontal: { maxHeight: '100%', @@ -150,4 +129,6 @@ const PopoverDefaultAnimation = React.createClass({ }, }); +PopoverDefaultAnimation = muiThemeable(PopoverDefaultAnimation); + export default PopoverDefaultAnimation; diff --git a/src/popover/popover.jsx b/src/popover/popover.jsx index ef45e401c3d48a..98906ebbc4dfe1 100644 --- a/src/popover/popover.jsx +++ b/src/popover/popover.jsx @@ -6,12 +6,11 @@ import StylePropable from '../mixins/style-propable'; import PropTypes from '../utils/prop-types'; import Paper from '../paper'; import throttle from 'lodash.throttle'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; import Extend from '../utils/extend'; import PopoverDefaultAnimation from './popover-default-animation'; +import muiThemeable from '../muiThemeable'; -const Popover = React.createClass({ +let Popover = React.createClass({ mixins: [ StylePropable, WindowListenable, @@ -78,22 +77,6 @@ const Popover = React.createClass({ return { open: this.props.open, closing: false, - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), - }; - }, - - contextTypes: { - muiTheme: React.PropTypes.object, - }, - - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, }; }, @@ -103,7 +86,6 @@ const Popover = React.createClass({ }, componentWillReceiveProps(nextProps, nextContext) { - let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; if (nextProps.open !== this.state.open) { if (nextProps.open) { @@ -111,7 +93,6 @@ const Popover = React.createClass({ this.setState({ open: true, closing: false, - muiTheme: newMuiTheme, }); } else { if (nextProps.animated) { @@ -120,14 +101,12 @@ const Popover = React.createClass({ if (this.isMounted()) { this.setState({ open: false, - muiTheme: newMuiTheme, }); } }, 500); } else { this.setState({ open: false, - muiTheme: newMuiTheme, }); } } @@ -342,4 +321,6 @@ const Popover = React.createClass({ }); +Popover = muiThemeable(Popover); + export default Popover; From b29842bfbefb6fa23d5d4260eb32a0d0a80efe10 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Mon, 21 Dec 2015 00:03:34 +0330 Subject: [PATCH 45/70] migrate transition groups --- src/transition-groups/scale-in-child.jsx | 36 +++--------------------- src/transition-groups/scale-in.jsx | 36 +++--------------------- src/transition-groups/slide-in-child.jsx | 36 +++--------------------- src/transition-groups/slide-in.jsx | 36 +++--------------------- 4 files changed, 16 insertions(+), 128 deletions(-) diff --git a/src/transition-groups/scale-in-child.jsx b/src/transition-groups/scale-in-child.jsx index fdae37cf9c73da..2e8cbd4e152fdd 100644 --- a/src/transition-groups/scale-in-child.jsx +++ b/src/transition-groups/scale-in-child.jsx @@ -4,42 +4,12 @@ import PureRenderMixin from 'react-addons-pure-render-mixin'; import StylePropable from '../mixins/style-propable'; import AutoPrefix from '../styles/auto-prefix'; import Transitions from '../styles/transitions'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; - -const ScaleInChild = React.createClass({ +let ScaleInChild = React.createClass({ mixins: [PureRenderMixin, 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 { - 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}); - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -136,4 +106,6 @@ const ScaleInChild = React.createClass({ }); +ScaleInChild = muiThemeable(ScaleInChild); + export default ScaleInChild; diff --git a/src/transition-groups/scale-in.jsx b/src/transition-groups/scale-in.jsx index 513de6321b5183..3c2dafed6a5774 100644 --- a/src/transition-groups/scale-in.jsx +++ b/src/transition-groups/scale-in.jsx @@ -3,42 +3,12 @@ import PureRenderMixin from 'react-addons-pure-render-mixin'; import ReactTransitionGroup from 'react-addons-transition-group'; import StylePropable from '../mixins/style-propable'; import ScaleInChild from './scale-in-child'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; - -const ScaleIn = React.createClass({ +let ScaleIn = React.createClass({ mixins: [PureRenderMixin, 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 { - 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}); - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -105,4 +75,6 @@ const ScaleIn = React.createClass({ }); +ScaleIn = muiThemeable(ScaleIn); + export default ScaleIn; diff --git a/src/transition-groups/slide-in-child.jsx b/src/transition-groups/slide-in-child.jsx index 0f0819cef9dff3..a57b77f4868202 100644 --- a/src/transition-groups/slide-in-child.jsx +++ b/src/transition-groups/slide-in-child.jsx @@ -3,42 +3,12 @@ import ReactDOM from 'react-dom'; import StylePropable from '../mixins/style-propable'; import AutoPrefix from '../styles/auto-prefix'; import Transitions from '../styles/transitions'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; - -const SlideInChild = React.createClass({ +let SlideInChild = 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 { - 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}); - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -128,4 +98,6 @@ const SlideInChild = React.createClass({ }); +SlideInChild = muiThemeable(SlideInChild); + export default SlideInChild; diff --git a/src/transition-groups/slide-in.jsx b/src/transition-groups/slide-in.jsx index 3ecba3976c8048..6fe54f7070f808 100644 --- a/src/transition-groups/slide-in.jsx +++ b/src/transition-groups/slide-in.jsx @@ -2,42 +2,12 @@ import React from 'react'; import ReactTransitionGroup from 'react-addons-transition-group'; import StylePropable from '../mixins/style-propable'; import SlideInChild from './slide-in-child'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; - -const SlideIn = React.createClass({ +let SlideIn = 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 { - 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}); - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -107,4 +77,6 @@ const SlideIn = React.createClass({ }); +SlideIn = muiThemeable(SlideIn); + export default SlideIn; From c25cc3b7f4a387658eece052846671fba9eafdf4 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Mon, 21 Dec 2015 00:15:25 +0330 Subject: [PATCH 46/70] migrate render-to-layer --- src/render-to-layer.jsx | 39 +++++---------------------------------- 1 file changed, 5 insertions(+), 34 deletions(-) diff --git a/src/render-to-layer.jsx b/src/render-to-layer.jsx index b02bd0a1028edb..afa4290a2f2517 100644 --- a/src/render-to-layer.jsx +++ b/src/render-to-layer.jsx @@ -1,11 +1,10 @@ import React from 'react'; import ReactDOM from 'react-dom'; import Dom from './utils/dom'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; +import muiThemeable from './muiThemeable'; // heavily inspired by https://github.com/Khan/react-components/blob/master/js/layered-component-mixin.jsx -const RenderToLayer = React.createClass({ +let RenderToLayer = React.createClass({ propTypes: { /** @@ -25,36 +24,6 @@ const RenderToLayer = React.createClass({ }; }, - getInitialState() { - return { - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), - }; - }, - - contextTypes: { - muiTheme: React.PropTypes.object, - }, - - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - - //to update theme inside state whenever a new theme is passed down - //from the parent / owner using context - componentWillReceiveProps(nextProps, nextContext) { - const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - this.setState({ - muiTheme: newMuiTheme, - }); - }, - componentDidMount() { this._renderLayer(); }, @@ -116,7 +85,7 @@ const RenderToLayer = React.createClass({ this._layer.style.bottom = 0; this._layer.style.left = 0; this._layer.style.right = 0; - this._layer.style.zIndex = this.state.muiTheme.zIndex.layer; + this._layer.style.zIndex = this.props._muiTheme.zIndex.layer; } else { setTimeout(() => { window.addEventListener('touchstart', this.onClickAway); @@ -161,4 +130,6 @@ const RenderToLayer = React.createClass({ }); +RenderToLayer = muiThemeable(RenderToLayer); + export default RenderToLayer; From 8b7eaea2db056c5779365e204f1490216403170c Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Mon, 21 Dec 2015 00:15:38 +0330 Subject: [PATCH 47/70] migrate tooltip --- src/tooltip.jsx | 36 ++++++++---------------------------- 1 file changed, 8 insertions(+), 28 deletions(-) diff --git a/src/tooltip.jsx b/src/tooltip.jsx index 413d98335e5295..cdc0e92c11e7b4 100644 --- a/src/tooltip.jsx +++ b/src/tooltip.jsx @@ -3,17 +3,12 @@ import ReactDOM from 'react-dom'; import StylePropable from './mixins/style-propable'; import Transitions from './styles/transitions'; import Colors from './styles/colors'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; +import muiThemeable from './muiThemeable'; -const Tooltip = React.createClass({ +let Tooltip = React.createClass({ mixins: [StylePropable], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -36,29 +31,13 @@ const Tooltip = React.createClass({ verticalPosition: React.PropTypes.oneOf(['top', 'bottom']), }, - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - componentDidMount() { this._setRippleSize(); this._setTooltipPosition(); }, - //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() { @@ -68,7 +47,6 @@ const Tooltip = React.createClass({ getInitialState() { return { offsetWidth: null, - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, @@ -80,17 +58,17 @@ const Tooltip = React.createClass({ let offset = verticalPosition === 'bottom' ? 14 + touchMarginOffset : -14 - touchMarginOffset; - const muiTheme = this.state.muiTheme; - const rawTheme = muiTheme.rawTheme; + const theme = this.props._muiTheme; + const baseTheme = theme.baseTheme; let styles = { root: { position: 'absolute', - fontFamily: rawTheme.fontFamily, + fontFamily: baseTheme.fontFamily, fontSize: '10px', lineHeight: '22px', padding: '0 8px', - zIndex: muiTheme.zIndex.tooltip, + zIndex: theme.zIndex.tooltip, color: Colors.white, overflow: 'hidden', top: -10000, @@ -204,4 +182,6 @@ const Tooltip = React.createClass({ }); +Tooltip = muiThemeable(Tooltip); + export default Tooltip; From 13cf40f8a01e0a2399959d097d3db4a8f8a80bc8 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Mon, 21 Dec 2015 00:16:02 +0330 Subject: [PATCH 48/70] migrate switches --- src/radio-button-group.jsx | 32 ++++++-------------------------- src/radio-button.jsx | 37 +++++-------------------------------- src/toggle.jsx | 34 ++++++---------------------------- 3 files changed, 17 insertions(+), 86 deletions(-) diff --git a/src/radio-button-group.jsx b/src/radio-button-group.jsx index 3ef286048dbfe8..c09fdb7dd4f9cd 100644 --- a/src/radio-button-group.jsx +++ b/src/radio-button-group.jsx @@ -1,29 +1,13 @@ import React from 'react'; import RadioButton from './radio-button'; import StylePropable from './mixins/style-propable'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; +import muiThemeable from './muiThemeable'; -const RadioButtonGroup = React.createClass({ +let RadioButtonGroup = 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, - }; - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -57,7 +41,6 @@ const RadioButtonGroup = React.createClass({ return { numberCheckedRadioButtons: 0, selected: this.props.valueSelected || this.props.defaultSelected || '', - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, @@ -77,15 +60,10 @@ const RadioButtonGroup = React.createClass({ this.setState({numberCheckedRadioButtons: cnt}); }, - componentWillReceiveProps(nextProps, nextContext) { - let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - let newState = {muiTheme: newMuiTheme}; - + componentWillReceiveProps(nextProps) { if (nextProps.hasOwnProperty('valueSelected')) { - newState.selected = nextProps.valueSelected; + this.setState({selected: nextProps.valueSelected}); } - - this.setState(newState); }, render() { @@ -156,4 +134,6 @@ const RadioButtonGroup = React.createClass({ }); +RadioButtonGroup = muiThemeable(RadioButtonGroup); + export default RadioButtonGroup; diff --git a/src/radio-button.jsx b/src/radio-button.jsx index 43c0c59905daea..2bab8b869e1035 100644 --- a/src/radio-button.jsx +++ b/src/radio-button.jsx @@ -4,41 +4,12 @@ import Transitions from './styles/transitions'; import EnhancedSwitch from './enhanced-switch'; import RadioButtonOff from './svg-icons/toggle/radio-button-unchecked'; import RadioButtonOn from './svg-icons/toggle/radio-button-checked'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; +import muiThemeable from './muiThemeable'; -const RadioButton = React.createClass({ +let RadioButton = 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 { - 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}); - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -55,7 +26,7 @@ const RadioButton = React.createClass({ }, getTheme() { - return this.state.muiTheme.radioButton; + return this.props._muiTheme.radioButton; }, getStyles() { @@ -184,4 +155,6 @@ const RadioButton = React.createClass({ }); +RadioButton = muiThemeable(RadioButton); + export default RadioButton; diff --git a/src/toggle.jsx b/src/toggle.jsx index d21e16013267b5..b71bddd2c50a36 100644 --- a/src/toggle.jsx +++ b/src/toggle.jsx @@ -3,19 +3,14 @@ import StylePropable from './mixins/style-propable'; import Transitions from './styles/transitions'; import Paper from './paper'; import EnhancedSwitch from './enhanced-switch'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; +import muiThemeable from './muiThemeable'; -const Toggle = React.createClass({ +let Toggle = React.createClass({ mixins: [ StylePropable, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -36,17 +31,6 @@ const Toggle = React.createClass({ valueLink: React.PropTypes.object, }, - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - getInitialState() { return { switched: @@ -54,19 +38,11 @@ const 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.state.muiTheme.toggle; + return this.props._muiTheme.toggle; }, getStyles() { @@ -161,7 +137,7 @@ const Toggle = React.createClass({ }, this.props.rippleStyle); let rippleColor = this.state.switched ? - this.getTheme().thumbOnColor : this.state.muiTheme.textColor; + this.getTheme().thumbOnColor : this.props._muiTheme.textColor; let iconStyle = this.mergeStyles( styles.icon, @@ -217,4 +193,6 @@ const Toggle = React.createClass({ }); +Toggle = muiThemeable(Toggle); + export default Toggle; From 18a9c08bb81a355f3c8f5a12aab4605f3d5cf631 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Mon, 21 Dec 2015 00:16:19 +0330 Subject: [PATCH 49/70] migrate raised-button --- src/raised-button.jsx | 32 +++++++------------------------- 1 file changed, 7 insertions(+), 25 deletions(-) diff --git a/src/raised-button.jsx b/src/raised-button.jsx index 30923965c90eb7..54d7955b61972f 100644 --- a/src/raised-button.jsx +++ b/src/raised-button.jsx @@ -7,8 +7,7 @@ import Children from './utils/children'; import Typography from './styles/typography'; import EnhancedButton from './enhanced-button'; import Paper from './paper'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; +import muiThemeable from './muiThemeable'; function validateLabel(props, propName, componentName) { if (!props.children && !props.label) { @@ -17,28 +16,12 @@ function validateLabel(props, propName, componentName) { } } - -const RaisedButton = React.createClass({ +let RaisedButton = 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, - }; - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -91,17 +74,14 @@ const RaisedButton = React.createClass({ touched: false, initialZDepth: zDepth, zDepth: zDepth, - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, componentWillReceiveProps(nextProps, nextContext) { let zDepth = nextProps.disabled ? 0 : 1; - let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; this.setState({ zDepth: zDepth, initialZDepth: zDepth, - muiTheme: newMuiTheme, }); }, @@ -128,11 +108,11 @@ const RaisedButton = React.createClass({ }, getThemeButton() { - return this.state.muiTheme.button; + return this.props._muiTheme.button; }, getTheme() { - return this.state.muiTheme.raisedButton; + return this.props._muiTheme.raisedButton; }, getStyles() { @@ -171,7 +151,7 @@ const RaisedButton = React.createClass({ (this.getThemeButton().textTransform ? this.getThemeButton().textTransform : 'uppercase'), fontWeight: Typography.fontWeightMedium, margin: 0, - padding: '0px ' + this.state.muiTheme.rawTheme.spacing.desktopGutterLess + 'px', + padding: '0px ' + this.props._muiTheme.baseTheme.spacing.desktopGutterLess + 'px', userSelect: 'none', lineHeight: (this.props.style && this.props.style.height) ? this.props.style.height : this.getThemeButton().height + 'px', @@ -308,4 +288,6 @@ const RaisedButton = React.createClass({ }, }); +RaisedButton = muiThemeable(RaisedButton); + export default RaisedButton; From a40b3837a28f116c7660e2c57c8ab5abc84dda5b Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Mon, 21 Dec 2015 00:16:29 +0330 Subject: [PATCH 50/70] migrate refresh indicator --- src/refresh-indicator.jsx | 37 +++++-------------------------------- 1 file changed, 5 insertions(+), 32 deletions(-) diff --git a/src/refresh-indicator.jsx b/src/refresh-indicator.jsx index 836fdf4bb94204..5a47b533dcda95 100644 --- a/src/refresh-indicator.jsx +++ b/src/refresh-indicator.jsx @@ -4,17 +4,12 @@ import StylePropable from './mixins/style-propable'; import AutoPrefix from './styles/auto-prefix'; import Transitions from './styles/transitions'; import Paper from './paper'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; +import muiThemeable from './muiThemeable'; const VIEWBOX_SIZE = 32; -const RefreshIndicator = React.createClass({ +let RefreshIndicator = React.createClass({ mixins: [StylePropable], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -43,30 +38,6 @@ const RefreshIndicator = React.createClass({ }; }, - //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}); - }, - componentDidMount() { this.componentDidUpdate(); }, @@ -143,7 +114,7 @@ const RefreshIndicator = React.createClass({ }, _getTheme() { - return this.state.muiTheme.refreshIndicator; + return this.props._muiTheme.refreshIndicator; }, _getPaddingSize() { @@ -311,4 +282,6 @@ const RefreshIndicator = React.createClass({ }); +RefreshIndicator = muiThemeable(RefreshIndicator); + export default RefreshIndicator; From f4cf2ea31032941e69011e8ee350be5e0fe2c6fc Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Mon, 21 Dec 2015 00:16:47 +0330 Subject: [PATCH 51/70] migrate select field --- src/select-field.jsx | 35 ++++------------------------------- 1 file changed, 4 insertions(+), 31 deletions(-) diff --git a/src/select-field.jsx b/src/select-field.jsx index 5274da08e739ae..b1c201cc6a1b8c 100644 --- a/src/select-field.jsx +++ b/src/select-field.jsx @@ -2,21 +2,16 @@ import React from 'react'; import StylePropable from './mixins/style-propable'; import TextField from './text-field'; import DropDownMenu from './drop-down-menu'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; import ContextPure from './mixins/context-pure'; +import muiThemeable from './muiThemeable'; -const SelectField = React.createClass({ +let SelectField = React.createClass({ mixins: [ StylePropable, ContextPure, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - statics: { getChildrenClasses() { return [ @@ -61,23 +56,6 @@ const SelectField = React.createClass({ value: React.PropTypes.any, }, - //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 { autoWidth: false, @@ -85,13 +63,6 @@ const SelectField = 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}); - }, - getStyles() { const {floatingLabelText} = this.props; @@ -169,4 +140,6 @@ const SelectField = React.createClass({ }, }); +SelectField = muiThemeable(SelectField); + export default SelectField; From 8a0f68383458e73ef45477602f722f812ab1c040 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Mon, 21 Dec 2015 00:17:03 +0330 Subject: [PATCH 52/70] migrate slider --- src/slider.jsx | 28 +++++----------------------- 1 file changed, 5 insertions(+), 23 deletions(-) diff --git a/src/slider.jsx b/src/slider.jsx index 88485d820e2235..d465fc0b893f6c 100644 --- a/src/slider.jsx +++ b/src/slider.jsx @@ -3,8 +3,7 @@ import ReactDOM from 'react-dom'; import StylePropable from './mixins/style-propable'; import Transitions from './styles/transitions'; import FocusRipple from './ripples/focus-ripple'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; +import muiThemeable from './muiThemeable'; /** * Verifies min/max range. @@ -41,14 +40,10 @@ let valueInRangePropType = (props, propName, componentName) => { }; -const Slider = React.createClass({ +let Slider = React.createClass({ mixins: [StylePropable], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -78,17 +73,6 @@ const 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 { disabled: false, @@ -115,21 +99,17 @@ const Slider = React.createClass({ hovered: false, percent: percent, value: value, - 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}); - if (nextProps.value !== undefined && !this.state.dragging) { this.setValue(nextProps.value); } }, getTheme() { - return this.state.muiTheme.slider; + return this.props._muiTheme.slider; }, getStyles() { @@ -500,4 +480,6 @@ const Slider = React.createClass({ }); +Slider = muiThemeable(Slider); + export default Slider; From 33583d3cc999d442d6355ee57d955b20dfa8a5a9 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Mon, 21 Dec 2015 00:17:26 +0330 Subject: [PATCH 53/70] migrate snackbar --- src/snackbar.jsx | 32 ++++++-------------------------- 1 file changed, 6 insertions(+), 26 deletions(-) diff --git a/src/snackbar.jsx b/src/snackbar.jsx index ac8aba588afa36..648209cf7ea4b7 100644 --- a/src/snackbar.jsx +++ b/src/snackbar.jsx @@ -3,14 +3,13 @@ import StylePropable from './mixins/style-propable'; import Transitions from './styles/transitions'; import ClickAwayable from './mixins/click-awayable'; import FlatButton from './flat-button'; -import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; -import ThemeManager from './styles/theme-manager'; import ContextPure from './mixins/context-pure'; import StyleResizable from './mixins/style-resizable'; import warning from 'warning'; import deprecated from './utils/deprecatedPropType'; +import muiThemeable from './muiThemeable'; -const Snackbar = React.createClass({ +let Snackbar = React.createClass({ mixins: [ StylePropable, @@ -27,10 +26,6 @@ const Snackbar = React.createClass({ _timerOneAtTheTimeId: undefined, - contextTypes: { - muiTheme: React.PropTypes.object, - }, - statics: { getRelevantContextKeys(muiTheme) { const theme = muiTheme.snackbar; @@ -124,17 +119,6 @@ const Snackbar = 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() { let open = this.props.open; @@ -146,16 +130,10 @@ const Snackbar = React.createClass({ open: open, message: this.props.message, action: this.props.action, - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, componentWillReceiveProps(nextProps, nextContext) { - const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - this.setState({ - muiTheme: newMuiTheme, - }); - if (this.state.open && nextProps.open === this.props.open && (nextProps.message !== this.props.message || nextProps.action !== this.props.action)) { this.setState({ @@ -230,7 +208,7 @@ const Snackbar = React.createClass({ desktopGutter, desktopSubheaderHeight, actionColor, - } = this.constructor.getRelevantContextKeys(this.state.muiTheme); + } = this.constructor.getRelevantContextKeys(this.props._muiTheme); const isSmall = this.state.deviceSize === this.constructor.Sizes.SMALL; @@ -241,7 +219,7 @@ const Snackbar = React.createClass({ display: 'flex', right: 0, bottom: 0, - zIndex: this.state.muiTheme.zIndex.snackbar, + zIndex: this.props._muiTheme.zIndex.snackbar, visibility: 'hidden', transform: 'translate3d(0, ' + desktopSubheaderHeight + 'px, 0)', transition: @@ -373,4 +351,6 @@ const Snackbar = React.createClass({ }); +Snackbar = muiThemeable(Snackbar); + export default Snackbar; From cca367a7046c9df3ddfd54a7c685c0a42cea9790 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Mon, 21 Dec 2015 00:25:20 +0330 Subject: [PATCH 54/70] migrate toolbar --- src/toolbar/toolbar-group.jsx | 39 ++++--------------------------- src/toolbar/toolbar-separator.jsx | 39 +++++-------------------------- src/toolbar/toolbar-title.jsx | 39 +++++-------------------------- src/toolbar/toolbar.jsx | 39 +++++-------------------------- 4 files changed, 23 insertions(+), 133 deletions(-) diff --git a/src/toolbar/toolbar-group.jsx b/src/toolbar/toolbar-group.jsx index 278f95c8450c29..631749a6c851dc 100644 --- a/src/toolbar/toolbar-group.jsx +++ b/src/toolbar/toolbar-group.jsx @@ -1,17 +1,12 @@ import React from 'react'; import Colors from '../styles/colors'; import StylePropable from '../mixins/style-propable'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; -const ToolbarGroup = React.createClass({ +let ToolbarGroup = React.createClass({ mixins: [StylePropable], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -51,17 +46,6 @@ const ToolbarGroup = React.createClass({ style: React.PropTypes.object, }, - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - getDefaultProps() { return { firstChild: false, @@ -70,25 +54,12 @@ const ToolbarGroup = 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) { - const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - this.setState({muiTheme: newMuiTheme}); - }, - getTheme() { - return this.state.muiTheme.toolbar; + return this.props._muiTheme.toolbar; }, getSpacing() { - return this.state.muiTheme.rawTheme.spacing; + return this.props._muiTheme.baseTheme.spacing; }, getStyles() { @@ -99,7 +70,7 @@ const ToolbarGroup = React.createClass({ } = this.props; const marginHorizontal = this.getSpacing().desktopGutter; - const marginVertical = (this.getTheme().height - this.state.muiTheme.button.height) / 2; + const marginVertical = (this.getTheme().height - this.props._muiTheme.button.height) / 2; const styles = { root: { float, diff --git a/src/toolbar/toolbar-separator.jsx b/src/toolbar/toolbar-separator.jsx index c7b0801768f153..8573151b8bf021 100644 --- a/src/toolbar/toolbar-separator.jsx +++ b/src/toolbar/toolbar-separator.jsx @@ -1,16 +1,11 @@ import React from 'react'; import StylePropable from '../mixins/style-propable'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; -const ToolbarSeparator = React.createClass({ +let ToolbarSeparator = React.createClass({ mixins: [StylePropable], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -28,36 +23,12 @@ const ToolbarSeparator = 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) { - const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - this.setState({muiTheme: newMuiTheme}); - }, - getTheme() { - return this.state.muiTheme.toolbar; + return this.props._muiTheme.toolbar; }, getSpacing() { - return this.state.muiTheme.rawTheme.spacing; + return this.props._muiTheme.baseTheme.spacing; }, getStyles() { @@ -91,4 +62,6 @@ const ToolbarSeparator = React.createClass({ }); +ToolbarSeparator = muiThemeable(ToolbarSeparator); + export default ToolbarSeparator; diff --git a/src/toolbar/toolbar-title.jsx b/src/toolbar/toolbar-title.jsx index d91af437fd84c1..0f83dd99ffbefb 100644 --- a/src/toolbar/toolbar-title.jsx +++ b/src/toolbar/toolbar-title.jsx @@ -1,16 +1,11 @@ import React from 'react'; import StylePropable from '../mixins/style-propable'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; -const ToolbarTitle = React.createClass({ +let ToolbarTitle = React.createClass({ mixins: [StylePropable], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -33,36 +28,12 @@ const 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) { - const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - this.setState({muiTheme: newMuiTheme}); - }, - getTheme() { - return this.state.muiTheme.toolbar; + return this.props._muiTheme.toolbar; }, getSpacing() { - return this.state.muiTheme.rawTheme.spacing; + return this.props._muiTheme.baseTheme.spacing; }, getStyles() { @@ -96,4 +67,6 @@ const ToolbarTitle = React.createClass({ }); +ToolbarTitle = muiThemeable(ToolbarTitle); + export default ToolbarTitle; diff --git a/src/toolbar/toolbar.jsx b/src/toolbar/toolbar.jsx index e69022d872a19b..63838b6d012068 100644 --- a/src/toolbar/toolbar.jsx +++ b/src/toolbar/toolbar.jsx @@ -1,16 +1,11 @@ import React from 'react'; import StylePropable from '../mixins/style-propable'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; -const Toolbar = React.createClass({ +let Toolbar = React.createClass({ mixins: [StylePropable], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -44,36 +39,12 @@ const Toolbar = React.createClass({ }; }, - //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.state.muiTheme.toolbar; + return this.props._muiTheme.toolbar; }, getSpacing() { - return this.state.muiTheme.rawTheme.spacing; + return this.props._muiTheme.baseTheme.spacing; }, getStyles() { @@ -108,4 +79,6 @@ const Toolbar = React.createClass({ }); +Toolbar = muiThemeable(Toolbar); + export default Toolbar; From 307588962f2bd039425c570286615e1925f87237 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Mon, 21 Dec 2015 00:32:56 +0330 Subject: [PATCH 55/70] migrate table --- src/table/table-body.jsx | 31 ++++--------------------- src/table/table-footer.jsx | 37 ++++-------------------------- src/table/table-header-column.jsx | 38 ++++--------------------------- src/table/table-header.jsx | 37 ++++-------------------------- src/table/table-row-column.jsx | 32 ++++---------------------- src/table/table-row.jsx | 32 ++++---------------------- src/table/table.jsx | 34 +++++---------------------- 7 files changed, 36 insertions(+), 205 deletions(-) diff --git a/src/table/table-body.jsx b/src/table/table-body.jsx index b54bb2fa58b23c..abf9d70300a98d 100644 --- a/src/table/table-body.jsx +++ b/src/table/table-body.jsx @@ -3,32 +3,15 @@ import Checkbox from '../checkbox'; import TableRowColumn from './table-row-column'; import ClickAwayable from '../mixins/click-awayable'; import StylePropable from '../mixins/style-propable'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; - -const TableBody = React.createClass({ +let TableBody = React.createClass({ mixins: [ ClickAwayable, StylePropable, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -76,17 +59,11 @@ const TableBody = React.createClass({ getInitialState() { return { - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), selectedRows: this._calculatePreselectedRows(this.props), }; }, - //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}); - + componentWillReceiveProps(nextProps) { let newState = {}; if (this.props.allRowsSelected && !nextProps.allRowsSelected) { @@ -366,4 +343,6 @@ const TableBody = React.createClass({ }); +TableBody = muiThemeable(TableBody); + export default TableBody; diff --git a/src/table/table-footer.jsx b/src/table/table-footer.jsx index 9925d973d317e3..bd1b93e015b867 100644 --- a/src/table/table-footer.jsx +++ b/src/table/table-footer.jsx @@ -1,19 +1,14 @@ import React from 'react'; import TableRowColumn from './table-row-column'; import StylePropable from '../mixins/style-propable'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; -const TableFooter = React.createClass({ +let TableFooter = React.createClass({ mixins: [ StylePropable, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -34,30 +29,6 @@ const 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, @@ -66,7 +37,7 @@ const TableFooter = React.createClass({ }, getTheme() { - return this.state.muiTheme.tableFooter; + return this.props._muiTheme.tableFooter; }, getStyles() { @@ -137,4 +108,6 @@ const TableFooter = React.createClass({ }); +TableFooter = muiThemeable(TableFooter); + export default TableFooter; diff --git a/src/table/table-header-column.jsx b/src/table/table-header-column.jsx index 7c4ddaedb219a5..6a1a7865cebd75 100644 --- a/src/table/table-header-column.jsx +++ b/src/table/table-header-column.jsx @@ -1,17 +1,12 @@ import React from 'react'; import StylePropable from '../mixins/style-propable'; import Tooltip from '../tooltip'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; -const TableHeaderColumn = React.createClass({ +let TableHeaderColumn = React.createClass({ mixins: [StylePropable], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -36,33 +31,8 @@ const TableHeaderColumn = React.createClass({ tooltipStyle: 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), - 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.state.muiTheme.tableHeaderColumn; + return this.props._muiTheme.tableHeaderColumn; }, getStyles() { @@ -144,4 +114,6 @@ const TableHeaderColumn = React.createClass({ }); +TableHeaderColumn = muiThemeable(TableHeaderColumn); + export default TableHeaderColumn; diff --git a/src/table/table-header.jsx b/src/table/table-header.jsx index f09632c21751b1..ea73e0a56fe50f 100644 --- a/src/table/table-header.jsx +++ b/src/table/table-header.jsx @@ -2,19 +2,14 @@ import React from 'react'; import Checkbox from '../checkbox'; import StylePropable from '../mixins/style-propable'; import TableHeaderColumn from './table-header-column'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; -const TableHeader = React.createClass({ +let TableHeader = React.createClass({ mixins: [ StylePropable, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -39,30 +34,6 @@ const 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, @@ -73,7 +44,7 @@ const TableHeader = React.createClass({ }, getTheme() { - return this.state.muiTheme.tableHeader; + return this.props._muiTheme.tableHeader; }, getStyles() { @@ -196,4 +167,6 @@ const TableHeader = React.createClass({ }); +TableHeader = muiThemeable(TableHeader); + export default TableHeader; diff --git a/src/table/table-row-column.jsx b/src/table/table-row-column.jsx index ce8f9bec27bac3..c3aaf095124e80 100644 --- a/src/table/table-row-column.jsx +++ b/src/table/table-row-column.jsx @@ -1,18 +1,13 @@ import React from 'react'; import StylePropable from '../mixins/style-propable'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; -const TableRowColumn = React.createClass({ +let TableRowColumn = React.createClass({ mixins: [ StylePropable, ], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -44,33 +39,14 @@ const TableRowColumn = React.createClass({ }; }, - //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.state.muiTheme.tableRowColumn; + return this.props._muiTheme.tableRowColumn; }, getStyles() { @@ -147,4 +123,6 @@ const TableRowColumn = React.createClass({ }); +TableRowColumn = muiThemeable(TableRowColumn); + export default TableRowColumn; diff --git a/src/table/table-row.jsx b/src/table/table-row.jsx index 6ef8afc035c2b9..abb0da418fe07a 100644 --- a/src/table/table-row.jsx +++ b/src/table/table-row.jsx @@ -1,16 +1,11 @@ import React from 'react'; import StylePropable from '../mixins/style-propable'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; -const TableRow = React.createClass({ +let TableRow = React.createClass({ mixins: [StylePropable], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -53,33 +48,14 @@ const TableRow = React.createClass({ }; }, - //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.state.muiTheme.tableRow; + return this.props._muiTheme.tableRow; }, getStyles() { @@ -210,4 +186,6 @@ const TableRow = React.createClass({ }); +TableRow = muiThemeable(TableRow); + export default TableRow; diff --git a/src/table/table.jsx b/src/table/table.jsx index 31e58b1bc4e526..ac187f364fbf31 100644 --- a/src/table/table.jsx +++ b/src/table/table.jsx @@ -1,17 +1,12 @@ import React from 'react'; import ReactDOM from 'react-dom'; import StylePropable from '../mixins/style-propable'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; -const Table = React.createClass({ +let Table = React.createClass({ mixins: [StylePropable], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -58,40 +53,21 @@ const Table = React.createClass({ }; }, - //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.state.muiTheme.table; + return this.props._muiTheme.table; }, getStyles() { let styles = { root: { backgroundColor: this.getTheme().backgroundColor, - padding: '0 ' + this.state.muiTheme.rawTheme.spacing.desktopGutter + 'px', + padding: '0 ' + this.props._muiTheme.baseTheme.spacing.desktopGutter + 'px', width: '100%', borderCollapse: 'collapse', borderSpacing: 0, @@ -271,4 +247,6 @@ const Table = React.createClass({ }); +Table = muiThemeable(Table); + export default Table; From 6dd4bee9c0bf08cd2e5b113d6ace75b38e9167d1 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Mon, 21 Dec 2015 00:42:56 +0330 Subject: [PATCH 56/70] migrate time picker --- src/time-picker/clock-button.jsx | 37 ++++---------------------- src/time-picker/clock-hours.jsx | 36 +++---------------------- src/time-picker/clock-minutes.jsx | 35 +++--------------------- src/time-picker/clock-number.jsx | 35 +++--------------------- src/time-picker/clock-pointer.jsx | 29 +++++--------------- src/time-picker/clock.jsx | 17 ++++-------- src/time-picker/time-display.jsx | 30 +++++---------------- src/time-picker/time-picker-dialog.jsx | 32 ++++------------------ src/time-picker/time-picker.jsx | 13 +++------ 9 files changed, 43 insertions(+), 221 deletions(-) diff --git a/src/time-picker/clock-button.jsx b/src/time-picker/clock-button.jsx index 5e6a69d77d8779..9ca2d469ff4ea3 100644 --- a/src/time-picker/clock-button.jsx +++ b/src/time-picker/clock-button.jsx @@ -2,17 +2,12 @@ import React from 'react'; import StylePropable from '../mixins/style-propable'; import EnhancedButton from '../enhanced-button'; import Transitions from '../styles/transitions'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; -const ClockButton = React.createClass({ +let ClockButton = React.createClass({ mixins: [StylePropable], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -30,30 +25,6 @@ const ClockButton = React.createClass({ selected: 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 { position: 'left', @@ -68,7 +39,7 @@ const ClockButton = React.createClass({ }, getTheme() { - return this.state.muiTheme.timePicker; + return this.props._muiTheme.timePicker; }, render() { @@ -135,4 +106,6 @@ const ClockButton = React.createClass({ }, }); +ClockButton = muiThemeable(ClockButton); + export default ClockButton; diff --git a/src/time-picker/clock-hours.jsx b/src/time-picker/clock-hours.jsx index 125135eadbe068..b5c9e91cec4ac6 100644 --- a/src/time-picker/clock-hours.jsx +++ b/src/time-picker/clock-hours.jsx @@ -3,9 +3,7 @@ import ReactDOM from 'react-dom'; import StylePropable from '../mixins/style-propable'; import ClockNumber from './clock-number'; import ClockPointer from './clock-pointer'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; - +import muiThemeable from '../muiThemeable'; function rad2deg(rad) { return rad * 57.29577951308232; @@ -24,38 +22,10 @@ function getTouchEventOffsetValues(e) { } -const ClockHours = React.createClass({ +let ClockHours = 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 { - 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}); - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -234,4 +204,6 @@ const ClockHours = React.createClass({ }, }); +ClockHours = muiThemeable(ClockHours); + export default ClockHours; diff --git a/src/time-picker/clock-minutes.jsx b/src/time-picker/clock-minutes.jsx index a3af1f3d3bb0af..1ab1e309048a93 100644 --- a/src/time-picker/clock-minutes.jsx +++ b/src/time-picker/clock-minutes.jsx @@ -3,8 +3,7 @@ import ReactDOM from 'react-dom'; import StylePropable from '../mixins/style-propable'; import ClockNumber from './clock-number'; import ClockPointer from './clock-pointer'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; function rad2deg(rad) { return rad * 57.29577951308232; @@ -23,14 +22,10 @@ function getTouchEventOffsetValues(e) { } -const ClockMinutes = React.createClass({ +let ClockMinutes = React.createClass({ mixins: [StylePropable], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -41,30 +36,6 @@ const 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}, @@ -198,4 +169,6 @@ const ClockMinutes = React.createClass({ }, }); +ClockMinutes = muiThemeable(ClockMinutes); + export default ClockMinutes; diff --git a/src/time-picker/clock-number.jsx b/src/time-picker/clock-number.jsx index ad588c5bce8c00..c381407255df53 100644 --- a/src/time-picker/clock-number.jsx +++ b/src/time-picker/clock-number.jsx @@ -1,16 +1,11 @@ import React from 'react'; import StylePropable from '../mixins/style-propable'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; -const ClockNumber = React.createClass({ +let ClockNumber = React.createClass({ mixins: [StylePropable], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -23,30 +18,6 @@ const ClockNumber = React.createClass({ value: 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), - }; - }, - - //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, @@ -143,4 +114,6 @@ const ClockNumber = React.createClass({ }, }); +ClockNumber = muiThemeable(ClockNumber); + export default ClockNumber; diff --git a/src/time-picker/clock-pointer.jsx b/src/time-picker/clock-pointer.jsx index 047694e682f39e..94b9e244dd5008 100644 --- a/src/time-picker/clock-pointer.jsx +++ b/src/time-picker/clock-pointer.jsx @@ -1,16 +1,11 @@ import React from 'react'; import StylePropable from '../mixins/style-propable'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; -const ClockPointer = React.createClass({ +let ClockPointer = React.createClass({ mixins: [StylePropable], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -22,21 +17,9 @@ const ClockPointer = React.createClass({ value: React.PropTypes.number, }, - //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), - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, @@ -48,11 +31,9 @@ const ClockPointer = React.createClass({ }; }, - componentWillReceiveProps(nextProps, nextContext) { - let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; + componentWillReceiveProps(nextProps) { this.setState({ inner: this.isInner(nextProps.value), - muiTheme: newMuiTheme, }); }, @@ -78,7 +59,7 @@ const ClockPointer = React.createClass({ }, getTheme() { - return this.state.muiTheme.timePicker; + return this.props._muiTheme.timePicker; }, render() { @@ -128,4 +109,6 @@ const ClockPointer = React.createClass({ }, }); +ClockPointer = muiThemeable(ClockPointer); + export default ClockPointer; diff --git a/src/time-picker/clock.jsx b/src/time-picker/clock.jsx index ef42c8c34cb6d2..c17cc869692eb0 100644 --- a/src/time-picker/clock.jsx +++ b/src/time-picker/clock.jsx @@ -4,11 +4,9 @@ import TimeDisplay from './time-display'; import ClockButton from './clock-button'; import ClockHours from './clock-hours'; import ClockMinutes from './clock-minutes'; -import ThemeManager from '../styles/theme-manager'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; +import muiThemeable from '../muiThemeable'; - -const Clock = React.createClass({ +let Clock = React.createClass({ mixins: [StylePropable], @@ -26,10 +24,6 @@ const Clock = React.createClass({ onChangeMinutes: React.PropTypes.func, }, - contextTypes: { - muiTheme: React.PropTypes.object, - }, - getDefaultProps() { return { initialTime: new Date(), @@ -37,16 +31,13 @@ const Clock = React.createClass({ }, componentWillReceiveProps(nextProps, nextContext) { - let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; this.setState({ - muiTheme: newMuiTheme, selectedTime: nextProps.initialTime, }); }, getInitialState() { return { - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), selectedTime: this.props.initialTime, mode: 'hour', }; @@ -124,7 +115,7 @@ const Clock = React.createClass({ width: 260, height: 260, borderRadius: '100%', - backgroundColor: this.state.muiTheme.timePicker.clockCircleColor, + backgroundColor: this.props._muiTheme.timePicker.clockCircleColor, }, }; @@ -214,4 +205,6 @@ const Clock = React.createClass({ }, }); +Clock = muiThemeable(Clock); + export default Clock; diff --git a/src/time-picker/time-display.jsx b/src/time-picker/time-display.jsx index 4a05206d3cbf26..b2ea6ab52ce5bc 100644 --- a/src/time-picker/time-display.jsx +++ b/src/time-picker/time-display.jsx @@ -1,16 +1,11 @@ import React from 'react'; import StylePropable from '../mixins/style-propable'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; -const TimeDisplay = React.createClass({ +let TimeDisplay = React.createClass({ mixins: [StylePropable], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -25,21 +20,9 @@ const TimeDisplay = React.createClass({ selectedTime: React.PropTypes.object.isRequired, }, - //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), }; }, @@ -50,11 +33,8 @@ const TimeDisplay = React.createClass({ }; }, - componentWillReceiveProps(nextProps, nextContext) { + componentWillReceiveProps(nextProps) { 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'; @@ -81,7 +61,7 @@ const TimeDisplay = React.createClass({ }, getTheme() { - return this.state.muiTheme.timePicker; + return this.props._muiTheme.timePicker; }, render() { @@ -148,4 +128,6 @@ const TimeDisplay = React.createClass({ }); +TimeDisplay = muiThemeable(TimeDisplay); + export default TimeDisplay; diff --git a/src/time-picker/time-picker-dialog.jsx b/src/time-picker/time-picker-dialog.jsx index f78382d0edd68a..ad3e64bec02ca7 100644 --- a/src/time-picker/time-picker-dialog.jsx +++ b/src/time-picker/time-picker-dialog.jsx @@ -5,17 +5,12 @@ import KeyCode from '../utils/key-code'; import Clock from './clock'; import Dialog from '../dialog'; import FlatButton from '../flat-button'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; -import ThemeManager from '../styles/theme-manager'; +import muiThemeable from '../muiThemeable'; -const TimePickerDialog = React.createClass({ +let TimePickerDialog = React.createClass({ mixins: [StylePropable, WindowListenable], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -30,38 +25,19 @@ const TimePickerDialog = React.createClass({ onShow: React.PropTypes.func, }, - //for passing default theme context to children - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - 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}); - }, - windowListeners: { keyup: '_handleWindowKeyUp', }, getTheme() { - return this.state.muiTheme.timePicker; + return this.props._muiTheme.timePicker; }, render() { @@ -153,4 +129,6 @@ const TimePickerDialog = React.createClass({ }); +TimePickerDialog = muiThemeable(TimePickerDialog); + export default TimePickerDialog; diff --git a/src/time-picker/time-picker.jsx b/src/time-picker/time-picker.jsx index 5cae68c89360ce..2f3edaa10a8e47 100644 --- a/src/time-picker/time-picker.jsx +++ b/src/time-picker/time-picker.jsx @@ -3,9 +3,7 @@ import StylePropable from '../mixins/style-propable'; import WindowListenable from '../mixins/window-listenable'; import TimePickerDialog from './time-picker-dialog'; import TextField from '../text-field'; -import ThemeManager from '../styles/theme-manager'; -import DefaultRawTheme from '../styles/raw-themes/light-raw-theme'; - +import muiThemeable from '../muiThemeable'; let emptyTime = new Date(); emptyTime.setHours(0); @@ -14,7 +12,7 @@ emptyTime.setSeconds(0); emptyTime.setMilliseconds(0); -const TimePicker = React.createClass({ +let TimePicker = React.createClass({ mixins: [StylePropable, WindowListenable], @@ -41,10 +39,6 @@ const TimePicker = React.createClass({ textFieldStyle: React.PropTypes.object, }, - contextTypes: { - muiTheme: React.PropTypes.object, - }, - windowListeners: { 'keyup': '_handleWindowKeyUp', }, @@ -63,7 +57,6 @@ const TimePicker = React.createClass({ return { time: this.props.defaultTime || emptyTime, dialogTime: new Date(), - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, @@ -191,4 +184,6 @@ const TimePicker = React.createClass({ }, }); +TimePicker = muiThemeable(TimePicker); + export default TimePicker; From 61c588951080545c5644ab52cac28514e733e0d0 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Mon, 21 Dec 2015 01:32:34 +0330 Subject: [PATCH 57/70] migrate doc components --- docs/src/app/components/MobileTearSheet.jsx | 10 ++- docs/src/app/components/app-left-nav.jsx | 8 ++- docs/src/app/components/component-doc.jsx | 37 ++-------- docs/src/app/components/component-info.jsx | 37 ++-------- docs/src/app/components/master.jsx | 69 +++++++------------ .../app/components/pages/components/lists.jsx | 2 +- .../components/pages/customization/themes.jsx | 51 ++++---------- .../components/pages/get-started/examples.jsx | 37 ---------- .../pages/get-started/installation.jsx | 37 ++-------- .../pages/get-started/prerequisites.jsx | 37 ++-------- .../app/components/pages/page-with-nav.jsx | 4 +- 11 files changed, 68 insertions(+), 261 deletions(-) diff --git a/docs/src/app/components/MobileTearSheet.jsx b/docs/src/app/components/MobileTearSheet.jsx index a07938622181b7..5c51e2c8f6fb4c 100644 --- a/docs/src/app/components/MobileTearSheet.jsx +++ b/docs/src/app/components/MobileTearSheet.jsx @@ -1,15 +1,11 @@ import React from 'react'; import {Mixins} from 'material-ui'; +import muiThemeable from 'material-ui/lib/muiThemeable'; const {StylePropable} = Mixins; - -const MobileTearSheet = React.createClass({ +let MobileTearSheet = React.createClass({ mixins: [StylePropable], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -63,4 +59,6 @@ const MobileTearSheet = React.createClass({ }); +MobileTearSheet = muiThemeable(MobileTearSheet); + export default MobileTearSheet; diff --git a/docs/src/app/components/app-left-nav.jsx b/docs/src/app/components/app-left-nav.jsx index 36a0ec7dfb31a0..acb64c8ad78c99 100644 --- a/docs/src/app/components/app-left-nav.jsx +++ b/docs/src/app/components/app-left-nav.jsx @@ -8,13 +8,14 @@ import { import List from 'material-ui/lib/lists/list'; import ListItem from 'material-ui/lib/lists/list-item'; import Divider from 'material-ui/lib/divider'; -import {SelectableContainerEnhance} from 'material-ui/hoc/selectable-enhance'; +import SelectableContainerEnhance from 'material-ui/hoc/selectable-enhance'; +import muiThemeable from 'material-ui/lib/muiThemeable'; const {Colors, Spacing, Typography} = Styles; const {StylePropable} = Mixins; const SelectableList = SelectableContainerEnhance(List); -const AppLeftNav = React.createClass({ +let AppLeftNav = React.createClass({ mixins: [StylePropable], propTypes: { @@ -28,7 +29,6 @@ const AppLeftNav = React.createClass({ }, contextTypes: { - muiTheme: React.PropTypes.object, router: React.PropTypes.func, }, @@ -145,4 +145,6 @@ const AppLeftNav = React.createClass({ }); +AppLeftNav = muiThemeable(AppLeftNav); + export default AppLeftNav; diff --git a/docs/src/app/components/component-doc.jsx b/docs/src/app/components/component-doc.jsx index f53aa48957c7f7..f21aef9ffa733b 100644 --- a/docs/src/app/components/component-doc.jsx +++ b/docs/src/app/components/component-doc.jsx @@ -1,19 +1,14 @@ import React from 'react'; import {ClearFix, Mixins, Styles} from 'material-ui'; +import muiThemeable from 'material-ui/lib/muiThemeable'; import ComponentInfo from './component-info'; const Typography = Styles.Typography; const {StylePropable} = Mixins; -const ThemeManager = Styles.ThemeManager; -const DefaultRawTheme = Styles.LightRawTheme; -const ComponentDoc = React.createClass({ +let ComponentDoc = React.createClass({ mixins: [StylePropable], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -29,32 +24,8 @@ const ComponentDoc = React.createClass({ name: React.PropTypes.string.isRequired, }, - //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}); - }, - getStyles() { - let borderColor = this.state.muiTheme.rawTheme.palette.borderColor; + let borderColor = this.props._muiTheme.baseTheme.palette.borderColor; return { desc: { borderBottom: 'solid 1px ' + borderColor, @@ -141,4 +112,6 @@ const ComponentDoc = React.createClass({ }); +ComponentDoc = muiThemeable(ComponentDoc); + export default ComponentDoc; diff --git a/docs/src/app/components/component-info.jsx b/docs/src/app/components/component-info.jsx index 8122762f34abb4..c9452d21d5a6ed 100644 --- a/docs/src/app/components/component-info.jsx +++ b/docs/src/app/components/component-info.jsx @@ -1,19 +1,14 @@ import React from 'react'; import {Mixins, Styles} from 'material-ui'; +import muiThemeable from 'material-ui/lib/muiThemeable'; const {StyleResizable, StylePropable} = Mixins; const {Typography, Spacing} = Styles; -const ThemeManager = Styles.ThemeManager; -const DefaultRawTheme = Styles.LightRawTheme; -const ComponentInfo = React.createClass({ +let ComponentInfo = React.createClass({ mixins: [StyleResizable, StylePropable], - contextTypes: { - muiTheme: React.PropTypes.object, - }, - propTypes: { /** * The MUI Theme to use to render this component with. @@ -25,33 +20,9 @@ const ComponentInfo = 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}); - }, - getStyles() { let desktopGutter = Spacing.desktopGutter; - let borderColor = this.state.muiTheme.rawTheme.palette.borderColor; + let borderColor = this.props._muiTheme.baseTheme.palette.borderColor; let styles = { root: { //.mui-font-style-subhead-1 @@ -183,4 +154,6 @@ const ComponentInfo = React.createClass({ }, }); +ComponentInfo = muiThemeable(ComponentInfo); + export default ComponentInfo; diff --git a/docs/src/app/components/master.jsx b/docs/src/app/components/master.jsx index 8ed3e24f46b4e8..7749b847d7710b 100644 --- a/docs/src/app/components/master.jsx +++ b/docs/src/app/components/master.jsx @@ -1,6 +1,8 @@ import React from 'react'; import AppLeftNav from './app-left-nav'; import FullWidthSection from './full-width-section'; +import getMuiTheme from 'material-ui/lib/styles/getMuiTheme'; +import MuiThemeProvider from 'material-ui/lib/MuiThemeProvider'; import {AppBar, AppCanvas, IconButton, @@ -13,43 +15,22 @@ import {AppBar, const {StylePropable} = Mixins; const {Colors, Spacing, Typography} = Styles; -const ThemeManager = Styles.ThemeManager; -const DefaultRawTheme = Styles.lightBaseTheme; - const Master = React.createClass({ mixins: [StylePropable], getInitialState() { - let muiTheme = ThemeManager.getMuiTheme(DefaultRawTheme); - // To switch to RTL... - // muiTheme.isRtl = true; - return { - muiTheme, - }; + let muiTheme = getMuiTheme(); + muiTheme.inkBar.backgroundColor = Colors.yellow200; + return {muiTheme}; }, propTypes: { - /** - * The MUI Theme to use to render this component with. - */ - _muiTheme: React.PropTypes.object.isRequired, - children: React.PropTypes.node, history: React.PropTypes.object, location: React.PropTypes.object, }, - childContextTypes: { - muiTheme: React.PropTypes.object, - }, - - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, - getStyles() { let darkWhite = Colors.darkWhite; return { @@ -80,10 +61,7 @@ const Master = React.createClass({ }, componentWillMount() { - let newMuiTheme = this.state.muiTheme; - newMuiTheme.inkBar.backgroundColor = Colors.yellow200; this.setState({ - muiTheme: newMuiTheme, tabIndex: this._getSelectedIndex()}); let setTabsState = function() { this.setState({renderTabs: !(document.body.clientWidth <= 647)}); @@ -92,11 +70,9 @@ const Master = React.createClass({ window.onresize = setTabsState; }, - componentWillReceiveProps(nextProps, nextContext) { - let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; + componentWillReceiveProps() { this.setState({ tabIndex: this._getSelectedIndex(), - muiTheme: newMuiTheme, }); }, @@ -120,22 +96,23 @@ const Master = React.createClass({ linkButton={true}/> ); return ( - - {githubButton} - {this.state.renderTabs ? this._getTabs() : this._getAppBar()} - - {this.props.children} - - -

- Hand crafted with love by the engineers at - Call-Em-All and our - awesome contributors. -

- {githubButton2} - - + + + {githubButton} + {this.state.renderTabs ? this._getTabs() : this._getAppBar()} + {this.props.children} + + +

+ Hand crafted with love by the engineers at + Call-Em-All and our + awesome contributors. +

+ {githubButton2} + + + ); }, diff --git a/docs/src/app/components/pages/components/lists.jsx b/docs/src/app/components/pages/components/lists.jsx index e7e78f235b6a05..eb5bb7eaa2259d 100644 --- a/docs/src/app/components/pages/components/lists.jsx +++ b/docs/src/app/components/pages/components/lists.jsx @@ -14,7 +14,7 @@ import ContentSend from 'material-ui/svg-icons/content/send'; import EditorInsertChart from 'material-ui/svg-icons/editor/insert-chart'; import FileFolder from 'material-ui/svg-icons/file/folder'; import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert'; -import {SelectableContainerEnhance} from 'material-ui/hoc/selectable-enhance'; +import SelectableContainerEnhance from 'material-ui/hoc/selectable-enhance'; const { Avatar, diff --git a/docs/src/app/components/pages/customization/themes.jsx b/docs/src/app/components/pages/customization/themes.jsx index 602748f9cc49c5..fb26675dfbe072 100644 --- a/docs/src/app/components/pages/customization/themes.jsx +++ b/docs/src/app/components/pages/customization/themes.jsx @@ -1,5 +1,7 @@ import React from 'react'; import mui from 'material-ui'; +import getMuiTheme from 'material-ui/lib/styles/getMuiTheme'; +import muiThemeable from 'material-ui/lib/muiThemeable'; import CodeBlock from '../../CodeExample/CodeBlock'; import ComponentDoc from '../../component-doc'; @@ -29,39 +31,15 @@ const { const {StylePropable, StyleResizable} = Mixins; const {Typography} = Styles; -const ThemeManager = Styles.ThemeManager; -const DefaultRawTheme = Styles.lightBaseTheme; -const DarkRawTheme = Styles.darkBaseTheme; +const DarkBaseTheme = Styles.darkBaseTheme; -const ThemesPage = React.createClass({ +let ThemesPage = React.createClass({ mixins: [StylePropable, StyleResizable], - propTypes: { - /** - * The MUI Theme to use to render this component with. - */ - _muiTheme: React.PropTypes.object.isRequired, - }, - - 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(DarkRawTheme), + muiTheme: getMuiTheme(), isThemeDark: false, dialogOpen: false, snackbarOpen: false, @@ -69,16 +47,9 @@ const ThemesPage = 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}); - }, - getStyles() { - let canvasColor = this.state.muiTheme.rawTheme.palette.canvasColor; - let borderColor = this.state.muiTheme.rawTheme.palette.borderColor; + let canvasColor = this.state.muiTheme.baseTheme.palette.canvasColor; + let borderColor = this.state.muiTheme.baseTheme.palette.borderColor; let styles = { group: { float: 'left', @@ -132,7 +103,7 @@ const ThemesPage = React.createClass({ }, liveExampleBlock: { borderRadius: '0 0 2px 0', - padding: this.state.muiTheme.rawTheme.spacing.desktopGutter, + padding: this.state.muiTheme.baseTheme.spacing.desktopGutter, margin: 0, }, headline: { @@ -649,10 +620,10 @@ const ThemesPage = React.createClass({ let newMuiTheme = null; if (!this.state.isThemeDark) { - newMuiTheme = ThemeManager.getMuiTheme(DarkRawTheme); + newMuiTheme = getMuiTheme(DarkBaseTheme); } else { - newMuiTheme = ThemeManager.getMuiTheme(DefaultRawTheme); + newMuiTheme = getMuiTheme(); } this.setState({muiTheme: newMuiTheme, @@ -696,4 +667,6 @@ const ThemesPage = React.createClass({ }, }); +ThemesPage = muiThemeable(ThemesPage); + export default ThemesPage; diff --git a/docs/src/app/components/pages/get-started/examples.jsx b/docs/src/app/components/pages/get-started/examples.jsx index d039da52241e37..b22582cef1247f 100644 --- a/docs/src/app/components/pages/get-started/examples.jsx +++ b/docs/src/app/components/pages/get-started/examples.jsx @@ -2,46 +2,9 @@ import React from 'react'; import {Styles} from 'material-ui'; const {Typography} = Styles; -const ThemeManager = Styles.ThemeManager; -const DefaultRawTheme = Styles.LightRawTheme; const Examples = React.createClass({ - propTypes: { - /** - * The MUI Theme to use to render this component with. - */ - _muiTheme: React.PropTypes.object.isRequired, - }, - - 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), - }; - }, - - //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() { return { headline: { diff --git a/docs/src/app/components/pages/get-started/installation.jsx b/docs/src/app/components/pages/get-started/installation.jsx index 972552c3bb18b9..ab8652032a32e3 100644 --- a/docs/src/app/components/pages/get-started/installation.jsx +++ b/docs/src/app/components/pages/get-started/installation.jsx @@ -1,12 +1,11 @@ import React from 'react'; import {Paper, Styles} from 'material-ui'; +import muiThemeable from 'material-ui/lib/muiThemeable'; import CodeBlock from '../../CodeExample/CodeBlock'; const {Typography} = Styles; -const ThemeManager = Styles.ThemeManager; -const DefaultRawTheme = Styles.LightRawTheme; -const Installation = React.createClass({ +let Installation = React.createClass({ propTypes: { /** @@ -15,34 +14,6 @@ const Installation = React.createClass({ _muiTheme: React.PropTypes.object.isRequired, }, - 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), - }; - }, - - //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() { return { headline: { @@ -64,7 +35,7 @@ const Installation = React.createClass({ color: Typography.textDarkBlack, }, codeExample: { - backgroundColor: this.state.muiTheme.rawTheme.palette.canvasColor, + backgroundColor: this.props._muiTheme.baseTheme.palette.canvasColor, marginBottom: '32px', }, inlineCode: { @@ -179,4 +150,6 @@ const Installation = React.createClass({ }); +Installation = muiThemeable(Installation); + export default Installation; diff --git a/docs/src/app/components/pages/get-started/prerequisites.jsx b/docs/src/app/components/pages/get-started/prerequisites.jsx index aa9422d57dc8d6..01eb67699df9f8 100644 --- a/docs/src/app/components/pages/get-started/prerequisites.jsx +++ b/docs/src/app/components/pages/get-started/prerequisites.jsx @@ -1,11 +1,10 @@ import React from 'react'; import {Styles} from 'material-ui'; +import muiThemeable from 'material-ui/lib/muiThemeable'; const {Typography} = Styles; -const ThemeManager = Styles.ThemeManager; -const DefaultRawTheme = Styles.LightRawTheme; -const Prerequisites = React.createClass({ +let Prerequisites = React.createClass({ propTypes: { /** @@ -14,34 +13,6 @@ const Prerequisites = React.createClass({ _muiTheme: React.PropTypes.object.isRequired, }, - 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), - }; - }, - - //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() { return { headline: { @@ -63,7 +34,7 @@ const Prerequisites = React.createClass({ color: Typography.textDarkBlack, }, codeExample: { - backgroundColor: this.state.muiTheme.rawTheme.palette.canvasColor, + backgroundColor: this.props._muiTheme.baseTheme.palette.canvasColor, marginBottom: '32px', }, inlineCode: { @@ -186,4 +157,6 @@ const Prerequisites = React.createClass({ }); +Prerequisites = muiThemeable(Prerequisites); + export default Prerequisites; diff --git a/docs/src/app/components/pages/page-with-nav.jsx b/docs/src/app/components/pages/page-with-nav.jsx index 98456f19265453..a5f468b0c04962 100644 --- a/docs/src/app/components/pages/page-with-nav.jsx +++ b/docs/src/app/components/pages/page-with-nav.jsx @@ -3,6 +3,7 @@ import {History} from 'react-router'; import {Mixins, Styles} from 'material-ui'; import Menu from 'material-ui/lib/menus/menu'; import MenuItem from 'material-ui/lib/menus/menu-item'; +import muiThemeable from 'material-ui/muiThemeable'; let {Spacing, Colors} = Styles; let {StyleResizable, StylePropable} = Mixins; @@ -11,7 +12,6 @@ let {StyleResizable, StylePropable} = Mixins; let PageWithNav = React.createClass({ contextTypes: { - muiTheme: React.PropTypes.object, router: React.PropTypes.func, }, @@ -115,4 +115,6 @@ let PageWithNav = React.createClass({ }); +PageWithNav = muiThemeable(PageWithNav); + export default PageWithNav; From 5e98afbc1c7d3caee23e731ded7bcf6aef5d77d2 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Mon, 21 Dec 2015 01:33:15 +0330 Subject: [PATCH 58/70] bug fixes --- src/date-picker/calendar.jsx | 2 +- src/grid-list/grid-tile.jsx | 2 +- src/popover/popover.jsx | 2 +- src/raised-button.jsx | 2 +- src/slider.jsx | 2 +- src/snackbar.jsx | 2 +- src/time-picker/clock.jsx | 2 +- src/toolbar/toolbar-group.jsx | 2 ++ src/tooltip.jsx | 2 +- 9 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/date-picker/calendar.jsx b/src/date-picker/calendar.jsx index fd96ea03a6d8d6..a609fc80ecb882 100644 --- a/src/date-picker/calendar.jsx +++ b/src/date-picker/calendar.jsx @@ -10,7 +10,7 @@ import CalendarToolbar from './calendar-toolbar'; import DateDisplay from './date-display'; import SlideInTransitionGroup from '../transition-groups/slide-in'; import ClearFix from '../clearfix'; -import muiThemeable from './muiThemeable'; +import muiThemeable from '../muiThemeable'; let Calendar = React.createClass({ diff --git a/src/grid-list/grid-tile.jsx b/src/grid-list/grid-tile.jsx index 23fc107e19b74e..cc51f7801b04f4 100644 --- a/src/grid-list/grid-tile.jsx +++ b/src/grid-list/grid-tile.jsx @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import StylePropable from '../mixins/style-propable'; -import muiThemeable from './muiThemeable'; +import muiThemeable from '../muiThemeable'; let GridTile = React.createClass({ diff --git a/src/popover/popover.jsx b/src/popover/popover.jsx index 98906ebbc4dfe1..0e6a9a76cf8120 100644 --- a/src/popover/popover.jsx +++ b/src/popover/popover.jsx @@ -85,7 +85,7 @@ let Popover = React.createClass({ scroll: 'setPlacementThrottledScrolled', }, - componentWillReceiveProps(nextProps, nextContext) { + componentWillReceiveProps(nextProps) { if (nextProps.open !== this.state.open) { if (nextProps.open) { diff --git a/src/raised-button.jsx b/src/raised-button.jsx index 54d7955b61972f..a8bf480a67f775 100644 --- a/src/raised-button.jsx +++ b/src/raised-button.jsx @@ -77,7 +77,7 @@ let RaisedButton = React.createClass({ }; }, - componentWillReceiveProps(nextProps, nextContext) { + componentWillReceiveProps(nextProps) { let zDepth = nextProps.disabled ? 0 : 1; this.setState({ zDepth: zDepth, diff --git a/src/slider.jsx b/src/slider.jsx index d465fc0b893f6c..1552ba475a1c76 100644 --- a/src/slider.jsx +++ b/src/slider.jsx @@ -102,7 +102,7 @@ let Slider = React.createClass({ }; }, - componentWillReceiveProps(nextProps, nextContext) { + componentWillReceiveProps(nextProps) { if (nextProps.value !== undefined && !this.state.dragging) { this.setValue(nextProps.value); } diff --git a/src/snackbar.jsx b/src/snackbar.jsx index 648209cf7ea4b7..dc6e1392e48c25 100644 --- a/src/snackbar.jsx +++ b/src/snackbar.jsx @@ -133,7 +133,7 @@ let Snackbar = React.createClass({ }; }, - componentWillReceiveProps(nextProps, nextContext) { + componentWillReceiveProps(nextProps) { if (this.state.open && nextProps.open === this.props.open && (nextProps.message !== this.props.message || nextProps.action !== this.props.action)) { this.setState({ diff --git a/src/time-picker/clock.jsx b/src/time-picker/clock.jsx index c17cc869692eb0..8ff3272a2e9e7f 100644 --- a/src/time-picker/clock.jsx +++ b/src/time-picker/clock.jsx @@ -30,7 +30,7 @@ let Clock = React.createClass({ }; }, - componentWillReceiveProps(nextProps, nextContext) { + componentWillReceiveProps(nextProps) { this.setState({ selectedTime: nextProps.initialTime, }); diff --git a/src/toolbar/toolbar-group.jsx b/src/toolbar/toolbar-group.jsx index 631749a6c851dc..57f741080841da 100644 --- a/src/toolbar/toolbar-group.jsx +++ b/src/toolbar/toolbar-group.jsx @@ -199,4 +199,6 @@ let ToolbarGroup = React.createClass({ }, }); +ToolbarGroup = muiThemeable(ToolbarGroup); + export default ToolbarGroup; diff --git a/src/tooltip.jsx b/src/tooltip.jsx index cdc0e92c11e7b4..4d28afb4f2355f 100644 --- a/src/tooltip.jsx +++ b/src/tooltip.jsx @@ -36,7 +36,7 @@ let Tooltip = React.createClass({ this._setTooltipPosition(); }, - componentWillReceiveProps(nextProps, nextContext) { + componentWillReceiveProps() { this._setTooltipPosition(); }, From 62bfead2d31bb6b27e62feff2d465a2aa01ccaa8 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Mon, 21 Dec 2015 01:37:06 +0330 Subject: [PATCH 59/70] forward imperative methods --- src/lists/list-item.jsx | 2 +- src/muiThemeable.js | 38 +++++++++++++++++++++++++++----------- 2 files changed, 28 insertions(+), 12 deletions(-) diff --git a/src/lists/list-item.jsx b/src/lists/list-item.jsx index 2b0a4cd6e28aa0..92526279896c50 100644 --- a/src/lists/list-item.jsx +++ b/src/lists/list-item.jsx @@ -515,6 +515,6 @@ let ListItem = React.createClass({ }); -ListItem = muiThemeable(ListItem); +ListItem = muiThemeable(ListItem, ['applyFocusState']); export default ListItem; diff --git a/src/muiThemeable.js b/src/muiThemeable.js index 038f74ab7ce52f..8893b7a54886e5 100644 --- a/src/muiThemeable.js +++ b/src/muiThemeable.js @@ -1,22 +1,38 @@ import React from 'react'; import getMuiTheme from './styles/getMuiTheme'; +import merge from 'lodash.merge'; + +const defaultTheme = getMuiTheme(); function getDisplayName(WrappedComponent) { return WrappedComponent.displayName || WrappedComponent.name || 'Component'; } -export default function muiThemeable(WrappedComponent) { - function MuiComponent(props, {_muiTheme = getMuiTheme()}) { - return React.createElement(WrappedComponent, {_muiTheme, ...props}); +export default function muiThemeable(WrappedComponent, forwardMethods) { + + const methods = {}; + if (forwardMethods) { + forwardMethods.map(name => methods[name] = (function(...args) { this.refs.WrappedComponent[name](...args); })); } - MuiComponent.displayName = getDisplayName(WrappedComponent); - MuiComponent.contextTypes = { - _muiTheme: React.PropTypes.object, - }; - MuiComponent.childContextTypes = { - _muiTheme: React.PropTypes.object, - }; + return React.createClass(merge({ + displayName: getDisplayName(WrappedComponent), + + contextTypes: { + _muiTheme: React.PropTypes.object, + }, + + childContextTypes: { + _muiTheme: React.PropTypes.object, + }, - return MuiComponent; + render() { + const {_muiTheme = defaultTheme} = this.context; + return React.createElement(WrappedComponent, { + _muiTheme, + ref: forwardMethods ? 'WrappedComponent' : undefined, + ...this.props, + }); + }, + }, methods)); } From f42ad17b534b56e9488535d4dad72ea5c2f56c06 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Mon, 21 Dec 2015 02:15:14 +0330 Subject: [PATCH 60/70] fixed regressions caused by migration --- src/checkbox.jsx | 2 +- src/circular-progress.jsx | 2 +- src/menus/icon-menu.jsx | 9 ++++++++- src/table/table-header-column.jsx | 6 ++++++ 4 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/checkbox.jsx b/src/checkbox.jsx index 729fc05c24dc2b..9c09db58cbfda5 100644 --- a/src/checkbox.jsx +++ b/src/checkbox.jsx @@ -47,7 +47,7 @@ let Checkbox = React.createClass({ }, getTheme() { - return this.state._muiTheme.checkbox; + return this.props._muiTheme.checkbox; }, getStyles() { diff --git a/src/circular-progress.jsx b/src/circular-progress.jsx index 9254d0fec8ac86..5d50f7d6507d17 100644 --- a/src/circular-progress.jsx +++ b/src/circular-progress.jsx @@ -101,7 +101,7 @@ let CircularProgress = React.createClass({ }, getTheme() { - return this.prop._muiTheme.baseTheme.palette; + return this.props._muiTheme.baseTheme.palette; }, getStyles(zoom) { diff --git a/src/menus/icon-menu.jsx b/src/menus/icon-menu.jsx index afe278ec28cb53..081530fbecd7b4 100644 --- a/src/menus/icon-menu.jsx +++ b/src/menus/icon-menu.jsx @@ -6,14 +6,19 @@ import PropTypes from '../utils/prop-types'; import Menu from './menu'; import Popover from '../popover/popover'; import warning from 'warning'; +import muiThemeable from '../muiThemeable'; -const IconMenu = React.createClass({ +let IconMenu = React.createClass({ mixins: [ StylePropable, ], propTypes: { + /** + * The MUI Theme to use to render this component with. + */ + _muiTheme: React.PropTypes.object.isRequired, anchorOrigin: PropTypes.origin, children: React.PropTypes.node, @@ -249,4 +254,6 @@ const IconMenu = React.createClass({ }); +IconMenu = muiThemeable(IconMenu); + export default IconMenu; diff --git a/src/table/table-header-column.jsx b/src/table/table-header-column.jsx index 6a1a7865cebd75..0e450f39a0de54 100644 --- a/src/table/table-header-column.jsx +++ b/src/table/table-header-column.jsx @@ -31,6 +31,12 @@ let TableHeaderColumn = React.createClass({ tooltipStyle: React.PropTypes.object, }, + getInitialState() { + return { + hovered: false, + }; + }, + getTheme() { return this.props._muiTheme.tableHeaderColumn; }, From b8a4bdca394e2a7eb1e45e9adcdede186130b95a Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Mon, 21 Dec 2015 02:15:36 +0330 Subject: [PATCH 61/70] function wrapper should also forward the return value --- src/muiThemeable.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/muiThemeable.js b/src/muiThemeable.js index 8893b7a54886e5..2f917191ef0291 100644 --- a/src/muiThemeable.js +++ b/src/muiThemeable.js @@ -12,7 +12,8 @@ export default function muiThemeable(WrappedComponent, forwardMethods) { const methods = {}; if (forwardMethods) { - forwardMethods.map(name => methods[name] = (function(...args) { this.refs.WrappedComponent[name](...args); })); + forwardMethods.map(name => methods[name] = + (function(...args) { return this.refs.WrappedComponent[name](...args); })); } return React.createClass(merge({ From 211162f2ff0e2aa385d574ab6d50a4bb58deb25e Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Mon, 21 Dec 2015 02:16:03 +0330 Subject: [PATCH 62/70] forward some methods. --- src/Dialog/Dialog.jsx | 2 +- src/TextField/TextField.jsx | 10 ++++++++-- src/enhanced-button.jsx | 2 +- src/render-to-layer.jsx | 2 +- 4 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/Dialog/Dialog.jsx b/src/Dialog/Dialog.jsx index c47b205690e4eb..aed3ad125e38c0 100644 --- a/src/Dialog/Dialog.jsx +++ b/src/Dialog/Dialog.jsx @@ -156,6 +156,6 @@ let Dialog = React.createClass({ }); -Dialog = muiThemeable(Dialog); +Dialog = muiThemeable(Dialog, ['show', 'dismiss']); export default Dialog; diff --git a/src/TextField/TextField.jsx b/src/TextField/TextField.jsx index 3450517fbf7c33..9080bd650079ab 100644 --- a/src/TextField/TextField.jsx +++ b/src/TextField/TextField.jsx @@ -450,6 +450,12 @@ let TextField = React.createClass({ }); -TextField = muiThemeable(TextField); - +TextField = muiThemeable(TextField, [ + 'blur', + 'clearValue', + 'focus', + 'getValue', + 'setErrorText', + 'setValue', +]); export default TextField; diff --git a/src/enhanced-button.jsx b/src/enhanced-button.jsx index 778ee3d17b12b0..cfb68940b1c704 100644 --- a/src/enhanced-button.jsx +++ b/src/enhanced-button.jsx @@ -303,6 +303,6 @@ let EnhancedButton = React.createClass({ }); -EnhancedButton = muiThemeable(EnhancedButton); +EnhancedButton = muiThemeable(EnhancedButton, ['isKeyboardFocused']); export default EnhancedButton; diff --git a/src/render-to-layer.jsx b/src/render-to-layer.jsx index afa4290a2f2517..f0aa923e997d71 100644 --- a/src/render-to-layer.jsx +++ b/src/render-to-layer.jsx @@ -130,6 +130,6 @@ let RenderToLayer = React.createClass({ }); -RenderToLayer = muiThemeable(RenderToLayer); +RenderToLayer = muiThemeable(RenderToLayer, ['getLayer']); export default RenderToLayer; From c1485f262399f799399acdcf04933c146c5415ba Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Mon, 21 Dec 2015 17:24:46 +0330 Subject: [PATCH 63/70] export base themes --- src/styles/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/styles/index.js b/src/styles/index.js index 6c004240846645..da992ad19fd138 100644 --- a/src/styles/index.js +++ b/src/styles/index.js @@ -17,7 +17,9 @@ export {Spacing}; export {ThemeManager}; export {Transitions}; export {Typography}; +export {lightBaseTheme}; export {LightRawTheme}; +export {darkBaseTheme}; export {DarkRawTheme}; export {ThemeDecorator}; export {ZIndex}; From 73b306bff5ccbeb56c9ae2b2211ec01d56049f72 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Mon, 21 Dec 2015 17:34:07 +0330 Subject: [PATCH 64/70] improve muiThemeable --- src/muiThemeable.js | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/src/muiThemeable.js b/src/muiThemeable.js index 2f917191ef0291..21c6a4d1f21c64 100644 --- a/src/muiThemeable.js +++ b/src/muiThemeable.js @@ -1,6 +1,5 @@ import React from 'react'; import getMuiTheme from './styles/getMuiTheme'; -import merge from 'lodash.merge'; const defaultTheme = getMuiTheme(); @@ -8,25 +7,23 @@ function getDisplayName(WrappedComponent) { return WrappedComponent.displayName || WrappedComponent.name || 'Component'; } -export default function muiThemeable(WrappedComponent, forwardMethods) { +function proxy(name) { + return function(...args) { return this.refs.WrappedComponent[name](...args); }; +} +export default function muiThemeable(WrappedComponent, forwardMethods) { const methods = {}; if (forwardMethods) { - forwardMethods.map(name => methods[name] = - (function(...args) { return this.refs.WrappedComponent[name](...args); })); + forwardMethods.forEach(name => methods[name] = proxy(name)); } - return React.createClass(merge({ + return React.createClass(Object.assign({ displayName: getDisplayName(WrappedComponent), contextTypes: { _muiTheme: React.PropTypes.object, }, - childContextTypes: { - _muiTheme: React.PropTypes.object, - }, - render() { const {_muiTheme = defaultTheme} = this.context; return React.createElement(WrappedComponent, { From 8a48ccf6162171988fe8ab3c8bf7bc860b3d2dd9 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Mon, 21 Dec 2015 23:39:44 +0330 Subject: [PATCH 65/70] lazily evaluate the default theme --- src/muiThemeable.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/muiThemeable.js b/src/muiThemeable.js index 21c6a4d1f21c64..14ecd34db15b51 100644 --- a/src/muiThemeable.js +++ b/src/muiThemeable.js @@ -1,7 +1,11 @@ import React from 'react'; import getMuiTheme from './styles/getMuiTheme'; -const defaultTheme = getMuiTheme(); +let defaultTheme; + +function getDefaultTheme() { + return defaultTheme || (defaultTheme = getMuiTheme()); +} function getDisplayName(WrappedComponent) { return WrappedComponent.displayName || WrappedComponent.name || 'Component'; @@ -25,7 +29,7 @@ export default function muiThemeable(WrappedComponent, forwardMethods) { }, render() { - const {_muiTheme = defaultTheme} = this.context; + const {_muiTheme = getDefaultTheme()} = this.context; return React.createElement(WrappedComponent, { _muiTheme, ref: forwardMethods ? 'WrappedComponent' : undefined, From 9f515370ab68cdd1e7caf77fc33b3ca04cf57551 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Tue, 22 Dec 2015 00:19:15 +0330 Subject: [PATCH 66/70] forward imperative methods throughout the library --- src/checkbox.jsx | 5 ++++- src/date-picker/calendar.jsx | 5 ++++- src/date-picker/date-picker-dialog.jsx | 5 ++++- src/date-picker/date-picker.jsx | 7 ++++++- src/enhanced-button.jsx | 6 +++++- src/enhanced-switch.jsx | 7 ++++++- src/enhanced-textarea.jsx | 5 ++++- src/icon-button.jsx | 2 +- src/left-nav.jsx | 6 +++++- src/menus/icon-menu.jsx | 6 +++++- src/menus/menu.jsx | 2 +- src/radio-button-group.jsx | 6 +++++- src/radio-button.jsx | 6 +++++- src/slider.jsx | 8 +++++++- src/snackbar.jsx | 5 ++++- src/table/table.jsx | 2 +- src/time-picker/clock.jsx | 14 +++++++------- src/time-picker/time-picker-dialog.jsx | 5 ++++- src/time-picker/time-picker.jsx | 7 ++++++- src/toggle.jsx | 5 ++++- 20 files changed, 88 insertions(+), 26 deletions(-) diff --git a/src/checkbox.jsx b/src/checkbox.jsx index 9c09db58cbfda5..e07337974a9e94 100644 --- a/src/checkbox.jsx +++ b/src/checkbox.jsx @@ -184,6 +184,9 @@ let Checkbox = React.createClass({ }); -Checkbox = muiThemeable(Checkbox); +Checkbox = muiThemeable(Checkbox, [ + 'isChecked', + 'setChecked', +]); export default Checkbox; diff --git a/src/date-picker/calendar.jsx b/src/date-picker/calendar.jsx index a609fc80ecb882..9a9d120dc892a7 100644 --- a/src/date-picker/calendar.jsx +++ b/src/date-picker/calendar.jsx @@ -342,6 +342,9 @@ let Calendar = React.createClass({ }); -Calendar = muiThemeable(Calendar); +Calendar = muiThemeable(Calendar, [ + 'getSelectedDate', + 'isSelectedDateDisabled', +]); export default Calendar; diff --git a/src/date-picker/date-picker-dialog.jsx b/src/date-picker/date-picker-dialog.jsx index 93c75363e90c75..73045d8e5376f5 100644 --- a/src/date-picker/date-picker-dialog.jsx +++ b/src/date-picker/date-picker-dialog.jsx @@ -211,6 +211,9 @@ let DatePickerDialog = React.createClass({ }); -DatePickerDialog = muiThemeable(DatePickerDialog); +DatePickerDialog = muiThemeable(DatePickerDialog, [ + 'show', + 'dismiss', +]); export default DatePickerDialog; diff --git a/src/date-picker/date-picker.jsx b/src/date-picker/date-picker.jsx index 277b2f6e764c09..435a7c4068829b 100644 --- a/src/date-picker/date-picker.jsx +++ b/src/date-picker/date-picker.jsx @@ -201,6 +201,11 @@ let DatePicker = React.createClass({ }); -DatePicker = muiThemeable(DatePicker); +DatePicker = muiThemeable(DatePicker, [ + 'getDate', + 'setDate', + 'openDialog', + 'focus', +]); export default DatePicker; diff --git a/src/enhanced-button.jsx b/src/enhanced-button.jsx index cfb68940b1c704..eae06b6f342540 100644 --- a/src/enhanced-button.jsx +++ b/src/enhanced-button.jsx @@ -303,6 +303,10 @@ let EnhancedButton = React.createClass({ }); -EnhancedButton = muiThemeable(EnhancedButton, ['isKeyboardFocused']); +EnhancedButton = muiThemeable(EnhancedButton, [ + 'isKeyboardFocused', + 'removeKeyboardFocus', + 'setKeyboardFocus', +]); export default EnhancedButton; diff --git a/src/enhanced-switch.jsx b/src/enhanced-switch.jsx index 28349545ce8ca1..5924a7720b8f06 100644 --- a/src/enhanced-switch.jsx +++ b/src/enhanced-switch.jsx @@ -444,6 +444,11 @@ let EnhancedSwitch = React.createClass({ }); -EnhancedSwitch = muiThemeable(EnhancedSwitch); +EnhancedSwitch = muiThemeable(EnhancedSwitch, [ + 'isSwitched', + 'setSwitched', + 'getValue', + 'isKeyboardFocused', +]); export default EnhancedSwitch; diff --git a/src/enhanced-textarea.jsx b/src/enhanced-textarea.jsx index 7f6da52f3b208e..27c8e4ecbc3b91 100644 --- a/src/enhanced-textarea.jsx +++ b/src/enhanced-textarea.jsx @@ -170,6 +170,9 @@ let EnhancedTextarea = React.createClass({ }, }); -EnhancedTextarea = muiThemeable(EnhancedTextarea); +EnhancedTextarea = muiThemeable(EnhancedTextarea, [ + 'getInputNode', + 'setValue', +]); export default EnhancedTextarea; diff --git a/src/icon-button.jsx b/src/icon-button.jsx index 24e4dd94ea2a77..571b881896ed0b 100644 --- a/src/icon-button.jsx +++ b/src/icon-button.jsx @@ -238,6 +238,6 @@ let IconButton = React.createClass({ }); -IconButton = muiThemeable(IconButton); +IconButton = muiThemeable(IconButton, ['setKeyboardFocus']); export default IconButton; diff --git a/src/left-nav.jsx b/src/left-nav.jsx index 5b88574c840af9..bba9beb56c4bb0 100644 --- a/src/left-nav.jsx +++ b/src/left-nav.jsx @@ -549,6 +549,10 @@ let LeftNav = React.createClass({ }); -LeftNav = muiThemeable(LeftNav); +LeftNav = muiThemeable(LeftNav, [ + 'toggle', + 'close', + 'open', +]); export default LeftNav; diff --git a/src/menus/icon-menu.jsx b/src/menus/icon-menu.jsx index 081530fbecd7b4..5f3673f9332e61 100644 --- a/src/menus/icon-menu.jsx +++ b/src/menus/icon-menu.jsx @@ -254,6 +254,10 @@ let IconMenu = React.createClass({ }); -IconMenu = muiThemeable(IconMenu); +IconMenu = muiThemeable(IconMenu, [ + 'isOpen', + 'close', + 'open', +]); export default IconMenu; diff --git a/src/menus/menu.jsx b/src/menus/menu.jsx index b3fc5227ea947b..64c3b29afebebe 100644 --- a/src/menus/menu.jsx +++ b/src/menus/menu.jsx @@ -491,6 +491,6 @@ let Menu = React.createClass({ }); -Menu = muiThemeable(Menu); +Menu = muiThemeable(Menu, ['setKeyboardFocused']); export default Menu; diff --git a/src/radio-button-group.jsx b/src/radio-button-group.jsx index c09fdb7dd4f9cd..8c1056f36cdb9b 100644 --- a/src/radio-button-group.jsx +++ b/src/radio-button-group.jsx @@ -134,6 +134,10 @@ let RadioButtonGroup = React.createClass({ }); -RadioButtonGroup = muiThemeable(RadioButtonGroup); +RadioButtonGroup = muiThemeable(RadioButtonGroup, [ + 'getSelectedValue', + 'setSelectedValue', + 'clearValue', +]); export default RadioButtonGroup; diff --git a/src/radio-button.jsx b/src/radio-button.jsx index 2bab8b869e1035..a8f101db7cf9ea 100644 --- a/src/radio-button.jsx +++ b/src/radio-button.jsx @@ -155,6 +155,10 @@ let RadioButton = React.createClass({ }); -RadioButton = muiThemeable(RadioButton); +RadioButton = muiThemeable(RadioButton, [ + 'isChecked', + 'setChecked', + 'getValue', +]); export default RadioButton; diff --git a/src/slider.jsx b/src/slider.jsx index 1552ba475a1c76..eb18c01f9417f1 100644 --- a/src/slider.jsx +++ b/src/slider.jsx @@ -480,6 +480,12 @@ let Slider = React.createClass({ }); -Slider = muiThemeable(Slider); +Slider = muiThemeable(Slider, [ + 'getValue', + 'setValue', + 'getPercent', + 'setPercent', + 'clearValue', +]); export default Slider; diff --git a/src/snackbar.jsx b/src/snackbar.jsx index dc6e1392e48c25..1148e4d5d2a9a0 100644 --- a/src/snackbar.jsx +++ b/src/snackbar.jsx @@ -351,6 +351,9 @@ let Snackbar = React.createClass({ }); -Snackbar = muiThemeable(Snackbar); +Snackbar = muiThemeable(Snackbar, [ + 'show', + 'dismiss', +]); export default Snackbar; diff --git a/src/table/table.jsx b/src/table/table.jsx index ac187f364fbf31..4442701b9c9f78 100644 --- a/src/table/table.jsx +++ b/src/table/table.jsx @@ -247,6 +247,6 @@ let Table = React.createClass({ }); -Table = muiThemeable(Table); +Table = muiThemeable(Table, ['isScrollbarVisible']); export default Table; diff --git a/src/time-picker/clock.jsx b/src/time-picker/clock.jsx index 8ff3272a2e9e7f..406188c51da78e 100644 --- a/src/time-picker/clock.jsx +++ b/src/time-picker/clock.jsx @@ -57,11 +57,11 @@ let Clock = React.createClass({ let hours = this.state.selectedTime.getHours(); if (affix === 'am') { - this.handleChangeHours(hours - 12, affix); + this._handleChangeHours(hours - 12, affix); return; } - this.handleChangeHours(hours + 12, affix); + this._handleChangeHours(hours + 12, affix); }, _getAffix() { @@ -123,14 +123,14 @@ let Clock = React.createClass({ clock = ( ); } else { clock = ( ); } @@ -153,7 +153,7 @@ let Clock = React.createClass({ ); }, - handleChangeHours(hours, finished) { + _handleChangeHours(hours, finished) { let time = new Date(this.state.selectedTime); let affix; @@ -187,7 +187,7 @@ let Clock = React.createClass({ } }, - handleChangeMinutes(minutes) { + _handleChangeMinutes(minutes) { let time = new Date(this.state.selectedTime); time.setMinutes(minutes); this.setState({ @@ -205,6 +205,6 @@ let Clock = React.createClass({ }, }); -Clock = muiThemeable(Clock); +Clock = muiThemeable(Clock, ['getSelectedTime']); export default Clock; diff --git a/src/time-picker/time-picker-dialog.jsx b/src/time-picker/time-picker-dialog.jsx index ad3e64bec02ca7..124ddad47a8f13 100644 --- a/src/time-picker/time-picker-dialog.jsx +++ b/src/time-picker/time-picker-dialog.jsx @@ -129,6 +129,9 @@ let TimePickerDialog = React.createClass({ }); -TimePickerDialog = muiThemeable(TimePickerDialog); +TimePickerDialog = muiThemeable(TimePickerDialog, [ + 'show', + 'dismiss', +]); export default TimePickerDialog; diff --git a/src/time-picker/time-picker.jsx b/src/time-picker/time-picker.jsx index 2f3edaa10a8e47..f36c1baae68ac6 100644 --- a/src/time-picker/time-picker.jsx +++ b/src/time-picker/time-picker.jsx @@ -184,6 +184,11 @@ let TimePicker = React.createClass({ }, }); -TimePicker = muiThemeable(TimePicker); +TimePicker = muiThemeable(TimePicker, [ + 'getTime', + 'setTime', + 'focus', + 'openDialog', +]); export default TimePicker; diff --git a/src/toggle.jsx b/src/toggle.jsx index b71bddd2c50a36..6c265f5904992e 100644 --- a/src/toggle.jsx +++ b/src/toggle.jsx @@ -193,6 +193,9 @@ let Toggle = React.createClass({ }); -Toggle = muiThemeable(Toggle); +Toggle = muiThemeable(Toggle, [ + 'isToggled', + 'setToggled', +]); export default Toggle; From d9335a84aa339d029b8fd80e87071d202bbd15b5 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Tue, 22 Dec 2015 00:36:04 +0330 Subject: [PATCH 67/70] bug fixes --- src/date-picker/day-button.jsx | 6 ++++++ src/date-picker/year-button.jsx | 6 ++++++ src/time-picker/clock-button.jsx | 6 ++++++ src/time-picker/clock-number.jsx | 2 +- 4 files changed, 19 insertions(+), 1 deletion(-) diff --git a/src/date-picker/day-button.jsx b/src/date-picker/day-button.jsx index 80f23857911813..823e518911a9ed 100644 --- a/src/date-picker/day-button.jsx +++ b/src/date-picker/day-button.jsx @@ -31,6 +31,12 @@ let DayButton = React.createClass({ }; }, + getInitialState() { + return { + hover: false, + }; + }, + getTheme() { return this.props._muiTheme.datePicker; }, diff --git a/src/date-picker/year-button.jsx b/src/date-picker/year-button.jsx index 960dedd214b720..68992a82237c47 100644 --- a/src/date-picker/year-button.jsx +++ b/src/date-picker/year-button.jsx @@ -30,6 +30,12 @@ let YearButton = React.createClass({ }; }, + getInitialState() { + return { + hover: false, + }; + }, + getTheme() { return this.props._muiTheme.datePicker; }, diff --git a/src/time-picker/clock-button.jsx b/src/time-picker/clock-button.jsx index 9ca2d469ff4ea3..6d62d19901e61d 100644 --- a/src/time-picker/clock-button.jsx +++ b/src/time-picker/clock-button.jsx @@ -31,6 +31,12 @@ let ClockButton = React.createClass({ }; }, + getInitialState() { + return { + selected: false, + }; + }, + _handleTouchTap() { this.setState({ selected: true, diff --git a/src/time-picker/clock-number.jsx b/src/time-picker/clock-number.jsx index c381407255df53..472c77b18742d1 100644 --- a/src/time-picker/clock-number.jsx +++ b/src/time-picker/clock-number.jsx @@ -27,7 +27,7 @@ let ClockNumber = React.createClass({ }, getTheme() { - return this.state.muiTheme.timePicker; + return this.props._muiTheme.timePicker; }, render() { From 1bdfe0d3c131edde2011321b79964895756ab24e Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Tue, 22 Dec 2015 00:36:34 +0330 Subject: [PATCH 68/70] have customization/themes use MuiThemeProvider --- .../components/pages/customization/themes.jsx | 302 +++++++++--------- 1 file changed, 152 insertions(+), 150 deletions(-) diff --git a/docs/src/app/components/pages/customization/themes.jsx b/docs/src/app/components/pages/customization/themes.jsx index fb26675dfbe072..f57ceb6ea1fbf9 100644 --- a/docs/src/app/components/pages/customization/themes.jsx +++ b/docs/src/app/components/pages/customization/themes.jsx @@ -2,6 +2,7 @@ import React from 'react'; import mui from 'material-ui'; import getMuiTheme from 'material-ui/lib/styles/getMuiTheme'; import muiThemeable from 'material-ui/lib/muiThemeable'; +import MuiThemeProvider from 'material-ui/lib/MuiThemeProvider'; import CodeBlock from '../../CodeExample/CodeBlock'; import ComponentDoc from '../../component-doc'; @@ -300,159 +301,160 @@ let ThemesPage = React.createClass({ let styles = this.getStyles(); return ( -
- -

Themes

- - - {this.getThemeExamples()} - - -
-

- We changed how themes work in v0.12.0 (check out - release log for more details). - There are now two kinds of themes in Material-UI: raw theme and mui theme. - The raw theme is a plain JS object containing three keys: spacing, palette and fontFamily. - The mui theme, on the other hand, is a much bigger object. It contains a key for every material-ui - component, and the value corresponding to that key describes the styling of that particular component - under the current raw theme. In this sense, the mui theme is produced from the raw theme. - The raw theme acts as a basis for styling components, whereas the mui theme contains specific values - (that are calculated based on the raw theme) for styling each component. -

- -

- We ship two raw themes with Material-UI: light and dark. They are located under - - /lib/styles/raw-themes/ - - in the Material-UI root directory. Custom themes may be - defined similarly. - The ThemeManager module calculates the mui theme and acts as an interface to modify the theme. - Before we discuss how to apply custom themes to an application, let's - look at the functions provided by ThemeManager. -

-
+ +
+

Themes

+ + + {this.getThemeExamples()} + + +
+

+ We changed how themes work in v0.12.0 (check out + release log for more details). + There are now two kinds of themes in Material-UI: raw theme and mui theme. + The raw theme is a plain JS object containing three keys: spacing, palette and fontFamily. + The mui theme, on the other hand, is a much bigger object. It contains a key for every material-ui + component, and the value corresponding to that key describes the styling of that particular component + under the current raw theme. In this sense, the mui theme is produced from the raw theme. + The raw theme acts as a basis for styling components, whereas the mui theme contains specific values + (that are calculated based on the raw theme) for styling each component. +

+ +

+ We ship two raw themes with Material-UI: light and dark. They are located under + + /lib/styles/raw-themes/ + + in the Material-UI root directory. Custom themes may be + defined similarly. + The ThemeManager module calculates the mui theme and acts as an interface to modify the theme. + Before we discuss how to apply custom themes to an application, let's + look at the functions provided by ThemeManager. +

+
-
- -
+
+ +
-

Custom Themes

-

- All Material-UI components use the light theme by default so you can start including them in your project - without having to worry about theming. - However, it is quite straightforward to style components to your liking. -

- -

- Internally, Material-UI components use React's - - context feature to implement theming. Context is a way to pass down values through the component - hierarchy without having to use props at every level. - In fact, context is very convenient for concepts like theming, - which are usually implemented in a hierarchical manner. -

- -

- There are two recommended ways to apply custom themes: - using React lifecycle methods with the context feature, - or, - using an ES7-style decorator. To start off, define your own raw theme in a JS file like so: -

- - - {lightRawTheme} - - -

1. Using React Lifecycle Methods with Context

- -

- Once you have defined your raw theme in a JS file, you can use React lifecycle methods - and the context feature to apply your custom theme as follows: -

- - {reactContextExampleCode} - - -

2. Using ES7-style Decorator

-

- Alternatively, we have provided an ES7-style theme decorator that you can use to apply your - custom theme. - Keep in mind that in order to use the decorator, you must use the ES6-style class syntax - to declare your app component. Moreover, React may not be able to automatically bind event handlers - to your component's this. Arrow functions allow you to overcome this limitation. -

- - {decoratorExampleCode} - -

- It is worth pointing out that underneath the covers, - the decorator is also using React lifecycle methods - with the context feature. -

- -

Overriding Theme Variables

- -

- Once you have obtained the calculated mui theme in your app component, you can easily - override specific attributes for particular components. - These overrides can be performed at any level - in the hierarchy and will only apply from that point downward. -

- -

- For instance, let's say that a specific page (component) in your app expects to receive the theme - from its parent/ancestors. However, in that page, the app bar text color should be different. -

- - - {receiveThemeInContextCode} - - -

- We recommend that you use state for intermediary storage of the theme, and always access the theme - using this.state. Then, to modify the theme, - use this.setState() in an appropriate React lifecycle method. - This is good practice because - React componenets re-render every time the state of the component is updated. -

- -

- Coming back to our example, let's say that inside - SpecificPageInApp and - all of its children, the text color of the app bar should be deep purple. - This can be accomplished as follows: -

- - - {overrideAppBarTextColorCode} - - -

- Check out the - theme-manager.js file for a complete list of - component-specific theme values that may be overridden. -

- -

- The mui theme object also contains a key called static that is set to - true by - default. This allows for some optimization when rendering Material-UI components. Change this to - false if - the muiTheme object in your app can change during runtime. -

- -

- Never directly modify the raw theme (spacing / palette / fontFamily) of an mui theme object. - Doing so will result in styling inconsistencies across your components. - Always use the modifiers provided in the - ThemeManager module. -

+

Custom Themes

+

+ All Material-UI components use the light theme by default so you can start including them in your project + without having to worry about theming. + However, it is quite straightforward to style components to your liking. +

+ +

+ Internally, Material-UI components use React's + + context feature to implement theming. Context is a way to pass down values through the component + hierarchy without having to use props at every level. + In fact, context is very convenient for concepts like theming, + which are usually implemented in a hierarchical manner. +

+ +

+ There are two recommended ways to apply custom themes: + using React lifecycle methods with the context feature, + or, + using an ES7-style decorator. To start off, define your own raw theme in a JS file like so: +

+ + + {lightRawTheme} + + +

1. Using React Lifecycle Methods with Context

+ +

+ Once you have defined your raw theme in a JS file, you can use React lifecycle methods + and the context feature to apply your custom theme as follows: +

+ + {reactContextExampleCode} + + +

2. Using ES7-style Decorator

+

+ Alternatively, we have provided an ES7-style theme decorator that you can use to apply your + custom theme. + Keep in mind that in order to use the decorator, you must use the ES6-style class syntax + to declare your app component. Moreover, React may not be able to automatically bind event handlers + to your component's this. Arrow functions allow you to overcome this limitation. +

+ + {decoratorExampleCode} + +

+ It is worth pointing out that underneath the covers, + the decorator is also using React lifecycle methods + with the context feature. +

+ +

Overriding Theme Variables

+ +

+ Once you have obtained the calculated mui theme in your app component, you can easily + override specific attributes for particular components. + These overrides can be performed at any level + in the hierarchy and will only apply from that point downward. +

+ +

+ For instance, let's say that a specific page (component) in your app expects to receive the theme + from its parent/ancestors. However, in that page, the app bar text color should be different. +

+ + + {receiveThemeInContextCode} + + +

+ We recommend that you use state for intermediary storage of the theme, and always access the theme + using this.state. Then, to modify the theme, + use this.setState() in an appropriate React lifecycle method. + This is good practice because + React componenets re-render every time the state of the component is updated. +

+ +

+ Coming back to our example, let's say that inside + SpecificPageInApp and + all of its children, the text color of the app bar should be deep purple. + This can be accomplished as follows: +

+ + + {overrideAppBarTextColorCode} + + +

+ Check out the + theme-manager.js file for a complete list of + component-specific theme values that may be overridden. +

+ +

+ The mui theme object also contains a key called static that is set to + true by + default. This allows for some optimization when rendering Material-UI components. Change this to + false if + the muiTheme object in your app can change during runtime. +

+ +

+ Never directly modify the raw theme (spacing / palette / fontFamily) of an mui theme object. + Doing so will result in styling inconsistencies across your components. + Always use the modifiers provided in the + ThemeManager module. +

-
+
+ ); }, From 2e5156d003691dc572be3e0499f2aaee46d80fa5 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Tue, 22 Dec 2015 00:56:31 +0330 Subject: [PATCH 69/70] patch tests --- test/dialog-spec.js | 2 +- test/theming-v12-spec.js | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/test/dialog-spec.js b/test/dialog-spec.js index 14aa61f2fad9d4..ba1602e62446f7 100644 --- a/test/dialog-spec.js +++ b/test/dialog-spec.js @@ -1,5 +1,5 @@ import React from 'react'; -import Dialog from 'dialog'; +import Dialog from 'Dialog/Dialog'; import {spy} from 'sinon'; import TestUtils from 'react-addons-test-utils'; diff --git a/test/theming-v12-spec.js b/test/theming-v12-spec.js index a954e7bf59a528..59d4b77e6b2fd2 100644 --- a/test/theming-v12-spec.js +++ b/test/theming-v12-spec.js @@ -126,12 +126,12 @@ describe('Theming', () => { const AppBarDarkUsingContext = React.createClass({ childContextTypes: { - muiTheme: React.PropTypes.object, + _muiTheme: React.PropTypes.object, }, getChildContext() { return { - muiTheme: ThemeManager.getMuiTheme(DarkRawTheme), + _muiTheme: ThemeManager.getMuiTheme(DarkRawTheme), }; }, @@ -143,7 +143,7 @@ const AppBarDarkUsingContext = React.createClass({ const AppBarDarkUsingContextWithOverride = React.createClass({ childContextTypes: { - muiTheme: React.PropTypes.object, + _muiTheme: React.PropTypes.object, }, getInitialState() { @@ -157,7 +157,7 @@ const AppBarDarkUsingContextWithOverride = React.createClass({ getChildContext() { return { - muiTheme: this.state.muiTheme, + _muiTheme: this.state.muiTheme, }; }, @@ -197,12 +197,12 @@ const ButtonToUpdateThemeWithAppBar = React.createClass({ }, childContextTypes: { - muiTheme: React.PropTypes.object, + _muiTheme: React.PropTypes.object, }, getChildContext() { return { - muiTheme: this.state.muiTheme, + _muiTheme: this.state.muiTheme, }; }, From 5a0ed1eefad7f5f206ca9621a1f2f7d670b38034 Mon Sep 17 00:00:00 2001 From: Ali Taheri Date: Tue, 22 Dec 2015 01:02:13 +0330 Subject: [PATCH 70/70] fix eslint errors --- docs/src/app/components/pages/customization/themes.jsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/src/app/components/pages/customization/themes.jsx b/docs/src/app/components/pages/customization/themes.jsx index f57ceb6ea1fbf9..00c457cbbc32ba 100644 --- a/docs/src/app/components/pages/customization/themes.jsx +++ b/docs/src/app/components/pages/customization/themes.jsx @@ -312,8 +312,9 @@ let ThemesPage = React.createClass({

We changed how themes work in v0.12.0 (check out - release log for more details). - There are now two kinds of themes in Material-UI: raw theme and mui theme. + release log + for more details). There are now two kinds of themes in Material-UI: + raw theme and mui theme. The raw theme is a plain JS object containing three keys: spacing, palette and fontFamily. The mui theme, on the other hand, is a much bigger object. It contains a key for every material-ui component, and the value corresponding to that key describes the styling of that particular component @@ -336,7 +337,7 @@ let ThemesPage = React.createClass({

-