feat(FinancialSheet): add skeleton view.

src/components/FinancialSheet/FinancialSheet.js

@@ -0,0 +1,95 @@
+import React, { useMemo, useCallback } from 'react';
+import moment from 'moment';
+import intl from 'react-intl-universal';
+
+import { If, FormattedMessage as T } from 'components';
+import {
+  FinancialSheetRoot,
+  FinancialSheetFooterCurrentTime,
+  FinancialSheetFooterBasis,
+  FinancialSheetFooter,
+  FinancialSheetAccountingBasis,
+  FinancialSheetTable,
+  FinancialSheetDate,
+  FinancialSheetType,
+  FinancialSheetTitle,
+} from './StyledFinancialSheet';
+
+/**
+ * Financial sheet.
+ * @returns {React.JSX}
+ */
+export function FinancialSheet({
+  companyName,
+  sheetType,
+  fromDate,
+  toDate,
+  asDate,
+  children,
+  accountingBasis,
+  basis,
+  minimal = false,
+  fullWidth = false,
+  currentDate = true,
+}) {
+  const format = 'DD MMMM YYYY';
+  const formattedFromDate = useMemo(
+    () => moment(fromDate).format(format),
+    [fromDate],
+  );
+  const formattedToDate = useMemo(
+    () => moment(toDate).format(format),
+    [toDate],
+  );
+  const formattedAsDate = useMemo(
+    () => moment(asDate).format(format),
+    [asDate],
+  );
+  const methodsLabels = useMemo(
+    () => ({
+      cash: intl.get('cash'),
+      accrual: intl.get('accrual'),
+    }),
+    [],
+  );
+  const getBasisLabel = useCallback((b) => methodsLabels[b], [methodsLabels]);
+  const basisLabel = useMemo(
+    () => getBasisLabel(basis),
+    [getBasisLabel, basis],
+  );
+
+  return (
+    <FinancialSheetRoot minimal={minimal} fullWidth={fullWidth}>
+      {companyName && <FinancialSheetTitle>{companyName}</FinancialSheetTitle>}
+      {sheetType && <FinancialSheetType>{sheetType}</FinancialSheetType>}
+
+      <FinancialSheetDate>
+        <If condition={asDate}>
+          <T id={'as'} /> {formattedAsDate}
+        </If>
+        <If condition={fromDate && toDate}>
+          <T id={'from'} /> {formattedFromDate} | <T id={'to'} />{' '}
+          {formattedToDate}
+        </If>
+      </FinancialSheetDate>
+
+      <FinancialSheetTable>{children}</FinancialSheetTable>
+      <FinancialSheetAccountingBasis>
+        {accountingBasis}
+      </FinancialSheetAccountingBasis>
+
+      <FinancialSheetFooter>
+        {basisLabel && (
+          <FinancialSheetFooterBasis>
+            <T id={'accounting_basis'} /> {basisLabel}
+          </FinancialSheetFooterBasis>
+        )}
+        {currentDate && (
+          <FinancialSheetFooterCurrentTime>
+            {moment().format('YYYY MMM DD  HH:MM')}
+          </FinancialSheetFooterCurrentTime>
+        )}
+      </FinancialSheetFooter>
+    </FinancialSheetRoot>
+  );
+}

