From d444b2e16971aafd1ea6661373c8df86a2ef6720 Mon Sep 17 00:00:00 2001 From: Satbir Singh Date: Fri, 18 Sep 2020 15:42:57 +0530 Subject: [PATCH 1/2] Adding onClick property for image widget. --- .../designSystems/appsmith/ImageComponent.tsx | 7 +++++ .../PropertyPaneConfigResponse.tsx | 15 +++++++++++ app/client/src/widgets/ImageWidget.tsx | 27 ++++++++++++++++++- 3 files changed, 48 insertions(+), 1 deletion(-) diff --git a/app/client/src/components/designSystems/appsmith/ImageComponent.tsx b/app/client/src/components/designSystems/appsmith/ImageComponent.tsx index 6338f36318..af7151e191 100644 --- a/app/client/src/components/designSystems/appsmith/ImageComponent.tsx +++ b/app/client/src/components/designSystems/appsmith/ImageComponent.tsx @@ -6,6 +6,8 @@ export interface StyledImageProps { defaultImageUrl: string; imageUrl?: string; backgroundColor?: string; + showHoverPointer?: boolean; + onClick?: (event: React.MouseEvent) => void; } export const StyledImage = styled.div< @@ -16,6 +18,8 @@ export const StyledImage = styled.div< position: relative; display: flex; flex-direction: "row"; + cursor: ${props => + props.showHoverPointer && props.onClick ? "pointer" : "inherit"}; background: ${props => props.backgroundColor}; background-image: url("${props => props.imageError ? props.defaultImageUrl : props.imageUrl}"); @@ -53,6 +57,7 @@ class ImageComponent extends React.Component< src={this.props.imageUrl} onError={this.onImageError} onLoad={this.onImageLoad} + onClick={this.props.onClick} > ); @@ -75,6 +80,8 @@ export interface ImageComponentProps extends ComponentProps { imageUrl: string; defaultImageUrl: string; isLoading: boolean; + showHoverPointer?: boolean; + onClick?: (event: React.MouseEvent) => void; } export default ImageComponent; diff --git a/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx b/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx index 968ce4d31e..8e7224261e 100644 --- a/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx +++ b/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx @@ -234,6 +234,21 @@ const PropertyPaneConfigResponse: PropertyPaneConfigsResponse["data"] = { }, ], }, + { + id: "3.2", + sectionName: "Actions", + children: [ + { + id: "3.2.1", + helpText: + "Triggers an action when a user changes the selected option", + propertyName: "onClick", + label: "onClick", + controlType: "ACTION_SELECTOR", + isJSConvertible: true, + }, + ], + }, ], RADIO_GROUP_WIDGET: [ { diff --git a/app/client/src/widgets/ImageWidget.tsx b/app/client/src/widgets/ImageWidget.tsx index 25d57d6c6e..9b76dbc333 100644 --- a/app/client/src/widgets/ImageWidget.tsx +++ b/app/client/src/widgets/ImageWidget.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget"; -import { WidgetType } from "constants/WidgetConstants"; +import { WidgetType, RenderModes } from "constants/WidgetConstants"; import ImageComponent from "components/designSystems/appsmith/ImageComponent"; import { WidgetPropertyValidationType, @@ -8,8 +8,14 @@ import { } from "utils/ValidationFactory"; import { VALIDATION_TYPES } from "constants/WidgetValidation"; import * as Sentry from "@sentry/react"; +import { EventType } from "constants/ActionConstants"; +import { TriggerPropertiesMap } from "utils/WidgetFactory"; class ImageWidget extends BaseWidget { + constructor(props: ImageWidgetProps) { + super(props); + this.onImageClick = this.onImageClick.bind(this); + } static getPropertyValidationMap(): WidgetPropertyValidationType { return { ...BASE_WIDGET_VALIDATION, @@ -18,17 +24,35 @@ class ImageWidget extends BaseWidget { defaultImage: VALIDATION_TYPES.TEXT, }; } + static getTriggerPropertyMap(): TriggerPropertiesMap { + return { + onClick: true, + }; + } getPageView() { return ( ); } + onImageClick() { + if (this.props.onClick) { + super.executeAction({ + dynamicString: this.props.onClick, + event: { + type: EventType.ON_CLICK, + }, + }); + } + } + getWidgetType(): WidgetType { return "IMAGE_WIDGET"; } @@ -40,6 +64,7 @@ export interface ImageWidgetProps extends WidgetProps { image: string; imageShape: ImageShape; defaultImage: string; + onClick?: string; } export default ImageWidget; From 9e5b99cde160a5e6011781198ec66b5003a4eda9 Mon Sep 17 00:00:00 2001 From: Abhinav Jha Date: Fri, 18 Sep 2020 15:57:49 +0530 Subject: [PATCH 2/2] Prime cut feature code for keyboard shortcut tests (#568) * Update cypress layoutDSL to include parentIds. Handle widget's parentId undefined scenario * handle tabs parsing error when deleting tabs widget --- app/client/cypress/fixtures/layoutdsl.json | 17 +++++++++---- app/client/src/sagas/WidgetOperationSagas.tsx | 24 ++++++++++++------- 2 files changed, 28 insertions(+), 13 deletions(-) diff --git a/app/client/cypress/fixtures/layoutdsl.json b/app/client/cypress/fixtures/layoutdsl.json index 0e02fb999d..ad74fa3c2d 100644 --- a/app/client/cypress/fixtures/layoutdsl.json +++ b/app/client/cypress/fixtures/layoutdsl.json @@ -35,6 +35,7 @@ "bottomRow": 9, "snapColumns": 16, "orientation": "VERTICAL", + "parentId": "0", "children": [ { "backgroundColor": "transparent", @@ -51,6 +52,7 @@ "bottomRow": 342, "snapColumns": 16, "orientation": "VERTICAL", + "parentId": "4kiuclj7on", "children": [ { "text": "Title", @@ -66,7 +68,8 @@ "rightColumn": 3, "topRow": 0, "bottomRow": 1, - "widgetId": "jnusumakb5" + "widgetId": "jnusumakb5", + "parentId": "xe6a0w50jz" } ], "widgetId": "xe6a0w50jz", @@ -92,6 +95,7 @@ "bottomRow": 23, "snapColumns": 16, "orientation": "VERTICAL", + "parentId": "0", "children": [ { "backgroundColor": "transparent", @@ -107,6 +111,7 @@ "topRow": 0, "bottomRow": 532, "snapColumns": 16, + "parentId": "9lr328fusr", "orientation": "VERTICAL", "children": [ { @@ -123,7 +128,8 @@ "rightColumn": 3, "topRow": 0, "bottomRow": 1, - "widgetId": "2p0avl6plv" + "widgetId": "2p0avl6plv", + "parentId": "p7cexs0qo5" }, { "isVisible": true, @@ -189,7 +195,7 @@ "topRow": 0, "shouldShowTabs": true, "bottomRow": 7, - "parentId": "xe6a0w50jz", + "parentId": "p7cexs0qo5", "widgetId": "wuzxcyyjma", "children": [ { @@ -258,6 +264,7 @@ "bottomRow": 9, "snapColumns": 16, "orientation": "VERTICAL", + "parentId": "0", "children": [ { "backgroundColor": "transparent", @@ -274,6 +281,7 @@ "bottomRow": 342, "snapColumns": 16, "orientation": "VERTICAL", + "parentId": "47gso3f7ll", "children": [ { "text": "Title", @@ -289,7 +297,8 @@ "rightColumn": 3, "topRow": 0, "bottomRow": 1, - "widgetId": "0tknsgos8i" + "widgetId": "0tknsgos8i", + "parentId": "nixoni01d8" } ], "widgetId": "nixoni01d8", diff --git a/app/client/src/sagas/WidgetOperationSagas.tsx b/app/client/src/sagas/WidgetOperationSagas.tsx index fffc68804c..d7e8650d4f 100644 --- a/app/client/src/sagas/WidgetOperationSagas.tsx +++ b/app/client/src/sagas/WidgetOperationSagas.tsx @@ -70,6 +70,7 @@ import { generateReactKey } from "utils/generators"; import { flashElementById } from "utils/helpers"; import AnalyticsUtil from "utils/AnalyticsUtil"; import { cloneDeep } from "lodash"; +import log from "loglevel"; function getChildWidgetProps( parent: FlattenedWidgetProps, @@ -358,15 +359,19 @@ export function* undoDeleteSaga(action: ReduxAction<{ widgetId: string }>) { if (widget.tabId && widget.type === WidgetTypes.CANVAS_WIDGET) { const parent = widgets[widget.parentId]; if (parent.tabs) { - const tabs = _.isString(parent.tabs) - ? JSON.parse(parent.tabs) - : parent.tabs; - tabs.push({ - id: widget.tabId, - widgetId: widget.widgetId, - label: widget.tabName || widget.widgetName, - }); - widgets[widget.parentId].tabs = JSON.stringify(tabs); + try { + const tabs = _.isString(parent.tabs) + ? JSON.parse(parent.tabs) + : parent.tabs; + tabs.push({ + id: widget.tabId, + widgetId: widget.widgetId, + label: widget.tabName || widget.widgetName, + }); + widgets[widget.parentId].tabs = JSON.stringify(tabs); + } catch (error) { + log.debug("Error deleting tabs widget: ", { error }); + } } else { parent.tabs = JSON.stringify([ { @@ -706,6 +711,7 @@ function* pasteWidgetSaga() { // the main container if ( selectedWidget.parentId !== MAIN_CONTAINER_WIDGET_ID && + widgets[selectedWidget.parentId] && widgets[selectedWidget.parentId].children && widgets[selectedWidget.parentId].children.length > 0 ) {