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

Commit1971a6e

Browse files
authored
Merge pull request#536 from lowcoder-org/feat-layout-mode-table
Dev to Feature
2 parentsbd3cf48 +a90b975 commit1971a6e

File tree

7 files changed

+57
-13
lines changed

7 files changed

+57
-13
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
@@ -61,6 +61,10 @@ export class TableImplComp extends TableInitComp implements IContainer {
6161
readonlyfilterData:RecordType[]=[];
6262
readonlycolumnAggrData:ColumnsAggrData={};
6363

64+
overrideautoHeight():boolean{
65+
returnthis.children.autoHeight.getView();
66+
}
67+
6468
privategetSlotContainer(){
6569
returnthis.children.expansion.children.slot.getSelectedComp().getComp().children.container;
6670
}

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

Lines changed: 20 additions & 6 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,11 +556,10 @@ export function TableCompView(props: {
546556
onDownload:(fileName:string)=>void;
547557
}){
548558
consteditorState=useContext(EditorContext);
549-
// const editorModeStatus = editorState.editorModeStatus;
550-
const{ width, ref}=useResizeDetector({
559+
const{ width, height, ref}=useResizeDetector({
551560
refreshMode:"debounce",
552561
refreshRate:600,
553-
handleHeight:false,
562+
handleHeight:true,
554563
});
555564
constviewMode=useUserViewMode();
556565
constcompName=useContext(CompNameContext);
@@ -575,6 +584,7 @@ export function TableCompView(props: {
575584
()=>compChildren.dynamicColumnConfig.getView(),
576585
[compChildren.dynamicColumnConfig]
577586
);
587+
constautoHeight=compChildren.autoHeight.getView();
578588
constcolumnsAggrData=comp.columnAggrData;
579589
constexpansion=useMemo(()=>compChildren.expansion.getView(),[compChildren.expansion]);
580590
constantdColumns=useMemo(
@@ -666,8 +676,8 @@ export function TableCompView(props: {
666676

667677
return(
668678
<BackgroundColorContext.Providervalue={style.background}>
679+
<divref={ref}style={{height:'100%'}}>
669680
<TableWrapper
670-
ref={ref}
671681
$style={style}
672682
$rowStyle={rowStyle}
673683
toolbarPosition={toolbar.position}
@@ -691,12 +701,15 @@ export function TableCompView(props: {
691701
onTableChange(pagination,filters,sorter,extra,comp.dispatch,onEvent);
692702
}}
693703
showHeader={!compChildren.hideHeader.getView()}
704+
fixedHeader={compChildren.fixedHeader.getView()}
694705
columns={antdColumns}
695706
columnsStyle={columnsStyle}
696707
viewModeResizable={compChildren.viewModeResizable.getView()}
697708
dataSource={pageDataInfo.data}
698709
size={compChildren.size.getView()}
699710
tableLayout="fixed"
711+
height={height}
712+
autoHeight={autoHeight}
700713
loading={
701714
loading||
702715
// fixme isLoading type
@@ -710,6 +723,7 @@ export function TableCompView(props: {
710723
{expansion.expandModalView}
711724
</SlotConfigContext.Provider>
712725
</TableWrapper>
726+
</div>
713727
</BackgroundColorContext.Provider>
714728
);
715729
}

‎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
StringControl,
1011
}from"comps/controls/codeControl";
1112
import{dropdownControl}from"comps/controls/dropdownControl";
@@ -33,6 +34,7 @@ import { JSONObject } from "util/jsonTypes";
3334
import{ExpansionControl}from"./expansionControl";
3435
import{PaginationControl}from"./paginationControl";
3536
import{SelectionControl}from"./selectionControl";
37+
import{AutoHeightControl}from"comps/controls/autoHeightControl";
3638

3739
constsizeOptions=[
3840
{
@@ -135,6 +137,8 @@ export type RowColorViewType = (param: {
135137
consttableChildrenMap={
136138
hideBordered:BoolControl,
137139
hideHeader:BoolControl,
140+
fixedHeader:BoolControl,
141+
autoHeight:withDefault(AutoHeightControl,"auto"),
138142
data:withIsLoadingMethod(JSONObjectArrayControl),
139143
showDataLoadSpinner:withDefault(BoolPureControl,true),
140144
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