fix(FlexGrid): BIG-378 Reports drawers columns css conflict.

2026-02-18 05:40:31 +00:00 · 2022-04-15 22:33:08 +02:00
parent e662bf7af9
commit 682b296f7c
11 changed files with 211 additions and 62 deletions
--- a/src/components/FlexGrid/Flex.style.tsx
+++ b/src/components/FlexGrid/Flex.style.tsx
@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import { FlexProps } from './interfaces';
+
+export const FlexStyled = styled.div<FlexProps>`
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: ${({ align }) => align || 'center'};
+
+  &:after {
+    content: '';
+    max-width: ${({ col, gap = 1 }) =>
+      col && col < 12 ? `${(100 * col) / 12 - gap}%` : '100%'};
+    width: 100%;
+  }
+`;
--- a/src/components/FlexGrid/Flex.tsx
+++ b/src/components/FlexGrid/Flex.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { FlexProps } from './interfaces';
+import { FlexItem } from './FlexItem';
+import { FlexStyled } from './Flex.style';
+
+export function Flex({
+  children,
+  col = 12,
+  gap,
+  align,
+  className,
+  style,
+}: FlexProps) {
+  return (
+    <FlexStyled
+      col={col}
+      gap={gap}
+      align={align}
+      className={className}
+      style={style}
+    >
+      {children}
+      <FlexItem col={col} gap={gap} />
+    </FlexStyled>
+  );
+}
--- a/src/components/FlexGrid/FlexItem.style.tsx
+++ b/src/components/FlexGrid/FlexItem.style.tsx
@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import { ItemProps } from './interfaces';
+
+export const FlexItem = styled.div<ItemProps>`
+  width: 100%;
+  max-width: ${({ col, gap = 1 }) =>
+    col && col < 12 ? `${(100 * col) / 12 - gap}%` : '100%'};
+  ${({ marginBottom }) =>
+    marginBottom &&
+    `
+		margin-bottom: ${marginBottom}px;
+	`}
+  ${({ stretch }) =>
+    stretch &&
+    `
+    display: flex;
+    align-self: stretch;
+  `}
+`;
--- a/src/components/FlexGrid/FlexItem.tsx
+++ b/src/components/FlexGrid/FlexItem.tsx
@@ -0,0 +1 @@
+export * from './FlexItem.style';
--- a/src/components/FlexGrid/index.ts
+++ b/src/components/FlexGrid/index.ts
@@ -0,0 +1,4 @@
+export * from './Flex.style';
+export * from './Flex';
+export * from './FlexItem.style';
+export * from './interfaces';
--- a/src/components/FlexGrid/interfaces.ts
+++ b/src/components/FlexGrid/interfaces.ts
@@ -0,0 +1,22 @@
+import { HTMLAttributes, Component, StyleHTMLAttributes } from 'react';
+
+export type Range = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export interface ItemProps extends HTMLAttributes<HTMLDivElement> {
+  gap?: number;
+  col: Range;
+  marginBottom?: number;
+  stretch?: boolean;
+  as?: string | Component;
+  className?: string;
+  style?: StyleHTMLAttributes<HTMLDivElement>;
+}
+
+export interface FlexProps extends HTMLAttributes<HTMLDivElement> {
+  gap?: number;
+  align?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
+  col?: Range;
+  className?: string;
+  style?: StyleHTMLAttributes<HTMLDivElement>;
+  as?: string | Component;
+}
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -101,10 +101,11 @@ export * from './ExchangeRate';
 export * from './Branches';
 export * from './Warehouses';
 export * from './Currencies';
-export * from './FormTopbar'
+export * from './FormTopbar';
 export * from './Paper';
-export * from './Accounts'
+export * from './Accounts';
 export * from './DataTableCells';
+export * from './FlexGrid';

 const Hint = FieldHint;

--- a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderComparisonPanal.js
+++ b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderComparisonPanal.js
@@ -4,7 +4,7 @@ import { FastField, Field } from 'formik';
 import { FormGroup, Checkbox } from '@blueprintjs/core';
 import styled from 'styled-components';

