@tableflow/js
Version:
The JavaScript SDK for TableFlow. Embed an importer to collect and transform CSV files in your application.
207 lines (192 loc) • 11.3 kB
JavaScript
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = ".TableFlowImporter {\n border: none;\n background-color: transparent;\n padding: 0 1rem;\n border-radius: 1.2rem;\n color: inherit;\n cursor: pointer;\n font-weight: 500;\n font-size: 14px;\n height: 2.4rem;\n display: inline-flex;\n gap: 0.5rem;\n align-items: center;\n transition: filter 0.2s ease-out;\n}\n\n.TableFlowImporter svg {\n display: block;\n}\n\n.TableFlowImporter svg path {\n stroke: currentColor !important;\n}\n\n.TableFlowImporter:hover,\n.TableFlowImporter:active {\n filter: brightness(1.2);\n}\n\n.TableFlowImporter-dialog {\n background-color: rgba(0, 0, 0, 0.1);\n border-radius: 1rem;\n border: none;\n position: fixed;\n inset: 0;\n padding: 0;\n}\n\n.TableFlowImporter-dialog::backdrop {\n background-color: rgba(0, 0, 0, 0.85);\n}\n\n.TableFlowImporter-dialog iframe {\n border-radius: 1rem;\n width: 80vw;\n height: 80vh;\n min-width: 300px;\n border: none;\n color-scheme: none;\n}\n\n.TableFlowImporter-div iframe {\n border: none;\n display: block;\n width: 100%;\n min-height: 700px;\n}\n\n@media (max-width: 768px) {\n .TableFlowImporter-dialog iframe {\n width: 90vw;\n }\n}\n";
styleInject(css_248z);
function postMessage(element, message) {
var _a;
var id = Date.now().toString(36) + Math.random().toString(36).slice(2);
var finalMessage = __assign(__assign({}, message), { id: id, source: "importer-sdk" });
(_a = element.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage(finalMessage, "*");
}
var postMessages = [];
function createTableFlowImporter(_a) {
var _b = _a.elementId, elementId = _b === void 0 ? "tableflow-importer" : _b, importerId = _a.importerId, hostUrl = _a.hostUrl, _c = _a.isModal, isModal = _c === void 0 ? true : _c, _d = _a.modalOnCloseTriggered, modalOnCloseTriggered = _d === void 0 ? function (importComplete) { return null; } : _d, modalCloseOnOutsideClick = _a.modalCloseOnOutsideClick, template = _a.template, _e = _a.darkMode, darkMode = _e === void 0 ? false : _e, _f = _a.primaryColor, primaryColor = _f === void 0 ? "#7a5ef8" : _f, _g = _a.metadata, metadata = _g === void 0 ? "{}" : _g, onComplete = _a.onComplete, waitOnComplete = _a.waitOnComplete, customStyles = _a.customStyles, className = _a.className, showDownloadTemplateButton = _a.showDownloadTemplateButton, skipHeaderRowSelection = _a.skipHeaderRowSelection, cssOverrides = _a.cssOverrides, schemaless = _a.schemaless, schemalessReadOnly = _a.schemalessReadOnly, schemalessDataTypes = _a.schemalessDataTypes, trimSpaces = _a.trimSpaces, language = _a.language, customTranslations = _a.customTranslations, showUploadAnotherFileButton = _a.showUploadAnotherFileButton;
// CSS classes
var baseClass = "TableFlowImporter";
var themeClass = darkMode && "".concat(baseClass, "-dark");
var domElementClass = ["".concat(baseClass, "-").concat(isModal ? "dialog" : "div"), themeClass, className].filter(function (i) { return i; }).join(" ");
// domElement element
var domElement = document.getElementById(elementId);
var isImportComplete = false;
var backdropClick = function () {
if (modalCloseOnOutsideClick) {
modalOnCloseTriggered(isImportComplete);
isImportComplete = false;
}
};
if (domElement === null) {
domElement = isModal ? document.createElement("dialog") : document.createElement("div");
document.body.appendChild(domElement);
domElement.setAttribute("id", elementId);
if (isModal)
domElement.addEventListener("click", backdropClick);
}
domElement.setAttribute("class", domElementClass);
importerId = importerId === undefined || (importerId === null || importerId === void 0 ? void 0 : importerId.trim()) === "" ? "0" : importerId;
// iframe element
var urlParams = {};
var messageParams = {
importerId: importerId,
isModal: isModal ? "true" : "false",
modalIsOpen: "true",
template: parseObjectOrStringJSON("template", template),
darkMode: darkMode.toString(),
primaryColor: primaryColor,
metadata: parseObjectOrStringJSON("metadata", metadata),
onComplete: onComplete ? "true" : "false",
waitOnComplete: parseOptionalBoolean(waitOnComplete),
customStyles: parseObjectOrStringJSON("customStyles", customStyles),
cssOverrides: parseObjectOrStringJSON("cssOverrides", cssOverrides),
showDownloadTemplateButton: parseOptionalBoolean(showDownloadTemplateButton),
skipHeaderRowSelection: parseOptionalBoolean(skipHeaderRowSelection),
schemaless: parseOptionalBoolean(schemaless),
schemalessReadOnly: parseOptionalBoolean(schemalessReadOnly),
schemalessDataTypes: parseOptionalBoolean(schemalessDataTypes),
trimSpaces: parseOptionalBoolean(trimSpaces),
language: language || "en",
customTranslations: parseObjectOrStringJSON("customTranslations", customTranslations),
showUploadAnotherFileButton: parseOptionalBoolean(showUploadAnotherFileButton),
};
var uploaderUrl = getUploaderUrl(urlParams, hostUrl);
var postHandlers = {
start: function (messageData) {
if (messageParams.modalIsOpen !== "true") {
isImportComplete = false;
var iframe = domElement.querySelector("iframe");
postMessage(iframe, __assign(__assign({}, messageParams), { modalIsOpen: "true" }));
}
},
complete: function (messageData) {
isImportComplete = true;
onComplete === null || onComplete === void 0 ? void 0 : onComplete(messageData === null || messageData === void 0 ? void 0 : messageData.data);
postMessages.push(messageData === null || messageData === void 0 ? void 0 : messageData.id);
},
close: function (messageData) {
modalOnCloseTriggered === null || modalOnCloseTriggered === void 0 ? void 0 : modalOnCloseTriggered(isImportComplete);
postMessages.push(messageData === null || messageData === void 0 ? void 0 : messageData.id);
if (messageParams.modalIsOpen !== "false") {
var iframe = domElement.querySelector("iframe");
postMessage(iframe, __assign(__assign({}, messageParams), { modalIsOpen: "false" }));
}
},
reload: function (messageData) {
isImportComplete = false;
postMessages.push(messageData === null || messageData === void 0 ? void 0 : messageData.id);
},
postMessageSubscribe: function () {
var iframe = domElement.querySelector("iframe");
postMessage(iframe, { params: messageParams });
},
};
function messageListener(e) {
var _a;
if (!e || !(e === null || e === void 0 ? void 0 : e.data))
return;
var messageData = e.data;
if (!messageData ||
(messageData === null || messageData === void 0 ? void 0 : messageData.source) !== "tableflow-importer" ||
// checks if there is importerId and if it is different from the current importerId
((messageData === null || messageData === void 0 ? void 0 : messageData.importerId) && (messageData === null || messageData === void 0 ? void 0 : messageData.importerId) !== importerId) ||
!(messageData === null || messageData === void 0 ? void 0 : messageData.id) ||
postMessages.includes(messageData.id)) {
return;
}
(_a = postHandlers[messageData.type]) === null || _a === void 0 ? void 0 : _a.call(postHandlers, messageData);
}
window.addEventListener("message", messageListener);
domElement.innerHTML = "<iframe src=\"".concat(uploaderUrl, "\" />");
return domElement;
}
function getUploaderUrl(urlParams, hostUrl) {
var searchParams = new URLSearchParams(urlParams);
var defaultImporterUrl = "https://importer.tableflow.com";
return "".concat(hostUrl ? hostUrl : defaultImporterUrl, "?").concat(searchParams);
}
// Allows for the user to pass in JSON as either an object or a string
var parseObjectOrStringJSON = function (name, param) {
if (typeof param === "undefined") {
return "";
}
var parsedObj = {};
if (typeof param === "string") {
try {
parsedObj = JSON.parse(param);
}
catch (e) {
console.error("The '".concat(name, "' prop is not a valid JSON string. This prop can either be a JSON string or JSON object. Please check the documentation for more details."));
return "";
}
}
else {
parsedObj = param;
}
// Replace % symbols with %25
for (var key in parsedObj) {
if (typeof parsedObj[key] === "string") {
parsedObj[key] = parsedObj[key].replace(/%(?!25)/g, "%25");
}
}
return JSON.stringify(parsedObj);
};
var parseOptionalBoolean = function (val) {
return typeof val === "undefined" || val === null ? "" : val ? "true" : "false";
};
export { createTableFlowImporter as default };
//# sourceMappingURL=index.esm.js.map