@shakthillc/components/lib/Table/Table.js

React generic components for shakthi products

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _TablesModule = require("./Tables.module.css");

var _TablesModule2 = _interopRequireDefault(_TablesModule);

var _lodash = require("lodash");

var _lodash2 = _interopRequireDefault(_lodash);

var _InputText = require("../InputText/InputText");

var _InputText2 = _interopRequireDefault(_InputText);

var _TableBadge = require("./../TableBadge/TableBadge");

var _TableBadge2 = _interopRequireDefault(_TableBadge);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _Icon = require("@material-ui/core/Icon");

var _Icon2 = _interopRequireDefault(_Icon);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

//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 (!_lodash2.default.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 _react2.default.createElement(
          "th",
          (_React$createElement = {
            key: i,
            align: "left"
          }, _defineProperty(_React$createElement, "key", value), _defineProperty(_React$createElement, "style", { width: width }), _defineProperty(_React$createElement, "className", _TablesModule2.default["tableheader"]), _defineProperty(_React$createElement, "onClick", function onClick() {
            return sort && _this2.handleSort(value);
          }), _React$createElement),
          label,
          sort && _react2.default.createElement(
            _Icon2.default,
            {
              className: sortOrder.order == "asc" && sortOrder.path == value ? _TablesModule2.default["sort__icon"] : _TablesModule2.default["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 _react2.default.createElement(
          "tr",
          {
            key: i,
            className: _lodash2.default.isEqual(_this3.state.tempJson, data) ? _TablesModule2.default["trow"] + " " + _TablesModule2.default["row-highlight"] : _TablesModule2.default["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 ? _react2.default.createElement(
              "td",
              { key: i, className: _TablesModule2.default["tdata"], style: { width: width } },
              "label" in data[value] ? data[value]["label"] : data[value]["value"]
            ) : _react2.default.createElement(
              "td",
              {
                onClick: function onClick(e) {
                  _this3.handleRowClick(e, data);
                },
                key: i,
                className: _TablesModule2.default["tdata"],
                style: { width: width }
              },
              "label" in data[value] ? data[value]["label"] : data[value]["value"]
            ) : clickDisabled ? _react2.default.createElement(
              "td",
              { key: i, className: _TablesModule2.default["tdata"], style: { width: width } },
              _react2.default.createElement(_TableBadge2.default, {
                text: data[value].value,
                color: data[value].color,
                bgcolor: data[value].bgcolor
              })
            ) : _react2.default.createElement(
              "td",
              { key: i, className: _TablesModule2.default["tdata"], style: { width: width } },
              _react2.default.createElement(_TableBadge2.default, {
                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 = _lodash2.default.orderBy(dbData, sortOrder.path + "['value']", sortOrder.order);
      return _react2.default.createElement(
        _react2.default.Fragment,
        null,
        _react2.default.createElement(
          "div",
          { className: _TablesModule2.default["table_option"] },
          tableSearch && _react2.default.createElement(_InputText2.default, {
            icon: "search",
            icon_position: "right",
            placeHolder: "filter name",
            value: selectVal,
            onKeyup: function onKeyup(value) {
              _this4.handleSelect(value, "selectVal");
            }
          })
        ),
        _react2.default.createElement(
          "div",
          { className: _TablesModule2.default["table_container"] },
          _react2.default.createElement(
            "table",
            { className: _TablesModule2.default["table__main"] },
            _react2.default.createElement(
              "thead",
              {
                className: theadShadow === true ? _TablesModule2.default["thead"] : _TablesModule2.default.active + " " + _TablesModule2.default["thead"]
              },
              _react2.default.createElement(
                "tr",
                { className: _TablesModule2.default["trow"] },
                this.generateHeader()
              )
            ),
            _react2.default.createElement(
              "tbody",
              {
                className: _TablesModule2.default["tbody"],
                style: { maxHeight: tableHeight },
                ref: "tableBody",
                onScroll: this.handleScroll
              },
              this.generateBody(tableData)
            )
          ),
          showNavigation && _react2.default.createElement(
            "div",
            { className: _TablesModule2.default["navigateIcon"] },
            _react2.default.createElement(
              "span",
              {
                style: { cursor: "pointer" },
                onClick: function onClick() {
                  _this4.handleNavigate(0);
                }
              },
              _react2.default.createElement(
                _Icon2.default,
                null,
                "arrow_drop_down_circle"
              )
            ),
            _react2.default.createElement(
              "span",
              {
                style: { cursor: "pointer" },
                onClick: function onClick() {
                  _this4.handleNavigate(1);
                }
              },
              _react2.default.createElement(
                _Icon2.default,
                { style: { transform: "rotate(180deg)" } },
                "arrow_drop_down_circle"
              )
            )
          )
        )
      );
    }
  }]);

  return Table;
}(_react.Component);

exports.default = Table;