@libromi/app-builder-react/dist/index.esm.js

React component for App Builder forms

import React, { useRef, useEffect } 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);
};

typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
  var e = new Error(message);
  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};

var AppEmbed = function (_a) {
    var appId = _a.appId, apiKey = _a.apiKey, _b = _a.height, height = _b === void 0 ? '600px' : _b, _c = _a.width, width = _c === void 0 ? '100%' : _c, theme = _a.theme, onSubmit = _a.onSubmit, onValidate = _a.onValidate, className = _a.className, style = _a.style, baseUrl = _a.baseUrl, dataSources = _a.dataSources;
    var containerRef = useRef(null);
    var formInstanceRef = useRef(null);
    var containerId = useRef("app-embed-".concat(Math.random().toString(36).substring(2, 11)));
    var effectiveBaseUrl = baseUrl || 'https://json-form-app.vercel.app';
    useEffect(function () {
        // Load the SDK script
        var script = document.createElement('script');
        // Use the baseUrl to construct the script URL
        script.src = "".concat(effectiveBaseUrl, "/embed.js");
        script.async = true;
        // Function to initialize the form once the script is loaded
        var initializeForm = function () {
            if (!window.DynamicFormsSDK) {
                console.error('DynamicFormsSDK not loaded');
                return;
            }
            // Initialize the SDK with API key
            window.DynamicFormsSDK.init({
                baseUrl: effectiveBaseUrl,
                apiKey: apiKey,
            });
            // Render the form
            formInstanceRef.current = window.DynamicFormsSDK.render(containerId.current, {
                appId: appId,
                height: height,
                width: width,
                theme: theme,
                dataSources: dataSources,
                onSubmit: onSubmit,
                onValidate: onValidate,
            });
        };
        // Set up script load handler
        script.onload = initializeForm;
        // Check if the SDK is already loaded
        if (window.DynamicFormsSDK) {
            initializeForm();
        }
        else {
            // Add the script to the document
            document.body.appendChild(script);
        }
        // Cleanup function
        return function () {
            if (formInstanceRef.current && formInstanceRef.current.destroy) {
                formInstanceRef.current.destroy();
            }
            // Remove the script if we added it
            if (document.body.contains(script)) {
                document.body.removeChild(script);
            }
        };
    }, [appId, apiKey, effectiveBaseUrl, dataSources]); // Re-initialize if these props change
    // Update form when other props change
    useEffect(function () {
        if (formInstanceRef.current && formInstanceRef.current.updateOptions) {
            formInstanceRef.current.updateOptions({
                height: height,
                width: width,
                theme: theme,
                dataSources: dataSources,
                onSubmit: onSubmit,
                onValidate: onValidate,
            });
        }
    }, [height, width, theme, dataSources, onSubmit, onValidate]);
    // Apply height and width to container style
    var containerStyle = __assign(__assign({}, style), { height: typeof height === 'number' ? "".concat(height, "px") : height, width: typeof width === 'number' ? "".concat(width, "px") : width });
    return (React.createElement("div", { id: containerId.current, ref: containerRef, className: className, style: containerStyle }));
};

export { AppEmbed, AppEmbed as default };
//# sourceMappingURL=index.esm.js.map