-import { Row, Col, FieldHint, FormattedMessage as T } from 'components';
+import { Flex, FlexItem, FieldHint, FormattedMessage as T } from 'components';
 import {
  handlePreviousYearCheckBoxChange,
  handlePreviousYearChangeCheckboxChange,
@@ -15,11 +15,11 @@ import {
 } from './utils';

 /**
- * Balance sheet header - Comparison panal.
+ * Balance sheet header - Comparison panal - Comparisons fields.
 */
-export default function BalanceSheetHeaderComparisonPanal() {
+function BalanceSheetHeaderComparisonPanalFields() {
  return (
-    <BalanceSheetComparisonWrap>
+    <>
      {/**----------- Previous Year -----------*/}
      <Field name={'previousYear'} type={'checkbox'}>
        {({ form, field }) => (
@@ -33,8 +33,9 @@ export default function BalanceSheetHeaderComparisonPanal() {
          </FormGroup>
        )}
      </Field>
-      <Row>
-        <Col xs={3}>
+
+      <FlexSubFields align={'left'}>
+        <FlexItem col={6}>
          <Field name={'previousYearAmountChange'} type={'checkbox'}>
            {({ form, field }) => (
              <FormGroup labelInfo={<FieldHint />}>
@@ -48,8 +49,9 @@ export default function BalanceSheetHeaderComparisonPanal() {
              </FormGroup>
            )}
          </Field>
-        </Col>
-        <Col xs={3}>
+        </FlexItem>
+
+        <FlexItem col={6}>
          <FastField name={'previousYearPercentageChange'} type={'checkbox'}>
            {({ form, field }) => (
              <FormGroup labelInfo={<FieldHint />}>
@@ -62,8 +64,9 @@ export default function BalanceSheetHeaderComparisonPanal() {
              </FormGroup>
            )}
          </FastField>
-        </Col>
-      </Row>
+        </FlexItem>
+      </FlexSubFields>
+
      {/*------------ Previous Period -----------*/}
      <FastField name={'previousPeriod'} type={'checkbox'}>
        {({ form, field }) => (
@@ -78,8 +81,9 @@ export default function BalanceSheetHeaderComparisonPanal() {
          </FormGroup>
        )}
      </FastField>
-      <Row>
-        <Col xs={3}>
+
+      <FlexSubFields>
+        <FlexItem col={6}>
          <FastField name={'previousPeriodAmountChange'} type={'checkbox'}>
            {({ form, field }) => (
              <FormGroup labelInfo={<FieldHint />}>
@@ -93,8 +97,9 @@ export default function BalanceSheetHeaderComparisonPanal() {
              </FormGroup>
            )}
          </FastField>
-        </Col>
-        <Col xs={3}>
+        </FlexItem>
+
+        <FlexItem col={6}>
          <FastField name={'previousPeriodPercentageChange'} type={'checkbox'}>
            {({ form, field }) => (
              <FormGroup labelInfo={<FieldHint />}>
@@ -107,8 +112,8 @@ export default function BalanceSheetHeaderComparisonPanal() {
              </FormGroup>
            )}
          </FastField>
-        </Col>
-      </Row>
+        </FlexItem>
+      </FlexSubFields>

      {/**----------- % of Column -----------*/}
      <FastField name={'percentageOfColumn'} type={'checkbox'}>
@@ -137,19 +142,33 @@ export default function BalanceSheetHeaderComparisonPanal() {
          </FormGroup>
        )}
      </FastField>
+    </>
+  );
+}
+
+/**
+ * Balance sheet header - Comparison panal.
+ */
+export default function BalanceSheetHeaderComparisonPanal() {
+  return (
+    <BalanceSheetComparisonWrap>
+      <BalanceSheetComparisonFieldsWrap>
+        <BalanceSheetHeaderComparisonPanalFields />
+      </BalanceSheetComparisonFieldsWrap>
    </BalanceSheetComparisonWrap>
  );
 }

 const BalanceSheetComparisonWrap = styled.div`
-  .row {
-    margin-left: 0.15rem;
-    .col {
-      min-width: 150px !important;
-      max-width: 190px !important;
-    }
-  }
  .bp3-form-group {
    margin-bottom: 3px;
  }
 `;
+
+const FlexSubFields = styled(Flex)`
+  padding-left: 20px;
+`;
+
+const BalanceSheetComparisonFieldsWrap = styled.div`
+  width: 400px;
+`;
--- a/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderComparisonPanel.js
+++ b/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderComparisonPanel.js
@@ -1,11 +1,11 @@
 import React from 'react';
-import { FastField, Field } from 'formik';
+import { FastField } from 'formik';
 import { FormGroup, Checkbox } from '@blueprintjs/core';
 import styled from 'styled-components';

-import { FormattedMessage as T } from 'components';
+import { Flex, FlexItem, FormattedMessage as T } from 'components';

-import { Row, Col, FieldHint } from '../../../components';
+import { FieldHint } from '../../../components';
 import {
  handlePreviousYearCheckBoxChange,
  handlePreviousPeriodCheckBoxChange,
@@ -16,11 +16,12 @@ import {
 } from './utils';

 /**
- * ProfitLoss sheet header -comparison panel.
+ * Profit/loss comparisons panel fields.
+ * @returns {JSX.Element}
 */
-export default function ProfitLossSheetHeaderComparisonPanel() {
+function ProfitLossComaprsionPanelFields() {
  return (
-    <ProfitLossSheetComparisonWrap>
+    <>
      {/**----------- Previous Year -----------*/}
      <FastField name={'previousYear'} type={'checkbox'}>
        {({ form, field }) => (
@@ -35,8 +36,9 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
          </FormGroup>
        )}
      </FastField>
-      <Row>
-        <Col xs={3}>
+
+      <FlexSubFields>
+        <FlexItem col={6}>
          <FastField name={'previousYearAmountChange'} type={'checkbox'}>
            {({ form, field }) => (
              <FormGroup labelInfo={<FieldHint />}>
@@ -50,8 +52,8 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
              </FormGroup>
            )}
          </FastField>
-        </Col>
-        <Col xs={3}>
+        </FlexItem>
+        <FlexItem col={6}>
          <FastField name={'previousYearPercentageChange'} type={'checkbox'}>
            {({ form, field }) => (
              <FormGroup labelInfo={<FieldHint />}>
@@ -65,8 +67,9 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
              </FormGroup>
            )}
          </FastField>
-        </Col>
-      </Row>
+        </FlexItem>
+      </FlexSubFields>
+
      {/**----------- Previous Period (PP) -----------*/}
      <FastField name={'previousPeriod'} type={'checkbox'}>
        {({ form, field }) => (
@@ -81,8 +84,9 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
          </FormGroup>
        )}
      </FastField>
-      <Row>
-        <Col xs={3}>
+
+      <FlexSubFields>
+        <FlexItem col={6}>
          <FastField name={'previousPeriodAmountChange'} type={'checkbox'}>
            {({ form, field }) => (
              <FormGroup labelInfo={<FieldHint />}>
@@ -96,8 +100,8 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
              </FormGroup>
            )}
          </FastField>
-        </Col>
-        <Col xs={3}>
+        </FlexItem>
+        <FlexItem col={6}>
          <FastField name={'previousPeriodPercentageChange'} type={'checkbox'}>
            {({ form, field }) => (
              <FormGroup labelInfo={<FieldHint />}>
@@ -111,8 +115,9 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
              </FormGroup>
            )}
          </FastField>
-        </Col>
-      </Row>
+        </FlexItem>
+      </FlexSubFields>
+
      {/**----------- % of Column -----------*/}
      <FastField name={'percentageColumn'} type={'checkbox'}>
        {({ field }) => (
@@ -126,6 +131,7 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
          </FormGroup>
        )}
      </FastField>
+
      {/**----------- % of Row -----------*/}
      <FastField name={'percentageRow'} type={'checkbox'}>
        {({ field }) => (
@@ -139,6 +145,7 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
          </FormGroup>
        )}
      </FastField>
+
      {/**----------- % of Expense -----------*/}
      <FastField name={'percentageExpense'} type={'checkbox'}>
        {({ field }) => (
@@ -152,6 +159,7 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
          </FormGroup>
        )}
      </FastField>
+
      {/**----------- % of Income -----------*/}
      <FastField name={'percentageIncome'} type={'checkbox'}>
        {({ field }) => (
@@ -165,19 +173,33 @@ export default function ProfitLossSheetHeaderComparisonPanel() {
          </FormGroup>
        )}
      </FastField>
+    </>
+  );
+}
+
+/**
+ * ProfitLoss sheet header -comparison panel.
+ */
+export default function ProfitLossSheetHeaderComparisonPanel() {
+  return (
+    <ProfitLossSheetComparisonWrap>
+      <ProfitLossComaprsionFieldsWrap>
+        <ProfitLossComaprsionPanelFields />
+      </ProfitLossComaprsionFieldsWrap>
    </ProfitLossSheetComparisonWrap>
  );
 }

 const ProfitLossSheetComparisonWrap = styled.div`
-  .row {
-    margin-left: 0.15rem;
-    .col {
-      min-width: 150px !important;
-      max-width: 190px !important;
-    }
-  }
  .bp3-form-group {
    margin-bottom: 3px;
  }
 `;
+
+const FlexSubFields = styled(Flex)`
+  padding-left: 20px;
+`;
+
+const ProfitLossComaprsionFieldsWrap = styled.div`
+  max-width: 400px;
+`;