viam-projectv-scan/src/js/components/scanList/checkTable.js

ViaCheck deposit application

/* eslint-disable jsx-a11y/label-has-associated-control */
import React from 'react';
import CheckTableRow from './checkTableRow';

// eslint-disable-next-line react/prefer-stateless-function
class CheckTable extends React.Component {
  //  inputRefs = {};

  // onChangeValue = (event, columnPosition) => {
  //   const { onChangeValue } = this.props;
  //   onChangeValue(event.target.value, columnPosition);
  // };

  onRestartFocus = () => {
    const { onRestartFocus } = this.props;
    onRestartFocus();
  };

  // validateAmount = event => {
  //   const { validateAmount } = this.props;
  //   // const { rowSelected } = this.state;
  //   validateAmount(event);
  // };

  // validateRouting = event => {
  //   // const { rowSelected } = this.state;
  //   const { validateRouting } = this.props;
  //   validateRouting(event);
  // };

  // validateAccount = event => {
  //   // const { rowSelected } = this.state;
  //   const { validateAccount } = this.props;
  //   validateAccount(event);
  // };

  // validateCheckNumber = event => {
  //   const { validateCheckNumber } = this.props;
  //   // const { rowSelected } = this.state;
  //   validateCheckNumber(event);
  // };

  // onSetFocusRow = (index, columnPosition) => {
  //   const { onSetFocusRow } = this.props;
  //   onSetFocusRow(index, columnPosition);
  // };

  // deleteCheck = () => {
  //   const { deleteCheck } = this.props;
  //   deleteCheck();
  // };

  onSelectAll = isSelectedAll => {
    const { onSelectAll } = this.props;
    onSelectAll(isSelectedAll);
  };

  // onSelectCheck = index => {
  //   const { onSelectCheck } = this.props;
  //   onSelectCheck(index);
  // };

  // validateCheckDate = event => {
  //   const { validateCheckDate } = this.props;
  //   // const { rowSelected } = this.state;
  //   validateCheckDate(event);
  // };

  // onChangeRowCheck = (event, index) => {
  //   const { onChangeRowCheck } = this.props;
  //   onChangeRowCheck(index);
  // };

  render() {
    const {
      checksArray,
      checkSelected,
      onHandleKeyBoardTable,
      onClickCheckTable,
      onChangeValue,
      onSetFocusRow,
      onSelectCheck,
      deleteCheck,
      onSetRef,
      validateAmount,
      validateRouting,
      validateAccount,
      validateCheckNumber,
      validateCheckDate
    } = this.props;
    // const {cursor} = this.state
    let i = 0;
    let isSelectedAll = false;
    let validateSelected = true;

    // if (cursor !== 0) {
    //   if (this.inputRefs[`txt${cursor}`] !== null)
    //     this.inputRefs[`txt${cursor}`].focus();
    // }

    checksArray.forEach(check => {
      if (check.selected === false) validateSelected = false;

      i += 1;

      if (i === checksArray.length) {
        isSelectedAll = validateSelected;
      }
    });

    return (
      // <div >
      <table className="check-window table-navigate mt-2 table-width-complete">
        <thead>
          <tr>
            <th>
              {' '}
              <div className="custom-control custom-switch">
                <input
                  type="checkbox"
                  className="custom-control-input"
                  id="customSwitch1"
                  checked={isSelectedAll}
                  onChange={() => this.onSelectAll(isSelectedAll)}
                />
                <label
                  className="custom-control-label text-muted lato-font"
                  htmlFor="customSwitch1"
                >
                  Seleccionar Todos
                </label>
              </div>
            </th>
            <th>Fecha</th>
            <th>Número de Cheque</th>
            <th>Ruta</th>
            <th>Cuenta</th>
            <th>Valor</th>
            <th />
          </tr>
        </thead>
        <tbody>
          {/* {rows} */
          checksArray.map((check, key) => (
            <CheckTableRow
              index={key}
              d={check}
              onHandleKeyBoardTable={onHandleKeyBoardTable}
              onSetFocusRow={onSetFocusRow}
              onSetRef={onSetRef}
              validateRouting={validateRouting}
              validateAccount={validateAccount}
              validateCheckNumber={validateCheckNumber}
              validateAmount={validateAmount}
              deleteCheck={deleteCheck}
              validateCheckDate={validateCheckDate}
              onClickCheckTable={onClickCheckTable}
              onChangeValue={onChangeValue}
              onSelectCheck={onSelectCheck}
              checkSelected={checkSelected}
            />
          ))}
        </tbody>
      </table>
      // </div>
    );
  }
}

export default CheckTable;