JQxWindow slowing down the time it takes to open

[assemblerParticipant]

I have been testing jqxwidget for a while. Now I’m facing a problem with JqxWindow. I have a React component which is a Window, like this:

  componentDidMount () {
    this.window.on('close', () => {
      this.props.closing();
    });

    this.cancel.on('click', () => {
      this.window.close();
    });
  }

  componentDidUpdate (prevProps, prevState) {
    if (!isEqual(prevProps.show, this.props.show)) {
      if (this.props.show) {
        this.windowRef.open();
      } else {
        this.windowRef.close();
      }
    }
  }

myWindowRef = (ref) => {
  this.window = ref;
}

render () {
    return (<JqxWindow
      ref={this.myWindowRef} theme={THEME} isModal resizable={false} autoOpen={false} width={370}
      height={250}>
      <div>{'Title'}</div>
      <div>{'Contents'}</div>
    </JqxWindow>
}

This component is called from another which has a state to open or close this component (the show prop). The fact is if I open close this window several times it goes slowing down the time that it takes to open/close. What am I missing here?

[Ivo ZhulevParticipant]

Hi assembler,

Can you please post some of the other component code(best if share me a fully working example, with both components) because I can’t reproduce it from this.

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[assemblerParticipant]

Mr. Ivo Zhulev,
Here is the code that opens the JqxWindow in my previous post:

constructor() {
   super();
   this.state = { show: false };
}

componentDidMount() {
   this.button.on('click', () => {
      this.setState({show: true});
   });
}

buttonRef = (ref) => {
   this.button = ref;
}

closing = () => {
   this.setState({show: false});
}

render () {
   return (
      <div>
         <JqxButton ref={this.buttonRef} value={'ok'} width={100} height={24} />
         <MyWindowComponent show={this.state.show} closing={this.closing} />
      </div>
   );
}

Moreover, if it helps you, I’m using Styled-components and React-boilerplate. And, thanks for your time.

[Ivo ZhulevParticipant]

Hi assembler,

I still can’t reproduce it. Can you make a sample demo, and share it(maybe zip it and share it so i can only install the modules and run it)?

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[assemblerParticipant]

Mr. Ivo Zhulev,

The problem is as follows: I have a main React component which hosts a lot of other React components. One of those components is a JqxWindow with the autoOpen prop set to false in order to let the main React component to manipulate when this JqxWindow will be open or will be closed. I do that with a boolean variable in the state of the main React component. It works perfectly, the JqxWindow opens and closes when the main React component changes its state. The trouble comes when the JqxWindow gets open and closed several times. I mean: open/close, open../close.., open…./close…., open……./close…….., open…………../close…………… the response time grows, also the Chrome task manager shows me a growing memory consumption. I’m using Linux Mint 18.1 and Brackets if it helps.

Sorry if I don’t share my resting code.

Best regards!

[Ivo ZhulevParticipant]

Hi assembler,

I tried it and it does not slow. BUT I suggest you try another way of doing this. Implement componentWillReceiveProps in windowComponent, and when the state changes in your main component, check the value of the show and use the open or close method depending on this.

componentWillReceiveProps(nextProps) {
    nextProps.show ? this.window.open() : this.window.close();           
}

Awaiting your response!

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[assemblerParticipant]

Solved, thanks and sorry for the delay in my response.

[Author]

Posts