@sutech_jp/raas-react-client 0.0.12 → 0.0.14

package/dist/designer/ReportDesigner.d.ts

@@ -0,0 +1,8 @@
+import { VFC } from 'react';
+declare type Props = {
+    url: string;
+    data?: Record<string, any>;
+    backUrl?: string;
+};
+export declare const ReportDesigner: VFC<Props>;
+export {};

package/dist/designer/ReportDesigner.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReportDesigner = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var ReportDesigner = function (_a) {
+    var url = _a.url, data = _a.data, backUrl = _a.backUrl;
+    var iframe = (0, react_1.useRef)(null);
+    var handleMessage = (0, react_1.useCallback)(function (e) {
+        var _a;
+        var message = e.data;
+        var from = message === null || message === void 0 ? void 0 : message.from;
+        var action = message === null || message === void 0 ? void 0 : message.action;
+        if (from !== 'designer') {
+            return;
+        }
+        if (action === 'onInitialize') {
+            var iframeWindow = (_a = iframe.current) === null || _a === void 0 ? void 0 : _a.contentWindow;
+            if (!iframeWindow)
+                return;
+            iframeWindow.postMessage({
+                from: 'designerClient',
+                action: 'onRender',
+                backUrl: backUrl,
+                data: data,
+            }, '*');
+        }
+    }, [backUrl, data]);
+    (0, react_1.useEffect)(function () {
+        window.addEventListener('message', handleMessage);
+        return function () { return window.removeEventListener('message', handleMessage); };
+    }, [handleMessage]);
+    return (0, jsx_runtime_1.jsx)("iframe", { ref: iframe, id: "designer", name: "designer", src: url, style: { minWidth: '100%', height: '100%' } });
+};
+exports.ReportDesigner = ReportDesigner;

package/dist/{ReportPaperForm.d.ts → form/ReportPaperForm.d.ts}

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
-import { ReportPaperFormProps } from './types';
+import { ReportPaperFormProps } from '../types';
 export declare const ReportPaperForm: <D>({ url, layoutId, data, onDataUpdate, customData, onCustomDataUpdate, onRender, reportOptions, layout, onLayoutUpdate, editability, layoutEditable, version, }: ReportPaperFormProps<D>) => ReactElement;

package/dist/{ReportPaperForm.js → form/ReportPaperForm.js}

@@ -85,9 +85,9 @@ var ReportPaperForm = function (_a) {
         }
         else if (action === 'onReady') {
             setLayoutInitialized(true);
+            setContentHeight(message === null || message === void 0 ? void 0 : message.contentHeight);
         }
         else if (action === 'onRender') {
-            setContentHeight(message === null || message === void 0 ? void 0 : message.contentHeight);
             if (onRender)
                 onRender((message === null || message === void 0 ? void 0 : message.hasRequiredBlank) || false);
         }
@@ -106,6 +106,9 @@ var ReportPaperForm = function (_a) {
             if (onLayoutUpdate)
                 onLayoutUpdate(layout_1);
         }
+        else if (action === 'onChangeContentHeight') {
+            setContentHeight(message === null || message === void 0 ? void 0 : message.contentHeight);
+        }
     }, [data, onDataUpdate, onCustomDataUpdate, onLayoutUpdate, onRender]);
     (0, react_1.useEffect)(function () {
         window.addEventListener('message', handleMessage);

package/dist/{useReportPaperForm.d.ts → form/useReportPaperForm.d.ts}

@@ -1,4 +1,4 @@
-import { CustomData, Layout, PaperFormArgs, ReportOptions, UserEditability } from './types';
+import { CustomData, Layout, PaperFormArgs, ReportOptions, UserEditability } from '../types';
 declare type Ret<D> = {
     dirty: boolean;
     originalData: D;

package/dist/{LayoutGallery.d.ts → gallery/ReportLayoutGallery.d.ts}

@@ -3,5 +3,5 @@ declare type LayoutGalleryProps = {
     url: string;
     onSelectLayout: (layoutId: number) => void;
 };
-export declare const LayoutGallery: FC<LayoutGalleryProps>;
+export declare const ReportLayoutGallery: FC<LayoutGalleryProps>;
 export {};

package/dist/{LayoutGallery.js → gallery/ReportLayoutGallery.js}

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LayoutGallery = void 0;
+exports.ReportLayoutGallery = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var LayoutGallery = function (_a) {
+var ReportLayoutGallery = function (_a) {
     var url = _a.url, onSelectLayout = _a.onSelectLayout;
     var handleMessage = (0, react_1.useCallback)(function (e) {
         var _a, _b, _c;
@@ -17,4 +17,4 @@ var LayoutGallery = function (_a) {
     }, [handleMessage]);
     return (0, jsx_runtime_1.jsx)("iframe", { id: "gallery", frameBorder: '0', src: url, style: { width: '100%', height: 'calc(100vh/1.5)' } });
 };
-exports.LayoutGallery = LayoutGallery;
+exports.ReportLayoutGallery = ReportLayoutGallery;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-export { ReportPaperForm } from './ReportPaperForm';
-export { LayoutGallery } from './LayoutGallery';
-export { useReportPaperForm } from './useReportPaperForm';
+export { ReportDesigner } from './designer/ReportDesigner';
+export { ReportPaperForm } from './form/ReportPaperForm';
+export { useReportPaperForm } from './form/useReportPaperForm';
+export { ReportLayoutGallery } from './gallery/ReportLayoutGallery';
 export * from './types';

package/dist/index.js

@@ -14,11 +14,13 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useReportPaperForm = exports.LayoutGallery = exports.ReportPaperForm = void 0;
-var ReportPaperForm_1 = require("./ReportPaperForm");
+exports.ReportLayoutGallery = exports.useReportPaperForm = exports.ReportPaperForm = exports.ReportDesigner = void 0;
+var ReportDesigner_1 = require("./designer/ReportDesigner");
+Object.defineProperty(exports, "ReportDesigner", { enumerable: true, get: function () { return ReportDesigner_1.ReportDesigner; } });
+var ReportPaperForm_1 = require("./form/ReportPaperForm");
 Object.defineProperty(exports, "ReportPaperForm", { enumerable: true, get: function () { return ReportPaperForm_1.ReportPaperForm; } });
-var LayoutGallery_1 = require("./LayoutGallery");
-Object.defineProperty(exports, "LayoutGallery", { enumerable: true, get: function () { return LayoutGallery_1.LayoutGallery; } });
-var useReportPaperForm_1 = require("./useReportPaperForm");
+var useReportPaperForm_1 = require("./form/useReportPaperForm");
 Object.defineProperty(exports, "useReportPaperForm", { enumerable: true, get: function () { return useReportPaperForm_1.useReportPaperForm; } });
+var ReportLayoutGallery_1 = require("./gallery/ReportLayoutGallery");
+Object.defineProperty(exports, "ReportLayoutGallery", { enumerable: true, get: function () { return ReportLayoutGallery_1.ReportLayoutGallery; } });
 __exportStar(require("./types"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sutech_jp/raas-react-client",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "react client for raas produced by SuTech",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",