Entry/dist/Modules/Table.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _modularityFront = _interopRequireDefault(require("modularity-front"));

var _reactMaterialize = require("react-materialize");

var _reactMoment = _interopRequireDefault(require("react-moment"));

require("./Table.css");

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

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _get(target, property, receiver) { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(receiver); } return desc.value; }; } return _get(target, property, receiver || target); }

function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

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

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

var Module = _modularityFront.default.Module;

var TableModule =
/*#__PURE__*/
function (_Modularity$Module) {
  _inherits(TableModule, _Modularity$Module);

  function TableModule(props) {
    var _this;

    _classCallCheck(this, TableModule);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(TableModule).call(this, props));
    _this.state = {};

    _this.EditedTable.set(_this.TableData.value);

    _this.TableData.onUpdate(function (e) {
      return _this.forceUpdate();
    });

    return _this;
  }

  _createClass(TableModule, [{
    key: "change",
    value: function change(data, row_id) {
      console.log("event fid with", row_id);
      this.EditedRow.set(data);
      var updated_data = this.TableData.value;
      updated_data[row_id] = data;
      this.EditedTable.set(updated_data);
      this.forceUpdate();
    }
  }, {
    key: "row_edited",
    value: function row_edited(data, row_id) {
      this.onEdit.set(data);
    }
  }, {
    key: "row_deleted",
    value: function row_deleted(data, row_id) {
      this.onDelete.set(data);
    }
  }, {
    key: "resolve",
    value: function resolve(value, header) {
      if (header && _typeof(header) === "object") {
        switch (header.type) {
          case 'date':
            return _react.default.createElement(_reactMoment.default, {
              format: "HH:mm DD/MM/YYYY"
            }, value);

          default:
            return value;
        }
      }

      return value;
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var headers;
      var data;
      headers = Object.keys(this.TableHeaders.value || this.TableData.value && this.TableData.value.length > 0 && this.TableData.value[0] || {}).map(function (key, index) {
        return _react.default.createElement("th", {
          key: index
        }, key);
      });
      data = (this.TableData.value || []).map(function (item, ind) {
        return _react.default.createElement("tr", {
          key: '' + item.id + item.price + item.quantity
        }, Object.keys(_this2.TableHeaders.value || {}).map(function (header, index) {
          var input = _this2.TableHeaders.value[header];

          if (header === 'image') {
            return _react.default.createElement("td", {
              key: header
            }, _react.default.createElement("img", {
              src: item[input.field || input]
            }));
          } else if (input === '-index-' && item.id) {
            return _react.default.createElement("td", {
              key: item.id + 'index'
            }, ind + 1);
          } else {
            var field = input.field || input;

            var value = _this2.resolve(item[field], input);

            if (value && _typeof(value) === "object") {
              value = value.name || value[0] || value;
            } else if (value) {
              if (input.precision && !isNaN(value)) {
                value = value.toFixed(input.precision);
              }

              if (input.suffix) {
                value = value + input.suffix;
              }

              if (input.prefix) {
                value = input.prefix + value;
              }
            }

            return _react.default.createElement("td", {
              key: header
            }, _react.default.createElement(Editable, {
              row_id: ind,
              value: value,
              header_key: input.field || input,
              onChange: function onChange(e, i) {
                return _this2.change(e, i);
              },
              row: item,
              edit: _this2.LiveEdit.value
            }));
          }
        }), _this2.props.onEdit ? _react.default.createElement(EditButton, {
          row_id: ind,
          row: item,
          row_edited: function row_edited(e) {
            return _this2.row_edited(e);
          }
        }) : null, _this2.props.onDelete ? _react.default.createElement(DeleteButton, {
          row_id: ind,
          row: item,
          row_deleted: function row_deleted(e) {
            return _this2.row_deleted(e);
          }
        }) : null, _this2.props.onView ? _react.default.createElement(ViewButton, {
          row_id: ind,
          row: item,
          view_row: function view_row(e) {
            return _this2.props.onView(e);
          }
        }) : null);
      });
      return _react.default.createElement("div", null, _get(_getPrototypeOf(TableModule.prototype), "render", this).call(this), data.length ? _react.default.createElement("table", {
        className: this.TableClass.value + ""
      }, _react.default.createElement("thead", null, _react.default.createElement("tr", null, headers)), _react.default.createElement("tbody", null, data)) : _react.default.createElement("div", {
        className: "NothingHere"
      }, " Nothing Here! "));
    }
  }]);

  return TableModule;
}(_modularityFront.default.Module);

TableModule.Inputs = {
  LiveEdit: {
    type: Module.Types.Boolean,
    defaultValue: false
  },
  TableHeaders: {
    type: Module.Types.Object,
    defaultValue: {
      "Name": "key1",
      "Age": "key2",
      "Value": "key3"
    }
  },
  TableData: {
    type: Module.Types.Array,
    defaultValue: [{
      "key1": "Natalie",
      "key2": "20",
      "key3": "120"
    }, {
      "key1": "Somer",
      "key2": "10 y",
      "key3": "1000"
    }, {
      "key1": "Panos",
      "key2": "3y",
      "key3": "500"
    }],
    arrType: Module.Types.Object
  },
  TableClass: {
    type: Module.Types.Text,
    defaultValue: "striped centered"
  }
};

