diff --git a/app/client/src/constants/WidgetConstants.tsx b/app/client/src/constants/WidgetConstants.tsx index c94ca3ca9a..5cad15c181 100644 --- a/app/client/src/constants/WidgetConstants.tsx +++ b/app/client/src/constants/WidgetConstants.tsx @@ -1,4 +1,4 @@ -export type WidgetType = "TEXT_WIDGET" | "IMAGE_WIDGET" | "CONTAINER_WIDGET" | "LIST_WIDGET" | "INPUT_TEXT_WIDGET" +export type WidgetType = "TEXT_WIDGET" | "IMAGE_WIDGET" | "CONTAINER_WIDGET" | "LIST_WIDGET" | "INPUT_TEXT_WIDGET" | "BUTTON_WIDGET" export type ContainerOrientation = "HORIZONTAL" | "VERTICAL" export type PositionType = "ABSOLUTE" | "CONTAINER_DIRECTION" export type CSSUnit = "px" | "cm" | "mm" | "in" | "pt" | "pc" | "em" | "ex" | "ch" | "rem" | "vw" | "vh" | "vmin" | "vmax" | "%" diff --git a/app/client/src/mockResponses/CanvasResponse.ts b/app/client/src/mockResponses/CanvasResponse.ts index 0e092f959a..8ccf6727a8 100644 --- a/app/client/src/mockResponses/CanvasResponse.ts +++ b/app/client/src/mockResponses/CanvasResponse.ts @@ -25,6 +25,15 @@ const CanvasResponse: IContainerWidgetProps = { bottomRow: 5, rightColumn: 5, text: "hey2" + }, + { + widgetId: "1", + widgetType: "BUTTON_WIDGET", + topRow: 6, + leftColumn: 5, + bottomRow: 5, + rightColumn: 5, + text: "hey2" } ], topRow: 0, diff --git a/app/client/src/utils/WidgetRegistry.tsx b/app/client/src/utils/WidgetRegistry.tsx index 45b81d7dc4..737e4defb9 100644 --- a/app/client/src/utils/WidgetRegistry.tsx +++ b/app/client/src/utils/WidgetRegistry.tsx @@ -5,6 +5,9 @@ import ContainerWidget, { import TextWidget, { ITextWidgetProps } from "../widgets/TextWidget" +import ButtonWidget, { + IButtonWidgetProps +} from "../widgets/ButtonWidget" import WidgetFactory from "./WidgetFactory" import React from "react" @@ -26,6 +29,14 @@ class WidgetBuilderRegistry { return } }) + + WidgetFactory.registerWidgetBuilder("BUTTON_WIDGET", { + buildWidget( + widgetData: IButtonWidgetProps + ): JSX.Element { + return + } + }) } } diff --git a/app/client/src/widgets/ButtonWidget.tsx b/app/client/src/widgets/ButtonWidget.tsx new file mode 100644 index 0000000000..6dabcd26b0 --- /dev/null +++ b/app/client/src/widgets/ButtonWidget.tsx @@ -0,0 +1,40 @@ +import * as React from "react" +import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget" +import { WidgetType, CSSUnits } from "../constants/WidgetConstants" +import ButtonComponent from "../editorComponents/ButtonComponent" +import _ from "lodash" +import WidgetFactory from "../utils/WidgetFactory"; + +class ButtonWidget extends BaseWidget { + constructor(widgetProps: IButtonWidgetProps) { + super(widgetProps) + } + + getWidgetView() { + return ( + + ) + } + + getWidgetType(): WidgetType { + return "BUTTON_WIDGET" + } +} + +export interface IButtonWidgetProps extends IWidgetProps { + text?: string + ellipsize?: boolean +} + +export default ButtonWidget