Reputation: 293
So, I want to combine Panel with Dialog, once I click on the gear button (shown on the picture), I want for a dialog to pop up. But it is like it doesn't even call the function showDialog(). Most important parts of the code are shown below, after the picture.
-Needed functions:
constructor(props){
super(props);
this.state = {
showDialog: false,
idOfPortletLocation: '',
text: '',
portletlocation: []
};
}
showDialog(){
this.setState({ showDialog: true });
}
onOk(){
this.setState({ showDialog: false });
}
onCancel(){
this.setState({ showDialog: false });
}
-Render part of the code:
<Container layout="fit">
<Panel
ref={panel => this.panel = panel}
title= {this.state.text.title}
tools={[
{type: 'minimize', handler: () => this.toolHandler("minimize", this.state.idOfPortletLocation)},
{type: 'maximize', handler: () => this.toolHandler("maximize", this.state.idOfPortletLocation)},
{type: 'close', handler: () => this.toolHandler("close", this.state.idOfPortletLocation)},
{type: 'gear', handler: () => this.showDialog}
]}
bodyPadding={10}
ref="target"
>
{this.state.text.description}
</Panel>
<Dialog
displayed={showDialog}
title="Dialog"
closable
maximizable
closeAction="hide"
maskTapHandler={this.onCancel}
bodyPadding="20"
maxWidth="200"
defaultFocus="#ok"
onHide={() => this.setState({ showDialog: false })}
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.'
<Button text="Cancel" handler={this.onCancel}/>
<Button itemId="ok" text="OK" handler={this.onOk}/>
</Dialog>
</Container>
Upvotes: 1
Views: 92
Reputation: 30082
You're not calling the function, you should have:
{type: 'gear', handler: () => this.showDialog(); }
Upvotes: 1