QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 13:20:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactoring: drawers suspense.

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

20
client/src/components/Drawer/Drawer.js Normal file
View File

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

6
client/src/components/Drawer/DrawerSuspense.js Normal file
View File

@@ -0,0 +1,6 @@
import React, { Suspense } from 'react';
import { Spinner } from '@blueprintjs/core';
export default function DrawerSuspense({ children }) {
return <Suspense fallback={<Spinner size={30} />}>{children}</Suspense>;
}

4
client/src/components/DrawersContainer.js
View File

@@ -2,7 +2,7 @@ import React from 'react';
import EstimateDrawer from 'containers/Sales/Estimates/EstimateDetails/EstimateDrawer';
import InvoiceDrawer from 'containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer';
import ReceiptDrawer from 'containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer';
import PaymentReceive from 'containers/Sales/PaymentReceives/PaymentDetails/PaymentDrawer';
import PaymentDrawer from 'containers/Sales/PaymentReceives/PaymentDetails/PaymentDrawer';
export default function DrawersContainer() {
return (
@@ -10,7 +10,7 @@ export default function DrawersContainer() {
<EstimateDrawer name={'estimate-drawer'} />
<InvoiceDrawer name={'invoice-drawer'} />
<ReceiptDrawer name={'receipt-drawer'} />
<PaymentReceive name={'payment-receive-drawer'} />
<PaymentDrawer name={'payment-receive-drawer'} />
</div>
);
}

13
client/src/components/index.js
View File

@@ -1,4 +1,3 @@
import If from './Utils/If';
import Money from './Money';
import Icon from './Icon';
@@ -33,7 +32,7 @@ import Col from './Grid/Col';
import CloudLoadingIndicator from './CloudLoadingIndicator';
import MoneyExchangeRate from './MoneyExchangeRate';
import ContactSelecetList from './ContactSelecetList';
import CurrencySelectList from './CurrencySelectList'
import CurrencySelectList from './CurrencySelectList';
import SalutationList from './SalutationList';
import DisplayNameList from './DisplayNameList';
import MoneyInputGroup from './Forms/MoneyInputGroup';
@@ -44,12 +43,14 @@ import InputPrependText from './Forms/InputPrependText';
import PageFormBigNumber from './PageFormBigNumber';
import AccountsMultiSelect from './AccountsMultiSelect';
import ContactsMultiSelect from './ContactsMultiSelect';
import Skeleton from './Skeleton'
import ContextMenu from './ContextMenu'
import Skeleton from './Skeleton';
import ContextMenu from './ContextMenu';
import TableFastCell from './Datatable/TableFastCell';
import DashboardContentTable from './Dashboard/DashboardContentTable';
import DashboardPageContent from './Dashboard/DashboardPageContent';
import DashboardInsider from './Dashboard/DashboardInsider';
import Drawer from './Drawer/Drawer';
import DrawerSuspense from './Drawer/DrawerSuspense';
const Hint = FieldHint;
@@ -105,5 +106,7 @@ export {
ContextMenu,
DashboardContentTable,
DashboardPageContent,
DashboardInsider
DashboardInsider,
Drawer,
DrawerSuspense,
};

29
client/src/containers/Drawers/DrawerTemplate.js
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>
);
}

19
client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawer.js
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>
);
}

20
client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer.js
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>
);
}

20
client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentDrawer.js
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>
);
}

20
client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer.js
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>
);
};