viam-compliance-deposit-ui/src/core/utils/Table/Records/general.js

A React component for deposit sar alerts.

import React from 'react';

const Records = ({
  data,
  widthArr,
  selectedRow,
  setSelectedRow,
  ux,
  showIconSelected = false,
  hiddeColumns = []
}) => {
  const styleRow = column => {
    const style = {};
    if (widthArr) {
      style.width = widthArr[column] ? `${widthArr[column]}%` : 'auto';
    } else {
      style.flex = 1;
    }
    return style;
  };

  const getIcon = className => {
    return <i className={` ${className}`}> </i>;
  };

  const SetTds = (itemValue, selected) => {
    const registers = [];
    let styleColumnCount = 0;
    let icon = '';

    const keys = Object.keys(itemValue);

    const validateColumns = () => {
      return hiddeColumns.some(cl => cl === styleColumnCount);
    };
    // eslint-disable-next-line no-restricted-syntax
    for (const key of keys) {
      if (validateColumns()) {
        registers.push(
          <td style={{ display: 'none' }} key={styleColumnCount}>
            {itemValue[key]}
          </td>
        );
      } else {
        if (styleColumnCount === 1 && selected && showIconSelected) {
          icon = getIcon(
            `${selected ? 'Show' : 'Hidden'}`
          );
        }

        registers.push(
          <td
            style={styleRow(styleColumnCount)}
            className="via-table__body-td-column bl_table_columns"
            key={styleColumnCount}
          >
            {styleColumnCount === 1 && icon}
            {itemValue[key]}
          </td>
        );
      }

      styleColumnCount += 1;
    }

    return registers;
  };

  const SetRow = ({ rowCount, row, selected }) => {
    if (showIconSelected) {
      return (
        <tr
          className={selected ? 'selectActive' : ''}
          onClick={() => {
            if (selected) setSelectedRow(null);
            else setSelectedRow(row.Id);
          }}
          key={rowCount ?? 0}
        >
          {SetTds(row, selected)}
        </tr>
      );
    }

    return <tr key={rowCount ?? 0}>{SetTds(row, showIconSelected)}</tr>;
  };

  let rowCount = 0;
  const renderRows = () => {
    return data.map(row => {
      rowCount += 1;

      return SetRow({
        rowCount,
        row,
        selected: row.Id === selectedRow
      });
    });
  };

  return <tbody className="bl_table_border">{renderRows()}</tbody>;
};

export default Records;