@sutech_jp/raas-react-client 0.1.44 → 0.1.46

package/dist/index.d.ts

@@ -7,4 +7,5 @@ export { ReportTenantInfo } from './tenantInfo/ReportTenantInfo';
 export { ReportOrganizer } from './organizer/ReportOrganizer';
 export { ReportWebForm } from './webform/ReportWebForm';
 export { ReportWebFormBulk } from './webform/ReportWebFormBulk';
+export { ReportWebFormEdit } from './webform/ReportWebFormEdit';
 export * from './types';

package/dist/index.js

@@ -14,7 +14,7 @@ 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.ReportWebFormBulk = exports.ReportWebForm = exports.ReportOrganizer = exports.ReportTenantInfo = exports.ReportLayoutGallery = exports.createLocalSession = exports.useReportPaperForm = exports.ReportPaperForm = exports.ReportDesigner = exports.ReportConfig = void 0;
+exports.ReportWebFormEdit = exports.ReportWebFormBulk = exports.ReportWebForm = exports.ReportOrganizer = exports.ReportTenantInfo = exports.ReportLayoutGallery = exports.createLocalSession = exports.useReportPaperForm = exports.ReportPaperForm = exports.ReportDesigner = exports.ReportConfig = void 0;
 var ReportConfig_1 = require("./config/ReportConfig");
 Object.defineProperty(exports, "ReportConfig", { enumerable: true, get: function () { return ReportConfig_1.ReportConfig; } });
 var ReportDesigner_1 = require("./designer/ReportDesigner");
@@ -34,4 +34,6 @@ var ReportWebForm_1 = require("./webform/ReportWebForm");
 Object.defineProperty(exports, "ReportWebForm", { enumerable: true, get: function () { return ReportWebForm_1.ReportWebForm; } });
 var ReportWebFormBulk_1 = require("./webform/ReportWebFormBulk");
 Object.defineProperty(exports, "ReportWebFormBulk", { enumerable: true, get: function () { return ReportWebFormBulk_1.ReportWebFormBulk; } });
+var ReportWebFormEdit_1 = require("./webform/ReportWebFormEdit");
+Object.defineProperty(exports, "ReportWebFormEdit", { enumerable: true, get: function () { return ReportWebFormEdit_1.ReportWebFormEdit; } });
 __exportStar(require("./types"), exports);

package/dist/types/webform.d.ts

@@ -16,6 +16,11 @@ export declare type MoveRowOperation = {
     to: number;
 };
 export declare type ItemValue = string | number | boolean | Date | null;
+export declare type ColumnChangeValue = {
+    property: string;
+    listProperty: string;
+    value: ItemValue;
+};
 export declare type ObjectValue = {
     [key: string]: ItemValue | ObjectValue | ArrayValue;
 };

package/dist/webform/ReportWebForm.d.ts

@@ -1,5 +1,5 @@
 import { VFC } from 'react';
-import { BusinessData, CustomValidationResult, ComponentOptions, ItemValue, ExtensionSchemaDef, RowOperation } from 'src/types/webform';
+import { BusinessData, CustomValidationResult, ComponentOptions, ItemValue, ExtensionSchemaDef, RowOperation, ColumnChangeValue } from 'src/types/webform';
 import { Session } from '../types';
 import { ThemeOptions } from '../types/theme';
 declare type Props = {
@@ -15,6 +15,7 @@ declare type Props = {
     validate?: (property: string, rowIndex: number | undefined, value: ItemValue, values: BusinessData) => Promise<CustomValidationResult>;
     validateAll?: (values: BusinessData) => Promise<CustomValidationResult[]>;
     onChange?: (property: string, rowIndex: number | undefined, value: ItemValue, values: BusinessData) => void;
+    onChangeList?: (changes: ColumnChangeValue[], values: BusinessData) => void;
     onChangeRow?: (operation: RowOperation, values: BusinessData) => void;
     onGenerate?: (logId: string) => void;
     onChangeOperating?: (operating: boolean) => void;

package/dist/webform/ReportWebForm.js

@@ -57,7 +57,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var targetOrigin_1 = require("../util/targetOrigin");
 var ReportWebForm = function (_a) {
-    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, layoutId = _a.layoutId, values = _a.values, fileName = _a.fileName, extensionSchemaDef = _a.extensionSchemaDef, options = _a.options, validate = _a.validate, validateAll = _a.validateAll, onChange = _a.onChange, onChangeRow = _a.onChangeRow, onGenerate = _a.onGenerate, onChangeOperating = _a.onChangeOperating, onBack = _a.onBack;
+    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, layoutId = _a.layoutId, values = _a.values, fileName = _a.fileName, extensionSchemaDef = _a.extensionSchemaDef, options = _a.options, validate = _a.validate, validateAll = _a.validateAll, onChange = _a.onChange, onChangeList = _a.onChangeList, onChangeRow = _a.onChangeRow, onGenerate = _a.onGenerate, onChangeOperating = _a.onChangeOperating, onBack = _a.onBack;
     var _d = __read((0, react_1.useState)(false), 2), initialized = _d[0], setInitialized = _d[1];
     var prevInitialized = (0, react_1.useRef)(false);
     var iframe = (0, react_1.useRef)(null);
@@ -74,9 +74,9 @@ var ReportWebForm = function (_a) {
         }, (0, targetOrigin_1.getTargetOrigin)(session === null || session === void 0 ? void 0 : session.newUrl));
     }, [session === null || session === void 0 ? void 0 : session.newUrl]);
     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, _c, operation, values_4, logId, operating;
