diff --git a/client/packages/lowcoder-design/src/components/ScrollBar.tsx b/client/packages/lowcoder-design/src/components/ScrollBar.tsx index e4a08601e..9443d38a2 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>; @@ -64,6 +72,7 @@ export const ScrollBar = ({ className, children, style, + overflow, scrollableNodeProps, hideScrollbar = false, $hideplaceholder = false, 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/listViewComp/listView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx index 937195f7d..5390db39b 100644 --- a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx +++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx @@ -18,6 +18,7 @@ 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"; @@ -29,6 +30,7 @@ const ListViewWrapper = styled.div<{ $style: any; $paddingWidth: string,$animati rotate: ${(props) => props.$style.rotation}; background-color: ${(props) => props.$style.background}; ${props=>props.$animationStyle} + `; const FooterWrapper = styled.div` @@ -39,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` @@ -56,8 +59,7 @@ const ListOrientationWrapper = styled.div<{ }>` height: ${(props) => (props.$autoHeight ? "auto" : "100%")}; display: flex; - flex-direction: ${(props) => (props.$isHorizontal && !props.$isGrid ? "row" : "column")}; - height: 100%; + flex-direction: ${(props) => (props.$isHorizontal ? "row" : "column")}; `; type MinHorizontalWidthContextType = { @@ -189,7 +191,8 @@ export function ListView(props: Props) { ); const horizontalGridCells = useMemo(() => children.horizontalGridCells.getView(), [children.horizontalGridCells]); 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( @@ -283,12 +286,14 @@ export function ListView(props: Props) { const childrenProps = childrenToProps(comp.children); + useMergeCompStyles(childrenProps, comp.dispatch); + // log.debug("renders: ", renders); return ( - + { if (height) setListHeight(height); @@ -314,3 +319,4 @@ export function ListView(props: Props) { ); } + diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx index 35a1ff72f..cd9644997 100644 --- a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx @@ -50,6 +50,8 @@ const childrenMap = { heightUnitOfRow: withDefault(NumberControl, 1), container: ContextContainerComp, autoHeight: AutoHeightControl, + showVerticalScrollbar: withDefault(BoolControl, false), + showHorizontalScrollbar: withDefault(BoolControl, false), horizontalGridCells: SliderControl, scrollbars: withDefault(BoolControl, false), showBorder: BoolControl, diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx index 0df18ff28..15e10968a 100644 --- a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx +++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx @@ -65,9 +65,14 @@ export function listPropertyView(compType: ListCompType) { label: trans('prop.horizontalGridCells'), })} {children.autoHeight.getPropertyView()} - {(!children.autoHeight.getView() || children.horizontal.getView()) && - children.scrollbars.propertyView({ - label: trans("prop.scrollbar"), + {(!children.autoHeight.getView()) && !children.horizontal.getView()&& + children.showVerticalScrollbar.propertyView({ + label: trans("prop.showVerticalScrollbar"), + } + )} + {(children.horizontal.getView()) && + children.showHorizontalScrollbar.propertyView({ + label: trans("prop.showHorizontalScrollbar"), } )} {children.horizontal.propertyView({ diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx index b5593a40d..f5929c7f6 100644 --- a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx @@ -158,7 +158,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") }), ]; } diff --git a/client/packages/lowcoder/src/comps/comps/shapeComp/shapeTriContainer.tsx b/client/packages/lowcoder/src/comps/comps/shapeComp/shapeTriContainer.tsx index 45dd88a77..181b89887 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(); @@ -120,7 +120,7 @@ export function ShapeTriContainer(props: TriContainerProps) { margin: "0px", padding: "0px", }} - hideScrollbar={!scrollbars} + hideScrollbar={!showVerticalScrollbar} >
{ ); return { label, - key: tab.key, + key: tab.key, forceRender: true, children: ( - + { }) return ( - -
+
{
- ); }; @@ -329,8 +328,8 @@ export const TabbedContainerBaseComp = (function () { })} {children.autoHeight.getPropertyView()} {!children.autoHeight.getView() && ( - children.scrollbars.propertyView({ - label: trans("prop.scrollbar"), + children.showVerticalScrollbar.propertyView({ + label: trans("prop.showVerticalScrollbar"), }) )} @@ -465,3 +464,4 @@ export const TabbedContainerComp = withExposingConfigs(TabbedContainerImplComp, new NameConfig("selectedTabKey", trans("tabbedContainer.selectedTabKeyDesc")), NameConfigHidden, ]); + diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx index 340651b63..e9ba0b991 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, horizontalGridCells } = 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(); @@ -151,7 +151,7 @@ export function TriContainer(props: TriContainerProps) { )} {showBody && ( - +