@hesenger/react-simpletable/dist/index.js

Simple table component to render json data from local or remote

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = _interopDefault(require('react'));

function _extends() {
  _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;
  };

  return _extends.apply(this, arguments);
}

function _inheritsLoose(subClass, superClass) {
  subClass.prototype = Object.create(superClass.prototype);
  subClass.prototype.constructor = subClass;
  subClass.__proto__ = superClass;
}

var material = {"simpletable":"_1ONUw","active":"_3ecil"};

var flat = {"simpletable":"_2VRa4","active":"_630oe"};

var Table = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(Table, _React$Component);

  function Table() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.state = {
      selected: null,
      selectedIndex: -1,
      page: 1,
      size: 25
    };
    return _this;
  }

  var _proto = Table.prototype;

  _proto.componentDidMount = function componentDidMount() {
    this.loadRemoteData();
  };

  _proto.loadRemoteData = function loadRemoteData(newPage) {
    var _this2 = this;

    if (!this.props.url) return;
    var page = newPage || this.state.page;

    var state = _extends({}, this.state, {
      page: page
    });

    this.setState(state);
    fetch(this.formatUrl(this.props.url, state)).then(function (resp) {
      return _this2.parseRemote(resp, state);
    });
  };

  _proto.formatUrl = function formatUrl(url, state) {
    var res = new URL(url);
    res.searchParams.set('page', state.page - 1);
    res.searchParams.set('size', state.size);
    return res;
  };

  _proto.parseRemote = function parseRemote(resp, state) {
    var _this3 = this;

    resp.json().then(function (t) {
      return _this3.setState({
        data: t.data,
        total: t.totalPages,
        page: state.page
      });
    });
  };

  _proto.getData = function getData() {
    return this.props.data ? this.props.data : this.state.data;
  };

  _proto.render = function render() {
    var _this4 = this,
        _this$props$children;

    var data = this.getData() || [];
    if (!Array.isArray(data)) throw 'Property DATA is not an array';

    var onSelect = function onSelect(obj, i) {
      _this4.setState({
        selected: obj,
        selectedIndex: i
      });

      if (_this4.props.onSelect) _this4.props.onSelect(obj, i);
    };

    var onHeaderClick = function onHeaderClick(c, i) {
      if (_this4.props.onHeaderClick) _this4.props.onHeaderClick(c.props.name, i);
    };

    var theme = this.props.theme || material;
    return /*#__PURE__*/React.createElement("div", {
      className: theme.simpletable
    }, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, React.Children.map(this.props.children, function (c, i) {
      return /*#__PURE__*/React.createElement("th", {
        onClick: function onClick() {
          return onHeaderClick(c, i);
        }
      }, c.props.header || ' ');
    }))), /*#__PURE__*/React.createElement("tbody", null, data.map(function (obj, index) {
      return /*#__PURE__*/React.createElement("tr", {
        key: index,
        onClick: function onClick() {
          return onSelect(obj, index);
        },
        className: _this4.state.selectedIndex === index ? theme.active : null
      }, React.Children.map(_this4.props.children, function (c) {
        return React.cloneElement(c, {
          obj: obj,
          index: index
        });
      }));
    })), this.props.url && /*#__PURE__*/React.createElement("tfoot", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
      colSpan: ((_this$props$children = this.props.children) === null || _this$props$children === void 0 ? void 0 : _this$props$children.length) || 1
    }, /*#__PURE__*/React.createElement("button", {
      type: "button",
      onClick: function onClick() {
        return _this4.loadRemoteData(1);
      }
    }, "<<"), /*#__PURE__*/React.createElement("button", {
      type: "button",
      onClick: function onClick() {
        return _this4.loadRemoteData(Math.max(1, _this4.state.page - 1));
      }
    }, "<"), /*#__PURE__*/React.createElement("input", {
      type: "text",
      value: this.state.page,
      onChange: function onChange(e) {
        return _this4.setState({
          page: e.target.value
        });
      },
      onBlur: function onBlur() {
        return _this4.loadRemoteData();
      },
      onKeyDown: function onKeyDown(e) {
        return e.key === 'Enter' && _this4.loadRemoteData(e.target.value);
      }
    }), "/", /*#__PURE__*/React.createElement("input", {
      type: "text",
      value: this.state.total || 0,
      readOnly: true
    }), /*#__PURE__*/React.createElement("button", {
      type: "button",
      onClick: function onClick() {
        return _this4.loadRemoteData(Math.min(_this4.state.total, _this4.state.page + 1));
      }
    }, ">"), /*#__PURE__*/React.createElement("button", {
      type: "button",
      onClick: function onClick() {
        return _this4.loadRemoteData(_this4.state.total);
      }
    }, ">>"))))));
  };

  return Table;
}(React.Component);

Table.Col = function (props) {
  var getFromFormat = function getFromFormat(obj) {
    try {
      return props.format(props.obj, props.index);
    } catch (ex) {
      console.warn('Error format column ' + props.name);
      console.warn(ex);
      return '';
    }
  };

  var val = props.format ? getFromFormat() : (props.obj || {})[props.name] || '';
  return /*#__PURE__*/React.createElement("td", null, val);
};

Table.FlatTheme = flat;
Table.MaterialTheme = material;

module.exports = Table;
//# sourceMappingURL=index.js.map