Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore: Remove position props from List and Table widgets (#27018)

Browse Source 
- Replaced the property `templateBottomRow` with `templateHeight` as a
first step to remove the dependency of fixed layout specific position
property from List widget.
- Remove appPositioningType and isMobile props from widget DataTree.
- Include width and height as `componentHeight` and `componentWidth` in
widget DataTree.
- Update ListWidget, ListWidgetV2, TableWidget and TableWidgetV2 to use
the componentHeight prop in derivedProps calculation to get pageSize.
This commit is contained in:
Aswath K 2023-09-19 10:52:11 +05:30 committed by GitHub
parent b7a7b15173
commit 3170af84c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 237 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/cypress/fixtures/listwidgetdsl.json
View File

@ -172,7 +172,7 @@
"type": "LIST_WIDGET",
"isLoading": false,
"parentColumnSpace": 57.875,
"parentRowSpace": 40,
"parentRowSpace": 10,
"leftColumn": 4,
"rightColumn": 12,
"topRow": 2,

16
app/client/src/entities/DataTree/dataTreeFactory.ts
View File

@ -22,9 +22,7 @@ import type {
WidgetConfig,
} from "./types";
import { ENTITY_TYPE, EvaluationSubstitutionType } from "./types";
import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer";
import { Positioning } from "layoutSystems/autolayout/utils/constants";
import type { AppPositioningTypes } from "reducers/entityReducers/pageListReducer";
import type { LoadingEntitiesState } from "reducers/evaluationReducers/loadingEntitiesReducer";
export type UnEvalTreeEntityObject =
@ -82,6 +80,7 @@ type DataTreeSeed = {
theme: AppTheme["properties"];
metaWidgets: MetaWidgetsReduxState;
isMobile: boolean;
appPositioningType: AppPositioningTypes;
loadingEntities: LoadingEntitiesState;
};
@ -103,6 +102,7 @@ export class DataTreeFactory {
static create({
actions,
appData,
appPositioningType,
editorConfigs,
isMobile,
jsActions,
@ -148,16 +148,12 @@ export class DataTreeFactory {
widget,
widgetsMeta[widget.metaWidgetId || widget.widgetId],
loadingEntities,
appPositioningType,
isMobile,
);
dataTree[widget.widgetName] = unEvalEntity;
if (
widgets[MAIN_CONTAINER_WIDGET_ID].positioning === Positioning.Vertical
) {
dataTree[widget.widgetName].appPositioningType =
AppPositioningTypes.AUTO;
}
dataTree[widget.widgetName].isMobile = isMobile;
configTree[widget.widgetName] = configEntity;
});

2
app/client/src/entities/DataTree/dataTreeWidget.test.ts
View File

@ -227,6 +227,8 @@ describe("generateDataTreeWidget", () => {
widgetId: "123",
widgetName: "Input1",
ENTITY_TYPE: ENTITY_TYPE.WIDGET,
componentWidth: 0,
componentHeight: 0,
defaultText: "",
type: "INPUT_WIDGET_V2",
deepObj: {

17
app/client/src/entities/DataTree/dataTreeWidget.ts
View File

@ -15,6 +15,8 @@ import { OverridingPropertyType } from "./types";
import { setOverridingProperty } from "./utils";
import { error } from "loglevel";
import WidgetFactory from "WidgetProvider/factory";
import { getComponentDimensions } from "layoutSystems/common/utils/ComponentSizeUtils";
import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer";
import type { LoadingEntitiesState } from "reducers/evaluationReducers/loadingEntitiesReducer";
/**
@ -345,6 +347,8 @@ export const generateDataTreeWidget = (
widget: FlattenedWidgetProps,
widgetMetaProps: Record<string, unknown> = {},
loadingEntities: LoadingEntitiesState,
appPositioningType: AppPositioningTypes = AppPositioningTypes.FIXED,
isMobile = false,
) => {
const {
dataTreeWidgetWithoutMetaProps: dataTreeWidget,
@ -380,8 +384,19 @@ export const generateDataTreeWidget = (
dataTreeWidget["meta"] = meta;
dataTreeWidget["isLoading"] = loadingEntities.has(widget.widgetName);
const { componentHeight, componentWidth } = getComponentDimensions(
dataTreeWidget,
appPositioningType,
isMobile,
);
return {
unEvalEntity: { ...dataTreeWidget, type: widget.type },
unEvalEntity: {
...dataTreeWidget,
componentHeight,
componentWidth,
type: widget.type,
},
configEntity: { ...entityConfig, widgetId: dataTreeWidget.widgetId },
};
};

50
app/client/src/layoutSystems/autolayout/index.ts
View File

@ -4,6 +4,7 @@ import type { BaseWidgetProps } from "widgets/BaseWidgetHOC/withBaseWidgetHOC";
import { RenderModes } from "../../constants/WidgetConstants";
import { AutoLayoutEditorWrapper } from "./editor/AutoLayoutEditorWrapper";
import { AutoLayoutViewerWrapper } from "./viewer/AutoLayoutViewerWrapper";
import { getAutoLayoutComponentDimensions } from "layoutSystems/common/utils/ComponentSizeUtils";
/**
* getAutoLayoutDimensionsConfig
@ -27,55 +28,6 @@ const getAutoLayoutDimensionsConfig = (props: BaseWidgetProps) => {
return autoDimensionConfig;
};
/**
* getAutoLayoutComponentDimensions
*
* utility function to compute a widgets dimensions in Auto layout system
*
* @returns
* @property {number} componentHeight The calculated height of a widget in pixels.
* @property {number} componentWidth The calculated width of a widget in pixels.
*/
const getAutoLayoutComponentDimensions = ({
bottomRow,
isFlexChild,
isMobile,
leftColumn,
mobileBottomRow,
mobileLeftColumn,
mobileRightColumn,
mobileTopRow,
parentColumnSpace,
parentRowSpace,
rightColumn,
topRow,
}: BaseWidgetProps) => {
let left = leftColumn;
let right = rightColumn;
let top = topRow;
let bottom = bottomRow;
if (isFlexChild && isMobile) {
if (mobileLeftColumn !== undefined && parentColumnSpace !== 1) {
left = mobileLeftColumn;
}
if (mobileRightColumn !== undefined && parentColumnSpace !== 1) {
right = mobileRightColumn;
}
if (mobileTopRow !== undefined && parentRowSpace !== 1) {
top = mobileTopRow;
}
if (mobileBottomRow !== undefined && parentRowSpace !== 1) {
bottom = mobileBottomRow;
}
}
return {
componentWidth: (right - left) * parentColumnSpace,
componentHeight: (bottom - top) * parentRowSpace,
};
};
/**
* getAutoLayoutSystemPropsEnhancer
*

96
app/client/src/layoutSystems/common/utils/ComponentSizeUtils.ts Normal file
View File

@ -0,0 +1,96 @@
import { GridDefaults } from "constants/WidgetConstants";
import memo from "micro-memoize";
import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer";
import type { BaseWidgetProps } from "widgets/BaseWidgetHOC/withBaseWidgetHOC";
/**
* getAutoLayoutComponentDimensions
*
* utility function to compute a widgets dimensions in Auto layout system
*
* The Auto-Layout Layout system uses the mobile breakpoints for layouts.
* For this reason, the rows and columns occupied in the mobile breakpoint,
* and the rows and columns occupied in other viewport widths can be different.
* As a result, we check if we're in the mobile breakpoint using the isMobile,
* and use the appropriate leftColumn, rightColumn, topRow and bottomRow
* (with or without the mobile prefix depending on the isMobile value) to compute the component dimensions.
* The components here are the widgets.
*
*/
export const getAutoLayoutComponentDimensions = ({
bottomRow,
isMobile,
leftColumn,
mobileBottomRow,
mobileLeftColumn,
mobileRightColumn,
mobileTopRow,
parentColumnSpace,
parentRowSpace,
rightColumn,
topRow,
}: BaseWidgetProps) => {
let left = leftColumn;
let right = rightColumn;
let top = topRow;
let bottom = bottomRow;
if (isMobile) {
if (mobileLeftColumn !== undefined && parentColumnSpace !== 1) {
left = mobileLeftColumn;
}
if (mobileRightColumn !== undefined && parentColumnSpace !== 1) {
right = mobileRightColumn;
}
if (mobileTopRow !== undefined && parentRowSpace !== 1) {
top = mobileTopRow;
}
if (mobileBottomRow !== undefined && parentRowSpace !== 1) {
bottom = mobileBottomRow;
}
}
return {
componentWidth: (right - left) * parentColumnSpace,
componentHeight: (bottom - top) * parentRowSpace,
};
};
/**
* getFixedLayoutComponentDimensions
*
* utility function to compute a widgets dimensions in Fixed layout system
*
*/
export const getFixedLayoutComponentDimensions = ({
bottomRow,
leftColumn,
parentColumnSpace,
parentRowSpace,
rightColumn,
topRow,
}: BaseWidgetProps) => {
return {
componentWidth: (rightColumn - leftColumn) * parentColumnSpace,
componentHeight:
(bottomRow - topRow) *
(parentRowSpace || GridDefaults.DEFAULT_GRID_ROW_HEIGHT),
};
};
export const getComponentDimensions = memo(
(
props: BaseWidgetProps,
appPositioningType: AppPositioningTypes,
isMobile: boolean,
): {
componentHeight: number;
componentWidth: number;
} => {
switch (appPositioningType) {
case AppPositioningTypes.AUTO:
return getAutoLayoutComponentDimensions({ ...props, isMobile });
default:
return getFixedLayoutComponentDimensions(props);
}
},
);

29
app/client/src/layoutSystems/fixedlayout/index.ts
View File

@ -2,26 +2,7 @@ import { RenderModes } from "constants/WidgetConstants";
import { FixedLayoutEditorWrapper } from "./editor/FixedLayoutEditorWrapper";
import { FixedLayoutViewerWrapper } from "./viewer/FixedLayoutViewerWrapper";
import type { BaseWidgetProps } from "widgets/BaseWidgetHOC/withBaseWidgetHOC";
/**
* getFixedLayoutComponentDimensions
*
* utiltiy function to compute a widgets dimensions in Fixed layout system
*
*/
const getFixedLayoutComponentDimensions = ({
bottomRow,
leftColumn,
parentColumnSpace,
parentRowSpace,
rightColumn,
topRow,
}: BaseWidgetProps) => {
return {
componentWidth: (rightColumn - leftColumn) * parentColumnSpace,
componentHeight: (bottomRow - topRow) * parentRowSpace,
};
};
import { getFixedLayoutComponentDimensions } from "layoutSystems/common/utils/ComponentSizeUtils";
/**
* getLabelWidth
@ -35,7 +16,7 @@ const getLabelWidth = (props: BaseWidgetProps) => {
/**
* getFixedLayoutSystemPropsEnhancer
*
* utiltiy function to enhance BaseWidgetProps with Fixed Layout system specific props
* utility function to enhance BaseWidgetProps with Fixed Layout system specific props
*
*/
const getFixedLayoutSystemPropsEnhancer = (props: BaseWidgetProps) => {
@ -54,7 +35,7 @@ const getFixedLayoutSystemPropsEnhancer = (props: BaseWidgetProps) => {
/**
* getFixedLayoutSystemWrapper
*
* utiltiy function to return the fixed layout system wrapper based on render mode.
* utility function to return the fixed layout system wrapper based on render mode.
* wrapper is the component that wraps around a widget to provide layouting ability and enable editing experience.
*
*/
@ -69,8 +50,8 @@ const getFixedLayoutSystemWrapper = (renderMode: RenderModes) => {
/**
* getFixedLayoutSystem
*
* utiltiy function to return the fixed layout system config for
* wrapper based on render mode and property enhancer funciton
* utility function to return the fixed layout system config for
* wrapper based on render mode and property enhancer function
*
*/
export function getFixedLayoutSystem(renderMode: RenderModes) {

2
app/client/src/layoutSystems/withLayoutSystemHOC.tsx
View File

@ -15,7 +15,7 @@ export type LayoutSystem = {
propertyEnhancer: (props: WidgetProps) => WidgetProps;
};
const getLayoutSystem = (
export const getLayoutSystem = (
renderMode: RenderModes,
appPositioningType: AppPositioningTypes,
): LayoutSystem => {

24
app/client/src/selectors/dataTreeSelectors.ts
View File

@ -9,7 +9,6 @@ import {
import type { DataTree, WidgetEntity } from "entities/DataTree/dataTreeFactory";
import { DataTreeFactory } from "entities/DataTree/dataTreeFactory";
import {
getIsMobileBreakPoint,
getMetaWidgets,
getWidgetsForEval,
getWidgetsMeta,
@ -24,10 +23,27 @@ import type { EvaluationError } from "utils/DynamicBindingUtils";
import { getEvalErrorPath } from "utils/DynamicBindingUtils";
import ConfigTreeActions from "utils/configTree";
import { DATATREE_INTERNAL_KEYWORDS } from "constants/WidgetValidation";
import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer";
export const getLoadingEntities = (state: AppState) =>
state.evaluations.loadingEntities;
/**
* This selector is created to combine a couple of data points required by getUnevaluatedDataTree selector.
* Current version of reselect package only allows upto 12 arguments. Hence, this workaround.
* TODO: Figure out a better way to do this in a separate task. Or update the package if possible.
*/
const getLayoutSystemPayload = (state: AppState) => ({
// appPositioning?.type instead of appPositioning.type is for legacy applications that may not have the appPositioning object.
// All new applications will have appPositioning.type
appPositioningType:
AppPositioningTypes[
state.ui.applications.currentApplication?.applicationDetail
?.appPositioning?.type || AppPositioningTypes.FIXED
],
isMobile: state.ui.mainCanvas.isMobile,
});
export const getUnevaluatedDataTree = createSelector(
getCurrentActions,
getCurrentJSCollections,
@ -39,7 +55,7 @@ export const getUnevaluatedDataTree = createSelector(
getPluginDependencyConfig,
getSelectedAppThemeProperties,
getMetaWidgets,
getIsMobileBreakPoint,
getLayoutSystemPayload,
getLoadingEntities,
(
actions,
@ -52,7 +68,7 @@ export const getUnevaluatedDataTree = createSelector(
pluginDependencyConfig,
selectedAppThemeProperty,
metaWidgets,
isMobile,
layoutSystemPayload,
loadingEntities,
) => {
const pageList = pageListPayload || [];
@ -67,8 +83,8 @@ export const getUnevaluatedDataTree = createSelector(
pluginDependencyConfig,
theme: selectedAppThemeProperty,
metaWidgets,
isMobile,
loadingEntities,
...layoutSystemPayload,
});
},
);

9
app/client/src/selectors/editorSelectors.tsx
View File

@ -47,7 +47,6 @@ import {
import { checkIsDropTarget } from "WidgetProvider/factory/helpers";
import {
buildChildWidgetTree,
buildFlattenedChildCanvasWidgets,
createCanvasWidget,
createLoadingWidget,
} from "utils/widgetRenderUtils";
@ -555,14 +554,6 @@ export const getChildWidgets = createSelector(
buildChildWidgetTree,
);
export const getFlattenedChildCanvasWidgets = createSelector(
[
getCanvasWidgets,
(_state: AppState, parentWidgetId: string) => parentWidgetId,
],
buildFlattenedChildCanvasWidgets,
);
const getOccupiedSpacesForContainer = (
containerWidgetId: string,
widgets: FlattenedWidgetProps[],

59
app/client/src/selectors/flattenedChildCanvasSelector.ts Normal file
View File

@ -0,0 +1,59 @@
import { getCanvasWidgets } from "@appsmith/selectors/entitiesSelector";
import { GridDefaults, type RenderModes } from "constants/WidgetConstants";
import { getLayoutSystem } from "layoutSystems/withLayoutSystemHOC";
import type {
CanvasWidgetsReduxState,
FlattenedWidgetProps,
} from "reducers/entityReducers/canvasWidgetsReducer";
import type { AppPositioningTypes } from "reducers/entityReducers/pageListReducer";
import { createSelector } from "reselect";
import { getAppPositioningType, getRenderMode } from "./editorSelectors";
import { getIsMobileBreakPoint } from "sagas/selectors";
import type { AppState } from "@appsmith/reducers";
function buildFlattenedChildCanvasWidgets(
canvasWidgets: CanvasWidgetsReduxState,
renderMode: RenderModes,
appPositioningType: AppPositioningTypes,
isMobile: boolean,
parentWidgetId: string,
flattenedChildCanvasWidgets: Record<string, FlattenedWidgetProps> = {},
) {
const parentWidget = canvasWidgets[parentWidgetId];
const { propertyEnhancer } = getLayoutSystem(renderMode, appPositioningType);
parentWidget?.children?.forEach((childId) => {
const childWidget = canvasWidgets[childId];
let parentRowSpace =
childWidget.parentRowSpace ?? GridDefaults.DEFAULT_GRID_ROW_HEIGHT;
if (childWidget.type === "CANVAS_WIDGET") {
parentRowSpace = 1;
}
flattenedChildCanvasWidgets[childId] = propertyEnhancer({
...childWidget,
isMobile,
parentRowSpace,
});
buildFlattenedChildCanvasWidgets(
canvasWidgets,
renderMode,
appPositioningType,
isMobile,
childId,
flattenedChildCanvasWidgets,
);
});
return flattenedChildCanvasWidgets;
}
export const getFlattenedChildCanvasWidgets = createSelector(
[
getCanvasWidgets,
getRenderMode,
getAppPositioningType,
getIsMobileBreakPoint,
(_state: AppState, parentWidgetId: string) => parentWidgetId,
],
buildFlattenedChildCanvasWidgets,
);

19
app/client/src/utils/widgetRenderUtils.tsx
View File

@ -179,25 +179,6 @@ export function buildChildWidgetTree(
return [];
}
export function buildFlattenedChildCanvasWidgets(
canvasWidgets: CanvasWidgetsReduxState,
parentWidgetId: string,
flattenedChildCanvasWidgets: Record<string, FlattenedWidgetProps> = {},
) {
const parentWidget = canvasWidgets[parentWidgetId];
parentWidget?.children?.forEach((childId) => {
flattenedChildCanvasWidgets[childId] = canvasWidgets[childId];
buildFlattenedChildCanvasWidgets(
canvasWidgets,
childId,
flattenedChildCanvasWidgets,
);
});
return flattenedChildCanvasWidgets;
}
function getWidgetSpecificChildProps(type: string) {
if (type === "FORM_WIDGET") {
return ["value", "isDirty", "isValid", "isLoading", "children"];

3
app/client/src/widgets/ListWidget/widget/derived.js
View File

@ -139,8 +139,7 @@ export default {
const templateBottomRow = props.templateBottomRow;
const templateHeight = templateBottomRow * DEFAULT_GRID_ROW_HEIGHT;
const componentHeight =
(props.bottomRow - props.topRow) * DEFAULT_GRID_ROW_HEIGHT;
const componentHeight = props.componentHeight;
const spaceAvailableWithoutPaginationControls =
componentHeight - WIDGET_PADDING * 2;

8
app/client/src/widgets/ListWidget/widget/derived.test.js
View File

@ -61,18 +61,21 @@ describe("Validates Derived Properties", () => {
gridGap: 0,
parentRowSpace: 10,
topRow: 9,
componentHeight: 770,
listData: [{}, {}],
};
// decrease ListWidget height (bottomRow changes)
// decrease ListWidget height (bottomRow and componentHeight changes)
const input2 = {
...input1,
bottomRow: 56,
componentHeight: 470,
};
// increase ListWidget height (bottomRow changes)
// increase ListWidget height (bottomRow and componentHeight changes)
const input3 = {
...input1,
bottomRow: 340,
componentHeight: 3310,
};
// increase ListItem height (templateBottomRow changes)
@ -80,6 +83,7 @@ describe("Validates Derived Properties", () => {
...input1,
templateBottomRow: DEFAULT_LIST_ITEM_HEIGHT * 2,
bottomRow: 340,
componentHeight: 3310,
};
// undefined listData

6
app/client/src/widgets/ListWidgetV2/MetaWidgetGenerator.test.ts
View File

@ -46,7 +46,7 @@ const DEFAULT_OPTIONS = {
prevTemplateWidgets: {},
primaryKeys: data.map((d) => d.id.toString()),
scrollElement: null,
templateBottomRow: 12,
templateHeight: 120,
widgetName: "List1",
pageNo: 1,
pageSize: 2,
@ -611,10 +611,10 @@ describe("#generate", () => {
expect(result.removedMetaWidgetIds.length).toEqual(0);
});
it("doesn't re-generates meta widgets when templateBottomRow changes", () => {
it("doesn't re-generates meta widgets when templateHeight changes", () => {
const { generator, options } = init();
options.templateBottomRow += 100;
options.templateHeight += 1000;
const result = generator.withOptions(options).generate();
const count = Object.keys(result.metaWidgets).length;

14
app/client/src/widgets/ListWidgetV2/MetaWidgetGenerator.ts
View File

@ -27,7 +27,7 @@ import type {
MetaWidgetCacheProps,
MetaWidgets,
} from "./widget";
import { DEFAULT_TEMPLATE_BOTTOM_ROW, DynamicPathType } from "./widget";
import { DEFAULT_TEMPLATE_HEIGHT, DynamicPathType } from "./widget";
import type { WidgetProps } from "widgets/BaseWidget";
import type { DynamicPath } from "utils/DynamicBindingUtils";
import {
@ -90,7 +90,7 @@ export type GeneratorOptions = {
primaryKeys?: string[];
scrollElement: HTMLDivElement | null;
serverSidePagination: boolean;
templateBottomRow: number;
templateHeight: number;
widgetName: string;
};
@ -247,7 +247,7 @@ class MetaWidgetGenerator {
private serverSidePagination: GeneratorOptions["serverSidePagination"];
private setWidgetCache: ConstructorProps["setWidgetCache"];
private setWidgetReferenceCache: ConstructorProps["setWidgetReferenceCache"];
private templateBottomRow: GeneratorOptions["templateBottomRow"];
private templateHeight: GeneratorOptions["templateHeight"];
private templateWidgetCandidates: Set<string>;
private templateWidgetStatus: TemplateWidgetStatus;
private virtualizer?: VirtualizerInstance;
@ -287,7 +287,7 @@ class MetaWidgetGenerator {
this.scrollElement = null;
this.setWidgetCache = props.setWidgetCache;
this.setWidgetReferenceCache = props.setWidgetReferenceCache;
this.templateBottomRow = DEFAULT_TEMPLATE_BOTTOM_ROW;
this.templateHeight = DEFAULT_TEMPLATE_HEIGHT;
this.templateWidgetCandidates = new Set();
this.templateWidgetStatus = {
added: new Set(),
@ -310,7 +310,7 @@ class MetaWidgetGenerator {
this.pageSize = options.pageSize;
this.scrollElement = options.scrollElement;
this.serverSidePagination = options.serverSidePagination;
this.templateBottomRow = options.templateBottomRow;
this.templateHeight = options.templateHeight;
this.widgetName = options.widgetName;
this.hooks = options.hooks;
this.currTemplateWidgets = extractTillNestedListWidget(
@ -1451,7 +1451,7 @@ class MetaWidgetGenerator {
prevOptions?.infiniteScroll !== this.infiniteScroll ||
prevOptions?.itemSpacing !== this.itemSpacing ||
prevOptions?.serverSidePagination !== this.serverSidePagination ||
prevOptions?.templateBottomRow !== this.templateBottomRow ||
prevOptions?.templateHeight !== this.templateHeight ||
!isEqual(this.currTemplateWidgets, this.prevTemplateWidgets) ||
!isEqual(this.prevPrimaryKeys, this.primaryKeys)
);
@ -1932,7 +1932,7 @@ class MetaWidgetGenerator {
const listCount = this.data?.length || 0;
const itemSpacing =
listCount && ((listCount - 1) * this.itemSpacing) / listCount;
return this.templateBottomRow * 10 + itemSpacing;
return this.templateHeight + itemSpacing;
},
getScrollElement: () => scrollElement,
observeElementOffset,

2
app/client/src/widgets/ListWidgetV2/widget/defaultProps.ts
View File

@ -83,7 +83,7 @@ export default {
},
},
itemSpacing: 8,
templateBottomRow: 16,
templateHeight: 160,
listData: DEFAULT_LIST_DATA,
pageSize: DEFAULT_LIST_DATA.length,
widgetName: "List",

32
app/client/src/widgets/ListWidgetV2/widget/index.tsx
View File

@ -55,7 +55,7 @@ const getCurrentItemsViewBindingTemplate = () => ({
suffix: "]}}",
});
export const DEFAULT_TEMPLATE_BOTTOM_ROW = 10;
export const DEFAULT_TEMPLATE_HEIGHT = 100;
export enum DynamicPathType {
CURRENT_ITEM = "currentItem",
@ -512,7 +512,7 @@ class ListWidget extends BaseWidget<
prevTemplateWidgets: this.prevFlattenedChildCanvasWidgets,
primaryKeys: this.primaryKeys,
scrollElement: this.componentRef.current,
templateBottomRow: this.getTemplateBottomRow(),
templateHeight: this.getTemplateHeight(),
widgetName: this.props.widgetName,
pageNo,
pageSize,
@ -674,24 +674,15 @@ class ListWidget extends BaseWidget<
return flattenedChildCanvasWidgets?.[mainContainerId];
};
getTemplateBottomRow = () => {
if (
this.props.appPositioningType === AppPositioningTypes.AUTO &&
this.props.isMobile
) {
return (
this.getMainContainer()?.mobileBottomRow || DEFAULT_TEMPLATE_BOTTOM_ROW
);
}
return this.getMainContainer()?.bottomRow || DEFAULT_TEMPLATE_BOTTOM_ROW;
getTemplateHeight = () => {
return this.getMainContainer()?.componentHeight || DEFAULT_TEMPLATE_HEIGHT;
};
getContainerRowHeight = () => {
const { itemSpacing = 0, listData, parentRowSpace } = this.props;
const templateBottomRow = this.getTemplateBottomRow();
const { itemSpacing = 0, listData } = this.props;
const containerVerticalPadding = WIDGET_PADDING * 2;
const itemsCount = (listData || []).length;
const templateHeight = templateBottomRow * parentRowSpace;
const templateHeight = this.getTemplateHeight();
const averageItemSpacing = itemsCount
? (itemSpacing - containerVerticalPadding) *
@ -1353,15 +1344,10 @@ class ListWidget extends BaseWidget<
getWidgetView() {
const { componentHeight, componentWidth } = this.props;
const {
infiniteScroll,
isLoading,
parentColumnSpace,
parentRowSpace,
selectedItemKey,
} = this.props;
const { infiniteScroll, isLoading, parentColumnSpace, selectedItemKey } =
this.props;
const startIndex = this.metaWidgetGenerator.getStartIndex();
const templateHeight = this.getTemplateBottomRow() * parentRowSpace;
const templateHeight = this.getTemplateHeight();
if (isLoading) {
return (

3
app/client/src/widgets/TableWidget/widget/derived.js
View File

@ -92,8 +92,7 @@ export default {
},
};
const compactMode = props.compactMode || "DEFAULT";
const componentHeight =
(props.bottomRow - props.topRow) * props.parentRowSpace - 10;
const componentHeight = props.componentHeight - 10;
const tableSizes = TABLE_SIZES[compactMode];
let pageSize = Math.floor(
(componentHeight -

7
app/client/src/widgets/TableWidgetV2/widget/derived.js
View File

@ -178,12 +178,7 @@ export default {
},
};
const compactMode = props.compactMode || "DEFAULT";
const componentHeight =
(props.appPositioningType === "AUTO" && props.isMobile
? props.mobileBottomRow - props.mobileTopRow
: props.bottomRow - props.topRow) *
props.parentRowSpace -
10;
const componentHeight = props.componentHeight - 10;
const tableSizes = TABLE_SIZES[compactMode];
let pageSize =

2
app/client/src/widgets/withWidgetProps.tsx
View File

@ -24,7 +24,6 @@ import {
getRenderMode,
getMetaWidgetChildrenStructure,
getMetaWidget,
getFlattenedChildCanvasWidgets,
previewModeSelector,
getIsAutoLayoutMobileBreakPoint,
getCanvasWidth,
@ -47,6 +46,7 @@ import { getGoogleMapsApiKey } from "@appsmith/selectors/tenantSelectors";
import ConfigTreeActions from "utils/configTree";
import { getSelectedWidgetAncestry } from "../selectors/widgetSelectors";
import { getWidgetMinMaxDimensionsInPixel } from "layoutSystems/autolayout/utils/flexWidgetUtils";
import { getFlattenedChildCanvasWidgets } from "selectors/flattenedChildCanvasSelector";
const WIDGETS_WITH_CHILD_WIDGETS = ["LIST_WIDGET", "FORM_WIDGET"];
const WIDGETS_REQUIRING_SELECTED_ANCESTRY = ["MODAL_WIDGET", "TABS_WIDGET"];