react Architecture Docs
Home / Class/ RangeKeyboardFixture Class — react Architecture

RangeKeyboardFixture Class — react Architecture

Architecture documentation for the RangeKeyboardFixture class in RangeKeyboardFixture.js from the react codebase.

Class javascript BabelCompiler

Entity Profile

Dependency Diagram

graph TD
  d1d51617_ad04_c227_f8bd_1700e89ec396["RangeKeyboardFixture"]
  146d3328_8159_aa68_fad2_e4a3da02b729["RangeKeyboardFixture.js"]
  d1d51617_ad04_c227_f8bd_1700e89ec396 -->|defined in| 146d3328_8159_aa68_fad2_e4a3da02b729
  3bd3cdea_ae95_ec1a_de2d_894663917154["constructor()"]
  d1d51617_ad04_c227_f8bd_1700e89ec396 -->|method| 3bd3cdea_ae95_ec1a_de2d_894663917154
  a2de32b7_b0c4_b032_8814_4a4ddbea0ca7["componentDidMount()"]
  d1d51617_ad04_c227_f8bd_1700e89ec396 -->|method| a2de32b7_b0c4_b032_8814_4a4ddbea0ca7
  5abee10b_18d1_639a_4d0a_fcb9793efeda["componentWillUnmount()"]
  d1d51617_ad04_c227_f8bd_1700e89ec396 -->|method| 5abee10b_18d1_639a_4d0a_fcb9793efeda
  c3edbbfb_3d1c_4986_1679_da4bcdec75f7["render()"]
  d1d51617_ad04_c227_f8bd_1700e89ec396 -->|method| c3edbbfb_3d1c_4986_1679_da4bcdec75f7

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/input-change-events/RangeKeyboardFixture.js lines 4–77

class RangeKeyboardFixture extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      keydownCount: 0,
      changeCount: 0,
    };
  }

  componentDidMount() {
    this.input.addEventListener('keydown', this.handleKeydown, false);
  }

  componentWillUnmount() {
    this.input.removeEventListener('keydown', this.handleKeydown, false);
  }

  handleChange = () => {
    this.setState(({changeCount}) => {
      return {
        changeCount: changeCount + 1,
      };
    });
  };

  handleKeydown = e => {
    // only interesting in arrow key events
    if ([37, 38, 39, 40].indexOf(e.keyCode) < 0) {
      return;
    }

    this.setState(({keydownCount}) => {
      return {
        keydownCount: keydownCount + 1,
      };
    });
  };

  handleReset = () => {
    this.setState({
      keydownCount: 0,
      changeCount: 0,
    });
  };

  render() {
    const {keydownCount, changeCount} = this.state;
    const color = keydownCount === changeCount ? 'green' : 'red';

    return (
      <Fixture>
        <div>
          <input
            type="range"
            ref={r => (this.input = r)}
            onChange={this.handleChange}
          />
          <button onClick={() => this.input.focus()}>Focus Knob</button>
        </div>{' '}
        <p style={{color}}>
          <code>onKeyDown</code>
          {' calls: '}
          <strong>{keydownCount}</strong>
          {' vs '}
          <code>onChange</code>
          {' calls: '}
          <strong>{changeCount}</strong>
        </p>
        <button onClick={this.handleReset}>Reset counts</button>
      </Fixture>
    );
  }
}

Domain

Defined In

Source

Frequently Asked Questions

What is the RangeKeyboardFixture class?
RangeKeyboardFixture is a class in the react codebase, defined in fixtures/dom/src/components/fixtures/input-change-events/RangeKeyboardFixture.js.
Where is RangeKeyboardFixture defined?
RangeKeyboardFixture is defined in fixtures/dom/src/components/fixtures/input-change-events/RangeKeyboardFixture.js at line 4.

Analyze Your Own Codebase

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

Try Supermodel Free