@sutech_jp/raas-react-client 0.0.2 → 0.0.3

package/dist/ReportPaperForm.d.ts

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

package/dist/ReportPaperForm.js

@@ -0,0 +1,117 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(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);
+};
+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.ReportPaperForm = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var ReportPaperForm = function (_a) {
+    var url = _a.url, layoutId = _a.layoutId, data = _a.data, onDataUpdate = _a.onDataUpdate, customData = _a.customData, onCustomDataUpdate = _a.onCustomDataUpdate, onRender = _a.onRender, reportOptions = _a.reportOptions, layout = _a.layout, onLayoutUpdate = _a.onLayoutUpdate, _b = _a.editability, editability = _b === void 0 ? 'none' : _b, _c = _a.layoutEditable, layoutEditable = _c === void 0 ? false : _c;
+    var _d = __read((0, react_1.useState)('unauthorized'), 2), formState = _d[0], setFormState = _d[1];
+    var _e = __read((0, react_1.useState)(), 2), renderedLayoutId = _e[0], setRenderedLayoutId = _e[1];
+    var _f = __read((0, react_1.useState)(), 2), contentHeight = _f[0], setContentHeight = _f[1];
+    var iframe = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (formState === 'unauthorized' || layoutId === undefined || renderedLayoutId === layoutId) {
+            return;
+        }
+        // set the layout id as rendered immediately
+        setRenderedLayoutId(layoutId);
+        var iframeWindow = (_a = iframe.current) === null || _a === void 0 ? void 0 : _a.contentWindow;
+        if (!iframeWindow)
+            return;
+        iframeWindow.postMessage({
+            from: 'paperFormClient',
+            action: 'onShowLayout',
+            id: layoutId,
+            layout: layout,
+            editability: editability,
+            layoutEditable: layoutEditable,
+        }, '*');
+    }, [formState, layoutId, editability, renderedLayoutId, layout, layoutEditable]);
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if ((formState !== 'ready' && formState !== 'rendered') || !data)
+            return;
+        var iframeWindow = (_a = iframe.current) === null || _a === void 0 ? void 0 : _a.contentWindow;
+        if (!iframeWindow)
+            return;
+        iframeWindow.postMessage({
+            from: 'paperFormClient',
+            action: 'onUpdateData',
+            data: data,
+            customData: customData,
+            options: reportOptions,
+        }, '*');
+    }, [formState, data, customData, reportOptions]);
+    var handleMessage = (0, react_1.useCallback)(function (e) {
+        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') {
+            setFormState('ready');
+        }
+        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);
+            setFormState('rendered');
+        }
+        else if (action === 'onBusinessDataUpdate') {
+            var updated = message.updated, options = message.options;
+            if (onDataUpdate)
+                onDataUpdate(__assign(__assign({}, data), updated), options);
+        }
+        else if (action === 'onCustomDataUpdate') {
+            var customData_1 = message.customData, options = message.options;
+            if (onCustomDataUpdate)
+                onCustomDataUpdate(customData_1, options);
+        }
+        else if (action === 'onEditLayout') {
+            var layout_1 = message.layout;
+            if (onLayoutUpdate)
+                onLayoutUpdate(layout_1);
+        }
+    }, [data, onDataUpdate, onCustomDataUpdate, onLayoutUpdate, onRender]);
+    (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", frameBorder: '0', src: url, style: {
+            minWidth: '100%',
+            height: "".concat(contentHeight ? contentHeight + 10 : 240, "px"),
+        } }));
+};
+exports.ReportPaperForm = ReportPaperForm;

package/dist/index.d.ts

@@ -1 +1,3 @@
-export { HelloWorld } from './HelloWorld';
+export { ReportPaperForm } from './ReportPaperForm';
+export { useReportPaperForm } from './useReportPaperForm';
+export * from './types';

package/dist/index.js

@@ -1,5 +1,22 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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.HelloWorld = void 0;
-var HelloWorld_1 = require("./HelloWorld");
-Object.defineProperty(exports, "HelloWorld", { enumerable: true, get: function () { return HelloWorld_1.HelloWorld; } });
+exports.useReportPaperForm = exports.ReportPaperForm = void 0;
+var ReportPaperForm_1 = require("./ReportPaperForm");
+Object.defineProperty(exports, "ReportPaperForm", { enumerable: true, get: function () { return ReportPaperForm_1.ReportPaperForm; } });
+var useReportPaperForm_1 = require("./useReportPaperForm");
+Object.defineProperty(exports, "useReportPaperForm", { enumerable: true, get: function () { return useReportPaperForm_1.useReportPaperForm; } });
+__exportStar(require("./types"), exports);

package/dist/types.d.ts

