From 868f29eaeb8c8da7bde21ef2009dad9fc119f202 Mon Sep 17 00:00:00 2001 From: Abhinav Jha Date: Wed, 24 Feb 2021 15:59:19 +0530 Subject: [PATCH] Fix selected row issue in view mode (#3186) * Fix selected row issue in view mode * Remove un-select feature --- .../appsmith/TableComponent/Table.tsx | 14 ++-- .../appsmith/TableComponent/index.tsx | 12 ++- app/client/src/utils/WidgetRegistry.tsx | 2 + .../src/utils/migrations/TableWidget.ts | 1 + app/client/src/widgets/IconWidget.tsx | 3 + app/client/src/widgets/SkeletonWidget.tsx | 3 + app/client/src/widgets/TableWidget/index.tsx | 81 ++++++------------- 7 files changed, 45 insertions(+), 71 deletions(-) diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx index 5fab6a84c8..447791256d 100644 --- a/app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx +++ b/app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx @@ -37,10 +37,10 @@ interface TableProps { editMode: boolean; sortTableColumn: (columnIndex: number, asc: boolean) => void; handleResizeColumn: (columnSizeMap: { [key: string]: number }) => void; - selectTableRow: ( - row: { original: Record; index: number }, - isSelected: boolean, - ) => void; + selectTableRow: (row: { + original: Record; + index: number; + }) => void; pageNo: number; updatePageNo: (pageNo: number, event?: EventType) => void; nextPageClick: () => void; @@ -235,11 +235,7 @@ export const Table = (props: TableProps) => { } onClick={(e) => { row.toggleRowSelected(); - props.selectTableRow( - row, - row.index === selectedRowIndex || - selectedRowIndices.includes(row.index), - ); + props.selectTableRow(row); e.stopPropagation(); }} key={rowIndex} diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx index dbcf1239cf..0eb1dd6b10 100644 --- a/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx +++ b/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx @@ -159,13 +159,11 @@ const ReactTableComponent = (props: ReactTableComponentProps) => { } }; - const selectTableRow = ( - row: { original: Record; index: number }, - isSelected: boolean, - ) => { - if (!isSelected || props.multiRowSelection || !props.multiRowSelection) { - props.onRowClick(row.original, row.index); - } + const selectTableRow = (row: { + original: Record; + index: number; + }) => { + props.onRowClick(row.original, row.index); }; return ( diff --git a/app/client/src/utils/WidgetRegistry.tsx b/app/client/src/utils/WidgetRegistry.tsx index 5e09d10a2a..69f7f39e96 100644 --- a/app/client/src/utils/WidgetRegistry.tsx +++ b/app/client/src/utils/WidgetRegistry.tsx @@ -438,6 +438,7 @@ export default class WidgetBuilderRegistry { IconWidget.getTriggerPropertyMap(), IconWidget.getDefaultPropertiesMap(), IconWidget.getMetaPropertiesMap(), + IconWidget.getPropertyPaneConfig(), ); WidgetFactory.registerWidgetBuilder( @@ -452,6 +453,7 @@ export default class WidgetBuilderRegistry { SkeletonWidget.getTriggerPropertyMap(), SkeletonWidget.getDefaultPropertiesMap(), SkeletonWidget.getMetaPropertiesMap(), + SkeletonWidget.getPropertyPaneConfig(), ); WidgetFactory.registerWidgetBuilder( diff --git a/app/client/src/utils/migrations/TableWidget.ts b/app/client/src/utils/migrations/TableWidget.ts index 6a85686a3a..b66ad20788 100644 --- a/app/client/src/utils/migrations/TableWidget.ts +++ b/app/client/src/utils/migrations/TableWidget.ts @@ -139,6 +139,7 @@ export const tableWidgetPropertyPaneMigrations = ( key: `primaryColumns.${columnPrefix}${index + 1}.onClick`, }); updatedDerivedColumns[column.id] = column; + child.primaryColumns[column.id] = column; }); if (Object.keys(updatedDerivedColumns).length) { diff --git a/app/client/src/widgets/IconWidget.tsx b/app/client/src/widgets/IconWidget.tsx index d2928f6a31..84471fdae7 100644 --- a/app/client/src/widgets/IconWidget.tsx +++ b/app/client/src/widgets/IconWidget.tsx @@ -14,6 +14,9 @@ const IconWrapper = styled.div` justify-content: flex-end; `; class IconWidget extends BaseWidget { + static getPropertyPaneConfig() { + return []; + } static getTriggerPropertyMap(): TriggerPropertiesMap { return { onClick: true, diff --git a/app/client/src/widgets/SkeletonWidget.tsx b/app/client/src/widgets/SkeletonWidget.tsx index d40b1c38ea..2a17218940 100644 --- a/app/client/src/widgets/SkeletonWidget.tsx +++ b/app/client/src/widgets/SkeletonWidget.tsx @@ -10,6 +10,9 @@ const SkeletonWrapper = styled.div` `; class SkeletonWidget extends BaseWidget { + static getPropertyPaneConfig() { + return []; + } getPageView() { return ; } diff --git a/app/client/src/widgets/TableWidget/index.tsx b/app/client/src/widgets/TableWidget/index.tsx index f43bd21d1e..5c5c496835 100644 --- a/app/client/src/widgets/TableWidget/index.tsx +++ b/app/client/src/widgets/TableWidget/index.tsx @@ -601,7 +601,6 @@ class TableWidget extends BaseWidget { propertiesToAdd["migrated"] = true; } - super.batchUpdateWidgetProperty(propertiesToAdd); if (previousColumnIds.length > newColumnIds.length) { const columnsIdsToDelete = without( previousColumnIds, @@ -610,13 +609,13 @@ class TableWidget extends BaseWidget { columnsIdsToDelete.forEach((id: string) => { pathsToDelete.push(`primaryColumns.${id}`); }); - // We need to wait for the above updates to finish - // Todo(abhinav): This is not correct. The platform should accept multiple types of updates - // That approach should be performant. - setTimeout(() => { - super.deleteWidgetProperty(pathsToDelete); - }, 1000); + + super.deleteWidgetProperty(pathsToDelete); } + + setTimeout(() => { + super.batchUpdateWidgetProperty(propertiesToAdd); + }, 1000); } } }; @@ -643,27 +642,15 @@ class TableWidget extends BaseWidget { componentDidUpdate(prevProps: TableWidgetProps) { const { primaryColumns = {} } = this.props; - // Check if data is modifed by comparing the stringified versions of the previous and next tableData const tableDataModified = JSON.stringify(this.props.tableData) !== JSON.stringify(prevProps.tableData); - // let hasPrimaryColumnsComputedValueChanged = false; - // const oldComputedValues = Object.values( - // prevProps.primaryColumns || {}, - // )?.map((column: ColumnProperties) => column.computedValue); - // const newComputedValues = Object.values( - // this.props.primaryColumns || {}, - // )?.map((column: ColumnProperties) => column.computedValue); - // if (!isEqual(oldComputedValues, newComputedValues)) { - // hasPrimaryColumnsComputedValueChanged = true; - // } - let hasPrimaryColumnsChanged = false; // If the user has changed the tableData OR // The binding has returned a new value - if (tableDataModified) { + if (tableDataModified && this.props.renderMode === RenderModes.CANVAS) { // Get columns keys from this.props.tableData const columnIds: string[] = getAllTableColumnKeys(this.props.tableData); // Get column keys from columns except for derivedColumns @@ -694,21 +681,19 @@ class TableWidget extends BaseWidget { JSON.stringify(prevProps.sortedColumn) || JSON.stringify(this.props.primaryColumns) !== JSON.stringify(prevProps.primaryColumns) || - this.props.filteredTableData === undefined) + this.props.filteredTableData === undefined || + this.props.filteredTableData.length === 0) ) { - if (this.props.primaryColumns && Object.keys(primaryColumns).length > 0) { - const filteredTableData = this.filterTableData(); - - if ( - JSON.stringify(filteredTableData) !== - JSON.stringify(this.props.filteredTableData) - ) { - // Update filteredTableData meta property - this.props.updateWidgetMetaProperty( - "filteredTableData", - filteredTableData, - ); - } + const filteredTableData = this.filterTableData(); + if ( + JSON.stringify(filteredTableData) !== + JSON.stringify(this.props.filteredTableData) + ) { + // Update filteredTableData meta property + this.props.updateWidgetMetaProperty( + "filteredTableData", + filteredTableData, + ); } } @@ -941,33 +926,19 @@ class TableWidget extends BaseWidget { "selectedRowIndices", selectedRowIndices, ); - this.props.updateWidgetMetaProperty( - "selectedRows", - this.props.filteredTableData.filter( - (item: Record, i: number) => { - return selectedRowIndices.includes(i); - }, - ), - ); } else { const selectedRowIndex = isNumber(this.props.selectedRowIndex) ? this.props.selectedRowIndex : -1; - if (selectedRowIndex === index) { - index = -1; - } else { - this.props.updateWidgetMetaProperty( - "selectedRow", - this.props.filteredTableData[index], - { - dynamicString: this.props.onRowSelected, - event: { - type: EventType.ON_ROW_SELECTED, - }, + + if (selectedRowIndex !== index) { + this.props.updateWidgetMetaProperty("selectedRowIndex", index, { + dynamicString: this.props.onRowSelected, + event: { + type: EventType.ON_ROW_SELECTED, }, - ); + }); } - this.props.updateWidgetMetaProperty("selectedRowIndex", index); } };