@shakthillc/components/src/Table/Table.js

React generic components for shakthi products

import React, { Component } from "react";
import style from "./Tables.module.css";
import _ from "lodash";
import InputText from "../InputText/InputText";
import TableBadge from "./../TableBadge/TableBadge";
import PropTypes from "prop-types";
import Icon from "@material-ui/core/Icon";
//import {InputText,Button,Badge} from "@shakthillc/components"

class Table extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dbData: [],
      sortOrder: { path: this.props.initialSort || "", order: "" },
      theadShadow: true,
      selectVal: "",
      addValue: {},
      tempJson: {},
      scrollPosition: 2,
      showNavigation: false,
    };
    this.getKeyValue = this.getKeyValue.bind(this);
    this.handleSort = this.handleSort.bind(this);
    this.handleScroll = this.handleScroll.bind(this);
    this.generateHeader = this.generateHeader.bind(this);
    this.generateBody = this.generateBody.bind(this);
    this.handleSelect = this.handleSelect.bind(this);
    this.handleNavigate = this.handleNavigate.bind(this);
    this.sHeight = "";
    this.sTop = "";
    this.cHeight = "";
  }

  componentDidMount() {
    this.setState({ dbData: this.props.dbData });
  }
  componentDidUpdate(prevProps, prevState) {
    const { dbData } = this.props;
    const { scrollPosition } = this.state;
    const { dbData: prevdbData } = prevProps;

    if (scrollPosition == 1 && this.sTop != 0) {
      this.refs.tableBody.scrollTop = 0;
      this.setState({ scrollPosition: 2 });
    } else if (scrollPosition == 0 && this.sTop != 0) {
      this.refs.tableBody.scrollTop = this.totaltableheight;
      this.setState({ scrollPosition: 2 });
    }
    if (dbData.length > 0 && dbData.length != prevdbData.length) {
      this.setState({ dbData: this.props.dbData });
    } else if (!_.isEqual(prevdbData, dbData)) {
      this.setState({ dbData: this.props.dbData });
    }
  }
  getKeyValue() {
    const { dbData } = this.state;
    let keyValue = Object.keys({ ...dbData[0] });
    return keyValue;
  }
  handleSort(path) {
    const sortOrder = { ...this.state.sortOrder };
    sortOrder["path"] = path;
    sortOrder["order"] = sortOrder["order"] === "asc" ? "desc" : "asc";
    this.setState({ sortOrder });
  }
  handleScroll({ currentTarget }) {
    var theadShadow;
    theadShadow = currentTarget.scrollTop === 0 ? true : false;
    this.setState({ theadShadow });
    const { loadData } = this.props;
    // console.log(
    //   currentTarget.scrollHeight,
    //   currentTarget.scrollTop,
    //   currentTarget.clientHeight
    // );

    // this.sHeight = currentTarget.scrollHeight;
    this.sTop = currentTarget.scrollTop;
    // this.cHeight = currentTarget.clientHeight;
    let percentValue = (currentTarget.clientHeight / 100) * 50;
    this.totaltableheight = currentTarget.scrollHeight;
    // console.log(
    //   currentTarget.scrollHeight,
    //  parseInt( currentTarget.scrollTop +
    //   currentTarget.clientHeight)+1
    // );

    if (currentTarget.scrollTop > percentValue) {
      if (this.state.showNavigation == false) {
        this.setState({ showNavigation: true });
      }
    } else if (this.state.showNavigation == true) {
      this.setState({ showNavigation: false });
    }
    if (
      currentTarget.scrollHeight ==
      parseInt(currentTarget.scrollTop + currentTarget.clientHeight) + 1
    ) {
      loadData && loadData();
    }
  }
  generateHeader() {
    let { tableData } = this.props;
    const { sortOrder } = this.state;

    return tableData.map(({ label, value, width, i, sort = true }) => (
      <th
        key={i}
        align="left"
        key={value}
        style={{ width: width }}
        className={style["tableheader"]}
        onClick={() => sort && this.handleSort(value)}
      >
        {label}
        {sort && (
          <Icon
            className={
              sortOrder.order == "asc" && sortOrder.path == value
                ? style["sort__icon"]
                : style["sort__icon--desc"]
            }
          >
            sort
          </Icon>
        )}
      </th>
    ));
  }

  handleRowClick(e, data) {
    // e.preventDefault();
    // e.stopPropagation();
    // e.nativeEvent.stopImmediatePropagation();
    const { onRowClick } = this.props;
    const { tempJson } = this.state;
    this.setState({ tempJson: data });
    onRowClick && onRowClick(data);
  }

  generateBody(dbData) {
    let { tableData } = this.props;
    //console.log(tableData.clickDisabled)
    return dbData.map((data, i) => (
      <tr
        key={i}
        className={
          _.isEqual(this.state.tempJson, data)
            ? style["trow"] + " " + style["row-highlight"]
            : style["trow"]
        }
      >
        {tableData.map(({ value, badge, width, i,clickDisabled }) =>
          badge === undefined && badge !== true ? (
            clickDisabled ? (
              <td key={i} className={style["tdata"]} style={{ width: width }}>
                {"label" in data[value]
                  ? data[value]["label"]
                  : data[value]["value"]}
              </td>
            ) : (
              <td
                onClick={(e) => {
                  this.handleRowClick(e, data);
                }}
                key={i}
                className={style["tdata"]}
                style={{ width: width }}
              >
                {"label" in data[value]
                  ? data[value]["label"]
                  : data[value]["value"]}
              </td>
            )
          ) : clickDisabled ? (
            <td key={i} className={style["tdata"]} style={{ width: width }}>
              <TableBadge
                text={data[value].value}
                color={data[value].color}
                bgcolor={data[value].bgcolor}
              />
            </td>
          ) : (
            <td key={i} className={style["tdata"]} style={{ width: width }}>
              <TableBadge
                onClick={(e) => {
                  this.handleRowClick(e, data);
                }}
                text={data[value].value}
                color={data[value].color}
                bgcolor={data[value].bgcolor}
              />
            </td>
          )
        )}
      </tr>
    ));
  }
  handleSelect(e, selectVal, flag = true) {
    var addValue = { ...this.state.addValue };
    if (flag) {
      this.setState({ [selectVal]: e });
    } else {
      addValue[selectVal] = e.currentTarget.value;
      this.setState({ addValue });
    }
  }

  handleNavigate(value) {
    //console.log(value);
    this.setState({ scrollPosition: value });
  }
  render() {
    const {
      dbData,
      sortOrder,
      theadShadow,
      selectVal,
      showNavigation,
    } = this.state;
    const { tableSearch = false, tableHeight = "200px" } = this.props;
    var tableData = _.orderBy(
      dbData,
      `${sortOrder.path}['value']`,
      sortOrder.order
    );
    return (
      <React.Fragment>
        <div className={style["table_option"]}>
          {tableSearch && (
            <InputText
              icon="search"
              icon_position="right"
              placeHolder="filter name"
              value={selectVal}
              onKeyup={(value) => {
                this.handleSelect(value, "selectVal");
              }}
            />
          )}
        </div>

        <div className={style["table_container"]}>
          <table className={style["table__main"]}>
            <thead
              className={
                theadShadow === true
                  ? style["thead"]
                  : style.active + " " + style["thead"]
              }
            >
              <tr className={style["trow"]}>{this.generateHeader()}</tr>
            </thead>
            <tbody
              className={style["tbody"]}
              style={{ maxHeight: tableHeight }}
              ref="tableBody"
              onScroll={this.handleScroll}
            >
              {this.generateBody(tableData)}
            </tbody>
          </table>
          {showNavigation && (
            <div className={style["navigateIcon"]}>
              <span
                style={{ cursor: "pointer" }}
                onClick={() => {
                  this.handleNavigate(0);
                }}
              >
                <Icon>arrow_drop_down_circle</Icon>
              </span>
              <span
                style={{ cursor: "pointer" }}
                onClick={() => {
                  this.handleNavigate(1);
                }}
              >
                <Icon style={{ transform: `rotate(180deg)` }}>
                  arrow_drop_down_circle
                </Icon>
              </span>
            </div>
          )}
        </div>
      </React.Fragment>
    );
  }
}

export default Table;