@tableflow/react
Version:
The React SDK for TableFlow. Embed an importer to collect and transform CSV files in your application.
242 lines (225 loc) • 13.6 kB
JavaScript
import { jsx } from 'react/jsx-runtime';
import { useEffect, useRef, useState } from 'react';
/******************************************************************************
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.
***************************************************************************** */
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);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
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 useListenMessage(_a) {
var importerId = _a.importerId, onComplete = _a.onComplete, modalOnCloseTriggered = _a.modalOnCloseTriggered, onReload = _a.onReload, onStarted = _a.onStarted, onPostMessageSubscribe = _a.onPostMessageSubscribe;
useEffect(function () {
var postMessages = [];
var postHandlers = {
complete: function (messageData) {
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();
postMessages.push(messageData === null || messageData === void 0 ? void 0 : messageData.id);
},
reload: function (messageData) {
onReload === null || onReload === void 0 ? void 0 : onReload();
postMessages.push(messageData === null || messageData === void 0 ? void 0 : messageData.id);
},
start: function () {
onStarted === null || onStarted === void 0 ? void 0 : onStarted();
},
postMessageSubscribe: function (messageData) {
onPostMessageSubscribe();
},
};
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" ||
!(messageData === null || messageData === void 0 ? void 0 : messageData.id) ||
// 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) ||
postMessages.includes(messageData.id)) {
return;
}
(_a = postHandlers[messageData.type]) === null || _a === void 0 ? void 0 : _a.call(postHandlers, messageData);
}
window.addEventListener("message", messageListener);
return function () {
window.removeEventListener("message", messageListener);
};
}, [importerId]);
}
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, "*");
}
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: transparent;\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 visibility: hidden;\n}\n\n.TableFlowImporter-div iframe.visible {\n visibility: visible;\n}\n\n@media (max-width: 768px) {\n .TableFlowImporter-dialog iframe {\n width: 90vw;\n }\n}\n";
styleInject(css_248z);
function TableFlowImporter(_a) {
var importerId = _a.importerId, hostUrl = _a.hostUrl, _b = _a.isModal, isModal = _b === void 0 ? true : _b, _c = _a.modalIsOpen, modalIsOpen = _c === void 0 ? true : _c, _d = _a.modalOnCloseTriggered, modalOnCloseTriggered = _d === void 0 ? function (importComplete) { } : _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, metadata = _a.metadata, className = _a.className, onComplete = _a.onComplete, waitOnComplete = _a.waitOnComplete, customStyles = _a.customStyles, 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, props = __rest(_a, ["importerId", "hostUrl", "isModal", "modalIsOpen", "modalOnCloseTriggered", "modalCloseOnOutsideClick", "template", "darkMode", "primaryColor", "metadata", "className", "onComplete", "waitOnComplete", "customStyles", "showDownloadTemplateButton", "skipHeaderRowSelection", "cssOverrides", "schemaless", "schemalessReadOnly", "schemalessDataTypes", "trimSpaces", "language", "customTranslations", "showUploadAnotherFileButton"]);
var ref = useRef(null);
var iframeRef = useRef(null);
var current = ref.current;
var isImportComplete = useRef(false);
var _g = useState(undefined), uploaderUrl = _g[0], setUploaderUrl = _g[1];
var _h = useState(true), isLoading = _h[0], setIsLoading = _h[1];
useEffect(function () {
var _a, _b;
if (isModal && current) {
if (modalIsOpen) {
(_a = current === null || current === void 0 ? void 0 : current.showModal) === null || _a === void 0 ? void 0 : _a.call(current);
isImportComplete.current = false;
}
else
(_b = current === null || current === void 0 ? void 0 : current.close) === null || _b === void 0 ? void 0 : _b.call(current);
}
}, [isModal, modalIsOpen, current]);
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(" ");
importerId = importerId === undefined || (importerId === null || importerId === void 0 ? void 0 : importerId.trim()) === "" ? "0" : importerId;
var params = {
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 defaultImporterUrl = "https://importer.tableflow.com";
var backdropClick = function () {
if (modalCloseOnOutsideClick) {
modalOnCloseTriggered(isImportComplete.current);
isImportComplete.current = false;
}
};
useEffect(function () {
// const searchParams = new URLSearchParams(params);
setUploaderUrl("".concat(hostUrl ? hostUrl : defaultImporterUrl));
postMessage(iframeRef.current, { importerId: importerId, params: params, type: "importer-parameters" });
}, [params]);
useListenMessage({
importerId: importerId,
onComplete: function (data) {
isImportComplete.current = true;
if (onComplete)
onComplete(data);
},
modalOnCloseTriggered: function () {
modalOnCloseTriggered(isImportComplete.current);
},
onReload: function () {
isImportComplete.current = false;
},
onStarted: function () {
// setIsLoading(false);
},
onPostMessageSubscribe: function () {
setIsLoading(false);
},
});
var elementProps = __assign(__assign(__assign({ ref: ref }, (isModal ? { onClick: backdropClick } : {})), { className: domElementClass }), props);
return isModal ? (jsx("dialog", __assign({}, elementProps, { children: jsx("iframe", { ref: iframeRef, className: isLoading ? "visible" : "", src: uploaderUrl }) }))) : (jsx("div", __assign({}, elementProps, { children: jsx("iframe", { className: isLoading ? "" : "visible", ref: iframeRef, src: uploaderUrl }) })));
}
// 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 { TableFlowImporter };
//# sourceMappingURL=index.esm.js.map