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

Trigger onPageSizeChange action when table page size changes (#2737)

Browse Source
This commit is contained in:
Vicky Bansal 2021-01-27 11:10:53 +05:30 committed by GitHub
parent c9b3059498
commit e34a98833c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 62 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/client/src/constants/ActionConstants.tsx
View File

@ -18,6 +18,7 @@ export enum EventType {
ON_PAGE_LOAD = "ON_PAGE_LOAD",
ON_PREV_PAGE = "ON_PREV_PAGE",
ON_NEXT_PAGE = "ON_NEXT_PAGE",
ON_PAGE_SIZE_CHANGE = "ON_PAGE_SIZE_CHANGE",
ON_ERROR = "ON_ERROR",
ON_SUCCESS = "ON_SUCCESS",
ON_ROW_SELECTED = "ON_ROW_SELECTED",

8
app/client/src/mockResponses/PropertyPaneConfigResponse.tsx
View File

@ -281,6 +281,14 @@ const PropertyPaneConfigResponse: PropertyPaneConfigsResponse["data"] = {
},
{
id: "7.2.4",
helpText: "Triggers an action when a table page size is changed",
propertyName: "onPageSizeChange",
label: "onPageSizeChange",
controlType: "ACTION_SELECTOR",
isJSConvertible: true,
},
{
id: "7.2.5",
propertyName: "onSearchTextChanged",
label: "onSearchTextChanged",
controlType: "ACTION_SELECTOR",

77
app/client/src/widgets/TableWidget.tsx
View File

@ -90,13 +90,13 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
searchText: VALIDATION_TYPES.TEXT,
defaultSearchText: VALIDATION_TYPES.TEXT,
defaultSelectedRow: VALIDATION_TYPES.DEFAULT_SELECTED_ROW,
pageSize: VALIDATION_TYPES.NUMBER,
};
}
static getMetaPropertiesMap(): Record<string, any> {
return {
pageNo: 1,
pageSize: undefined,
selectedRowIndex: undefined,
selectedRowIndices: undefined,
searchText: undefined,
@ -120,12 +120,50 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
onRowSelected: true,
onPageChange: true,
onSearchTextChanged: true,
onPageSizeChange: true,
columnActions: true,
};
}
static getDerivedPropertiesMap() {
return {
pageSize: `{{function() {
const TABLE_SIZES = {
${CompactModeTypes.DEFAULT}: {
COLUMN_HEADER_HEIGHT: 38,
TABLE_HEADER_HEIGHT: 42,
ROW_HEIGHT: 40,
ROW_FONT_SIZE: 14,
},
${CompactModeTypes.SHORT}: {
COLUMN_HEADER_HEIGHT: 38,
TABLE_HEADER_HEIGHT: 42,
ROW_HEIGHT: 20,
ROW_FONT_SIZE: 12,
},
${CompactModeTypes.TALL}: {
COLUMN_HEADER_HEIGHT: 38,
TABLE_HEADER_HEIGHT: 42,
ROW_HEIGHT: 60,
ROW_FONT_SIZE: 18,
},
};
const compactMode = this.compactMode || "${CompactModeTypes.DEFAULT}";
const componentHeight = (this.bottomRow - this.topRow) * this.parentRowSpace;
const tableSizes = TABLE_SIZES[compactMode];
let pageSize= Math.floor((componentHeight - tableSizes.TABLE_HEADER_HEIGHT - tableSizes.COLUMN_HEADER_HEIGHT) / tableSizes.ROW_HEIGHT);
if (
componentHeight -
(tableSizes.TABLE_HEADER_HEIGHT +
tableSizes.COLUMN_HEADER_HEIGHT +
tableSizes.ROW_HEIGHT * pageSize) >
0
) {
pageSize += 1;
}
return pageSize;
}()
}}`,
triggerRowSelection: "{{!!this.onRowSelected}}",
};
}
@ -505,6 +543,14 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
);
}
}
if (this.props.pageSize !== prevProps.pageSize) {
super.executeAction({
dynamicString: this.props.onPageSizeChange,
event: {
type: EventType.ON_PAGE_SIZE_CHANGE,
},
});
}
}
getSelectedRowIndexes = (selectedRowIndices: string) => {
@ -514,7 +560,12 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
};
getPageView() {
const { tableData, hiddenColumns, filteredTableData } = this.props;
const {
tableData,
hiddenColumns,
filteredTableData,
pageSize,
} = this.props;
const computedSelectedRowIndices = Array.isArray(
this.props.selectedRowIndices,
)
@ -536,28 +587,6 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
this.props.updateWidgetMetaProperty("pageNo", pageNo);
}
const { componentWidth, componentHeight } = this.getComponentDimensions();
const tableSizes =
TABLE_SIZES[this.props.compactMode || CompactModeTypes.DEFAULT];
let pageSize = Math.floor(
(componentHeight -
tableSizes.TABLE_HEADER_HEIGHT -
tableSizes.COLUMN_HEADER_HEIGHT) /
tableSizes.ROW_HEIGHT,
);
if (
componentHeight -
(tableSizes.TABLE_HEADER_HEIGHT +
tableSizes.COLUMN_HEADER_HEIGHT +
tableSizes.ROW_HEIGHT * pageSize) >
0
)
pageSize += 1;
if (pageSize !== this.props.pageSize) {
this.props.updateWidgetMetaProperty("pageSize", pageSize);
}
return (
<Suspense fallback={<Skeleton />}>
<ReactTableComponent