@shakthillc/components/es/Table/Table.js

React generic components for shakthi products

import _defineProperty from "babel-runtime/helpers/defineProperty";
import _extends from "babel-runtime/helpers/extends";
import _Object$keys from "babel-runtime/core-js/object/keys";
import _Object$getPrototypeOf from "babel-runtime/core-js/object/get-prototype-of";
import _classCallCheck from "babel-runtime/helpers/classCallCheck";
import _createClass from "babel-runtime/helpers/createClass";
import _possibleConstructorReturn from "babel-runtime/helpers/possibleConstructorReturn";
import _inherits from "babel-runtime/helpers/inherits";
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"

var Table = function (_Component) {
  _inherits(Table, _Component);

  function Table(props) {
    _classCallCheck(this, Table);

    var _this = _possibleConstructorReturn(this, (Table.__proto__ || _Object$getPrototypeOf(Table)).call(this, 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 = "";
    return _this;
  }

  _createClass(Table, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.setState({ dbData: this.props.dbData });
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState) {
      var dbData = this.props.dbData;
      var scrollPosition = this.state.scrollPosition;
      var prevdbData = prevProps.dbData;


      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 });
      }
    }
  }, {
    key: "getKeyValue",
    value: function getKeyValue() {
      var dbData = this.state.dbData;

      var keyValue = _Object$keys(_extends({}, dbData[0]));
      return keyValue;
    }
  }, {
    key: "handleSort",
    value: function handleSort(path) {
      var sortOrder = _extends({}, this.state.sortOrder);
      sortOrder["path"] = path;
      sortOrder["order"] = sortOrder["order"] === "asc" ? "desc" : "asc";
      this.setState({ sortOrder: sortOrder });
    }
  }, {
    key: "handleScroll",
    value: function handleScroll(_ref) {
      var currentTarget = _ref.currentTarget;

      var theadShadow;
      theadShadow = currentTarget.scrollTop === 0 ? true : false;
      this.setState({ theadShadow: theadShadow });
      var loadData = this.props.loadData;
      // console.log(
      //   currentTarget.scrollHeight,
      //   currentTarget.scrollTop,
      //   currentTarget.clientHeight
      // );

      // this.sHeight = currentTarget.scrollHeight;

      this.sTop = currentTarget.scrollTop;
      // this.cHeight = currentTarget.clientHeight;
      var 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();
      }
    }
  }, {
    key: "generateHeader",
    value: function generateHeader() {
      var _this2 = this;

      var tableData = this.props.tableData;
      var sortOrder = this.state.sortOrder;


      return tableData.map(function (_ref2) {
        var _React$createElement;

        var label = _ref2.label,
            value = _ref2.value,
            width = _ref2.width,
            i = _ref2.i,
            _ref2$sort = _ref2.sort,
            sort = _ref2$sort === undefined ? true : _ref2$sort;
        return React.createElement(
          "th",
          (_React$createElement = {
            key: i,
            align: "left"
          }, _defineProperty(_React$createElement, "key", value), _defineProperty(_React$createElement, "style", { width: width }), _defineProperty(_React$createElement, "className", style["tableheader"]), _defineProperty(_React$createElement, "onClick", function onClick() {
            return sort && _this2.handleSort(value);
          }), _React$createElement),
          label,
          sort && React.createElement(
            Icon,
            {
              className: sortOrder.order == "asc" && sortOrder.path == value ? style["sort__icon"] : style["sort__icon--desc"]
            },
            "sort"
          )
        );
      });
    }
  }, {
    key: "handleRowClick",
    value: function handleRowClick(e, data) {
      // e.preventDefault();
      // e.stopPropagation();
      // e.nativeEvent.stopImmediatePropagation();
      var onRowClick = this.props.onRowClick;
      var tempJson = this.state.tempJson;

      this.setState({ tempJson: data });
      onRowClick && onRowClick(data);
    }
  }, {
    key: "generateBody",
    value: function generateBody(dbData) {
      var _this3 = this;

      var tableData = this.props.tableData;
      //console.log(tableData.clickDisabled)

      return dbData.map(function (data, i) {
        return React.createElement(
          "tr",
          {
            key: i,
            className: _.isEqual(_this3.state.tempJson, data) ? style["trow"] + " " + style["row-highlight"] : style["trow"]
          },
          tableData.map(function (_ref3) {
            var value = _ref3.value,
                badge = _ref3.badge,
                width = _ref3.width,
                i = _ref3.i,
                clickDisabled = _ref3.clickDisabled;
            return badge === undefined && badge !== true ? clickDisabled ? React.createElement(
              "td",
              { key: i, className: style["tdata"], style: { width: width } },
              "label" in data[value] ? data[value]["label"] : data[value]["value"]
            ) : React.createElement(
              "td",
              {
                onClick: function onClick(e) {
                  _this3.handleRowClick(e, data);
                },
                key: i,
                className: style["tdata"],
                style: { width: width }
              },
              "label" in data[value] ? data[value]["label"] : data[value]["value"]
            ) : clickDisabled ? React.createElement(
              "td",
              { key: i, className: style["tdata"], style: { width: width } },
              React.createElement(TableBadge, {
                text: data[value].value,
                color: data[value].color,
                bgcolor: data[value].bgcolor
              })
            ) : React.createElement(
              "td",
              { key: i, className: style["tdata"], style: { width: width } },
              React.createElement(TableBadge, {
                onClick: function onClick(e) {
                  _this3.handleRowClick(e, data);
                },
                text: data[value].value,
                color: data[value].color,
                bgcolor: data[value].bgcolor
              })
            );
          })
        );
      });
    }
  }, {
    key: "handleSelect",
    value: function handleSelect(e, selectVal) {
      var flag = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;

      var addValue = _extends({}, this.state.addValue);
      if (flag) {
        this.setState(_defineProperty({}, selectVal, e));
      } else {
        addValue[selectVal] = e.currentTarget.value;
        this.setState({ addValue: addValue });
      }
    }
  }, {
    key: "handleNavigate",
    value: function handleNavigate(value) {
      //console.log(value);
      this.setState({ scrollPosition: value });
    }
  }, {
    key: "render",
    value: function render() {
      var _this4 = this;

      var _state = this.state,
          dbData = _state.dbData,
          sortOrder = _state.sortOrder,
          theadShadow = _state.theadShadow,
          selectVal = _state.selectVal,
          showNavigation = _state.showNavigation;
      var _props = this.props,
          _props$tableSearch = _props.tableSearch,
          tableSearch = _props$tableSearch === undefined ? false : _props$tableSearch,
          _props$tableHeight = _props.tableHeight,
          tableHeight = _props$tableHeight === undefined ? "200px" : _props$tableHeight;

      var tableData = _.orderBy(dbData, sortOrder.path + "['value']", sortOrder.order);
      return React.createElement(
        React.Fragment,
        null,
        React.createElement(
          "div",
          { className: style["table_option"] },
          tableSearch && React.createElement(InputText, {
            icon: "search",
            icon_position: "right",
            placeHolder: "filter name",
            value: selectVal,
            onKeyup: function onKeyup(value) {
              _this4.handleSelect(value, "selectVal");
            }
          })
        ),
        React.createElement(
          "div",
          { className: style["table_container"] },
          React.createElement(
            "table",
            { className: style["table__main"] },
            React.createElement(
              "thead",
              {
                className: theadShadow === true ? style["thead"] : style.active + " " + style["thead"]
              },
              React.createElement(
                "tr",
                { className: style["trow"] },
                this.generateHeader()
              )
            ),
            React.createElement(
              "tbody",
              {
                className: style["tbody"],
                style: { maxHeight: tableHeight },
                ref: "tableBody",
                onScroll: this.handleScroll
              },
              this.generateBody(tableData)
            )
          ),
          showNavigation && React.createElement(
            "div",
            { className: style["navigateIcon"] },
            React.createElement(
              "span",
              {
                style: { cursor: "pointer" },
                onClick: function onClick() {
                  _this4.handleNavigate(0);
                }
              },
              React.createElement(
                Icon,
                null,
                "arrow_drop_down_circle"
              )
            ),
            React.createElement(
              "span",
              {
                style: { cursor: "pointer" },
                onClick: function onClick() {
                  _this4.handleNavigate(1);
                }
              },
              React.createElement(
                Icon,
                { style: { transform: "rotate(180deg)" } },
                "arrow_drop_down_circle"
              )
            )
          )
        )
      );
    }
  }]);

  return Table;
}(Component);

export default Table;