refactoring: drawers suspense.

This commit is contained in:
elforjani3
2021-02-25 15:40:49 +02:00
parent 5a58e9bafd
commit ef13d018e5
9 changed files with 89 additions and 62 deletions

View File

@@ -1,29 +0,0 @@
import React from 'react';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { Position, Drawer } from '@blueprintjs/core';
export default function DrawerTemplate({
children,
isOpen,
isClose,
drawerProps,
}) {
return (
<div>
<Drawer
isOpen={isOpen}
usePortal={false}
hasBackdrop={true}
title={<T id={'view_paper'} />}
position={Position.RIGHT}
canOutsideClickClose={true}
canEscapeKeyClose={true}
size={'65%'}
onClose={isClose}
{...drawerProps}
>
{children}
</Drawer>
</div>
);
}

View File

@@ -1,11 +1,14 @@
import React from 'react';
import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
import PaperTemplate from 'containers/Drawers/PaperTemplate/PaperTemplate';
import React, { lazy } from 'react';
import withDrawers from 'containers/Drawer/withDrawers';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { Drawer, DrawerSuspense } from 'components';
import { compose } from 'utils';
const EstimateDrawerContent = lazy(() =>
import('containers/Drawers/PaperTemplate/PaperTemplate'),
);
function EstimateDrawer({
name,
//#withDrawer
@@ -18,12 +21,12 @@ function EstimateDrawer({
const handleDrawerClose = () => {
closeDrawer(name);
};
return (
<DrawerTemplate isOpen={isOpen} isClose={handleDrawerClose}>
<PaperTemplate />
</DrawerTemplate>
<Drawer isOpen={isOpen} isClose={handleDrawerClose}>
<DrawerSuspense>
<EstimateDrawerContent />
</DrawerSuspense>
</Drawer>
);
}

View File

@@ -1,11 +1,17 @@
import React from 'react';
import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
import PaperTemplate from 'containers/Drawers/PaperTemplate/PaperTemplate';
import React, { lazy } from 'react';
import withDrawers from 'containers/Drawer/withDrawers';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { Drawer, DrawerSuspense } from 'components';
import { compose } from 'utils';
const InvoicesDrawerContent = lazy(() =>
import('containers/Drawers/PaperTemplate/PaperTemplate'),
);
/**
* invoice drawer.
*/
function InvoiceDrawer({
name,
//#withDrawer
@@ -32,9 +38,11 @@ function InvoiceDrawer({
};
return (
<DrawerTemplate isOpen={isOpen} isClose={handleDrawerClose}>
<PaperTemplate labels={propLabels.labels} />
</DrawerTemplate>
<Drawer isOpen={isOpen} isClose={handleDrawerClose}>
<DrawerSuspense>
<InvoicesDrawerContent labels={propLabels.labels} />
</DrawerSuspense>
</Drawer>
);
}

View File

@@ -1,11 +1,17 @@
import React from 'react';
import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
import PaymentPaperTemplate from 'containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate';
import React, { lazy } from 'react';
import withDrawers from 'containers/Drawer/withDrawers';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { Drawer, DrawerSuspense } from 'components';
import { compose } from 'utils';
const PaymentReceiveDrawerContent = lazy(() =>
import('containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate'),
);
/**
* payment receive drawer.
*/
function PaymentReceiveDrawer({
name,
//#withDrawer
@@ -20,9 +26,11 @@ function PaymentReceiveDrawer({
};
return (
<DrawerTemplate isOpen={isOpen} isClose={handleDrawerClose}>
<PaymentPaperTemplate />
</DrawerTemplate>
<Drawer isOpen={isOpen} isClose={handleDrawerClose}>
<DrawerSuspense>
<PaymentReceiveDrawerContent />
</DrawerSuspense>
</Drawer>
);
}

View File

@@ -1,11 +1,17 @@
import React from 'react';
import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
import PaperTemplate from 'containers/Drawers/PaperTemplate/PaperTemplate';
import React, { lazy } from 'react';
import withDrawers from 'containers/Drawer/withDrawers';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { Drawer, DrawerSuspense } from 'components';
import { compose } from 'utils';
const ReceiptDrawerContent = lazy(() =>
import('containers/Drawers/PaperTemplate/PaperTemplate'),
);
/**
* receipt drawer.
*/
const ReceiptDrawer = ({
name,
//#withDrawer
@@ -33,9 +39,11 @@ const ReceiptDrawer = ({
return (
<div>
<DrawerTemplate isOpen={isOpen} isClose={handleDrawerClose}>
<PaperTemplate labels={propLabels.labels} />
</DrawerTemplate>
<Drawer isOpen={isOpen} isClose={handleDrawerClose}>
<DrawerSuspense>
<ReceiptDrawerContent labels={propLabels.labels} />
</DrawerSuspense>
</Drawer>
</div>
);
};