Skip to content

Commit aed6024

Browse files
MenamAfzalMenamAfzal
authored
Merge branch 'dev' into json-components-height
2 parents 80a46cc + 1f140ab commit aed6024

File tree

18 files changed

+224
-99
lines changed

18 files changed

+224
-99
lines changed

‎client/VERSION

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
2.4.4
1+
2.4.5

‎client/packages/lowcoder-comps/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "lowcoder-comps",
3-
"version": "2.4.10",
3+
"version": "2.4.11",
44
"type": "module",
55
"license": "MIT",
66
"dependencies": {

‎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-sdk/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "lowcoder-sdk",
3-
"version": "2.4.10",
3+
"version": "2.4.11",
44
"type": "module",
55
"files": [
66
"src",

‎client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,9 @@ export const getStyle = (
7878
.ant-select-selection-search {
7979
padding: ${style.padding};
8080
}
81-
.ant-select-selection-search-input {
81+
.ant-select-selection-search-input,
82+
.ant-select-selection-item,
83+
.ant-select-selection-item .option-label {
8284
font-family:${(style as SelectStyleType).fontFamily} !important;
8385
text-transform:${(style as SelectStyleType).textTransform} !important;
8486
text-decoration:${(style as SelectStyleType).textDecoration} !important;

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

Lines changed: 123 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
2828
import { PrimaryColor } from "constants/style";
2929
import { trans } from "i18n";
3030
import _ from "lodash";
31-
import { darkenColor, isDarkColor } from "lowcoder-design";
31+
import { darkenColor, isDarkColor, ScrollBar } from "lowcoder-design";
3232
import React, { Children, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
3333
import { Resizable } from "react-resizable";
3434
import styled, { css } from "styled-components";
@@ -43,6 +43,7 @@ import { CellColorViewType } from "./column/tableColumnComp";
4343
import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
4444
import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
4545
import { childrenToProps } from "@lowcoder-ee/comps/generators/multi";
46+
import { getVerticalMargin } from "@lowcoder-ee/util/cssUtil";
4647

4748

4849
function genLinerGradient(color: string) {
@@ -141,17 +142,43 @@ const TitleResizeHandle = styled.span`
141142
const BackgroundWrapper = styled.div<{
142143
$style: TableStyleType;
143144
$tableAutoHeight: boolean;
144-
}>`
145+
$showHorizontalScrollbar: boolean;
146+
$showVerticalScrollbar: boolean;
147+
$fixedToolbar: boolean;
148+
}>`
149+
display: flex;
150+
flex-direction: column;
145151
background: ${(props) => props.$style.background} !important;
146-
// border: ${(props) => `${props.$style.border} !important`};
147152
border-radius: ${(props) => props.$style.radius} !important;
148-
// padding: unset !important;
149153
padding: ${(props) => props.$style.padding} !important;
150154
margin: ${(props) => props.$style.margin} !important;
151-
overflow: scroll !important;
152155
border-style: ${(props) => props.$style.borderStyle} !important;
153156
border-width: ${(props) => `${props.$style.borderWidth} !important`};
154-
${(props) => props.$style}
157+
border-color: ${(props) => `${props.$style.border} !important`};
158+
height: calc(100% - ${(props) => getVerticalMargin(props.$style.margin.split(' '))});
159+
overflow: hidden;
160+
161+
> div.table-scrollbar-wrapper {
162+
overflow: auto;
163+
${(props) => props.$fixedToolbar && `height: auto`};
164+
165+
${(props) => (props.$showHorizontalScrollbar || props.$showVerticalScrollbar) && `
166+
.simplebar-content-wrapper {
167+
overflow: auto !important;
168+
}
169+
`}
170+
171+
${(props) => !props.$showHorizontalScrollbar && `
172+
div.simplebar-horizontal {
173+
visibility: hidden !important;
174+
}
175+
`}
176+
${(props) => !props.$showVerticalScrollbar && `
177+
div.simplebar-vertical {
178+
visibility: hidden !important;
179+
}
180+
`}
181+
}
155182
`;
156183

157184
// TODO: find a way to limit the calc function for max-height only to first Margin value
@@ -166,8 +193,6 @@ const TableWrapper = styled.div<{
166193
$visibleResizables: boolean;
167194
$showHRowGridBorder?: boolean;
168195
}>`
169-
overflow: unset !important;
170-
171196
.ant-table-wrapper {
172197
border-top: unset;
173198
border-color: inherit;
@@ -193,22 +218,18 @@ const TableWrapper = styled.div<{
193218
}
194219
195220
.ant-table {
196-
overflow-y:scroll;
197221
background: ${(props) =>props.$style.background};
198222
.ant-table-container {
199223
border-left: unset;
200224
border-top: none !important;
201225
border-inline-start: none !important;
202-
overflow-y:scroll;
203-
height:300px
204226
205227
&::after {
206228
box-shadow: none !important;
207229
}
208230
209231
.ant-table-content {
210-
overflow-y:scroll;
211-
overflow-x:scroll;
232+
overflow: unset !important
212233
}
213234
214235
// A table expand row contains table
@@ -220,21 +241,23 @@ const TableWrapper = styled.div<{
220241
border-top: unset;
221242
222243
> .ant-table-thead {
244+
${(props) =>
245+
props.$fixedHeader && `
246+
position: sticky;
247+
position: -webkit-sticky;
248+
// top: ${props.$fixedToolbar ? '47px' : '0'};
249+
top: 0;
250+
z-index: 99;
251+
`
252+
}
223253
> tr > th {
224254
background-color: ${(props) => props.$headerStyle.headerBackground};
225255
226256
border-color: ${(props) => props.$headerStyle.border};
227257
border-width: ${(props) => props.$headerStyle.borderWidth};
228258
color: ${(props) => props.$headerStyle.headerText};
229259
// border-inline-end: ${(props) => `${props.$headerStyle.borderWidth} solid ${props.$headerStyle.border}`} !important;
230-
${(props) =>
231-
props.$fixedHeader && `
232-
position: sticky;
233-
position: -webkit-sticky;
234-
top: ${props.$fixedToolbar ? '47px' : '0'};
235-
z-index: 99;
236-
`
237-
}
260+
238261
239262
> div {
240263
margin: ${(props) => props.$headerStyle.margin};
@@ -715,6 +738,8 @@ export function TableCompView(props: {
715738
const toolbarStyle = compChildren.toolbarStyle.getView();
716739
const rowAutoHeight = compChildren.rowAutoHeight.getView();
717740
const tableAutoHeight = comp.getTableAutoHeight();
741+
const showHorizontalScrollbar = compChildren.showHorizontalScrollbar.getView();
742+
const showVerticalScrollbar = compChildren.showVerticalScrollbar.getView();
718743
const visibleResizables = compChildren.visibleResizables.getView();
719744
const showHRowGridBorder = compChildren.showHRowGridBorder.getView();
720745
const columnsStyle = compChildren.columnsStyle.getView();
@@ -830,72 +855,88 @@ export function TableCompView(props: {
830855
return <EmptyContent text={trans("table.emptyColumns")} />;
831856
}
832857

858+
const hideScrollbar = !showHorizontalScrollbar && !showVerticalScrollbar;
833859
return (
834860
<BackgroundColorContext.Provider value={style.background} >
835-
<BackgroundWrapper ref={ref} $style={style} $tableAutoHeight={tableAutoHeight}>
836-
{toolbar.position === "above" && toolbarView}
837-
<TableWrapper
838-
$style={style}
839-
$rowStyle={rowStyle}
840-
$headerStyle={headerStyle}
841-
$toolbarStyle={toolbarStyle}
842-
$toolbarPosition={toolbar.position}
843-
$fixedHeader={compChildren.fixedHeader.getView()}
844-
$fixedToolbar={toolbar.fixedToolbar && toolbar.position === 'above'}
845-
$visibleResizables={visibleResizables}
846-
$showHRowGridBorder={showHRowGridBorder}
861+
<BackgroundWrapper
862+
ref={ref}
863+
$style={style}
864+
$tableAutoHeight={tableAutoHeight}
865+
$showHorizontalScrollbar={showHorizontalScrollbar}
866+
$showVerticalScrollbar={showVerticalScrollbar}
867+
$fixedToolbar={toolbar.fixedToolbar}
868+
>
869+
{toolbar.position === "above" && (toolbar.fixedToolbar || (tableAutoHeight && showHorizontalScrollbar)) && toolbarView}
870+
<ScrollBar
871+
className="table-scrollbar-wrapper"
872+
style={{ height: "100%", margin: "0px", padding: "0px" }}
873+
hideScrollbar={hideScrollbar}
874+
prefixNode={toolbar.position === "above" && !toolbar.fixedToolbar && !(tableAutoHeight && showHorizontalScrollbar) && toolbarView}
875+
suffixNode={toolbar.position === "below" && !toolbar.fixedToolbar && !(tableAutoHeight && showHorizontalScrollbar) && toolbarView}
847876
>
848-
<ResizeableTable<RecordType>
849-
expandable={{
850-
...expansion.expandableConfig,
851-
childrenColumnName: supportChildren
852-
? COLUMN_CHILDREN_KEY
853-
: "OB_CHILDREN_KEY_PLACEHOLDER",
854-
fixed: "left",
855-
onExpand: (expanded) => {
856-
if (expanded) {
857-
handleChangeEvent('rowExpand')
858-
} else {
859-
handleChangeEvent('rowShrink')
877+
<TableWrapper
878+
$style={style}
879+
$rowStyle={rowStyle}
880+
$headerStyle={headerStyle}
881+
$toolbarStyle={toolbarStyle}
882+
$toolbarPosition={toolbar.position}
883+
$fixedHeader={compChildren.fixedHeader.getView()}
884+
$fixedToolbar={toolbar.fixedToolbar && toolbar.position === 'above'}
885+
$visibleResizables={visibleResizables}
886+
$showHRowGridBorder={showHRowGridBorder}
887+
>
888+
<ResizeableTable<RecordType>
889+
expandable={{
890+
...expansion.expandableConfig,
891+
childrenColumnName: supportChildren
892+
? COLUMN_CHILDREN_KEY
893+
: "OB_CHILDREN_KEY_PLACEHOLDER",
894+
fixed: "left",
895+
onExpand: (expanded) => {
896+
if (expanded) {
897+
handleChangeEvent('rowExpand')
898+
} else {
899+
handleChangeEvent('rowShrink')
900+
}
860901
}
902+
}}
903+
rowColorFn={compChildren.rowColor.getView() as any}
904+
rowHeightFn={compChildren.rowHeight.getView() as any}
905+
{...compChildren.selection.getView()(onEvent)}
906+
bordered={compChildren.showRowGridBorder.getView()}
907+
onChange={(pagination, filters, sorter, extra) => {
908+
onTableChange(pagination, filters, sorter, extra, comp.dispatch, onEvent);
909+
}}
910+
showHeader={!compChildren.hideHeader.getView()}
911+
columns={antdColumns}
912+
columnsStyle={columnsStyle}
913+
viewModeResizable={compChildren.viewModeResizable.getView()}
914+
visibleResizables={compChildren.visibleResizables.getView()}
915+
dataSource={pageDataInfo.data}
916+
size={compChildren.size.getView()}
917+
rowAutoHeight={rowAutoHeight}
918+
tableLayout="fixed"
919+
loading={
920+
loading ||
921+
// fixme isLoading type
922+
(compChildren.showDataLoadSpinner.getView() &&
923+
(compChildren.data as any).isLoading()) ||
924+
compChildren.loading.getView()
861925
}
862-
}}
863-
rowColorFn={compChildren.rowColor.getView() as any}
864-
rowHeightFn={compChildren.rowHeight.getView() as any}
865-
{...compChildren.selection.getView()(onEvent)}
866-
bordered={compChildren.showRowGridBorder.getView()}
867-
onChange={(pagination, filters, sorter, extra) => {
868-
onTableChange(pagination, filters, sorter, extra, comp.dispatch, onEvent);
869-
}}
870-
showHeader={!compChildren.hideHeader.getView()}
871-
columns={antdColumns}
872-
columnsStyle={columnsStyle}
873-
viewModeResizable={compChildren.viewModeResizable.getView()}
874-
visibleResizables={compChildren.visibleResizables.getView()}
875-
dataSource={pageDataInfo.data}
876-
size={compChildren.size.getView()}
877-
rowAutoHeight={rowAutoHeight}
878-
tableLayout="fixed"
879-
loading={
880-
loading ||
881-
// fixme isLoading type
882-
(compChildren.showDataLoadSpinner.getView() &&
883-
(compChildren.data as any).isLoading()) ||
884-
compChildren.loading.getView()
885-
}
886-
onCellClick={(columnName: string, dataIndex: string) => {
887-
comp.children.selectedCell.dispatchChangeValueAction({
888-
name: columnName,
889-
dataIndex: dataIndex,
890-
});
891-
}}
892-
/>
893-
894-
<SlotConfigContext.Provider value={{ modalWidth: width && Math.max(width, 300) }}>
895-
{expansion.expandModalView}
896-
</SlotConfigContext.Provider>
897-
</TableWrapper>
898-
{toolbar.position === "below" && toolbarView}
926+
onCellClick={(columnName: string, dataIndex: string) => {
927+
comp.children.selectedCell.dispatchChangeValueAction({
928+
name: columnName,
929+
dataIndex: dataIndex,
930+
});
931+
}}
932+
/>
933+
934+
<SlotConfigContext.Provider value={{ modalWidth: width && Math.max(width, 300) }}>
935+
{expansion.expandModalView}
936+
</SlotConfigContext.Provider>
937+
</TableWrapper>
938+
</ScrollBar>
939+
{toolbar.position === "below" && (toolbar.fixedToolbar || (tableAutoHeight && showHorizontalScrollbar)) && toolbarView}
899940
</BackgroundWrapper>
900941

901942
</BackgroundColorContext.Provider>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -462,6 +462,12 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
462462
radioButton: true,
463463
})}
464464
{comp.children.autoHeight.getPropertyView()}
465+
{comp.children.showHorizontalScrollbar.propertyView({
466+
label: trans("prop.showHorizontalScrollbar"),
467+
})}
468+
{!comp.children.autoHeight.getView() && comp.children.showVerticalScrollbar.propertyView({
469+
label: trans("prop.showVerticalScrollbar"),
470+
})}
465471
{comp.children.fixedHeader.propertyView({
466472
label: trans("table.fixedHeader"),
467473
tooltip: trans("table.fixedHeaderTooltip")

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,8 @@ const tableChildrenMap = {
197197
hideHeader: BoolControl,
198198
fixedHeader: BoolControl,
199199
autoHeight: withDefault(AutoHeightControl, "auto"),
200+
showVerticalScrollbar: BoolControl,
201+
showHorizontalScrollbar: BoolControl,
200202
data: withIsLoadingMethod(JSONObjectArrayControl),
201203
showDataLoadSpinner: withDefault(BoolPureControl, true),
202204
columns: ColumnListComp,

‎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 = [

0 commit comments

Comments
 (0)