@csvbox/react
Version:
React adapter for csvbox.io
315 lines (266 loc) • 10.7 kB
JavaScript
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
var version = "1.1.14";
var CSVBoxButton = /*#__PURE__*/function (_Component) {
_inheritsLoose(CSVBoxButton, _Component);
function CSVBoxButton(props) {
var _this;
_this = _Component.call(this, props) || this;
_this.holder = React__default.createRef();
_this.openModal = _this.openModal.bind(_assertThisInitialized(_this));
_this.isModalShown = false;
_this.shouldOpenModalOnReady = false;
_this.uuid = _this.generateUuid();
_this.state = {
isLoading: true
};
_this.iframe = null;
return _this;
}
var _proto = CSVBoxButton.prototype;
_proto.componentDidMount = function componentDidMount() {
var lazy = this.props.lazy;
if (!lazy && !this.iframe) {
this.initImporter();
} else if (lazy) {
this.enableInitator();
}
};
_proto.initImporter = function initImporter() {
var _this2 = this;
var loadStarted = this.props.loadStarted;
loadStarted === null || loadStarted === void 0 ? void 0 : loadStarted();
var user = this.props.user;
var dynamicColumns = this.props.dynamicColumns;
var options = this.props.options;
var onReady = this.props.onReady;
var onImport = this.props.onImport;
var onSubmit = this.props.onSubmit;
var onClose = this.props.onClose;
var licenseKey = this.props.licenseKey;
var dataLocation = this.props.dataLocation;
var customDomain = this.props.customDomain;
var language = this.props.language;
var environment = this.props.environment;
var theme = this.props.theme;
var domain = customDomain ? customDomain : "app.csvbox.io";
if (dataLocation) {
domain = dataLocation + "-" + domain;
}
var iframeUrl = "https://" + domain + "/embed/" + licenseKey;
iframeUrl += "?library-version=" + version;
iframeUrl += "&framework=react";
if (dataLocation) {
iframeUrl += "&preventRedirect";
}
if (language) {
iframeUrl += "&language=" + language;
}
if (theme) {
iframeUrl += "&theme=" + theme;
}
if (environment) {
var env = JSON.stringify(environment).replace(/['"]/g, function (match) {
return '\\' + match;
});
iframeUrl += "&env=" + env;
}
window.addEventListener("message", function (event) {
if (event.data === "mainModalHidden") {
if (_this2.holder && _this2.holder.current) {
_this2.holder.current.style.display = 'none';
}
_this2.isModalShown = false;
onClose === null || onClose === void 0 ? void 0 : onClose();
}
if (event.data === "uploadSuccessful") {
onImport(true);
}
if (event.data === "uploadFailed") {
onImport(false);
}
if (typeof event.data == "object") {
var _event$data, _event$data$data;
if ((event === null || event === void 0 ? void 0 : (_event$data = event.data) === null || _event$data === void 0 ? void 0 : (_event$data$data = _event$data.data) === null || _event$data$data === void 0 ? void 0 : _event$data$data.unique_token) == _this2.uuid) {
if (event.data.type && event.data.type == "data-on-submit") {
var metadata = event.data.data;
metadata["column_mappings"] = event.data.column_mapping;
delete metadata["unique_token"];
onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(metadata);
} else if (event.data.type && event.data.type == "data-push-status") {
if (event.data.data.import_status == "success") {
if (event.data && event.data.row_data) {
var primary_row_data = event.data.row_data;
var headers = event.data.headers;
var rows = [];
var dynamic_columns_indexes = event.data.dynamicColumnsIndexes;
var virtual_columns_indexes = event.data.virtualColumnsIndexes || [];
var dropdown_display_labels_mappings = event.data.dropdown_display_labels_mappings;
primary_row_data.forEach(function (row_data) {
var _row_data$data;
var x = {};
var dynamic_columns = {};
var virtual_data = {};
(_row_data$data = row_data.data) === null || _row_data$data === void 0 ? void 0 : _row_data$data.forEach(function (col, i) {
if (col == undefined) {
col = "";
}
if (!!dropdown_display_labels_mappings[i] && !!dropdown_display_labels_mappings[i][col]) {
col = dropdown_display_labels_mappings[i][col];
}
if (dynamic_columns_indexes.includes(i)) {
dynamic_columns[headers[i]] = col;
} else if (virtual_columns_indexes.includes(i)) {
virtual_data[headers[i]] = col;
} else {
x[headers[i]] = col;
}
});
if (row_data.unmapped_data) {
x["_unmapped_data"] = row_data.unmapped_data;
}
if (dynamic_columns && Object.keys(dynamic_columns).length > 0) {
x["_dynamic_data"] = dynamic_columns;
}
if (virtual_data && Object.keys(virtual_data).length > 0) {
x["_virtual_data"] = virtual_data;
}
rows.push(x);
});
var _metadata = event.data.data;
_metadata["rows"] = rows;
_metadata["column_mappings"] = event.data.column_mapping;
_metadata["raw_columns"] = event.data.raw_columns;
_metadata["ignored_columns"] = event.data.ignored_column_row;
delete _metadata["unique_token"];
onImport(true, _metadata);
} else {
var _metadata2 = event.data.data;
delete _metadata2["unique_token"];
onImport(true, _metadata2);
}
} else {
onImport(false, event.data.data);
}
} else if (event.data.type && event.data.type == "csvbox-modal-hidden") {
if (_this2.holder && _this2.holder.current) {
_this2.holder.current.style.display = 'none';
}
_this2.isModalShown = false;
onClose === null || onClose === void 0 ? void 0 : onClose();
} else if (event.data.type && event.data.type == "csvbox-upload-successful") {
var _this2$onImport;
(_this2$onImport = _this2.onImport) === null || _this2$onImport === void 0 ? void 0 : _this2$onImport.call(_this2, true);
} else if (event.data.type && event.data.type == "csvbox-upload-failed") {
var _this2$onImport2;
(_this2$onImport2 = _this2.onImport) === null || _this2$onImport2 === void 0 ? void 0 : _this2$onImport2.call(_this2, false);
}
}
}
}, false);
var self = this;
var iframe = document.createElement("iframe");
this.iframe = iframe;
iframe.setAttribute("src", iframeUrl);
iframe.frameBorder = 0;
iframe.classList.add('csvbox-iframe');
iframe.style.height = "100%";
iframe.style.width = "100%";
iframe.style.position = "absolute";
iframe.style.top = "0px";
iframe.style.left = "0px";
window.addEventListener("message", this.onMessageEvent, false);
iframe.onload = function () {
self.enableInitator();
iframe.contentWindow.postMessage({
"customer": user ? user : null,
"columns": dynamicColumns ? dynamicColumns : null,
"options": options ? options : null,
"unique_token": self.uuid
}, "*");
onReady === null || onReady === void 0 ? void 0 : onReady();
if (self.shouldOpenModalOnReady) {
self.openModal();
self.shouldOpenModalOnReady = false;
}
};
this.holder.current.appendChild(iframe);
};
_proto.openModal = function openModal() {
var lazy = this.props.lazy;
if (lazy) {
if (!this.iframe) {
this.shouldOpenModalOnReady = true;
this.initImporter();
return;
}
}
if (!this.isModalShown) {
if (!this.state.isLoading) {
this.isModalShown = true;
this.iframe.contentWindow.postMessage('openModal', '*');
this.holder.current.style.display = 'block';
} else {
this.shouldOpenModalOnReady = true;
}
}
};
_proto.generateUuid = function generateUuid() {
return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
};
_proto.enableInitator = function enableInitator() {
this.setState({
isLoading: false
});
};
_proto.render = function render() {
var holderStyle = {
display: "none",
zIndex: 2147483647,
position: "fixed",
top: 0,
bottom: 0,
left: 0,
right: 0
};
if (this.props.render) {
return /*#__PURE__*/React__default.createElement("div", null, this.props.render(this.openModal, this.state.isLoading), /*#__PURE__*/React__default.createElement("div", {
ref: this.holder,
style: holderStyle
}));
} else {
return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("button", {
disabled: this.state.isLoading,
onClick: this.openModal,
"data-csvbox-initator": true,
"data-csvbox-token": this.uuid
}, this.props.children), /*#__PURE__*/React__default.createElement("div", {
ref: this.holder,
style: holderStyle
}));
}
};
return CSVBoxButton;
}(React.Component);
exports.CSVBoxButton = CSVBoxButton;
exports.default = CSVBoxButton;
//# sourceMappingURL=index.js.map