Skip to content

Commit 5c732d9

Browse files
author
FalkWolsky
committed
Introducing Layout / Logic Mode step 3 - Table
1 parent 7998c85 commit 5c732d9

File tree

5 files changed

+123
-62
lines changed

5 files changed

+123
-62
lines changed

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

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,9 @@ import { getSelectedRowKeys } from "./selectionControl";
5353
import { compTablePropertyView } from "./tablePropertyView";
5454
import { RowColorComp, TableChildrenView, TableInitComp } from "./tableTypes";
5555

56+
import { useContext } from "react";
57+
import { EditorContext } from "comps/editorState";
58+
5659
export class TableImplComp extends TableInitComp implements IContainer {
5760
private prevUnevaledValue?: string;
5861
readonly filterData: RecordType[] = [];
@@ -294,7 +297,7 @@ export class TableImplComp extends TableInitComp implements IContainer {
294297
filterNode() {
295298
const nodes = {
296299
data: this.sortDataNode(),
297-
searchValue: this.children.toolbar.children.searchText.node(),
300+
searchValue: this.children.searchText.node(),
298301
filter: this.children.toolbar.children.filter.node(),
299302
showFilter: this.children.toolbar.children.showFilter.node(),
300303
};
@@ -439,7 +442,20 @@ let TableTmpComp = withViewFn(TableImplComp, (comp) => {
439442
);
440443
});
441444

442-
TableTmpComp = withPropertyViewFn(TableTmpComp, compTablePropertyView);
445+
446+
const withEditorModeStatus = (Component:any) => (props:any) => {
447+
const editorModeStatus = useContext(EditorContext).editorModeStatus;
448+
return <Component {...props} editorModeStatus={editorModeStatus} />;
449+
};
450+
451+
// Use this HOC when defining TableTmpComp
452+
TableTmpComp = withPropertyViewFn(TableTmpComp, (comp) => withEditorModeStatus(compTablePropertyView)(comp));
453+
454+
// TableTmpComp = withPropertyViewFn(TableTmpComp, compTablePropertyView);
455+
456+
457+
458+
443459

444460
/**
445461
* Hijack children's execution events and ensure that selectedRow is modified first (you can also add a triggeredRow field).

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -466,7 +466,7 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
466466
const resizeWidth = (resizeData.index === index ? resizeData.width : col.width) ?? 0;
467467
let colWidth: number | string = "auto";
468468
let minWidth: number | string = COL_MIN_WIDTH;
469-
if (resizeWidth > 0) {
469+
if (typeof resizeWidth === "number" && resizeWidth > 0) {
470470
minWidth = "unset";
471471
colWidth = resizeWidth;
472472
} else {
@@ -546,6 +546,7 @@ export function TableCompView(props: {
546546
onDownload: (fileName: string) => void;
547547
}) {
548548
const editorState = useContext(EditorContext);
549+
// const editorModeStatus = editorState.editorModeStatus;
549550
const { width, ref } = useResizeDetector({
550551
refreshMode: "debounce",
551552
refreshRate: 600,

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

Lines changed: 98 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -397,78 +397,120 @@ function ColumnPropertyView<T extends MultiBaseComp<TableChildrenType>>(props: {
397397

398398
function columnPropertyView<T extends MultiBaseComp<TableChildrenType>>(comp: T) {
399399
const columnLabel = trans("table.columnNum");
400-
const dynamicColumn = comp.children.dynamicColumn.getView();
400+
// const dynamicColumn = comp.children.dynamicColumn.getView();
401401
return [
402402
controlItem(
403403
{ filterText: columnLabel },
404404
<ColumnPropertyView comp={comp} columnLabel={columnLabel} />
405405
),
406-
comp.children.dynamicColumn.propertyView({ label: trans("table.dynamicColumn") }),
406+
/* comp.children.dynamicColumn.propertyView({ label: trans("table.dynamicColumn") }),
407407
dynamicColumn &&
408408
comp.children.dynamicColumnConfig.propertyView({
409409
label: trans("table.dynamicColumnConfig"),
410410
tooltip: trans("table.dynamicColumnConfigDesc"),
411-
}),
411+
}), */
412412
];
413413
}
414414

