diff --git a/app/client/src/components/designSystems/appsmith/ImageComponent.tsx b/app/client/src/components/designSystems/appsmith/ImageComponent.tsx index fd7def707b..19ff34ae4f 100644 --- a/app/client/src/components/designSystems/appsmith/ImageComponent.tsx +++ b/app/client/src/components/designSystems/appsmith/ImageComponent.tsx @@ -3,9 +3,13 @@ import { ComponentProps } from "./BaseComponent"; import { StyledContainer, StyledContainerProps } from "./StyledContainer"; import styled from "styled-components"; -export const StyledImage = styled(StyledContainer)` +export interface StyledImageProps extends StyledContainerProps { + defaultImageUrl: string; +} + +export const StyledImage = styled(StyledContainer)` background-image: url("${props => { - return props.imageUrl; + return props.imageUrl || props.defaultImageUrl; }}"); background-position: center; background-repeat: no-repeat; diff --git a/app/client/src/mockResponses/WidgetConfigResponse.tsx b/app/client/src/mockResponses/WidgetConfigResponse.tsx index 4301b4af8f..73c87e73a2 100644 --- a/app/client/src/mockResponses/WidgetConfigResponse.tsx +++ b/app/client/src/mockResponses/WidgetConfigResponse.tsx @@ -15,11 +15,12 @@ const WidgetConfigResponse: WidgetConfigReducerState = { text: "Label me", textStyle: "LABEL", rows: 1, - columns: 2, + columns: 3, widgetName: "Text", }, IMAGE_WIDGET: { - defaultImage: "", + defaultImage: + "https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img-5.jpg", imageShape: "RECTANGLE", image: "", rows: 3, @@ -61,10 +62,60 @@ const WidgetConfigResponse: WidgetConfigReducerState = { widgetName: "DatePicker", }, TABLE_WIDGET: { - rows: 5, - columns: 7, + rows: 10, + columns: 15, label: "Data", widgetName: "Table", + tableData: [ + { + Id: 7, + Email: "michael.lawson@reqres.in", + "First Name": "Michael", + "Last Name": "Lawson", + Avatar: + "https://s3.amazonaws.com/uifaces/faces/twitter/follettkyle/128.jpg", + }, + { + Id: 8, + Email: "lindsay.ferguson@reqres.in", + "First Name": "Lindsay", + "Last Name": "Ferguson", + Avatar: + "https://s3.amazonaws.com/uifaces/faces/twitter/araa3185/128.jpg", + }, + { + Id: 9, + Email: "tobias.funke@reqres.in", + "First Name": "Tobias", + "Last Name": "Funke", + Avatar: + "https://s3.amazonaws.com/uifaces/faces/twitter/vivekprvr/128.jpg", + }, + { + Id: 10, + Email: "byron.fields@reqres.in", + "First Name": "Byron", + "Last Name": "Fields", + Avatar: + "https://s3.amazonaws.com/uifaces/faces/twitter/russoedu/128.jpg", + }, + { + Id: 11, + Email: "george.edwards@reqres.in", + "First Name": "George", + "Last Name": "Edwards", + Avatar: + "https://s3.amazonaws.com/uifaces/faces/twitter/mrmoiree/128.jpg", + }, + { + Id: 12, + Email: "rachel.howell@reqres.in", + "First Name": "Rachel", + "Last Name": "Howell", + Avatar: + "https://s3.amazonaws.com/uifaces/faces/twitter/hebertialmeida/128.jpg", + }, + ], }, DROP_DOWN_WIDGET: { rows: 1,