From bcbc6c112697e20ab032a01083f36932182d744b Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Tue, 30 Jul 2024 23:13:03 +0500 Subject: [PATCH 01/15] syntax corrected --- .../lowcoder/src/comps/comps/tableComp/tableCompView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx index 5b184c11c..699c1922b 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx @@ -200,7 +200,7 @@ const TableWrapper = styled.div<{ border-top: none !important; border-inline-start: none !important; overflow-y:scroll; - height:300px + height:300px; &::after { box-shadow: none !important; From 8fd052a283ad87b06d88367be8262e3b2d82a24d Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Wed, 31 Jul 2024 00:56:19 +0500 Subject: [PATCH 02/15] scrollbar added --- .../src/components/ScrollBar.tsx | 25 ++++++++++++++----- .../src/comps/comps/listViewComp/listView.tsx | 2 +- 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/client/packages/lowcoder-design/src/components/ScrollBar.tsx b/client/packages/lowcoder-design/src/components/ScrollBar.tsx index cf51ee68b..3da5b6128 100644 --- a/client/packages/lowcoder-design/src/components/ScrollBar.tsx +++ b/client/packages/lowcoder-design/src/components/ScrollBar.tsx @@ -5,10 +5,15 @@ import { DebouncedFunc } from 'lodash'; // Assuming you're using lodash's Deboun // import 'simplebar-react/dist/simplebar.min.css'; -const ScrollBarWrapper = styled.div<{ $hideplaceholder?: boolean }>` +const ScrollBarWrapper = styled.div<{ + $hideplaceholder?: boolean; + $overflow?: string; +}>` min-height: 0; - height: 100%; + height: ${props => props.$overflow? props.$overflow === 'scroll' ? '300px' : '100%':'100%' + }; width: 100%; + overflow:${props=>props.$overflow}; .simplebar-scrollbar::before { background: rgba(139, 143, 163, 0.5) !important; @@ -37,7 +42,9 @@ const ScrollBarWrapper = styled.div<{ $hideplaceholder?: boolean }>` bottom: 10px; } - ${props => Boolean(props.$hideplaceholder) && ` + ${(props) => + Boolean(props.$hideplaceholder) && + ` .simplebar-placeholder { display: none !important; } @@ -50,6 +57,7 @@ interface IProps { children: React.ReactNode; className?: string; height?: string; + overflow?:string, style?: React.CSSProperties; // Add this line to include a style prop scrollableNodeProps?: { onScroll: DebouncedFunc<(e: any) => void>; @@ -62,6 +70,7 @@ export const ScrollBar = ({ className, children, style, + overflow, scrollableNodeProps, hideScrollbar = false, $hideplaceholder = false, @@ -72,12 +81,16 @@ export const ScrollBar = ({ const combinedStyle = { ...style, height }; // Example of combining height with passed style return hideScrollbar ? ( - + {children} ) : ( - - + + {children} diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx index e4ce05d00..7834077de 100644 --- a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx +++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx @@ -286,7 +286,7 @@ export function ListView(props: Props) { - + { if (height) setListHeight(height); From ec73757787a814fbc4e33dbe47bcc579392a5e56 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Thu, 1 Aug 2024 04:15:33 +0500 Subject: [PATCH 03/15] vertical and horizontal scrollbar --- .../lowcoder/src/comps/comps/listViewComp/listView.tsx | 5 +++-- .../src/comps/comps/listViewComp/listViewComp.tsx | 3 ++- .../comps/comps/listViewComp/listViewPropertyView.tsx | 9 +++++++-- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx index 7834077de..f7100e353 100644 --- a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx +++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx @@ -186,7 +186,8 @@ export function ListView(props: Props) { [children.noOfRows] ); const autoHeight = useMemo(() => children.autoHeight.getView(), [children.autoHeight]); - const scrollbars = useMemo(() => children.scrollbars.getView(), [children.scrollbars]); + const showHorizontalScrollbar = useMemo(() => children.showHorizontalScrollbar.getView(), [children.showHorizontalScrollbar]); + const showVerticalScrollbar = useMemo(() => children.showVerticalScrollbar.getView(), [children.showVerticalScrollbar]); const horizontal = useMemo(() => children.horizontal.getView(), [children.horizontal]); const minHorizontalWidth = useMemo(() => children.minHorizontalWidth.getView(), [children.minHorizontalWidth]); const noOfColumns = useMemo( @@ -286,7 +287,7 @@ export function ListView(props: Props) { - + { if (height) setListHeight(height); diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx index b018bcbdd..8f559de1d 100644 --- a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx @@ -49,7 +49,8 @@ const childrenMap = { heightUnitOfRow: withDefault(NumberControl, 1), container: ContextContainerComp, autoHeight: AutoHeightControl, - scrollbars: withDefault(BoolControl, false), + showVerticalScrollbar: withDefault(BoolControl, false), + showHorizontalScrollbar: withDefault(BoolControl, false), showBorder: BoolControl, pagination: withDefault(PaginationControl, { pageSize: "6" }), style: styleControl(ListViewStyle, 'style'), diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx index dc597f041..c42a57584 100644 --- a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx +++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx @@ -62,9 +62,14 @@ export function listPropertyView(compType: ListCompType) { {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( <>
{children.autoHeight.getPropertyView()} + {(!children.autoHeight.getView()) && + children.showVerticalScrollbar.propertyView({ + label: trans("prop.showVerticalScrollbar"), + } + )} {(!children.autoHeight.getView() || children.horizontal.getView()) && - children.scrollbars.propertyView({ - label: trans("prop.scrollbar"), + children.showHorizontalScrollbar.propertyView({ + label: trans("prop.showHorizontalScrollbar"), } )} {children.horizontal.propertyView({ From 69ddd0a273d250c46b2a086a747e76aa8bc65b87 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Thu, 1 Aug 2024 04:40:03 +0500 Subject: [PATCH 04/15] translation added --- client/packages/lowcoder/src/i18n/locales/en.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 7b6da7f8e..5a1ec49b1 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -199,6 +199,8 @@ export const en = { "showMask": "Show Mask", "textOverflow": "Text Overflow", "scrollbar" : "Show Scrollbars", + "showVerticalScrollbar" : "Show Vertical Scrollbar", + "showHorizontalScrollbar" : "Show Horizontal Scrollbar", "siderScrollbar" : "Show Scrollbars in Sider", "siderRight" : "Show sider on the Right", "siderWidth" : "Sider Width", From 9f8d86797a45924739ce87deb19e256ee0f45ded Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Thu, 1 Aug 2024 04:40:37 +0500 Subject: [PATCH 05/15] scrollbar added to container --- .../lowcoder/src/comps/comps/containerComp/containerComp.tsx | 2 +- .../src/comps/comps/triContainerComp/triContainer.tsx | 4 ++-- .../src/comps/comps/triContainerComp/triContainerComp.tsx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx index 63d074053..1fa38cdc5 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx @@ -81,7 +81,7 @@ function convertOldContainerParams(params: CompParams) { // old params if (container && (container.hasOwnProperty("layout") || container.hasOwnProperty("items"))) { const autoHeight = tempParams.value.autoHeight; - const scrollbars = tempParams.value.scrollbars; + const scrollbars = tempParams.value.showVerticalScrollbar; return { ...tempParams, value: { diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx index f982b2d53..455ac3304 100644 --- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx +++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx @@ -107,7 +107,7 @@ export function TriContainer(props: TriContainerProps) { const { showHeader, showFooter } = container; // When the header and footer are not displayed, the body must be displayed const showBody = container.showBody || (!showHeader && !showFooter); - const scrollbars = container.scrollbars; + const showVerticalScrollbar = container.showVerticalScrollbar; const { items: headerItems, ...otherHeaderProps } = container.header; const { items: bodyItems, ...otherBodyProps } = container.body["0"].children.view.getView(); @@ -150,7 +150,7 @@ export function TriContainer(props: TriContainerProps) { )} {showBody && ( - + Date: Thu, 1 Aug 2024 04:56:23 +0500 Subject: [PATCH 06/15] tabbed container scrollbar --- .../lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx index 9d77152cb..34efafdb2 100644 --- a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx @@ -53,6 +53,7 @@ const childrenMap = { 1: { layout: {}, items: {} }, }), autoHeight: AutoHeightControl, + showVerticalScrollbar: withDefault(BoolControl, false), scrollbars: withDefault(BoolControl, false), placement: withDefault(PositionControl, "top"), onEvent: eventHandlerControl(EVENT_OPTIONS), @@ -239,7 +240,7 @@ const TabbedContainer = (props: TabbedContainerProps) => { forceRender: true, children: ( - + From 1c4812b9ad0b18c6069c41c18aaf98ae90997468 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Thu, 1 Aug 2024 11:35:38 +0500 Subject: [PATCH 07/15] horizontal row --- .../lowcoder/src/comps/comps/listViewComp/listView.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx index f7100e353..daf623fd0 100644 --- a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx +++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx @@ -57,7 +57,7 @@ const ListOrientationWrapper = styled.div<{ }>` height: ${(props) => (props.$autoHeight ? "auto" : "100%")}; display: flex; - flex-direction: ${(props) => (props.$isHorizontal && !props.$isGrid ? "row" : "column")}; + flex-direction: ${(props) => (props.$isHorizontal ? "row" : "column")}; height: 100%; `; @@ -167,6 +167,7 @@ type Props = { }; export function ListView(props: Props) { + console.log("🚀 ~ ListView ~ props:", props) const { comp } = props; const children = comp.children; const ref = useRef(null); @@ -189,6 +190,7 @@ export function ListView(props: Props) { const showHorizontalScrollbar = useMemo(() => children.showHorizontalScrollbar.getView(), [children.showHorizontalScrollbar]); const showVerticalScrollbar = useMemo(() => children.showVerticalScrollbar.getView(), [children.showVerticalScrollbar]); const horizontal = useMemo(() => children.horizontal.getView(), [children.horizontal]); + console.log("🚀 ~ ListView ~ horizontal:", horizontal) const minHorizontalWidth = useMemo(() => children.minHorizontalWidth.getView(), [children.minHorizontalWidth]); const noOfColumns = useMemo( () => Math.max(1, children.noOfColumns.getView()), From 4d3fd58e42bbc1ddbbdd8392be156f7f3fd6d82d Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Thu, 1 Aug 2024 11:42:05 +0500 Subject: [PATCH 08/15] condition changed --- .../src/comps/comps/listViewComp/listViewPropertyView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx index c42a57584..1150c4c50 100644 --- a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx +++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx @@ -62,12 +62,12 @@ export function listPropertyView(compType: ListCompType) { {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( <>
{children.autoHeight.getPropertyView()} - {(!children.autoHeight.getView()) && + {(!children.autoHeight.getView()) && !children.horizontal.getView()&& children.showVerticalScrollbar.propertyView({ label: trans("prop.showVerticalScrollbar"), } )} - {(!children.autoHeight.getView() || children.horizontal.getView()) && + {(children.horizontal.getView()) && children.showHorizontalScrollbar.propertyView({ label: trans("prop.showHorizontalScrollbar"), } From abc37df3ba765002e9d511a227d3c5f1dcf8b83f Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Thu, 1 Aug 2024 11:47:31 +0500 Subject: [PATCH 09/15] translation changed --- .../lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx index 271d8c1f3..bff2ed922 100644 --- a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx @@ -155,7 +155,7 @@ export class PageLayoutComp extends layoutBaseComp implements IContainer { return [ this.children.autoHeight.getPropertyView(), this.children.siderScrollbars.propertyView({ label: trans("prop.siderScrollbar")}), - (!this.children.autoHeight.getView()) && this.children.contentScrollbars.propertyView({ label: trans("prop.contentScrollbar") }), + (!this.children.autoHeight.getView()) && this.children.contentScrollbars.propertyView({ label: trans("prop.showVerticalScrollbar") }), ]; } From b6e32d6ee39f2ea8f1b545f47a0236f640038962 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Fri, 2 Aug 2024 01:32:14 +0500 Subject: [PATCH 10/15] vertical scrollbar in shapes --- .../comps/shapeComp/shapeTriContainer.tsx | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/shapeComp/shapeTriContainer.tsx b/client/packages/lowcoder/src/comps/comps/shapeComp/shapeTriContainer.tsx index 45dd88a77..cdb8db990 100644 --- a/client/packages/lowcoder/src/comps/comps/shapeComp/shapeTriContainer.tsx +++ b/client/packages/lowcoder/src/comps/comps/shapeComp/shapeTriContainer.tsx @@ -88,7 +88,7 @@ export function ShapeTriContainer(props: TriContainerProps) { // const { showHeader, showFooter } = container; // When the header and footer are not displayed, the body must be displayed const showBody = true; - const scrollbars = container.scrollbars; + const showVerticalScrollbar = container.showVerticalScrollbar; const { items: bodyItems, ...otherBodyProps } = container.body["0"].children.view.getView(); @@ -111,30 +111,30 @@ export function ShapeTriContainer(props: TriContainerProps) { }, [icon.props]); return ( -
+
-
- + Date: Mon, 9 Sep 2024 20:39:28 +0500 Subject: [PATCH 11/15] consoles removed --- .../packages/lowcoder/src/comps/comps/listViewComp/listView.tsx | 2 -- .../lowcoder/src/comps/comps/listViewComp/listViewComp.tsx | 2 +- .../src/comps/comps/triContainerComp/triContainerComp.tsx | 2 +- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx index 4e373de10..2cd0d22e0 100644 --- a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx +++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx @@ -170,7 +170,6 @@ type Props = { }; export function ListView(props: Props) { - console.log("🚀 ~ ListView ~ props:", props) const { comp } = props; const children = comp.children; const ref = useRef(null); @@ -194,7 +193,6 @@ export function ListView(props: Props) { const showHorizontalScrollbar = useMemo(() => children.showHorizontalScrollbar.getView(), [children.showHorizontalScrollbar]); const showVerticalScrollbar = useMemo(() => children.showVerticalScrollbar.getView(), [children.showVerticalScrollbar]); const horizontal = useMemo(() => children.horizontal.getView(), [children.horizontal]); - console.log("🚀 ~ ListView ~ horizontal:", horizontal) const minHorizontalWidth = useMemo(() => children.minHorizontalWidth.getView(), [children.minHorizontalWidth]); const noOfColumns = useMemo( () => Math.max(1, children.noOfColumns.getView()), diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx index 60f89131d..cd9644997 100644 --- a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx @@ -53,7 +53,7 @@ const childrenMap = { showVerticalScrollbar: withDefault(BoolControl, false), showHorizontalScrollbar: withDefault(BoolControl, false), horizontalGridCells: SliderControl, - scrollbars: withDefault(BoolControl, false), //TOLOOK INTO + scrollbars: withDefault(BoolControl, false), showBorder: BoolControl, pagination: withDefault(PaginationControl, { pageSize: "6" }), style: styleControl(ListViewStyle, 'style'), diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx index 3645034f8..9becd7ba2 100644 --- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx @@ -43,7 +43,7 @@ const childrenMap = { autoHeight: AutoHeightControl, showVerticalScrollbar: withDefault(BoolControl, false), horizontalGridCells: SliderControl, - scrollbars: withDefault(BoolControl, false), //TOLOOK INTO + scrollbars: withDefault(BoolControl, false), style: withDefault(styleControl(ContainerStyle, 'style'),{borderWidth:'1px'}), headerStyle: styleControl(ContainerHeaderStyle, 'headerStyle'), bodyStyle: styleControl(ContainerBodyStyle, 'bodyStyle'), From bccd0887cdfedbb4c6f40d9de7c003b296904e9f Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Mon, 9 Sep 2024 20:56:55 +0500 Subject: [PATCH 12/15] removed duplicate code --- client/packages/lowcoder/src/i18n/locales/en.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index bf24cb836..9af9fdd63 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -222,8 +222,6 @@ export const en = { "preventOverwriting": "Prevent overwriting styles", "color": "Color", "horizontalGridCells": "Horizontal Grid Cells", - "showHorizontalScrollbar": "Show Horizontal Scrollbar", - "showVerticalScrollbar": "Show Vertical Scrollbar", "timeZone": "TimeZone", }, "autoHeightProp": { From b7c6e8eb7f247d507a3cce41cd720121a1e7f9fb Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Sat, 14 Sep 2024 18:57:28 +0500 Subject: [PATCH 13/15] tabbed container issue resolved --- .../lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx index 0077e64c6..510c4d795 100644 --- a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx @@ -242,7 +242,7 @@ const TabbedContainer = (props: TabbedContainerProps) => { forceRender: true, children: ( - + { }) return ( - -
+ +
Date: Mon, 16 Sep 2024 11:51:01 +0500 Subject: [PATCH 14/15] minor tweaks --- .../src/comps/comps/listViewComp/listView.tsx | 14 ++++++++++---- .../src/comps/comps/tableComp/tableCompView.tsx | 2 -- .../src/comps/comps/tabs/tabbedContainerComp.tsx | 5 ++--- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx index 0e508b584..153b95d92 100644 --- a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx +++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx @@ -18,17 +18,20 @@ import { import { ContextContainerComp } from "./contextContainerComp"; import { ListViewImplComp } from "./listViewComp"; import { getCurrentItemParams, getData } from "./listViewUtils"; +import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; import { childrenToProps } from "@lowcoder-ee/comps/generators/multi"; import { AnimationStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants"; -const ListViewWrapper = styled.div<{ $style: any; $paddingWidth: string,$animationStyle:AnimationStyleType }>` +const ListViewWrapper = styled.div<{ $style: any; $paddingWidth: string,$animationStyle:AnimationStyleType, $autoHeight: boolean }>` height: 100%; + overflow: ${(props) => (!props.$autoHeight ? "scroll" : "hidden")}; border: 1px solid ${(props) => props.$style.border}; border-radius: ${(props) => props.$style.radius}; padding: 3px ${(props) => props.$paddingWidth}; rotate: ${(props) => props.$style.rotation}; background-color: ${(props) => props.$style.background}; ${props=>props.$animationStyle} + `; const FooterWrapper = styled.div` @@ -190,7 +193,7 @@ export function ListView(props: Props) { const horizontalGridCells = useMemo(() => children.horizontalGridCells.getView(), [children.horizontalGridCells]); const autoHeight = useMemo(() => children.autoHeight.getView(), [children.autoHeight]); const showHorizontalScrollbar = useMemo(() => children.showHorizontalScrollbar.getView(), [children.showHorizontalScrollbar]); - const showVerticalScrollbar = useMemo(() => children.showVerticalScrollbar.getView(), [children.showVerticalScrollbar]); + const showVerticalScrollbar = useMemo(() => children.showVerticalScrollbar.getView(), [children.showVerticalScrollbar]) const horizontal = useMemo(() => children.horizontal.getView(), [children.horizontal]); const minHorizontalWidth = useMemo(() => children.minHorizontalWidth.getView(), [children.minHorizontalWidth]); const noOfColumns = useMemo( @@ -284,12 +287,14 @@ export function ListView(props: Props) { const childrenProps = childrenToProps(comp.children); + useMergeCompStyles(childrenProps, comp.dispatch); + // log.debug("renders: ", renders); return ( - + - + { if (height) setListHeight(height); @@ -315,3 +320,4 @@ export function ListView(props: Props) { ); } + diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx index 2615f4ea7..9861d5a23 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx @@ -225,8 +225,6 @@ const TableWrapper = styled.div<{ border-left: unset; border-top: none !important; border-inline-start: none !important; - overflow-y:scroll; - height:300px; &::after { box-shadow: none !important; diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx index 510c4d795..a56747434 100644 --- a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx @@ -238,7 +238,7 @@ const TabbedContainer = (props: TabbedContainerProps) => { ); return { label, - key: tab.key, + key: tab.key, forceRender: true, children: ( @@ -259,7 +259,6 @@ const TabbedContainer = (props: TabbedContainerProps) => { }) return ( -
{
- ); }; @@ -466,3 +464,4 @@ export const TabbedContainerComp = withExposingConfigs(TabbedContainerImplComp, new NameConfig("selectedTabKey", trans("tabbedContainer.selectedTabKeyDesc")), NameConfigHidden, ]); + From 853ac34d791aa0753821830b61cfb18df444d306 Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Tue, 17 Sep 2024 13:05:03 +0500 Subject: [PATCH 15/15] final tweaks --- .../lowcoder/src/comps/comps/listViewComp/listView.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx index 153b95d92..5390db39b 100644 --- a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx +++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx @@ -22,9 +22,8 @@ import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; import { childrenToProps } from "@lowcoder-ee/comps/generators/multi"; import { AnimationStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants"; -const ListViewWrapper = styled.div<{ $style: any; $paddingWidth: string,$animationStyle:AnimationStyleType, $autoHeight: boolean }>` +const ListViewWrapper = styled.div<{ $style: any; $paddingWidth: string,$animationStyle:AnimationStyleType }>` height: 100%; - overflow: ${(props) => (!props.$autoHeight ? "scroll" : "hidden")}; border: 1px solid ${(props) => props.$style.border}; border-radius: ${(props) => props.$style.radius}; padding: 3px ${(props) => props.$paddingWidth}; @@ -42,7 +41,8 @@ const FooterWrapper = styled.div` `; const BodyWrapper = styled.div<{ $autoHeight: boolean }>` - height: ${(props) => (props.$autoHeight ? "100%" : "calc(100% - 32px)")}; + overflow: ${(props) => (!props.$autoHeight ? "auto" : "hidden")}; + height: ${(props) => (props.$autoHeight ? "auto" : "calc(100% - 32px)")}; `; const FlexWrapper = styled.div` @@ -60,7 +60,6 @@ const ListOrientationWrapper = styled.div<{ height: ${(props) => (props.$autoHeight ? "auto" : "100%")}; display: flex; flex-direction: ${(props) => (props.$isHorizontal ? "row" : "column")}; - height: 100%; `; type MinHorizontalWidthContextType = { @@ -292,7 +291,7 @@ export function ListView(props: Props) { // log.debug("renders: ", renders); return ( - +