periodicjs.ext.reactapp/adminclient/_src/components/ResponsiveTable/index.js

react based admin.

'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _stringify = require('babel-runtime/core-js/json/stringify');

var _stringify2 = _interopRequireDefault(_stringify);

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _typeof2 = require('babel-runtime/helpers/typeof');

var _typeof3 = _interopRequireDefault(_typeof2);

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

var _assign = require('babel-runtime/core-js/object/assign');

var _assign2 = _interopRequireDefault(_assign);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactRouter = require('react-router');

var _reBulma = require('re-bulma');

var rb = _interopRequireWildcard(_reBulma);

var _moment = require('moment');

var _moment2 = _interopRequireDefault(_moment);

var _numeral = require('numeral');

var _numeral2 = _interopRequireDefault(_numeral);

var _util = require('../../util');

var _util2 = _interopRequireDefault(_util);

var _querystring = require('querystring');

var _querystring2 = _interopRequireDefault(_querystring);

var _debounce = require('debounce');

var _debounce2 = _interopRequireDefault(_debounce);

var _flat = require('flat');

var _AppLayoutMap = require('../AppLayoutMap');

var _reactFileReaderInput = require('react-file-reader-input');

var _reactFileReaderInput2 = _interopRequireDefault(_reactFileReaderInput);

var _path = require('path');

var _path2 = _interopRequireDefault(_path);

var _json2Csv = require('json-2-csv');

var _RACodeMirror = require('../RACodeMirror');

var _RACodeMirror2 = _interopRequireDefault(_RACodeMirror);

var _ResponsiveDatalist = require('../ResponsiveDatalist');

var _ResponsiveDatalist2 = _interopRequireDefault(_ResponsiveDatalist);

var _TableHelpers = require('./TableHelpers');

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

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

// import capitalize from 'capitalize';
// import pluralize from 'pluralize';
var filterLabelStyleProps = {
  alignItems: 'center',
  display: 'flex',
  flex: 1,
  height: '100%'
};

