react-tbl/dist/tableBody.js

A lightweight & easy to use react table implementation.

import React, { useContext } from 'react';
import { ReactTblContext } from './common';
import { TR, TD, ToolTip } from './tr_td';

var TableBody = function TableBody(_ref) {
  var currentDataPage = _ref.currentDataPage,
      columns = _ref.columns,
      setCurrentDataPage = _ref.setCurrentDataPage;

  var _useContext = useContext(ReactTblContext),
      _useContext$table = _useContext.table,
      rowBGColor = _useContext$table.rowBGColor,
      textColor = _useContext$table.textColor,
      columnMinWidth = _useContext$table.columnMinWidth,
      showToolTip = _useContext$table.showToolTip,
      fontFamily = _useContext$table.fontFamily,
      _useContext$body = _useContext.body,
      tooltipTextColor = _useContext$body.tooltipTextColor,
      tooltipBgColor = _useContext$body.tooltipBgColor,
      tooltipBorderColor = _useContext$body.tooltipBorderColor,
      backgroundColor = _useContext$body.backgroundColor,
      borderColor = _useContext$body.borderColor,
      cellPadding = _useContext$body.cellPadding,
      fontSize = _useContext$body.fontSize,
      copyCellDataOnClick = _useContext.copyCellDataOnClick;

  var refs = {};

  var copyToClipboard = function copyToClipboard(info, tdId) {
    tdId.classList.add("copyCell");
    var el = document.createElement('textarea');
    el.value = info;
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
    setTimeout(function () {
      tdId.classList.remove("copyCell");
    }, 1000);
  };

  var ejectParams = function ejectParams(dataRow, col, idx, rowIdx) {
    var _col$copyCellDataOnCl;

    var columnKey = col.colKey;
    var copyDataActive = (_col$copyCellDataOnCl = col.copyCellDataOnClick) !== null && _col$copyCellDataOnCl !== void 0 ? _col$copyCellDataOnCl : copyCellDataOnClick;
    var refKey = "td_".concat(idx, "_").concat(rowIdx, "_ref");
    refs[refKey] = React.createRef();
    var res = {
      columnKey: columnKey,
      _key: "td_".concat(columnKey, "_").concat(rowIdx),
      currentValue: dataRow[columnKey],
      copyDataActive: copyDataActive,
      refKey: refKey,
      onClick: function onClick() {
        var _dataRow$columnKey, _dataRow$columnKey2;

        if (col.CustomCell || !copyDataActive || !dataRow[columnKey] || ((_dataRow$columnKey = dataRow[columnKey]) === null || _dataRow$columnKey === void 0 ? void 0 : _dataRow$columnKey.length) == 0) return;
        copyToClipboard((_dataRow$columnKey2 = dataRow[columnKey]) === null || _dataRow$columnKey2 === void 0 ? void 0 : _dataRow$columnKey2.toString(), refs[refKey].current);
      }
    };
    return res;
  };

  return /*#__PURE__*/React.createElement("tbody", null, currentDataPage.map(function (dataRow, rowIdx) {
    return /*#__PURE__*/React.createElement(TR, {
      key: "tr_".concat(rowIdx),
      id: "tr_".concat(rowIdx),
      idx: rowIdx,
      rowBGColor: rowBGColor
    }, columns.map(function (col, idx) {
      var _props$currentValue, _props$currentValue2;

      var props = ejectParams(dataRow, col, idx, rowIdx);
      return /*#__PURE__*/React.createElement(TD, {
        key: props._key,
        id: "td_".concat(idx, "_").concat(rowIdx),
        ref: refs[props.refKey],
        dataTip: (_props$currentValue = props.currentValue) === null || _props$currentValue === void 0 ? void 0 : _props$currentValue.toString(),
        size: col.size || 1,
        className: props.columnKey,
        textColor: textColor,
        columnMinWidth: columnMinWidth,
        onClick: props.onClick,
        copyCellDataOnClick: props.copyDataActive,
        backgroundColor: backgroundColor,
        borderColor: borderColor,
        cellPadding: cellPadding,
        fontSize: fontSize
      }, !dataRow.empty && /*#__PURE__*/React.createElement("div", {
        className: "cellWrapper",
        id: "cellWrapper"
      }, col.CustomCell ? /*#__PURE__*/React.createElement(col.CustomCell, {
        dataRow: dataRow,
        currentKey: col.colKey,
        currentValue: props.currentValue,
        pageData: currentDataPage,
        setPageData: setCurrentDataPage
      }) : props.currentValue), (showToolTip || col.showToolTip) && ((_props$currentValue2 = props.currentValue) === null || _props$currentValue2 === void 0 ? void 0 : _props$currentValue2.length) > 0 && /*#__PURE__*/React.createElement(ToolTip, {
        bgColor: tooltipBgColor,
        textColor: tooltipTextColor || textColor,
        borderColor: tooltipBorderColor || tooltipBgColor,
        className: "tooltiptext"
      }, props.currentValue));
    }));
  }));
};

export default TableBody;