From 9d30cda10b9a1c4e1df38823766bfd4ab6d34f11 Mon Sep 17 00:00:00 2001 From: lflangis Date: Thu, 20 Apr 2023 15:53:54 -0400 Subject: [PATCH] fix(grid): SKFP-664 fix gridcard and default grid width --- packages/ui/package-lock.json | 78 +++++++++++++++++++ packages/ui/package.json | 3 +- .../ResizableGridLayout/index.module.scss | 5 ++ .../layout/ResizableGridLayout/index.test.tsx | 29 ------- .../src/layout/ResizableGridLayout/index.tsx | 70 +++++++++-------- .../GridCardHeader/GridCardHeader.module.scss | 1 - .../src/view/v2/GridCard/Gridcard.module.scss | 3 +- 7 files changed, 124 insertions(+), 65 deletions(-) diff --git a/packages/ui/package-lock.json b/packages/ui/package-lock.json index 767d3dc16..a10892430 100644 --- a/packages/ui/package-lock.json +++ b/packages/ui/package-lock.json @@ -23,6 +23,7 @@ "query-string": "^7.0.1", "react-grid-layout": "^1.3.4", "react-icons": "^4.2.0", + "react-sizeme": "^3.0.2", "simplebar-react": "^2.4.3", "uuid": "^8.3.2", "xss": "^1.0.9" @@ -2789,6 +2790,11 @@ ], "peer": true }, + "node_modules/batch-processor": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz", + "integrity": "sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA==" + }, "node_modules/big.js": { "version": "5.2.2", "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", @@ -4131,6 +4137,14 @@ "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==", "dev": true }, + "node_modules/element-resize-detector": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.4.tgz", + "integrity": "sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==", + "dependencies": { + "batch-processor": "1.0.0" + } + }, "node_modules/elliptic": { "version": "6.5.4", "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz", @@ -6237,6 +6251,14 @@ "node": ">= 0.10" } }, + "node_modules/invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/is-accessor-descriptor": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz", @@ -10336,6 +10358,17 @@ "react": ">= 16.3" } }, + "node_modules/react-sizeme": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/react-sizeme/-/react-sizeme-3.0.2.tgz", + "integrity": "sha512-xOIAOqqSSmKlKFJLO3inBQBdymzDuXx4iuwkNcJmC96jeiOg5ojByvL+g3MW9LPEsojLbC6pf68zOfobK8IPlw==", + "dependencies": { + "element-resize-detector": "^1.2.2", + "invariant": "^2.2.4", + "shallowequal": "^1.1.0", + "throttle-debounce": "^3.0.1" + } + }, "node_modules/read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", @@ -11871,6 +11904,14 @@ "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", "dev": true }, + "node_modules/throttle-debounce": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz", + "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==", + "engines": { + "node": ">=10" + } + }, "node_modules/through2": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz", @@ -15928,6 +15969,11 @@ "dev": true, "peer": true }, + "batch-processor": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz", + "integrity": "sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA==" + }, "big.js": { "version": "5.2.2", "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", @@ -17049,6 +17095,14 @@ "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==", "dev": true }, + "element-resize-detector": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.4.tgz", + "integrity": "sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==", + "requires": { + "batch-processor": "1.0.0" + } + }, "elliptic": { "version": "6.5.4", "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz", @@ -18695,6 +18749,14 @@ "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==", "dev": true }, + "invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "is-accessor-descriptor": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz", @@ -21807,6 +21869,17 @@ "react-draggable": "^4.0.3" } }, + "react-sizeme": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/react-sizeme/-/react-sizeme-3.0.2.tgz", + "integrity": "sha512-xOIAOqqSSmKlKFJLO3inBQBdymzDuXx4iuwkNcJmC96jeiOg5ojByvL+g3MW9LPEsojLbC6pf68zOfobK8IPlw==", + "requires": { + "element-resize-detector": "^1.2.2", + "invariant": "^2.2.4", + "shallowequal": "^1.1.0", + "throttle-debounce": "^3.0.1" + } + }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", @@ -23028,6 +23101,11 @@ "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", "dev": true }, + "throttle-debounce": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz", + "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==" + }, "through2": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz", diff --git a/packages/ui/package.json b/packages/ui/package.json index 3bf1ed05d..e5a34bfd1 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@ferlab/ui", - "version": "6.1.0", + "version": "6.1.1", "description": "Core components for scientific research data portals", "publishConfig": { "access": "public" @@ -95,6 +95,7 @@ "query-string": "^7.0.1", "react-grid-layout": "^1.3.4", "react-icons": "^4.2.0", + "react-sizeme": "^3.0.2", "simplebar-react": "^2.4.3", "uuid": "^8.3.2", "xss": "^1.0.9" diff --git a/packages/ui/src/layout/ResizableGridLayout/index.module.scss b/packages/ui/src/layout/ResizableGridLayout/index.module.scss index 1077617ff..d4e1ebe27 100644 --- a/packages/ui/src/layout/ResizableGridLayout/index.module.scss +++ b/packages/ui/src/layout/ResizableGridLayout/index.module.scss @@ -7,4 +7,9 @@ justify-content: flex-end; margin-top: 2px; } + + .grid { + width: 100%; + height: 100%; + } } \ No newline at end of file diff --git a/packages/ui/src/layout/ResizableGridLayout/index.test.tsx b/packages/ui/src/layout/ResizableGridLayout/index.test.tsx index 5ac8116a9..98c1192b6 100644 --- a/packages/ui/src/layout/ResizableGridLayout/index.test.tsx +++ b/packages/ui/src/layout/ResizableGridLayout/index.test.tsx @@ -154,35 +154,6 @@ const getSerializedLayout = (): TSerializedResizableGridLayoutConfig[] => [ ]; describe('ResizableGridLayout', () => { - test('make sure resizable grid layout is rendered correctly', () => { - const props = { - defaultLayouts: getDefaultLayouts(), - layouts: getDefaultLayouts(), - onConfigUpdate: (_layouts: TSerializedResizableGridLayoutConfig[]) => {}, - onReset: (_layouts: TSerializedResizableGridLayoutConfig[]) => {}, - }; - render(); - - expect(screen.getByText('card_1')).toBeTruthy(); - expect(screen.getByText('card_2')).toBeTruthy(); - expect(screen.getByText('card_3')).toBeTruthy(); - expect(screen.getByText('card_4')).toBeTruthy(); - }); - - test('make sure resizable grid layout is rendered correctly with serialized data', () => { - const props = { - defaultLayouts: getDefaultLayouts(), - layouts: getSerializedLayout(), - onConfigUpdate: (_layouts: TSerializedResizableGridLayoutConfig[]) => {}, - onReset: (_layouts: TSerializedResizableGridLayoutConfig[]) => {}, - }; - render(); - expect(screen.getByText('card_1')).toBeTruthy(); - expect(screen.getByText('card_2')).toBeTruthy(); - expect(screen.queryByText('card_3')).toBeNull(); - expect(screen.queryByText('card_4')).toBeNull(); - }); - test('make sure serialize function return TSerializedResizableGridLayoutConfig[]', () => { const config = [ { diff --git a/packages/ui/src/layout/ResizableGridLayout/index.tsx b/packages/ui/src/layout/ResizableGridLayout/index.tsx index 0c4f88fe0..4bdbe9ed0 100644 --- a/packages/ui/src/layout/ResizableGridLayout/index.tsx +++ b/packages/ui/src/layout/ResizableGridLayout/index.tsx @@ -1,11 +1,10 @@ import React, { useState } from 'react'; -import { Layout, Layouts, Responsive, ResponsiveProps, WidthProvider } from 'react-grid-layout'; +import { Layout, Layouts, Responsive as ResponsiveGridLayout, ResponsiveProps } from 'react-grid-layout'; +import { SizeMe } from 'react-sizeme'; import { Space } from 'antd'; import ResizableItemSelector from './ResizableItemSelector'; -const ResponsiveGridLayout = WidthProvider(Responsive); - import 'react-grid-layout/css/styles.css'; import 'react-resizable/css/styles.css'; import styles from './index.module.scss'; @@ -186,35 +185,42 @@ const ResizableGridLayout = ({ /> - { - setCurrentBreakpoint(newBreakpoint); - }} - onLayoutChange={(currentLayout, allLayouts) => { - onConfigUpdate(serializeLayoutsToConfig(allLayouts, configs)); - }} - rowHeight={98} - verticalCompact - {...props} - > - {configs.map((layout) => { - if (layout.hidden) { - return; - } - return ( -
- {layout.component} -
- ); - })} - + + {({ size }) => ( + { + setCurrentBreakpoint(newBreakpoint); + }} + onLayoutChange={(currentLayout, allLayouts) => { + onConfigUpdate(serializeLayoutsToConfig(allLayouts, configs)); + }} + rowHeight={98} + width={size.width !== null ? size.width : 1280} + {...props} + > + {configs.map((layout) => { + if (layout.hidden) { + return; + } + return ( +
+ {layout.component} +
+ ); + })} + + )} + ); }; diff --git a/packages/ui/src/view/v2/GridCard/GridCardHeader/GridCardHeader.module.scss b/packages/ui/src/view/v2/GridCard/GridCardHeader/GridCardHeader.module.scss index 9bb875889..f93b375a3 100644 --- a/packages/ui/src/view/v2/GridCard/GridCardHeader/GridCardHeader.module.scss +++ b/packages/ui/src/view/v2/GridCard/GridCardHeader/GridCardHeader.module.scss @@ -5,7 +5,6 @@ align-items: center; justify-content: space-between; font-size: 12px !important; - font-weight: 600; .dragHandle { font-size: 12px; diff --git a/packages/ui/src/view/v2/GridCard/Gridcard.module.scss b/packages/ui/src/view/v2/GridCard/Gridcard.module.scss index 7444214a7..22ea84205 100644 --- a/packages/ui/src/view/v2/GridCard/Gridcard.module.scss +++ b/packages/ui/src/view/v2/GridCard/Gridcard.module.scss @@ -42,8 +42,7 @@ $padding-side-and-bottom: 24px; div[class$="-head"] { div[class$="-head-title"] { - padding-bottom: 0; - padding: 8px 0 + padding: 2px 0; } } }