From 38fe46fa253ef57968a818cbf5f1a344f9c5934c Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Thu, 30 Nov 2023 14:15:41 +0500 Subject: [PATCH 1/5] feat: fixed header option --- .../src/comps/comps/tableComp/tableCompView.tsx | 10 +++++++++- .../comps/comps/tableComp/tablePropertyView.tsx | 14 ++++++++++++-- .../src/comps/comps/tableComp/tableTypes.tsx | 3 +++ client/packages/lowcoder/src/i18n/locales/en.ts | 4 ++++ client/packages/lowcoder/src/i18n/locales/zh.ts | 4 ++++ 5 files changed, 32 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx index e43e45999..d43a13fd1 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx @@ -275,6 +275,7 @@ const TableTd = styled.td<{ border-color: ${(props) => props.$style.border} !important; border-width: ${(props) => props.$style.borderWidth} !important; border-radius: ${(props) => props.$style.radius}; + padding: 0 !important; > div > div { color: ${(props) => props.$style.text}; @@ -362,6 +363,8 @@ type CustomTableProps = Omit, "components" | viewModeResizable: boolean; rowColorFn: RowColorViewType; columnsStyle: TableColumnStyleType; + fixedHeader: boolean; + maxHeight: string; }; function TableCellView(props: { @@ -533,7 +536,10 @@ function ResizeableTable(props: CustomTableProps ); } @@ -690,6 +696,8 @@ export function TableCompView(props: { onTableChange(pagination, filters, sorter, extra, comp.dispatch, onEvent); }} showHeader={!compChildren.hideHeader.getView()} + fixedHeader={compChildren.fixedHeader.getView()} + maxHeight={compChildren.maxHeight.getView()} columns={antdColumns} columnsStyle={columnsStyle} viewModeResizable={compChildren.viewModeResizable.getView()} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx index 199bf1231..9a50c348b 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx @@ -455,12 +455,22 @@ export function compTablePropertyView label: trans("table.tableSize"), radioButton: true, })} + {comp.children.hideBordered.propertyView({ + label: trans("table.hideBordered"), + })} {comp.children.hideHeader.propertyView({ label: trans("table.hideHeader"), })} - {comp.children.hideBordered.propertyView({ - label: trans("table.hideBordered"), + {comp.children.fixedHeader.propertyView({ + label: trans("table.fixedHeader"), + tooltip: trans("table.fixedHeaderTooltip") })} + {comp.children.fixedHeader.getView() && + comp.children.maxHeight.propertyView({ + label: trans("table.maxHeight"), + tooltip: trans("table.maxHeightTooltip") + }) + }
{comp.children.rowStyle.getPropertyView()} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx index e2f4c9acb..4e65c22d4 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx @@ -6,6 +6,7 @@ import { BoolCodeControl, ColorOrBoolCodeControl, JSONObjectArrayControl, + RadiusControl, } from "comps/controls/codeControl"; import { dropdownControl } from "comps/controls/dropdownControl"; import { eventHandlerControl } from "comps/controls/eventHandlerControl"; @@ -134,6 +135,8 @@ export type RowColorViewType = (param: { const tableChildrenMap = { hideBordered: BoolControl, hideHeader: BoolControl, + fixedHeader: BoolControl, + maxHeight: withDefault(RadiusControl, '300px'), data: withIsLoadingMethod(JSONObjectArrayControl), showDataLoadSpinner: withDefault(BoolPureControl, true), columns: ColumnListComp, diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index c0fac1d18..8bbe20966 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -1248,6 +1248,10 @@ export const en = { type: "Type", tableSize: "Table size", hideHeader: "Hide table header", + fixedHeader: "Fixed table header", + fixedHeaderTooltip: "Header will be fixed for vertically scrollable table", + maxHeight: "Max. Height", + maxHeightTooltip: "Set max. height to make table scrollable", hideBordered: "Hide column border", deleteColumn: "Delete column", confirmDeleteColumn: "Confirm delete column: ", diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts index 05c31c38e..e95346b3f 100644 --- a/client/packages/lowcoder/src/i18n/locales/zh.ts +++ b/client/packages/lowcoder/src/i18n/locales/zh.ts @@ -1174,6 +1174,10 @@ table: { type: "类型", tableSize: "表格尺寸", hideHeader: "隐藏表头", + fixedHeader: "固定表头", + fixedHeaderTooltip: "垂直滚动表格的标题将被固定", + maxHeight: "最大限度。高度", + maxHeightTooltip: "设置最大值使表格可滚动的高度", hideBordered: "隐藏列边框", deleteColumn: "删除列", confirmDeleteColumn: "确认删除列:", From 2bf6d87735c48a083a08e234477129b9c6d2a287 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Thu, 30 Nov 2023 14:19:26 +0500 Subject: [PATCH 2/5] fix: use window inner width instead of screen width --- .../packages/lowcoder/src/comps/hooks/screenInfoComp.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/hooks/screenInfoComp.tsx b/client/packages/lowcoder/src/comps/hooks/screenInfoComp.tsx index 6d983b265..00d0fceec 100644 --- a/client/packages/lowcoder/src/comps/hooks/screenInfoComp.tsx +++ b/client/packages/lowcoder/src/comps/hooks/screenInfoComp.tsx @@ -40,11 +40,16 @@ function useScreenInfo() { } const getScreenInfo = useCallback(() => { - const { width, height } = window.screen; + const { innerWidth, innerHeight } = window; const deviceType = getDeviceType(); const flags = getFlagsByDeviceType(deviceType); - return { width, height, deviceType, ...flags }; + return { + width: innerWidth, + height: innerHeight, + deviceType, + ...flags + }; }, []) const [screenInfo, setScreenInfo] = useState({}); From fe1affed2e14d874e7b717b7fae994e0c9b1a317 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Thu, 30 Nov 2023 15:07:52 +0500 Subject: [PATCH 3/5] fix: show component sectios open in right panel in search state --- .../src/pages/editor/right/uiCompPanel.tsx | 23 +++++++++++++++---- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx b/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx index 1b854f7cf..a63b04af0 100644 --- a/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx +++ b/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx @@ -13,7 +13,7 @@ import { RightPanelContentWrapper, } from "pages/editor/right/styledComponent"; import { tableDragClassName } from "pages/tutorials/tutorialsConstant"; -import React, { useContext, useMemo, useState } from "react"; +import React, { useContext, useEffect, useMemo, useState } from "react"; import styled from "styled-components"; import { BaseSection, @@ -99,6 +99,7 @@ Object.keys(uiCompCategoryNames).forEach((cat) => { export const UICompPanel = () => { const { onDrag, searchValue } = useContext(RightContext); const [propertySectionState, setPropertySectionState] = useState(initialState); + const [searchedPropertySectionState, setSearchedPropertySectionState] = useState({}); const categories = useMemo(() => { const cats: Record = Object.fromEntries( @@ -113,11 +114,18 @@ export const UICompPanel = () => { }, []); const propertySectionContextValue = useMemo(() => { + const state = searchValue + ? searchedPropertySectionState + : propertySectionState; + const setStateFn = searchValue + ? setSearchedPropertySectionState + : setPropertySectionState; + return { compName: stateCompName, - state: propertySectionState, + state, toggle: (compName: string, sectionName: string) => { - setPropertySectionState((oldState) => { + setStateFn((oldState) => { const nextSectionState: PropertySectionState = { ...oldState }; const compState = nextSectionState[compName] || {}; compState[sectionName] = compState[sectionName] === false; @@ -126,7 +134,13 @@ export const UICompPanel = () => { }); }, }; - }, [propertySectionState]); + }, [searchValue, propertySectionState, searchedPropertySectionState]); + + useEffect(() => { + if(!searchValue) { + setSearchedPropertySectionState({}) + } + }, [searchValue]) const compList = useMemo( () => @@ -187,7 +201,6 @@ export const UICompPanel = () => { return ( - {/* {compList.length > 0 ? compList : } */} From 18e49cabd1dd513f61d99006e2dd9df4bbd790be Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Thu, 30 Nov 2023 19:00:28 +0500 Subject: [PATCH 4/5] fix: replace maxHeight with auto/fixed Height --- .../src/comps/comps/tableComp/tableComp.tsx | 4 ++++ .../src/comps/comps/tableComp/tableCompView.tsx | 16 +++++++++------- .../comps/comps/tableComp/tablePropertyView.tsx | 7 +------ .../src/comps/comps/tableComp/tableTypes.tsx | 3 ++- client/packages/lowcoder/src/i18n/locales/en.ts | 2 -- client/packages/lowcoder/src/i18n/locales/zh.ts | 2 -- 6 files changed, 16 insertions(+), 18 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx index a3a14fd0a..b3e00f75a 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx @@ -58,6 +58,10 @@ export class TableImplComp extends TableInitComp implements IContainer { readonly filterData: RecordType[] = []; readonly columnAggrData: ColumnsAggrData = {}; + override autoHeight(): boolean { + return this.children.autoHeight.getView(); + } + private getSlotContainer() { return this.children.expansion.children.slot.getSelectedComp().getComp().children.container; } diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx index d43a13fd1..009a436f7 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx @@ -158,7 +158,8 @@ const TableWrapper = styled.div<{ $rowStyle: TableRowStyleType; toolbarPosition: "above" | "below" | "close"; }>` - overflow: hidden; + max-height: 100%; + overflow-y: auto; background: white; border: 1px solid #d7d9e0; @@ -364,7 +365,7 @@ type CustomTableProps = Omit, "components" | rowColorFn: RowColorViewType; columnsStyle: TableColumnStyleType; fixedHeader: boolean; - maxHeight: string; + height?: number; }; function TableCellView(props: { @@ -538,7 +539,7 @@ function ResizeableTable(props: CustomTableProps ); @@ -552,10 +553,10 @@ export function TableCompView(props: { onDownload: (fileName: string) => void; }) { const editorState = useContext(EditorContext); - const { width, ref } = useResizeDetector({ + const { width, height, ref } = useResizeDetector({ refreshMode: "debounce", refreshRate: 600, - handleHeight: false, + handleHeight: true, }); const viewMode = useUserViewMode(); const compName = useContext(CompNameContext); @@ -671,8 +672,8 @@ export function TableCompView(props: { return ( +
+
); } diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx index 9a50c348b..f2505ad6a 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx @@ -429,6 +429,7 @@ export function compTablePropertyView
{columnPropertyView(comp)}
{comp.children.expansion.getPropertyView()} + {comp.children.autoHeight.getPropertyView()} {hiddenPropertyView(comp.children)}
@@ -465,12 +466,6 @@ export function compTablePropertyView label: trans("table.fixedHeader"), tooltip: trans("table.fixedHeaderTooltip") })} - {comp.children.fixedHeader.getView() && - comp.children.maxHeight.propertyView({ - label: trans("table.maxHeight"), - tooltip: trans("table.maxHeightTooltip") - }) - }
{comp.children.rowStyle.getPropertyView()} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx index 4e65c22d4..86770d316 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx @@ -33,6 +33,7 @@ import { JSONObject } from "util/jsonTypes"; import { ExpansionControl } from "./expansionControl"; import { PaginationControl } from "./paginationControl"; import { SelectionControl } from "./selectionControl"; +import { AutoHeightControl } from "comps/controls/autoHeightControl"; const sizeOptions = [ { @@ -136,7 +137,7 @@ const tableChildrenMap = { hideBordered: BoolControl, hideHeader: BoolControl, fixedHeader: BoolControl, - maxHeight: withDefault(RadiusControl, '300px'), + autoHeight: withDefault(AutoHeightControl, "auto"), data: withIsLoadingMethod(JSONObjectArrayControl), showDataLoadSpinner: withDefault(BoolPureControl, true), columns: ColumnListComp, diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 8bbe20966..e77320c43 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -1250,8 +1250,6 @@ export const en = { hideHeader: "Hide table header", fixedHeader: "Fixed table header", fixedHeaderTooltip: "Header will be fixed for vertically scrollable table", - maxHeight: "Max. Height", - maxHeightTooltip: "Set max. height to make table scrollable", hideBordered: "Hide column border", deleteColumn: "Delete column", confirmDeleteColumn: "Confirm delete column: ", diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts index e95346b3f..60f66ccec 100644 --- a/client/packages/lowcoder/src/i18n/locales/zh.ts +++ b/client/packages/lowcoder/src/i18n/locales/zh.ts @@ -1176,8 +1176,6 @@ table: { hideHeader: "隐藏表头", fixedHeader: "固定表头", fixedHeaderTooltip: "垂直滚动表格的标题将被固定", - maxHeight: "最大限度。高度", - maxHeightTooltip: "设置最大值使表格可滚动的高度", hideBordered: "隐藏列边框", deleteColumn: "删除列", confirmDeleteColumn: "确认删除列:", From 5e73943f33e54e9c3d69fcfda42267f9f5a40bd0 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Thu, 30 Nov 2023 21:42:26 +0500 Subject: [PATCH 5/5] fix: small fix --- .../lowcoder/src/comps/comps/tableComp/tableCompView.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx index 009a436f7..ceca6f8ea 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx @@ -366,6 +366,7 @@ type CustomTableProps = Omit, "components" | columnsStyle: TableColumnStyleType; fixedHeader: boolean; height?: number; + autoHeight?: boolean; }; function TableCellView(props: { @@ -539,7 +540,9 @@ function ResizeableTable(props: CustomTableProps ); @@ -581,6 +584,7 @@ export function TableCompView(props: { () => compChildren.dynamicColumnConfig.getView(), [compChildren.dynamicColumnConfig] ); + const autoHeight = compChildren.autoHeight.getView(); const columnsAggrData = comp.columnAggrData; const expansion = useMemo(() => compChildren.expansion.getView(), [compChildren.expansion]); const antdColumns = useMemo( @@ -705,6 +709,7 @@ export function TableCompView(props: { size={compChildren.size.getView()} tableLayout="fixed" height={height} + autoHeight={autoHeight} loading={ loading || // fixme isLoading type