add : spinner widget

app/client/src/constants/WidgetConstants.tsx

@@ -5,7 +5,8 @@ export type WidgetType =
 	| "LIST_WIDGET"
 	| "INPUT_TEXT_WIDGET"
 	| "CALLOUT_WIDGET"
-	| "ICON_WIDGET";
+	| "ICON_WIDGET"
+	| "SPINNER_WIDGET";
 export type ContainerOrientation = "HORIZONTAL" | "VERTICAL";
 export type PositionType = "ABSOLUTE" | "CONTAINER_DIRECTION";
 export type CSSUnit =

app/client/src/editorComponents/IconComponent.tsx

@@ -28,7 +28,7 @@ class IconComponent extends React.Component<IIconComponentProps> {
 export interface IIconComponentProps extends IComponentProps {
   iconSize?: number;
   icon?: IconName;
-  intent?: Intent;
+  intent?: string;
   ellipsize?: boolean;
 }
 

app/client/src/editorComponents/SpinnerComponent.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { IComponentProps } from "./BaseComponent";
+import { Spinner, Intent } from "@blueprintjs/core";
+import styled from "../constants/DefaultTheme";
+
+const SpinnerContainer = styled("span")<ISpinnerComponentProps>`
+  color: ${props => props.theme.primaryColor};
+  position: ${props => props.style.positionType};
+  left: ${props => {
+    return props.style.xPosition + props.style.xPositionUnit;
+  }};
+  top: ${props => {
+    return props.style.yPosition + props.style.yPositionUnit;
+  }};
+`;
+
+class SpinnerComponent extends React.Component<ISpinnerComponentProps> {
+  render() {
+    return (
+      <SpinnerContainer {...this.props}>
+        <Spinner
+          size={this.props.size}
+          value={this.props.value}
+          intent={this.props.intent}
+        />
+      </SpinnerContainer>
+    );
+  }
+}
+
+export interface ISpinnerComponentProps extends IComponentProps {
+  size?: number;
+  value?: number;
+  intent?: Intent;
+  ellipsize?: boolean;
+}
+
+export default SpinnerComponent;

app/client/src/mockResponses/CanvasResponse.ts

@@ -20,7 +20,7 @@ const CanvasResponse: IContainerWidgetProps<any> = {
       text: "Lorem Ipsum"
     },
     {
-      widgetId: "1",
+      widgetId: "2",
       widgetType: "INPUT_TEXT_WIDGET",
       topRow: 1,
       leftColumn: 1,
@@ -35,7 +35,7 @@ const CanvasResponse: IContainerWidgetProps<any> = {
       size: "30"
     },
     {
-      widgetId: "1",
+      widgetId: "3",
       widgetType: "CALLOUT_WIDGET",
       topRow: 3,
       leftColumn: 1,
@@ -49,7 +49,7 @@ const CanvasResponse: IContainerWidgetProps<any> = {
       intent: "primary"
     },
     {
-      widgetId: "1",
+      widgetId: "4",
       widgetType: "ICON_WIDGET",
       topRow: 4,
       leftColumn: 4,
@@ -58,6 +58,15 @@ const CanvasResponse: IContainerWidgetProps<any> = {
       icon: "globe",
       iconSize: "20",
       intent: "primary"
+    },
+    {
+      widgetId: "5",
+      widgetType: "SPINNER_WIDGET",
+      topRow: 5,
+      leftColumn: 6,
+      bottomRow: 5,
+      rightColumn: 5,
+      size: 20
     }
   ],
   topRow: 0,

app/client/src/utils/WidgetRegistry.tsx

@@ -8,6 +8,7 @@ import InputTextWidget, {
 } from "../widgets/InputTextWidget";
 import CalloutWidget, { ICalloutWidgetProps } from "../widgets/CalloutWidget";
 import IconWidget, { IIconWidgetProps } from "../widgets/IconWidget";
+import SpinnerWidget, { ISpinnerWidgetProps } from "../widgets/SpinnerWidget";
 import WidgetFactory from "./WidgetFactory";
 import React from "react";
 
@@ -44,6 +45,12 @@ class WidgetBuilderRegistry {
         return <IconWidget {...widgetData} />;
       }
     });
+
+    WidgetFactory.registerWidgetBuilder("SPINNER_WIDGET", {
+      buildWidget(widgetData: ISpinnerWidgetProps): JSX.Element {
+        return <SpinnerWidget {...widgetData} />;
+      }
+    });
   }
 }
 

app/client/src/widgets/IconWidget.tsx

@@ -38,7 +38,7 @@ export interface IIconWidgetProps extends IWidgetProps {
   icon?: IconName;
   iconSize?: number;
   ellipsize?: boolean;
-  intent?: Intent;
+  intent?: string;
 }
 
 export default IconWidget;

app/client/src/widgets/SpinnerWidget.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget";
+import { WidgetType, CSSUnits } from "../constants/WidgetConstants";
+import { Spinner, Intent } from "@blueprintjs/core";
+import SpinnerComponent from "../editorComponents/SpinnerComponent";
+import _ from "lodash";
+
+class SpinnerWidget extends BaseWidget<ISpinnerWidgetProps, IWidgetState> {
+  constructor(widgetProps: ISpinnerWidgetProps) {
+    super(widgetProps);
+  }
+
+  getWidgetView() {
+    return (
+      <SpinnerComponent
+        style={{
+          positionType: "ABSOLUTE",
+          yPosition: this.props.topRow * this.props.parentRowSpace,
+          xPosition: this.props.leftColumn * this.props.parentColumnSpace,
+          xPositionUnit: CSSUnits.PIXEL,
+          yPositionUnit: CSSUnits.PIXEL
+        }}
+        widgetId={this.props.widgetId}
+        key={this.props.widgetId}
+        size={this.props.size}
+        value={this.props.value}
+        intent={this.props.intent}
+      />
+    );
+  }
+
+  getWidgetType(): WidgetType {
+    return "SPINNER_WIDGET";
+  }
+}
+
+export interface ISpinnerWidgetProps extends IWidgetProps {
+  size?: number;
+  value?: number;
+  ellipsize?: boolean;
+  intent?: Intent;
+}
+
+export default SpinnerWidget;