@sutech_jp/datatraveler-react-client 0.0.28 → 0.1.22

package/dist/DataTravelerImport.d.ts

@@ -1,21 +1,103 @@
-import { ReactElement } from 'react';
-import { Binder, DataTravelerResult, Mapper, ImportType, UseReportType, Session } from './types';
+import { VFC } from 'react';
+import { Binder, DataTravelerResult, Mapper, ImportType, UseReportType, Session, MasterType, MasterSyncedStatus, ExtensionSchemaDef, WorkMemoDef, MapperDef } from './types';
 import { ThemeOptions } from './types/theme';
-declare type Props<D> = {
+/**
+ * データトラベラーコンポーネントのプロパティ
+ */
+declare type Props = {
+    /** Raasを組み込むアプリケーション名 */
     application: string;
+    /** 帳票のスキーマ名 */
     schema: string;
+    /**
+     * セッション情報
+     * バックエンドに用意したcreateSession APIにて発行したSessionオブジェクトを渡す
+     */
     session: Session | undefined;
+    /** @ignore */
     googleToken?: string;
+    /**
+     * 帳票発行ボタン押下後に実行されるコールバック関数
+     * resultに含まれるdataImportLogIdを保存する処理を実装する想定の関数
+     */
     onImport: (result: DataTravelerResult) => void;
+    /**
+     * コンポーネント初期化完了時に実行されるコールバック関数
+     */
+    onInitialized?: () => void;
+    /**
+     * キャンセルボタン押下時に実行されるコールバック関数
+     * 任意の画面への遷移処理を実装する想定の関数
+     */
     onCancel?: () => void;
+    /**
+     * 操作中状態の変化時に実行されるコールバック関数
+     *
+     * CSVをアップロードするとoperating=trueとして実行され、帳票作成が開始されるとoperating=falseとして実行される。
+     * 操作中の画面遷移やブラウザリロード時に確認ダイアログを表示するのに利用する想定。
+     */
+    onChangeOperating?: (operating: boolean) => void;
+    /** @ignore */
     importType?: ImportType;
-    currentData?: D[];
+    /** @ignore */
+    currentData?: Record<string, any>[];
+    /**
+     * マスタの同期方法
+     *
+     * { type: 'direct' } : コンポーネントの引数で直接渡す方式
+     * { type: 'sync' }   : バックエンドを経由し同期する方式
+     *
+     * { partners : { type : 'sync'} } のように指定する
+     */
+    masterType?: MasterType;
+    /**
+     * マスタの同期ステータス
+     * 同期方法がsyncの場合に、同期ステータスを指定する
+     */
+    masterSyncedStatus?: MasterSyncedStatus;
+    /**
+     * マッピング形式のマスタ
+     * 取引先マスタのようなマッピング形式のマスタを指定する
+     */
     mapper?: Mapper;
+    /**
+     * バインド形式のマスタ
+     * 自社情報マスタのようなバインド形式のマスタを指定する
+     */
     binder?: Binder;
+    /**
+     * マッピング形式の定義
+     * マッピング形式の定義を指定する
+     */
+    mapperDefs?: Array<MapperDef>;
+    /**
+     * バインド形式の定義
+     * バインド形式の定義を指定する
+     */
+    binderDefs?: Array<MapperDef>;
+    /** コンポーネントの幅 */
     width?: number;
+    /** コンポーネントの高さ */
     height?: number;
+    /** カスタムスタイル */
     customStyles?: ThemeOptions;
+    /**
+     * 帳票発行機能の利用方法
+     *
+     * データトラベラーコンポーネントは本来データの変換を主軸としてコンポーネントだが、
+     * 本引数を指定することで帳票発行機能とシームレスに連携し、帳票発行まで行うことができるようになる。
+     */
     report?: UseReportType;
+    /** @ignore 拡張スキーマの定義（オプション） */
+    extensionSchemaDef?: ExtensionSchemaDef;
+    /** 作業メモの定義 */
+    workMemoDef?: WorkMemoDef;
 };
-export declare const DataTravelerImport: <D>({ application, schema, session, googleToken, importType, currentData, mapper, binder, width, height, customStyles, report, onImport, onCancel, }: Props<D>) => ReactElement;
+/**
+ * データトラベラーコンポーネント
+ *
+ * CSVインポート画面用のコンポーネントです。
+ * 本コンポーネントにより、CSVアップロード〜帳票発行までの一連の画面を組み込むことが可能となります。
+ */
+export declare const DataTravelerImport: VFC<Props>;
 export {};

package/dist/DataTravelerImport.js

@@ -1,12 +1,35 @@
 "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.DataTravelerImport = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var targetOrigin_1 = require("./util/targetOrigin");
+/**
+ * データトラベラーコンポーネント
+ *
+ * CSVインポート画面用のコンポーネントです。
+ * 本コンポーネントにより、CSVアップロード〜帳票発行までの一連の画面を組み込むことが可能となります。
+ */
 var DataTravelerImport = function (_a) {
-    var application = _a.application, schema = _a.schema, session = _a.session, googleToken = _a.googleToken, _b = _a.importType, importType = _b === void 0 ? googleToken ? 'gss' : 'csv' : _b, _c = _a.currentData, currentData = _c === void 0 ? [] : _c, _d = _a.mapper, mapper = _d === void 0 ? {} : _d, _e = _a.binder, binder = _e === void 0 ? {} : _e, width = _a.width, height = _a.height, customStyles = _a.customStyles, report = _a.report, onImport = _a.onImport, onCancel = _a.onCancel;
+    var application = _a.application, schema = _a.schema, session = _a.session, googleToken = _a.googleToken, _b = _a.importType, importType = _b === void 0 ? googleToken ? 'gss' : 'csv' : _b, _c = _a.currentData, currentData = _c === void 0 ? [] : _c, masterType = _a.masterType, masterSyncedStatus = _a.masterSyncedStatus, _d = _a.mapper, mapper = _d === void 0 ? {} : _d, _e = _a.binder, binder = _e === void 0 ? {} : _e, mapperDefs = _a.mapperDefs, binderDefs = _a.binderDefs, width = _a.width, height = _a.height, customStyles = _a.customStyles, report = _a.report, extensionSchemaDef = _a.extensionSchemaDef, workMemoDef = _a.workMemoDef, onImport = _a.onImport, onInitialized = _a.onInitialized, onCancel = _a.onCancel, onChangeOperating = _a.onChangeOperating;
     var iframe = (0, react_1.useRef)(null);
+    var _f = __read((0, react_1.useState)('initializing'), 2), iframeState = _f[0], setIframeState = _f[1];
     var handleMessage = (0, react_1.useCallback)(function (e) {
         var _a;
         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)) {
@@ -19,7 +42,12 @@ var DataTravelerImport = function (_a) {
         if (from !== 'dataTraveler') {
             return;
         }
-        if (action === 'onAuthorized') {
+        if (action === 'onInitialized') {
+            setIframeState('initialized');
+            onInitialized && onInitialized();
+        }
+        else if (action === 'onAuthorized') {
+            setIframeState('prepared');
             var iframeWindow = (_a = iframe.current) === null || _a === void 0 ? void 0 : _a.contentWindow;
             if (!iframeWindow)
                 return;
@@ -30,9 +58,14 @@ var DataTravelerImport = function (_a) {
                 application: application,
                 schema: schema,
                 currentData: currentData,
+                masterType: masterType,
+                masterSyncedStatus: masterSyncedStatus,
                 mapper: mapper,
                 binder: binder,
+                mapperDefs: mapperDefs,
+                binderDefs: binderDefs,
                 useCancel: !!onCancel,
+                useChangeOperating: !!onChangeOperating,
                 googleToken: googleToken,
                 size: {
                     width: width,
@@ -40,6 +73,8 @@ var DataTravelerImport = function (_a) {
                 },
                 customStyles: customStyles,
                 report: report,
+                extensionSchemaDef: extensionSchemaDef,
+                workMemoDef: workMemoDef,
             }, (0, targetOrigin_1.getTargetOrigin)(session === null || session === void 0 ? void 0 : session.newUrl));
         }
         else if (action === 'onImport') {
@@ -48,22 +83,53 @@ var DataTravelerImport = function (_a) {
         else if (action === 'onCancel') {
             onCancel && onCancel();
         }
+        else if (action === 'onChangeOperating') {
+            onChangeOperating && onChangeOperating(message.operating);
+        }
     }, [
         importType,
         application,
         schema,
         currentData,
+        masterType,
+        masterSyncedStatus,
         mapper,
         binder,
-        onCancel,
+        mapperDefs,
+        binderDefs,
         googleToken,
         width,
         height,
         customStyles,
         report,
+        extensionSchemaDef,
+        workMemoDef,
         session,
         onImport,
+        onInitialized,
+        onCancel,
+        onChangeOperating,
     ]);
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (masterSyncedStatus === undefined)
+            return;
+        if (iframeState === 'initializing')
+            return;
+        if (iframeState === 'initialized')
+            return;
+        if (masterSyncedStatus) {
+            console.log('postMessage#onMasterSynced');
+            var iframeWindow = (_a = iframe.current) === null || _a === void 0 ? void 0 : _a.contentWindow;
+            if (!iframeWindow)
+                return;
+            iframeWindow.postMessage({
+                from: 'dataTravelerClient',
+                action: 'onMasterSynced',
+                masterSyncedStatus: masterSyncedStatus,
+            }, (0, targetOrigin_1.getTargetOrigin)(session === null || session === void 0 ? void 0 : session.newUrl));
+        }
+    }, [masterSyncedStatus, iframeState, session]);
     (0, react_1.useEffect)(function () {
         window.addEventListener('message', handleMessage);
         return function () { return window.removeEventListener('message', handleMessage); };
@@ -72,6 +138,7 @@ var DataTravelerImport = function (_a) {
             width: width !== undefined ? "".concat(width, "px") : '100%',
             height: height !== undefined ? "".concat(height, "px") : '100%',
             border: 0,
+            display: iframeState === 'initializing' ? 'none' : undefined,
         } }));
 };
 exports.DataTravelerImport = DataTravelerImport;

package/dist/types/index.d.ts

@@ -1,5 +1,24 @@
 export declare type Mapper = Record<string, Record<string, any>[]>;
 export declare type Binder = Record<string, Record<string, any>>;
+export declare type MapperDef = {
+    name: string;
+    caption: string;
+    values: MapperValue[];
+    checkDuplication?: boolean;
+};
+declare type MapperValue = {
+    caption: string;
+    path: string;
+    matcher?: boolean;
+};
+export declare type MasterType = Record<string, MasterTypeDirect | MasterTypeSync>;
+declare type MasterTypeDirect = {
+    type: 'direct';
+};
+declare type MasterTypeSync = {
+    type: 'sync';
+};
+export declare type MasterSyncedStatus = 'ongoing' | 'error' | 'finished';
 export declare type DataTravelerResult = {
     dataImportLogId: string;
 };
@@ -17,3 +36,21 @@ export declare type Session = {
     url: string;
     newUrl: string;
 };
+export declare type ExtensionSchemaDef = {
+    container?: {
+        property: string;
+        caption: string;
+    };
+    properties: {
+        type: 'text' | 'number' | 'date' | 'datetime' | 'boolean';
+        property: string;
+        caption: string;
+        notNull?: boolean;
+    }[];
+};
+export declare type WorkMemoDef = {
+    use: boolean;
+    caption?: string;
+    description?: string;
+};
+export { ThemeOptions, PaletteOptions, TypographyOptions, ColorOptions, Grayscale, TypographyVariants } from './theme';

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@sutech_jp/datatraveler-react-client",
-  "version": "0.0.28",
+  "version": "0.1.22",
   "description": "react client for data traveler produced by SuTech",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "author": "sutech",
@@ -13,17 +14,17 @@
     "test": "jest",
     "watch": "tsc -w",
     "build": "rimraf dist&&tsc",
-    "prepublishOnly": "npm run build&&npm version patch",
+    "prepublishOnly": "npm run build",
     "lint:fix": "eslint --fix \"./{src,test}/**/*.{tsx,ts,js}\" --ignore-path .gitignore",
     "format": "prettier --write \"./{src,test}/**/*.{tsx,ts,js}\" --ignore-path .gitignore",
-    "precommit": "npm run format && npm run lint:fix"
+    "precommit": "npm run format && npm run lint:fix",
+    "doc": "npx typedoc src/index.ts --out dist/docs --name \"Raas : datatraveler-react-client\" --customFooterHtml \"©Copyright 2024 SuTech Co., Ltd. All Rights Reserved\" --plugin typedoc-plugin-missing-exports --excludeExternals --placeInternalsInOwningModule --sort kind --sort source-order --includeVersion"
   },
   "husky": {
     "hooks": {
       "pre-commit": "npm run precommit"
     }
   },
-  "dependencies": {},
   "devDependencies": {
     "@testing-library/dom": "^8.11.1",
     "@testing-library/jest-dom": "^5.15.1",
@@ -46,6 +47,8 @@
     "prettier": "^2.2.1",
     "rimraf": "^3.0.2",
     "ts-jest": "^27.0.7",
+    "typedoc": "^0.26.10",
+    "typedoc-plugin-missing-exports": "^3.0.0",
     "typescript": "^4.4.3"
   },
   "peerDependencies": {