WIP feature/breadcrumb/fix_localize

This commit is contained in:
elforjani3
2020-05-13 00:02:21 +02:00
parent 4ab85eaf09
commit e6f63fbc88
69 changed files with 610 additions and 394 deletions

View File

@@ -2,6 +2,7 @@ import React, { useMemo, useCallback } from 'react';
import moment from 'moment';
import classnames from 'classnames';
import LoadingIndicator from 'components/LoadingIndicator';
import { FormattedMessage as T, useIntl } from 'react-intl';
export default function FinancialSheet({
companyName,
@@ -18,42 +19,44 @@ export default function FinancialSheet({
const formattedFromDate = moment(fromDate).format('DD MMMM YYYY');
const formattedToDate = moment(toDate).format('DD MMMM YYYY');
const nameModifer = name ? `financial-sheet--${name}` : '';
const methodsLabels = useMemo(() => ({
'cash': 'Cash',
'accural': 'Accural',
}), []);
const { formatMessage } = useIntl();
const methodsLabels = useMemo(
() => ({
cash: formatMessage({id:'cash'}),
accrual: formatMessage({id:'accrual'}),
}),
[]
);
const getBasisLabel = useCallback((b) => methodsLabels[b], [methodsLabels]);
const basisLabel = useMemo(() => getBasisLabel(basis), [getBasisLabel, basis]);
const basisLabel = useMemo(() => getBasisLabel(basis), [
getBasisLabel,
basis,
]);
return (
<div className={classnames('financial-sheet', nameModifer, className)}>
<LoadingIndicator loading={loading} spinnerSize={34} />
<div className={classnames('financial-sheet__inner', {
'is-loading': loading,
})}>
<h1 class="financial-sheet__title">
{ companyName }
</h1>
<h6 class="financial-sheet__sheet-type">{ sheetType }</h6>
<div class="financial-sheet__date">
From { formattedFromDate } | To { formattedToDate }
<div
className={classnames('financial-sheet__inner', {
'is-loading': loading,
})}
>
<h1 class='financial-sheet__title'>{companyName}</h1>
<h6 class='financial-sheet__sheet-type'>{sheetType}</h6>
<div class='financial-sheet__date'>
<T id={'from'}/> {formattedFromDate} | <T id={'to'}/> {formattedToDate}
</div>
<div class="financial-sheet__table">
{ children }
</div>
<div class="financial-sheet__accounting-basis">
{ accountingBasis }
</div>
<div class='financial-sheet__table'>{children}</div>
<div class='financial-sheet__accounting-basis'>{accountingBasis}</div>
{ (basisLabel) && (
<div class="financial-sheet__basis">
Accounting Basis: { basisLabel }
{basisLabel && (
<div class='financial-sheet__basis'>
<T id={'accounting_basis'}/> {basisLabel}
</div>
)}
)}
</div>
</div>
);
}
}