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.

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

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

Open
jqwidgets opened this issue May 12, 2021 · 0 comments

Comments

@jqwidgets
Copy link
Owner

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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant