@sutech_jp/raas-react-client 0.1.43 → 0.2.0-beta.1

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.
@@ -1,7 +1,7 @@
1
- import { VFC } from 'react';
1
+ import { FC } from 'react';
2
2
  import { Session } from '../types';
3
3
  import { ThemeOptions } from '../types/theme';
4
- declare type Props = {
4
+ type Props = {
5
5
  session: Session | undefined;
6
6
  width?: string | number;
7
7
  height?: string | number;
@@ -15,5 +15,5 @@ declare type Props = {
15
15
  */
16
16
  toolbarPosition?: 'top' | 'bottom';
17
17
  };
18
- export declare const ReportConfig: VFC<Props>;
18
+ export declare const ReportConfig: FC<Props>;
19
19
  export {};
@@ -31,8 +31,7 @@ var ReportConfig = function (_a) {
31
31
  }, (0, targetOrigin_1.getTargetOrigin)(session === null || session === void 0 ? void 0 : session.newUrl));
32
32
  }
33
33
  }, [customStyles, session]);
34
- // リスナーの登録は必ず先に済ませる必要があるため、useLayoutEffect を使用する
35
- (0, react_1.useLayoutEffect)(function () {
34
+ (0, react_1.useEffect)(function () {
36
35
  window.addEventListener('message', handleMessage);
37
36
  return function () { return window.removeEventListener('message', handleMessage); };
38
37
  }, [handleMessage]);
@@ -1,7 +1,7 @@
1
- import { VFC } from 'react';
1
+ import { FC } from 'react';
2
2
  import { DesignerOptions, Session } from '../types';
3
3
  import { ThemeOptions } from '../types/theme';
4
- declare type Props = {
4
+ type Props = {
5
5
  session: Session | undefined;
6
6
  data?: Record<string, any>;
7
7
  width?: string | number;
@@ -11,5 +11,5 @@ declare type Props = {
11
11
  onBack: () => void;
12
12
  onChangeOperating?: (operating: boolean) => void;
13
13
  };
14
- export declare const ReportDesigner: VFC<Props>;
14
+ export declare const ReportDesigner: FC<Props>;
15
15
  export {};
@@ -38,8 +38,7 @@ var ReportDesigner = function (_a) {
38
38
  onChangeOperating && onChangeOperating(operating);
39
39
  }
40
40
  }, [customStyles, data, onBack, onChangeOperating, options, session === null || session === void 0 ? void 0 : session.newUrl]);
41
- // リスナーの登録は必ず先に済ませる必要があるため、useLayoutEffect を使用する
42
- (0, react_1.useLayoutEffect)(function () {
41
+ (0, react_1.useEffect)(function () {
43
42
  window.addEventListener('message', handleMessage);
44
43
  return function () { return window.removeEventListener('message', handleMessage); };
45
44
  }, [handleMessage]);
@@ -1,3 +1,3 @@
1
1
  import { ReactElement } from 'react';
2
2
  import { ReportPaperFormProps } from '../types';
3
- export declare const ReportPaperForm: <D>({ session, layoutId, data, onDataUpdate, customData, onRender, reportOptions, layout, onLayoutUpdate, editability, layoutEditable, downloadable, version, width, height, customStyles, }: ReportPaperFormProps<D>) => ReactElement;
3
+ export declare const ReportPaperForm: <D>({ session, layoutId, data, onDataUpdate, customData, onRender, reportOptions, layout, onLayoutUpdate, editability, layoutEditable, downloadable, version, width, height, customStyles, }: ReportPaperFormProps<D>) => ReactElement<any>;
@@ -26,46 +26,6 @@ var ReportPaperForm = function (_a) {
26
26
  var _h = __read((0, react_1.useState)(), 2), contentHeight = _h[0], setContentHeight = _h[1];
27
27
  var _j = __read((0, react_1.useState)(false), 2), layoutInitialized = _j[0], setLayoutInitialized = _j[1];
28
28
  var iframe = (0, react_1.useRef)(null);
29
- var handleMessage = (0, react_1.useCallback)(function (e) {
30
- 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)) {
31
- return;
32
- }
33
- var message = e.data;
34
- var from = message === null || message === void 0 ? void 0 : message.from;
35
- var action = message === null || message === void 0 ? void 0 : message.action;
36
- if (from !== 'paperForm') {
37
- return;
38
- }
39
- if (action === 'onAuthorized') {
40
- setFormState('authorized');
41
- }
42
- else if (action === 'onReady') {
43
- setLayoutInitialized(true);
44
- setContentHeight(message === null || message === void 0 ? void 0 : message.contentHeight);
45
- }
46
- else if (action === 'onRender') {
47
- if (onRender)
48
- onRender((message === null || message === void 0 ? void 0 : message.hasRequiredBlank) || false);
49
- }
50
- else if (action === 'onDataUpdate') {
51
- var businessData = message.businessData, customData_1 = message.customData, options = message.options;
52
- if (onDataUpdate)
53
- onDataUpdate(businessData, customData_1, options);
54
- }
55
- else if (action === 'onEditLayout') {
56
- var layout_1 = message.layout;
57
- if (onLayoutUpdate)
58
- onLayoutUpdate(layout_1);
59
- }
60
- else if (action === 'onChangeContentHeight') {
61
- setContentHeight(message === null || message === void 0 ? void 0 : message.contentHeight);
62
- }
63
- }, [session, onRender, onDataUpdate, onLayoutUpdate]);
64
- // リスナーの登録は必ず先に済ませる必要があるため、useLayoutEffect を使用する
65
- (0, react_1.useLayoutEffect)(function () {
66
- window.addEventListener('message', handleMessage);
67
- return function () { return window.removeEventListener('message', handleMessage); };
68
- }, [handleMessage]);
69
29
  (0, react_1.useEffect)(function () {
70
30
  var _a;
71
31
  if (formState === 'unauthorized')
@@ -105,6 +65,45 @@ var ReportPaperForm = function (_a) {
105
65
  options: reportOptions,
106
66
  }, (0, targetOrigin_1.getTargetOrigin)(session === null || session === void 0 ? void 0 : session.newUrl));
107
67
  }, [formState, layoutInitialized, data, customData, reportOptions, session]);
68
+ var handleMessage = (0, react_1.useCallback)(function (e) {
69
+ 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)) {
70
+ return;
71
+ }
72
+ var message = e.data;
73
+ var from = message === null || message === void 0 ? void 0 : message.from;
74
+ var action = message === null || message === void 0 ? void 0 : message.action;
75
+ if (from !== 'paperForm') {
76
+ return;
77
+ }
78
+ if (action === 'onAuthorized') {
79
+ setFormState('authorized');
80
+ }
81
+ else if (action === 'onReady') {
82
+ setLayoutInitialized(true);
83
+ setContentHeight(message === null || message === void 0 ? void 0 : message.contentHeight);
84
+ }
85
+ else if (action === 'onRender') {
86
+ if (onRender)
87
+ onRender((message === null || message === void 0 ? void 0 : message.hasRequiredBlank) || false);
88
+ }
89
+ else if (action === 'onDataUpdate') {
90
+ var businessData = message.businessData, customData_1 = message.customData, options = message.options;
91
+ if (onDataUpdate)
92
+ onDataUpdate(businessData, customData_1, options);
93
+ }
94
+ else if (action === 'onEditLayout') {
95
+ var layout_1 = message.layout;
96
+ if (onLayoutUpdate)
97
+ onLayoutUpdate(layout_1);
98
+ }
99
+ else if (action === 'onChangeContentHeight') {
100
+ setContentHeight(message === null || message === void 0 ? void 0 : message.contentHeight);
101
+ }
102
+ }, [session, onRender, onDataUpdate, onLayoutUpdate]);
103
+ (0, react_1.useEffect)(function () {
104
+ window.addEventListener('message', handleMessage);
105
+ return function () { return window.removeEventListener('message', handleMessage); };
106
+ }, [handleMessage]);
108
107
  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: {
109
108
  width: width,
110
109
  height: height || "".concat(contentHeight ? contentHeight + 10 : 240, "px"),
@@ -1,5 +1,5 @@
1
1
  import { CustomData, Layout, PaperFormArgs, ReportOptions, Session, UserEditability } from '../types';
2
- declare type Ret<D> = {
2
+ type Ret<D> = {
3
3
  dirty: boolean;
4
4
  originalData: D;
5
5
  hasRequiredBlank: boolean;
@@ -13,7 +13,7 @@ declare type Ret<D> = {
13
13
  layout: Layout;
14
14
  };
15
15
  };
16
- declare type Options = {
16
+ type Options = {
17
17
  editability?: UserEditability;
18
18
  layoutEditable?: boolean;
19
19
  downloadable?: boolean;
@@ -1,8 +1,8 @@
1
1
  import { FC } from 'react';
2
2
  import { Session } from '../types';
3
3
  import { ThemeOptions } from '../types/theme';
4
- declare type Mode = 'config' | 'operation';
5
- declare type Props = {
4
+ type Mode = 'config' | 'operation';
5
+ type Props = {
6
6
  session: Session | undefined;
7
7
  width?: string | number;
8
8
  height?: string | number;
@@ -13,5 +13,5 @@ declare type Props = {
13
13
  onEditLayout?: (layoutId: number) => void;
14
14
  onCreateLayout?: () => void;
15
15
  };
16
- export declare const ReportLayoutGallery: FC<Props>;
16
+ export declare const ReportLayoutGallery: FC<React.PropsWithChildren<Props>>;
17
17
  export {};
@@ -44,8 +44,7 @@ var ReportLayoutGallery = function (_a) {
44
44
  }, (0, targetOrigin_1.getTargetOrigin)(session === null || session === void 0 ? void 0 : session.newUrl));
45
45
  }
46
46
  }, [customStyles, deletable, mode, onCreateLayout, onEditLayout, onSelectLayout, session]);
47
- // リスナーの登録は必ず先に済ませる必要があるため、useLayoutEffect を使用する
48
- (0, react_1.useLayoutEffect)(function () {
47
+ (0, react_1.useEffect)(function () {
49
48
  window.addEventListener('message', handleMessage);
50
49
  return function () { return window.removeEventListener('message', handleMessage); };
51
50
  }, [handleMessage]);
package/dist/index.d.ts CHANGED
@@ -6,5 +6,4 @@ export { ReportLayoutGallery } from './gallery/ReportLayoutGallery';
6
6
  export { ReportTenantInfo } from './tenantInfo/ReportTenantInfo';
7
7
  export { ReportOrganizer } from './organizer/ReportOrganizer';
8
8
  export { ReportWebForm } from './webform/ReportWebForm';
9
- export { ReportWebFormBulk } from './webform/ReportWebFormBulk';
10
9
  export * from './types';
package/dist/index.js CHANGED
@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
14
  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
- exports.ReportWebFormBulk = exports.ReportWebForm = exports.ReportOrganizer = exports.ReportTenantInfo = exports.ReportLayoutGallery = exports.createLocalSession = exports.useReportPaperForm = exports.ReportPaperForm = exports.ReportDesigner = exports.ReportConfig = void 0;
17
+ exports.ReportWebForm = exports.ReportOrganizer = exports.ReportTenantInfo = exports.ReportLayoutGallery = exports.createLocalSession = exports.useReportPaperForm = exports.ReportPaperForm = exports.ReportDesigner = exports.ReportConfig = void 0;
18
18
  var ReportConfig_1 = require("./config/ReportConfig");
19
19
  Object.defineProperty(exports, "ReportConfig", { enumerable: true, get: function () { return ReportConfig_1.ReportConfig; } });
20
20
  var ReportDesigner_1 = require("./designer/ReportDesigner");
@@ -32,6 +32,4 @@ var ReportOrganizer_1 = require("./organizer/ReportOrganizer");
32
32
  Object.defineProperty(exports, "ReportOrganizer", { enumerable: true, get: function () { return ReportOrganizer_1.ReportOrganizer; } });
33
33
  var ReportWebForm_1 = require("./webform/ReportWebForm");
34
34
  Object.defineProperty(exports, "ReportWebForm", { enumerable: true, get: function () { return ReportWebForm_1.ReportWebForm; } });
35
- var ReportWebFormBulk_1 = require("./webform/ReportWebFormBulk");
36
- Object.defineProperty(exports, "ReportWebFormBulk", { enumerable: true, get: function () { return ReportWebFormBulk_1.ReportWebFormBulk; } });
37
35
  __exportStar(require("./types"), exports);
@@ -1,7 +1,7 @@
1
- import { VFC } from 'react';
1
+ import { FC } from 'react';
2
2
  import { OrganizerEntryPoint, OrganizerOptions, OrganizerResult, Session } from '../types';
3
3
  import { ThemeOptions } from '../types/theme';
4
- declare type Props = {
4
+ type Props = {
5
5
  session: Session | undefined;
6
6
  width?: string | number;
7
7
  height?: string | number;
@@ -11,5 +11,5 @@ declare type Props = {
11
11
  onPerform?: (result: OrganizerResult) => void;
12
12
  onCancel?: () => void;
13
13
  };
14
- export declare const ReportOrganizer: VFC<Props>;
14
+ export declare const ReportOrganizer: FC<Props>;
15
15
  export {};
@@ -40,8 +40,7 @@ var ReportOrganizer = function (_a) {
40
40
  onCancel && onCancel();
41
41
  }
42
42
  }, [customStyles, entry, onCancel, onPerform, options, session === null || session === void 0 ? void 0 : session.newUrl]);
43
- // リスナーの登録は必ず先に済ませる必要があるため、useLayoutEffect を使用する
44
- (0, react_1.useLayoutEffect)(function () {
43
+ (0, react_1.useEffect)(function () {
45
44
  window.addEventListener('message', handleMessage);
46
45
  return function () { return window.removeEventListener('message', handleMessage); };
47
46
  }, [handleMessage]);
@@ -1,11 +1,11 @@
1
- import { VFC } from 'react';
1
+ import { FC } from 'react';
2
2
  import { Session } from '../types';
3
3
  import { ThemeOptions } from '../types/theme';
4
- declare type Props = {
4
+ type Props = {
5
5
  session: Session | undefined;
6
6
  width?: string | number;
7
7
  height?: string | number;
8
8
  customStyles?: ThemeOptions;
9
9
  };
10
- export declare const ReportTenantInfo: VFC<Props>;
10
+ export declare const ReportTenantInfo: FC<Props>;
11
11
  export {};
@@ -31,8 +31,7 @@ var ReportTenantInfo = function (_a) {
31
31
  }, (0, targetOrigin_1.getTargetOrigin)(session === null || session === void 0 ? void 0 : session.newUrl));
32
32
  }
33
33
  }, [customStyles, session]);
34
- // リスナーの登録は必ず先に済ませる必要があるため、useLayoutEffect を使用する
35
- (0, react_1.useLayoutEffect)(function () {
34
+ (0, react_1.useEffect)(function () {
36
35
  window.addEventListener('message', handleMessage);
37
36
  return function () { return window.removeEventListener('message', handleMessage); };
38
37
  }, [handleMessage]);
@@ -1,50 +1,50 @@
1
1
  import { ThemeOptions } from './theme';
2
2
  export { ThemeOptions, PaletteOptions, TypographyOptions, ColorOptions, Grayscale, TypographyVariants } from './theme';
3
- export type { ItemValue, ObjectValue, ArrayValue, BusinessData, BusinessDataList, ComponentOptions, CustomValidationResult, RowOperation, AddRowOperation, DeleteRowOperation, MoveRowOperation, } from './webform';
4
- export declare type Layout = any;
5
- export declare type CustomData = any[];
6
- export declare type ReportOptions = any[];
7
- export declare type UserEditability = 'all' | 'customDataOnly' | 'none';
8
- export declare type FormState = 'unauthorized' | 'authorized';
9
- export declare type PageSize = 'a3' | 'a4' | 'a5' | 'b3' | 'b4' | 'b5';
10
- export declare type OrganizerEntryPoint = 'default' | 'rename' | 'separation';
11
- export declare type OrganizerResult = {
3
+ export type { ItemValue, ObjectValue, ArrayValue, BusinessData, ComponentOptions, CustomValidationResult, } from './webform';
4
+ export type Layout = any;
5
+ export type CustomData = any[];
6
+ export type ReportOptions = any[];
7
+ export type UserEditability = 'all' | 'customDataOnly' | 'none';
8
+ export type FormState = 'unauthorized' | 'authorized';
9
+ export type PageSize = 'a3' | 'a4' | 'a5' | 'b3' | 'b4' | 'b5';
10
+ export type OrganizerEntryPoint = 'default' | 'rename' | 'separation';
11
+ export type OrganizerResult = {
12
12
  id: number;
13
13
  };
14
- export declare type OrganizerOptions = {
14
+ export type OrganizerOptions = {
15
15
  rename?: OrganizerRenameOptions;
16
16
  separation?: OrganizerSeparationOptions;
17
17
  ownOnly?: boolean;
18
18
  };
19
- export declare type OrganizerRenameOptions = {
19
+ export type OrganizerRenameOptions = {
20
20
  enable?: boolean;
21
21
  enableStamp?: boolean;
22
22
  enableFileName?: boolean;
23
23
  defaultFileNamePattern?: string;
24
24
  };
25
- export declare type OrganizerSeparationOptions = {
25
+ export type OrganizerSeparationOptions = {
26
26
  enable?: boolean;
27
27
  enableStamp?: boolean;
28
28
  enableMask?: boolean;
29
29
  enableFileName?: boolean;
30
30
  defaultFileNamePattern?: string;
31
31
  };
32
- export declare type DesignerOptions = {
32
+ export type DesignerOptions = {
33
33
  disablePreviewByLog?: boolean;
34
34
  ownOnlyPreviewByLog?: boolean;
35
35
  pageSizes?: Array<PageSize>;
36
36
  };
37
- declare type LayoutEditable = {
37
+ type LayoutEditable = {
38
38
  layoutEditable: true;
39
39
  layout: Layout;
40
40
  onLayoutUpdate: (layout: Layout) => void;
41
41
  };
42
- declare type LayoutNotEditable = {
42
+ type LayoutNotEditable = {
43
43
  layoutEditable?: false;
44
44
  layout?: Layout;
45
45
  onLayoutUpdate?: (layout: Layout) => void;
46
46
  };
47
- export declare type PaperFormArgs<D> = {
47
+ export type PaperFormArgs<D> = {
48
48
  data: D;
49
49
  onDataUpdate?: (data: D, customData: CustomData, reportOptions: ReportOptions) => void;
50
50
  customData?: CustomData;
@@ -56,12 +56,12 @@ export declare type PaperFormArgs<D> = {
56
56
  width?: string | number;
57
57
  height?: string | number;
58
58
  } & (LayoutEditable | LayoutNotEditable);
59
- export declare type ReportPaperFormProps<D> = {
59
+ export type ReportPaperFormProps<D> = {
60
60
  session: Session | undefined;
61
61
  layoutId: number;
62
62
  customStyles?: ThemeOptions;
63
63
  } & PaperFormArgs<D>;
64
- export declare type Session = {
64
+ export type Session = {
65
65
  application: string;
66
66
  url: string;
67
67
  newUrl: string;
@@ -1,8 +1,8 @@
1
- export declare type ThemeOptions = {
1
+ export type ThemeOptions = {
2
2
  palette?: PaletteOptions;
3
3
  typography?: TypographyVariants;
4
4
  };
5
- export declare type PaletteOptions = {
5
+ export type PaletteOptions = {
6
6
  primary?: ColorOptions;
7
7
  secondary?: ColorOptions;
8
8
  info?: ColorOptions;
@@ -14,13 +14,13 @@ export declare type PaletteOptions = {
14
14
  };
15
15
  grey?: Grayscale;
16
16
  };
17
- export declare type ColorOptions = {
17
+ export type ColorOptions = {
18
18
  light?: string;
19
19
  soft?: string;
20
20
  main?: string;
21
21
  dark?: string;
22
22
  };
23
- export declare type Grayscale = {
23
+ export type Grayscale = {
24
24
  '50'?: string;
25
25
  '100'?: string;
26
26
  '200'?: string;
@@ -36,7 +36,7 @@ export declare type Grayscale = {
36
36
  A400?: string;
37
37
  A700?: string;
38
38
  };
39
- export declare type TypographyVariants = {
39
+ export type TypographyVariants = {
40
40
  pageTitle?: TypographyOptions;
41
41
  dialogTitle?: TypographyOptions;
42
42
  subheadM?: TypographyOptions;
@@ -66,7 +66,7 @@ export declare type TypographyVariants = {
66
66
  toggleNormal?: TypographyOptions;
67
67
  togglePrimary?: TypographyOptions;
68
68
  };
69
- export declare type TypographyOptions = {
69
+ export type TypographyOptions = {
70
70
  fontSize?: string;
71
71
  fontWeight?: number | string;
72
72
  lineHeight?: number | string;
@@ -1,66 +1,41 @@
1
- export declare type RowOperation = AddRowOperation | DeleteRowOperation | MoveRowOperation;
2
- export declare type AddRowOperation = {
3
- type: 'add';
4
- property: string;
5
- rowIndex: number;
6
- };
7
- export declare type DeleteRowOperation = {
8
- type: 'delete';
9
- property: string;
10
- rowIndex: number;
11
- };
12
- export declare type MoveRowOperation = {
13
- type: 'move';
14
- property: string;
15
- from: number;
16
- to: number;
17
- };
18
- export declare type ItemValue = string | number | boolean | Date | null;
19
- export declare type ObjectValue = {
1
+ export type ItemValue = string | number | boolean | Date | null;
2
+ export type ObjectValue = {
20
3
  [key: string]: ItemValue | ObjectValue | ArrayValue;
21
4
  };
22
- export declare type ArrayValue = ObjectValue[];
23
- export declare type BusinessData = ObjectValue;
24
- export declare type BusinessDataList = Array<{
25
- label: string;
26
- values: BusinessData;
27
- }>;
28
- export declare type ComponentOptions = {
5
+ export type ArrayValue = ObjectValue[];
6
+ export type BusinessData = ObjectValue;
7
+ export type ComponentOptions = {
29
8
  title?: string;
30
9
  requiredIndicator?: 'simple' | 'filled' | 'outlined';
31
10
  showReportGenerationButton?: boolean;
32
11
  showBackButton?: boolean;
33
- settings?: {
34
- showLayoutSettingMenu?: boolean;
35
- showOptionsMenu?: boolean;
36
- };
37
12
  };
38
- export declare type CustomValidationResult = {
13
+ export type CustomValidationResult = {
39
14
  type: 'custom';
40
15
  property: string;
41
16
  error: boolean;
42
17
  message?: string;
43
18
  };
44
- export declare type ExtensionSchemaDef = {
19
+ export type ExtensionSchemaDef = {
45
20
  container: ExtensionSchemaContainer;
46
21
  properties: ExtensionSchemaProperty[];
47
22
  };
48
- export declare type ExtensionSchemaContainer = {
23
+ export type ExtensionSchemaContainer = {
49
24
  property: string;
50
25
  caption: string;
51
26
  };
52
- export declare type ExtensionSchemaProperty = TextProperty | NumberProperty | DateProperty | DatetimeProperty | BooleanProperty;
53
- export declare type PropertyBase = {
27
+ export type ExtensionSchemaProperty = TextProperty | NumberProperty | DateProperty | DatetimeProperty | BooleanProperty;
28
+ export type PropertyBase = {
54
29
  property: string;
55
30
  caption: string;
56
31
  required?: boolean;
57
32
  };
58
- export declare type TextProperty = {
33
+ export type TextProperty = {
59
34
  type: 'text';
60
35
  minLength?: number;
61
36
  maxLength?: number;
62
37
  } & PropertyBase;
63
- export declare type NumberProperty = {
38
+ export type NumberProperty = {
64
39
  type: 'number';
65
40
  min?: number;
66
41
  max?: number;
@@ -68,20 +43,20 @@ export declare type NumberProperty = {
68
43
  maxAcceptEqual?: boolean;
69
44
  precision?: number;
70
45
  } & PropertyBase;
71
- export declare type DateProperty = {
46
+ export type DateProperty = {
72
47
  type: 'date';
73
48
  min?: Date;
74
49
  max?: Date;
75
50
  minAcceptEqual?: boolean;
76
51
  maxAcceptEqual?: boolean;
77
52
  } & PropertyBase;
78
- export declare type DatetimeProperty = {
53
+ export type DatetimeProperty = {
79
54
  type: 'datetime';
80
55
  min?: Date;
81
56
  max?: Date;
82
57
  minAcceptEqual?: boolean;
83
58
  maxAcceptEqual?: boolean;
84
59
  } & PropertyBase;
85
- export declare type BooleanProperty = {
60
+ export type BooleanProperty = {
86
61
  type: 'boolean';
87
62
  } & PropertyBase;
@@ -1,8 +1,8 @@
1
- import { VFC } from 'react';
2
- import { BusinessData, CustomValidationResult, ComponentOptions, ItemValue, ExtensionSchemaDef, RowOperation } from 'src/types/webform';
1
+ import { FC } from 'react';
2
+ import { BusinessData, CustomValidationResult, ComponentOptions, ItemValue, ExtensionSchemaDef } from 'src/types/webform';
3
3
  import { Session } from '../types';
4
4
  import { ThemeOptions } from '../types/theme';
5
- declare type Props = {
5
+ type Props = {
6
6
  session: Session | undefined;
7
7
  width?: string | number;
8
8
  height?: string | number;
@@ -15,10 +15,9 @@ declare type Props = {
15
15
  validate?: (property: string, rowIndex: number | undefined, value: ItemValue, values: BusinessData) => Promise<CustomValidationResult>;
16
16
  validateAll?: (values: BusinessData) => Promise<CustomValidationResult[]>;
17
17
  onChange?: (property: string, rowIndex: number | undefined, value: ItemValue, values: BusinessData) => void;
18
- onChangeRow?: (operation: RowOperation, values: BusinessData) => void;
19
18
  onGenerate?: (logId: string) => void;
20
19
  onChangeOperating?: (operating: boolean) => void;
21
20
  onBack?: () => void;
22
21
  };
23
- export declare const ReportWebForm: VFC<Props>;
22
+ export declare const ReportWebForm: FC<Props>;
24
23
  export {};
@@ -9,12 +9,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
9
9
  });
10
10
  };
11
11
  var __generator = (this && this.__generator) || function (thisArg, body) {
12
- var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
13
- return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
12
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
13
+ return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
14
14
  function verb(n) { return function (v) { return step([n, v]); }; }
15
15
  function step(op) {
16
16
  if (f) throw new TypeError("Generator is already executing.");
17
- while (_) try {
17
+ while (g && (g = 0, op[0] && (_ = 0)), _) try {
18
18
  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;
19
19
  if (y = 0, t) op = [op[0] & 2, t.value];
20
20
  switch (op[0]) {
@@ -57,7 +57,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
57
57
  var react_1 = require("react");
58
58
  var targetOrigin_1 = require("../util/targetOrigin");
59
59
  var ReportWebForm = function (_a) {
60
- 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;
60
+ 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, onGenerate = _a.onGenerate, onChangeOperating = _a.onChangeOperating, onBack = _a.onBack;
61
61
  var _d = __read((0, react_1.useState)(false), 2), initialized = _d[0], setInitialized = _d[1];
62
62
  var prevInitialized = (0, react_1.useRef)(false);
63
63
  var iframe = (0, react_1.useRef)(null);
@@ -73,10 +73,23 @@ var ReportWebForm = function (_a) {
73
73
  messageId: requestId,
74
74
  }, (0, targetOrigin_1.getTargetOrigin)(session === null || session === void 0 ? void 0 : session.newUrl));
75
75
  }, [session === null || session === void 0 ? void 0 : session.newUrl]);
76
+ (0, react_1.useEffect)(function () {
77
+ // 前回の initialized の値を取得
78
+ var wasInitialized = prevInitialized.current;
79
+ // initialized が true になった直後は、データ更新メッセージを送信する必要がないため
80
+ // initialized に加えて、前回の initialized(wasInitialized) を確認し、
81
+ // 両方が true の場合のみデータ更新メッセージを送信する
82
+ if (initialized && wasInitialized) {
83
+ // データの更新があった場合は、データを送信する
84
+ sendMessage('onUpdateData', values);
85
+ }
86
+ // 現在の initialized の値を保存
87
+ prevInitialized.current = initialized;
88
+ }, [initialized, values, sendMessage]);
76
89
  var handleMessage = (0, react_1.useCallback)(function (e) { return __awaiter(void 0, void 0, void 0, function () {
77
- 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;
78
- return __generator(this, function (_d) {
79
- switch (_d.label) {
90
+ var message, from, action, _a, property, rowIndex, value, values_1, result_1, result, values_2, results, _b, property, rowIndex, value, values_3, logId, operating;
91
+ return __generator(this, function (_c) {
92
+ switch (_c.label) {
80
93
  case 0:
81
94
  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)) {
82
95
  return [2 /*return*/];
@@ -116,7 +129,7 @@ var ReportWebForm = function (_a) {
116
129
  // バリデーション結果を送信
117
130
  ];
118
131
  case 2:
119
- result = _d.sent();
132
+ result = _c.sent();
120
133
  // バリデーション結果を送信
121
134
  sendMessage('onValidated', result, message.messageId);
122
135
  return [3 /*break*/, 6];
@@ -132,7 +145,7 @@ var ReportWebForm = function (_a) {
132
145
  // バリデーション結果を送信
133
146
  ];
134
147
  case 4:
135
- results = _d.sent();
148
+ results = _c.sent();
136
149
  // バリデーション結果を送信
137
150
  sendMessage('onValidatedAll', results, message.messageId);
138
151
  return [3 /*break*/, 6];
@@ -144,13 +157,6 @@ var ReportWebForm = function (_a) {
144
157
  _b = message.payload, property = _b.property, rowIndex = _b.rowIndex, value = _b.value, values_3 = _b.values;
145
158
  onChange(property, rowIndex, value, values_3);
146
159
  }
147
- else if (action === 'onChangeRow') {
148
- if (!onChangeRow) {
149
- return [2 /*return*/];
150
- }
151
- _c = message.payload, operation = _c.operation, values_4 = _c.values;
152
- onChangeRow(operation, values_4);
153
- }
154
160
  else if (action === 'onGenerate') {
155
161
  if (!onGenerate) {
156
162
  return [2 /*return*/];
@@ -171,7 +177,7 @@ var ReportWebForm = function (_a) {
171
177
  }
172
178
  onBack();
173
179
  }
174
- _d.label = 6;
180
+ _c.label = 6;
175
181
  case 6: return [2 /*return*/];
176
182
  }
177
183
  });
@@ -183,7 +189,6 @@ var ReportWebForm = function (_a) {
183
189
  onBack,
184
190
  onChange,
185
191
  onChangeOperating,
186
- onChangeRow,
187
192
  onGenerate,
188
193
  options,
189
194
  sendMessage,
@@ -192,24 +197,10 @@ var ReportWebForm = function (_a) {
192
197
  validateAll,
193
198
  values,
194
199
  ]);
195
- // リスナーの登録は必ず先に済ませる必要があるため、useLayoutEffect を使用する
196
- (0, react_1.useLayoutEffect)(function () {
200
+ (0, react_1.useEffect)(function () {
197
201
  window.addEventListener('message', handleMessage);
198
202
  return function () { return window.removeEventListener('message', handleMessage); };
199
203
  }, [handleMessage]);
200
- (0, react_1.useEffect)(function () {
201
- // 前回の initialized の値を取得
202
- var wasInitialized = prevInitialized.current;
203
- // initialized が true になった直後は、データ更新メッセージを送信する必要がないため
204
- // initialized に加えて、前回の initialized(wasInitialized) を確認し、
205
- // 両方が true の場合のみデータ更新メッセージを送信する
206
- if (initialized && wasInitialized) {
207
- // データの更新があった場合は、データを送信する
208
- sendMessage('onUpdateData', values);
209
- }
210
- // 現在の initialized の値を保存
211
- prevInitialized.current = initialized;
212
- }, [initialized, values, sendMessage]);
213
204
  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 } });
214
205
  };
215
206
  exports.ReportWebForm = ReportWebForm;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sutech_jp/raas-react-client",
3
- "version": "0.1.43",
3
+ "version": "0.2.0-beta.1",
4
4
  "description": "react client for raas produced by SuTech",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -27,11 +27,12 @@
27
27
  }
28
28
  },
29
29
  "devDependencies": {
30
- "@testing-library/dom": "^8.11.1",
31
- "@testing-library/jest-dom": "^5.15.1",
32
- "@testing-library/react": "^12.1.2",
33
- "@testing-library/user-event": "^13.5.0",
34
- "@types/jest": "^27.4.0",
30
+ "@testing-library/dom": "^10.0.0",
31
+ "@testing-library/jest-dom": "^6.0.0",
32
+ "@testing-library/react": "^16.3.0",
33
+ "@testing-library/user-event": "^14.4.3",
34
+ "@types/jest": "^29.0.3",
35
+ "@types/react": "19.1.10",
35
36
  "@types/node": "^16.9.4",
36
37
  "@typescript-eslint/eslint-plugin": "^4.31.2",
37
38
  "@typescript-eslint/parser": "^4.31.2",
@@ -45,17 +46,17 @@
45
46
  "eslint-plugin-react-hooks": "^4.2.0",
46
47
  "eslint-plugin-testing-library": "^5.0.1",
47
48
  "husky": "^4.3.8",
48
- "jest": "^27.5.1",
49
+ "jest": "^29.0.3",
49
50
  "prettier": "^2.2.1",
50
51
  "rimraf": "^3.0.2",
51
- "ts-jest": "^27.0.7",
52
+ "ts-jest": "^29.0.3",
52
53
  "typedoc": "^0.26.10",
53
- "typescript": "^4.4.3"
54
+ "typescript": "^5.4.0"
54
55
  },
55
56
  "peerDependencies": {
56
- "@types/react": "^17.0.0 || ^18.0.0",
57
- "react": "^17.0.0 || ^18.0.0",
58
- "react-dom": "^17.0.0 || ^18.0.0"
57
+ "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
58
+ "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
59
+ "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
59
60
  },
60
61
  "peerDependenciesMeta": {
61
62
  "@types/react": {
@@ -1,21 +0,0 @@
1
- import { VFC } from 'react';
2
- import { BusinessDataList, ComponentOptions, ItemValue, ExtensionSchemaDef, RowOperation } from 'src/types/webform';
3
- import { Session } from '../types';
4
- import { ThemeOptions } from '../types/theme';
5
- declare type Props = {
6
- session: Session | undefined;
7
- width?: string | number;
8
- height?: string | number;
9
- customStyles?: ThemeOptions;
10
- layoutId: number;
11
- dataList?: BusinessDataList;
12
- extensionSchemaDef?: ExtensionSchemaDef;
13
- options?: ComponentOptions;
14
- onChange?: (property: string, rowIndex: number | undefined, value: ItemValue, dataList: BusinessDataList) => void;
15
- onChangeRow?: (operation: RowOperation, dataList: BusinessDataList) => void;
16
- onCompleteInput?: (dataList: BusinessDataList) => Promise<void>;
17
- onChangeOperating?: (operating: boolean) => void;
18
- onBack?: () => void;
19
- };
20
- export declare const ReportWebFormBulk: VFC<Props>;
21
- export {};
@@ -1,187 +0,0 @@
1
- "use strict";
2
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4
- return new (P || (P = Promise))(function (resolve, reject) {
5
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
7
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
8
- step((generator = generator.apply(thisArg, _arguments || [])).next());
9
- });
10
- };
11
- var __generator = (this && this.__generator) || function (thisArg, body) {
12
- var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
13
- return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
14
- function verb(n) { return function (v) { return step([n, v]); }; }
15
- function step(op) {
16
- if (f) throw new TypeError("Generator is already executing.");
17
- while (_) try {
18
- 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;
19
- if (y = 0, t) op = [op[0] & 2, t.value];
20
- switch (op[0]) {
21
- case 0: case 1: t = op; break;
22
- case 4: _.label++; return { value: op[1], done: false };
23
- case 5: _.label++; y = op[1]; op = [0]; continue;
24
- case 7: op = _.ops.pop(); _.trys.pop(); continue;
25
- default:
26
- if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
27
- if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
28
- if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
29
- if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
30
- if (t[2]) _.ops.pop();
31
- _.trys.pop(); continue;
32
- }
33
- op = body.call(thisArg, _);
34
- } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
35
- if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
36
- }
37
- };
38
- var __read = (this && this.__read) || function (o, n) {
39
- var m = typeof Symbol === "function" && o[Symbol.iterator];
40
- if (!m) return o;
41
- var i = m.call(o), r, ar = [], e;
42
- try {
43
- while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
44
- }
45
- catch (error) { e = { error: error }; }
46
- finally {
47
- try {
48
- if (r && !r.done && (m = i["return"])) m.call(i);
49
- }
50
- finally { if (e) throw e.error; }
51
- }
52
- return ar;
53
- };
54
- Object.defineProperty(exports, "__esModule", { value: true });
55
- exports.ReportWebFormBulk = void 0;
56
- var jsx_runtime_1 = require("react/jsx-runtime");
57
- var react_1 = require("react");
58
- var targetOrigin_1 = require("../util/targetOrigin");
59
- var ReportWebFormBulk = function (_a) {
60
- 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, dataList = _a.dataList, extensionSchemaDef = _a.extensionSchemaDef, options = _a.options, onChange = _a.onChange, onChangeRow = _a.onChangeRow, onCompleteInput = _a.onCompleteInput, onChangeOperating = _a.onChangeOperating, onBack = _a.onBack;
61
- var _d = __read((0, react_1.useState)(false), 2), initialized = _d[0], setInitialized = _d[1];
62
- var prevInitialized = (0, react_1.useRef)(false);
63
- var iframe = (0, react_1.useRef)(null);
64
- var sendMessage = (0, react_1.useCallback)(function (action, props, requestId) {
65
- var _a;
66
- var iframeWindow = (_a = iframe.current) === null || _a === void 0 ? void 0 : _a.contentWindow;
67
- if (!iframeWindow)
68
- return;
69
- iframeWindow.postMessage({
70
- from: 'webformClient',
71
- action: action,
72
- props: props,
73
- messageId: requestId,
74
- }, (0, targetOrigin_1.getTargetOrigin)(session === null || session === void 0 ? void 0 : session.newUrl));
75
- }, [session === null || session === void 0 ? void 0 : session.newUrl]);
76
- var handleMessage = (0, react_1.useCallback)(function (e) { return __awaiter(void 0, void 0, void 0, function () {
77
- var message, from, action, _a, property, rowIndex, value, dataList_1, _b, operation, dataList_2, dataList_3, operating;
78
- return __generator(this, function (_c) {
79
- switch (_c.label) {
80
- case 0:
81
- 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)) {
82
- return [2 /*return*/];
83
- }
84
- message = e.data;
85
- from = message === null || message === void 0 ? void 0 : message.from;
86
- action = message === null || message === void 0 ? void 0 : message.action;
87
- if (from !== 'webform') {
88
- return [2 /*return*/];
89
- }
90
- if (!(action === 'onAuthorized')) return [3 /*break*/, 1];
91
- sendMessage('onShow', {
92
- customStyles: customStyles,
93
- layoutId: layoutId,
94
- dataList: dataList,
95
- extensionSchemaDef: extensionSchemaDef,
96
- options: options,
97
- });
98
- // 初期化完了状態にする
99
- setInitialized(true);
100
- return [3 /*break*/, 6];
101
- case 1:
102
- if (!(action === 'onChange')) return [3 /*break*/, 2];
103
- if (!onChange) {
104
- return [2 /*return*/];
105
- }
106
- _a = message.payload, property = _a.property, rowIndex = _a.rowIndex, value = _a.value, dataList_1 = _a.dataList;
107
- onChange(property, rowIndex, value, dataList_1);
108
- return [3 /*break*/, 6];
109
- case 2:
110
- if (!(action === 'onChangeRow')) return [3 /*break*/, 3];
111
- if (!onChangeRow) {
112
- return [2 /*return*/];
113
- }
114
- _b = message.payload, operation = _b.operation, dataList_2 = _b.dataList;
115
- onChangeRow(operation, dataList_2);
116
- return [3 /*break*/, 6];
117
- case 3:
118
- if (!(action === 'onCompleteInput')) return [3 /*break*/, 5];
119
- if (!onCompleteInput) {
120
- // 結果メッセージを送信
121
- sendMessage('onCompleted', {}, message.messageId);
122
- return [2 /*return*/];
123
- }
124
- dataList_3 = message.payload;
125
- // 入力完了処理を同期待ちする
126
- return [4 /*yield*/, onCompleteInput(dataList_3)
127
- // 結果メッセージを送信
128
- ];
129
- case 4:
130
- // 入力完了処理を同期待ちする
131
- _c.sent();
132
- // 結果メッセージを送信
133
- sendMessage('onCompleted', {}, message.messageId);
134
- return [3 /*break*/, 6];
135
- case 5:
136
- if (action === 'onChangeOperating') {
137
- if (!onChangeOperating) {
138
- return [2 /*return*/];
139
- }
140
- operating = message.payload;
141
- onChangeOperating(operating);
142
- }
143
- else if (action === 'onBack') {
144
- if (!onBack) {
145
- return [2 /*return*/];
146
- }
147
- onBack();
148
- }
149
- _c.label = 6;
150
- case 6: return [2 /*return*/];
151
- }
152
- });
153
- }); }, [
154
- customStyles,
155
- dataList,
156
- extensionSchemaDef,
157
- layoutId,
158
- onBack,
159
- onChange,
160
- onChangeOperating,
161
- onChangeRow,
162
- onCompleteInput,
163
- options,
164
- sendMessage,
165
- session === null || session === void 0 ? void 0 : session.newUrl,
166
- ]);
167
- // リスナーの登録は必ず先に済ませる必要があるため、useLayoutEffect を使用する
168
- (0, react_1.useLayoutEffect)(function () {
169
- window.addEventListener('message', handleMessage);
170
- return function () { return window.removeEventListener('message', handleMessage); };
171
- }, [handleMessage]);
172
- (0, react_1.useEffect)(function () {
173
- // 前回の initialized の値を取得
174
- var wasInitialized = prevInitialized.current;
175
- // initialized が true になった直後は、データ更新メッセージを送信する必要がないため
176
- // initialized に加えて、前回の initialized(wasInitialized) を確認し、
177
- // 両方が true の場合のみデータ更新メッセージを送信する
178
- if (initialized && wasInitialized) {
179
- // データの更新があった場合は、データを送信する
180
- sendMessage('onUpdateData', dataList);
181
- }
182
- // 現在の initialized の値を保存
183
- prevInitialized.current = initialized;
184
- }, [initialized, dataList, sendMessage]);
185
- 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 } });
186
- };
187
- exports.ReportWebFormBulk = ReportWebFormBulk;