415-
export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>>(comp: T) {
415+
export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType> & { editorModeStatus: string }>(comp: T) {
416+
const editorModeStatus = comp.editorModeStatus;
416417
const dataLabel = trans("data");
417418
return (
418419
<>
419-
<Section name={trans("data")}>
420-
{controlItem(
421-
{ filterText: dataLabel },
422-
<div className={tableDataDivClassName}>
423-
{comp.children.data.propertyView({
424-
label: dataLabel,
420+
{["logic", "both"].includes(editorModeStatus) && (
421+
<Section name={trans("table.dataDesc")}>
422+
{controlItem(
423+
{ filterText: dataLabel },
424+
<div className={tableDataDivClassName}>
425+
{comp.children.data.propertyView({
426+
label: dataLabel,
427+
})}
428+
</div>
429+
)}
430+
</Section>
431+
)}
432+
433+
{["layout", "both"].includes(editorModeStatus) && (
434+
<Section name={trans("prop.columns")}>
435+
{columnPropertyView(comp)}
436+
</Section>
437+
)}
438+
439+
{["logic", "both"].includes(editorModeStatus) && (
440+
<>
441+
<Section name={sectionNames.interaction}>
442+
{comp.children.onEvent.getPropertyView()}
443+
{comp.children.selection.getPropertyView()}
444+
{hiddenPropertyView(comp.children)}
445+
{loadingPropertyView(comp.children)}
446+
</Section>
447+
448+
<Section name={trans("prop.toolbar")}>
449+
{comp.children.toolbar.getPropertyView()}
450+
</Section>
451+
</>
452+
)}
453+
454+
{["layout", "both"].includes(editorModeStatus) && (
455+
<>
456+
<Section name={sectionNames.layout}>
457+
{comp.children.size.propertyView({
458+
label: trans("table.tableSize"),
459+
radioButton: true,
425460
})}
426-
</div>
427-
)}
428-
</Section>
429-
<Section name={trans("prop.columns")}>{columnPropertyView(comp)}</Section>
430-
<Section name={sectionNames.layout}>
431-
{comp.children.expansion.getPropertyView()}
432-
{hiddenPropertyView(comp.children)}
433-
</Section>
434-
<Section name={trans("prop.rowSelection")}>
435-
{comp.children.selection.getPropertyView()}
436-
</Section>
437-
<Section name={trans("prop.toolbar")}>{comp.children.toolbar.getPropertyView()}</Section>
438-
<Section name={trans("prop.pagination")}>
439-
{comp.children.pagination.getPropertyView()}
440-
</Section>
441-
<Section name={sectionNames.interaction}>
442-
{comp.children.onEvent.getPropertyView()}
443-
{loadingPropertyView(comp.children)}
444-
{comp.children.showDataLoadSpinner.propertyView({
445-
label: trans("table.showDataLoadSpinner"),
446-
})}
447-
{comp.children.viewModeResizable.propertyView({
448-
label: trans("table.viewModeResizable"),
449-
tooltip: trans("table.viewModeResizableTooltip"),
450-
})}
451-
</Section>
452-
<Section name={"Table Style"}>
453-
{comp.children.style.getPropertyView()}
454-
{comp.children.size.propertyView({
455-
label: trans("table.tableSize"),
456-
radioButton: true,
457-
})}
458-
{comp.children.hideHeader.propertyView({
459-
label: trans("table.hideHeader"),
460-
})}
461-
{comp.children.hideBordered.propertyView({
462-
label: trans("table.hideBordered"),
463-
})}
464-
</Section>
465-
<Section name={"Row Style"}>
466-
{comp.children.rowStyle.getPropertyView()}
467-
{comp.children.rowColor.getPropertyView()}
468-
</Section>
469-
<Section name={"Column Style"}>
470-
{comp.children.columnsStyle.getPropertyView()}
471-
</Section>
461+
{comp.children.hideHeader.propertyView({
462+
label: trans("table.hideHeader"),
463+
})}
464+
{comp.children.hideBordered.propertyView({
465+
label: trans("table.hideBordered"),
466+
})}
467+
{comp.children.viewModeResizable.propertyView({
468+
label: trans("table.viewModeResizable"),
469+
tooltip: trans("table.viewModeResizableTooltip"),
470+
})}
471+
</Section>
472+
<Section name={trans("prop.pagination")}>
473+
{comp.children.pagination.getPropertyView()}
474+
</Section>
475+
</>
476+
)}
477+
478+
{["logic", "both"].includes(editorModeStatus) && (
479+
<>
480+
<Section name={sectionNames.advanced}>
481+
{comp.children.expansion.getPropertyView()}
482+
{comp.children.showDataLoadSpinner.propertyView({
483+
label: trans("table.showDataLoadSpinner"),
484+
})}
485+
{comp.children.dynamicColumn.propertyView({ label: trans("table.dynamicColumn") })}
486+
{comp.children.dynamicColumn.getView() &&
487+
comp.children.dynamicColumnConfig.propertyView({
488+
label: trans("table.dynamicColumnConfig"),
489+
tooltip: trans("table.dynamicColumnConfigDesc"),
490+
})}
491+
{comp.children.searchText.propertyView({
492+
label: trans("table.searchText"),
493+
tooltip: trans("table.searchTextTooltip"),
494+
placeholder: "{{input1.value}}",
495+
})}
496+
</Section>
497+
</>
498+
)}
499+
500+
{["layout", "both"].includes(editorModeStatus) && (
501+
<><Section name={"Table Style"}>
502+
{comp.children.style.getPropertyView()}
503+
504+
</Section>
505+
<Section name={"Row Style"}>
506+
{comp.children.rowStyle.getPropertyView()}
507+
{comp.children.rowColor.getPropertyView()}
508+
</Section>
509+
<Section name={"Column Style"}>
510+
{comp.children.columnsStyle.getPropertyView()}
511+
</Section>
512+
</>
513+
)}
472514
</>
473515
);
474516
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -539,7 +539,7 @@ export const TableToolbarComp = (function () {
539539
showDownload: BoolControl,
540540
showFilter: BoolControl,
541541
columnSetting: BoolControl,
542-
searchText: StringControl,
542+
// searchText: StringControl,
543543
filter: stateComp<TableFilter>({ stackType: "and", filters: [] }),
544544
position: dropdownControl(positionOptions, "below"),
545545
};
@@ -567,11 +567,11 @@ export const TableToolbarComp = (function () {
567567
children.showRefresh.propertyView({ label: trans("table.showRefresh") }),
568568
children.showDownload.propertyView({ label: trans("table.showDownload") }),
569569
children.columnSetting.propertyView({ label: trans("table.columnSetting") }),
570-
children.searchText.propertyView({
570+
/* children.searchText.propertyView({
571571
label: trans("table.searchText"),
572572
tooltip: trans("table.searchTextTooltip"),
573573
placeholder: "{{input1.value}}",
574-
}),
574+
}), */
575575
])
576576
.build();
577577
})();

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
BoolCodeControl,
77
ColorOrBoolCodeControl,
88
JSONObjectArrayControl,
9+
StringControl,
910
} from "comps/controls/codeControl";
1011
import { dropdownControl } from "comps/controls/dropdownControl";
1112
import { eventHandlerControl } from "comps/controls/eventHandlerControl";
@@ -144,6 +145,7 @@ const tableChildrenMap = {
144145
toolbar: TableToolbarComp,
145146
style: styleControl(TableStyle),
146147
rowStyle: styleControl(TableRowStyle),
148+
searchText: StringControl,
147149
columnsStyle: withDefault(styleControl(TableColumnStyle), {radius: '0px'}),
148150
viewModeResizable: BoolControl,
149151
// sample data for regenerating columns

0 commit comments

Comments
 (0)