From a2c859a57296916798042f1197f30fb2d3baf565 Mon Sep 17 00:00:00 2001 From: M03M Date: Fri, 27 Mar 2015 15:20:17 -0500 Subject: [PATCH 1/4] Updated mui to use peer dependency changes. --- docs/package.json | 2 +- docs/src/app/components/app-left-nav.jsx | 6 +++--- docs/src/app/components/master.jsx | 6 +++--- docs/src/app/components/pages/components/tabs.jsx | 6 +++--- docs/src/app/components/pages/home.jsx | 2 +- docs/src/app/components/pages/page-with-nav.jsx | 4 ++-- package.json | 2 +- src/js/input.jsx | 6 +++--- src/js/mixins/classable.js | 8 ++++---- src/js/mixins/dom-idable.js | 2 +- 10 files changed, 22 insertions(+), 22 deletions(-) diff --git a/docs/package.json b/docs/package.json index b9adc12f018124..c594811d18e85e 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,6 +1,6 @@ { "name": "material-ui-docs", - "version": "0.6.1", + "version": "0.7.2", "description": "Documentation site for material-ui", "repository": { "type": "git", diff --git a/docs/src/app/components/app-left-nav.jsx b/docs/src/app/components/app-left-nav.jsx index 9c186f7e8c4564..03bb7aa828b5fe 100644 --- a/docs/src/app/components/app-left-nav.jsx +++ b/docs/src/app/components/app-left-nav.jsx @@ -46,16 +46,16 @@ var AppLeftNav = React.createClass({ for (var i = menuItems.length - 1; i >= 0; i--) { currentItem = menuItems[i]; - if (currentItem.route && this.isActive(currentItem.route)) return i; + if (currentItem.route && this.context.router.isActive(currentItem.route)) return i; }; }, _onLeftNavChange: function(e, key, payload) { - this.transitionTo(payload.route); + this.context.router.transitionTo(payload.route); }, _onHeaderClick: function() { - this.transitionTo('root'); + this.context.router.transitionTo('root'); this.refs.leftNav.close(); } diff --git a/docs/src/app/components/master.jsx b/docs/src/app/components/master.jsx index e4f6631b2c3097..7c943a85764094 100644 --- a/docs/src/app/components/master.jsx +++ b/docs/src/app/components/master.jsx @@ -15,9 +15,9 @@ var Master = React.createClass({ render: function() { var title = - this.isActive('get-started') ? 'Get Started' : - this.isActive('css-framework') ? 'Css Framework' : - this.isActive('components') ? 'Components' : ''; + this.context.router.isActive('get-started') ? 'Get Started' : + this.context.router.isActive('css-framework') ? 'Css Framework' : + this.context.router.isActive('components') ? 'Components' : ''; var githubButton = ( \n' + '\n' + '_onActive: function(tab){ \n' + - ' this.transitionTo(tab.props.route); \n' + + ' this.context.router.transitionTo(tab.props.route); \n' + '}'; - var desc = 'Refs cannont be set on individual Tab components as cloneWithProps is being ' + + var desc = 'Refs cannot be set on individual Tab components as cloneWithProps is being ' + 'used to extend the individual tab components under the hood. However, ' + 'refs can be passed to the Tabs container and to any element or component within the template. ' + 'If you need to access a tab directly - you can do so with the first argument of onActive or ' + @@ -155,7 +155,7 @@ var TabsPage = React.createClass({ }, _onActive: function(tab){ - this.transitionTo(tab.props.route); + this.context.router.transitionTo(tab.props.route); } }); diff --git a/docs/src/app/components/pages/home.jsx b/docs/src/app/components/pages/home.jsx index 243063ec48621b..cf6f5c4bc31917 100644 --- a/docs/src/app/components/pages/home.jsx +++ b/docs/src/app/components/pages/home.jsx @@ -64,7 +64,7 @@ var HomePage = React.createClass({ }, _onDemoClick: function() { - this.transitionTo('components'); + this.context.router.transitionTo('components'); } }); diff --git a/docs/src/app/components/pages/page-with-nav.jsx b/docs/src/app/components/pages/page-with-nav.jsx index 72af80db073bfd..789f2212da869a 100644 --- a/docs/src/app/components/pages/page-with-nav.jsx +++ b/docs/src/app/components/pages/page-with-nav.jsx @@ -36,12 +36,12 @@ var PageWithNav = React.createClass({ for (var i = menuItems.length - 1; i >= 0; i--) { currentItem = menuItems[i]; - if (currentItem.route && this.isActive(currentItem.route)) return i; + if (currentItem.route && this.context.router.isActive(currentItem.route)) return i; }; }, _onMenuItemClick: function(e, index, item) { - this.transitionTo(item.route); + this.context.router.transitionTo(item.route); } }); diff --git a/package.json b/package.json index 7ae1f7b8b470e0..6491e865d0f727 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ }, "homepage": "http://material-ui.com/", "dependencies": { - "react-classset": "0.0.2", + "classnames": "^1.2.0", "react-draggable2": "^0.5.1" }, "peerDependencies": { diff --git a/src/js/input.jsx b/src/js/input.jsx index cbe90e9302b442..29eaf7293a1254 100644 --- a/src/js/input.jsx +++ b/src/js/input.jsx @@ -1,6 +1,6 @@ var React = require('react'); var Classable = require('./mixins/classable'); -var classSet = require('react-classset'); +var ClassNames = require('classnames'); var Input = React.createClass({ @@ -47,10 +47,10 @@ var Input = React.createClass({ }); var placeholder = this.props.inlinePlaceholder ? this.props.placeholder : ""; var inputIsNotEmpty = !!this.state.value; - var inputClassName = classSet({ + var inputClassName = ClassNames({ 'mui-is-not-empty': inputIsNotEmpty }); - var textareaClassName = classSet({ + var textareaClassName = ClassNames({ 'mui-input-textarea': true, 'mui-is-not-empty': inputIsNotEmpty }); diff --git a/src/js/mixins/classable.js b/src/js/mixins/classable.js index c9e90a1a3b016c..c4c986cff75edb 100644 --- a/src/js/mixins/classable.js +++ b/src/js/mixins/classable.js @@ -1,5 +1,5 @@ var React = require('react'); -var classSet = require('react-classset'); +var classNames = require('classnames'); module.exports = { @@ -15,16 +15,16 @@ module.exports = { //Add in initial classes if (typeof initialClasses === 'object') { - classString += ' ' + classSet(initialClasses); + classString += ' ' + classNames(initialClasses); } else { classString += ' ' + initialClasses; } //Add in additional classes - if (additionalClassObj) classString += ' ' + classSet(additionalClassObj); + if (additionalClassObj) classString += ' ' + classNames(additionalClassObj); //Convert the class string into an object and run it through the class set - return classSet(this.getClassSet(classString)); + return classNames(this.getClassSet(classString)); }, getClassSet: function(classString) { diff --git a/src/js/mixins/dom-idable.js b/src/js/mixins/dom-idable.js index 1bea8595d05bb9..1ecb93fd129153 100644 --- a/src/js/mixins/dom-idable.js +++ b/src/js/mixins/dom-idable.js @@ -1,7 +1,7 @@ module.exports = { getDomId: function() { - return 'dom_id' + this._rootNodeID.replace(/\./g, '_'); + return 'dom_id' + this._reactInternalInstance._rootNodeID.replace(/\./g, '_'); } } \ No newline at end of file From 00024b95d4438654a47cb1cc8d104d1c87c03c62 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 28 Mar 2015 12:39:18 +0100 Subject: [PATCH 2/4] Dialog title: node instead of string --- .../app/components/pages/components/dialog.jsx | 8 ++++---- src/js/dialog.jsx | 18 +++++++++++++----- 2 files changed, 17 insertions(+), 9 deletions(-) diff --git a/docs/src/app/components/pages/components/dialog.jsx b/docs/src/app/components/pages/components/dialog.jsx index cf9085467f2406..9f2b4172e3bd59 100644 --- a/docs/src/app/components/pages/components/dialog.jsx +++ b/docs/src/app/components/pages/components/dialog.jsx @@ -9,7 +9,7 @@ var DialogPage = React.createClass({ render: function() { - var code = + var code = '//Standard Actions\n' + 'var standardActions = [\n' + ' { text: \'Cancel\' },\n' + @@ -57,9 +57,9 @@ var DialogPage = React.createClass({ }, { name: 'title', - type: 'string', + type: 'node', header: 'optional', - desc: 'The title string to display on the dialog.' + desc: 'The title to display on the dialog. Could be number, string, element or an array containing these types.' } ] }, @@ -160,4 +160,4 @@ var DialogPage = React.createClass({ }); -module.exports = DialogPage; \ No newline at end of file +module.exports = DialogPage; diff --git a/src/js/dialog.jsx b/src/js/dialog.jsx index bebdaa17d6e94f..af08c2958fbc04 100644 --- a/src/js/dialog.jsx +++ b/src/js/dialog.jsx @@ -7,16 +7,24 @@ var Dialog = React.createClass({ mixins: [Classable], propTypes: { - title: React.PropTypes.string + title: React.PropTypes.node }, render: function() { var { className, - title, ...other } = this.props; var classes = this.getClasses('mui-dialog'); + var title; + + if (this.props.title) { + // If the title is a string, wrap in an h3 tag. + // If not, just use it as a node. + title = toString.call(this.props.title) === '[object String]' ? +

{this.props.title}

: + this.props.title; + } return ( -

{this.props.title}

+ {title}
{this.props.children}
- + ); }, @@ -43,4 +51,4 @@ var Dialog = React.createClass({ }); -module.exports = Dialog; \ No newline at end of file +module.exports = Dialog; From f42faaef2ecb4b0aa6b879968b567116434aabb2 Mon Sep 17 00:00:00 2001 From: Josh Kruder Date: Sun, 29 Mar 2015 00:42:51 -0400 Subject: [PATCH 3/4] Added mouseEnter and mouseLeave event handling to nested menus. --- src/js/menu/menu.jsx | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/src/js/menu/menu.jsx b/src/js/menu/menu.jsx index 9cfc5b9d9cfdb1..788e21645e4ccd 100644 --- a/src/js/menu/menu.jsx +++ b/src/js/menu/menu.jsx @@ -37,7 +37,7 @@ var NestedMenuItem = React.createClass({ }, componentClickAway: function() { - this.setState({ open: false }); + this._closeNestedMenu(); }, componentDidMount: function() { @@ -55,7 +55,7 @@ var NestedMenuItem = React.createClass({ }); return ( -
+
{this.props.text} @@ -77,19 +77,31 @@ var NestedMenuItem = React.createClass({ nestedMenu.style.left = el.offsetWidth + 'px'; }, + + _openNestedMenu: function() { + if (!this.props.disabled) this.setState({ open: true }); + }, + + _closeNestedMenu: function() { + this.setState({ open: false }); + }, + + _toggleNestedMenu: function() { + if (!this.props.disabled) this.setState({ open: !this.state.open }); + }, _onParentItemClick: function() { - if (!this.props.disabled) this.setState({ open: !this.state.open }); + this._toggleNestedMenu(); }, _onMenuItemClick: function(e, index, menuItem) { if (this.props.onItemClick) this.props.onItemClick(e, index, menuItem); - this.setState({ open: false }); + this._closeNestedMenu(); }, _onMenuItemTap: function(e, index, menuItem) { if (this.props.onItemTap) this.props.onItemTap(e, index, menuItem); - this.setState({ open: false }); + this._closeNestedMenu(); } }); From 54b61d70530033197acce6306c675c60c4f4aaee Mon Sep 17 00:00:00 2001 From: M03M Date: Mon, 30 Mar 2015 10:18:12 -0500 Subject: [PATCH 4/4] Minor bug fix. --- src/js/dialog.jsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/js/dialog.jsx b/src/js/dialog.jsx index 19fa08c23a1742..35811173d106f5 100644 --- a/src/js/dialog.jsx +++ b/src/js/dialog.jsx @@ -31,9 +31,7 @@ var Dialog = React.createClass({ ...other } = this.props; - var classes = this.getClasses('mui-dialog'); var title; - if (this.props.title) { // If the title is a string, wrap in an h3 tag. // If not, just use it as a node. @@ -46,10 +44,11 @@ var Dialog = React.createClass({ {title} - +
{this.props.children}