feat(financial reports): add branch multi select.

src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementDimensionsPanel.js

@@ -2,16 +2,30 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { FormGroup, Classes } from '@blueprintjs/core';
 import { BranchMultiSelect, Row, Col } from 'components';
-import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
-import { useBranches } from 'hooks/query';
+import {
+  CashFlowStatementDimensionsPanelProvider,
+  useCashFlowStatementDimensionsPanelContext,
+} from './CashFlowStatementDimensionsPanelProvider';
 
 /**
  * Cash flow statement dismension panel.
  * @returns
  */
 export default function CashFlowStatementDimensionsPanel() {
+  return (
+    <CashFlowStatementDimensionsPanelProvider>
+      <CashFlowStatementDimensionsPanelContent />
+    </CashFlowStatementDimensionsPanelProvider>
+  );
+}
+
+/**
+ * Cash flow statement dismension panel content.
+ * @returns
+ */
+function CashFlowStatementDimensionsPanelContent() {
   // Fetches the branches list.
-  const { isLoading: isBranchesLoading, data: branches } = useBranches();
+  const { branches } = useCashFlowStatementDimensionsPanelContext();
 
   return (
     <Row>

src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementDimensionsPanelProvider.js

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { useBranches } from 'hooks/query';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+
+const CashFlowStatementDimensionsPanelContext = React.createContext();
+
+/**
+ * cash flow statement dimensions panel provider.
+ * @returns
+ */
+function CashFlowStatementDimensionsPanelProvider({ ...props }) {
+  // Fetches the branches list.
+  const { isLoading: isBranchesLoading, data: branches } = useBranches();
+
+  // Provider
+  const provider = {
+    branches,
+    isBranchesLoading,
+  };
+  return isBranchesLoading ? (
+    <FinancialHeaderLoadingSkeleton />
+  ) : (
+    <CashFlowStatementDimensionsPanelContext.Provider
+      value={provider}
+      {...props}
+    />
+  );
+}
+
+const useCashFlowStatementDimensionsPanelContext = () =>
+  React.useContext(CashFlowStatementDimensionsPanelContext);
+
+export {
+  CashFlowStatementDimensionsPanelProvider,
+  useCashFlowStatementDimensionsPanelContext,
+};