@shopgate/engage/components/Form/Form.js

Shopgate's ENGAGE library.

import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

/**
 * Form component that handles keyboard submit, next buttons, ...
 */
import { jsx as _jsx } from "react/jsx-runtime";
let Form = /*#__PURE__*/function (_PureComponent) {
  /**
   * Initializes the form component.
   * @param {Object} props The components props.
   */
  function Form(props) {
    var _this;
    _this = _PureComponent.call(this, props) || this;
    /**
     * Handles the form submit.
     * @param {Object} event The event that caused the submit.
     */
    _this.handleSubmit = event => {
      event.preventDefault();
      const inputFocused = [].concat(_this.formElement.current.querySelectorAll('input')).some(input => document.activeElement === input);
      if (inputFocused) {
        document.activeElement.blur();
      }
      _this.props.onSubmit();
    };
    /**
     * Handles form submits by key.
     * @param {Object} event The event that caused the keypress.
     */
    _this.handleKeyPress = event => {
      // Enter key and on iOS also the "Done" button.
      if (event.which === 13) {
        _this.handleSubmit(event);
      }
    };
    _this.formElement = /*#__PURE__*/React.createRef();
    return _this;
  }
  _inheritsLoose(Form, _PureComponent);
  var _proto = Form.prototype;
  /**
   * Renders the component.
   * @returns {JSX}
   */
  _proto.render = function render() {
    /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
    return /*#__PURE__*/_jsx("form", {
      action: "#",
      className: classNames(this.props.className, 'form', 'engage__form'),
      onSubmit: this.handleSubmit,
      onKeyPress: this.handleKeyPress,
      ref: this.formElement,
      children: this.props.children
    });
    /* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
  };
  return Form;
}(PureComponent);
Form.defaultProps = {
  className: null,
  onSubmit: () => {}
};
export default Form;