diff --git a/.babelrc b/.babelrc new file mode 100644 index 00000000000000..9e50396b4fbd2c --- /dev/null +++ b/.babelrc @@ -0,0 +1,6 @@ +{ + "stage": 1, + "plugins": [ + "dev-expression" + ] +} diff --git a/.travis.yml b/.travis.yml index 2d63fafb93ddf0..41586280211d3e 100644 --- a/.travis.yml +++ b/.travis.yml @@ -2,3 +2,6 @@ language: node_js node_js: - "stable" sudo: false +script: + - npm run lint + - npm test diff --git a/CHANGELOG.md b/CHANGELOG.md index bd95025113329a..5ff985cb5f5e0f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,44 @@ +## 0.13.2 +###### _Nov 9, 2015_ + +##### General +- Add tabs with slide effect (#1907) +- Universal rendering support (#2007) (thanks @Cavitt) +- Add labelPosition prop to buttons (#2014) +- Add RenderToLayer component (#2042) (thanks @chrismcv) +- Open state of of dialog now controlled through props (#1996) + - openImmediately, show(), dismiss() deprecated +- Update TextField docs (#2070) +- New Badge component (#2045) (thanks @rhythnic) +- Add import statements to components' docs pages (#2113) + +##### Component Fixes / Enhancements +- Fix server side rendering (#2021) +- Add key to TableHeaderColumn for selectAll (#2030) +- Fix Circular Progress transition (#2047) +- Fix Snackbar getting stuck when receiving new props (#2024) +- iPad enhanced textarea fix (#1720) +- Table clickAway triggers onRowSelection (#2054) +- Theme color fixes for Slider and Toggle (#2016) + +## 0.13.1 +###### _Oct 29, 2015_ + +##### General +- [SVGIcons] added index.js and index-generator script (#1959) +- [TimePicker] openDialog() function (#1939) and autoOk prop (#1940) added +- [DatePicker] i18n support added (#1658) +- [LeftNav] supports nested children (w/o menuItems) (#1982) +- [Snackbar] updated for new specification (#1668) +- [Tabs] added tabTemplate prop (#1691) + +##### Component Fixes / Enhancements +- [TextArea] height issue fixed (#1875) +- [GridList] doc added (#1948) with code examples (#1988) +- [TextField] fixed custom theme color hiding backgroundColor (#1989) +- [TimePicker] added style and textFieldStyle props (#1949) +- [Card] text color is now pulled from theme (#1995) + ## 0.13.0 ###### _Oct 21, 2015_ diff --git a/README.md b/README.md index b9333208dd4186..7e75ca7b08dcb7 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,7 @@ -#[Material-UI](http://callemall.github.io/material-ui/) [![npm package](https://img.shields.io/npm/v/material-ui.svg?style=flat-square)](https://www.npmjs.org/package/material-ui) [![Build Status](https://img.shields.io/travis/callemall/material-ui.svg?style=flat-square)](https://travis-ci.org/callemall/material-ui) [![Gitter](https://img.shields.io/badge/gitter-join%20chat-f81a65.svg?style=flat-square)](https://gitter.im/callemall/material-ui?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) +#[Material-UI](http://callemall.github.io/material-ui/) +[![npm package](https://img.shields.io/npm/v/material-ui.svg?style=flat-square)](https://www.npmjs.org/package/material-ui) +[![Build Status](https://travis-ci.org/callemall/material-ui.svg?branch=master)](https://travis-ci.org/callemall/material-ui) +[![Gitter](https://img.shields.io/badge/gitter-join%20chat-f81a65.svg?style=flat-square)](https://gitter.im/callemall/material-ui?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![PeerDependencies](https://img.shields.io/david/peer/callemall/material-ui.svg?style=flat-square)](https://david-dm.org/callemall/material-ui#info=peerDependencies&view=list) [![Dependencies](https://img.shields.io/david/callemall/material-ui.svg?style=flat-square)](https://david-dm.org/callemall/material-ui) diff --git a/docs/package.json b/docs/package.json index 32954df2addb47..da50229a91f868 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,11 +1,12 @@ { "name": "material-ui-docs", - "version": "0.13.0", + "version": "0.13.2", "description": "Documentation site for material-ui", "repository": { "type": "git", "url": "https://github.com/callemall/material-ui.git" }, + "private": true, "scripts": { "prestart": "webpack-dev-server --config webpack-dev-server.config.js --progress --colors --inline", "start": "open http://localhost:3000", @@ -15,13 +16,10 @@ "dependencies": { "codemirror": "^5.5.0", "history": "^1.11.1", - "react-addons-create-fragment": "^0.14.0", "react-addons-perf": "^0.14.0", - "react-addons-pure-render-mixin": "^0.14.0", - "react-addons-transition-group": "^0.14.0", - "react-addons-update": "^0.14.0", "react-dom": "^0.14.0", - "react-tap-event-plugin": "^0.2.0" + "react-motion": "^0.3.1", + "react-swipeable-views": "^0.3.0" }, "devDependencies": { "raw-loader": "^0.5.1", diff --git a/docs/src/app/app-routes.jsx b/docs/src/app/app-routes.jsx index fe37b92430b23b..7996d2d3f32d5b 100644 --- a/docs/src/app/app-routes.jsx +++ b/docs/src/app/app-routes.jsx @@ -22,6 +22,7 @@ const InlineStyles = require('./components/pages/customization/inline-styles'); const Components = require('./components/pages/components'); const AppBar = require('./components/pages/components/app-bar'); const Avatars = require('./components/pages/components/avatars'); +const Badge = require('./components/pages/components/badge'); const Buttons = require('./components/pages/components/buttons'); const Cards = require('./components/pages/components/cards'); const DatePicker = require('./components/pages/components/date-picker'); @@ -77,6 +78,7 @@ const AppRoutes = ( + diff --git a/docs/src/app/components/pages/components.jsx b/docs/src/app/components/pages/components.jsx index d7069c034cdf97..bc9787804cfff6 100644 --- a/docs/src/app/components/pages/components.jsx +++ b/docs/src/app/components/pages/components.jsx @@ -7,6 +7,7 @@ export default class Components extends React.Component { let menuItems = [ { route: '/components/appbar', text: 'AppBar'}, { route: '/components/avatars', text: 'Avatars'}, + { route: '/components/badge', text: 'Badge'}, { route: '/components/buttons', text: 'Buttons'}, { route: '/components/cards', text: 'Cards'}, { route: '/components/date-picker', text: 'Date Picker'}, diff --git a/docs/src/app/components/pages/components/app-bar.jsx b/docs/src/app/components/pages/components/app-bar.jsx index a0900340ab69e8..b9b0f3b14907ed 100644 --- a/docs/src/app/components/pages/components/app-bar.jsx +++ b/docs/src/app/components/pages/components/app-bar.jsx @@ -1,11 +1,12 @@ -let React = require('react'); -let { AppBar, DropDownMenu } = require('material-ui'); -let IconButton = require('icon-button'); -let NavigationClose = require('svg-icons/navigation/close'); -let FlatButton = require('flat-button'); -let ComponentDoc = require('../../component-doc'); -let CodeExample = require('../../code-example/code-example'); -let Code = require('app-bar-code'); +const React = require('react'); +const { AppBar, DropDownMenu, Paper } = require('material-ui'); +const IconButton = require('icon-button'); +const NavigationClose = require('svg-icons/navigation/close'); +const FlatButton = require('flat-button'); +const ComponentDoc = require('../../component-doc'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); +const Code = require('app-bar-code'); const IconMenu = require('menus/icon-menu'); const MenuItem = require('menus/menu-item'); const MoreVertIcon = require('svg-icons/navigation/more-vert'); @@ -63,7 +64,7 @@ export default class AppBarPage extends React.Component { name: 'style', type: 'object', header: 'optional', - desc: 'Override the inline-styles of the app bars\'s root element.', + desc: 'Override the inline-styles of the app bar\'s root element.', }, { name: 'showMenuIconButton', @@ -113,6 +114,16 @@ export default class AppBarPage extends React.Component { name="AppBar" desc={this.desc} componentInfo={this.componentInfo}> + + + + { + '//Import statement:\nconst AppBar = require(\'material-ui/lib/app-bar\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + + + + + { + '//Import statement:\nconst Avatar = require(\'material-ui/lib/avatar\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + Image Avatar diff --git a/docs/src/app/components/pages/components/badge.jsx b/docs/src/app/components/pages/components/badge.jsx new file mode 100644 index 00000000000000..4ca67f96986985 --- /dev/null +++ b/docs/src/app/components/pages/components/badge.jsx @@ -0,0 +1,99 @@ +const React = require('react'); +const { FontIcon, IconButton, Badge, Paper } = require('material-ui'); +const ComponentDoc = require('../../component-doc'); +const Code = require('badge-code'); +const CodeExample = require('../../code-example/code-example'); +const NotificationsIcon = require('svg-icons/social/notifications'); +const ShoppingCartIcon = require('svg-icons/action/shopping-cart'); +const FolderIcon = require('svg-icons/file/folder-open'); +const UploadIcon = require('svg-icons/file/cloud-upload'); +const CodeBlock = require('../../code-example/code-block'); + +export default class BadgePage extends React.Component { + constructor(props) { + super(props); + + this.desc = 'This component generates a small badge to the top-right of it\'s child(ren)'; + + this.componentInfo = [ + { + name: 'Props', + infoArray: [ + { + name: 'badgeContent', + type: 'node', + header: 'required', + desc: 'This is the content rendered within the badge.', + }, + { + name: 'primary', + type: 'bool', + header: 'default: false', + desc: 'If true, the badge will use the primary badge colors.', + }, + { + name: 'secondary', + type: 'bool', + header: 'default: false', + desc: 'If true, the badge will use the secondary badge colors.', + }, + { + name: 'style', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the root element.', + }, + { + name: 'badgeStyle', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the badge element.', + }, + ], + }, + ]; + } + + render() { + return ( + + + + + { + '//Import statement:\nconst Badge = require(\'material-ui/lib/badge\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + + + + + + + + + + + + + + }> + + + + +

