"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;