Movatterモバイル変換

[0]ホーム
URL:

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

Commita8f49d0

Browse files
added horizontal/vertical scrollbar switches
1 parentc7f2c54 commita8f49d0

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

7478
returnhideScrollbar ?(
7579
<ScrollBarWrapperclassName={className}>
80+
{prefixNode}
7681
{children}
82+
{suffixNode}
7783
</ScrollBarWrapper>
7884
) :(
7985
<ScrollBarWrapperclassName={className}>
8086
<SimpleBarstyle={combinedStyle}scrollableNodeProps={scrollableNodeProps}{...otherProps}>
81-
{children}
87+
{({ scrollableNodeProps, contentNodeProps})=>{
88+
return(
89+
<div{...scrollableNodePropsasany}>
90+
{prefixNode}
91+
<div{...contentNodePropsasany}>
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
constBackgroundWrapper=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.Providervalue={style.background}>
845-
<BackgroundWrapperref={ref}$style={style}$tableAutoHeight={tableAutoHeight}>
846-
{/* <div style={{
847-
overflowY: 'auto',
848-
maxHeight: '100%',
849-
}}> */}
850-
<ScrollBarstyle={{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
]asconst;
15171516

15181517
exportconstTableRowStyle=[

‎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":"Showhorizontal scrollbar",
224-
"showVerticalScrollbar":"Showvertical scrollbar",
223+
"showHorizontalScrollbar":"ShowHorizontal Scrollbar",
224+
"showVerticalScrollbar":"ShowVertical 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)
[8]ページ先頭
©2009-2025 Movatter.jp