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

Commitb081a7d

Browse files
authored
Merge pull request#535 from raheeliftikhar5/fixed-table-header
Fixed table header + Handle editor's right panel foldable section in search
2 parentsb4e12f2 +5e73943 commitb081a7d

File tree

8 files changed

+64
-14
lines changed

8 files changed

+64
-14
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,10 @@ export class TableImplComp extends TableInitComp implements IContainer {
5858
readonlyfilterData:RecordType[]=[];
5959
readonlycolumnAggrData:ColumnsAggrData={};
6060

61+
overrideautoHeight():boolean{
62+
returnthis.children.autoHeight.getView();
63+
}
64+
6165
privategetSlotContainer(){
6266
returnthis.children.expansion.children.slot.getSelectedComp().getComp().children.container;
6367
}

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

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,8 @@ const TableWrapper = styled.div<{
158158
$rowStyle:TableRowStyleType;
159159
toolbarPosition:"above"|"below"|"close";
160160
}>`
161-
overflow: hidden;
161+
max-height: 100%;
162+
overflow-y: auto;
162163
background: white;
163164
border: 1px solid #d7d9e0;
164165
@@ -275,6 +276,7 @@ const TableTd = styled.td<{
275276
border-color:${(props)=>props.$style.border} !important;
276277
border-width:${(props)=>props.$style.borderWidth} !important;
277278
border-radius:${(props)=>props.$style.radius};
279+
padding: 0 !important;
278280
279281
> div > div {
280282
color:${(props)=>props.$style.text};
@@ -362,6 +364,9 @@ type CustomTableProps<RecordType> = Omit<TableProps<RecordType>, "components" |
362364
viewModeResizable:boolean;
363365
rowColorFn:RowColorViewType;
364366
columnsStyle:TableColumnStyleType;
367+
fixedHeader:boolean;
368+
height?:number;
369+
autoHeight?:boolean;
365370
};
366371

367372
functionTableCellView(props:{
@@ -533,7 +538,12 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
533538
{...props}
534539
pagination={false}
535540
columns={columns}
536-
scroll={{x:COL_MIN_WIDTH*columns.length}}
541+
scroll={{
542+
x:COL_MIN_WIDTH*columns.length,
543+
y:props.fixedHeader&&props.height&&!props.autoHeight
544+
?`${props.height-100}px`
545+
:undefined,
546+
}}
537547
></Table>
538548
);
539549
}
@@ -546,10 +556,10 @@ export function TableCompView(props: {
546556
onDownload:(fileName:string)=>void;
547557
}){
548558
consteditorState=useContext(EditorContext);
549-
const{ width, ref}=useResizeDetector({
559+
const{ width,height,ref}=useResizeDetector({
550560
refreshMode:"debounce",
551561
refreshRate:600,
552-
handleHeight:false,
562+
handleHeight:true,
553563
});
554564
constviewMode=useUserViewMode();
555565
constcompName=useContext(CompNameContext);
@@ -574,6 +584,7 @@ export function TableCompView(props: {
574584
()=>compChildren.dynamicColumnConfig.getView(),
575585
[compChildren.dynamicColumnConfig]
576586
);
587+
constautoHeight=compChildren.autoHeight.getView();
577588
constcolumnsAggrData=comp.columnAggrData;
578589
constexpansion=useMemo(()=>compChildren.expansion.getView(),[compChildren.expansion]);
579590
constantdColumns=useMemo(
@@ -665,8 +676,8 @@ export function TableCompView(props: {
665676

666677
return(
667678
<BackgroundColorContext.Providervalue={style.background}>
679+
<divref={ref}style={{height:'100%'}}>
668680
<TableWrapper
669-
ref={ref}
670681
$style={style}
671682
$rowStyle={rowStyle}
672683
toolbarPosition={toolbar.position}
@@ -690,12 +701,15 @@ export function TableCompView(props: {
690701
onTableChange(pagination,filters,sorter,extra,comp.dispatch,onEvent);
691702
}}
692703
showHeader={!compChildren.hideHeader.getView()}
704+
fixedHeader={compChildren.fixedHeader.getView()}
693705
columns={antdColumns}
694706
columnsStyle={columnsStyle}
695707
viewModeResizable={compChildren.viewModeResizable.getView()}
696708
dataSource={pageDataInfo.data}
697709
size={compChildren.size.getView()}
698710
tableLayout="fixed"
711+
height={height}
712+
autoHeight={autoHeight}
699713
loading={
700714
loading||
701715
// fixme isLoading type
@@ -709,6 +723,7 @@ export function TableCompView(props: {
709723
{expansion.expandModalView}
710724
</SlotConfigContext.Provider>
711725
</TableWrapper>
726+
</div>
712727
</BackgroundColorContext.Provider>
713728
);
714729
}

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -429,6 +429,7 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
429429
<Sectionname={trans("prop.columns")}>{columnPropertyView(comp)}</Section>
430430
<Sectionname={sectionNames.layout}>
431431
{comp.children.expansion.getPropertyView()}
432+
{comp.children.autoHeight.getPropertyView()}
432433
{hiddenPropertyView(comp.children)}
433434
</Section>
434435
<Sectionname={trans("prop.rowSelection")}>
@@ -455,11 +456,15 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
455456
label:trans("table.tableSize"),
456457
radioButton:true,
457458
})}
459+
{comp.children.hideBordered.propertyView({
460+
label:trans("table.hideBordered"),
461+
})}
458462
{comp.children.hideHeader.propertyView({
459463
label:trans("table.hideHeader"),
460464
})}
461-
{comp.children.hideBordered.propertyView({
462-
label:trans("table.hideBordered"),
465+
{comp.children.fixedHeader.propertyView({
466+
label:trans("table.fixedHeader"),
467+
tooltip:trans("table.fixedHeaderTooltip")
463468
})}
464469
</Section>
465470
<Sectionname={"Row Style"}>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
BoolCodeControl,
77
ColorOrBoolCodeControl,
88
JSONObjectArrayControl,
9+
RadiusControl,
910
}from"comps/controls/codeControl";
1011
import{dropdownControl}from"comps/controls/dropdownControl";
1112
import{eventHandlerControl}from"comps/controls/eventHandlerControl";
@@ -32,6 +33,7 @@ import { JSONObject } from "util/jsonTypes";
3233
import{ExpansionControl}from"./expansionControl";
3334
import{PaginationControl}from"./paginationControl";
3435
import{SelectionControl}from"./selectionControl";
36+
import{AutoHeightControl}from"comps/controls/autoHeightControl";
3537

3638
constsizeOptions=[
3739
{
@@ -134,6 +136,8 @@ export type RowColorViewType = (param: {
134136
consttableChildrenMap={
135137
hideBordered:BoolControl,
136138
hideHeader:BoolControl,
139+
fixedHeader:BoolControl,
140+
autoHeight:withDefault(AutoHeightControl,"auto"),
137141
data:withIsLoadingMethod(JSONObjectArrayControl),
138142
showDataLoadSpinner:withDefault(BoolPureControl,true),
139143
columns:ColumnListComp,

‎client/packages/lowcoder/src/comps/hooks/screenInfoComp.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,16 @@ function useScreenInfo() {
4040
}
4141

4242
constgetScreenInfo=useCallback(()=>{
43-
const{width, height}=window.screen;
43+
const{innerWidth, innerHeight}=window;
4444
constdeviceType=getDeviceType();
4545
constflags=getFlagsByDeviceType(deviceType);
4646

47-
return{ width, height, deviceType, ...flags};
47+
return{
48+
width:innerWidth,
49+
height:innerHeight,
50+
deviceType,
51+
...flags
52+
};
4853
},[])
4954

5055
const[screenInfo,setScreenInfo]=useState<ScreenInfo>({});

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1248,6 +1248,8 @@ export const en = {
12481248
type:"Type",
12491249
tableSize:"Table size",
12501250
hideHeader:"Hide table header",
1251+
fixedHeader:"Fixed table header",
1252+
fixedHeaderTooltip:"Header will be fixed for vertically scrollable table",
12511253
hideBordered:"Hide column border",
12521254
deleteColumn:"Delete column",
12531255
confirmDeleteColumn:"Confirm delete column: ",

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1174,6 +1174,8 @@ table: {
11741174
type:"类型",
11751175
tableSize:"表格尺寸",
11761176
hideHeader:"隐藏表头",
1177+
fixedHeader:"固定表头",
1178+
fixedHeaderTooltip:"垂直滚动表格的标题将被固定",
11771179
hideBordered:"隐藏列边框",
11781180
deleteColumn:"删除列",
11791181
confirmDeleteColumn:"确认删除列:",

‎client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
RightPanelContentWrapper,
1414
}from"pages/editor/right/styledComponent";
1515
import{tableDragClassName}from"pages/tutorials/tutorialsConstant";
16-
importReact,{useContext,useMemo,useState}from"react";
16+
importReact,{useContext,useEffect,useMemo,useState}from"react";
1717
importstyledfrom"styled-components";
1818
import{
1919
BaseSection,
@@ -99,6 +99,7 @@ Object.keys(uiCompCategoryNames).forEach((cat) => {
9999
exportconstUICompPanel=()=>{
100100
const{ onDrag, searchValue}=useContext(RightContext);
101101
const[propertySectionState,setPropertySectionState]=useState<PropertySectionState>(initialState);
102+
const[searchedPropertySectionState,setSearchedPropertySectionState]=useState<PropertySectionState>({});
102103

103104
constcategories=useMemo(()=>{
104105
constcats:Record<string,[string,UICompManifest][]>=Object.fromEntries(
@@ -113,11 +114,18 @@ export const UICompPanel = () => {
113114
},[]);
114115

115116
constpropertySectionContextValue=useMemo<PropertySectionContextType>(()=>{
117+
conststate=searchValue
118+
?searchedPropertySectionState
119+
:propertySectionState;
120+
constsetStateFn=searchValue
121+
?setSearchedPropertySectionState
122+
:setPropertySectionState;
123+
116124
return{
117125
compName:stateCompName,
118-
state:propertySectionState,
126+
state,
119127
toggle:(compName:string,sectionName:string)=>{
120-
setPropertySectionState((oldState)=>{
128+
setStateFn((oldState)=>{
121129
constnextSectionState:PropertySectionState={ ...oldState};
122130
constcompState=nextSectionState[compName]||{};
123131
compState[sectionName]=compState[sectionName]===false;
@@ -126,7 +134,13 @@ export const UICompPanel = () => {
126134
});
127135
},
128136
};
129-
},[propertySectionState]);
137+
},[searchValue,propertySectionState,searchedPropertySectionState]);
138+
139+
useEffect(()=>{
140+
if(!searchValue){
141+
setSearchedPropertySectionState({})
142+
}
143+
},[searchValue])
130144

131145
constcompList=useMemo(
132146
()=>
@@ -187,7 +201,6 @@ export const UICompPanel = () => {
187201

188202
return(
189203
<RightPanelContentWrapper>
190-
{/* {compList.length > 0 ? compList : <EmptyCompContent />} */}
191204
<PropertySectionContext.Provider
192205
value={propertySectionContextValue}
193206
>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp