jQuery UI Widgets Forums React JQXWindow drops isModal after states/props changed

This topic contains 5 replies, has 2 voices, and was last updated by  Hristo 1 month, 1 week ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • vmlaskin
    Blocked

    I have applications with jqwidgets v.5.6.0 and React v.16.3.1 and currently migrating to the latest jqwidgets v.12.0.
    Code below works in old environment without issues.
    New environment: jqwidgets 12.0 and React 16.14.0.
    There are two issues in new environment.
    1. setting initial size of the window doesn’t allow to change it. If props or states in components changed then it will require re-render jqxWindow. Each rendering restores window size to initial value.
    2. after re-rendering jqxWindow drops its modal mode

    in code below click on Show Window button. Window will open in modal mode
    then click on Change Width button. window is not in modal mode any more.
    continue clicking on Change Width button. Window size restores to initial value on each re-rendering

    The question is how to set initial window size, change window size and preserve modal mode with less code structural changes when migrating code.

    Thanks

    code below has component state. When it changes it requires re-rendering

    
    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={
                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={280}
                        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({width: wWidth});
            this.setState({
                winOpened: <code>window width is ${wWidth}</code>
            })
    
        }
    
        // 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;
    

    Hristo
    Participant

    Hello vmlaskin,

    The setState method always re-render the application.
    You could try to use another approach, I think, you could try something with the shouldComponentUpdate option.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com


    vmlaskin
    Blocked

    the sample just shows the issue with re-rendering. In real life application there are states and props that need to be updated and cause re-rendering.
    I can’t prevent it in shouldComponentUpdate. React application is about updating states and props.


    Hristo
    Participant

    Hello vmlaskin,

    Thank you for the clarifications.
    I would like to suggest you to try this approach:

    this.myWindow.current!.close();
    this.setState({
    	width: wWidth,
    	winOpened: <code>window width is ${wWidth}</code>
    });
    this.myWindow.current!.open();

    Where the width property is set in the state object and also it determines the width of the jqxWindow.
    Meanwhile, I will discuss this case with my colleagues because it will handle better this case without animation but it should be cleared.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com


    vmlaskin
    Blocked

    it works but flashing screen is definitely not for production grade application.
    need better solution


    Hristo
    Participant

    Hello vmlaskin,

    I created a work item for this case.
    Please, let me know if you have any other questions.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.