@reltio/pivoting 1.4.1585 → 1.4.1586-mui5

package/src/perspective/index.tsx

@@ -0,0 +1,52 @@
+import {AdapterMoment} from '@mui/x-date-pickers/AdapterMoment';
+import createGenerateClassName from '@mui/styles/createGenerateClassName';
+import StylesProvider from '@mui/styles/StylesProvider';
+import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';
+import {ErrorPopup, ViewIdContext} from '@reltio/components';
+import {DashboardPerspectiveConfig, PivotingValue} from '@reltio/mdm-sdk';
+import React from 'react';
+import {Provider} from 'react-redux';
+import ReactResizeDetector from 'react-resize-detector';
+import {Store} from 'redux';
+import PivotingPerspectiveView from './PivotingPerspective';
+
+const generateClassName = createGenerateClassName({
+    productionPrefix: 'pivotingPerspective',
+    disableGlobal: true,
+    seed: 'pvt'
+});
+
+type Props = {
+    config: DashboardPerspectiveConfig;
+    attributeTypeUri: string;
+    value: PivotingValue[];
+    store: Store<unknown>;
+    onResize?: (width: number, height: number) => void;
+};
+
+const PivotingPerspective = ({config, attributeTypeUri, value, store, onResize}: Props) => {
+    return (
+        <Provider store={store}>
+            <ViewIdContext.Provider value={config.id}>
+                <StylesProvider generateClassName={generateClassName}>
+                    <LocalizationProvider dateAdapter={AdapterMoment}>
+                        <ReactResizeDetector
+                            handleHeight
+                            onResize={(width, height) => onResize?.(Math.floor(width), Math.floor(height))}
+                        />
+                        {config && (
+                            <PivotingPerspectiveView
+                                value={value}
+                                config={config}
+                                attributeTypeUri={attributeTypeUri}
+                            />
+                        )}
+                        <ErrorPopup />
+                    </LocalizationProvider>
+                </StylesProvider>
+            </ViewIdContext.Provider>
+        </Provider>
+    );
+};
+
+export {PivotingPerspective};

package/src/perspective/styles.ts

@@ -0,0 +1,16 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    perspectiveView: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        overflowX: 'hidden',
+        overflowY: 'auto',
+        fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
+        display: 'flex',
+        flexDirection: 'column'
+    }
+});

package/src/types/PivotingPerspectiveConfig.ts

@@ -0,0 +1,5 @@
+import {DashboardView as PivotingViewConfig} from '@reltio/mdm-sdk';
+
+export type PivotingView = {
+    config: PivotingViewConfig;
+};

package/src/types/index.ts

@@ -0,0 +1 @@
+export type {PivotingView} from './PivotingPerspectiveConfig';

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+    "extends": "../../tsconfig.json",
+    "include": ["src", "../../custom.d.ts"]
+}

package/webpack.config.js

@@ -0,0 +1,10 @@
+const {merge} = require('webpack-merge');
+const qxComponents = require('../../webpack.qx.components');
+
+const devServerPort = 8897;
+
+module.exports = merge(qxComponents, {
+    devServer: {
+        port: devServerPort
+    }
+});