jQWidgets
jQWidgets copied to clipboard
jqxWindow (React) - the modal mode disappear when trying to change the width with the "setState" option
Example:
import * as React from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
class App extends React.PureComponent<{}, any> {
private myWindow = React.createRef<JqxWindow>();
constructor(props: {}) {
super(props);
this.showWindowButtonClick = this.showWindowButtonClick.bind(this);
this.eventWindowClose = this.eventWindowClose.bind(this);
this.eventWindowOpen = this.eventWindowOpen.bind(this);
this.changeWidthButtonClick=this.changeWidthButtonClick.bind(this);
this.state={
width: 280,
winOpened: "window is closed"
}
}
public render() {
return (
<div>
<button onClick={this.showWindowButtonClick} disabled={this.myWindow && this.myWindow.current ? this.myWindow.current!.isOpen() : false}>
Show Window
</button>
<div>{this.state.winOpened}</div>
<JqxWindow ref={this.myWindow}
autoOpen={false}
onClose={this.eventWindowClose}
onOpen={this.eventWindowOpen}
width={this.state.width}
height={200}
resizable={false}
isModal={true}
modalOpacity={0.3}
position={{ x: 90, y: 140 }}
draggable={true}
>
<div>
Modal Window
</div>
<div>
<div>
Please click "Change Width" button to increase width of the window or the close button to close the modal window.
</div>
<div style={{marginTop: 15 }}>
<div>
<button onClick={this.changeWidthButtonClick} >
Change Width
</button>
</div>
</div>
</div>
</JqxWindow>
</div >
);
}
private changeWidthButtonClick(): void {
let wWidth=this.myWindow.current!.getOptions("width");
wWidth += 10;
this.myWindow.current!.setOptions({
animationType: "none",
showAnimationDuration: 0
});
this.myWindow.current!.close();
this.setState({
width: wWidth,
winOpened: <code>window width is ${wWidth}</code>
});
this.myWindow.current!.open();
}
// Event handling
private showWindowButtonClick(): void {
this.myWindow.current!.open();
}
private eventWindowClose(event: any): void {
this.setState({
winOpened: "window is closed"
})
}
private eventWindowOpen(event: any): void {
let wWidth=this.myWindow.current!.getOptions("width");
this.setState({
winOpened: <code>window width is ${wWidth}</code>
})
}
}
export default App;