-        return __generator(this, function (_d) {
-            switch (_d.label) {
+        var message, from, action, _a, property, rowIndex, value, values_1, result_1, result, values_2, results, _b, property, rowIndex, value, values_3, _c, changes, values_4, _d, operation, values_5, logId, operating;
+        return __generator(this, function (_e) {
+            switch (_e.label) {
                 case 0:
                     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 [2 /*return*/];
@@ -116,7 +116,7 @@ var ReportWebForm = function (_a) {
                         // バリデーション結果を送信
                     ];
                 case 2:
-                    result = _d.sent();
+                    result = _e.sent();
                     // バリデーション結果を送信
                     sendMessage('onValidated', result, message.messageId);
                     return [3 /*break*/, 6];
@@ -132,7 +132,7 @@ var ReportWebForm = function (_a) {
                         // バリデーション結果を送信
                     ];
                 case 4:
-                    results = _d.sent();
+                    results = _e.sent();
                     // バリデーション結果を送信
                     sendMessage('onValidatedAll', results, message.messageId);
                     return [3 /*break*/, 6];
@@ -144,12 +144,19 @@ var ReportWebForm = function (_a) {
                         _b = message.payload, property = _b.property, rowIndex = _b.rowIndex, value = _b.value, values_3 = _b.values;
                         onChange(property, rowIndex, value, values_3);
                     }
+                    else if (action === 'onChangeList') {
+                        if (!onChangeList) {
+                            return [2 /*return*/];
+                        }
+                        _c = message.payload, changes = _c.changes, values_4 = _c.values;
+                        onChangeList(changes, values_4);
+                    }
                     else if (action === 'onChangeRow') {
                         if (!onChangeRow) {
                             return [2 /*return*/];
                         }
-                        _c = message.payload, operation = _c.operation, values_4 = _c.values;
-                        onChangeRow(operation, values_4);
+                        _d = message.payload, operation = _d.operation, values_5 = _d.values;
+                        onChangeRow(operation, values_5);
                     }
                     else if (action === 'onGenerate') {
                         if (!onGenerate) {
@@ -171,7 +178,7 @@ var ReportWebForm = function (_a) {
                         }
                         onBack();
                     }
-                    _d.label = 6;
+                    _e.label = 6;
                 case 6: return [2 /*return*/];
             }
         });
@@ -182,6 +189,7 @@ var ReportWebForm = function (_a) {
         layoutId,
         onBack,
         onChange,
+        onChangeList,
         onChangeOperating,
         onChangeRow,
         onGenerate,

package/dist/webform/ReportWebFormBulk.js

@@ -191,6 +191,6 @@ var ReportWebFormBulk = function (_a) {
         // 現在の initialized の値を保存
         prevInitialized.current = initialized;
     }, [initialized, dataList, 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 } });
+    return (0, jsx_runtime_1.jsx)("iframe", { ref: iframe, id: "webform-bulk", src: session === null || session === void 0 ? void 0 : session.newUrl, style: { width: width, height: height, border: 0 } });
 };
 exports.ReportWebFormBulk = ReportWebFormBulk;

package/dist/webform/ReportWebFormEdit.d.ts

@@ -0,0 +1,25 @@
+import { VFC } from 'react';
+import { BusinessData, CustomValidationResult, ComponentOptions, ItemValue, ExtensionSchemaDef, RowOperation, ColumnChangeValue } from 'src/types/webform';
+import { Session } from '../types';
+import { ThemeOptions } from '../types/theme';
+declare type Props = {
+    session: Session | undefined;
+    width?: string | number;
+    height?: string | number;
+    customStyles?: ThemeOptions;
+    layoutId: number;
+    values?: BusinessData;
+    fileName?: string;
+    extensionSchemaDef?: ExtensionSchemaDef;
+    options?: ComponentOptions;
+    validate?: (property: string, rowIndex: number | undefined, value: ItemValue, values: BusinessData) => Promise<CustomValidationResult>;
+    validateAll?: (values: BusinessData) => Promise<CustomValidationResult[]>;
+    onChange?: (property: string, rowIndex: number | undefined, value: ItemValue, values: BusinessData) => void;
+    onChangeList?: (changes: ColumnChangeValue[], values: BusinessData) => void;
+    onChangeRow?: (operation: RowOperation, values: BusinessData) => void;
+    onCompleteInput?: (values: BusinessData) => Promise<void>;
+    onChangeOperating?: (operating: boolean) => void;
+    onBack?: () => void;
+};
+export declare const ReportWebFormEdit: VFC<Props>;
+export {};

package/dist/webform/ReportWebFormEdit.js

@@ -0,0 +1,237 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReportWebFormEdit = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var targetOrigin_1 = require("../util/targetOrigin");
+var ReportWebFormEdit = function (_a) {
+    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, layoutId = _a.layoutId, values = _a.values, fileName = _a.fileName, extensionSchemaDef = _a.extensionSchemaDef, options = _a.options, validate = _a.validate, validateAll = _a.validateAll, onChange = _a.onChange, onChangeList = _a.onChangeList, onChangeRow = _a.onChangeRow, onCompleteInput = _a.onCompleteInput, onChangeOperating = _a.onChangeOperating, onBack = _a.onBack;
+    var _d = __read((0, react_1.useState)(false), 2), initialized = _d[0], setInitialized = _d[1];
+    var prevInitialized = (0, react_1.useRef)(false);
+    var iframe = (0, react_1.useRef)(null);
+    var sendMessage = (0, react_1.useCallback)(function (action, props, requestId) {
+        var _a;
+        var iframeWindow = (_a = iframe.current) === null || _a === void 0 ? void 0 : _a.contentWindow;
+        if (!iframeWindow)
+            return;
+        iframeWindow.postMessage({
+            from: 'webformClient',
+            action: action,
+            props: props,
+            messageId: requestId,
+        }, (0, targetOrigin_1.getTargetOrigin)(session === null || session === void 0 ? void 0 : session.newUrl));
+    }, [session === null || session === void 0 ? void 0 : session.newUrl]);
+    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, _c, changes, values_4, _d, operation, values_5, values_6, operating;
+        return __generator(this, function (_e) {
+            switch (_e.label) {
+                case 0:
+                    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 [2 /*return*/];
+                    }
+                    message = e.data;
+                    from = message === null || message === void 0 ? void 0 : message.from;
+                    action = message === null || message === void 0 ? void 0 : message.action;
+                    if (from !== 'webform') {
+                        return [2 /*return*/];
+                    }
+                    if (!(action === 'onAuthorized')) return [3 /*break*/, 1];
+                    sendMessage('onShow', {
+                        customStyles: customStyles,
+                        layoutId: layoutId,
+                        values: values,
+                        fileName: fileName,
+                        extensionSchemaDef: extensionSchemaDef,
+                        options: options,
+                    });
+                    // 初期化完了状態にする
+                    setInitialized(true);
+                    return [3 /*break*/, 11];
+                case 1:
+                    if (!(action === 'onValidate')) return [3 /*break*/, 3];
+                    _a = message.payload, property = _a.property, rowIndex = _a.rowIndex, value = _a.value, values_1 = _a.values;
+                    if (!validate) {
+                        result_1 = {
+                            type: 'custom',
+                            property: property,
+                            error: false,
+                            message: '',
+                        };
+                        sendMessage('onValidated', result_1, message.messageId);
+                        return [2 /*return*/];
+                    }
+                    return [4 /*yield*/, validate(property, rowIndex, value, values_1)
+                        // バリデーション結果を送信
+                    ];
+                case 2:
+                    result = _e.sent();
+                    // バリデーション結果を送信
+                    sendMessage('onValidated', result, message.messageId);
+                    return [3 /*break*/, 11];
+                case 3:
+                    if (!(action === 'onValidateAll')) return [3 /*break*/, 5];
+                    if (!validateAll) {
+                        // 空のバリデーション結果を送信
+                        sendMessage('onValidatedAll', [], message.messageId);
+                        return [2 /*return*/];
+                    }
+                    values_2 = message.payload.values;
+                    return [4 /*yield*/, validateAll(values_2)
+                        // バリデーション結果を送信
+                    ];
+                case 4:
+                    results = _e.sent();
+                    // バリデーション結果を送信
+                    sendMessage('onValidatedAll', results, message.messageId);
+                    return [3 /*break*/, 11];
+                case 5:
+                    if (!(action === 'onChange')) return [3 /*break*/, 6];
+                    if (!onChange) {
+                        return [2 /*return*/];
+                    }
+                    _b = message.payload, property = _b.property, rowIndex = _b.rowIndex, value = _b.value, values_3 = _b.values;
+                    onChange(property, rowIndex, value, values_3);
+                    return [3 /*break*/, 11];
+                case 6:
+                    if (!(action === 'onChangeList')) return [3 /*break*/, 7];
+                    if (!onChangeList) {
+                        return [2 /*return*/];
+                    }
+                    _c = message.payload, changes = _c.changes, values_4 = _c.values;
+                    onChangeList(changes, values_4);
+                    return [3 /*break*/, 11];
+                case 7:
+                    if (!(action === 'onChangeRow')) return [3 /*break*/, 8];
+                    if (!onChangeRow) {
+                        return [2 /*return*/];
+                    }
+                    _d = message.payload, operation = _d.operation, values_5 = _d.values;
+                    onChangeRow(operation, values_5);
+                    return [3 /*break*/, 11];
+                case 8:
+                    if (!(action === 'onCompleteInput')) return [3 /*break*/, 10];
+                    if (!onCompleteInput) {
+                        // 結果メッセージを送信
+                        sendMessage('onCompleted', {}, message.messageId);
+                        return [2 /*return*/];
+                    }
+                    values_6 = message.payload;
+                    // 入力完了処理を同期待ちする
+                    return [4 /*yield*/, onCompleteInput(values_6)
+                        // 結果メッセージを送信
+                    ];
+                case 9:
+                    // 入力完了処理を同期待ちする
+                    _e.sent();
+                    // 結果メッセージを送信
+                    sendMessage('onCompleted', {}, message.messageId);
+                    return [3 /*break*/, 11];
+                case 10:
+                    if (action === 'onChangeOperating') {
+                        if (!onChangeOperating) {
+                            return [2 /*return*/];
+                        }
+                        operating = message.payload;
+                        onChangeOperating(operating);
+                    }
+                    else if (action === 'onBack') {
+                        if (!onBack) {
+                            return [2 /*return*/];
+                        }
+                        onBack();
+                    }
+                    _e.label = 11;
+                case 11: return [2 /*return*/];
+            }
+        });
+    }); }, [
+        customStyles,
+        extensionSchemaDef,
+        fileName,
+        layoutId,
+        onBack,
+        onChange,
+        onChangeList,
+        onChangeOperating,
+        onChangeRow,
+        onCompleteInput,
+        options,
+        sendMessage,
+        session === null || session === void 0 ? void 0 : session.newUrl,
+        validate,
+        validateAll,
+        values,
+    ]);
+    // リスナーの登録は必ず先に済ませる必要があるため、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-edit", src: session === null || session === void 0 ? void 0 : session.newUrl, style: { width: width, height: height, border: 0 } });
+};
+exports.ReportWebFormEdit = ReportWebFormEdit;

package/package.json

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