Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a8f49d0

Browse files
added horizontal/vertical scrollbar switches
1 parent c7f2c54 commit a8f49d0

File tree

7 files changed

+64
-26
lines changed

7 files changed

+64
-26
lines changed

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

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,8 @@ interface IProps {
5656
};
5757
$hideplaceholder?: boolean;
5858
hideScrollbar?: boolean;
59+
prefixNode?: React.ReactNode;
60+
suffixNode?: React.ReactNode;
5961
}
6062

6163
export const ScrollBar = ({
@@ -65,6 +67,8 @@ export const ScrollBar = ({
6567
scrollableNodeProps,
6668
hideScrollbar = false,
6769
$hideplaceholder = false,
70+
prefixNode,
71+
suffixNode,
6872
...otherProps
6973
}: IProps) => {
7074
const height = style?.height ?? '100%';
@@ -73,12 +77,24 @@ export const ScrollBar = ({
7377

7478
return hideScrollbar ? (
7579
<ScrollBarWrapper className={className}>
80+
{prefixNode}
7681
{children}
82+
{suffixNode}
7783
</ScrollBarWrapper>
7884
) : (
7985
<ScrollBarWrapper className={className}>
8086
<SimpleBar style={combinedStyle} scrollableNodeProps={scrollableNodeProps} {...otherProps}>
81-
{children}
87+
{({ scrollableNodeProps, contentNodeProps }) => {
88+
return (
89+
<div {...scrollableNodeProps as any}>
90+
{prefixNode}
91+
<div {...contentNodeProps as any}>
92+
{children}
93+
</div>
94+
{suffixNode}
95+
</div>
96+
);
97+
}}
8298
</SimpleBar>
8399
</ScrollBarWrapper>
84100
);

‎client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx

Lines changed: 39 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -142,20 +142,35 @@ const TitleResizeHandle = styled.span`
142142
const BackgroundWrapper = styled.div<{
143143
$style: TableStyleType;
144144
$tableAutoHeight: boolean;
145-
}>`
145+
$showHorizontalScrollbar: boolean;
146+
$showVerticalScrollbar: boolean;
147+
}>`
148+
display: flex;
149+
flex-direction: column;
146150
background: ${(props) => props.$style.background} !important;
147-
// border: ${(props) => `${props.$style.border} !important`};
148151
border-radius: ${(props) => props.$style.radius} !important;
149-
// padding: unset !important;
150152
padding: ${(props) => props.$style.padding} !important;
151153
margin: ${(props) => props.$style.margin} !important;
152-
// overflow: scroll !important;
153154
border-style: ${(props) => props.$style.borderStyle} !important;
154155
border-width: ${(props) => `${props.$style.borderWidth} !important`};
155156
border-color: ${(props) => `${props.$style.border} !important`};
156157
height: calc(100% - ${(props) => getVerticalMargin(props.$style.margin.split(' '))});
157-
// overflow-y: auto;
158-
// ${(props) => props.$style}
158+
overflow: hidden;
159+
160+
> div.table-scrollbar-wrapper {
161+
height: auto;
162+
overflow: auto;
163+
${(props) => !props.$showHorizontalScrollbar && `
164+
div.simplebar-horizontal {
165+
visibility: hidden !important;
166+
}
167+
`}
168+
${(props) => !props.$showVerticalScrollbar && `
169+
div.simplebar-vertical {
170+
visibility: hidden !important;
171+
}
172+
`}
173+
}
159174
`;
160175

161176
// TODO: find a way to limit the calc function for max-height only to first Margin value
@@ -231,7 +246,8 @@ const TableWrapper = styled.div<{
231246
props.$fixedHeader && `
232247
position: sticky;
233248
position: -webkit-sticky;
234-
top: ${props.$fixedToolbar ? '47px' : '0'};
249+
// top: ${props.$fixedToolbar ? '47px' : '0'};
250+
top: 0;
235251
z-index: 99;
236252
`
237253
}
@@ -842,13 +858,21 @@ export function TableCompView(props: {
842858

843859
return (
844860
<BackgroundColorContext.Provider value={style.background} >
845-
<BackgroundWrapper ref={ref} $style={style} $tableAutoHeight={tableAutoHeight}>
846-
{/* <div style={{
847-
overflowY: 'auto',
848-
maxHeight: '100%',
849-
}}> */}
850-
<ScrollBar style={{ height: "100%", margin: "0px", padding: "0px" }} hideScrollbar={!showVerticalScrollbar}>
851-
{toolbar.position === "above" && toolbarView}
861+
<BackgroundWrapper
862+
ref={ref}
863+
$style={style}
864+
$tableAutoHeight={tableAutoHeight}
865+
$showHorizontalScrollbar={showHorizontalScrollbar}
866+
$showVerticalScrollbar={showVerticalScrollbar}
867+
>
868+
{toolbar.position === "above" && toolbar.fixedToolbar && toolbarView}
869+
<ScrollBar
870+
className="table-scrollbar-wrapper"
871+
style={{ height: "100%", margin: "0px", padding: "0px" }}
872+
hideScrollbar={!showHorizontalScrollbar && !showVerticalScrollbar}
873+
prefixNode={toolbar.position === "above" && !toolbar.fixedToolbar && toolbarView}
874+
suffixNode={toolbar.position === "below" && !toolbar.fixedToolbar && toolbarView}
875+
>
852876
<TableWrapper
853877
$style={style}
854878
$rowStyle={rowStyle}
@@ -910,9 +934,8 @@ export function TableCompView(props: {
910934
{expansion.expandModalView}
911935
</SlotConfigContext.Provider>
912936
</TableWrapper>
913-
{toolbar.position === "below" && toolbarView}
914937
</ScrollBar>
915-
{/* </div> */}
938+
{toolbar.position==="below"&&toolbar.fixedToolbar&&toolbarView}
916939
</BackgroundWrapper>
917940

918941
</BackgroundColorContext.Provider>

‎client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1512,7 +1512,6 @@ export const TableHeaderStyle = [
15121512
},
15131513
TEXT_SIZE,
15141514
TEXT_WEIGHT,
1515-
FONT_FAMILY,
15161515
] as const;
15171516

15181517
export const TableRowStyle = [

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -200,8 +200,8 @@ export const de: typeof en = {
200200
"className": "Klasse",
201201
"dataTestId": "Test ID",
202202
"horizontalGridCells": "Horizontale Gitterzellen",
203-
"showHorizontalScrollbar": "Show horizontal scrollbar",
204-
"showVerticalScrollbar": "Show vertical scrollbar",
203+
"showHorizontalScrollbar": "Horizontale Bildlaufleiste anzeigen",
204+
"showVerticalScrollbar": "Vertikale Bildlaufleiste anzeigen",
205205
},
206206
"autoHeightProp": {
207207
...en.autoHeightProp,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -220,8 +220,8 @@ export const en = {
220220
"preventOverwriting": "Prevent overwriting styles",
221221
"color": "Color",
222222
"horizontalGridCells": "Horizontal Grid Cells",
223-
"showHorizontalScrollbar": "Show horizontal scrollbar",
224-
"showVerticalScrollbar": "Show vertical scrollbar",
223+
"showHorizontalScrollbar": "Show Horizontal Scrollbar",
224+
"showVerticalScrollbar": "Show Vertical Scrollbar",
225225
},
226226
"autoHeightProp": {
227227
"auto": "Auto",

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -231,8 +231,8 @@ export const pt: typeof en = {
231231
"className": "Nome da Classe CSS",
232232
"dataTestId": "ID Individual",
233233
"horizontalGridCells": "Células de grade horizontal",
234-
"showHorizontalScrollbar": "Show horizontal scrollbar",
235-
"showVerticalScrollbar": "Show vertical scrollbar",
234+
"showHorizontalScrollbar": "Mostrar barra de rolagem horizontal",
235+
"showVerticalScrollbar": "Mostrar barra de rolagem vertical",
236236
},
237237
"autoHeightProp": {
238238
...en.autoHeightProp,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -220,8 +220,8 @@ export const zh: typeof en = {
220220
"horizontal": "水平",
221221
"minHorizontalWidth": "最小水平宽度",
222222
"horizontalGridCells": "水平网格单元",
223-
"showHorizontalScrollbar": "Show horizontal scrollbar",
224-
"showVerticalScrollbar": "Show vertical scrollbar",
223+
"showHorizontalScrollbar": "显示水平滚动条",
224+
"showVerticalScrollbar": "显示垂直滚动条",
225225
},
226226

227227
autoHeightProp: {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /