Merge pull request #37 from agentlab/issue-27-cards-list-resize-on-pa…

…ge-resize-leads-to-broken-layout GH-27 [FIX] Card Layout
agentlab · Nov 2, 2021 · ee97946 · ee97946
2 parents ba9bf72 + e6d31d2
commit ee97946
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 12 deletions.
diff --git a/src/cells/AntdCellCardLayout.tsx b/src/cells/AntdCellCardLayout.tsx
@@ -19,6 +19,7 @@ import './cell.css';
 
 export const AntdCellCardLayout = (props: any): JSX.Element => {
   const { viewKind, viewKindElement, viewDescr, viewDescrElement, schema, data, id } = props;
+  const { style } = viewKindElement?.options;
   const createCardChilds = () =>
     viewKindElement.elements
       ? viewKindElement.elements.map((e: IViewKindElement, idx: number) => {
@@ -38,7 +39,11 @@ export const AntdCellCardLayout = (props: any): JSX.Element => {
           );
         })
       : null;
-  return <Card hoverable>{createCardChilds()}</Card>;
+  return (
+    <Card style={style} hoverable>
+      {createCardChilds()}
+    </Card>
+  );
 };
 
 /**

diff --git a/src/cells/AntdSimpleCells.tsx b/src/cells/AntdSimpleCells.tsx
@@ -7,7 +7,7 @@
  *
  * SPDX-License-Identifier: GPL-3.0-only
  ********************************************************************************/
-import React from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { Button, Image, Rate } from 'antd';
 
 import {
@@ -46,10 +46,25 @@ export const AntdBooleanCellWithStore = withStoreToCellProps(AntdBooleanCell);
  */
 export const AntdButtonCell = (props: any): JSX.Element => {
   const options = props.uiOptions;
+  const [fontSize, setFontSize] = useState<number>();
+  const cellRef = useRef<any>(null);
+
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      setFontSize(entries[0].contentRect.width * options.relativeFont);
+    });
+
+    if (options.relativeFont) {
+      const antRow = cellRef.current.parentNode.parentNode;
+      resizeObserver.observe(antRow);
+    }
+
+    return () => resizeObserver.disconnect();
+  }, []);
   return (
-    <Button size={'small'} style={options.style}>
+    <button ref={cellRef} style={{ fontSize, verticalAlign: 'middle', ...options.style }}>
       {options.label}
-    </Button>
+    </button>
   );
 };
 export const antdButtonCellTester: RankedTester = rankWith(2, uiTypeIs('aldkg:Button'));
@@ -80,7 +95,7 @@ export const AntdNumberCellWithStore = withStoreToCellProps(AntdNumberCell);
  */
 export const AntdImageCell = (props: any): JSX.Element => {
   const { data } = props;
-  return <Image style={{ height: '100%', width: '100%' }} src={data[0]} />;
+  return <Image width={'100%'} src={data[0]} />;
 };
 export const antdImageCellTester: RankedTester = rankWith(2, uiTypeIs('aldkg:ImageCell'));
 export const AntdImageCellWithStore = withStoreToCellProps(AntdImageCell);

