Merge pull request #4611 from czwe-01/thulasizwe/bug/3557

Thulasizwe/bug/3557

Author: James-Baloyi

shesha-reactjs/src/components/dataTable/index.tsx

@@ -54,6 +54,7 @@ import { getCellStyleAccessor } from './utils';
 import { isPropertiesArray } from '@/interfaces/metadata';
 import { IBeforeRowReorderArguments, IAfterRowReorderArguments } from '@/designer-components/dataTable/tableContext/models';
 import { StandaloneTable } from '@/designer-components/dataTable/table/standaloneTable';
+import { IDimensionsValue } from '@/designer-components/_settings/utils/index';
 
 export interface IIndexTableOptions {
   omitClick?: boolean;
@@ -137,6 +138,7 @@ export interface IIndexTableProps extends IShaDataTableProps, TableProps {
 
   // Overall table styling
   boxShadow?: string;
+  dimensions?: IDimensionsValue;
   sortableIndicatorColor?: string;
 }
 
@@ -200,6 +202,7 @@ export const DataTable: FC<Partial<IIndexTableProps>> = ({
   rowBorder,
   rowBorderStyle,
   boxShadow,
+  dimensions,
   sortableIndicatorColor,
   bodyFontFamily,
   bodyFontSize,
@@ -1007,6 +1010,7 @@ export const DataTable: FC<Partial<IIndexTableProps>> = ({
     rowBorder,
     rowBorderStyle,
     boxShadow,
+    dimensions,
     sortableIndicatorColor,
 
     onRowClickAction: onRowClick,

shesha-reactjs/src/components/reactTable/index.tsx

@@ -115,6 +115,7 @@ export const ReactTable: FC<IReactTableProps> = ({
   rowBorder,
   rowBorderStyle,
   boxShadow,
+  dimensions,
   sortableIndicatorColor,
   striped,
   cellBorderColor,
@@ -156,6 +157,7 @@ export const ReactTable: FC<IReactTableProps> = ({
     rowHoverBackgroundColor,
     rowSelectedBackgroundColor,
     border,
+    dimensions,
     backgroundColor,
     headerFontFamily,
     headerFontSize,

shesha-reactjs/src/components/reactTable/interfaces.ts

@@ -5,7 +5,7 @@ import React, { ReactNode, CSSProperties } from 'react';
 import { Column, ColumnInstance, Row, SortingRule, TableState } from 'react-table';
 import { IBorderValue } from '@/designer-components/_settings/utils/border/interfaces';
 import { TableSelectionMode } from '../dataTable/interfaces';
-import { IShadowValue } from '@/designer-components/_settings/utils/index';
+import { IDimensionsValue, IShadowValue } from '@/designer-components/_settings/utils/index';
 
 export interface IColumnWidth {
   id: React.Key;
@@ -326,6 +326,7 @@ export interface IReactTableProps extends ITableRowDragProps {
   border?: IBorderValue;
   backgroundColor?: string;
   boxShadow?: string;
+  dimensions?: IDimensionsValue;
   sortableIndicatorColor?: string;
   striped?: boolean;
 

shesha-reactjs/src/components/reactTable/styles/styles.ts

@@ -3,6 +3,7 @@ import { IBorderValue } from '@/designer-components/_settings/utils/border/inter
 import { IShadowValue } from '@/designer-components/_settings/utils/shadow/interfaces';
 import { getBorderStyle } from '@/designer-components/_settings/utils/border/utils';
 import { getShadowStyle } from '@/designer-components/_settings/utils/shadow/utils';
+import { IDimensionsValue } from '@/designer-components/_settings/utils/index';
 
 const tableClassNames = {
   shaTable: 'sha-table',
@@ -46,6 +47,7 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
   rowHoverBackgroundColor,
   rowSelectedBackgroundColor,
   border,
+  dimensions,
   backgroundColor,
   headerFontFamily,
   headerFontSize,
@@ -94,6 +96,7 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
   rowBorder?: string;
   rowBorderStyle?: IBorderValue;
   boxShadow?: string;
+  dimensions?: IDimensionsValue;
   sortableIndicatorColor?: string;
   striped?: boolean;
   cellBorderColor?: string;
@@ -215,6 +218,11 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
         position: relative;
       ` : ''}
 
+
+      ${dimensions?.height ? `height: ${dimensions.height};` : ''}
+      ${dimensions?.minHeight ? `min-height: ${dimensions.minHeight};` : ''}
+      ${dimensions?.maxHeight ? `max-height: ${dimensions.maxHeight};` : ''}
+
       .${shaSpanCenterVertically} {
         display: flex;
         align-items: center;
@@ -229,7 +237,6 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
         border-spacing: 0;
         display: inline-block;
         min-width: 100%;
-        overflow-x: auto;
         
         /* Background applied to table ensures it covers all rows when scrolling with freezeHeaders */
         ${backgroundColor ? `background: ${backgroundColor};` : 'background: white;'}

shesha-reactjs/src/components/sectionSeparator/index.tsx

@@ -116,7 +116,6 @@ export const SectionSeparator: FC<ISectionSeparatorProps> = ({
         ...containerStyle,
         height: 'max-content',
         width: addPx(lineWidth, allData) ?? '100%',
-        marginRight: 1,
       }}
       key={id}
     >

shesha-reactjs/src/configuration-studio/styles.ts

@@ -20,7 +20,6 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls, iconPrefixCl
   const csDocEditor = 'sha-cs-doc-editor';
 
   const headerHeight = 60;
-  const tabCardHeight = 40;
 
   const configStudio = cx("sha-config-studio", css`
 
@@ -102,8 +101,6 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls, iconPrefixCl
         }
             .${csDocEditor}{
                 padding: 0;
-                overflow: auto;
-                height: calc(100vh - ${headerHeight}px - ${tabCardHeight}px);
             }
   `);
 

shesha-reactjs/src/designer-components/attachmentsEditor/attachmentsEditor.tsx

@@ -164,6 +164,7 @@ const AttachmentsEditor: IToolboxComponent<IAttachmentsEditorProps> = {
   type: 'attachmentsEditor',
   isInput: true,
   name: 'File list',
+  preserveDimensionsInDesigner: true,
   dataTypeSupported: ({ dataType, dataFormat }) => dataType === DataTypes.advanced && dataFormat === AdvancedFormats.fileList,
   icon: <FolderAddOutlined />,
   Factory: ({ model }) => {

shesha-reactjs/src/designer-components/container/settingsForm.ts

@@ -465,7 +465,7 @@ export const getSettings: SettingsFormMarkupFactory = ({ fbf }) => {
                                       propertyName: 'flexWrap',
                                       dropdownOptions: FLEX_WRAP,
                                       hidden: {
-                                        _code: 'return getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.flexDirection) !== "row";',
+                                        _code: 'return getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.display) !== "flex";',
                                         _mode: 'code',
                                         _value: false,
                                       } as any,

shesha-reactjs/src/designer-components/dataTable/table/styles/styles.ts

@@ -59,6 +59,7 @@ export const GlobalTableStyles = createGlobalStyle`
   }
 
   .sha-react-table {
+    overflow: auto;
     .td {
       .${(p) => p.theme.prefixCls}-form-item {
         width: 100%;

shesha-reactjs/src/designer-components/dataTable/table/tableComponent.tsx

@@ -148,6 +148,7 @@ const TableComponent: TableComponentDefinition = {
   isInput: true,
   isOutput: true,
   name: 'Data Table',
+  preserveDimensionsInDesigner: true,
   icon: <TableOutlined />,
   Factory: ({ model }) => {
     return <TableComponentFactory model={model} />;