npm - @sutech_jp/raas-react-client - Versions diffs - 0.1.37 → 0.1.39 - Mend

@sutech_jp/raas-react-client 0.1.37 → 0.1.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/config/ReportConfig.d.ts +7 -1
package/dist/config/ReportConfig.js +4 -5
package/dist/designer/ReportDesigner.js +2 -1
package/dist/form/ReportPaperForm.js +40 -39
package/dist/gallery/ReportLayoutGallery.js +2 -1
package/dist/organizer/ReportOrganizer.js +2 -1
package/dist/tenantInfo/ReportTenantInfo.js +2 -1
package/dist/webform/ReportWebForm.js +15 -14
package/package.json +1 -1

package/dist/config/ReportConfig.d.ts CHANGED Viewed

@@ -5,9 +5,15 @@ declare type Props = {
     session: Session | undefined;
     width?: string | number;
     height?: string | number;
+    customStyles?: ThemeOptions;
+    /**
+     * @deprecated This option has been removed. Specifying it will be ignored.
+     */
     hideTenantInfoConfig?: boolean;
+    /**
+     * @deprecated This option has been removed. Specifying it will be ignored.
+     */
     toolbarPosition?: 'top' | 'bottom';
-    customStyles?: ThemeOptions;
 };
 export declare const ReportConfig: VFC<Props>;
 export {};

package/dist/config/ReportConfig.js CHANGED Viewed

@@ -5,7 +5,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var targetOrigin_1 = require("../util/targetOrigin");
 var ReportConfig = function (_a) {
-    var session = _a.session, _b = _a.width, width = _b === void 0 ? '100%' : _b, _c = _a.height, height = _c === void 0 ? '100%' : _c, _d = _a.hideTenantInfoConfig, hideTenantInfoConfig = _d === void 0 ? false : _d, _e = _a.toolbarPosition, toolbarPosition = _e === void 0 ? 'bottom' : _e, customStyles = _a.customStyles;
+    var session = _a.session, _b = _a.width, width = _b === void 0 ? '100%' : _b, _c = _a.height, height = _c === void 0 ? '100%' : _c, customStyles = _a.customStyles;
     var iframe = (0, react_1.useRef)(null);
     var handleMessage = (0, react_1.useCallback)(function (e) {
         var _a;
@@ -26,14 +26,13 @@ var ReportConfig = function (_a) {
                 from: 'configClient',
                 action: 'onShow',
                 props: {
-                    hideTenantInfoConfig: hideTenantInfoConfig,
-                    toolbarPosition: toolbarPosition,
                     customStyles: customStyles,
                 },
             }, (0, targetOrigin_1.getTargetOrigin)(session === null || session === void 0 ? void 0 : session.newUrl));
         }
-    }, [customStyles, hideTenantInfoConfig, session, toolbarPosition]);
-    (0, react_1.useEffect)(function () {
+    }, [customStyles, session]);
+    // リスナーの登録は必ず先に済ませる必要があるため、useLayoutEffect を使用する
+    (0, react_1.useLayoutEffect)(function () {
         window.addEventListener('message', handleMessage);
         return function () { return window.removeEventListener('message', handleMessage); };
     }, [handleMessage]);

package/dist/designer/ReportDesigner.js CHANGED Viewed

@@ -38,7 +38,8 @@ var ReportDesigner = function (_a) {
             onChangeOperating && onChangeOperating(operating);
         }
     }, [customStyles, data, onBack, onChangeOperating, options, session === null || session === void 0 ? void 0 : session.newUrl]);
