@sutech_jp/raas-react-client 0.0.33 → 0.0.35

package/dist/config/ReportConfig.d.ts

@@ -1,11 +1,13 @@
 import { VFC } from 'react';
 import { Session } from '../types';
+import { ThemeOptions } from '../types/theme';
 declare type ReportConfigProps = {
     session: Session | undefined;
     width?: string | number;
     height?: string | number;
     hideTenantInfoConfig?: boolean;
     toolbarPosition?: 'top' | 'bottom';
+    customStyles?: ThemeOptions;
 };
 export declare const ReportConfig: VFC<ReportConfigProps>;
 export {};

package/dist/config/ReportConfig.js

@@ -4,7 +4,7 @@ exports.ReportConfig = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var ReportConfig = function (_a) {
-    var session = _a.session, _b = _a.width, width = _b === void 0 ? '100%' : _b, _c = _a.height, height = _c === void 0 ? '100%' : _c, _d = _a.hideTenantInfoConfig, hideTenantInfoConfig = _d === void 0 ? false : _d, _e = _a.toolbarPosition, toolbarPosition = _e === void 0 ? 'bottom' : _e;
+    var session = _a.session, _b = _a.width, width = _b === void 0 ? '100%' : _b, _c = _a.height, height = _c === void 0 ? '100%' : _c, _d = _a.hideTenantInfoConfig, hideTenantInfoConfig = _d === void 0 ? false : _d, _e = _a.toolbarPosition, toolbarPosition = _e === void 0 ? 'bottom' : _e, customStyles = _a.customStyles;
     var iframe = (0, react_1.useRef)(null);
     var handleMessage = (0, react_1.useCallback)(function (e) {
         var _a;
@@ -24,10 +24,11 @@ var ReportConfig = function (_a) {
                 props: {
                     hideTenantInfoConfig: hideTenantInfoConfig,
                     toolbarPosition: toolbarPosition,
+                    customStyles: customStyles,
                 },
             }, '*');
         }
-    }, [hideTenantInfoConfig, toolbarPosition]);
+    }, [customStyles, hideTenantInfoConfig, toolbarPosition]);
     (0, react_1.useEffect)(function () {
         window.addEventListener('message', handleMessage);
         return function () { return window.removeEventListener('message', handleMessage); };

package/dist/designer/ReportDesigner.d.ts

@@ -1,10 +1,12 @@
 import { VFC } from 'react';
 import { Session } from '../types';
+import { ThemeOptions } from '../types/theme';
 declare type Props = {
     session: Session | undefined;
     data?: Record<string, any>;
     width?: string | number;
     height?: string | number;
+    customStyles?: ThemeOptions;
     onBack: () => void;
 };
 export declare const ReportDesigner: VFC<Props>;

package/dist/designer/ReportDesigner.js

@@ -4,7 +4,7 @@ exports.ReportDesigner = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var ReportDesigner = function (_a) {
-    var session = _a.session, data = _a.data, _b = _a.width, width = _b === void 0 ? '100%' : _b, _c = _a.height, height = _c === void 0 ? '100%' : _c, onBack = _a.onBack;
+    var session = _a.session, data = _a.data, _b = _a.width, width = _b === void 0 ? '100%' : _b, _c = _a.height, height = _c === void 0 ? '100%' : _c, customStyles = _a.customStyles, onBack = _a.onBack;
     var iframe = (0, react_1.useRef)(null);
     var handleMessage = (0, react_1.useCallback)(function (e) {
         var _a;
@@ -22,12 +22,13 @@ var ReportDesigner = function (_a) {
                 from: 'designerClient',
                 action: 'onRender',
                 data: data,
+                customStyles: customStyles,
             }, '*');
         }
         else if (action === 'onBack') {
             onBack();
         }
-    }, [data, onBack]);
+    }, [customStyles, data, onBack]);
     (0, react_1.useEffect)(function () {
         window.addEventListener('message', handleMessage);
         return function () { return window.removeEventListener('message', handleMessage); };

package/dist/form/ReportPaperForm.d.ts

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

package/dist/form/ReportPaperForm.js

@@ -31,7 +31,7 @@ exports.ReportPaperForm = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var ReportPaperForm = function (_a) {
-    var session = _a.session, 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, version = _a.version, _d = _a.width, width = _d === void 0 ? '100%' : _d, _e = _a.height, height = _e === void 0 ? 0 : _e;
+    var session = _a.session, 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, version = _a.version, _d = _a.width, width = _d === void 0 ? '100%' : _d, _e = _a.height, height = _e === void 0 ? 0 : _e, customStyles = _a.customStyles;
     var _f = __read((0, react_1.useState)('unauthorized'), 2), formState = _f[0], setFormState = _f[1];
     var _g = __read((0, react_1.useState)(), 2), contentHeight = _g[0], setContentHeight = _g[1];
     var _h = __read((0, react_1.useState)(false), 2), layoutInitialized = _h[0], setLayoutInitialized = _h[1];
@@ -52,8 +52,9 @@ var ReportPaperForm = function (_a) {
             layout: layout,
             editability: editability,
             layoutEditable: layoutEditable,
+            customStyles: customStyles,
         }, '*');
-    }, [formState, layoutId, editability, layout, layoutEditable, version]);
+    }, [formState, layoutId, editability, layout, layoutEditable, version, customStyles]);
     (0, react_1.useEffect)(function () {
         var _a;
         if (formState === 'unauthorized')

package/dist/gallery/ReportLayoutGallery.d.ts

@@ -1,9 +1,11 @@
 import { FC } from 'react';
 import { Session } from '../types';
+import { ThemeOptions } from '../types/theme';
 declare type LayoutGalleryProps = {
     session: Session | undefined;
     width?: string | number;
     height?: string | number;
+    customStyles?: ThemeOptions;
     onSelectLayout?: (layoutId?: number) => void;
     onEditLayout?: (layoutId: number) => void;
     onCreateLayout?: () => void;

package/dist/gallery/ReportLayoutGallery.js

@@ -4,7 +4,7 @@ exports.ReportLayoutGallery = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var ReportLayoutGallery = function (_a) {
-    var session = _a.session, _b = _a.width, width = _b === void 0 ? '100%' : _b, _c = _a.height, height = _c === void 0 ? '100%' : _c, onSelectLayout = _a.onSelectLayout, onEditLayout = _a.onEditLayout, onCreateLayout = _a.onCreateLayout;
+    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, onSelectLayout = _a.onSelectLayout, onEditLayout = _a.onEditLayout, onCreateLayout = _a.onCreateLayout;
     var iframe = (0, react_1.useRef)(null);
     var handleMessage = (0, react_1.useCallback)(function (e) {
         var _a, _b, _c, _d, _e;
@@ -33,10 +33,11 @@ var ReportLayoutGallery = function (_a) {
                     selectable: onSelectLayout !== undefined,
                     creatable: onCreateLayout !== undefined,
                     editable: onEditLayout !== undefined,
+                    customStyles: customStyles,
                 },
             }, '*');
         }
-    }, [onCreateLayout, onEditLayout, onSelectLayout]);
+    }, [customStyles, onCreateLayout, onEditLayout, onSelectLayout]);
     (0, react_1.useEffect)(function () {
         window.addEventListener('message', handleMessage);
         return function () { return window.removeEventListener('message', handleMessage); };

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
+import { ThemeOptions } from './theme';
 export declare type Layout = any;
 export declare type CustomData = any[];
 export declare type ReportOptions = any[];
@@ -28,6 +29,7 @@ export declare type PaperFormArgs<D> = {
 export declare type ReportPaperFormProps<D> = {
     session: Session | undefined;
     layoutId: number;
+    customStyles?: ThemeOptions;
 } & PaperFormArgs<D>;
 export declare type Session = {
     application: string;

package/dist/types/theme.d.ts

@@ -0,0 +1,74 @@
+export declare type ThemeOptions = {
+    palette?: PaletteOptions;
+    typography?: TypographyVariants;
+};
+export declare type PaletteOptions = {
+    primary?: ColorOptions;
+    secondary?: ColorOptions;
+    info?: ColorOptions;
+    success?: ColorOptions;
+    warning?: ColorOptions;
+    error?: ColorOptions;
+    background?: {
+        default?: string;
+    };
+    grey?: Grayscale;
+};
+export declare type ColorOptions = {
+    light?: string;
+    soft?: string;
+    main?: string;
+    dark?: string;
+};
+export declare type Grayscale = {
+    '50'?: string;
+    '100'?: string;
+    '200'?: string;
+    '300'?: string;
+    '400'?: string;
+    '500'?: string;
+    '600'?: string;
+    '700'?: string;
+    '800'?: string;
+    '900'?: string;
+    A100?: string;
+    A200?: string;
+    A400?: string;
+    A700?: string;
+};
+export declare type TypographyVariants = {
+    pageTitle?: TypographyOptions;
+    dialogTitle?: TypographyOptions;
+    subheadM?: TypographyOptions;
+    subheadL?: TypographyOptions;
+    textNormal?: TypographyOptions;
+    textStrong?: TypographyOptions;
+    textSupplement?: TypographyOptions;
+    textHint?: TypographyOptions;
+    labelNormal?: TypographyOptions;
+    labelError?: TypographyOptions;
+    labelSmall?: TypographyOptions;
+    labelSmallActive?: TypographyOptions;
+    labelSmallError?: TypographyOptions;
+    textPrimary?: TypographyOptions;
+    textStrongPrimary?: TypographyOptions;
+    textError?: TypographyOptions;
+    textStrongError?: TypographyOptions;
+    textWarning?: TypographyOptions;
+    textStrongWarning?: TypographyOptions;
+    textSuccess?: TypographyOptions;
+    textStrongSuccess?: TypographyOptions;
+    textWhite?: TypographyOptions;
+    groupHeader?: TypographyOptions;
+    caption?: TypographyOptions;
+    subtextNormal?: TypographyOptions;
+    subtextWhite?: TypographyOptions;
+    toggleNormal?: TypographyOptions;
+    togglePrimary?: TypographyOptions;
+};
+export declare type TypographyOptions = {
+    fontSize?: string;
+    fontWeight?: number | string;
+    lineHeight?: number | string;
+    color?: string;
+};

package/dist/types/theme.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sutech_jp/raas-react-client",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "description": "react client for raas produced by SuTech",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -24,6 +24,7 @@
       "pre-commit": "npm run precommit"
     }
   },
+  "dependencies": {},
   "devDependencies": {
     "@testing-library/dom": "^8.11.1",
     "@testing-library/jest-dom": "^5.15.1",