viamobi-component/src/core/components/ComplianceId.js

A React component that viamobi

import React from 'react';

const ComplianceID = ({ agency, setAgency, order, setOrder, t }) => {
  const onKeyPress = e => {
    const keycode = e.which;

    if (!(e.shiftKey === false && keycode >= 48 && keycode <= 57)) {
      e.preventDefault();
    }
  };

  return (
    <div>
      <div className="input-group mt-3">
        <div className="input-group-prepend">
          <span className="input-group-text input_width" id="agency">
            {t('agency')}
          </span>
        </div>
        <input
          type="text"
          size="6"
          maxLength="6"
          value={agency}
          onChange={e => setAgency(e.target.value)}
          className="form-control text-center"
          aria-label="Sizing example input"
          aria-describedby="inputGroup-sizing-default"
        />
      </div>
      <div className="input-group my-1">
        <div className="input-group-prepend">
          <span className="input-group-text  input_width" id="order">
            {t('order')}
          </span>
        </div>
        <input
          type="text"
          size="15"
          maxLength="15"
          value={order}
          onKeyPress={e => onKeyPress(e)}
          className="form-control  text-center"
          aria-label="Sizing example input"
          aria-describedby="inputGroup-sizing-default"
          onChange={e => setOrder(e.target.value)}
        />
      </div>
    </div>
  );
};

export default ComplianceID;