diff --git a/app/client/src/mockResponses/WidgetConfigResponse.tsx b/app/client/src/mockResponses/WidgetConfigResponse.tsx index efff9f0c9f..f63cf16dd6 100644 --- a/app/client/src/mockResponses/WidgetConfigResponse.tsx +++ b/app/client/src/mockResponses/WidgetConfigResponse.tsx @@ -7,12 +7,14 @@ const WidgetConfigResponse: WidgetConfigReducerState = { buttonStyle: "PRIMARY_BUTTON", rows: 1, columns: 2, + widgetName: "Button", }, TEXT_WIDGET: { text: "Not all labels are bad!", textStyle: "LABEL", rows: 1, columns: 3, + widgetName: "Text", }, IMAGE_WIDGET: { defaultImage: "", @@ -20,27 +22,32 @@ const WidgetConfigResponse: WidgetConfigReducerState = { image: "", rows: 3, columns: 3, + widgetName: "Image", }, INPUT_WIDGET: { inputType: "TEXT", label: "Label me", rows: 1, columns: 3, + widgetName: "Input", }, SWITCH_WIDGET: { isOn: false, label: "Turn me on", rows: 1, columns: 4, + widgetName: "Switch", }, CONTAINER_WIDGET: { backgroundColor: "#FFFFFF", rows: 1, columns: 4, + widgetName: "Container", }, SPINNER_WIDGET: { rows: 1, columns: 1, + widgetName: "Spinner", }, DATE_PICKER_WIDGET: { enableTime: false, @@ -48,23 +55,27 @@ const WidgetConfigResponse: WidgetConfigReducerState = { rows: 1, columns: 3, label: "Date", + widgetName: "Datepicker", }, TABLE_WIDGET: { rows: 5, columns: 7, label: "Don't table me!", + widgetName: "Table", }, DROP_DOWN_WIDGET: { rows: 1, columns: 3, selectionType: "SINGLE_SELECT", label: "Pick me!", + widgetName: "Dropdown", }, CHECKBOX_WIDGET: { rows: 1, columns: 3, label: "Label - CHECK!", defaultCheckedState: true, + widgetName: "Checkbox", }, RADIO_GROUP_WIDGET: { rows: 3, @@ -76,6 +87,7 @@ const WidgetConfigResponse: WidgetConfigReducerState = { { label: "Charlie", value: "3" }, ], defaultOptionValue: "1", + widgetName: "RadioGroup", }, ALERT_WIDGET: { alertType: "NOTIFICATION", @@ -84,6 +96,7 @@ const WidgetConfigResponse: WidgetConfigReducerState = { columns: 3, header: "", message: "", + widgetName: "Alert", }, }, configVersion: 1, diff --git a/app/client/src/sagas/WidgetOperationSagas.tsx b/app/client/src/sagas/WidgetOperationSagas.tsx index c5e856738c..1c5a08634d 100644 --- a/app/client/src/sagas/WidgetOperationSagas.tsx +++ b/app/client/src/sagas/WidgetOperationSagas.tsx @@ -47,7 +47,7 @@ export function* addChildSaga(addChildAction: ReduxAction) { rows, parentRowSpace, parentColumnSpace, - getNextWidgetName(type, widgets), + getNextWidgetName(defaultWidgetConfig.widgetName, widgets), defaultWidgetConfig, ); widgets[childWidget.widgetId] = childWidget; diff --git a/app/client/src/utils/AppsmithUtils.tsx b/app/client/src/utils/AppsmithUtils.tsx index ba3636bba0..dbd83854b3 100644 --- a/app/client/src/utils/AppsmithUtils.tsx +++ b/app/client/src/utils/AppsmithUtils.tsx @@ -12,7 +12,6 @@ import FontFaceObserver from "fontfaceobserver"; import PropertyControlRegistry from "./PropertyControlRegistry"; import WidgetBuilderRegistry from "./WidgetRegistry"; import { Property } from "../api/ActionAPI"; -import { WidgetType } from "../constants/WidgetConstants"; import { FlattenedWidgetProps } from "../reducers/entityReducers/canvasWidgetsReducer"; import _ from "lodash"; @@ -64,21 +63,18 @@ export const mapToPropList = (map: Record): Property[] => { }; export const getNextWidgetName = ( - type: WidgetType, + prefix: string, widgets: { [id: string]: FlattenedWidgetProps; }, ) => { - const prefix = type - .split("_") - .filter(token => token !== "WIDGET") - .join("") - .toLowerCase(); + const regex = new RegExp(`^${prefix}(\\d+)$`); const usedIndices: number[] = Object.values(widgets).map(widget => { - if (widget.type === type) { - const ind = widget.widgetName - ? parseInt(widget.widgetName.split(prefix)[1], 10) - : 0; + if (widget && widget.widgetName && regex.test(widget.widgetName)) { + const name = widget.widgetName || ""; + const matches = name.match(regex); + const ind = + matches && Array.isArray(matches) ? parseInt(matches[1], 10) : 0; return Number.isNaN(ind) ? 0 : ind; } return 0;