jQWidgets icon indicating copy to clipboard operation
jQWidgets copied to clipboard

jqxWindow (React) - the modal mode disappear when trying to change the width with the "setState" option

Open jqwidgets opened this issue 4 years ago • 0 comments

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;

jqwidgets avatar May 12 '21 12:05 jqwidgets