-    (0, react_1.useEffect)(function () {
+    // リスナーの登録は必ず先に済ませる必要があるため、useLayoutEffect を使用する
+    (0, react_1.useLayoutEffect)(function () {
         window.addEventListener('message', handleMessage);
         return function () { return window.removeEventListener('message', handleMessage); };
     }, [handleMessage]);

package/dist/form/ReportPaperForm.js CHANGED Viewed

@@ -26,6 +26,46 @@ var ReportPaperForm = function (_a) {
     var _h = __read((0, react_1.useState)(), 2), contentHeight = _h[0], setContentHeight = _h[1];
     var _j = __read((0, react_1.useState)(false), 2), layoutInitialized = _j[0], setLayoutInitialized = _j[1];
     var iframe = (0, react_1.useRef)(null);
+    var handleMessage = (0, react_1.useCallback)(function (e) {
+        if ((0, targetOrigin_1.getTargetOrigin)(session === null || session === void 0 ? void 0 : session.newUrl) !== '*' && e.origin !== (0, targetOrigin_1.getTargetOrigin)(session === null || session === void 0 ? void 0 : session.newUrl)) {
+            return;
+        }
+        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 !== 'paperForm') {
+            return;
+        }
+        if (action === 'onAuthorized') {
+            setFormState('authorized');
+        }
+        else if (action === 'onReady') {
+            setLayoutInitialized(true);
+            setContentHeight(message === null || message === void 0 ? void 0 : message.contentHeight);
+        }
+        else if (action === 'onRender') {
+            if (onRender)
+                onRender((message === null || message === void 0 ? void 0 : message.hasRequiredBlank) || false);
+        }
+        else if (action === 'onDataUpdate') {
+            var businessData = message.businessData, customData_1 = message.customData, options = message.options;
+            if (onDataUpdate)
+                onDataUpdate(businessData, customData_1, options);
+        }
+        else if (action === 'onEditLayout') {
+            var layout_1 = message.layout;
+            if (onLayoutUpdate)
+                onLayoutUpdate(layout_1);
+        }
+        else if (action === 'onChangeContentHeight') {
+            setContentHeight(message === null || message === void 0 ? void 0 : message.contentHeight);
+        }
+    }, [session, onRender, onDataUpdate, onLayoutUpdate]);
+    // リスナーの登録は必ず先に済ませる必要があるため、useLayoutEffect を使用する
+    (0, react_1.useLayoutEffect)(function () {
+        window.addEventListener('message', handleMessage);
+        return function () { return window.removeEventListener('message', handleMessage); };
+    }, [handleMessage]);
     (0, react_1.useEffect)(function () {
         var _a;
         if (formState === 'unauthorized')
@@ -65,45 +105,6 @@ var ReportPaperForm = function (_a) {
             options: reportOptions,
         }, (0, targetOrigin_1.getTargetOrigin)(session === null || session === void 0 ? void 0 : session.newUrl));
     }, [formState, layoutInitialized, data, customData, reportOptions, session]);
-    var handleMessage = (0, react_1.useCallback)(function (e) {
-        if ((0, targetOrigin_1.getTargetOrigin)(session === null || session === void 0 ? void 0 : session.newUrl) !== '*' && e.origin !== (0, targetOrigin_1.getTargetOrigin)(session === null || session === void 0 ? void 0 : session.newUrl)) {
-            return;
-        }
-        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 !== 'paperForm') {
-            return;
-        }
-        if (action === 'onAuthorized') {
-            setFormState('authorized');
-        }
-        else if (action === 'onReady') {
-            setLayoutInitialized(true);
-            setContentHeight(message === null || message === void 0 ? void 0 : message.contentHeight);
-        }
-        else if (action === 'onRender') {
-            if (onRender)
-                onRender((message === null || message === void 0 ? void 0 : message.hasRequiredBlank) || false);
-        }
-        else if (action === 'onDataUpdate') {
-            var businessData = message.businessData, customData_1 = message.customData, options = message.options;
-            if (onDataUpdate)
-                onDataUpdate(businessData, customData_1, options);
-        }
-        else if (action === 'onEditLayout') {
-            var layout_1 = message.layout;
-            if (onLayoutUpdate)
-                onLayoutUpdate(layout_1);
-        }
-        else if (action === 'onChangeContentHeight') {
-            setContentHeight(message === null || message === void 0 ? void 0 : message.contentHeight);
-        }
-    }, [session, onRender, onDataUpdate, onLayoutUpdate]);
-    (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: "paper-form", name: "paperForm", src: session === null || session === void 0 ? void 0 : session.newUrl, style: {
             width: width,
             height: height || "".concat(contentHeight ? contentHeight + 10 : 240, "px"),

package/dist/gallery/ReportLayoutGallery.js CHANGED Viewed

@@ -44,7 +44,8 @@ var ReportLayoutGallery = function (_a) {
             }, (0, targetOrigin_1.getTargetOrigin)(session === null || session === void 0 ? void 0 : session.newUrl));
         }
     }, [customStyles, deletable, mode, onCreateLayout, onEditLayout, onSelectLayout, session]);
