react Architecture Docs
Home / Class/ Result Class — react Architecture

Result Class — react Architecture

Architecture documentation for the Result class in App.js from the react codebase.

Class javascript BabelCompiler

Entity Profile

Dependency Diagram

graph TD
  bca90355_29ba_0440_c24c_e2b0f47a542d["Result"]
  444f4239_c2fb_3bc5_1037_eb595d98f6e1["App.js"]
  bca90355_29ba_0440_c24c_e2b0f47a542d -->|defined in| 444f4239_c2fb_3bc5_1037_eb595d98f6e1
  2e953af9_bf47_43a3_8879_f74cbb9ef70b["componentWillUnmount()"]
  bca90355_29ba_0440_c24c_e2b0f47a542d -->|method| 2e953af9_bf47_43a3_8879_f74cbb9ef70b
  25140fd7_e5bf_665b_f3ed_dfc133920392["render()"]
  bca90355_29ba_0440_c24c_e2b0f47a542d -->|method| 25140fd7_e5bf_665b_f3ed_dfc133920392

Relationship Graph

Source Code

fixtures/attribute-behavior/src/App.js lines 586–670

class Result extends React.Component {
  state = {showInfo: false};
  onMouseEnter = () => {
    if (this.timeout) {
      clearTimeout(this.timeout);
    }
    this.timeout = setTimeout(() => {
      this.setState({showInfo: true});
    }, 250);
  };
  onMouseLeave = () => {
    if (this.timeout) {
      clearTimeout(this.timeout);
    }
    this.setState({showInfo: false});
  };

  componentWillUnmount() {
    if (this.timeout) {
      clearTimeout(this.interval);
    }
  }

  render() {
    const {reactStable, reactNext, hasSameBehavior} = this.props;
    const style = {
      position: 'absolute',
      width: '100%',
      height: '100%',
    };

    let highlight = null;
    let popover = null;
    if (this.state.showInfo) {
      highlight = (
        <div
          css={{
            position: 'absolute',
            height: '100%',
            width: '100%',
            border: '2px solid blue',
          }}
        />
      );

      popover = (
        <div
          css={{
            backgroundColor: 'white',
            border: '1px solid black',
            position: 'absolute',
            top: '100%',
            zIndex: 999,
          }}>
          <ResultPopover {...this.props} />
        </div>
      );
    }

    if (!hasSameBehavior) {
      style.border = '4px solid purple';
    }
    return (
      <div
        css={style}
        onMouseEnter={this.onMouseEnter}
        onMouseLeave={this.onMouseLeave}>
        <div css={{position: 'absolute', width: '50%', height: '100%'}}>
          <RendererResult {...reactStable} />
        </div>
        <div
          css={{
            position: 'absolute',
            width: '50%',
            left: '50%',
            height: '100%',
          }}>
          <RendererResult {...reactNext} />
        </div>
        {highlight}
        {popover}

Domain

Defined In

Source

Frequently Asked Questions

What is the Result class?
Result is a class in the react codebase, defined in fixtures/attribute-behavior/src/App.js.
Where is Result defined?
Result is defined in fixtures/attribute-behavior/src/App.js at line 586.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free