@@ -0,0 +1,29 @@
+export declare type Layout = any;
+export declare type CustomData = any[];
+export declare type ReportOptions = any[];
+export declare type UserEditability = 'all' | 'customDataOnly' | 'none';
+export declare type FormState = 'unauthorized' | 'authorized' | 'ready' | 'rendered';
+declare type LayoutEditable = {
+    layoutEditable: true;
+    layout: Layout;
+    onLayoutUpdate: (layout: Layout) => void;
+};
+declare type LayoutNotEditable = {
+    layoutEditable?: false;
+    layout?: Layout;
+    onLayoutUpdate?: (layout: Layout) => void;
+};
+export declare type PaperFormArgs<D> = {
+    data: D;
+    onDataUpdate?: (data: D, reportOptions: ReportOptions) => void;
+    customData?: CustomData;
+    onCustomDataUpdate?: (customData: CustomData, reportOptions: ReportOptions) => void;
+    onRender?: (hasRequiredBlank: boolean) => void;
+    reportOptions?: ReportOptions;
+    editability?: UserEditability;
+} & (LayoutEditable | LayoutNotEditable);
+export declare type ReportPaperFormProps<D> = {
+    url: string;
+    layoutId: number;
+} & PaperFormArgs<D>;
+export {};

package/dist/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/useReportPaperForm.d.ts

@@ -0,0 +1,19 @@
+import { CustomData, Layout, PaperFormArgs, ReportOptions, UserEditability } from './types';
+declare type Ret<D> = {
+    dirty: boolean;
+    hasRequiredBlank: boolean;
+    onInitialize: (data: D) => void;
+    paperFormArgs: Required<PaperFormArgs<D>>;
+    generatePdfArgs: {
+        data: D;
+        customData: CustomData;
+        options: ReportOptions;
+        layout: Layout;
+    };
+};
+declare type Options = {
+    editability?: UserEditability;
+    layoutEditable?: boolean;
+};
+export declare const useReportPaperForm: <D>(initialData: D, options?: Options) => Ret<D>;
+export {};

package/dist/useReportPaperForm.js

@@ -0,0 +1,74 @@
+"use strict";
+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.useReportPaperForm = void 0;
+var react_1 = require("react");
+var useReportPaperForm = function (initialData, options) {
+    var _a = __read((0, react_1.useState)(initialData), 2), data = _a[0], setData = _a[1];
+    var _b = __read((0, react_1.useState)([]), 2), customData = _b[0], setCustomData = _b[1];
+    var _c = __read((0, react_1.useState)([]), 2), reportOptions = _c[0], setReportOptions = _c[1];
+    var _d = __read((0, react_1.useState)(), 2), layout = _d[0], setLayout = _d[1];
+    var _e = __read((0, react_1.useState)(false), 2), dirty = _e[0], setDirty = _e[1];
+    var _f = __read((0, react_1.useState)(false), 2), hasRequiredBlank = _f[0], setHasRequiredBlank = _f[1];
+    var onInitialize = (0, react_1.useCallback)(function (data) {
+        setData(data);
+        setCustomData([]);
+        setReportOptions([]);
+        setLayout(undefined);
+        setDirty(false);
+    }, []);
+    var onDataUpdate = (0, react_1.useCallback)(function (data, options) {
+        setData(data);
+        setReportOptions(options);
+        setDirty(true);
+    }, []);
+    var onCustomDataUpdate = (0, react_1.useCallback)(function (customData, options) {
+        setCustomData(customData);
+        setReportOptions(options);
+        setDirty(true);
+    }, []);
+    var onLayoutUpdate = (0, react_1.useCallback)(function (layout) {
+        setLayout(layout);
+        setDirty(true);
+    }, []);
+    var onRender = setHasRequiredBlank;
+    return {
+        dirty: dirty,
+        hasRequiredBlank: hasRequiredBlank,
+        onInitialize: onInitialize,
+        paperFormArgs: {
+            data: data,
+            onDataUpdate: onDataUpdate,
+            customData: customData,
+            onCustomDataUpdate: onCustomDataUpdate,
+            reportOptions: reportOptions,
+            layout: layout,
+            onLayoutUpdate: onLayoutUpdate,
+            onRender: onRender,
+            editability: (options === null || options === void 0 ? void 0 : options.editability) || 'none',
+            layoutEditable: (options === null || options === void 0 ? void 0 : options.layoutEditable) || false,
+        },
+        generatePdfArgs: {
+            data: data,
+            customData: customData,
+            options: reportOptions,
+            layout: layout,
+        },
+    };
+};
+exports.useReportPaperForm = useReportPaperForm;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sutech_jp/raas-react-client",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "react client for raas produced by SuTech",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -32,8 +32,6 @@
     "@types/jest": "^27.4.0",
     "@types/node": "^16.9.4",
     "@types/react": "17.0.20",
-    "@types/react-beautiful-dnd": "^13.1.2",
-    "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^4.31.2",
     "@typescript-eslint/parser": "^4.31.2",
     "eslint": "^7.32.0",
@@ -52,7 +50,6 @@
     "typescript": "^4.4.3"
   },
   "peerDependencies": {
-    "encoding": "0.1.13",
     "next": "^12.0.4",
     "react": "17.0.2",
     "react-dom": "17.0.2"

package/dist/HelloWorld.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const HelloWorld: () => JSX.Element;

package/dist/HelloWorld.js

@@ -1,11 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HelloWorld = void 0;
-var react_1 = __importDefault(require("react"));
-var HelloWorld = function () {
-    return react_1.default.createElement("h3", null, "Hello World");
-};
-exports.HelloWorld = HelloWorld;