Merge pull request #270 from Ferlab-Ste-Justine/feat/SKFP-664/resizable-grid-view

feat(grid): SKFP-664 add a resizable grid view

Author: lflangis

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@ferlab/ui",
-    "version": "5.5.10",
+    "version": "6.0.0",
     "description": "Core components for scientific research data portals",
     "publishConfig": {
         "access": "public"
@@ -49,6 +49,7 @@
         "@types/lodash": "^4.14.168",
         "@types/md5": "^2.3.2",
         "@types/react": "^16.9.51",
+        "@types/react-grid-layout": "^1.3.2",
         "@types/react-router-dom": "^5.1.6",
         "@types/uuid": "^8.3.0",
         "@typescript-eslint/eslint-plugin": "^4.10.0",
@@ -92,6 +93,7 @@
         "less2sass": "^1.0.3",
         "md5": "^2.3.0",
         "query-string": "^7.0.1",
+        "react-grid-layout": "^1.3.4",
         "react-icons": "^4.2.0",
         "simplebar-react": "^2.4.3",
         "uuid": "^8.3.2",

packages/ui/package-lock.json

@@ -0,0 +1,19 @@
+
+.popover {
+  div[class$="-inner-content"] {
+    padding: 12px;
+  }
+}
+
+.resetWrapper {
+  text-align: right;
+}
+
+.reset {
+  padding: 0;
+}
+
+.listWrapper {
+  max-height: 315px;
+  overflow: auto;
+}

packages/ui/package.json

@@ -0,0 +1,59 @@
+import React from 'react';
+import { SettingOutlined } from '@ant-design/icons';
+import { Button, Checkbox, List, Popover, Space, Tooltip } from 'antd';
+
+import styles from './index.module.scss';
+
+type TResizableItem = {
+    id: string;
+    label: string;
+    value: boolean;
+};
+
+type TResizableItemSelector = {
+    items: TResizableItem[];
+    onReset: () => void;
+    onChange: (id: string, checkbox: boolean) => void;
+    dictionary?: {
+        [p: string]: any;
+    };
+};
+
+const ResizableItemSelector = ({ dictionary, items, onChange, onReset }: TResizableItemSelector): JSX.Element => (
+    <Popover
+        align={{ offset: [-9, 0] }}
+        content={
+            <Space direction="vertical">
+                <div className={styles.listWrapper}>
+                    <Space direction="vertical">
+                        {items.map((item) => (
+                            <Checkbox
+                                checked={item.value}
+                                key={item.id}
+                                onChange={(e) => {
+                                    onChange(item.id, e.target.checked);
+                                }}
+                            >
+                                {item.label}
+                            </Checkbox>
+                        ))}
+                    </Space>
+                    <div className={styles.resetWrapper}>
+                        <Button className={styles.reset} onClick={onReset} size="small" type="link">
+                            {dictionary?.columnSelector?.reset || 'Reset'}
+                        </Button>
+                    </div>
+                </div>
+            </Space>
+        }
+        overlayClassName={styles.popover}
+        placement="bottomLeft"
+        trigger="click"
+    >
+        <Tooltip title={dictionary?.columnSelector?.tooltips?.columns || 'Columns'}>
+            <Button icon={<SettingOutlined />} size="small" type="text"></Button>
+        </Tooltip>
+    </Popover>
+);
+
+export default ResizableItemSelector;

packages/ui/src/layout/ResizableGridLayout/ResizableItemSelector/index.module.scss

@@ -0,0 +1,10 @@
+.wrapper {
+  width: 100%;
+
+  .graphSelector {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 2px;
+  }
+}