viaone-report-statement/src/core/components/SearchStatement.js

A React component that sums two number.

import React from "react";
import InputDatePicker from "@viamericas/datepicker-multi-language";
import { useTranslation } from "react-i18next";

const SearchStatement = props => {
  const {
     locationOptions,
     locationParamRef,
     handleClickSearch,
     language,
     getDateFrom,
     getDateTo
  } = props;

  const { t } = useTranslation();

  return (
    <div>
      <div className="container-20px">
        <form>
          <div className="reports-nav container mt-1 padding-report-filter padding-report">
            <div className="justify-content-center">
              <div className="row">
                <div
                  className="form-group col-sm-12 col-md-6 col-lg-3"
                  data-provide="datepicker"
                >
                  <span className="lato-font text-blue">
                    {t("statementReport.from")}
                  </span>
                  <InputDatePicker
                    language={language}
                    dateDefault={new Date()}
                    handleChange={getDateFrom}
                  />
                </div>

                <div
                  className="form-group col-sm-12 col-md-6 col-lg-3"
                  data-provide="datepicker"
                >
                  <span className="lato-font text-blue">
                    {t("statementReport.to")}
                  </span>
                  <InputDatePicker
                    language={language}
                    dateDefault={new Date()}
                    handleChange={getDateTo}
                  />
                </div>

                <div className="form-group col-sm-12 col-md-6 col-lg-3">
                <span className="lato-font text-blue">
                  {t("statementReport.agency")}
                </span>
                <select
                  id="input_location"
                  name="locationParam"
                  ref={locationParamRef}
                  className="form-control lato-font form-control-lg"
                >
                  {locationOptions}
                </select>
              </div>

              </div>
            </div>
            <div className="row">
              <div  className="form-group col right">
                <button 
                  type="submit"
                  className="btn btn-primary lato-font form-control-lg button-right"
                  onClick={event => handleClickSearch(event)}
                >
                  {t("statementReport.generateReport")}
                </button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  );
};

export default SearchStatement ;