Merge branch 'feature/image' into 'release'

Feature/image

See merge request theappsmith/internal-tools-client!103

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")<StyledContainerProps>`
@@ -20,6 +21,7 @@ export const StyledContainer = styled("div")<StyledContainerProps>`
   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 => {

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)<StyledContainerProps>`
+    background-image: url("${props => {
+      return props.imageUrl;
+    }}");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+`;
+
+class ImageComponent extends React.Component<ImageComponentProps> {
+  render() {
+    return <StyledImage {...this.props}>{}</StyledImage>;
+  }
+}
+
+export interface ImageComponentProps extends ComponentProps {
+  imageUrl: string;
+  defaultImageUrl: string;
+}
+
+export default ImageComponent;

app/client/src/mockResponses/PropertyPaneConfigResponse.tsx

@@ -92,14 +92,9 @@ const PropertyPaneConfigResponse: PropertyPaneConfigState = {
           {
             id: "4.1",
             propertyName: "image",
-            label: "Image",
+            label: "Image Url",
-            controlType: "IMAGE_PICKER",
+            placeholderText: "Enter URL",
-          },
+            controlType: "INPUT_TEXT",
-          {
-            id: "4.2",
-            propertyName: "defaultImage",
-            label: "Default Image",
-            controlType: "IMAGE_PICKER",
           },
           {
             id: "4.3",

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", {
+    WidgetFactory.registerWidgetBuilder("IMAGE_WIDGET", {
-      buildWidget(widgetData: DropdownWidgetProps): JSX.Element {
+      buildWidget(widgetData: ImageWidgetProps): JSX.Element {
-        return <DropdownWidget {...widgetData} />;
+        return <ImageWidget {...widgetData} />;
       },
     });
     WidgetFactory.registerWidgetBuilder("TABLE_WIDGET", {

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<ImageWidgetProps, WidgetState> {
   getPageView() {
-    return <div />;
+    return (
+      <ImageComponent
+        widgetId={this.props.widgetId}
+        style={this.getPositionStyle()}
+        imageUrl={this.props.image}
+        defaultImageUrl={this.props.defaultImage}
+      />
+    );
   }
 
   getWidgetType(): WidgetType {

app/client/src/widgets/TableWidget.tsx

@@ -14,11 +14,11 @@ interface Column {
 }
 
 function constructColumns(data: object[]): Column[] {
-  let cols: Column[] = [];
+  const cols: Column[] = [];
-  let listItemWithAllProperties = {}
+  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<TableWidgetProps, WidgetState> {
       this.props.tableData ? ((this.props.tableData as any) as string) : "",
     );
 
-    let columns = constructColumns(tableData);
+    const columns = constructColumns(tableData);
     return (
       <AutoResizer>
         {({ width, height }: { width: number; height: number }) => (

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==