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

bigcapitalhq · Apr 15, 2022 · 682b296 · 682b296
1 parent e662bf7
commit 682b296
Show file tree

Hide file tree

Showing 11 changed files with 211 additions and 62 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -150,6 +150,7 @@
  "@types/react": "^17.0.0",
  "@types/react-dom": "^17.0.0",
  "@types/react-router-dom": "^5.1.8",
+ "@types/styled-components": "^5.1.25",
  "@types/yup": "^0.29.13",
  "@welldone-software/why-did-you-render": "^6.0.0-rc.1",
  "compression-webpack-plugin": "^6.1.0",

diff --git 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%;
+ }
+`;
diff --git 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>
+ );
+}
diff --git 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;
+ `}
+`;
diff --git a/src/components/FlexGrid/FlexItem.tsx b/src/components/FlexGrid/FlexItem.tsx
@@ -0,0 +1 @@
+export * from './FlexItem.style';
diff --git 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';
diff --git 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;
+}
diff --git 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;
 

diff --git 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;
+`;