diff --git a/app/client/src/components/appsmith/ContainerComponent.tsx b/app/client/src/components/appsmith/ContainerComponent.tsx index 1d7f09a701..f861b70559 100644 --- a/app/client/src/components/appsmith/ContainerComponent.tsx +++ b/app/client/src/components/appsmith/ContainerComponent.tsx @@ -11,8 +11,9 @@ import React, { import { FocusContext } from "../../pages/Editor/Canvas"; import { getBorderCSSShorthand } from "../../constants/DefaultTheme"; -type StyledContainerProps = ContainerProps & { +export type StyledContainerProps = ContainerProps & { focus?: boolean; + imageUrl?: string; }; export const StyledContainer = styled("div")` @@ -20,6 +21,7 @@ export const StyledContainer = styled("div")` flex-direction: ${props => { return props.orientation === "HORIZONTAL" ? "row" : "column"; }}; + background: ${props => props.imageUrl} background: ${props => props.style.backgroundColor}; color: ${props => props.theme.colors.primary}; position: ${props => { diff --git a/app/client/src/components/appsmith/ImageComponent.tsx b/app/client/src/components/appsmith/ImageComponent.tsx new file mode 100644 index 0000000000..63038663d3 --- /dev/null +++ b/app/client/src/components/appsmith/ImageComponent.tsx @@ -0,0 +1,26 @@ +import * as React from "react"; +import { ComponentProps } from "../appsmith/BaseComponent"; +import { StyledContainer, StyledContainerProps } from "./ContainerComponent"; +import styled from "styled-components"; + +export const StyledImage = styled(StyledContainer)` + background-image: url("${props => { + return props.imageUrl; + }}"); + background-position: center; + background-repeat: no-repeat; + background-size: contain; +`; + +class ImageComponent extends React.Component { + render() { + return {}; + } +} + +export interface ImageComponentProps extends ComponentProps { + imageUrl: string; + defaultImageUrl: string; +} + +export default ImageComponent; diff --git a/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx b/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx index ed552f26a3..62bd4e65ba 100644 --- a/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx +++ b/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx @@ -92,14 +92,9 @@ const PropertyPaneConfigResponse: PropertyPaneConfigState = { { id: "4.1", propertyName: "image", - label: "Image", - controlType: "IMAGE_PICKER", - }, - { - id: "4.2", - propertyName: "defaultImage", - label: "Default Image", - controlType: "IMAGE_PICKER", + label: "Image Url", + placeholderText: "Enter URL", + controlType: "INPUT_TEXT", }, { id: "4.3", diff --git a/app/client/src/utils/WidgetRegistry.tsx b/app/client/src/utils/WidgetRegistry.tsx index f31bae375b..89f28273ff 100644 --- a/app/client/src/utils/WidgetRegistry.tsx +++ b/app/client/src/utils/WidgetRegistry.tsx @@ -13,8 +13,8 @@ import WidgetFactory from "./WidgetFactory"; import React from "react"; import ButtonWidget, { ButtonWidgetProps } from "../widgets/ButtonWidget"; import DropdownWidget, { DropdownWidgetProps } from "../widgets/DropdownWidget"; -import TableWidget, { TableWidgetProps } from '../widgets/TableWidget'; - +import ImageWidget, { ImageWidgetProps } from "../widgets/ImageWidget"; +import TableWidget, { TableWidgetProps } from "../widgets/TableWidget"; class WidgetBuilderRegistry { static registerWidgetBuilders() { WidgetFactory.registerWidgetBuilder("CONTAINER_WIDGET", { @@ -65,9 +65,9 @@ class WidgetBuilderRegistry { }, }); - WidgetFactory.registerWidgetBuilder("DROP_DOWN_WIDGET", { - buildWidget(widgetData: DropdownWidgetProps): JSX.Element { - return ; + WidgetFactory.registerWidgetBuilder("IMAGE_WIDGET", { + buildWidget(widgetData: ImageWidgetProps): JSX.Element { + return ; }, }); WidgetFactory.registerWidgetBuilder("TABLE_WIDGET", { diff --git a/app/client/src/widgets/ImageWidget.tsx b/app/client/src/widgets/ImageWidget.tsx index d6813b5157..384a30e66f 100644 --- a/app/client/src/widgets/ImageWidget.tsx +++ b/app/client/src/widgets/ImageWidget.tsx @@ -1,10 +1,18 @@ import * as React from "react"; import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget"; import { WidgetType } from "../constants/WidgetConstants"; +import ImageComponent from "../components/appsmith/ImageComponent"; class ImageWidget extends BaseWidget { getPageView() { - return
; + return ( + + ); } getWidgetType(): WidgetType { diff --git a/app/client/src/widgets/TableWidget.tsx b/app/client/src/widgets/TableWidget.tsx index 5e37fc189b..03cf1dd925 100644 --- a/app/client/src/widgets/TableWidget.tsx +++ b/app/client/src/widgets/TableWidget.tsx @@ -14,11 +14,11 @@ interface Column { } function constructColumns(data: object[]): Column[] { - let cols: Column[] = []; - let listItemWithAllProperties = {} + const cols: Column[] = []; + const listItemWithAllProperties = {}; data.forEach(dataItem => { - Object.assign(listItemWithAllProperties, dataItem) - }) + Object.assign(listItemWithAllProperties, dataItem); + }); forIn(listItemWithAllProperties, (value, key) => { cols.push({ key: key, @@ -46,7 +46,7 @@ class TableWidget extends BaseWidget { this.props.tableData ? ((this.props.tableData as any) as string) : "", ); - let columns = constructColumns(tableData); + const columns = constructColumns(tableData); return ( {({ width, height }: { width: number; height: number }) => ( diff --git a/app/client/yarn.lock b/app/client/yarn.lock index aae420ba52..0fc75a963f 100644 --- a/app/client/yarn.lock +++ b/app/client/yarn.lock @@ -7494,7 +7494,7 @@ mem@^4.0.0: mimic-fn "^2.0.0" p-is-promise "^2.0.0" -memoize-one@^5.0.0: +"memoize-one@>=3.1.1 <6", memoize-one@^5.0.0: version "5.1.1" resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0" integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA== @@ -9555,7 +9555,7 @@ prompts@^2.0.1: kleur "^3.0.3" sisteransi "^1.0.3" -prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@15.7.2, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.0, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==