Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow open state of dialog to be controlled through the show prop. #1996

Merged
merged 2 commits into from
Nov 4, 2015
Merged

Allow open state of dialog to be controlled through the show prop. #1996

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8050f49
[Dialog] Switch from imperative control to props.
JorgenEvens Oct 27, 2015
801e05a
[Dialog] Re-enable legacy API with deprecation warnings.
JorgenEvens Oct 29, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 56 additions & 29 deletions docs/src/app/components/pages/components/dialog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ export default class DialogPage extends React.Component {
super();
this.state = {
modal: false,
showDialogStandardActions: false,
showDialogCustomActions: false,
showDialogScrollable: false,
};
this._handleCustomDialogCancel = this._handleCustomDialogCancel.bind(this);
this._handleCustomDialogSubmit = this._handleCustomDialogSubmit.bind(this);
Expand All @@ -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);
}

Expand Down Expand Up @@ -69,8 +73,20 @@ export default class DialogPage extends React.Component {
name: 'openImmediately',
type: 'bool',
header: 'default: false',
desc: 'Deprecated: Set to true to have the dialog automatically open on mount.',
},
{
name: 'defaultIsOpen',
type: 'bool',
header: 'default: false',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

default: null

desc: 'Set to true to have the dialog automatically open on mount.',
},
{
name: 'isOpen',
type: 'bool',
header: 'default: null',
desc: 'Controls whether the Dialog is opened or not.',
},
{
name: 'title',
type: 'node',
Expand All @@ -95,16 +111,6 @@ export default class DialogPage extends React.Component {
{
name: 'Methods',
infoArray: [
{
name: 'dismiss',
header: 'Dialog.dismiss()',
desc: 'Hides the dialog.',
},
{
name: 'show',
header: 'Dialog.show()',
desc: 'Shows the dialog.',
},
{
name: 'isOpen',
header: 'Dialog.isOpen()',
Expand All @@ -116,14 +122,9 @@ export default class DialogPage extends React.Component {
name: 'Events',
infoArray: [
{
name: 'onDismiss',
header: 'function()',
desc: 'Fired when the dialog is dismissed.',
},
{
name: '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.',
},
],
},
Expand Down Expand Up @@ -175,15 +176,17 @@ export default class DialogPage extends React.Component {
title="Dialog With Standard Actions"
actions={standardActions}
actionFocus="submit"
modal={this.state.modal}>
isOpen={this.state.showDialogStandardActions}
onRequestClose={this._handleRequestClose}>
The actions in this window are created from the json that's passed in.
</Dialog>

<Dialog
ref="customDialog"
title="Dialog With Custom Actions"
actions={customActions}
modal={this.state.modal}>
isOpen={this.state.showDialogCustomActions}
onRequestClose={this._handleRequestClose}>
The actions in this window were passed in as an array of react objects.
</Dialog>
<div style={{width: '300px', margin: '0 auto', paddingTop: '20px'}}>
Expand All @@ -196,9 +199,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}
isOpen={this.state.showDialogScrollable}
onRequestClose={this._handleRequestClose}>
<div style={{height: '1000px'}}>
Really long content
</div>
Expand All @@ -214,35 +218,58 @@ export default class DialogPage extends React.Component {
}

_handleCustomDialogCancel() {
this.refs.customDialog.dismiss();
this.setState({
showDialogCustomActions: true,
});
}

_handleCustomDialogSubmit() {
this.refs.customDialog.dismiss();
this.setState({
showDialogCustomActions: true,
});
}

_handleToggleChange(e, toggled) {
this.setState({modal: toggled});
}

_handleScrollableDialogCancel() {
this.refs.scrollableContentDialog.dismiss();
this.setState({
showDialogScrollable: false,
});
}

_handleScrollableDialogSubmit() {
this.refs.scrollableContentDialog.dismiss();
this.setState({
showDialogScrollable: false,
});
}

_handleCustomDialogTouchTap() {
this.refs.customDialog.show();
this.setState({
showDialogScrollable: true,
});
}

_handleStandardDialogTouchTap() {
this.refs.standardDialog.show();
this.setState({
showDialogStandardActions: true,
});
}

_handleScrollableDialogTouchTap() {
this.refs.scrollableContentDialog.show();
this.setState({
showDialogScrollable: true,
});
}

_handleRequestClose(buttonClicked) {
if (!buttonClicked && this.state.modal) return;
this.setState({
showDialogStandardActions: false,
showDialogCustomActions: false,
showDialogScrollable: false,
});
}

}
21 changes: 15 additions & 6 deletions docs/src/app/components/raw-code/dialog-code.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ let standardActions = [
title="Dialog With Standard Actions"
actions={standardActions}
actionFocus="submit"
modal={this.state.modal}>
isOpen={this.state.showDialogStandardActions}
onRequestClose={this._handleRequestClose}>
The actions in this window are created from the json that's passed in.
</Dialog>

Expand All @@ -27,11 +28,19 @@ let customActions = [
<Dialog
title="Dialog With Custom Actions"
actions={customActions}
modal={this.state.modal}>
isOpen={this.state.showDialogCustomActions}
onRequestClose={this._handleRequestClose}>
The actions in this window were passed in as an array of react objects.
</Dialog>

<Dialog title="Dialog With Scrollable Content" actions={customActions}
autoDetectWindowHeight={true} autoScrollBodyContent={true}>
<div style={{height: '2000px'}}>Really long content</div>
</Dialog>
<Dialog
title="Dialog With Scrollable Content"
actions={customActions}
autoDetectWindowHeight={true}
autoScrollBodyContent={true}
isOpen={this.state.showDialogScrollable}
onRequestClose={this._handleRequestClose}>
<div style={{height: '1000px'}}>
Really long content
</div>
</Dialog>
5 changes: 5 additions & 0 deletions docs/webpack-production.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,11 @@ var config = {
warnings: false
}
}),
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production")
}
}),
new HtmlWebpackPlugin({
inject: false,
template: path.join(__dirname, '/src/www/index.html')
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@
"homepage": "http://material-ui.com/",
"dependencies": {
"lodash.throttle": "~3.0.4",
"lodash.debounce": "~3.1.1"
"lodash.debounce": "~3.1.1",
"warning": "^2.1.0"
},
"peerDependencies": {
"inline-style-prefixer": "^0.3.3",
Expand Down
Loading