t) {
    const increment = getIncrement(event);
    if (!increment) {
      return;
    }

    const { target } = event;
    target.value = parseInt(target.value, 10) + increment;
    this.onInputChange(event, this.onInputSubmit);

    // Keep this event from having default processing. Since the field is a
    // number field, default processing would trigger additional manipulations
    // of the value, and we've already applied the desired amount.
    event.preventDefault();
  }

  onInputKeyUp({ target, keyCode }) {
    // On Enter, submit the input
    if (keyCode == KeyCodes.DOM_VK_RETURN) {
      this.onInputSubmit();
    }

    // On Esc, revert the value and blur the target
    if (keyCode == KeyCodes.DOM_VK_ESCAPE) {
      if (this.widthInput == target) {
        const width = this.props.viewport.width;
        this.setState(
          {
            width,
            isWidthValid: this.isInputValid(width),
          },
          () => target.blur()
        );
      }

      if (this.heightInput == target) {
        const height = this.props.viewport.height;
        this.setState(
          {
            height,
            isHeightValid: this.isInputValid(height),
          },
          () => target.blur()
        );
      }
    }
  }

  onInputSubmit() {
    const { viewport, onRemoveDeviceAssociation, doResizeViewport } =
      this.props;

    if (!this.state.isWidthValid || !this.state.isHeightValid) {
      const { width, height } = viewport;

      this.setState({
        width,
        height,
        isWidthValid: true,
        isHeightValid: true,
      });

      return;
    }

    // Change the device selector back to an unselected device
    // TODO: Bug 1332754: Logic like this probably belongs in the action creator.
    if (viewport.device && typeof onRemoveDeviceAssociation === "function") {
      onRemoveDeviceAssociation(viewport.id, { resetProfile: false });
    }

    doResizeViewport(
      viewport.id,
      parseInt(this.state.width, 10),
      parseInt(this.state.height, 10)
    );
  }

  render() {
    return dom.div(
      {
        className:
          "viewport-dimension" +
          (this.state.isEditing ? " editing" : "") +
          (!this.state.isWidthValid || !this.state.isHeightValid
            ? " invalid"
            : ""),
      },
      dom.input({
        ref: input => {
          this.widthInput = input;
        },
        className:
          "text-input viewport-dimension-input" +
          (this.state.isWidthValid ? "" : " invalid"),
        size: 4,
        type: "number",
        value: this.state.width,
        onBlur: this.onInputBlur,
        onChange: this.onInputChange,
        onFocus: this.onInputFocus,
        onKeyDown: this.onInputKeyDown,
        onKeyUp: this.onInputKeyUp,
      }),
      dom.span(
        {
          className: "viewport-dimension-separator",
        },
        "×"
      ),
      dom.input({
        ref: input => {
          this.heightInput = input;
        },
        className:
          "text-input viewport-dimension-input" +
          (this.state.isHeightValid ? "" : " invalid"),
        size: 4,
        type: "number",
        value: this.state.height,
        onBlur: this.onInputBlur,
        onChange: this.onInputChange,
        onFocus: this.onInputFocus,
        onKeyDown: this.onInputKeyDown,
        onKeyUp: this.onInputKeyUp,
      })
    );
  }
}

/**
 * Get the increment/decrement step to use for the provided key event.
 */
function getIncrement(event) {
  const defaultIncrement = 1;
  const largeIncrement = 100;
  const mediumIncrement = 10;

  let increment = 0;
  const key = event.keyCode;

  if (isKeyIn(key, "UP", "PAGE_UP")) {
    increment = 1 * defaultIncrement;
  } else if (isKeyIn(key, "DOWN", "PAGE_DOWN")) {
    increment = -1 * defaultIncrement;
  }

  if (event.shiftKey) {
    if (isKeyIn(key, "PAGE_UP", "PAGE_DOWN")) {
      increment *= largeIncrement;
    } else {
      increment *= mediumIncrement;
    }
  }

  return increment;
}

module.exports = ViewportDimension;
PK