Commit b9709caa authored by Patrik Meijer's avatar Patrik Meijer
Browse files

Add ConfirmDialog demo

parent e156d790
......@@ -6,6 +6,7 @@ import Typography from '@material-ui/core/Typography';
import DemoProjectSeedCards from '../src/components/ProjectSeedCards/demo';
import DemoAttributeEditor from '../src/components/AttributeEditor/demo';
import DemoConfirmDialog from '../src/components/ConfirmDialog/demo';
export default class demoApp extends Component {
......@@ -19,11 +20,15 @@ export default class demoApp extends Component {
const DEMOS = [
{
component: <DemoAttributeEditor/>,
title: 'AttributeEditor'
title: 'AttributeEditor',
},
{
component: <DemoProjectSeedCards/>,
title: 'ProjectSeedCards'
title: 'ProjectSeedCards',
},
{
component: <DemoConfirmDialog/>,
title: 'ConfirmDialog',
},
];
......
......@@ -39,9 +39,9 @@ function ConfirmDialog(props) {
ConfirmDialog.propTypes = {
title: PropTypes.string.isRequired,
message: PropTypes.string.isRequired,
onClose: PropTypes.func,
noButtonText: PropTypes.string,
yesButtonText: PropTypes.string,
onClose: PropTypes.func,
};
ConfirmDialog.defaultProps = {
......
import React, {Component} from 'react';
import Button from '@material-ui/core/Button';
import ConfirmDialog from './index'
export default class DemoConfirmDialog extends Component {
state = {
openDialog: false
};
openDialog = () => {
this.setState({openDialog: true});
};
closeDialog = () => {
this.setState({openDialog: false});
};
render() {
return (
<div>
<Button
onClick={this.openDialog}
color="primary"
>
Show Dialog
</Button>
{this.state.openDialog ? <ConfirmDialog
title="A simple Yes/No or OK/Cancel Dialog"
message="Note that whenever this dialog is present it will be displayed. Therefore you
need to add/remove it from the parent that controls it. Get it?"
yesButtonText="Yes"
noButtonText="No"
onClose={(yes) => {
alert(yes ? 'Good' : 'It\'ll be come clear if you look at the source for the demo');
this.closeDialog();
}}
/> : null}
</div>
)
}
}
\ No newline at end of file
......@@ -20,15 +20,17 @@ export default class DemoProjectSeedCards extends Component {
}));
return (
<ProjectSeedCards
seedsInfo={seedsInfo}
contentStyle={{
minHeight: 80,
}}
onCreate={(createData) => {
alert(`Seed selected:\n ${JSON.stringify(createData, null, 2)}`);
}}
/>
<div style={{width: '50%'}}>
<ProjectSeedCards
seedsInfo={seedsInfo}
contentStyle={{
minHeight: 80,
}}
onCreate={(createData) => {
alert(`Seed selected:\n ${JSON.stringify(createData, null, 2)}`);
}}
/>
</div>
)
}
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment