From 682b296f7c416e4a67c66677f5cec261d33e5993 Mon Sep 17 00:00:00 2001 From: "a.bouhuolia" Date: Fri, 15 Apr 2022 22:33:08 +0200 Subject: [PATCH] fix(FlexGrid): `BIG-378` Reports drawers columns css conflict. --- package-lock.json | 42 +++++++---- package.json | 1 + src/components/FlexGrid/Flex.style.tsx | 16 +++++ src/components/FlexGrid/Flex.tsx | 26 +++++++ src/components/FlexGrid/FlexItem.style.tsx | 19 +++++ src/components/FlexGrid/FlexItem.tsx | 1 + src/components/FlexGrid/index.ts | 4 ++ src/components/FlexGrid/interfaces.ts | 22 ++++++ src/components/index.js | 5 +- .../BalanceSheetHeaderComparisonPanal.js | 65 +++++++++++------ .../ProfitLossSheetHeaderComparisonPanel.js | 72 ++++++++++++------- 11 files changed, 211 insertions(+), 62 deletions(-) create mode 100644 src/components/FlexGrid/Flex.style.tsx create mode 100644 src/components/FlexGrid/Flex.tsx create mode 100644 src/components/FlexGrid/FlexItem.style.tsx create mode 100644 src/components/FlexGrid/FlexItem.tsx create mode 100644 src/components/FlexGrid/index.ts create mode 100644 src/components/FlexGrid/interfaces.ts diff --git a/package-lock.json b/package-lock.json index baaa3b95a..7aae78b5d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "bigcapital-client", - "version": "1.5.8", + "version": "1.7.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1043,17 +1043,6 @@ "to-fast-properties": "^2.0.0" } }, - "@blueprintjs-formik/core": { - "version": "0.1.5", - "resolved": "https://registry.npmjs.org/@blueprintjs-formik/core/-/core-0.1.5.tgz", - "integrity": "sha512-H0aXiNMYC8RwhWR1F2O77dcRcRITijUX5we51G4AK2Vmp1yXCmNb0piN9ftsjL5vVIvIsMKWg+dfbwREmB5VWg==", - "requires": { - "lodash.get": "^4.4.2", - "lodash.keyby": "^4.6.0", - "styled-components": "^5.3.3", - "web-vitals": "^2.1.4" - } - }, "@blueprintjs-formik/select": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/@blueprintjs-formik/select/-/select-0.1.4.tgz", @@ -1980,6 +1969,16 @@ "integrity": "sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ==", "dev": true }, + "@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "dev": true, + "requires": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "@types/http-proxy": { "version": "1.17.3", "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.3.tgz", @@ -2240,6 +2239,25 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", "integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==" }, + "@types/styled-components": { + "version": "5.1.25", + "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.25.tgz", + "integrity": "sha512-fgwl+0Pa8pdkwXRoVPP9JbqF0Ivo9llnmsm+7TCI330kbPIFd9qv1Lrhr37shf4tnxCOSu+/IgqM7uJXLWZZNQ==", + "dev": true, + "requires": { + "@types/hoist-non-react-statics": "*", + "@types/react": "*", + "csstype": "^3.0.2" + }, + "dependencies": { + "csstype": { + "version": "3.0.11", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz", + "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==", + "dev": true + } + } + }, "@types/testing-library__dom": { "version": "6.12.1", "resolved": "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-6.12.1.tgz", diff --git a/package.json b/package.json index cf7f8a161..cf209c2af 100644 --- 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 new file mode 100644 index 000000000..49fcb26b8 --- /dev/null +++ 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` + 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 new file mode 100644 index 000000000..66dbb14f3 --- /dev/null +++ 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 ( + + {children} + + + ); +} diff --git a/src/components/FlexGrid/FlexItem.style.tsx b/src/components/FlexGrid/FlexItem.style.tsx new file mode 100644 index 000000000..a57556413 --- /dev/null +++ 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` + 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 new file mode 100644 index 000000000..3e9902137 --- /dev/null +++ b/src/components/FlexGrid/FlexItem.tsx @@ -0,0 +1 @@ +export * from './FlexItem.style'; \ No newline at end of file diff --git a/src/components/FlexGrid/index.ts b/src/components/FlexGrid/index.ts new file mode 100644 index 000000000..ee298fdc1 --- /dev/null +++ b/src/components/FlexGrid/index.ts @@ -0,0 +1,4 @@ +export * from './Flex.style'; +export * from './Flex'; +export * from './FlexItem.style'; +export * from './interfaces'; \ No newline at end of file diff --git a/src/components/FlexGrid/interfaces.ts b/src/components/FlexGrid/interfaces.ts new file mode 100644 index 000000000..34bca7767 --- /dev/null +++ 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 { + gap?: number; + col: Range; + marginBottom?: number; + stretch?: boolean; + as?: string | Component; + className?: string; + style?: StyleHTMLAttributes; +} + +export interface FlexProps extends HTMLAttributes { + gap?: number; + align?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'; + col?: Range; + className?: string; + style?: StyleHTMLAttributes; + as?: string | Component; +} \ No newline at end of file diff --git a/src/components/index.js b/src/components/index.js index 78a22851d..a569b36c2 100644 --- 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 index e2ce7150f..789409d6b 100644 --- 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 ( - + <> {/**----------- Previous Year -----------*/} {({ form, field }) => ( @@ -33,8 +33,9 @@ export default function BalanceSheetHeaderComparisonPanal() { )} - - + + + {({ form, field }) => ( }> @@ -48,8 +49,9 @@ export default function BalanceSheetHeaderComparisonPanal() { )} - - + + + {({ form, field }) => ( }> @@ -62,8 +64,9 @@ export default function BalanceSheetHeaderComparisonPanal() { )} - - + + + {/*------------ Previous Period -----------*/} {({ form, field }) => ( @@ -78,8 +81,9 @@ export default function BalanceSheetHeaderComparisonPanal() { )} - - + + + {({ form, field }) => ( }> @@ -93,8 +97,9 @@ export default function BalanceSheetHeaderComparisonPanal() { )} - - + + + {({ form, field }) => ( }> @@ -107,8 +112,8 @@ export default function BalanceSheetHeaderComparisonPanal() { )} - - + + {/**----------- % of Column -----------*/} @@ -137,19 +142,33 @@ export default function BalanceSheetHeaderComparisonPanal() { )} + + ); +} + +/** + * Balance sheet header - Comparison panal. + */ +export default function BalanceSheetHeaderComparisonPanal() { + return ( + + + + ); } 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; +`; diff --git a/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderComparisonPanel.js b/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderComparisonPanel.js index 27025e744..23b89bede 100644 --- 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 ( - + <> {/**----------- Previous Year -----------*/} {({ form, field }) => ( @@ -35,8 +36,9 @@ export default function ProfitLossSheetHeaderComparisonPanel() { )} - - + + + {({ form, field }) => ( }> @@ -50,8 +52,8 @@ export default function ProfitLossSheetHeaderComparisonPanel() { )} - - + + {({ form, field }) => ( }> @@ -65,8 +67,9 @@ export default function ProfitLossSheetHeaderComparisonPanel() { )} - - + + + {/**----------- Previous Period (PP) -----------*/} {({ form, field }) => ( @@ -81,8 +84,9 @@ export default function ProfitLossSheetHeaderComparisonPanel() { )} - - + + + {({ form, field }) => ( }> @@ -96,8 +100,8 @@ export default function ProfitLossSheetHeaderComparisonPanel() { )} - - + + {({ form, field }) => ( }> @@ -111,8 +115,9 @@ export default function ProfitLossSheetHeaderComparisonPanel() { )} - - + + + {/**----------- % of Column -----------*/} {({ field }) => ( @@ -126,6 +131,7 @@ export default function ProfitLossSheetHeaderComparisonPanel() { )} + {/**----------- % of Row -----------*/} {({ field }) => ( @@ -139,6 +145,7 @@ export default function ProfitLossSheetHeaderComparisonPanel() { )} + {/**----------- % of Expense -----------*/} {({ field }) => ( @@ -152,6 +159,7 @@ export default function ProfitLossSheetHeaderComparisonPanel() { )} + {/**----------- % of Income -----------*/} {({ field }) => ( @@ -165,19 +173,33 @@ export default function ProfitLossSheetHeaderComparisonPanel() { )} + + ); +} + +/** + * ProfitLoss sheet header -comparison panel. + */ +export default function ProfitLossSheetHeaderComparisonPanel() { + return ( + + + + ); } 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; +`;