Resize handles

Author: FalkWolsky

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

@@ -64,6 +64,10 @@ export class TableImplComp extends TableInitComp implements IContainer {
   override autoHeight(): boolean {
     return this.children.autoHeight.getView();
   }
+
+  getTableAutoHeight() {
+    return this.children.autoHeight.getView();
+  }
 
   private getSlotContainer() {
     return this.children.expansion.children.slot.getSelectedComp().getComp().children.container;

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

@@ -57,7 +57,6 @@ const getStyle = (
   const selectedRowBackground = genLinerGradient(rowStyle.selectedRowBackground);
   const hoverRowBackground = genLinerGradient(rowStyle.hoverRowBackground);
   const alternateBackground = genLinerGradient(rowStyle.alternateBackground);
-  // const tableAutoHeight = 
 
   return css`
     .ant-table-body {
@@ -123,7 +122,9 @@ const getStyle = (
   `;
 };
 
-const TitleResizeHandle = styled.span`
+const TitleResizeHandle = styled.span<{
+  $visibleResizables: boolean;
+}>`
   position: absolute;
   top: 0;
   right: -5px;
@@ -135,10 +136,9 @@ const TitleResizeHandle = styled.span`
 
 const BackgroundWrapper = styled.div<{
   $style: TableStyleType;
-  $tableAutoHeight?: boolean;
+  $tableAutoHeight: boolean;
 }>`  
-  ${(props) => !props.$tableAutoHeight && ` height: calc(100% - ${props.$style.margin} - ${props.$style.margin}) !important`};
-  ${(props) => props.$tableAutoHeight && ` height: calc(100% + ${props.$style.margin}`};
+  ${(props) => !props.$tableAutoHeight && `height: calc(100% - ${props.$style.margin} - ${props.$style.margin});`}
   background: ${(props) => props.$style.background} !important;
   border: ${(props) => `${props.$style.borderWidth} solid ${props.$style.border} !important`};
   border-radius: ${(props) => props.$style.radius} !important;
@@ -435,7 +435,8 @@ const ResizeableTitle = (props: any) => {
       draggableOpts={{ enableUserSelectHack: false }}
       handle={(axis: ResizeHandleAxis, ref: ReactRef<HTMLDivElement>) => (
         <TitleResizeHandle
-          ref={ref}
+          ref={ref} 
+          $visibleResizables={props.visibleResizables}
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -451,6 +452,7 @@ const ResizeableTitle = (props: any) => {
 type CustomTableProps<RecordType> = Omit<TableProps<RecordType>, "components" | "columns"> & {
   columns: CustomColumnType<RecordType>[];
   viewModeResizable: boolean;
+  visibleResizables: boolean;
   rowColorFn: RowColorViewType;
   rowHeightFn: RowHeightViewType;
   columnsStyle: TableColumnStyleType;
@@ -673,12 +675,13 @@ export function TableCompView(props: {
   const [loading, setLoading] = useState(false);
   const { comp, onDownload, onRefresh } = props;
   const compChildren = comp.children;
-  const tableAutoHeight = compChildren.autoHeight.getView();
   const style = compChildren.style.getView();
   const rowStyle = compChildren.rowStyle.getView();
   const headerStyle = compChildren.headerStyle.getView();
   const toolbarStyle = compChildren.toolbarStyle.getView();
   const rowAutoHeight = compChildren.rowAutoHeight.getView();
+  const tableAutoHeight = comp.getTableAutoHeight();
+  const visibleResizables = compChildren.visibleResizables.getView();
   const columnsStyle = compChildren.columnsStyle.getView();
   const changeSet = useMemo(() => compChildren.columns.getChangeSet(), [compChildren.columns]);
   const hasChange = useMemo(() => !_.isEmpty(changeSet), [changeSet]);
@@ -785,11 +788,9 @@ export function TableCompView(props: {
   }
 
   return (
-    <BackgroundColorContext.Provider value={style.background}>
+    <BackgroundColorContext.Provider value={style.background} >
 
-      <BackgroundWrapper ref={ref} $style={style}
-        $tableAutoHeight={compChildren.autoHeight.getView()}
-      >
+      <BackgroundWrapper ref={ref} $style={style} $tableAutoHeight={tableAutoHeight}>
         {toolbar.position === "above" && toolbarView}
         <TableWrapper
           $style={style}
@@ -800,8 +801,6 @@ export function TableCompView(props: {
           $fixedHeader={compChildren.fixedHeader.getView()}
           $fixedToolbar={toolbar.fixedToolbar && toolbar.position === 'above'}
         >
-          
-          
           <ResizeableTable<RecordType>
             expandable={{
               ...expansion.expandableConfig,
@@ -824,6 +823,7 @@ export function TableCompView(props: {
             columns={antdColumns}
             columnsStyle={columnsStyle}
             viewModeResizable={compChildren.viewModeResizable.getView()}
+            visibleResizables={compChildren.visibleResizables.getView()}
             dataSource={pageDataInfo.data}
             size={compChildren.size.getView()}
             rowAutoHeight={rowAutoHeight}

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

@@ -473,6 +473,10 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
               label: trans("table.viewModeResizable"),
               tooltip: trans("table.viewModeResizableTooltip"),
             })}
+            {comp.children.visibleResizables.propertyView({
+              label: trans("table.visibleResizables"),
+              tooltip: trans("table.visibleResizablesTooltip"),
+            })}
           </Section>
           <Section name={trans("prop.pagination")}>
             {comp.children.pagination.getPropertyView()}

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

@@ -191,12 +191,14 @@ const tableChildrenMap = {
   searchText: StringControl,
   columnsStyle: withDefault(styleControl(TableColumnStyle), {borderWidth: '1px', radius: '0px'}),
   viewModeResizable: BoolControl,
+  visibleResizables: BoolControl,
   // sample data for regenerating columns
   dataRowExample: stateComp<JSONObject | null>(null),
   onEvent: TableEventControl,
   loading: BoolCodeControl,
   rowColor: RowColorComp,
   rowAutoHeight: withDefault(AutoHeightControl, "auto"),
+  tableAutoHeight: withDefault(AutoHeightControl, "auto"),
   rowHeight: RowHeightComp,
   dynamicColumn: BoolPureControl,
   // todo: support object config

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

@@ -1191,6 +1191,8 @@ export const en = {
     "columnNum": "Columns",
     "viewModeResizable": "Column Width Adjusted by User",
     "viewModeResizableTooltip": "Whether Users Can Adjust Column Width.",
+    "visibleResizables": "Show Resize Handles",
+    "visibleResizablesTooltip": "Display visible Resize Handles in the Table Header.",
     "showFilter": "Show Filter Button",
     "showRefresh": "Show Refresh Button",
     "showDownload": "Show Download Button",

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

@@ -1157,6 +1157,8 @@ table: {
     columnNum: "列数",
     viewModeResizable: "用户调整列宽",
     viewModeResizableTooltip: "是否允许调整列宽.",
+    "visibleResizables": "Show Resize Handles",
+    "visibleResizablesTooltip": "Display visible Resize Handles in the Table Header.",
     showFilter: "显示筛选按钮",
     showRefresh: "显示刷新按钮",
     showDownload: "显示下载按钮",
@@ -1218,6 +1220,7 @@ table: {
     link: "链接",
     links: "多链接",
     tag: "标签",
+    select: "下拉单选",
     date: "日期",
     dateTime: "日期时间",
     badgeStatus: "状态",