src/components/FinancialSheet/FinancialSheetSkeleton.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Align } from 'common';
+import { SkeletonText, DataTable } from 'components';
+
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+import { TableStyle } from 'common';
+import {
+  FinancialSheetRoot,
+  FinancialSheetTitle,
+  FinancialSheetType,
+  FinancialSheetDate,
+  FinancialSheetTable,
+} from './StyledFinancialSheet';
+
+/**
+ * Financial sheet paper skeleton.
+ * @returns {React.JSX}
+ */
+export function FinancialSheetSkeleton({
+  minimal,
+  fullWidth,
+  titleCharsLength,
+  typeCharsLength,
+  dateCharsLength,
+  skeletonTableColumns,
+}) {
+  return (
+    <FinancialSheetRoot minimal={minimal} fullWidth={fullWidth}>
+      <FinancialSheetTitle>
+        <SkeletonText charsLength={titleCharsLength} />
+      </FinancialSheetTitle>
+
+      <FinancialSheetType>
+        <SkeletonText charsLength={typeCharsLength} />
+      </FinancialSheetType>
+
+      <FinancialSheetDate>
+        <SkeletonText charsLength={dateCharsLength} />
+      </FinancialSheetDate>
+
+      <FinancialSheetTable>
+        <FinancialSkeletonTable
+          columns={skeletonTableColumns}
+          data={[]}
+          noInitialFetch={true}
+          expandable={true}
+          styleName={TableStyle.Constrant}
+          TableLoadingRenderer={TableSkeletonRows}
+          TableHeaderSkeletonRenderer={TableSkeletonHeader}
+          headerLoading={true}
+          loading={true}
+        />
+      </FinancialSheetTable>
+    </FinancialSheetRoot>
+  );
+}
+
+FinancialSheetSkeleton.defaultProps = {
+  titleCharsLength: 20,
+  typeCharsLength: 40,
+  dateCharsLength: 20,
+  skeletonTableColumns: [
+    {
+      id: 'skeleton-1',
+      className: 'skeleton-1',
+    },
+    {
+      id: 'skeleton-2',
+      className: 'skeleton-2',
+      align: Align.Right,
+    },
+  ],
+};
+
+const FinancialSkeletonTable = styled(DataTable)`
+  .table .th .skeleton,
+  .table .td .skeleton {
+    margin-top: 4px;
+    margin-bottom: 4px;
+  }
+`;

src/components/FinancialSheet/StyledFinancialSheet.js

@@ -0,0 +1,82 @@
+import styled from 'styled-components';
+
+export const FinancialSheetRoot = styled.div`
+  border: 2px solid #f0f0f0;
+  border-radius: 10px;
+  min-width: 640px;
+  width: auto;
+  padding: 30px 18px;
+  max-width: 100%;
+  margin: 35px auto;
+  min-height: 400px;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+
+  ${(props) =>
+    props.fullWidth &&
+    `
+    width: 100%;
+    margin-top: 25px;`}
+
+  ${(props) =>
+    props.minimal &&
+    `
+    border: 0;
+    padding: 0;
+    margin-top: 20px;
+
+  ${FinancialSheetTitle} {
+    font-size: 18px;
+    color: #333;
+  }
+  ${FinancialSheetTitle} + ${FinancialSheetDate} {
+    margin-top: 8px;
+  }
+  ${FinancialSheetDate} {
+    margin-top: 20px;
+  }  
+`}
+`;
+
+export const FinancialSheetTitle = styled.h1`
+  margin: 0;
+  font-weight: 400;
+  font-size: 20px;
+  color: #464646;
+  text-align: center;
+`;
+
+export const FinancialSheetType = styled.h6`
+  text-align: center;
+  margin: 0;
+  font-size: 16px;
+  font-weight: 400;
+  color: #666;
+  margin-top: 6px;
+`;
+
+export const FinancialSheetDate = styled.div`
+  text-align: center;
+  color: #666;
+  margin-top: 6px;
+`;
+
+export const FinancialSheetFooter = styled.div`
+  color: #888;
+  text-align: center;
+  margin-top: auto;
+  padding-top: 18px;
+  font-size: 13px;
+
+  > span + span {
+    padding-left: 10px;
+  }
+`;
+export const FinancialSheetTable = styled.div`
+  margin-top: 24px;
+`;
+export const FinancialSheetFooterBasis = styled.span``;
+export const FinancialSheetFooterCurrentTime = styled.span``;
+
+export const FinancialSheetAccountingBasis = styled.div``;

src/components/FinancialSheet/index.js

@@ -0,0 +1,2 @@
+export * from './FinancialSheet';
+export * from './FinancialSheetSkeleton';