feat(financial reports): add branch multi select.

src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderDimensionsPanel.js

@@ -1,17 +1,30 @@
 import React from 'react';
-import styled from 'styled-components';
 import intl from 'react-intl-universal';
 import { FormGroup, Classes } from '@blueprintjs/core';
 import { BranchMultiSelect, Row, Col } from 'components';
-import { useBranches } from 'hooks/query';
+import {
+  TrialBLHeaderDimensionsPanelProvider,
+  useTrialBalanceSheetPanelContext,
+} from './TrialBalanceSheetHeaderDimensionsPanelProvider';
 
 /**
- * trial balance sheet header dismension panel.
+ * Trial balance sheet header dismension panel.
  * @returns
  */
 export default function TrialBalanceSheetHeaderDimensionsPanel() {
-  // Fetches the branches list.
-  const { isLoading: isBranchesLoading, data: branches } = useBranches();
+  return (
+    <TrialBLHeaderDimensionsPanelProvider>
+      <TrialBLSheetHeaderDimensionsPanelContent />
+    </TrialBLHeaderDimensionsPanelProvider>
+  );
+}
+
+/**
+ * trial balance sheet header dismension panel content.
+ * @returns
+ */
+function TrialBLSheetHeaderDimensionsPanelContent() {
+  const { branches } = useTrialBalanceSheetPanelContext();
 
   return (
     <Row>

src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderDimensionsPanelProvider.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useBranches } from 'hooks/query';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+
+const TrialBLSheetHeaderDimensionsContext = React.createContext();
+
+/**
+ *  Trial BL sheet header provider.
+ * @returns
+ */
+function TrialBLHeaderDimensionsPanelProvider({ ...props }) {
+  // Fetches the branches list.
+  const { isLoading: isBranchesLoading, data: branches } = useBranches();
+
+  // Provider
+  const provider = {
+    branches,
+    isBranchesLoading,
+  };
+
+  return isBranchesLoading ? (
+    <FinancialHeaderLoadingSkeleton />
+  ) : (
+    <TrialBLSheetHeaderDimensionsContext.Provider value={provider} {...props} />
+  );
+}
+
+const useTrialBalanceSheetPanelContext = () =>
+  React.useContext(TrialBLSheetHeaderDimensionsContext);
+
+export { TrialBLHeaderDimensionsPanelProvider, useTrialBalanceSheetPanelContext };

src/containers/FinancialStatements/TrialBalanceSheet/utils.js

@@ -1,6 +1,5 @@
 import moment from 'moment';
 
-
 export function getDefaultTrialBalanceQuery() {
   return {
     fromDate: moment().startOf('year').format('YYYY-MM-DD'),
@@ -8,4 +7,4 @@ export function getDefaultTrialBalanceQuery() {
     basis: 'accural',
     filterByOption: 'with-transactions',
   };
-}
+}