-    (0, react_1.useEffect)(function () {
+    // リスナーの登録は必ず先に済ませる必要があるため、useLayoutEffect を使用する
+    (0, react_1.useLayoutEffect)(function () {
         window.addEventListener('message', handleMessage);
         return function () { return window.removeEventListener('message', handleMessage); };
     }, [handleMessage]);

package/dist/organizer/ReportOrganizer.js CHANGED Viewed

@@ -40,7 +40,8 @@ var ReportOrganizer = function (_a) {
             onCancel && onCancel();
         }
     }, [customStyles, entry, onCancel, onPerform, options, session === null || session === void 0 ? void 0 : session.newUrl]);
-    (0, react_1.useEffect)(function () {
+    // リスナーの登録は必ず先に済ませる必要があるため、useLayoutEffect を使用する
+    (0, react_1.useLayoutEffect)(function () {
         window.addEventListener('message', handleMessage);
         return function () { return window.removeEventListener('message', handleMessage); };
     }, [handleMessage]);

package/dist/tenantInfo/ReportTenantInfo.js CHANGED Viewed

@@ -31,7 +31,8 @@ var ReportTenantInfo = function (_a) {
             }, (0, targetOrigin_1.getTargetOrigin)(session === null || session === void 0 ? void 0 : session.newUrl));
         }
     }, [customStyles, session]);
-    (0, react_1.useEffect)(function () {
+    // リスナーの登録は必ず先に済ませる必要があるため、useLayoutEffect を使用する
+    (0, react_1.useLayoutEffect)(function () {
         window.addEventListener('message', handleMessage);
         return function () { return window.removeEventListener('message', handleMessage); };
     }, [handleMessage]);

package/dist/webform/ReportWebForm.js CHANGED Viewed

@@ -73,19 +73,6 @@ var ReportWebForm = function (_a) {
             messageId: requestId,
         }, (0, targetOrigin_1.getTargetOrigin)(session === null || session === void 0 ? void 0 : session.newUrl));
     }, [session === null || session === void 0 ? void 0 : session.newUrl]);
-    (0, react_1.useEffect)(function () {
-        // 前回の initialized の値を取得
-        var wasInitialized = prevInitialized.current;
-        // initialized が true になった直後は、データ更新メッセージを送信する必要がないため
-        // initialized に加えて、前回の initialized（wasInitialized） を確認し、
-        // 両方が true の場合のみデータ更新メッセージを送信する
-        if (initialized && wasInitialized) {
-            // データの更新があった場合は、データを送信する
-            sendMessage('onUpdateData', values);
-        }
-        // 現在の initialized の値を保存
-        prevInitialized.current = initialized;
-    }, [initialized, values, sendMessage]);
     var handleMessage = (0, react_1.useCallback)(function (e) { return __awaiter(void 0, void 0, void 0, function () {
         var message, from, action, _a, property, rowIndex, value, values_1, result_1, result, values_2, results, _b, property, rowIndex, value, values_3, logId, operating;
         return __generator(this, function (_c) {
@@ -197,10 +184,24 @@ var ReportWebForm = function (_a) {
         validateAll,
         values,
     ]);
-    (0, react_1.useEffect)(function () {
+    // リスナーの登録は必ず先に済ませる必要があるため、useLayoutEffect を使用する
+    (0, react_1.useLayoutEffect)(function () {
         window.addEventListener('message', handleMessage);
         return function () { return window.removeEventListener('message', handleMessage); };
     }, [handleMessage]);
+    (0, react_1.useEffect)(function () {
+        // 前回の initialized の値を取得
+        var wasInitialized = prevInitialized.current;
+        // initialized が true になった直後は、データ更新メッセージを送信する必要がないため
+        // initialized に加えて、前回の initialized（wasInitialized） を確認し、
+        // 両方が true の場合のみデータ更新メッセージを送信する
+        if (initialized && wasInitialized) {
+            // データの更新があった場合は、データを送信する
+            sendMessage('onUpdateData', values);
+        }
+        // 現在の initialized の値を保存
+        prevInitialized.current = initialized;
+    }, [initialized, values, sendMessage]);
     return (0, jsx_runtime_1.jsx)("iframe", { ref: iframe, id: "webform", src: session === null || session === void 0 ? void 0 : session.newUrl, style: { width: width, height: height, border: 0 } });
 };
 exports.ReportWebForm = ReportWebForm;

package/package.json CHANGED Viewed

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