Skip to content

Commit bd11687

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #1080 from MenamAfzal/fix/table-styles
Added Switch to show/hide scrollBar
2 parents 715ff05 + 1170d69 commit bd11687

File tree

11 files changed

+51
-28
lines changed

11 files changed

+51
-28
lines changed

‎client/packages/lowcoder-design/src/components/ScrollBar.tsx

+12-3
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,15 @@ import { DebouncedFunc } from 'lodash'; // Assuming you're using lodash's Deboun
55

66
// import 'simplebar-react/dist/simplebar.min.css';
77

8-
const ScrollBarWrapper = styled.div<{ $hideplaceholder?: boolean }>`
8+
const ScrollBarWrapper = styled.div<{
9+
$hideplaceholder?: boolean;
10+
$overflow?: string;
11+
}>`
912
min-height: 0;
10-
height: 100%;
13+
height: ${props => props.$overflow? props.$overflow === 'scroll' ? '300px' : '100%':'100%'
14+
};
1115
width: 100%;
16+
overflow:${props=>props.$overflow};
1217
1318
.simplebar-scrollbar::before {
1419
background: rgba(139, 143, 163, 0.5) !important;
@@ -37,7 +42,9 @@ const ScrollBarWrapper = styled.div<{ $hideplaceholder?: boolean }>`
3742
bottom: 10px;
3843
}
3944
40-
${props => Boolean(props.$hideplaceholder) && `
45+
${(props) =>
46+
Boolean(props.$hideplaceholder) &&
47+
`
4148
.simplebar-placeholder {
4249
display: none !important;
4350
}
@@ -50,6 +57,7 @@ interface IProps {
5057
children: React.ReactNode;
5158
className?: string;
5259
height?: string;
60+
overflow?:string,
5361
style?: React.CSSProperties; // Add this line to include a style prop
5462
scrollableNodeProps?: {
5563
onScroll: DebouncedFunc<(e: any) => void>;
@@ -64,6 +72,7 @@ export const ScrollBar = ({
6472
className,
6573
children,
6674
style,
75+
overflow,
6776
scrollableNodeProps,
6877
hideScrollbar = false,
6978
$hideplaceholder = false,

‎client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ function convertOldContainerParams(params: CompParams<any>) {
8181
// old params
8282
if (container && (container.hasOwnProperty("layout") || container.hasOwnProperty("items"))) {
8383
const autoHeight = tempParams.value.autoHeight;
84-
const scrollbars = tempParams.value.scrollbars;
84+
const scrollbars = tempParams.value.showVerticalScrollbar;
8585
return {
8686
...tempParams,
8787
value: {

‎client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx

+11-5
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
import { ContextContainerComp } from "./contextContainerComp";
1919
import { ListViewImplComp } from "./listViewComp";
2020
import { getCurrentItemParams, getData } from "./listViewUtils";
21+
import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
2122
import { childrenToProps } from "@lowcoder-ee/comps/generators/multi";
2223
import { AnimationStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants";
2324

@@ -29,6 +30,7 @@ const ListViewWrapper = styled.div<{ $style: any; $paddingWidth: string,$animati
2930
rotate: ${(props) => props.$style.rotation};
3031
background-color: ${(props) => props.$style.background};
3132
${props=>props.$animationStyle}
33+
3234
`;
3335

3436
const FooterWrapper = styled.div`
@@ -39,7 +41,8 @@ const FooterWrapper = styled.div`
3941
`;
4042

4143
const BodyWrapper = styled.div<{ $autoHeight: boolean }>`
42-
height: ${(props) => (props.$autoHeight ? "100%" : "calc(100% - 32px)")};
44+
overflow: ${(props) => (!props.$autoHeight ? "auto" : "hidden")};
45+
height: ${(props) => (props.$autoHeight ? "auto" : "calc(100% - 32px)")};
4346
`;
4447

4548
const FlexWrapper = styled.div`
@@ -56,8 +59,7 @@ const ListOrientationWrapper = styled.div<{
5659
}>`
5760
height: ${(props) => (props.$autoHeight ? "auto" : "100%")};
5861
display: flex;
59-
flex-direction: ${(props) => (props.$isHorizontal && !props.$isGrid ? "row" : "column")};
60-
height: 100%;
62+
flex-direction: ${(props) => (props.$isHorizontal ? "row" : "column")};
6163
`;
6264

6365
type MinHorizontalWidthContextType = {
@@ -189,7 +191,8 @@ export function ListView(props: Props) {
189191
);
190192
const horizontalGridCells = useMemo(() => children.horizontalGridCells.getView(), [children.horizontalGridCells]);
191193
const autoHeight = useMemo(() => children.autoHeight.getView(), [children.autoHeight]);
192-
const scrollbars = useMemo(() => children.scrollbars.getView(), [children.scrollbars]);
194+
const showHorizontalScrollbar = useMemo(() => children.showHorizontalScrollbar.getView(), [children.showHorizontalScrollbar]);
195+
const showVerticalScrollbar = useMemo(() => children.showVerticalScrollbar.getView(), [children.showVerticalScrollbar])
193196
const horizontal = useMemo(() => children.horizontal.getView(), [children.horizontal]);
194197
const minHorizontalWidth = useMemo(() => children.minHorizontalWidth.getView(), [children.minHorizontalWidth]);
195198
const noOfColumns = useMemo(
@@ -283,12 +286,14 @@ export function ListView(props: Props) {
283286

284287
const childrenProps = childrenToProps(comp.children);
285288

289+
useMergeCompStyles(childrenProps, comp.dispatch);
290+
286291
// log.debug("renders: ", renders);
287292
return (
288293
<BackgroundColorContext.Provider value={style.background}>
289294
<ListViewWrapper $style={style} $paddingWidth={paddingWidth} $animationStyle={animationStyle}>
290295
<BodyWrapper ref={ref} $autoHeight={autoHeight}>
291-
<ScrollBar style={{ height: autoHeight ? "auto" : "100%", margin: "0px", padding: "0px" }} hideScrollbar={!scrollbars}>
296+
<ScrollBar style={{ height: autoHeight ? "auto" : "100%", margin: "0px", padding: "0px" }} hideScrollbar={horizontal ? !showHorizontalScrollbar : !showVerticalScrollbar} overflow={autoHeight ? horizontal ? 'scroll' : 'hidden' : 'scroll'}>
292297
<ReactResizeDetector
293298
onResize={(width?: number, height?: number) => {
294299
if (height) setListHeight(height);
@@ -314,3 +319,4 @@ export function ListView(props: Props) {
314319
</BackgroundColorContext.Provider>
315320
);
316321
}
322+

‎client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@ const childrenMap = {
5050
heightUnitOfRow: withDefault(NumberControl, 1),
5151
container: ContextContainerComp,
5252
autoHeight: AutoHeightControl,
53+
showVerticalScrollbar: withDefault(BoolControl, false),
54+
showHorizontalScrollbar: withDefault(BoolControl, false),
5355
horizontalGridCells: SliderControl,
5456
scrollbars: withDefault(BoolControl, false),
5557
showBorder: BoolControl,

‎client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx

+8-3
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,14 @@ export function listPropertyView(compType: ListCompType) {
6565
label: trans('prop.horizontalGridCells'),
6666
})}
6767
{children.autoHeight.getPropertyView()}
68-
{(!children.autoHeight.getView() || children.horizontal.getView()) &&
69-
children.scrollbars.propertyView({
70-
label: trans("prop.scrollbar"),
68+
{(!children.autoHeight.getView()) && !children.horizontal.getView()&&
69+
children.showVerticalScrollbar.propertyView({
70+
label: trans("prop.showVerticalScrollbar"),
71+
}
72+
)}
73+
{(children.horizontal.getView()) &&
74+
children.showHorizontalScrollbar.propertyView({
75+
label: trans("prop.showHorizontalScrollbar"),
7176
}
7277
)}
7378
{children.horizontal.propertyView({

‎client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ export class PageLayoutComp extends layoutBaseComp implements IContainer {
158158
return [
159159
this.children.autoHeight.getPropertyView(),
160160
this.children.siderScrollbars.propertyView({ label: trans("prop.siderScrollbar")}),
161-
(!this.children.autoHeight.getView()) && this.children.contentScrollbars.propertyView({ label: trans("prop.contentScrollbar") }),
161+
(!this.children.autoHeight.getView()) && this.children.contentScrollbars.propertyView({ label: trans("prop.showVerticalScrollbar") }),
162162
];
163163
}
164164

‎client/packages/lowcoder/src/comps/comps/shapeComp/shapeTriContainer.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export function ShapeTriContainer(props: TriContainerProps) {
8888
// const { showHeader, showFooter } = container;
8989
// When the header and footer are not displayed, the body must be displayed
9090
const showBody = true;
91-
const scrollbars = container.scrollbars;
91+
const showVerticalScrollbar = container.showVerticalScrollbar;
9292

9393
const { items: bodyItems, ...otherBodyProps } =
9494
container.body["0"].children.view.getView();
@@ -120,7 +120,7 @@ export function ShapeTriContainer(props: TriContainerProps) {
120120
margin: "0px",
121121
padding: "0px",
122122
}}
123-
hideScrollbar={!scrollbars}
123+
hideScrollbar={!showVerticalScrollbar}
124124
>
125125
<div style={{ position: "relative", height: "100%" }}>
126126
<StylesShape

‎client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ const childrenMap = {
5353
1: { layout: {}, items: {} },
5454
}),
5555
autoHeight: AutoHeightControl,
56+
showVerticalScrollbar: withDefault(BoolControl, false),
5657
horizontalGridCells: SliderControl,
5758
scrollbars: withDefault(BoolControl, false),
5859
placement: withDefault(PositionControl, "top"),
@@ -237,11 +238,11 @@ const TabbedContainer = (props: TabbedContainerProps) => {
237238
);
238239
return {
239240
label,
240-
key: tab.key,
241+
key: tab.key,
241242
forceRender: true,
242243
children: (
243244
<BackgroundColorContext.Provider value={bodyStyle.background}>
244-
<ScrollBar style={{ height: props.autoHeight ? "100%" : "auto", margin: "0px", padding: "0px" }} hideScrollbar={!props.scrollbars}>
245+
<ScrollBar style={{ height: props.autoHeight ? "auto" : "100%", margin: "0px", padding: "0px" }} hideScrollbar={!props.showVerticalScrollbar} overflow={props.autoHeight ? 'hidden':'scroll'}>
245246
<ContainerInTab
246247
layout={containerProps.layout.getView()}
247248
items={gridItemCompToGridItems(containerProps.items.getView())}
@@ -258,8 +259,7 @@ const TabbedContainer = (props: TabbedContainerProps) => {
258259
})
259260

260261
return (
261-
<ScrollBar style={{ height: props.autoHeight ? "100%" : "auto", margin: "0px", padding: "0px" }} hideScrollbar={!props.scrollbars}>
262-
<div style={{padding: props.style.margin, height: props.autoHeight ? "100%" : "auto"}}>
262+
<div style={{padding: props.style.margin, height: props.autoHeight ? "auto" : "100%"}}>
263263
<BackgroundColorContext.Provider value={headerStyle.headerBackground}>
264264
<StyledTabs
265265
$animationStyle={props.animationStyle}
@@ -285,7 +285,6 @@ const TabbedContainer = (props: TabbedContainerProps) => {
285285
</StyledTabs>
286286
</BackgroundColorContext.Provider>
287287
</div>
288-
</ScrollBar>
289288
);
290289
};
291290

@@ -329,8 +328,8 @@ export const TabbedContainerBaseComp = (function () {
329328
})}
330329
{children.autoHeight.getPropertyView()}
331330
{!children.autoHeight.getView() && (
332-
children.scrollbars.propertyView({
333-
label: trans("prop.scrollbar"),
331+
children.showVerticalScrollbar.propertyView({
332+
label: trans("prop.showVerticalScrollbar"),
334333
})
335334
)}
336335
</Section>
@@ -465,3 +464,4 @@ export const TabbedContainerComp = withExposingConfigs(TabbedContainerImplComp,
465464
new NameConfig("selectedTabKey", trans("tabbedContainer.selectedTabKeyDesc")),
466465
NameConfigHidden,
467466
]);
467+

‎client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export function TriContainer(props: TriContainerProps) {
107107
const { showHeader, showFooter, horizontalGridCells } = container;
108108
// When the header and footer are not displayed, the body must be displayed
109109
const showBody = container.showBody || (!showHeader && !showFooter);
110-
const scrollbars = container.scrollbars;
110+
const showVerticalScrollbar = container.showVerticalScrollbar;
111111

112112
const { items: headerItems, ...otherHeaderProps } = container.header;
113113
const { items: bodyItems, ...otherBodyProps } = container.body["0"].children.view.getView();
@@ -151,7 +151,7 @@ export function TriContainer(props: TriContainerProps) {
151151
)}
152152
{showBody && (
153153
<BackgroundColorContext.Provider value={bodyStyle.background}>
154-
<ScrollBar style={{ height: container.autoHeight ? "auto" : "100%", margin: "0px", padding: "0px" }} hideScrollbar={!scrollbars}>
154+
<ScrollBar style={{ height: container.autoHeight ? "auto" : "100%", margin: "0px", padding: "0px" }} hideScrollbar={!showVerticalScrollbar} overflow={container.autoHeight?'hidden':'scroll'}>
155155
<BodyInnerGrid
156156
$showBorder={showHeader}
157157
{...otherBodyProps}

‎client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ const childrenMap = {
4040
showBody: BoolControl.DEFAULT_TRUE,
4141
showFooter: BoolControl,
4242
autoHeight: AutoHeightControl,
43+
showVerticalScrollbar: withDefault(BoolControl, false),
4344
horizontalGridCells: SliderControl,
4445
scrollbars: withDefault(BoolControl, false),
4546
style: withDefault(styleControl(ContainerStyle, 'style'),{borderWidth:'1px'}),
@@ -138,7 +139,7 @@ export class TriContainerComp extends TriContainerBaseComp implements IContainer
138139
heightPropertyView() {
139140
return [
140141
this.children.autoHeight.getPropertyView(),
141-
(!this.children.autoHeight.getView()) && this.children.scrollbars.propertyView({ label: trans("prop.scrollbar") })
142+
(!this.children.autoHeight.getView()) && this.children.showVerticalScrollbar.propertyView({ label: trans("prop.showVerticalScrollbar") })
142143
];
143144
}
144145

‎client/packages/lowcoder/src/i18n/locales/en.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,9 @@ export const en = {
199199
"toggleClose": "Enable Close Button",
200200
"showMask": "Show Mask",
201201
"textOverflow": "Text Overflow",
202-
"scrollbar": "Show Scrollbars",
202+
"scrollbar" : "Show Scrollbars",
203+
"showVerticalScrollbar" : "Show Vertical Scrollbar",
204+
"showHorizontalScrollbar" : "Show Horizontal Scrollbar",
203205
"siderScrollbar" : "Show Scrollbars in Sider",
204206
"siderRight" : "Show sider on the Right",
205207
"siderWidth" : "Sider Width",
@@ -221,8 +223,6 @@ export const en = {
221223
"preventOverwriting": "Prevent overwriting styles",
222224
"color": "Color",
223225
"horizontalGridCells": "Horizontal Grid Cells",
224-
"showHorizontalScrollbar": "Show Horizontal Scrollbar",
225-
"showVerticalScrollbar": "Show Vertical Scrollbar",
226226
"timeZone": "TimeZone",
227227
},
228228
"autoHeightProp": {

0 commit comments

Comments
 (0)