diff --git a/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx b/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx index 5e2a24ceaf..e8c0df7a99 100644 --- a/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx +++ b/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx @@ -12,8 +12,8 @@ import { TextInputProps, } from "components/designSystems/appsmith/TextInputComponent"; import { + getNameBindingsWithData, NameBindingsWithData, - getNameBindingsWithDerivedData, } from "selectors/nameBindingsWithDataSelector"; import TreeMenu, { MatchSearchFunction, @@ -218,7 +218,7 @@ class DynamicAutocompleteInput extends Component { } const mapStateToProps = (state: AppState): ReduxStateProps => ({ - dynamicData: getNameBindingsWithDerivedData(state), + dynamicData: getNameBindingsWithData(state), }); export default connect(mapStateToProps)(DynamicAutocompleteInput); diff --git a/app/client/src/sagas/ActionSagas.ts b/app/client/src/sagas/ActionSagas.ts index 804917709e..a4c52e038d 100644 --- a/app/client/src/sagas/ActionSagas.ts +++ b/app/client/src/sagas/ActionSagas.ts @@ -52,8 +52,8 @@ import { API_EDITOR_FORM_NAME } from "constants/forms"; import { executeAction } from "actions/widgetActions"; import JSExecutionManagerSingleton from "jsExecution/JSExecutionManagerSingleton"; import { + getNameBindingsWithData, NameBindingsWithData, - getNameBindingsWithDerivedData, } from "selectors/nameBindingsWithDataSelector"; export const getAction = ( @@ -81,7 +81,7 @@ const createActionErrorResponse = ( }); export function* evaluateDynamicBoundValueSaga(path: string): any { - const nameBindingsWithData = yield select(getNameBindingsWithDerivedData); + const nameBindingsWithData = yield select(getNameBindingsWithData); return evaluateDynamicBoundValue(nameBindingsWithData, path); } @@ -103,7 +103,7 @@ export function* getActionParams(jsonPathKeys: string[] | undefined) { function* executeJSActionSaga(jsAction: ExecuteJSActionPayload) { const nameBindingsWithData: NameBindingsWithData = yield select( - getNameBindingsWithDerivedData, + getNameBindingsWithData, ); const result = JSExecutionManagerSingleton.evaluateSync( jsAction.jsFunction, diff --git a/app/client/src/selectors/editorSelectors.tsx b/app/client/src/selectors/editorSelectors.tsx index bda926c8c2..fdc4067eb7 100644 --- a/app/client/src/selectors/editorSelectors.tsx +++ b/app/client/src/selectors/editorSelectors.tsx @@ -18,8 +18,8 @@ import { PageListReduxState } from "reducers/entityReducers/pageListReducer"; import { OccupiedSpace } from "constants/editorConstants"; import { WidgetTypes } from "constants/WidgetConstants"; import { + getNameBindingsWithData, NameBindingsWithData, - getNameBindingsWithDerivedData, } from "./nameBindingsWithDataSelector"; const getEditorState = (state: AppState) => state.ui.editor; @@ -116,7 +116,7 @@ export const getWidgetCards = createSelector( export const getValidatedDynamicProps = createSelector( getDataTree, - getNameBindingsWithDerivedData, + getNameBindingsWithData, (entities: DataTree, nameBindingsWithData: NameBindingsWithData) => { const widgets = { ...entities.canvasWidgets }; Object.keys(widgets).forEach(widgetKey => { diff --git a/app/client/src/selectors/nameBindingsWithDataSelector.ts b/app/client/src/selectors/nameBindingsWithDataSelector.ts index 54ebb29028..85ddf0d3fc 100644 --- a/app/client/src/selectors/nameBindingsWithDataSelector.ts +++ b/app/client/src/selectors/nameBindingsWithDataSelector.ts @@ -2,23 +2,8 @@ import { DataTree } from "reducers"; import { JSONPath } from "jsonpath-plus"; import { createSelector } from "reselect"; import { getDataTree } from "./entitiesSelector"; -import { - CanvasWidgetsReduxState, - FlattenedWidgetProps, -} from "reducers/entityReducers/canvasWidgetsReducer"; -import * as _ from "lodash"; -import { DerivedPropFactory } from "utils/DerivedPropertiesFactory"; -import createCachedSelector from "re-reselect"; export type NameBindingsWithData = Record; - -export const getCanvasWidgets = createSelector( - getDataTree, - (dataTree: DataTree): CanvasWidgetsReduxState => { - return dataTree.canvasWidgets; - }, -); - export const getNameBindingsWithData = createSelector( getDataTree, (dataTree: DataTree): NameBindingsWithData => { @@ -33,52 +18,7 @@ export const getNameBindingsWithData = createSelector( nameBindingsWithData[key] = evaluatedValue; } }); + return nameBindingsWithData; }, ); - -const getCanvasWidgetData = ( - canvasWidgets: CanvasWidgetsReduxState, - widgetId: string, -) => { - return canvasWidgets[widgetId]; -}; - -const getDerivedPropertiesForWidget = createCachedSelector( - getCanvasWidgetData, - (canvasWidgetData: FlattenedWidgetProps) => { - return DerivedPropFactory.getDerivedProperties(canvasWidgetData); - }, -)((canvasWidgets, widgetId) => { - return widgetId; -}); - -export const getDerivedProperties = createSelector( - getCanvasWidgets, - (canvasWidgets: CanvasWidgetsReduxState): NameBindingsWithData => { - const allDerivedProps: Record = {}; - Object.keys(canvasWidgets).forEach(widgetId => { - const widgetName = canvasWidgets[widgetId].widgetName; - const widgetDerivedProps = getDerivedPropertiesForWidget( - canvasWidgets, - widgetId, - ); - if (widgetDerivedProps) { - allDerivedProps[widgetName] = widgetDerivedProps; - } - }); - - return allDerivedProps; - }, -); - -export const getNameBindingsWithDerivedData = createSelector( - getDerivedProperties, - getNameBindingsWithData, - ( - derivedProps: NameBindingsWithData, - nameBindingsWithData: NameBindingsWithData, - ): NameBindingsWithData => { - return _.merge(derivedProps, nameBindingsWithData); - }, -); diff --git a/app/client/src/selectors/propertyPaneSelectors.tsx b/app/client/src/selectors/propertyPaneSelectors.tsx index aa070436eb..6a5879ebf0 100644 --- a/app/client/src/selectors/propertyPaneSelectors.tsx +++ b/app/client/src/selectors/propertyPaneSelectors.tsx @@ -7,8 +7,8 @@ import { PropertySection } from "reducers/entityReducers/propertyPaneConfigReduc import { enhanceWithDynamicValuesAndValidations } from "utils/DynamicBindingUtils"; import { WidgetProps } from "widgets/BaseWidget"; import { + getNameBindingsWithData, NameBindingsWithData, - getNameBindingsWithDerivedData, } from "./nameBindingsWithDataSelector"; const getPropertyPaneState = (state: AppState): PropertyPaneReduxState => @@ -38,7 +38,7 @@ export const getCurrentWidgetProperties = createSelector( export const getWidgetPropsWithValidations = createSelector( getCurrentWidgetProperties, - getNameBindingsWithDerivedData, + getNameBindingsWithData, ( widget: WidgetProps | undefined, nameBindigsWithData: NameBindingsWithData, diff --git a/app/client/src/utils/DerivedPropertiesFactory.ts b/app/client/src/utils/DerivedPropertiesFactory.ts deleted file mode 100644 index 3c9b63f8c5..0000000000 --- a/app/client/src/utils/DerivedPropertiesFactory.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { FlattenedWidgetProps } from "reducers/entityReducers/canvasWidgetsReducer"; -import WidgetFactory from "./WidgetFactory"; - -export class DerivedPropFactory { - static getDerivedProperties( - widgetDataWithValidations: FlattenedWidgetProps, - ): any { - const derivedPropertyMap = WidgetFactory.getWidgetDerivedPropertiesMap( - widgetDataWithValidations.type, - ); - - const derivedProps: any = {}; - Object.keys(derivedPropertyMap).forEach(propertyName => { - const derivedPropertyGetter = derivedPropertyMap[propertyName]; - let propertValue; - try { - propertValue = derivedPropertyGetter(widgetDataWithValidations); - if (propertValue) { - derivedProps[propertyName] = propertValue; - } - } catch (ex) { - console.error( - `Property evaluation failed for ${propertyName} for widget ${widgetDataWithValidations.widgetName}`, - ); - } - }); - return derivedProps; - } -} diff --git a/app/client/src/utils/WidgetFactory.tsx b/app/client/src/utils/WidgetFactory.tsx index ff00b7a133..a9080fd8fc 100644 --- a/app/client/src/utils/WidgetFactory.tsx +++ b/app/client/src/utils/WidgetFactory.tsx @@ -5,11 +5,6 @@ import { WidgetDataProps, } from "widgets/BaseWidget"; import { WidgetPropertyValidationType } from "./ValidationFactory"; -import { FlattenedWidgetProps } from "reducers/entityReducers/canvasWidgetsReducer"; - -type WidgetDerivedPropertyType = any; -type DerivedPropertyGetter = (widgetData: FlattenedWidgetProps) => {}; -export type DerivedPropertiesMap = Record; class WidgetFactory { static widgetMap: Map> = new Map(); @@ -17,24 +12,14 @@ class WidgetFactory { WidgetType, WidgetPropertyValidationType > = new Map(); - static widgetDerivedPropertiesGetterMap: Map< - WidgetType, - WidgetDerivedPropertyType - > = new Map(); - static derivedPropertiesMap: Map< - WidgetType, - DerivedPropertiesMap - > = new Map(); static registerWidgetBuilder( widgetType: WidgetType, widgetBuilder: WidgetBuilder, widgetPropertyValidation: WidgetPropertyValidationType, - derivedPropertiesMap: DerivedPropertiesMap, ) { this.widgetMap.set(widgetType, widgetBuilder); this.widgetPropValidationMap.set(widgetType, widgetPropertyValidation); - this.derivedPropertiesMap.set(widgetType, derivedPropertiesMap); } static createWidget( @@ -75,17 +60,6 @@ class WidgetFactory { } return map; } - - static getWidgetDerivedPropertiesMap( - widgetType: WidgetType, - ): DerivedPropertiesMap { - const map = this.derivedPropertiesMap.get(widgetType); - if (!map) { - console.error("Widget type validation is not defined"); - return {}; - } - return map; - } } export interface WidgetCreationException { diff --git a/app/client/src/utils/WidgetRegistry.tsx b/app/client/src/utils/WidgetRegistry.tsx index 5c93e24ec6..491238397f 100644 --- a/app/client/src/utils/WidgetRegistry.tsx +++ b/app/client/src/utils/WidgetRegistry.tsx @@ -31,7 +31,6 @@ class WidgetBuilderRegistry { }, }, ContainerWidget.getPropertyValidationMap(), - ContainerWidget.getDerivedPropertiesMap(), ); WidgetFactory.registerWidgetBuilder( @@ -42,7 +41,6 @@ class WidgetBuilderRegistry { }, }, TextWidget.getPropertyValidationMap(), - TextWidget.getDerivedPropertiesMap(), ); WidgetFactory.registerWidgetBuilder( @@ -53,7 +51,6 @@ class WidgetBuilderRegistry { }, }, ButtonWidget.getPropertyValidationMap(), - ButtonWidget.getDerivedPropertiesMap(), ); WidgetFactory.registerWidgetBuilder( @@ -64,7 +61,6 @@ class WidgetBuilderRegistry { }, }, SpinnerWidget.getPropertyValidationMap(), - SpinnerWidget.getDerivedPropertiesMap(), ); WidgetFactory.registerWidgetBuilder( @@ -75,7 +71,6 @@ class WidgetBuilderRegistry { }, }, InputWidget.getPropertyValidationMap(), - InputWidget.getDerivedPropertiesMap(), ); WidgetFactory.registerWidgetBuilder( @@ -86,7 +81,6 @@ class WidgetBuilderRegistry { }, }, CheckboxWidget.getPropertyValidationMap(), - CheckboxWidget.getDerivedPropertiesMap(), ); WidgetFactory.registerWidgetBuilder( @@ -97,7 +91,6 @@ class WidgetBuilderRegistry { }, }, DropdownWidget.getPropertyValidationMap(), - DropdownWidget.getDerivedPropertiesMap(), ); WidgetFactory.registerWidgetBuilder( @@ -108,7 +101,6 @@ class WidgetBuilderRegistry { }, }, RadioGroupWidget.getPropertyValidationMap(), - RadioGroupWidget.getDerivedPropertiesMap(), ); WidgetFactory.registerWidgetBuilder( @@ -119,7 +111,6 @@ class WidgetBuilderRegistry { }, }, ImageWidget.getPropertyValidationMap(), - ImageWidget.getDerivedPropertiesMap(), ); WidgetFactory.registerWidgetBuilder( "TABLE_WIDGET", @@ -129,7 +120,6 @@ class WidgetBuilderRegistry { }, }, TableWidget.getPropertyValidationMap(), - TableWidget.getDerivedPropertiesMap(), ); WidgetFactory.registerWidgetBuilder( "FILE_PICKER_WIDGET", @@ -139,7 +129,6 @@ class WidgetBuilderRegistry { }, }, FilePickerWidget.getPropertyValidationMap(), - FilePickerWidget.getDerivedPropertiesMap(), ); WidgetFactory.registerWidgetBuilder( "DATE_PICKER_WIDGET", @@ -149,7 +138,6 @@ class WidgetBuilderRegistry { }, }, DatePickerWidget.getPropertyValidationMap(), - DatePickerWidget.getDerivedPropertiesMap(), ); } } diff --git a/app/client/src/widgets/BaseWidget.tsx b/app/client/src/widgets/BaseWidget.tsx index 50f5f27a06..aef3180f87 100644 --- a/app/client/src/widgets/BaseWidget.tsx +++ b/app/client/src/widgets/BaseWidget.tsx @@ -23,8 +23,6 @@ import { PositionTypes } from "constants/WidgetConstants"; import ErrorBoundary from "components/editorComponents/ErrorBoundry"; import { WidgetPropertyValidationType } from "utils/ValidationFactory"; -import { FlattenedWidgetProps } from "reducers/entityReducers/canvasWidgetsReducer"; -import { DerivedPropertiesMap } from "utils/WidgetFactory"; /*** * BaseWidget * @@ -60,10 +58,6 @@ abstract class BaseWidget< return {}; } - static getDerivedPropertiesMap(): DerivedPropertiesMap { - return {}; - } - /** * Widget abstraction to register the widget type * ```javascript diff --git a/app/client/src/widgets/DropdownWidget.tsx b/app/client/src/widgets/DropdownWidget.tsx index e90d2ae59a..58bef6ae01 100644 --- a/app/client/src/widgets/DropdownWidget.tsx +++ b/app/client/src/widgets/DropdownWidget.tsx @@ -6,12 +6,7 @@ import DropDownComponent from "components/designSystems/blueprint/DropdownCompon import _ from "lodash"; import { WidgetPropertyValidationType } from "utils/ValidationFactory"; import { VALIDATION_TYPES } from "constants/WidgetValidation"; -import { FlattenedWidgetProps } from "reducers/entityReducers/canvasWidgetsReducer"; -export interface DropDownDerivedProps { - selectedOption?: DropdownOption; - selectedOptionArr?: DropdownOption[]; -} class DropdownWidget extends BaseWidget { static getPropertyValidationMap(): WidgetPropertyValidationType { return { @@ -23,23 +18,6 @@ class DropdownWidget extends BaseWidget { selectedIndexArr: VALIDATION_TYPES.ARRAY, }; } - static getDerivedPropertiesMap() { - return { - selectedOption: (widgetData: FlattenedWidgetProps) => { - return widgetData.selectionType === "SINGLE_SELECT" - ? widgetData.options[widgetData.selectedIndex] - : undefined; - }, - selectedOptionArr: (widgetData: FlattenedWidgetProps) => { - const options = widgetData.options || []; - return widgetData.selectionType === "MULTI_SELECT" - ? options.filter((opt: DropdownOption, index: number) => - _.includes(widgetData.selectedIndexArr, index), - ) - : undefined; - }, - }; - } getPageView() { return ( { static getPropertyValidationMap(): WidgetPropertyValidationType { @@ -15,23 +14,6 @@ class RadioGroupWidget extends BaseWidget { selectedOptionValue: VALIDATION_TYPES.TEXT, }; } - static getDerivedProperties(widgetData: FlattenedWidgetProps) { - return { - selectedOption: widgetData.options.find( - (opt: RadioOption) => - opt.value.toString() === widgetData.selectedOptionValue.toString(), - ), - }; - } - static getDerivedPropertiesMap() { - return { - selectedOption: (widgetData: FlattenedWidgetProps) => - widgetData.options.find( - (opt: RadioOption) => - opt.value.toString() === widgetData.selectedOptionValue.toString(), - ), - }; - } getPageView() { return ( { nextPageKey: VALIDATION_TYPES.TEXT, prevPageKey: VALIDATION_TYPES.TEXT, label: VALIDATION_TYPES.TEXT, - selectedRowIndex: VALIDATION_TYPES.NUMBER, - }; - } - - static getDerivedPropertiesMap() { - return { - selectedRow: (widgetData: FlattenedWidgetProps) => { - return widgetData.tableData[widgetData.selectedRowIndex]; - }, + selectedRow: VALIDATION_TYPES.OBJECT, }; } @@ -62,10 +53,12 @@ class TableWidget extends BaseWidget { data={tableData} maxHeight={height} isLoading={this.props.isLoading} - selectedRowIndex={this.props.selectedRowIndex} + selectedRowIndex={ + this.props.selectedRow && this.props.selectedRow.rowIndex + } onRowClick={(rowData: object, index: number) => { const { onRowSelected } = this.props; - this.updateSelectedRowProperty(index); + this.updateSelectedRowProperty(rowData, index); super.executeAction(onRowSelected); }} /> @@ -73,10 +66,25 @@ class TableWidget extends BaseWidget { ); } + componentDidUpdate(prevProps: TableWidgetProps) { + super.componentDidUpdate(prevProps); + if ( + !_.isEqual(prevProps.tableData, this.props.tableData) && + prevProps.selectedRow + ) { + this.updateSelectedRowProperty( + this.props.tableData[prevProps.selectedRow.rowIndex], + prevProps.selectedRow.rowIndex, + ); + } + } - updateSelectedRowProperty(index: number) { + updateSelectedRowProperty(rowData: object, index: number) { const { widgetId } = this.props; - this.updateWidgetProperty(widgetId, "selectedRowIndex", index); + this.updateWidgetProperty(widgetId, "selectedRow", { + ...rowData, + rowIndex: index, + }); } getWidgetType(): WidgetType { @@ -99,7 +107,7 @@ export interface TableWidgetProps extends WidgetProps { recordActions?: TableAction[]; onPageChange?: ActionPayload[]; onRowSelected?: ActionPayload[]; - selectedRowIndex?: number; + selectedRow?: SelectedRow; } export default TableWidget;