From 93d9ec61b54cae3ba39e3a2dea0839ca9870056e Mon Sep 17 00:00:00 2001 From: Artyom Date: Wed, 6 Oct 2021 18:19:06 +0300 Subject: [PATCH 1/3] [FIX] Card Layout --- src/cells/AntdCellCardLayout.tsx | 7 ++++++- src/cells/AntdSimpleCells.tsx | 23 +++++++++++++++++++---- src/cells/CellRenderer.tsx | 25 ++++++++++++++++++++++++- src/data-controls/GridRenderer.tsx | 9 ++++++++- stories/CardsGridList.stories.tsx | 27 +++++++++++++++++++++++++-- 5 files changed, 82 insertions(+), 9 deletions(-) diff --git a/src/cells/AntdCellCardLayout.tsx b/src/cells/AntdCellCardLayout.tsx index bdc2b57..ebd8c01 100644 --- 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 {createCardChilds()}; + return ( + + {createCardChilds()} + + ); }; /** diff --git a/src/cells/AntdSimpleCells.tsx b/src/cells/AntdSimpleCells.tsx index 86df2ea..ed6775a 100644 --- 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(); + const cellRef = useRef(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 ( - + ); }; 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 ; + return ; }; 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 index e2e82ff..c7d6928 100644 --- a/src/cells/CellRenderer.tsx +++ b/src/cells/CellRenderer.tsx @@ -30,7 +30,9 @@ export const CellRenderer: React.FC = ({ }) => { const [editing, setEditing] = useState(false); const [currentData, setCurrentData] = useState(props.data); + const [fontSize, setFontSize] = useState(); const inputRef = useRef(null); + const cellRef = useRef(null); const formatterId = uiOptions.formatter || 'base'; const query = uiOptions.query; let width = 'auto'; @@ -64,9 +66,30 @@ export const CellRenderer: React.FC = ({ 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 ( -
+
{editable ? ( editing ? ( diff --git a/src/data-controls/GridRenderer.tsx b/src/data-controls/GridRenderer.tsx index e6c73e6..543f9f4 100644 --- a/src/data-controls/GridRenderer.tsx +++ b/src/data-controls/GridRenderer.tsx @@ -19,6 +19,8 @@ export const GridRenderer: React.FC = (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 = (props) => { {data['@id']} ); return ( - {createCell(item, idx)}} /> + {createCell(item, idx)}} + /> ); }; diff --git a/stories/CardsGridList.stories.tsx b/stories/CardsGridList.stories.tsx index c12be5e..012b80d 100644 --- a/stories/CardsGridList.stories.tsx +++ b/stories/CardsGridList.stories.tsx @@ -66,10 +66,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', @@ -120,6 +129,9 @@ const viewKinds = [ textAlign: 'left', fontFamily: 'Lato,Tahoma,sans-serif', color: 'gray', + height: '1rem', + overflow: 'hidden', + textOverflow: 'ellipsis', }, }, }, @@ -135,6 +147,9 @@ const viewKinds = [ textAlign: 'right', fontFamily: 'Lato,Tahoma,sans-serif', color: 'gray', + height: '1rem', + overflow: 'hidden', + textOverflow: 'ellipsis', }, }, }, @@ -155,6 +170,9 @@ const viewKinds = [ textAlign: 'left', fontFamily: 'Lato,Tahoma,sans-serif', color: 'gray', + height: '1rem', + overflow: 'hidden', + textOverflow: 'ellipsis', }, }, }, @@ -173,6 +191,9 @@ const viewKinds = [ textAlign: 'left', fontFamily: 'Lato,Tahoma,sans-serif', color: 'gray', + height: '1rem', + overflow: 'hidden', + textOverflow: 'ellipsis', }, }, }, @@ -194,16 +215,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', }, @@ -215,11 +237,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', }, }, From 39fd512abdb1e62e1b88c4ab8bd75b99598225d0 Mon Sep 17 00:00:00 2001 From: Artkrygin <80037398+Artkrygin@users.noreply.github.com> Date: Tue, 2 Nov 2021 12:31:46 +0300 Subject: [PATCH 2/3] [FIX] Horizontal scroll --- stories/CardsHorizontalScroller.stories.tsx | 24 +++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/stories/CardsHorizontalScroller.stories.tsx b/stories/CardsHorizontalScroller.stories.tsx index b1bc37b..750974a 100644 --- a/stories/CardsHorizontalScroller.stories.tsx +++ b/stories/CardsHorizontalScroller.stories.tsx @@ -70,6 +70,12 @@ const viewKinds = [ { '@id': 'mktp:_94hfT67', '@type': 'aldkg:CardLayout', + options: { + style: { + maxWidth: 340, + minWidth: 220, + }, + }, elements: [ { '@id': 'mktp:_kje733js', @@ -120,6 +126,9 @@ const viewKinds = [ textAlign: 'left', fontFamily: 'Lato,Tahoma,sans-serif', color: 'gray', + height: '1rem', + overflow: 'hidden', + textOverflow: 'ellipsis', }, }, }, @@ -135,6 +144,9 @@ const viewKinds = [ textAlign: 'right', fontFamily: 'Lato,Tahoma,sans-serif', color: 'gray', + height: '1rem', + overflow: 'hidden', + textOverflow: 'ellipsis', }, }, }, @@ -155,6 +167,9 @@ const viewKinds = [ textAlign: 'left', fontFamily: 'Lato,Tahoma,sans-serif', color: 'gray', + height: '1rem', + overflow: 'hidden', + textOverflow: 'ellipsis', }, }, }, @@ -173,6 +188,9 @@ const viewKinds = [ textAlign: 'left', fontFamily: 'Lato,Tahoma,sans-serif', color: 'gray', + height: '1rem', + overflow: 'hidden', + textOverflow: 'ellipsis', }, }, }, @@ -190,16 +208,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', }, @@ -211,11 +230,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', }, }, From e6d31d23cc61908c1238af3397f37a8063c4fa8f Mon Sep 17 00:00:00 2001 From: Artkrygin <80037398+Artkrygin@users.noreply.github.com> Date: Tue, 2 Nov 2021 16:31:59 +0300 Subject: [PATCH 3/3] [FIX] horizontal scroll --- stories/CardsHorizontalScroller.stories.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/stories/CardsHorizontalScroller.stories.tsx b/stories/CardsHorizontalScroller.stories.tsx index 69a9078..02a4d82 100644 --- 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',