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

ViaCheck deposit application

// eslint-disable-next-line react/prefer-stateless-function
import React from 'react';

// const CheckRules = require('../../js/checks/checkRules');
const Utilities = require('../../js/checks/utilities');
const CheckStatusRules = require('../../js/checks/checkStatusRules');

const columnNumber = 6;

const checkTableRow = ({
  index,
  d,
  onHandleKeyBoardTable,
  onSetFocusRow,
  onSetRef,
  onChangeValue,
  onSelectCheck,
  validateRouting,
  validateAccount,
  validateCheckNumber,
  validateAmount,
  deleteCheck,
  // validateCheckDate,
  onClickCheckTable,
  checkSelected
}) => (
  <tr
    key={index}
    className={CheckStatusRules.getStyleCheck(d, checkSelected)}
    onKeyUp={event => onHandleKeyBoardTable(event, index)}
    ref={onSetRef(`tr${index}`)}
    onClick={() => onClickCheckTable(index)}
  >
    <td>
      {d.isVerify ? (
        <div className={CheckStatusRules.getClassNameGVerify(d.colorVerify)} />
      ) : (
        <input
          id={`txt${index * columnNumber + 1}`}
          data-focus={index * columnNumber + 1}
          type="checkbox"
          aria-label="check-check"
          className="select-check input-move"        
          checked={d.selected}
          onChange={() => onSelectCheck(index)}       
        />
      )}
    </td>
   <td>
      <input
        id={`txt${index * columnNumber + 2}`}
        data-focus={index * columnNumber + 2}
        maxLength="15"
        size="16"
        onChange={event => onChangeValue(event, 2)}
        value={d.checkNumber}
        className={
          (d.scoreFields.checkNumber < d.limitCheckNumberScore ||
            d.scoreFields.checkNumber === 0 ||
            !d.validFields.checkNumber) &&
          !d.isModifiedFields.checkNumber &&
          d.isOcr
            ? 'error-value input-move'
            : 'input-move'
        }
        tabIndex={index * columnNumber + 2}
        // onFocus={() => onSetFocusRow(index, 3)}
        // ref={onSetRef(`txt${index * columnNumber + 3}`)}
        onKeyPress={event => Utilities.isNumeric(event)}
        onBlur={event => validateCheckNumber(event)}
        disabled={d.disableCell}
      />
    </td>

    <td>
      <input
        id={`txt${index * columnNumber + 3}`}
        data-focus={index * columnNumber + 3}
        maxLength="9"
        size="13"
        onChange={event => onChangeValue(event, 3)}
        value={d.routing}
        className={
          (d.scoreFields.routing < d.limitRoutingScore ||
            d.scoreFields.routing === 0 ||
            !d.validFields.routing) &&
          !d.isModifiedFields.routing &&
          d.isOcr
            ? 'error-value input-move'
            : 'input-move'
        }
        tabIndex={index * columnNumber + 3}     
        onKeyPress={event => Utilities.isNumeric(event)}
        onBlur={event => validateRouting(event)}
        disabled={d.disableCell}
      />
    </td>

    <td>
      <input
        id={`txt${index * columnNumber + 4}`}
        data-focus={index * columnNumber + 4}
        maxLength="18"
        size="18"
        // type="number"
        onChange={event => onChangeValue(event, 4)}
        className={
          (d.scoreFields.mircLine < d.limitAccountScore ||
            !d.validFields.account ||
            d.scoreFields.mircLine === 0) &&
          !d.isModifiedFields.account &&
          d.isOcr
            ? 'error-value input-move'
            : 'input-move'
        }
        tabIndex={index * columnNumber + 4}
        value={d.account}     
        onKeyPress={event => Utilities.isNumeric(event)}
        onBlur={event => validateAccount(event)}
        disabled={d.disableCell}
      />
    </td>
    <td>
      <input
        id={`txt${index * columnNumber + 5}`}
        data-focus={index * columnNumber + 5}
        type="text"
        size="10"
        onChange={event => onChangeValue(event, 5)}
        className={
          (d.scoreFields.amount < d.limitAmountScore ||
            !d.validFields.amount ||
            d.scoreFields.amount === 0) &&
          !d.isModifiedFields.amount &&
          d.isOcr
            ? 'error-value input-move'
            : 'money-count text-green lato-font input-move'
        }
        tabIndex={index * columnNumber + 5}
        value={d.isEditing ? d.amount : Utilities.setAmountFormat(d.amount)}
        onBlur={event => validateAmount(event)}
        onFocus={() => onSetFocusRow(index, 5)}
        disabled={d.disableCell}
        onKeyPress={event => Utilities.isDecimal(event)}
      />
    </td>

    <td className="check-option grey-line">
      <button
        id={`txt${index * columnNumber + 6}`}
        type="button"
        className="btn item-delete text-muted lato-font"
        data-focus={index * columnNumber + 6}
        onClick={() => deleteCheck()}
        ref={onSetRef(`txt${index * columnNumber + 6}`)}
        disabled={d.disableCell}
      />
    </td>
  </tr>
);

export default checkTableRow;