Company Name

+ + + + + ); + } + +} diff --git a/docs/src/app/components/pages/components/buttons.jsx b/docs/src/app/components/pages/components/buttons.jsx index 66d6b52e646171..d2890faf905374 100644 --- a/docs/src/app/components/pages/components/buttons.jsx +++ b/docs/src/app/components/pages/components/buttons.jsx @@ -1,25 +1,27 @@ -let React = require('react'); -let ComponentDoc = require('../../component-doc'); -let mui = require('material-ui'); -let ToggleStar = require('svg-icons/toggle/star'); +const React = require('react'); +const ComponentDoc = require('../../component-doc'); +const mui = require('material-ui'); +const ToggleStar = require('svg-icons/toggle/star'); -let { +const { ClearFix, FlatButton, FloatingActionButton, FontIcon, RaisedButton, + Paper, Styles, Tab, Tabs, Utils, } = mui; -let extend = Utils.Extend; -let { Colors, Typography } = Styles; -let RaisedButtonCode = require('raised-button-code'); -let FloatingActionButtonCode = require('floating-action-button-code'); -let FlatButtonCode = require('flat-button-code'); -let CodeExample = require('../../code-example/code-example'); +const extend = Utils.Extend; +const { Colors, Typography } = Styles; +const RaisedButtonCode = require('raised-button-code'); +const FloatingActionButtonCode = require('floating-action-button-code'); +const FlatButtonCode = require('flat-button-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); export default class ButtonPage extends React.Component { @@ -70,6 +72,12 @@ export default class ButtonPage extends React.Component { header: 'optional', desc: 'Override the inline-styles of the button\'s label element.', }, + { + name: 'labelPosition', + type: 'oneOf ["before", "after"]', + header: 'default: "before"', + desc: 'Place label before or after the passed children', + }, { name: 'linkButton', type: 'bool', @@ -319,7 +327,6 @@ export default class ButtonPage extends React.Component { height: '100%', display: 'inline-block', verticalAlign: 'middle', - float: 'left', paddingLeft: '12px', lineHeight: '36px', color: Colors.cyan500, @@ -347,12 +354,25 @@ export default class ButtonPage extends React.Component { return (

Buttons

+ + + + { + '//Import statements:\nconst FlatButton = require(\'material-ui/lib/flat-button\');\n' + + 'const RaisedButton = require(\'material-ui/lib/raised-button\');\n' + + 'const FloatingActionButton = require(\'material-ui/lib/floating-action-button\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + +
@@ -375,7 +395,17 @@ export default class ButtonPage extends React.Component { + + +
+
+ @@ -420,6 +450,15 @@ 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 index cb89da0dbfa486..121c02a2f10db4 100644 --- a/docs/src/app/components/pages/components/cards.jsx +++ b/docs/src/app/components/pages/components/cards.jsx @@ -1,9 +1,9 @@ -let React = require('react'); -let mui = require('material-ui'); -let ComponentDoc = require('../../component-doc'); -let CodeExample = require('../../code-example/code-example'); +const React = require('react'); +const mui = require('material-ui'); +const ComponentDoc = require('../../component-doc'); +const CodeExample = require('../../code-example/code-example'); -let { +const { Avatar, Card, CardActions, @@ -13,8 +13,10 @@ let { CardText, CardTitle, FlatButton, + Paper, } = mui; -let Code = require('cards-code'); +const Code = require('cards-code'); +const CodeBlock = require('../../code-example/code-block'); export default class CardPage extends React.Component { @@ -68,6 +70,12 @@ export default class CardPage extends React.Component { 'and CardActions implement showExpandableButton. Any child component of Card can implements ' + 'showExpandableButton or forwards the property to a child component supporting it.', }, + { + name: 'style', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the card\'s root element.', + }, ], }, { @@ -90,6 +98,22 @@ export default class CardPage extends React.Component { name="Card" desc={this.desc} componentInfo={this.componentInfo}> + + + + { + '//Import statements:\nconst Card = require(\'material-ui/lib/card/card\');\n' + + 'const CardActions = require(\'material-ui/lib/card/card-actions\');\n' + + 'const CardExpandable = require(\'material-ui/lib/card/card-expandable\');\n' + + 'const CardHeader = require(\'material-ui/lib/card/card-header\');\n' + + 'const CardMedia = require(\'material-ui/lib/card/card-media\');\n' + + 'const CardText = require(\'material-ui/lib/card/card-text\');\n' + + 'const CardTitle = require(\'material-ui/lib/card/card-title\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + + + + + { + '//Import statements:\nconst DatePicker = require(\'material-ui/lib/date-picker/date-picker\');\n' + + 'const DatePickerDialog = require(\'material-ui/lib/date-picker/date-picker-dialog\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + diff --git a/docs/src/app/components/pages/components/dialog.jsx b/docs/src/app/components/pages/components/dialog.jsx index 2ef62cc95b6f15..1eed3bb6139159 100644 --- a/docs/src/app/components/pages/components/dialog.jsx +++ b/docs/src/app/components/pages/components/dialog.jsx @@ -1,9 +1,9 @@ -let React = require('react'); -let { Dialog, FlatButton, RaisedButton, Toggle } = require('material-ui'); -let ComponentDoc = require('../../component-doc'); -let Code = require('dialog-code'); -let CodeExample = require('../../code-example/code-example'); - +const React = require('react'); +const { Dialog, FlatButton, RaisedButton, Paper, Toggle } = require('material-ui'); +const ComponentDoc = require('../../component-doc'); +const Code = require('dialog-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); export default class DialogPage extends React.Component { @@ -11,6 +11,9 @@ export default class DialogPage extends React.Component { super(); this.state = { modal: false, + openDialogStandardActions: false, + openDialogCustomActions: false, + openDialogScrollable: false, }; this._handleCustomDialogCancel = this._handleCustomDialogCancel.bind(this); this._handleCustomDialogSubmit = this._handleCustomDialogSubmit.bind(this); @@ -19,6 +22,7 @@ export default class DialogPage extends React.Component { this._handleCustomDialogTouchTap = this._handleCustomDialogTouchTap.bind(this); this._handleStandardDialogTouchTap = this._handleStandardDialogTouchTap.bind(this); this._handleScrollableDialogTouchTap = this._handleScrollableDialogTouchTap.bind(this); + this._handleRequestClose = this._handleRequestClose.bind(this); this._handleToggleChange = this._handleToggleChange.bind(this); } @@ -40,6 +44,12 @@ export default class DialogPage extends React.Component { header: 'optional', desc: 'The ref of the action to focus on when the dialog is displayed.', }, + { + name: 'style', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the dialog\'s root element.', + }, { name: 'bodyStyle', type: 'object', @@ -66,11 +76,23 @@ export default class DialogPage extends React.Component { desc: 'Force the user to use one of the actions in the dialog. Clicking outside the dialog will not dismiss the dialog.', }, { - name: 'openImmediately', + name: 'Deprecated: openImmediately', + type: 'bool', + header: 'default: false', + desc: 'Deprecated: Set to true to have the dialog automatically open on mount.', + }, + { + name: 'defaultOpen', type: 'bool', header: 'default: false', desc: 'Set to true to have the dialog automatically open on mount.', }, + { + name: 'open', + type: 'bool', + header: 'default: null', + desc: 'Controls whether the Dialog is opened or not.', + }, { name: 'title', type: 'node', @@ -96,12 +118,12 @@ export default class DialogPage extends React.Component { name: 'Methods', infoArray: [ { - name: 'dismiss', + name: 'Deprecated: dismiss', header: 'Dialog.dismiss()', desc: 'Hides the dialog.', }, { - name: 'show', + name: 'Deprecated: show', header: 'Dialog.show()', desc: 'Shows the dialog.', }, @@ -116,15 +138,20 @@ export default class DialogPage extends React.Component { name: 'Events', infoArray: [ { - name: 'onDismiss', + name: 'Deprecated: onDismiss', header: 'function()', desc: 'Fired when the dialog is dismissed.', }, { - name: 'onShow', + name: 'Deprecated: onShow', header: 'function()', desc: 'Fired when the dialog is shown.', }, + { + name: 'onRequestClose', + header: 'function(buttonClicked)', + desc: 'Fired when the dialog is requested to be closed by a click outside the dialog or on the buttons.', + }, ], }, ]; @@ -163,6 +190,16 @@ export default class DialogPage extends React.Component { + + + + { + '//Import statement:\nconst Dialog = require(\'material-ui/lib/dialog\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + +

@@ -175,7 +212,8 @@ export default class DialogPage extends React.Component { title="Dialog With Standard Actions" actions={standardActions} actionFocus="submit" - modal={this.state.modal}> + open={this.state.openDialogStandardActions} + onRequestClose={this._handleRequestClose}> The actions in this window are created from the json that's passed in. @@ -183,7 +221,8 @@ export default class DialogPage extends React.Component { ref="customDialog" title="Dialog With Custom Actions" actions={customActions} - modal={this.state.modal}> + open={this.state.openDialogCustomActions} + onRequestClose={this._handleRequestClose}> The actions in this window were passed in as an array of react objects.
@@ -196,9 +235,10 @@ export default class DialogPage extends React.Component { ref="scrollableContentDialog" title="Dialog With Scrollable Content" actions={scrollableCustomActions} - modal={this.state.modal} autoDetectWindowHeight={true} - autoScrollBodyContent={true}> + autoScrollBodyContent={true} + open={this.state.openDialogScrollable} + onRequestClose={this._handleRequestClose}>
Really long content
@@ -214,11 +254,15 @@ export default class DialogPage extends React.Component { } _handleCustomDialogCancel() { - this.refs.customDialog.dismiss(); + this.setState({ + openDialogCustomActions: true, + }); } _handleCustomDialogSubmit() { - this.refs.customDialog.dismiss(); + this.setState({ + openDialogCustomActions: true, + }); } _handleToggleChange(e, toggled) { @@ -226,23 +270,42 @@ export default class DialogPage extends React.Component { } _handleScrollableDialogCancel() { - this.refs.scrollableContentDialog.dismiss(); + this.setState({ + openDialogScrollable: false, + }); } _handleScrollableDialogSubmit() { - this.refs.scrollableContentDialog.dismiss(); + this.setState({ + openDialogScrollable: false, + }); } _handleCustomDialogTouchTap() { - this.refs.customDialog.show(); + this.setState({ + openDialogScrollable: true, + }); } _handleStandardDialogTouchTap() { - this.refs.standardDialog.show(); + this.setState({ + openDialogStandardActions: true, + }); } _handleScrollableDialogTouchTap() { - this.refs.scrollableContentDialog.show(); + this.setState({ + openDialogScrollable: true, + }); + } + + _handleRequestClose(buttonClicked) { + if (!buttonClicked && this.state.modal) return; + this.setState({ + openDialogStandardActions: false, + openDialogCustomActions: false, + openDialogScrollable: false, + }); } } diff --git a/docs/src/app/components/pages/components/drop-down-menu.jsx b/docs/src/app/components/pages/components/drop-down-menu.jsx index c3e2e501605bd4..0bf50932e52eec 100644 --- a/docs/src/app/components/pages/components/drop-down-menu.jsx +++ b/docs/src/app/components/pages/components/drop-down-menu.jsx @@ -1,9 +1,9 @@ -let React = require('react'); -let { DropDownMenu } = require('material-ui'); -let ComponentDoc = require('../../component-doc'); -let Code = require('drop-down-menu-code'); -let CodeExample = require('../../code-example/code-example'); - +const React = require('react'); +const { DropDownMenu, Paper } = require('material-ui'); +const ComponentDoc = require('../../component-doc'); +const Code = require('drop-down-menu-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); export default class DropDownMenuPage extends React.Component { @@ -117,6 +117,16 @@ export default class DropDownMenuPage extends React.Component { + + + + { + '//Import statement:\nconst DropDownMenu = require(\'material-ui/lib/drop-down-menu\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + diff --git a/docs/src/app/components/pages/components/grid-list.jsx b/docs/src/app/components/pages/components/grid-list.jsx index 4c42eb526a753a..fda7e10432f0d4 100644 --- a/docs/src/app/components/pages/components/grid-list.jsx +++ b/docs/src/app/components/pages/components/grid-list.jsx @@ -1,52 +1,19 @@ -let React = require('react'); -let { GridList, GridTile } = require('material-ui'); +const React = require('react'); +const { GridList, GridTile, Paper } = require('material-ui'); -let StarBorder = require('svg-icons/toggle/star-border'); -let IconButton = require('icon-button'); - -let ComponentDoc = require('../../component-doc'); +const StarBorder = require('svg-icons/toggle/star-border'); +const IconButton = require('icon-button'); +const ComponentDoc = require('../../component-doc'); +const Code = require('grid-list-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); class GridListPage extends React.Component { constructor(props) { super(props); - this.code = ` -{/* Basic grid list with mostly default options */} - - { - tilesData.map(tile => by {tile.author}} - actionIcon={} - >) - } - -{/* Grid list with all possible overrides */} - - { - tilesData.map(tile => } - actionPosition="left" - titlePosition="top" - titleBackground={gradientBg} - cols={tile.featured ? 2 : 1} - rows={tile.featured ? 2 : 1} - >) - } - - `; - this.desc =

Simple flex-box based Grid List implementation. Support tiles with arbitrary cell size, @@ -77,6 +44,12 @@ class GridListPage extends React.Component { header: 'optional', desc: 'Number of px for one cell height. Defaults to 180.', }, + { + name: 'style', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the grid list\'s root element.', + }, ], }, { @@ -84,7 +57,7 @@ class GridListPage extends React.Component { infoArray: [ { name: 'title', - type: 'string', + type: 'node', header: 'optional', desc: 'Title to be displayed on tile.', }, @@ -130,6 +103,12 @@ class GridListPage extends React.Component { header: 'optional', desc: 'Height of the tile in number of grid cells. Defaults to 1.', }, + { + name: 'style', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the grid tile\'s root element.', + }, { name: 'rootClass', type: 'string|ReactComponent', @@ -199,7 +178,7 @@ class GridListPage extends React.Component { }, ]; - let gradientBg = 'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 70%,rgba(0,0,0,0) 100%);'; + let gradientBg = 'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 70%,rgba(0,0,0,0) 100%)'; return ( -

- {/* Basic grid list with mostly default options */} - - { - tilesData.map(tile => by {tile.author}} - actionIcon={} - >) - } - - {/* Grid list with all possible overrides */} - - { - tilesData.map(tile => } - actionPosition="left" - titlePosition="top" - titleBackground={gradientBg} - cols={tile.featured ? 2 : 1} - rows={tile.featured ? 2 : 1} - >) - } - -
+ + + + { + '//Import statement:\nconst GridList = require(\'material-ui/lib/grid-list/grid-list\');\n' + + 'const GridTile = require(\'material-ui/lib/grid-list/grid-tile\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + + +
+ {/* Basic grid list with mostly default options */} + + { + tilesData.map(tile => by {tile.author}} + actionIcon={} + >) + } + + {/* Grid list with all possible overrides */} + + { + tilesData.map(tile => } + actionPosition="left" + titlePosition="top" + titleBackground={gradientBg} + cols={tile.featured ? 2 : 1} + rows={tile.featured ? 2 : 1} + >) + } + +
+ ); } diff --git a/docs/src/app/components/pages/components/icon-buttons.jsx b/docs/src/app/components/pages/components/icon-buttons.jsx index 3265b03aba6b1f..6a1c2daee16fbf 100644 --- a/docs/src/app/components/pages/components/icon-buttons.jsx +++ b/docs/src/app/components/pages/components/icon-buttons.jsx @@ -1,11 +1,11 @@ -let React = require('react'); -let { FontIcon, IconButton, NavigationMenu } = require('material-ui'); -let ComponentDoc = require('../../component-doc'); -let ActionGrade = require('svg-icons/action/grade'); -let ActionHome = require('svg-icons/action/home'); -let Code = require('icon-buttons-code'); -let CodeExample = require('../../code-example/code-example'); - +const React = require('react'); +const { FontIcon, IconButton, NavigationMenu, Paper } = require('material-ui'); +const ComponentDoc = require('../../component-doc'); +const ActionGrade = require('svg-icons/action/grade'); +const ActionHome = require('svg-icons/action/home'); +const Code = require('icon-buttons-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); export default class IconButtonsPage extends React.Component { @@ -115,6 +115,16 @@ export default class IconButtonsPage extends React.Component { name="Icon Buttons" desc={desc} componentInfo={componentInfo}> + + + + { + '//Import statement:\nconst IconButton = require(\'material-ui/lib/icon-button\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + diff --git a/docs/src/app/components/pages/components/icon-menus.jsx b/docs/src/app/components/pages/components/icon-menus.jsx index 2225cabcf4533c..c26da0ec406acf 100644 --- a/docs/src/app/components/pages/components/icon-menus.jsx +++ b/docs/src/app/components/pages/components/icon-menus.jsx @@ -1,22 +1,22 @@ -let React = require('react'); -let { IconButton } = require('material-ui'); -let IconMenu = require('menus/icon-menu'); -let MenuItem = require('menus/menu-item'); -let MenuDivider = require('menus/menu-divider'); -let MoreVertIcon = require('svg-icons/navigation/more-vert'); -let ComponentDoc = require('../../component-doc'); - -let ContentCopy = require('svg-icons/content/content-copy'); -let ContentFilter = require('svg-icons/content/filter-list'); -let ContentLink = require('svg-icons/content/link'); -let Delete = require('svg-icons/action/delete'); -let Download = require('svg-icons/file/file-download'); -let MapsPlace = require('svg-icons/maps/place'); -let PersonAdd = require('svg-icons/social/person-add'); -let RemoveRedEye = require('svg-icons/image/remove-red-eye'); -let Code = require('icon-menus-code'); -let CodeExample = require('../../code-example/code-example'); - +const React = require('react'); +const { IconButton, Paper } = require('material-ui'); +const IconMenu = require('menus/icon-menu'); +const MenuItem = require('menus/menu-item'); +const MenuDivider = require('menus/menu-divider'); +const MoreVertIcon = require('svg-icons/navigation/more-vert'); +const ComponentDoc = require('../../component-doc'); + +const ContentCopy = require('svg-icons/content/content-copy'); +const ContentFilter = require('svg-icons/content/filter-list'); +const ContentLink = require('svg-icons/content/link'); +const Delete = require('svg-icons/action/delete'); +const Download = require('svg-icons/file/file-download'); +const MapsPlace = require('svg-icons/maps/place'); +const PersonAdd = require('svg-icons/social/person-add'); +const RemoveRedEye = require('svg-icons/image/remove-red-eye'); +const Code = require('icon-menus-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); export default class IconMenus extends React.Component { @@ -56,6 +56,12 @@ export default class IconMenus extends React.Component { header: 'default: false', desc: 'Indicates if the menu should render with compact desktop styles.', }, + { + name: 'style', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the icon menu\'s root element.', + }, { name: 'iconStyle', type: 'object', @@ -146,6 +152,17 @@ export default class IconMenus extends React.Component { name="Icon Menus" desc={desc} componentInfo={componentInfo}> + + + + { + '//Import statement:\nconst IconMenu = require(\'material-ui/lib/menus/icon-menu\');\n' + + 'const MenuItem = require(\'material-ui/lib/menus/menu-item\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + +
diff --git a/docs/src/app/components/pages/components/icons.jsx b/docs/src/app/components/pages/components/icons.jsx index 9a467e095d28c3..833fb0f6add53d 100644 --- a/docs/src/app/components/pages/components/icons.jsx +++ b/docs/src/app/components/pages/components/icons.jsx @@ -1,13 +1,13 @@ -let React = require('react'); -let { ClearFix, FontIcon, Styles, Paper } = require('material-ui'); -let CodeBlock = require('../../code-example/code-block'); -let ComponentDoc = require('../../component-doc'); -let ActionHome = require('svg-icons/action/home'); +const React = require('react'); +const { ClearFix, FontIcon, Styles, Paper } = require('material-ui'); +const CodeBlock = require('../../code-example/code-block'); +const ComponentDoc = require('../../component-doc'); +const ActionHome = require('svg-icons/action/home'); -let { Colors, Typography } = Styles; -let IconButtonCode = require('icons-code'); -let SvgIconsCode = require('svg-icons-code'); -let CodeExample = require('../../code-example/code-example'); +const { Colors, Typography } = Styles; +const IconButtonCode = require('icons-code'); +const SvgIconsCode = require('svg-icons-code'); +const CodeExample = require('../../code-example/code-example'); export default class FontIconPage extends React.Component { @@ -38,7 +38,7 @@ export default class FontIconPage extends React.Component { and reference the icon's className in the "className" prop.

We also support Google's - Material Icons as seen in the third block of code. If you're using the material icons, be sure to include the link to the font icon file in your head section: + Material Icons as seen in the third block of code. If you're using the material icons, be sure to include the link to the font icon file in your head section: {''} @@ -75,6 +75,12 @@ export default class FontIconPage extends React.Component { header: 'optional', desc: 'This is the icon color when the mouse hovers over the icon.', }, + { + name: 'style', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the font icon\'s root element.', + }, ], }, { @@ -93,6 +99,12 @@ export default class FontIconPage extends React.Component { header: 'optional', desc: 'This is the icon color when the mouse hovers over the icon.', }, + { + name: 'style', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the svg icon\'s root element.', + }, ], }, ]; @@ -107,6 +119,16 @@ export default class FontIconPage extends React.Component { name="Font Icons" desc={fontIconDesc} componentInfo={componentInfo.slice(0, 1)}> + + + + { + '//Import statement:\nconst FontIcon = require(\'material-ui/lib/font-icon\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + diff --git a/docs/src/app/components/pages/components/left-nav.jsx b/docs/src/app/components/pages/components/left-nav.jsx index a1052f9d8a8077..b6497f1db515c1 100644 --- a/docs/src/app/components/pages/components/left-nav.jsx +++ b/docs/src/app/components/pages/components/left-nav.jsx @@ -1,9 +1,9 @@ -let React = require('react'); -let { LeftNav, MenuItem, RaisedButton } = require('material-ui'); -let ComponentDoc = require('../../component-doc'); -let Code = require('left-nav-code'); -let CodeExample = require('../../code-example/code-example'); - +const React = require('react'); +const { LeftNav, MenuItem, RaisedButton, Paper } = require('material-ui'); +const ComponentDoc = require('../../component-doc'); +const Code = require('left-nav-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); export default class LeftNavPage extends React.Component { @@ -141,6 +141,16 @@ export default class LeftNavPage extends React.Component { + + + + { + '//Import statement:\nconst LeftNav = require(\'material-ui/lib/left-nav\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + +
diff --git a/docs/src/app/components/pages/components/lists.jsx b/docs/src/app/components/pages/components/lists.jsx index 9a787da1673e84..119fee1dba9ec8 100644 --- a/docs/src/app/components/pages/components/lists.jsx +++ b/docs/src/app/components/pages/components/lists.jsx @@ -1,21 +1,21 @@ -let React = require('react'); -let mui = require('material-ui'); -let ComponentDoc = require('../../component-doc'); -let MobileTearSheet = require('../../mobile-tear-sheet'); -let ActionAssignment = require('svg-icons/action/assignment'); -let ActionGrade = require('svg-icons/action/grade'); -let ActionInfo = require('svg-icons/action/info'); -let CommunicationCall = require('svg-icons/communication/call'); -let CommunicationChatBubble = require('svg-icons/communication/chat-bubble'); -let CommunicationEmail = require('svg-icons/communication/email'); -let ContentDrafts = require('svg-icons/content/drafts'); -let ContentInbox = require('svg-icons/content/inbox'); -let ContentSend = require('svg-icons/content/send'); -let EditorInsertChart = require('svg-icons/editor/insert-chart'); -let FileFolder = require('svg-icons/file/folder'); -let MoreVertIcon = require('svg-icons/navigation/more-vert'); +const React = require('react'); +const mui = require('material-ui'); +const ComponentDoc = require('../../component-doc'); +const MobileTearSheet = require('../../mobile-tear-sheet'); +const ActionAssignment = require('svg-icons/action/assignment'); +const ActionGrade = require('svg-icons/action/grade'); +const ActionInfo = require('svg-icons/action/info'); +const CommunicationCall = require('svg-icons/communication/call'); +const CommunicationChatBubble = require('svg-icons/communication/chat-bubble'); +const CommunicationEmail = require('svg-icons/communication/email'); +const ContentDrafts = require('svg-icons/content/drafts'); +const ContentInbox = require('svg-icons/content/inbox'); +const ContentSend = require('svg-icons/content/send'); +const EditorInsertChart = require('svg-icons/editor/insert-chart'); +const FileFolder = require('svg-icons/file/folder'); +const MoreVertIcon = require('svg-icons/navigation/more-vert'); -let { +const { Avatar, Checkbox, IconButton, @@ -24,16 +24,16 @@ let { ListItem, Styles, Toggle, + Paper, } = mui; -let IconMenu = require('menus/icon-menu'); -let MenuItem = require('menus/menu-item'); - -let { Colors } = Styles; -let Code = require('lists-code'); -let CodeExample = require('../../code-example/code-example'); - +const IconMenu = require('menus/icon-menu'); +const MenuItem = require('menus/menu-item'); +const { Colors } = Styles; +const Code = require('lists-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); export default class ListsPage extends React.Component { @@ -53,9 +53,15 @@ export default class ListsPage extends React.Component { header: 'default: false', desc: 'If true, the subheader will be indented by 72px.', }, + { + name: 'style', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the list\'s root element.', + }, { name: 'subheader', - type: 'string', + type: 'node', header: 'optional', desc: 'The subheader string that will be displayed at the top of the list.', }, @@ -170,6 +176,12 @@ export default class ListsPage extends React.Component { header: 'default: 1', desc: 'Can be 1 or 2. This is the number of secondary text lines before ellipsis will show.', }, + { + name: 'style', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the list item\'s root element.', + }, ], }, { @@ -236,6 +248,18 @@ export default class ListsPage extends React.Component { + + + + { + '//Import statement:\nconst List = require(\'material-ui/lib/lists/list\');\n' + + 'const ListDivider = require(\'material-ui/lib/lists/list-divider\');\n' + + 'const ListItem = require(\'material-ui/lib/lists/list-item\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + diff --git a/docs/src/app/components/pages/components/menus.jsx b/docs/src/app/components/pages/components/menus.jsx index d8c51fec34f838..b48e3b5c88358b 100644 --- a/docs/src/app/components/pages/components/menus.jsx +++ b/docs/src/app/components/pages/components/menus.jsx @@ -1,20 +1,21 @@ -let React = require('react'); +const React = require('react'); const ReactTransitionGroup = require('react-addons-transition-group'); -let Menu = require('menus/menu'); -let MenuItem = require('menus/menu-item'); -let MenuDivider = require('menus/menu-divider'); -let ComponentDoc = require('../../component-doc'); - -let ArrowDropRight = require('svg-icons/navigation-arrow-drop-right'); -let ContentCopy = require('svg-icons/content/content-copy'); -let ContentLink = require('svg-icons/content/link'); -let Delete = require('svg-icons/action/delete'); -let Download = require('svg-icons/file/file-download'); -let PersonAdd = require('svg-icons/social/person-add'); -let RemoveRedEye = require('svg-icons/image/remove-red-eye'); -let Code = require('menus-code'); -let CodeExample = require('../../code-example/code-example'); +const Paper = require('paper'); +const Menu = require('menus/menu'); +const MenuItem = require('menus/menu-item'); +const MenuDivider = require('menus/menu-divider'); +const ComponentDoc = require('../../component-doc'); +const ArrowDropRight = require('svg-icons/navigation-arrow-drop-right'); +const ContentCopy = require('svg-icons/content/content-copy'); +const ContentLink = require('svg-icons/content/link'); +const Delete = require('svg-icons/action/delete'); +const Download = require('svg-icons/file/file-download'); +const PersonAdd = require('svg-icons/social/person-add'); +const RemoveRedEye = require('svg-icons/image/remove-red-eye'); +const Code = require('menus-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); export default class MenusPage extends React.Component { @@ -46,6 +47,12 @@ export default class MenusPage extends React.Component { header: 'default: false', desc: 'Indicates if the menu should render with compact desktop styles.', }, + { + name: 'style', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the menu\'s root element.', + }, { name: 'listStyle', type: 'object', @@ -114,6 +121,12 @@ export default class MenusPage extends React.Component { header: 'default: false', desc: 'Disables a menu item.', }, + { + name: 'style', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the menu item\'s root element.', + }, { name: 'innerDivStyle', type: 'object', @@ -203,6 +216,18 @@ export default class MenusPage extends React.Component { name="Menus" desc={desc} componentInfo={componentInfo}> + + + + { + '//Import statement:\nconst Menu = require(\'material-ui/lib/menus/menu\');\n' + + 'const MenuItem = require(\'material-ui/lib/menus/menu-item\');\n' + + 'const MenuDivider = require(\'material-ui/lib/menus/menu-divider\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + diff --git a/docs/src/app/components/pages/components/paper.jsx b/docs/src/app/components/pages/components/paper.jsx index 00ea47d4b61f0e..ea3d0f6087ea0e 100644 --- a/docs/src/app/components/pages/components/paper.jsx +++ b/docs/src/app/components/pages/components/paper.jsx @@ -1,13 +1,13 @@ -let React = require('react'); -let { ClearFix, Mixins, Paper } = require('material-ui'); -let ComponentDoc = require('../../component-doc'); +const React = require('react'); +const { ClearFix, Mixins, Paper } = require('material-ui'); +const ComponentDoc = require('../../component-doc'); -let { StyleResizable } = Mixins; -let Code = require('paper-code'); -let CodeExample = require('../../code-example/code-example'); +const { StyleResizable } = Mixins; +const Code = require('paper-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); - -let PaperPage = React.createClass ({ +const PaperPage = React.createClass ({ mixins: [StyleResizable], @@ -84,6 +84,16 @@ let PaperPage = React.createClass ({ + + + + { + '//Import statement:\nconst Paper = require(\'material-ui/lib/paper\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + +
diff --git a/docs/src/app/components/pages/components/progress.jsx b/docs/src/app/components/pages/components/progress.jsx index 92ea197e8c3e64..aed803bfab6119 100644 --- a/docs/src/app/components/pages/components/progress.jsx +++ b/docs/src/app/components/pages/components/progress.jsx @@ -1,11 +1,11 @@ -let React = require('react'); -let { CircularProgress, LinearProgress } = require('material-ui'); -let ComponentDoc = require('../../component-doc'); -let Code = require('progress-code'); -let CodeExample = require('../../code-example/code-example'); +const React = require('react'); +const { CircularProgress, LinearProgress, Paper } = require('material-ui'); +const ComponentDoc = require('../../component-doc'); +const Code = require('progress-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); - -let ProgressPage = React.createClass({ +const ProgressPage = React.createClass({ getInitialState () { return { @@ -66,6 +66,12 @@ let ProgressPage = React.createClass({ header: 'default: 1', desc: 'The size of the progress.', }, + { + name: 'style', + type: 'object', + header: 'optional', + desc: 'Override the inline-styles of the progress\'s root element.', + }, ], }, ]; @@ -75,6 +81,17 @@ let ProgressPage = React.createClass({ + + + + { + '//Import statement:\nconst CircularProgress = require(\'material-ui/lib/circular-progress\');\n' + + 'const LinearProgress = require(\'material-ui/lib/linear-progress\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + +

Linear Progress

diff --git a/docs/src/app/components/pages/components/refresh-indicator.jsx b/docs/src/app/components/pages/components/refresh-indicator.jsx index 6c71795d89cc88..b66cd4ae810443 100644 --- a/docs/src/app/components/pages/components/refresh-indicator.jsx +++ b/docs/src/app/components/pages/components/refresh-indicator.jsx @@ -1,9 +1,9 @@ -let React = require('react'); -let { RefreshIndicator } = require('material-ui'); -let ComponentDoc = require('../../component-doc'); -let Code = require('refresh-indicator-code'); -let CodeExample = require('../../code-example/code-example'); - +const React = require('react'); +const { RefreshIndicator, Paper } = require('material-ui'); +const ComponentDoc = require('../../component-doc'); +const Code = require('refresh-indicator-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); let RefreshIndicatorPage = React.createClass({ @@ -58,6 +58,16 @@ let RefreshIndicatorPage = React.createClass({ + + + + { + '//Import statement:\nconst RefreshIndicator = require(\'material-ui/lib/refresh-indicator\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + +

diff --git a/docs/src/app/components/pages/components/sliders.jsx b/docs/src/app/components/pages/components/sliders.jsx index 1989c614f269d9..681bb76ef3073c 100644 --- a/docs/src/app/components/pages/components/sliders.jsx +++ b/docs/src/app/components/pages/components/sliders.jsx @@ -1,9 +1,9 @@ -let React = require('react'); -let { Slider } = require('material-ui'); -let ComponentDoc = require('../../component-doc'); -let Code = require('sliders-code'); -let CodeExample = require('../../code-example/code-example'); - +const React = require('react'); +const { Paper, Slider } = require('material-ui'); +const ComponentDoc = require('../../component-doc'); +const Code = require('sliders-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); export default class SlidersPage extends React.Component { @@ -129,6 +129,16 @@ export default class SlidersPage extends React.Component { + + + + { + '//Import statement:\nconst Slider = require(\'material-ui/lib/slider\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + diff --git a/docs/src/app/components/pages/components/snackbar.jsx b/docs/src/app/components/pages/components/snackbar.jsx index ece71d615ce48d..b6684f7d67fef7 100644 --- a/docs/src/app/components/pages/components/snackbar.jsx +++ b/docs/src/app/components/pages/components/snackbar.jsx @@ -1,9 +1,9 @@ -let React = require('react'); -let { RaisedButton, Snackbar, TextField } = require('material-ui'); -let ComponentDoc = require('../../component-doc'); -let Code = require('snackbars-code'); -let CodeExample = require('../../code-example/code-example'); - +const React = require('react'); +const { RaisedButton, Snackbar, TextField, Paper } = require('material-ui'); +const ComponentDoc = require('../../component-doc'); +const Code = require('snackbars-code'); +const CodeExample = require('../../code-example/code-example'); +const CodeBlock = require('../../code-example/code-block'); export default class SnackbarPage extends React.Component { @@ -98,6 +98,16 @@ export default class SnackbarPage extends React.Component { + + + + { + '//Import statement:\nconst Snackbar = require(\'material-ui/lib/snackbar\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + +

Switches

+ + + + { + '//Import statements:\nconst Checkbox = require(\'material-ui/lib/checkbox\');\n' + + 'const RadioButton = require(\'material-ui/lib/radio-button\');\n' + + 'const RadioButtonGroup = require(\'material-ui/lib/radio-button-group\');\n' + + 'const Toggle = require(\'material-ui/lib/toggle\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + + + + + { + '//Import statements:\nconst Table = require(\'material-ui/lib/table/table\');\n' + + 'const TableBody = require(\'material-ui/lib/table/table-body\');\n' + + 'const TableFooter = require(\'material-ui/lib/table/table-footer\');\n' + + 'const TableHeader = require(\'material-ui/lib/table/table-header\');\n' + + 'const TableHeaderColumn = require(\'material-ui/lib/table/table-header-column\');\n' + + 'const TableRow = require(\'material-ui/lib/table/table-row\');\n' + + 'const TableRowColumn = require(\'material-ui/lib/table/table-row-column\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + +
+ + + + { + '//Import statement:\nconst Tabs = require(\'material-ui/lib/tabs/tabs\');\n' + + 'const Tab = require(\'material-ui/lib/tabs/tab\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + @@ -227,11 +245,41 @@ export default class TabsPage extends React.Component { +
+ + + + + + +
+

Tabs with slide effect

+ Swipe to see the next slide.
+
+
+ slide n°2 +
+
+ slide n°3 +
+ ); } + _handleChangeIndex(index) { + this.setState({ + slideIndex: index, + }); + } + + _handleChangeTabs(value) { + this.setState({ + slideIndex: parseInt(value, 10), + }); + } + _handleButtonClick() { this.setState({tabsValue: 'c'}); } diff --git a/docs/src/app/components/pages/components/text-fields.jsx b/docs/src/app/components/pages/components/text-fields.jsx index 8924913fe46898..69a07a81a1ca0d 100644 --- a/docs/src/app/components/pages/components/text-fields.jsx +++ b/docs/src/app/components/pages/components/text-fields.jsx @@ -1,13 +1,14 @@ -let React = require('react'); -let { ClearFix, Mixins, SelectField, TextField, Styles } = require('material-ui'); -let ComponentDoc = require('../../component-doc'); -let { Colors } = Styles; -let { StyleResizable } = Mixins; -let Code = require('text-fields-code'); -let CodeExample = require('../../code-example/code-example'); +const React = require('react'); +const { ClearFix, Mixins, SelectField, TextField, Styles, Paper } = require('material-ui'); +const ComponentDoc = require('../../component-doc'); +const { Colors } = Styles; +const { StyleResizable } = Mixins; +const Code = require('text-fields-code'); +const CodeExample = require('../../code-example/code-example'); const LinkedStateMixin = require('react-addons-linked-state-mixin'); +const CodeBlock = require('../../code-example/code-block'); -let TextFieldsPage = React.createClass({ +const TextFieldsPage = React.createClass({ mixins: [StyleResizable, LinkedStateMixin], @@ -56,6 +57,12 @@ let TextFieldsPage = React.createClass({ { name: 'Props', infoArray: [ + { + name: 'defaultValue', + type: 'string', + header: 'optional', + desc: 'The text string to use for the default value.', + }, { name: 'errorStyle', type: 'object', @@ -68,6 +75,12 @@ let TextFieldsPage = React.createClass({ header: 'optional', desc: 'The error text string to display.', }, + { + name: 'floatingLabelStyle', + type: 'object', + header: 'optional', + desc: 'The style object to use to override floating label styles.', + }, { name: 'floatingLabelText', type: 'string', @@ -235,6 +248,17 @@ let TextFieldsPage = React.createClass({ name="Text Field" desc={desc} componentInfo={componentInfo}> + + + + { + '//Import statement:\nconst TextField = require(\'material-ui/lib/text-field\');\n' + + 'const SelectField = require(\'material-ui/lib/select-field\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + +
@@ -242,7 +266,7 @@ let TextFieldsPage = React.createClass({ style={styles.textfield} hintText="Hint Text" />

+ + + + { + '//Import statement:\nconst TimePicker = require(\'material-ui/lib/time-picker\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + + + + + { + '//Import statement:\nconst Toolbar = require(\'material-ui/lib/toolbar/toolbar\');\n' + + 'const ToolbarGroup = require(\'material-ui/lib/toolbar/toolbar-group\');\n' + + 'const ToolbarSeparator = require(\'material-ui/lib/toolbar/toolbar-separator\');\n' + + 'const ToolbarTitle = require(\'material-ui/lib/toolbar/toolbar-title\');\n\n' + + '//See material-ui/lib/index.js for more\n' + } + + + diff --git a/docs/src/app/components/raw-code/badge-code.txt b/docs/src/app/components/raw-code/badge-code.txt new file mode 100644 index 00000000000000..b81afb780a8e95 --- /dev/null +++ b/docs/src/app/components/raw-code/badge-code.txt @@ -0,0 +1,19 @@ + + + + +//override badgeStyle to account for padding of child element + + + + + + +}> + + + + +

Company Name

+ \ No newline at end of file diff --git a/docs/src/app/components/raw-code/dialog-code.txt b/docs/src/app/components/raw-code/dialog-code.txt index ee89651d477e41..37f58cb4d881b9 100644 --- a/docs/src/app/components/raw-code/dialog-code.txt +++ b/docs/src/app/components/raw-code/dialog-code.txt @@ -8,7 +8,8 @@ let standardActions = [ title="Dialog With Standard Actions" actions={standardActions} actionFocus="submit" - modal={this.state.modal}> + open={this.state.showDialogStandardActions} + onRequestClose={this._handleRequestClose}> The actions in this window are created from the json that's passed in. @@ -27,11 +28,19 @@ let customActions = [ + open={this.state.showDialogCustomActions} + onRequestClose={this._handleRequestClose}> The actions in this window were passed in as an array of react objects. - -
Really long content
- + +
+ Really long content +
+ \ No newline at end of file diff --git a/docs/src/app/components/raw-code/flat-button-code.txt b/docs/src/app/components/raw-code/flat-button-code.txt index 4a22cf57b6502f..3bc6aa4d4b760c 100644 --- a/docs/src/app/components/raw-code/flat-button-code.txt +++ b/docs/src/app/components/raw-code/flat-button-code.txt @@ -1,15 +1,19 @@ -//Flat Buttons + + -
- - - -
-
- - - -
+ + + + + + + + + + + + + diff --git a/docs/src/app/components/raw-code/grid-list-code.txt b/docs/src/app/components/raw-code/grid-list-code.txt new file mode 100644 index 00000000000000..0fa7b71d181d1f --- /dev/null +++ b/docs/src/app/components/raw-code/grid-list-code.txt @@ -0,0 +1,32 @@ +{/* Basic grid list with mostly default options */} + + { + tilesData.map(tile => by {tile.author}} + actionIcon={} + >) + } + +{/* Grid list with all possible overrides */} + + { + tilesData.map(tile => } + actionPosition="left" + titlePosition="top" + titleBackground={gradientBg} + cols={tile.featured ? 2 : 1} + rows={tile.featured ? 2 : 1} + >) + } + diff --git a/docs/src/app/components/raw-code/raised-button-code.txt b/docs/src/app/components/raw-code/raised-button-code.txt index aa2b5361fccd20..93eb6c4509650b 100644 --- a/docs/src/app/components/raw-code/raised-button-code.txt +++ b/docs/src/app/components/raw-code/raised-button-code.txt @@ -1,16 +1,19 @@ -//Raised Buttons + + -
- - - -
-
- - - -
- + + + + + + + + + + + + + diff --git a/docs/src/app/components/raw-code/tabs-code.txt b/docs/src/app/components/raw-code/tabs-code.txt index 0a1ea791286b66..76543ed0ff5b1a 100644 --- a/docs/src/app/components/raw-code/tabs-code.txt +++ b/docs/src/app/components/raw-code/tabs-code.txt @@ -28,3 +28,22 @@ (Tab content...) + +// Tabs with slide effect + + + + + + +
+

Tabs with slide effect

+ Swipe to see the next slide.
+
+
+ slide n°2 +
+
+ slide n°3 +
+ diff --git a/docs/src/app/components/raw-code/text-fields-code.txt b/docs/src/app/components/raw-code/text-fields-code.txt index d934fa3d8c8e40..294f1a77e6a57f 100644 --- a/docs/src/app/components/raw-code/text-fields-code.txt +++ b/docs/src/app/components/raw-code/text-fields-code.txt @@ -2,7 +2,6 @@ + {this.props.children} + + {this.props.badgeContent} + +
+ ); + }, +}); diff --git a/src/card/card-actions.jsx b/src/card/card-actions.jsx index 02be4876104fba..1f5068286cb56e 100644 --- a/src/card/card-actions.jsx +++ b/src/card/card-actions.jsx @@ -48,6 +48,7 @@ const CardActions = React.createClass({ expandable: React.PropTypes.bool, actAsExpander: React.PropTypes.bool, showExpandableButton: React.PropTypes.bool, + style: React.PropTypes.object, }, render() { diff --git a/src/card/card-expandable.jsx b/src/card/card-expandable.jsx index 076757d3860336..b55f5fe7b9a2ba 100644 --- a/src/card/card-expandable.jsx +++ b/src/card/card-expandable.jsx @@ -40,6 +40,7 @@ const CardExpandable = React.createClass({ propTypes: { onExpanding: React.PropTypes.func.isRequired, expanded: React.PropTypes.bool, + style: React.PropTypes.object, }, //for passing default theme context to children diff --git a/src/card/card-header.jsx b/src/card/card-header.jsx index 3035976f3847b1..8db6a8eb691d4f 100644 --- a/src/card/card-header.jsx +++ b/src/card/card-header.jsx @@ -42,6 +42,7 @@ const CardHeader = React.createClass({ title: React.PropTypes.node, titleColor: React.PropTypes.string, titleStyle: React.PropTypes.object, + style: React.PropTypes.object, subtitle: React.PropTypes.node, subtitleColor: React.PropTypes.string, subtitleStyle: React.PropTypes.object, diff --git a/src/card/card-title.jsx b/src/card/card-title.jsx index b4347a5a4725dc..a41b0c54be232a 100644 --- a/src/card/card-title.jsx +++ b/src/card/card-title.jsx @@ -38,10 +38,11 @@ const CardTitle = React.createClass({ }, propTypes: { - title: React.PropTypes.string, + title: React.PropTypes.node, titleColor: React.PropTypes.string, titleStyle: React.PropTypes.object, - subtitle: React.PropTypes.string, + style: React.PropTypes.object, + subtitle: React.PropTypes.node, subtitleColor: React.PropTypes.string, subtitleStyle: React.PropTypes.object, expandable: React.PropTypes.bool, diff --git a/src/circular-progress.jsx b/src/circular-progress.jsx index b7902350a04a37..db6b01b50be3b1 100644 --- a/src/circular-progress.jsx +++ b/src/circular-progress.jsx @@ -17,6 +17,7 @@ const CircularProgress = React.createClass({ max: React.PropTypes.number, size: React.PropTypes.number, color: React.PropTypes.string, + style: React.PropTypes.object, innerStyle: React.PropTypes.object, }, @@ -99,26 +100,24 @@ const CircularProgress = React.createClass({ if (!this.isMounted()) return; if (this.props.mode !== "indeterminate") return; - AutoPrefix.set(wrapper.style, "transform", null); - AutoPrefix.set(wrapper.style, "transform", "rotate(0deg)"); - wrapper.style.transitionDuration = "0ms"; + AutoPrefix.set(wrapper.style, 'transform', 'rotate(0deg)'); + AutoPrefix.set(wrapper.style, 'transitionDuration', '0ms'); setTimeout(() => { - AutoPrefix.set(wrapper.style, "transform", "rotate(1800deg)"); - wrapper.style.transitionDuration = "10s"; - //wrapper.style.webkitTransitionTimingFunction = "linear"; - AutoPrefix.set(wrapper.style, "transitionTimingFunction", "linear"); + AutoPrefix.set(wrapper.style, 'transform', 'rotate(1800deg)'); + AutoPrefix.set(wrapper.style, 'transitionDuration', '10s'); + AutoPrefix.set(wrapper.style, 'transitionTimingFunction', 'linear'); }, 50); }, getDefaultProps() { - return { - mode: "indeterminate", - value: 0, - min: 0, - max: 100, - size: 1, - }; + return { + mode: "indeterminate", + value: 0, + min: 0, + max: 100, + size: 1, + }; }, getTheme() { diff --git a/src/clearfix.jsx b/src/clearfix.jsx index d2dbc6816bd7ee..3103d587272704 100644 --- a/src/clearfix.jsx +++ b/src/clearfix.jsx @@ -12,6 +12,10 @@ const ClearFix = React.createClass({ muiTheme: React.PropTypes.object, }, + propTypes: { + style: React.PropTypes.object, + }, + //for passing default theme context to children childContextTypes: { muiTheme: React.PropTypes.object, diff --git a/src/date-picker/date-display.jsx b/src/date-picker/date-display.jsx index 275450ba977599..17d903773e36bf 100644 --- a/src/date-picker/date-display.jsx +++ b/src/date-picker/date-display.jsx @@ -19,6 +19,7 @@ const DateDisplay = React.createClass({ disableYearSelection: React.PropTypes.bool, monthDaySelected: React.PropTypes.bool, selectedDate: React.PropTypes.object.isRequired, + style: React.PropTypes.object, weekCount: React.PropTypes.number, }, diff --git a/src/date-picker/date-picker-dialog.jsx b/src/date-picker/date-picker-dialog.jsx index d18bb981130b3d..a5b6f8024c25d6 100644 --- a/src/date-picker/date-picker-dialog.jsx +++ b/src/date-picker/date-picker-dialog.jsx @@ -52,6 +52,7 @@ const DatePickerDialog = React.createClass({ onClickAway: React.PropTypes.func, onDismiss: React.PropTypes.func, onShow: React.PropTypes.func, + style: React.PropTypes.object, shouldDisableDate: React.PropTypes.func, showYearSelector: React.PropTypes.bool, }, @@ -168,7 +169,7 @@ const DatePickerDialog = React.createClass({ onClickAway={this._handleDialogClickAway} repositionOnUpdate={false} open={this.state.open} - > + onRequestClose={this.dismiss}> {title} -
{this.props.children}
- {actions} } @@ -265,22 +286,21 @@ let Dialog = React.createClass({ return this.state.open; }, - dismiss() { - CssEvent.onTransitionEnd(ReactDOM.findDOMNode(this), () => { - this.refs.dialogOverlay.allowScrolling(); - }); + _testDeprecations() { + warning(!this.props.hasOwnProperty('openImmediately'), + 'openImmediately has been deprecated in favor of defaultOpen'); - this.setState({ open: false }); - this._onDismiss(); - }, + warning(!this.props.hasOwnProperty('onShow'), + 'onShow will be removed in favor of explicitly setting open'); - show() { - this.refs.dialogOverlay.preventScrolling(); - this.setState({ open: true }, this._onShow); + warning(!this.props.hasOwnProperty('onDismiss'), + 'onDismiss will be removed in favor of explicitly setting open and can be replaced by onRequestClose'); + + warning(!this.props.hasOwnProperty('modal'), + 'modal will be removed in favor of explicitly setting open and onRequestClose'); }, _getAction(actionJSON, key) { - let styles = {marginRight: 8}; let props = { key: key, secondary: true, @@ -290,12 +310,15 @@ let Dialog = React.createClass({ actionJSON.onTouchTap.call(undefined); } if (!(actionJSON.onClick || actionJSON.onTouchTap)) { - this.dismiss(); + this._requestClose(true); } }, label: actionJSON.text, - style: styles, + style: { + marginRight: 8, + }, }; + if (actionJSON.ref) { props.ref = actionJSON.ref; props.keyboardFocused = actionJSON.ref === this.props.actionFocus; @@ -305,15 +328,14 @@ let Dialog = React.createClass({ } return ( - + ); }, _getActionsContainer(actions) { let actionContainer; let actionObjects = []; - let actionStyle = { + const actionStyle = { boxSizing: 'border-box', WebkitTapHighlightColor: 'rgba(0,0,0,0)', padding: 8, @@ -379,27 +401,71 @@ let Dialog = React.createClass({ } }, + show() { + warning(false, 'show has been deprecated in favor of explicitly setting the open property.'); + + this._show(); + }, + _onShow() { - if (this.props.onShow) this.props.onShow(); + if (this.props.onShow) { + this.props.onShow(); + } + }, + + _show() { + this.refs.dialogOverlay.preventScrolling(); + this.setState({ + open: true, + }, this._onShow); + }, + + dismiss() { + warning(false, 'dismiss has been deprecated in favor of explicitly setting the open property.'); + + this._dismiss(); }, _onDismiss() { - if (this.props.onDismiss) this.props.onDismiss(); + if (this.props.onDismiss) { + this.props.onDismiss(); + } }, - _handleOverlayTouchTap(e) { - if (this.props.modal) { - e.stopPropagation(); + _dismiss() { + CssEvent.onTransitionEnd(ReactDOM.findDOMNode(this), () => { + this.refs.dialogOverlay.allowScrolling(); + }); + + this.setState({ + open: false, + }, this._onDismiss); + }, + + _requestClose(buttonClicked) { + warning(!this.props.hasOwnProperty('modal'), + 'modal will be removed in favor of explicitly setting open and onRequestClose'); + + if (!buttonClicked && this.props.modal) { + return; + } + + // Close the dialog if the open state is not explicitly set. + if (this.props.open === null) { + this._dismiss(); } - else { - this.dismiss(); - if (this.props.onClickAway) this.props.onClickAway(); + if (this.props.onRequestClose) { + this.props.onRequestClose(!!buttonClicked); } }, - _handleWindowKeyUp(e) { - if (e.keyCode === KeyCode.ESC && !this.props.modal) { - this.dismiss(); + _handleOverlayTouchTap() { + this._requestClose(false); + }, + + _handleWindowKeyUp(event) { + if (event.keyCode === KeyCode.ESC) { + this._requestClose(false); } }, diff --git a/src/drop-down-icon.jsx b/src/drop-down-icon.jsx index a420c9542e6e27..7434342771c367 100644 --- a/src/drop-down-icon.jsx +++ b/src/drop-down-icon.jsx @@ -34,6 +34,7 @@ const DropDownIcon = React.createClass({ iconStyle: React.PropTypes.object, iconClassName: React.PropTypes.string, iconLigature: React.PropTypes.string, + style: React.PropTypes.object, }, getInitialState() { diff --git a/src/drop-down-menu.jsx b/src/drop-down-menu.jsx index 610b02a2fe2d94..0f0e8426b4977d 100644 --- a/src/drop-down-menu.jsx +++ b/src/drop-down-menu.jsx @@ -47,6 +47,7 @@ const DropDownMenu = React.createClass({ labelStyle:React.PropTypes.object, selectedIndex: React.PropTypes.number, openImmediately: React.PropTypes.bool, + style: React.PropTypes.object, }, getDefaultProps() { diff --git a/src/enhanced-button.jsx b/src/enhanced-button.jsx index 72da4cf8be1d87..23d4115a6f1b0a 100644 --- a/src/enhanced-button.jsx +++ b/src/enhanced-button.jsx @@ -82,6 +82,7 @@ const EnhancedButton = React.createClass({ onKeyUp: React.PropTypes.func, onTouchTap: React.PropTypes.func, tabIndex: React.PropTypes.number, + style: React.PropTypes.object, }, getDefaultProps() { diff --git a/src/enhanced-switch.jsx b/src/enhanced-switch.jsx index 4e9ae5f05d0a4a..d32fe02486cae2 100644 --- a/src/enhanced-switch.jsx +++ b/src/enhanced-switch.jsx @@ -45,7 +45,7 @@ const EnhancedSwitch = React.createClass({ labelStyle: React.PropTypes.object, name: React.PropTypes.string, value: React.PropTypes.string, - label: React.PropTypes.string, + label: React.PropTypes.node, onSwitch: React.PropTypes.func, required: React.PropTypes.bool, disabled: React.PropTypes.bool, @@ -53,6 +53,7 @@ const EnhancedSwitch = React.createClass({ labelPosition: React.PropTypes.oneOf(['left', 'right']), disableFocusRipple: React.PropTypes.bool, disableTouchRipple: React.PropTypes.bool, + style: React.PropTypes.object, }, windowListeners: { diff --git a/src/enhanced-textarea.jsx b/src/enhanced-textarea.jsx index 90e60a430fec9f..9900d00f36e06e 100644 --- a/src/enhanced-textarea.jsx +++ b/src/enhanced-textarea.jsx @@ -19,10 +19,11 @@ const styles = { // Overflow also needed to here to remove the extra row // added to textareas in Firefox. overflow: 'hidden', + // Visibility needed to hide the extra text area on ipads + visibility: 'hidden', font: 'inherit', padding: 0, position: 'absolute', - opacity: 0, }, }; @@ -51,6 +52,7 @@ const EnhancedTextarea = React.createClass({ textareaStyle: React.PropTypes.object, rows: React.PropTypes.number, rowsMax: React.PropTypes.number, + style: React.PropTypes.object, }, getDefaultProps() { diff --git a/src/flat-button.jsx b/src/flat-button.jsx index 57391c922e5555..754928efd37cb3 100644 --- a/src/flat-button.jsx +++ b/src/flat-button.jsx @@ -67,7 +67,10 @@ const FlatButton = React.createClass({ disabled: React.PropTypes.bool, hoverColor: React.PropTypes.string, label: validateLabel, - labelPosition: React.PropTypes.oneOf(['before', 'after']), + labelPosition: React.PropTypes.oneOf([ + 'before', + 'after', + ]), labelStyle: React.PropTypes.object, onKeyboardFocus: React.PropTypes.func, onMouseEnter: React.PropTypes.func, @@ -76,12 +79,13 @@ const FlatButton = React.createClass({ primary: React.PropTypes.bool, rippleColor: React.PropTypes.string, secondary: React.PropTypes.bool, + style: React.PropTypes.object, }, getDefaultProps() { return { labelStyle: {}, - labelPosition: 'before', + labelPosition: 'before', // Should be after but we keep it like for now (prevent breaking changes) onKeyboardFocus: () => {}, onMouseEnter: () => {}, onMouseLeave: () => {}, @@ -123,7 +127,7 @@ const FlatButton = React.createClass({ secondary, style, ...other, - } = this.props; + } = this.props; const { buttonColor, @@ -172,11 +176,14 @@ const FlatButton = React.createClass({ const labelElement = label ? ( ) : undefined; + // Place label before or after children. - const childrenFragment = labelPosition === 'before' ? { labelElement, children } : { children, labelElement }; + const childrenFragment = labelPosition === 'before' ? + { labelElement, children } + : + { children, labelElement }; const enhancedButtonChildren = Children.create(childrenFragment); - return ( { if (this.isMounted()) callback(); }, 250); diff --git a/src/overlay.jsx b/src/overlay.jsx index 92df3e69a9a48a..5e8b5e53fd7154 100644 --- a/src/overlay.jsx +++ b/src/overlay.jsx @@ -45,6 +45,7 @@ const Overlay = React.createClass({ autoLockScrolling: React.PropTypes.bool, show: React.PropTypes.bool, transitionEnabled: React.PropTypes.bool, + style: React.PropTypes.object, }, getDefaultProps() { @@ -54,7 +55,7 @@ const Overlay = React.createClass({ }; }, - componentWillMount() { + componentDidMount() { this._originalBodyOverflow = document.getElementsByTagName('body')[0].style.overflow; }, diff --git a/src/paper.jsx b/src/paper.jsx index 2c361bfafbf766..0d565f81bd900e 100644 --- a/src/paper.jsx +++ b/src/paper.jsx @@ -43,6 +43,7 @@ const Paper = React.createClass({ rounded: React.PropTypes.bool, transitionEnabled: React.PropTypes.bool, zDepth: PropTypes.zDepth, + style: React.PropTypes.object, }, getDefaultProps() { diff --git a/src/radio-button-group.jsx b/src/radio-button-group.jsx index 9dd174744c126b..f2ce99ac5ec20e 100644 --- a/src/radio-button-group.jsx +++ b/src/radio-button-group.jsx @@ -29,6 +29,7 @@ const RadioButtonGroup = React.createClass({ defaultSelected: React.PropTypes.string, labelPosition: React.PropTypes.oneOf(['left', 'right']), onChange: React.PropTypes.func, + style: React.PropTypes.object, }, _hasCheckAttribute(radioButton) { diff --git a/src/raised-button.jsx b/src/raised-button.jsx index a4bfa6f14ba273..eac352f1605d29 100644 --- a/src/raised-button.jsx +++ b/src/raised-button.jsx @@ -3,6 +3,7 @@ const ReactDOM = require('react-dom'); const StylePropable = require('./mixins/style-propable'); const Transitions = require('./styles/transitions'); const ColorManipulator = require('./utils/color-manipulator'); +const Children = require('./utils/children'); const Typography = require('./styles/typography'); const EnhancedButton = require('./enhanced-button'); const Paper = require('./paper'); @@ -40,6 +41,10 @@ const RaisedButton = React.createClass({ className: React.PropTypes.string, disabled: React.PropTypes.bool, label: validateLabel, + labelPosition: React.PropTypes.oneOf([ + 'before', + 'after', + ]), onMouseDown: React.PropTypes.func, onMouseUp: React.PropTypes.func, onMouseLeave: React.PropTypes.func, @@ -53,6 +58,13 @@ const RaisedButton = React.createClass({ disabledBackgroundColor: React.PropTypes.string, disabledLabelColor: React.PropTypes.string, fullWidth: React.PropTypes.bool, + style: React.PropTypes.object, + }, + + getDefaultProps: function() { + return { + labelPosition: 'before', // Should be after but we keep it like for now (prevent breaking changes) + }; }, getInitialState() { @@ -160,18 +172,22 @@ const RaisedButton = React.createClass({ render() { let { + children, disabled, label, + labelPosition, + labelStyle, primary, secondary, - ...other } = this.props; + ...other, + } = this.props; let styles = this.getStyles(); let labelElement; if (label) { labelElement = ( - + {label} ); @@ -190,6 +206,13 @@ const RaisedButton = React.createClass({ onKeyboardFocus: this._handleKeyboardFocus, }; + // Place label before or after children. + const childrenFragment = labelPosition === 'before' ? + { labelElement, children } + : + { children, labelElement }; + const enhancedButtonChildren = Children.create(childrenFragment); + return ( - {labelElement} - {this.props.children} + {enhancedButtonChildren} diff --git a/src/refresh-indicator.jsx b/src/refresh-indicator.jsx index c7d3ea0f9b3f0b..1ec4f8c3c5ddd5 100644 --- a/src/refresh-indicator.jsx +++ b/src/refresh-indicator.jsx @@ -250,19 +250,24 @@ const RefreshIndicator = React.createClass({ const perimeter = Math.PI * 2 * circle.radiu; const arcLen = perimeter * 0.64; + let strokeDasharray, strokeDashoffset, transitionDuration; if (currStep === 0) { - path.style.strokeDasharray = '1, 200'; - path.style.strokeDashoffset = 0; - path.style[this.prefixed('transitionDuration')] = '0ms'; + strokeDasharray = '1, 200'; + strokeDashoffset = 0; + transitionDuration = '0ms'; } else if (currStep === 1) { - path.style.strokeDasharray = arcLen + ', 200'; - path.style.strokeDashoffset = -15; - path.style[this.prefixed('transitionDuration')] = '750ms'; + strokeDasharray = arcLen + ', 200'; + strokeDashoffset = -15; + transitionDuration = '750ms'; } else { - path.style.strokeDasharray = arcLen + ',200'; - path.style.strokeDashoffset = -(perimeter - 1); - path.style[this.prefixed('transitionDuration')] = '850ms'; + strokeDasharray = arcLen + ',200'; + strokeDashoffset = -(perimeter - 1); + transitionDuration = '850ms'; } + + AutoPrefix.set(path.style, "strokeDasharray", strokeDasharray); + AutoPrefix.set(path.style, "strokeDashoffset", strokeDashoffset); + AutoPrefix.set(path.style, "transitionDuration", transitionDuration); }, _rotateWrapper(wrapper) { @@ -278,7 +283,7 @@ const RefreshIndicator = React.createClass({ setTimeout(() => { if (this.isMounted()) { AutoPrefix.set(wrapper.style, "transform", "rotate(1800deg)"); - wrapper.style.transitionDuration = "10s"; + AutoPrefix.set(wrapper.style, "transitionDuration", "10s"); AutoPrefix.set(wrapper.style, "transitionTimingFunction", "linear"); } }, 50); diff --git a/src/render-to-layer.js b/src/render-to-layer.js new file mode 100644 index 00000000000000..7771e4b7eed095 --- /dev/null +++ b/src/render-to-layer.js @@ -0,0 +1,123 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import Events from './utils/events'; +import Dom from './utils/dom'; +import debounce from 'lodash.debounce'; + +// heavily inspired by https://github.com/Khan/react-components/blob/master/js/layered-component-mixin.jsx +const RenderToLayer = React.createClass({ + + componentDidMount() { + this._renderLayer(); + }, + + componentDidUpdate() { + this._renderLayer(); + }, + + componentWillUnmount() { + this._unbindClickAway(); + if (this._layer) { + this._unrenderLayer(); + } + }, + + _checkClickAway(e) { + if (!this.canClickAway) { + return; + } + const el = this._layer; + if (e.target !== el && + !Dom.isDescendant(el, e.target) && + document.documentElement.contains(e.target)) { + if (this.props.componentClickAway) { + this.props.componentClickAway(e); + } + } + }, + + _preventClickAway(e) { + if (e.detail === this) { + return; + } + this.canClickAway = false; + }, + + _allowClickAway() { + this.canClickAway = true; + }, + + getLayer() { + return this._layer; + }, + + render() { + return null; + }, + + _renderLayer() { + if (this.props.open) { + if (!this._layer) { + this._layer = document.createElement('div'); + document.body.appendChild(this._layer); + } + this._bindClickAway(); + if (this.reactUnmount) { + this.reactUnmount.cancel(); + } + } else if (this._layer) { + this._unbindClickAway(); + this._unrenderLayer(); + } else { + return; + } + + // By calling this method in componentDidMount() and + // componentDidUpdate(), you're effectively creating a "wormhole" that + // funnels React's hierarchical updates through to a DOM node on an + // entirely different part of the page. + + const layerElement = this.props.render(); + // Renders can return null, but React.render() doesn't like being asked + // to render null. If we get null back from renderLayer(), just render + // a noscript element, like React does when an element's render returns + // null. + if (layerElement === null) { + this.layerElement = ReactDOM.unstable_renderSubtreeIntoContainer (this,