var Editable =
/*#__PURE__*/
function (_React$Component) {
  _inherits(Editable, _React$Component);

  function Editable(props) {
    var _this3;

    _classCallCheck(this, Editable);

    _this3 = _possibleConstructorReturn(this, _getPrototypeOf(Editable).call(this, props));
    _this3.state = {
      value: _this3.props.value,
      LiveEdit: false
    };
    return _this3;
  }

  _createClass(Editable, [{
    key: "edit",
    value: function edit(e) {
      e.preventDefault();
      this.setState({
        LiveEdit: true
      });
    }
  }, {
    key: "handleSubmit",
    value: function handleSubmit(e) {
      e.preventDefault();
      var key = this.props.header_key;
      var output = this.props.row;
      output[key] = e.target.value;
      this.props.onChange(output, this.props.row_id);
    }
  }, {
    key: "_handleKeyPress",
    value: function _handleKeyPress(e) {
      if (e.key === 'Enter') {
        this.handleSubmit(e);
        this.setState({
          LiveEdit: false
        });
      }
    }
  }, {
    key: "blur",
    value: function blur(e) {
      this.handleSubmit(e);
      this.setState({
        LiveEdit: false
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this4 = this;

      var _this$props = this.props,
          onBlur = _this$props.onBlur,
          onChange = _this$props.onChange,
          value = _this$props.value,
          props = _objectWithoutProperties(_this$props, ["onBlur", "onChange", "value"]);

      return this.state.LiveEdit ? _react.default.createElement("input", {
        style: {
          width: "auto"
        },
        value: this.state.value,
        onChange: function onChange(e) {
          return _this4.setState({
            value: e.target.value
          });
        },
        onBlur: function onBlur(e) {
          return _this4.blur(e);
        },
        onKeyPress: function onKeyPress(e) {
          return _this4._handleKeyPress(e);
        }
      }) : _react.default.createElement("div", {
        onClick: function onClick(e) {
          return _this4.props.edit && _this4.edit(e);
        }
      }, this.state.value);
    }
  }]);

  return Editable;
}(_react.default.Component);

var EditButton =
/*#__PURE__*/
function (_React$Component2) {
  _inherits(EditButton, _React$Component2);

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

    return _possibleConstructorReturn(this, _getPrototypeOf(EditButton).call(this, props));
  }

  _createClass(EditButton, [{
    key: "_editRow",
    value: function _editRow(e) {
      e.preventDefault();
      this.props.row_edited(this.props.row, this.props.row_id);
    }
  }, {
    key: "render",
    value: function render() {
      var _this5 = this;

      return _react.default.createElement("td", {
        style: {
          width: "60px"
        }
      }, _react.default.createElement(_reactMaterialize.Button, {
        onClick: function onClick(e) {
          return _this5._editRow(e);
        },
        className: "btn-floating"
      }, _react.default.createElement(_reactMaterialize.Icon, {
        tiny: true
      }, "edit")));
    }
  }]);

  return EditButton;
}(_react.default.Component);

var DeleteButton =
/*#__PURE__*/
function (_React$Component3) {
  _inherits(DeleteButton, _React$Component3);

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

    return _possibleConstructorReturn(this, _getPrototypeOf(DeleteButton).call(this, props));
  }

  _createClass(DeleteButton, [{
    key: "_DeleteRow",
    value: function _DeleteRow(e) {
      e.preventDefault();
      this.props.row_deleted(this.props.row, this.props.row_id);
    }
  }, {
    key: "render",
    value: function render() {
      var _this6 = this;

      return _react.default.createElement("td", {
        style: {
          width: "60px"
        }
      }, _react.default.createElement(_reactMaterialize.Button, {
        onClick: function onClick(e) {
          return _this6._DeleteRow(e);
        },
        className: "btn-floating"
      }, _react.default.createElement(_reactMaterialize.Icon, {
        tiny: true
      }, "delete")));
    }
  }]);

  return DeleteButton;
}(_react.default.Component);

var ViewButton =
/*#__PURE__*/
function (_React$Component4) {
  _inherits(ViewButton, _React$Component4);

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

    return _possibleConstructorReturn(this, _getPrototypeOf(ViewButton).call(this, props));
  }

  _createClass(ViewButton, [{
    key: "render",
    value: function render() {
      var _this7 = this;

      return _react.default.createElement("td", {
        style: {
          width: "60px"
        }
      }, _react.default.createElement(_reactMaterialize.Button, {
        onClick: function onClick(e) {
          return _this7.props.view_row(_this7.props.row);
        },
        className: "btn-floating"
      }, _react.default.createElement(_reactMaterialize.Icon, {
        tiny: true
      }, "remove_red_eye")));
    }
  }]);

  return ViewButton;
}(_react.default.Component);

TableModule.Outputs = {
  EditedTable: {
    type: Module.Types.Array,
    arrType: Module.Types.Object
  },
  EditedRow: {
    type: Module.Types.Object
  },
  onEdit: {
    type: Module.Types.Object
  },
  onDelete: {
    type: Module.Types.Object
  }
};
TableModule.Category = "sxoinas";
TableModule.EditPosition = "center";
var _default = TableModule;
exports.default = _default;