diff --git a/src/cells/CellRenderer.tsx b/src/cells/CellRenderer.tsx
@@ -30,7 +30,9 @@ export const CellRenderer: React.FC<ControlComponent & WithCell> = ({
 }) => {
   const [editing, setEditing] = useState(false);
   const [currentData, setCurrentData] = useState(props.data);
+  const [fontSize, setFontSize] = useState<number>();
   const inputRef = useRef<any>(null);
+  const cellRef = useRef<any>(null);
   const formatterId = uiOptions.formatter || 'base';
   const query = uiOptions.query;
   let width = 'auto';
@@ -64,9 +66,30 @@ export const CellRenderer: React.FC<ControlComponent & WithCell> = ({
       specialProps[key] = rowData[formatterProps[key]];
     }
   }
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      setFontSize(entries[0].contentRect.width * uiOptions.relativeFont);
+    });
+
+    if (uiOptions.relativeFont) {
+      const antRow = cellRef.current.parentNode.parentNode;
+      resizeObserver.observe(antRow);
+    }
+
+    return () => resizeObserver.disconnect();
+  }, []);
   //console.log('RENDER', props.data);
   return (
-    <div style={{ margin: '5px', display: 'block', alignSelf: 'start', width: width, ...uiOptions.style }}>
+    <div
+      ref={cellRef}
+      style={{
+        margin: '5px',
+        display: 'block',
+        alignSelf: 'start',
+        width: width,
+        fontSize,
+        ...uiOptions.style,
+      }}>
       {editable ? (
         editing ? (
           <Cell inputRef={inputRef} value={currentData} handleChange={save} {...props} />

diff --git a/src/data-controls/GridRenderer.tsx b/src/data-controls/GridRenderer.tsx
@@ -19,6 +19,8 @@ export const GridRenderer: React.FC<any> = (props) => {
   const { viewKind, viewKindElement, viewDescr, viewDescrElement, child, schema } = props;
   const grid = viewKindElement?.options?.grid || { gutter: 16, column: 4 };
   const template = viewKindElement?.options?.elementTemplate || null;
+  const style = viewKindElement?.options?.style;
+
   const createCell = (data: any, id: string | number) =>
     template ? (
       template.map((e: IViewKindElement, idx: number) => (
@@ -38,6 +40,11 @@ export const GridRenderer: React.FC<any> = (props) => {
       <span key={id}>{data['@id']}</span>
     );
   return (
-    <List grid={grid} dataSource={child} renderItem={(item, idx) => <List.Item>{createCell(item, idx)}</List.Item>} />
+    <List
+      grid={grid}
+      style={style}
+      dataSource={child}
+      renderItem={(item, idx) => <List.Item>{createCell(item, idx)}</List.Item>}
+    />
   );
 };
diff --git a/stories/CardsGridList.stories.tsx b/stories/CardsGridList.stories.tsx
@@ -65,10 +65,19 @@ const viewKinds = [
                 xl: 4,
                 xxl: 7,
               },
+              style: {
+                minWidth: 460,
+              },
               elementTemplate: [
                 {
                   '@id': 'mktp:_94hfT67',
                   '@type': 'aldkg:CardLayout',
+                  options: {
+                    style: {
+                      maxWidth: 340,
+                      minWidth: 220,
+                    },
+                  },
                   elements: [
                     {
                       '@id': 'mktp:_kje733js',
@@ -119,6 +128,9 @@ const viewKinds = [
                               textAlign: 'left',
                               fontFamily: 'Lato,Tahoma,sans-serif',
                               color: 'gray',
+                              height: '1rem',
+                              overflow: 'hidden',
+                              textOverflow: 'ellipsis',
                             },
                           },
                         },
@@ -134,6 +146,9 @@ const viewKinds = [
                               textAlign: 'right',
                               fontFamily: 'Lato,Tahoma,sans-serif',
                               color: 'gray',
+                              height: '1rem',
+                              overflow: 'hidden',
+                              textOverflow: 'ellipsis',
                             },
                           },
                         },
@@ -154,6 +169,9 @@ const viewKinds = [
                           textAlign: 'left',
                           fontFamily: 'Lato,Tahoma,sans-serif',
                           color: 'gray',
+                          height: '1rem',
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
                         },
                       },
                     },
@@ -172,6 +190,9 @@ const viewKinds = [
                           textAlign: 'left',
                           fontFamily: 'Lato,Tahoma,sans-serif',
                           color: 'gray',
+                          height: '1rem',
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
                         },
                       },
                     },
@@ -193,16 +214,17 @@ const viewKinds = [
                           options: {
                             style: {
                               border: '1.5px solid black',
+                              padding: '0 3px 0 3px',
                               borderRadius: '2px',
                               height: '2em',
                               textAlign: 'center',
                               fontWeight: 500,
-                              width: '90px',
                               color: 'black',
                             },
                             specialImage: 'https://www.meme-arsenal.com/memes/f8e9bfb9fdf368272b21a5dac8f01ec1.jpg',
                             editable: false,
                             formatter: 'link',
+                            relativeFont: 0.06,
                             dataToFormatter: {
                               link: '@id',
                             },
@@ -214,11 +236,12 @@ const viewKinds = [
                           '@type': 'aldkg:Button',
                           options: {
                             label: 'Добавить',
+                            relativeFont: 0.06,
                             style: {
                               border: '1.5px solid black',
                               borderRadius: '2px',
-                              width: '90px',
                               fontWeight: 500,
+                              backgroundColor: 'white',
                               color: 'black',
                             },
                           },

diff --git a/stories/CardsHorizontalScroller.stories.tsx b/stories/CardsHorizontalScroller.stories.tsx
@@ -54,7 +54,12 @@ const viewKinds = [
     elements: [
       {
         '@id': 'mktp:_29kFg89',
-        '@type': 'aldkg:VerticalLayout',
+        '@type': 'aldkg:PanelLayout',
+        options: {
+          style: {
+            width: '100%',
+          },
+        },
         elements: [
           {
             '@id': 'mktp:_24Hdr78',
@@ -69,6 +74,12 @@ const viewKinds = [
                 {
                   '@id': 'mktp:_94hfT67',
                   '@type': 'aldkg:CardLayout',
+                  options: {
+                    style: {
+                      maxWidth: 340,
+                      minWidth: 220,
+                    },
+                  },
                   elements: [
                     {
                       '@id': 'mktp:_kje733js',
@@ -119,6 +130,9 @@ const viewKinds = [
                               textAlign: 'left',
                               fontFamily: 'Lato,Tahoma,sans-serif',
                               color: 'gray',
+                              height: '1rem',
+                              overflow: 'hidden',
+                              textOverflow: 'ellipsis',
                             },
                           },
                         },
@@ -134,6 +148,9 @@ const viewKinds = [
                               textAlign: 'right',
                               fontFamily: 'Lato,Tahoma,sans-serif',
                               color: 'gray',
+                              height: '1rem',
+                              overflow: 'hidden',
+                              textOverflow: 'ellipsis',
                             },
                           },
                         },
@@ -154,6 +171,9 @@ const viewKinds = [
                           textAlign: 'left',
                           fontFamily: 'Lato,Tahoma,sans-serif',
                           color: 'gray',
+                          height: '1rem',
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
                         },
                       },
                     },
@@ -172,6 +192,9 @@ const viewKinds = [
                           textAlign: 'left',
                           fontFamily: 'Lato,Tahoma,sans-serif',
                           color: 'gray',
+                          height: '1rem',
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
                         },
                       },
                     },
@@ -189,16 +212,17 @@ const viewKinds = [
                           options: {
                             style: {
                               border: '1.5px solid black',
+                              padding: '0 3px 0 3px',
                               borderRadius: '2px',
                               height: '2em',
                               textAlign: 'center',
                               fontWeight: 500,
-                              width: '90px',
                               color: 'black',
                             },
                             specialImage: 'https://www.meme-arsenal.com/memes/f8e9bfb9fdf368272b21a5dac8f01ec1.jpg',
                             editable: false,
                             formatter: 'link',
+                            relativeFont: 0.06,
                             dataToFormatter: {
                               link: '@id',
                             },
@@ -210,11 +234,12 @@ const viewKinds = [
                           '@type': 'aldkg:Button',
                           options: {
                             label: 'Добавить',
+                            relativeFont: 0.06,
                             style: {
                               border: '1.5px solid black',
                               borderRadius: '2px',
-                              width: '90px',
                               fontWeight: 500,
+                              backgroundColor: 'white',
                               color: 'black',
                             },
                           },