var ResponsiveTable = function (_Component) {
  (0, _inherits3.default)(ResponsiveTable, _Component);

  function ResponsiveTable(props) {
    (0, _classCallCheck3.default)(this, ResponsiveTable);

    // console.debug('this.props.getState()',this.props.getState());
    var _this = (0, _possibleConstructorReturn3.default)(this, (ResponsiveTable.__proto__ || (0, _getPrototypeOf2.default)(ResponsiveTable)).call(this, props));
    // console.log({props})


    var rows = props.rows || [];
    rows = rows.documents ? rows.documents : rows;
    var headers = (!props.headers || !props.headers.length) && rows[0] ? (0, _TableHelpers.getHeadersFromRows)({
      rows: props.rows,
      sortable: props.sortable,
      excludeEmptyHeaders: props.excludeEmptyHeaders
    }) : props.headers;
    headers = (0, _TableHelpers.getOptionsHeaders)(props, headers);
    headers = (0, _TableHelpers.excludeEmptyHeaders)({
      headers: headers,
      excludeEmptyHeaders: props.excludeEmptyHeaders
    });
    if (props.flattenRowData) {
      rows = rows.map(function (row) {
        return (0, _assign2.default)({}, row, (0, _flat.flatten)(row, props.flattenRowDataOptions));
      });
    }
    _this.filterSelectOptions = (0, _TableHelpers.getFilterOptions)({ rows: rows, headers: headers, filters: _this.props.filterSelectOptions, simpleSearchFilter: _this.props.simpleSearchFilter });
    _this.sortableSelctOptions = (0, _TableHelpers.getFilterSortableOption)({ headers: headers });
    // const newRowData = (headers && Array.isArray(headers) && headers.length)
    //   ? headers.reduce((newRow, header) => {
    //     if (header.sortid && header.footerFormElementPassProps && header.footerFormElementPassProps.value) {
    //       newRow[ header.sortid ] = header.footerFormElementPassProps.value;
    //     }
    //     return newRow;
    //   })
    //   : {};
    var numItems = typeof props.numItems === 'number' ? props.numItems : 0;
    if (rows.length && typeof props.numItems === 'number' && rows.length > props.numItems) numItems = rows.length;
    // const numItems = (rows.length > props.nu) typeof props.numItems === 'number' ? props.numItems : rows.length;
    var numPages = _this.props.numPages;
    var calcNumPages = Math.ceil(numItems / props.limit);
    if (calcNumPages > numPages) numPages = calcNumPages;
    _this.state = {
      headers: headers,
      rows: rows,
      hasPagination: props.hasPagination,
      hasHeader: props.hasHeader,
      hasFooter: props.hasFooter,
      limit: props.limit,
      currentPage: props.currentPage,
      numItems: numItems,
      numPages: numPages,
      numButtons: props.numButtons,
      isLoading: false,
      sortProp: _this.props.searchField || '_id',
      sortOrder: 'desc',
      filterRowData: [],
      filterRowNewData: _TableHelpers.defaultNewRowData,
      newRowData: {},
      selectedRowData: {},
      selectedRowIndex: {},
      showFilterSearch: props.showFilterSearch,
      disableSort: props.disableSort,
      hiddenHeaders: props.hiddenHeaders || []
      // usingFiltersInSearch: props.usingFiltersInSearch,
    };
    _this.searchFunction = (0, _debounce2.default)(_this.updateTableData, 200);
    _this.getRenderedComponent = _AppLayoutMap.getRenderedComponent.bind(_this);
    _this.addRow = _this.updateByAddRow.bind(_this);
    _this.replaceRows = _this.updateByReplacingRows.bind(_this);
    _this.addingRows = _this.updateByAddingRows.bind(_this);
    _this.selectRow = _this.updateSelectedRow.bind(_this);
    _this.deleteRow = _this.updateByDeleteRow.bind(_this);
    _this.moveRowDown = _this.updateByMoveRowDown.bind(_this);
    _this.moveRowUp = _this.updateByMoveRowUp.bind(_this);
    _this.updateNewRowText = _this.updateNewRowDataText.bind(_this);
    _this.updateInlineRowText = _this.updateInlineRowDataText.bind(_this);
    _this.getFooterAddRow = _this.updateGetFooterAddRow.bind(_this);
    _this.removeFilterRow = _this.removeFilterByDeleteRow.bind(_this);
    _this.addFilterRow = _this.addFilterByAddRow.bind(_this);
    _this.updateNewFilterRowText = _this.updateNewFilterRowDataText.bind(_this);
    _this.searchField = _this.props.searchField ? _this.props.searchField : Array.isArray(_this.props.headers) && _this.props.headers.length ? _this.props.headers[0].sortid : Array.isArray(_this.state.headers) && _this.state.headers.length ? _this.state.headers[0].sortid : undefined;
    _this.fastUpdateRows = _this.fastUpdateRows.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(ResponsiveTable, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var rows = nextProps.rows || [];
      var headers = (!nextProps.headers || !nextProps.headers.length) && rows[0] ? (0, _TableHelpers.getHeadersFromRows)({
        rows: rows,
        sortable: nextProps.sortable,
        excludeEmptyHeaders: nextProps.excludeEmptyHeaders
      }) : nextProps.headers;
      headers = (0, _TableHelpers.getOptionsHeaders)(nextProps);
      headers = (0, _TableHelpers.excludeEmptyHeaders)({
        headers: headers,
        excludeEmptyHeaders: nextProps.excludeEmptyHeaders
      });
      if (nextProps.flattenRowData) {
        rows = (rows || []).map(function (row) {
          return (0, _assign2.default)({}, row, (0, _flat.flatten)(row, nextProps.flattenRowDataOptions));
        });
      }
      // console.debug('nextProps.limit', nextProps.limit);
      // console.debug('this.state.limit', this.state.limit);

      this.setState({
        headers: headers,
        rows: rows,
        hasPagination: nextProps.hasPagination,
        hasHeader: nextProps.hasHeader,
        hasFooter: nextProps.hasFooter,
        limit: nextProps.limit,
        currentPage: nextProps.currentPage,
        numItems: nextProps.numItems,
        numPages: Math.ceil(nextProps.numItems / nextProps.limit),
        numButtons: nextProps.numButtons
      });
    }
  }, {
    key: 'fastUpdateRows',
    value: function fastUpdateRows(_ref) {
      var _this2 = this;

      var rows = _ref.rows,
          clearNewRowData = _ref.clearNewRowData;

      var filteredRows = rows.filter(function (row) {
        return row && (0, _keys2.default)(row).length > 0;
      });
      var updatedState = { rows: filteredRows };
      if (clearNewRowData) {
        updatedState.newRowData = {};
      }
      // console.log({ filteredRows, rows, updatedState, });
      this.setState(updatedState, function () {
        // console.warn('update form', { rows, }, 'this.props.onChange', this.props.onChange.toString());
        if (_this2.props.tableForm) _this2.props.onChange(updatedState);
      });
    }
  }, {
    key: 'updateSelectedRow',
    value: function updateSelectedRow(options) {
      // console.debug({ options });
      this.updateTableData(options);
    }
  }, {
    key: 'updateByReplacingRows',
    value: function updateByReplacingRows(newrows) {
      this.updateTableData({ rows: newrows.concat([]), clearNewRowData: true });
    }
  }, {
    key: 'toggleHeader',
    value: function toggleHeader(_ref2) {
      var header = _ref2.header;

      var hiddenIndex = this.state.hiddenHeaders.findIndex(function (head) {
        return head === header.sortid;
      });
      var hiddenHeaders = [].concat(this.state.hiddenHeaders);
      if (hiddenIndex < 0) hiddenHeaders.push(header.sortid);else hiddenHeaders.splice(hiddenIndex, 1);
      this.setState({ hiddenHeaders: hiddenHeaders });
    }
  }, {
    key: 'updateByAddingRows',
    value: function updateByAddingRows(newrows) {
      var rows = this.state.rows.concat(newrows || []);
      // this.updateTableData({ rows, clearNewRowData: true, });
      this.fastUpdateRows({ rows: rows, clearNewRowData: true });
    }
  }, {
    key: 'updateByAddRow',
    value: function updateByAddRow() {
      var rows = this.state.rows.concat([]);
      var newRow = (0, _assign2.default)({}, this.state.newRowData);
      rows.splice(rows.length, 0, newRow);
      // console.debug({ rowIndex, rows, deletedRow }, this.state.rows);
      // this.props.onChange({ rows, });
      // this.updateTableData({ rows, clearNewRowData: true, });
      this.fastUpdateRows({ rows: rows, clearNewRowData: true });
    }
  }, {
    key: 'updateByDeleteRow',
    value: function updateByDeleteRow(rowIndex) {
      var newrows = []; //.concat(this.state.rows||[]);
      this.state.rows.forEach(function (row, i) {
        // console.log({ rowIndex, i });
        if (i !== rowIndex) {
          newrows.push(row);
        }
      });
      this.fastUpdateRows({ rows: newrows });
    }
  }, {
    key: 'updateByMoveRowUp',
    value: function updateByMoveRowUp(rowIndex) {
      var rows = this.state.rows.concat([]);
      var deletedRow = rows.splice(rowIndex, 1)[0];
      rows.splice(rowIndex - 1, 0, deletedRow);
      // console.debug({ rowIndex, rows, deletedRow }, this.state.rows);
      // this.props.onChange({ rows, });
      this.fastUpdateRows({ rows: rows });
    }
  }, {
    key: 'updateByMoveRowDown',
    value: function updateByMoveRowDown(rowIndex) {
      var rows = this.state.rows.concat([]);
      var deletedRow = rows.splice(rowIndex, 1)[0];
      rows.splice(rowIndex + 1, 0, deletedRow);
      // console.debug({ rowIndex, rows, deletedRow }, this.state.rows);
      // this.props.onChange({ rows, });
      this.fastUpdateRows({ rows: rows });
    }
  }, {
    key: 'updateNewRowDataText',
    value: function updateNewRowDataText(options) {
      var name = options.name,
          text = options.text;

      var updatedStateProp = {
        newRowData: (0, _assign2.default)({}, this.state.newRowData, (0, _defineProperty3.default)({}, name, text))
      };
      this.props.headers.forEach(function (header) {
        if (header.sortid !== name && header.formtype && header.defaultValue && !updatedStateProp.newRowData[header.sortid]) {
          updatedStateProp.newRowData[header.sortid] = header.defaultValue;
        }
      });
      // console.debug({ updatedStateProp, options });
      this.setState(updatedStateProp);
    }
  }, {
    key: 'updateInlineRowDataText',
    value: function updateInlineRowDataText(options) {
      var name = options.name,
          text = options.text,
          rowIndex = options.rowIndex;

      var rows = this.state.rows.concat([]);
      rows[rowIndex][name] = text;
      // console.debug({ rowIndex, rows, deletedRow }, this.state.rows);
      // this.props.onChange({ rows, });
      this.fastUpdateRows({ rows: rows });
    }
  }, {
    key: 'handleFileUpload',
    value: function handleFileUpload(type) {
      var _this3 = this;

      return function (e, results) {
        var updatefunction = type === 'replace' ? _this3.replaceRows : _this3.addingRows;
        try {
          console.debug({ e: e, results: results });
          results.forEach(function (result) {
            var _result = (0, _slicedToArray3.default)(result, 2),
                e = _result[0],
                file = _result[1];

            if (_path2.default.extname(file.name) === '.csv') {
              (0, _json2Csv.csv2json)(e.target.result, function (err, newRows) {
                if (err) throw err;
                // console.debug({ newRows, }, 'e.target.result', e.target.result);
                updatefunction(newRows);
              }, {
                options: _this3.props.csvOptions
                // keys: this.state.headers.map(header => header.sortid),  
              });
            } else {
              var newRows = JSON.parse(e.target.result);
              updatefunction(newRows);
            }
          });
        } catch (e) {
          _this3.props.errorNotification(e);
        }
      };
    }
  }, {
    key: 'removeFilterByDeleteRow',
    value: function removeFilterByDeleteRow(rowIndex) {
      var _this4 = this;

      var rows = this.state.filterRowData.concat([]);
      rows.splice(rowIndex, 1);
      this.setState({ filterRowData: rows }, function () {
        _this4.updateTableData({});
      });
    }
  }, {
    key: 'addFilterByAddRow',
    value: function addFilterByAddRow() {
      var _this5 = this;

      var rows = this.state.filterRowData.concat([]);
      var newRow = (0, _assign2.default)({}, this.state.filterRowNewData);
      rows.splice(rows.length, 0, newRow);
      if (newRow.property === '__property__') {
        this.props.createNotification({ text: 'Please select a property', type: 'error', timed: 5000 });
      } else if (newRow.filter_value === '__filter__') {
        this.props.createNotification({ text: 'Please select a filter', type: 'error', timed: 5000 });
      } else {
        // console.debug('addFilterByAddRow', { rows });
        this.setState({ filterRowData: rows, filterRowNewData: _TableHelpers.defaultNewRowData }, function () {
          _this5.updateTableData({});
        });
      }
    }
  }, {
    key: 'updateNewFilterRowDataText',
    value: function updateNewFilterRowDataText(options) {
      var name = options.name,
          text = options.text;

      var updatedStateProp = {
        filterRowNewData: (0, _assign2.default)({}, this.state.filterRowNewData, (0, _defineProperty3.default)({}, name, text))
      };
      // console.debug({ updatedStateProp, options });
      this.setState(updatedStateProp);
    }
  }, {
    key: 'updateTableData',
    value: function updateTableData() {
      var _this6 = this;

      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

      var updatedState = {
        modifyTimeStamp: new Date()
      };
      var newSortOptions = {};
      // console.warn('updateTableData',{options})
      // options.rows = undefined;
      // console.log('updateTableData this', this,{updatedState});
      if (options.newrows) {
        options.rows = undefined;
        delete options.rows;
        options.rows = [].concat(options.newrows);
      }
      if (options.clearNewRowData) {
        updatedState.newRowData = {};
      }
      if ((0, _typeof3.default)(options.selectedRowIndex) !== undefined) {
        updatedState.selectedRowIndex = options.selectedRowIndex;
      }
      if ((0, _typeof3.default)(options.selectedRowData) !== undefined) {
        updatedState.selectedRowData = options.selectedRowData;
      }
      if (!this.props.baseUrl) {
        var searchField = this.searchField;
        if (options.rows && Array.isArray(options.rows)) {
          updatedState = (0, _assign2.default)({}, updatedState, { rows: [].concat((0, _toConsumableArray3.default)(options.rows)) });
        } else {
          updatedState.rows = typeof options.rows !== 'undefined' ? options.rows : this.props.rows;
        }
        // console.debug('initial',{ updatedState, });
        if (options.sort) {
          newSortOptions.sortProp = options.sort;
          if (this.state.sortProp === options.sort) {
            newSortOptions.sortOrder = this.state.sortOrder !== 'desc' ? 'desc' : 'asc';
          } else {
            newSortOptions.sortOrder = 'desc';
          }
          updatedState.rows = updatedState.rows.sort(_util2.default.sortObject(newSortOptions.sortOrder, options.sort));
          updatedState.sortOrder = newSortOptions.sortOrder;
          updatedState.sortProp = options.sort;
        } else if (this.props.turnOffTableSort) {
          // updatedState.rows = updatedState.rows;
        } else if ((this.state.sortOrder || this.state.sortProp) && !this.state.disableSort) {
          // newSortOptions.sortProp = this.state.sortProp;
          // newSortOptions.sortOrder = (this.state.sortOrder === 'desc' || this.state.sortOrder === '-') ? 'desc' : 'asc';
          // updatedState.rows = updatedState.rows.sort(utilities.sortObject(newSortOptions.sortOrder, newSortOptions.sortProp));
        }

        if (this.props.tableSearch && this.state.filterRowData && this.state.filterRowData.length) {
          var filteredRows = [];
          updatedState.rows.forEach(function (row) {
            _this6.state.filterRowData.forEach(function (filter) {
              if (row[filter.property]) {
                switch (filter.filter_value) {
                  case 'like':
                  case 'in':
                    if (row[filter.property].indexOf(filter.value) !== -1) filteredRows.push(row);
                    break;
                  case 'not':
                    if (row[filter.property] !== filter.value) filteredRows.push(row);
                    break;
                  case 'not-like':
                  case 'not-in':
                    if (row[filter.property].indexOf(filter.value) === -1) filteredRows.push(row);
                    break;
                  case 'lt':
                    if (row[filter.property] < filter.value) filteredRows.push(row);
                    break;
                  case 'lte':
                    if (row[filter.property] <= filter.value) filteredRows.push(row);
                    break;
                  case 'gt':
                    if (row[filter.property] > filter.value) filteredRows.push(row);
                    break;
                  case 'gte':
                    if (row[filter.property] >= filter.value) filteredRows.push(row);
                    break;
                  case 'exists':
                    if (typeof row[filter.property] !== 'undefined') filteredRows.push(row);
                    break;
                  case 'size':
                    if (row[filter.property].length > filter.value) filteredRows.push(row);
                    break;
                  case 'is-date':
                    if ((0, _moment2.default)(row[filter.property]).isSame(filter.value)) filteredRows.push(row);
                    break;
                  case 'lte-date':
                    if ((0, _moment2.default)(row[filter.property]).isSameOrBefore(filter.value)) filteredRows.push(row);
                    break;
                  case 'lt-date':
                    if ((0, _moment2.default)(row[filter.property]).isBefore(filter.value)) filteredRows.push(row);
                    break;
                  case 'gte-date':
                    if ((0, _moment2.default)(row[filter.property]).isSameOrAfter(filter.value)) filteredRows.push(row);
                    break;
                  case 'gt-date':
                    if ((0, _moment2.default)(row[filter.property]).isAfter(filter.value)) filteredRows.push(row);
                    break;
                  case 'is':
                  default:
                    if (row[filter.property] === filter.value) filteredRows.push(row);
                    break;
                }
              }
            });
            // row[ searchField ].indexOf(options.search) !== -1
          });
          updatedState.rows = filteredRows;
          // console.debug('updatedState.rows', updatedState.rows, { filteredRows, });
        }
        if (this.props.tableSearch && searchField && options.search) {
          updatedState.rows = updatedState.rows.filter(function (row) {
            return row[searchField] && row[searchField].toString().toLowerCase().indexOf(options.search.toString().toLowerCase()) !== -1;
          });
        }
        updatedState.numPages = Math.ceil(updatedState.rows.length / this.state.limit);
        updatedState.limit = this.state.limit;
        updatedState.currentPage = typeof options.pagenum !== 'undefined' ? options.pagenum : this.state.currentPage && this.state.currentPage <= updatedState.numPages ? this.state.currentPage : 1;
        updatedState.isLoading = false;
        // else {
        // if (this.props.tableForm) {
        //   // console.warn('calling on change with baseurl', { updatedState });
        //   this.props.onChange(updatedState);
        // }
        // this.setState(updatedState);
        this.setState(updatedState, function () {
          if (_this6.props.tableForm) {
            _this6.props.onChange(updatedState);
          }
        });

        // }
      } else {
        if (options.sort) {
          newSortOptions.sortProp = options.sort;
          if (this.state.sortProp === options.sort) {
            newSortOptions.sortOrder = this.state.sortOrder === '' ? '-' : '';
          } else {
            newSortOptions.sortOrder = '';
          }
        } else if (this.props.turnOffTableSort) {
          // updatedState.rows = updatedState.rows;
        } else if (this.state.sortOrder || this.state.sortProp) {
          newSortOptions.sortProp = this.state.sortProp;
          newSortOptions.sortOrder = this.state.sortOrder === 'desc' || this.state.sortOrder === '-' ? '-' : '';
        }
        if (options.pagenum < 1) {
          options.pagenum = 1;
        }
        this.setState({ isLoading: true });
        var stateProps = this.props.getState();
        var fetchURL = '' + stateProps.settings.basename + this.props.baseUrl + '&' + _querystring2.default.stringify({
          limit: this.state.limit || this.props.limit,
          sort: newSortOptions.sortProp ? '' + newSortOptions.sortOrder + newSortOptions.sortProp : undefined,
          fq: this.state.filterRowData && this.state.filterRowData.length ? this.state.filterRowData.map(function (frd) {
            return frd.property + '|||' + frd.filter_value + '|||' + frd.value;
          }) : undefined,
          query: options.search,
          allowSpecialCharacters: true,
          pagenum: options.pagenum || 1
        });
        // console.debug('this.state.filterRowData', this.state.filterRowData, { options, fetchURL, });
        var headers = (0, _assign2.default)({
          'x-access-token': stateProps.user.jwt_token
        }, stateProps.settings.userprofile.options.headers);
        _util2.default.fetchComponent(fetchURL, { headers: headers })().then(function (response) {
          // let usingResponsePages = false;
          // console.debug('this.props.dataMap',this.props.dataMap)
          // console.log({ response })
          if (response.data && response.result && response.status) {
            // console.log('USE DATA FROM RESPONSE', response.data)
            // console.log('this.props.dataMap',this.props.dataMap)
            response = response.data;
          }
          _this6.props.dataMap.forEach(function (data) {
            if (data.key === 'rows') {
              var rows = response[data.value] || [];
              rows = rows.documents ? rows.documents : rows;
              // console.log({ rows });
              if (_this6.props.flattenRowData) {
                updatedState[data.key] = rows.map(function (row) {
                  return (0, _assign2.default)({}, row, (0, _flat.flatten)(row, _this6.props.flattenRowDataOptions));
                });
              }
            } else {
              // if (data.key === 'numPages') {
              //   usingResponsePages = true;
              // }
              updatedState[data.key] = response[data.value];
            }
          });
          updatedState.numPages = Math.ceil(updatedState.numItems / _this6.state.limit);
          updatedState.limit = _this6.state.limit;
          updatedState.currentPage = typeof options.pagenum !== 'undefined' ? options.pagenum : _this6.props.currentPage;
          updatedState.isLoading = false;

          if (options.sort) {
            updatedState.sortOrder = newSortOptions.sortOrder;
            updatedState.sortProp = options.sort;
          }
          // console.log({ updatedState });
          // if (this.props.tableForm) {
          //   // console.warn('calling on change with baseurl', { updatedState });
          //   this.props.onChange(updatedState);
          // }
          // this.setState(updatedState);
          _this6.setState(updatedState, function () {
            if (_this6.props.tableForm) {
              _this6.props.onChange(updatedState);
            }
          });
        }, function (e) {
          _this6.props.errorNotification(e);
        });
      }
    }
  }, {
    key: 'formatValue',
    value: function formatValue(value, row, options, header) {
      var _this7 = this;

      try {
        // console.debug({ value, row, options, header, });
        // console.debug(options.rowIndex,this.state.selectedRowIndex)
        var returnValue = value;
        if (header && header.stringify) {
          value = (0, _stringify2.default)(value, null, 2);
          returnValue = (0, _stringify2.default)(value, null, 2);
        }
        if (header && header.tostring) {
          value = value.toString();
          returnValue = value.toString();
        }
        if (header && header.customCellLayout) {
          header.customCellLayout.props = (0, _assign2.default)({}, header.customCellLayout.props, { cell: value, row: row });
          return this.getRenderedComponent(header.customCellLayout);
        }
        if (header && header.tagifyArray) {
          return value.map(function (val, kv) {
            return _react2.default.createElement(
              rb.Tag,
              (0, _extends3.default)({}, header.tagProps, { key: kv }),
              header.tagifyValue ? val[header.tagifyValue].toString() : val.toString()
            );
          });
        } else if (header && header.selectedOptionRowHeader) {
          return _react2.default.createElement('input', { type: 'radio', checked: options.rowIndex === this.state.selectedRowIndex ? true : false });
        } else if (this.props.useInputRows && header && header.formtype && header.formtype === 'code') {
          var CodeMirrorProps = (0, _assign2.default)({}, {
            codeMirrorProps: {
              lineNumbers: true,
              value: value, //formElement.value || this.state[ formElement.name ] || getPropertyAttribute({ element:formElement, property:this.state, });
              //value: this.state[ formElement.name ] || formElement.value,
              style: {
                minHeight: 200
              },
              lineWrapping: true,
              onChange: function (text) {
                // console.log({ newvalue });
                var name = header.sortid;
                var rowIndex = options.rowIndex;
                this.updateInlineRowText({ name: name, text: text, rowIndex: rowIndex });
              }.bind(this)
            }
          }, header.CodeMirrorProps);
          var codeProps = (0, _assign2.default)({
            wrapperProps: {
              style: {
                overflow: 'auto',
                backgroundColor: 'white',
                border: '1px solid #d3d6db',
                borderRadius: 3,
                height: 'auto',
                boxShadow: 'inset 0 1px 2px rgba(17,17,17,.1)'
              }
            }
          }, header.codeProps);
          return _react2.default.createElement(_RACodeMirror2.default, (0, _extends3.default)({}, CodeMirrorProps, codeProps));
        } else if (this.props.useInputRows && header && header.formtype && header.formtype === 'textarea') {
          return _react2.default.createElement(
            rb.Textarea,
            (0, _extends3.default)({}, header.textareaProps, {
              value: value,
              onChange: function onChange(event) {
                var text = event.target.value;
                var name = header.sortid;
                var rowIndex = options.rowIndex;
                _this7.updateInlineRowText({ name: name, text: text, rowIndex: rowIndex });
              }
            }),
            value
          );
        } else if (this.props.useInputRows && header && header.formtype && header.formtype === 'text') {
          return _react2.default.createElement(
            rb.Input,
            (0, _extends3.default)({
              value: value,
              readOnly: header.readOnly ? true : false
            }, header.inputProps, {
              onChange: function onChange(event) {
                var text = event.target.value;
                var name = header.sortid;
                var rowIndex = options.rowIndex;
                _this7.updateInlineRowText({ name: name, text: text, rowIndex: rowIndex });
              }
            }),
            value
          );
        } else if (this.props.useInputRows && header && header.formtype && header.formtype === 'select') {
          var selectOptions = header.formoptions || [];
          return _react2.default.createElement(
            rb.Select,
            (0, _extends3.default)({
              value: value
            }, header.selectProps, {
              onChange: function onChange(event) {
                var text = event.target.value;
                var name = header.sortid;
                var rowIndex = options.rowIndex;
                _this7.updateInlineRowText({ name: name, text: text, rowIndex: rowIndex });
              } }),
            selectOptions.map(function (opt, k) {
              return _react2.default.createElement(
                'option',
                { key: k, disabled: opt.disabled, value: opt.value },
                opt.label || opt.value
              );
            })
          );
        } else if (this.props.useInputRows && header && header.formtype && header.formtype === 'datalist') {
          var rowdata = [];
          if (this.props.__tableOptions) {
            rowdata = Array.isArray(this.props.__tableOptions[header.sortid][options.rowIndex]) ? this.props.__tableOptions[header.sortid][options.rowIndex] : Array.isArray(this.props.__tableOptions[header.sortid]) ? this.props.__tableOptions[header.sortid] : [];
          }
          return _react2.default.createElement(_ResponsiveDatalist2.default
          // value={value}
          , (0, _extends3.default)({
            getState: this.props.getState.bind(this),
            value: value
          }, header.datalistProps, {
            datalistdata: rowdata,
            onChange: function onChange(event) {
              var text = event;
              var name = header.sortid;
              var rowIndex = options.rowIndex;
              _this7.updateInlineRowText({ name: name, text: text, rowIndex: rowIndex });
            }
          }));
        } else if (typeof options.idx !== 'undefined' && typeof returnValue === 'string' && returnValue.indexOf('--idx--') !== -1) {
          returnValue = returnValue.replace('--idx--', options.idx);
        }
        if (typeof options.idx !== 'undefined' && typeof returnValue === 'string' && returnValue.indexOf('--idx-ctr--') !== -1) {
          returnValue = returnValue.replace('--idx-ctr--', options.idx + 1);
        }
        if (options.momentFromNow) {
          returnValue = (0, _moment2.default)(value).fromNow();
        } else if (options.momentFormat) {
          returnValue = (0, _moment2.default)(value).format(options.momentFormat);
        } else if (options.numeralFormat) {
          returnValue = (0, _numeral2.default)(value).format(options.numeralFormat);
        } else if (header && header.wrapPreOutput) {
          returnValue = _react2.default.createElement(
            'pre',
            header.wrapPreOutputProps,
            value
          );
        } else if (options.icon && value) {
          // console.debug({value})
          if (typeof value !== 'string' && Array.isArray(value)) {
            var icons = value.map(function (val, i) {
              return _react2.default.createElement(rb.Icon, (0, _extends3.default)({ key: i + Math.random() }, options.iconProps, { icon: val }));
            });
            return icons;
          } else {
            return _react2.default.createElement(rb.Icon, (0, _extends3.default)({}, options.iconProps, { icon: value }));
          }
        } else if (options.image && value) {
          if (typeof value !== 'string' && Array.isArray(value)) {
            var images = value.map(function (val, i) {
              return _react2.default.createElement(rb.Image, (0, _extends3.default)({ key: i }, options.imageProps, { src: val }));
            });
            return { images: images };
          } else {
            return _react2.default.createElement(rb.Image, (0, _extends3.default)({}, options.imageProps, { src: value }));
          }
        }
        if (typeof returnValue === 'undefined' || returnValue === null && this.props.suppressNullValues) {
          return '';
          // } else if (typeof returnValue !== 'object') {
          //   return JSON.stringify(returnValue);
        } else if (returnValue === null) {
          return 'null';
        } else {
          return returnValue.toString();
        }
      } catch (e) {
        console.log({ value: value, row: row, options: options, header: header }, e);
        return 'invalid';
      }
    }
  }, {
    key: 'getHeaderLinkURL',
    value: function getHeaderLinkURL(link, row) {
      var returnLink = link.baseUrl;
      if (link.params && link.params.length > 0) {
        link.params.forEach(function (param) {
          returnLink = returnLink.replace(param.key, row[param.val]);
        });
      }
      return returnLink;
    }
  }, {
    key: 'updateGetFooterAddRow',
    value: function updateGetFooterAddRow(header) {
      var _this8 = this;

      if (header.selectedOptionRowHeader) return null;
      switch (header.formtype) {
        case 'select':
          return _react2.default.createElement(
            rb.Select,
            (0, _extends3.default)({
              value: this.state.newRowData[header.sortid] || header.defaultValue,
              onChange: function onChange(event) {
                var text = event.target.value;
                var name = header.sortid;
                _this8.updateNewRowText({ name: name, text: text });
              }
            }, header.footerFormElementPassProps),
            header.formoptions.map(function (opt, k) {
              return _react2.default.createElement(
                'option',
                { key: k, disabled: opt.disabled, value: opt.value },
                opt.label || opt.value
              );
            })
          );
        // break;  
        case 'textarea':
          return _react2.default.createElement(rb.Textarea, (0, _extends3.default)({
            value: this.state.newRowData[header.sortid] || '',
            onChange: function onChange(event) {
              var text = event.target.value;
              var name = header.sortid;
              _this8.updateNewRowText({ name: name, text: text });
            }
          }, header.footerFormElementPassProps));
        // break;  
        case 'code':
          var CodeMirrorProps = (0, _assign2.default)({}, {
            codeMirrorProps: {
              lineNumbers: true,
              value: this.state.newRowData[header.sortid] || '', //formElement.value || this.state[ formElement.name ] || getPropertyAttribute({ element:formElement, property:this.state, });
              //value: this.state[ formElement.name ] || formElement.value,
              style: {
                minHeight: 200
              },
              lineWrapping: true,
              onChange: function (text) {
                // console.log({ newvalue });
                var name = header.sortid;
                this.updateNewRowText({ name: name, text: text });
              }.bind(this)
            }
          }, header.CodeMirrorProps);
          var codeProps = (0, _assign2.default)({
            wrapperProps: {
              style: {
                overflow: 'auto',
                backgroundColor: 'white',
                border: '1px solid #d3d6db',
                borderRadius: 3,
                height: 'auto',
                boxShadow: 'inset 0 1px 2px rgba(17,17,17,.1)'
              }
            }
          }, header.codeProps);
          return _react2.default.createElement(_RACodeMirror2.default, (0, _extends3.default)({}, CodeMirrorProps, codeProps));
        case 'datalist':
          var rowdata = this.props.__tableOptions && Array.isArray(this.props.__tableOptions[header.sortid]) ? this.props.__tableOptions[header.sortid] : [];
          // console.log('outside this.props', this.props);
          // const updateFunction = {
          //   onChange: function (event) {
          //     let text = event;
          //     let name = header.sortid;
          //     this.updateNewRowText({ name, text, });
          //   }.bind(this)
          // };
          return _react2.default.createElement(_ResponsiveDatalist2.default, (0, _extends3.default)({}, this.props, {
            datalistdata: rowdata,
            onChange: function onChange(event) {
              // console.log('inside this.props', this.props);

              var text = event;
              var name = header.sortid;
              _this8.updateNewRowText({ name: name, text: text });
            }
            // {{...}updateFunction}
          }, header.datalistProps));
        case 'text':
        default:
          return _react2.default.createElement(rb.Input, (0, _extends3.default)({
            value: this.state.newRowData[header.sortid] || '',
            onChange: function onChange(event) {
              var text = event.target.value;
              var name = header.sortid;
              _this8.updateNewRowText({ name: name, text: text });
            }
          }, header.footerFormElementPassProps));
        // break;  
      }
    }
  }, {
    key: 'toggleAdvancedSearchFilters',
    value: function toggleAdvancedSearchFilters() {
      this.setState({ showFilterSearch: !this.state.showFilterSearch });
      // showFilterSearch:false,  
      // usingFiltersInSearch: false,
      // showFilterSearch: props.showFilterSearch,  
      //     usingFiltersInSearch: props.usingFiltersInSearch  
    }
  }, {
    key: 'render',
    value: function render() {
      var _this9 = this;

      // console.debug('render this.state', this.state);
      var calcStartIndex = (this.state.currentPage - 1) * this.state.limit;
      var startIndex = !this.props.baseUrl ? calcStartIndex : 0;
      var endIndex = !this.props.baseUrl ? this.state.limit * this.state.currentPage : this.state.limit;
      var displayRows = this.state.rows.slice(startIndex, endIndex).filter(function (row) {
        return row && (typeof row === 'undefined' ? 'undefined' : (0, _typeof3.default)(row)) === 'object' && (0, _keys2.default)(row).length;
      });
      // console.warn({ displayRows });
      var mergedCustomLayout = this.props.customLayout && displayRows && displayRows.length ? _react2.default.createElement(
        'div',
        { style: (0, _assign2.default)({
            flexDirection: 'rows',
            display: 'flex'
          }, this.props.customLayoutStyle) },
        displayRows.map(function (row) {
          var mergedLayout = (0, _assign2.default)({}, _this9.props.customLayout, {
            props: (0, _assign2.default)({}, _this9.props.customLayout.props, row, { row: row }, {
              __ra_rt_link: _this9.props.customLayout.link ? _this9.getHeaderLinkURL(_this9.props.customLayout.link, row) : undefined
            })
          });
          // console.debug({ mergedLayout });
          return _this9.getRenderedComponent(mergedLayout);
        })
      ) : null;
      var _state = this.state,
          numPages = _state.numPages,
          currentPage = _state.currentPage;

      var pageButtons = [];
      var lastIndex = numPages - 1;

      var start = currentPage - 2;
      var end = currentPage;
      if (start < 0) {
        end += -start;
        start = 0;
      }
      if (end > lastIndex) {
        if (start > 0) {
          start -= end - lastIndex;
          if (start < 0) {
            start = 0;
          }
        }
        end = lastIndex;
      }

      if (start > 0) {
        pageButtons.push(_react2.default.createElement(
          'li',
          { key: 0 },
          _react2.default.createElement(
            rb.PageButton,
            { isActive: currentPage === 1,
              onClick: function onClick() {
                return _this9.updateTableData({ pagenum: 1 });
              }
            },
            '1'
          )
        ));
        pageButtons.push(_react2.default.createElement(
          'li',
          { key: 'dot-before' },
          '...'
        ));
      }

      var _loop = function _loop(index) {
        var inActive = index + 1 !== currentPage;
        if (inActive) {
          pageButtons.push(_react2.default.createElement(
            'li',
            { key: index },
            _react2.default.createElement(
              rb.PageButton,
              {
                onClick: function onClick() {
                  return _this9.updateTableData({ pagenum: index + 1 });
                }
              },
              index + 1
            )
          ));
        } else {
          pageButtons.push(_react2.default.createElement(
            'li',
            { key: index },
            _react2.default.createElement(
              rb.PageButton,
              { color: 'isPrimary', isActive: true,
                onClick: function onClick() {
                  return _this9.updateTableData({ pagenum: index + 1 });
                } },
              index + 1
            )
          ));
        }
      };

      for (var index = start; index <= end; index += 1) {
        _loop(index);
      }

      if (end < lastIndex) {
        pageButtons.push(_react2.default.createElement(
          'li',
          { key: 'dot-after' },
          '...'
        ));
        pageButtons.push(_react2.default.createElement(
          'li',
          { key: lastIndex },
          _react2.default.createElement(
            rb.PageButton,
            { onClick: function onClick() {
                return _this9.updateTableData({ pagenum: lastIndex + 1 });
              } },
            lastIndex + 1
          )
        ));
      }
      var showableFilters = this.state.headers.filter(function (header) {
        return _this9.state.hiddenHeaders.includes(header.sortid) === false;
      });
      var footer = _react2.default.createElement(
        rb.Pagination,
        null,
        this.state.currentPage < 2 ? _react2.default.createElement(
          rb.Button,
          { state: 'isDisabled' },
          ' Previous '
        ) : _react2.default.createElement(
          rb.PageButton,
          { onClick: function onClick() {
              return _this9.updateTableData({ pagenum: _this9.state.currentPage - 1 });
            } },
          'Previous'
        ),
        _react2.default.createElement(
          'ul',
          null,
          pageButtons
        ),
        this.state.currentPage >= this.state.numPages ? _react2.default.createElement(
          rb.Button,
          { state: 'isDisabled' },
          ' Next '
        ) : _react2.default.createElement(
          rb.PageButton,
          { onClick: function onClick() {
              return _this9.updateTableData({ pagenum: _this9.state.currentPage + 1 });
            } },
          'Next'
        )
      );

      var fbts = _react2.default.createElement('span', null);
      if (this.props.filterSearch) {
        fbts = _react2.default.createElement(
          rb.Button,
          (0, _extends3.default)({
            style: this.state.showFilterSearch ? { background: '#69707a', color: '#f5f7fa', borderColor: 'transparent' } : this.state.filterRowData.length > 0 ? { background: '#222324', color: 'white', borderColor: 'transparent' } : undefined
          }, this.props.filterButtonProps, {
            onClick: function onClick() {
              _this9.toggleAdvancedSearchFilters();
            }
          }),
          'Advanced'
        );
      }
      return _react2.default.createElement(
        rb.Container,
        this.props.containerProps,
        this.props.tableSearch ? _react2.default.createElement(
          rb.Addons,
          this.props.filterAddonProps,
          _react2.default.createElement(rb.Input, (0, _extends3.default)({}, this.props.filterSearchProps, {
            onChange: function onChange(data) {
              _this9.searchFunction({ search: data.target.value });
              _this9.searchInputTextVal = data.target.value; //TODO: this is janky fix it
            },
            ref: function ref(input) {
              _this9.searchTextInput = input;
            }
          })),
          _react2.default.createElement(
            rb.Button,
            (0, _extends3.default)({}, this.props.searchButtonProps, {
              onClick: function onClick() {
                _this9.searchFunction({ search: _this9.searchInputTextVal });
              }
            }),
            'Search'
          ),
          fbts
        ) : null,
        this.state.showFilterSearch ? _react2.default.createElement(
          'div',
          (0, _extends3.default)({ className: '__ra_rt_asf' }, this.props.searchFilterContainerProps),
          _react2.default.createElement(
            rb.Message,
            { header: 'Advanced Search Filters' },
            _react2.default.createElement(
              rb.Table,
              this.props.searchFilterTableProps,
              _react2.default.createElement(
                rb.Thead,
                null,
                _react2.default.createElement(
                  rb.Tr,
                  null,
                  _react2.default.createElement(
                    rb.Th,
                    null,
                    'Property'
                  ),
                  _react2.default.createElement(
                    rb.Th,
                    null,
                    'Filter'
                  ),
                  _react2.default.createElement(
                    rb.Th,
                    null,
                    'Value'
                  ),
                  _react2.default.createElement(
                    rb.Th,
                    null,
                    'Options'
                  )
                )
              ),
              _react2.default.createElement(
                rb.Tbody,
                null,
                this.state.filterRowData && this.state.filterRowData.length ? this.state.filterRowData.map(function (filterRowDatum, l) {
                  return _react2.default.createElement(
                    rb.Tr,
                    { key: l },
                    _react2.default.createElement(
                      rb.Td,
                      null,
                      filterRowDatum.property
                    ),
                    _react2.default.createElement(