Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

WIP: Fix eslint errors

Browse Source
This commit is contained in:
Abhinav Jha 2019-09-09 14:38:54 +05:30
parent 2c34b6d09b
commit b9718bdaec
56 changed files with 767 additions and 695 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/client/.eslintrc.js
View File

@ -1,10 +1,3 @@
/*
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"prettier/@typescript-eslint",
"plugin:prettier/recommended"
*/
module.exports = { module.exports = {
parser: '@typescript-eslint/parser', parser: '@typescript-eslint/parser',
plugins: ["react", "@typescript-eslint", "prettier"], plugins: ["react", "@typescript-eslint", "prettier"],
@ -22,8 +15,8 @@ module.exports = {
} }
}, },
rules: { rules: {
"@typescript-eslint/explicit-function-return-type": "off", "@typescript-eslint/explicit-function-return-type": 0,
"@typescript-eslint/no-unexpected-multiline": "on", "@typescript-eslint/no-explicit-any": 0
}, },
settings: { settings: {
react: { react: {

3
app/client/package.json
View File

@ -52,10 +52,11 @@
"typescript": "^3.2.4" "typescript": "^3.2.4"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "eslint src/**/*.tsx && react-scripts start",
"build": "react-scripts build", "build": "react-scripts build",
"test": "react-scripts test", "test": "react-scripts test",
"eject": "react-scripts eject", "eject": "react-scripts eject",
"lint": "eslint src/**/*.tsx",
"flow": "flow" "flow": "flow"
}, },
"resolutions": { "resolutions": {

44
app/client/src/actions/pageActions.tsx
View File

@ -1,37 +1,43 @@
import { import { ReduxAction, ActionTypes } from "../constants/ActionConstants";
ReduxAction, import { PageRequest } from "../api/PageApi";
ActionTypes
} from "../constants/ActionConstants"
import { PageRequest } from "../api/PageApi"
import { RenderMode } from "../constants/WidgetConstants"; import { RenderMode } from "../constants/WidgetConstants";
import { IWidgetProps } from "../widgets/BaseWidget"; import { WidgetProps } from "../widgets/BaseWidget";
export const fetchPage = (pageId: string, renderMode: RenderMode): ReduxAction<PageRequest> => { export const fetchPage = (
pageId: string,
renderMode: RenderMode,
): ReduxAction<PageRequest> => {
return { return {
type: ActionTypes.FETCH_PAGE, type: ActionTypes.FETCH_PAGE,
payload: { payload: {
pageId: pageId, pageId: pageId,
renderMode: renderMode renderMode: renderMode,
} },
} };
} };
export const addWidget = (pageId: string, widget: IWidgetProps): ReduxAction<{ pageId: string, widget: IWidgetProps}> => { export const addWidget = (
pageId: string,
widget: WidgetProps,
): ReduxAction<{ pageId: string; widget: WidgetProps }> => {
return { return {
type: ActionTypes.ADD_PAGE_WIDGET, type: ActionTypes.ADD_PAGE_WIDGET,
payload: { payload: {
pageId, pageId,
widget, widget,
} },
} };
} };
export const removeWidget = (pageId: string, widgetId: string): ReduxAction<{ pageId: string, widgetId: string}> => { export const removeWidget = (
pageId: string,
widgetId: string,
): ReduxAction<{ pageId: string; widgetId: string }> => {
return { return {
type: ActionTypes.REMOVE_PAGE_WIDGET, type: ActionTypes.REMOVE_PAGE_WIDGET,
payload: { payload: {
pageId, pageId,
widgetId, widgetId,
} },
} };
} };

32
app/client/src/actions/widgetCardsPaneActions.tsx
View File

@ -1,30 +1,30 @@
import { import { ActionTypes } from "../constants/ActionConstants";
ActionTypes import { WidgetCardProps } from "../widgets/BaseWidget";
} from "../constants/ActionConstants"
import { WidgetCardProps } from '../widgets/BaseWidget'
export const fetchWidgetCards = () => { export const fetchWidgetCards = () => {
return { return {
type: ActionTypes.FETCH_WIDGET_CARDS type: ActionTypes.FETCH_WIDGET_CARDS,
} };
} };
export const errorFetchingWidgetCards = (error: any) => { export const errorFetchingWidgetCards = (error: any) => {
return { return {
type: ActionTypes.ERROR_FETCHING_WIDGET_CARDS, type: ActionTypes.ERROR_FETCHING_WIDGET_CARDS,
error error,
} };
} };
export const successFetchingWidgetCards = (cards: { [id: string]: WidgetCardProps[] }) => { export const successFetchingWidgetCards = (cards: {
[id: string]: WidgetCardProps[];
}) => {
return { return {
type: ActionTypes.SUCCESS_FETCHING_WIDGET_CARDS, type: ActionTypes.SUCCESS_FETCHING_WIDGET_CARDS,
cards cards,
} };
} };
export default { export default {
fetchWidgetCards, fetchWidgetCards,
errorFetchingWidgetCards, errorFetchingWidgetCards,
successFetchingWidgetCards successFetchingWidgetCards,
} };

51
app/client/src/api/Api.tsx
View File

@ -1,66 +1,69 @@
import _ from "lodash" import _ from "lodash";
// import axios from "axios";
import { import {
BASE_URL, BASE_URL,
REQUEST_TIMEOUT_MS, REQUEST_TIMEOUT_MS,
REQUEST_HEADERS REQUEST_HEADERS,
} from "../constants/ApiConstants" } from "../constants/ApiConstants";
const axios = require("axios") const axios = require("axios");
const axiosInstance = axios.create({ const axiosInstance = axios.create({
baseURL: BASE_URL, baseURL: BASE_URL,
timeout: REQUEST_TIMEOUT_MS, timeout: REQUEST_TIMEOUT_MS,
headers: REQUEST_HEADERS headers: REQUEST_HEADERS,
}) });
axiosInstance.interceptors.response.use( axiosInstance.interceptors.response.use(
function(response: any) { function(response: any) {
// Do something with response data // Do something with response data
return response.data return response.data;
}, },
function(error: any) { function(error: any) {
if (error.response) { if (error.response) {
// The request was made and the server responded with a status code // The request was made and the server responded with a status code
// that falls out of the range of 2xx // that falls out of the range of 2xx
console.log(error.response.data) console.log(error.response.data);
console.log(error.response.status) console.log(error.response.status);
console.log(error.response.headers) console.log(error.response.headers);
} else if (error.request) { } else if (error.request) {
// The request was made but no response was received // The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js // http.ClientRequest in node.js
console.log(error.request) console.log(error.request);
} else { } else {
// Something happened in setting up the request that triggered an Error // Something happened in setting up the request that triggered an Error
console.log("Error", error.message) console.log("Error", error.message);
} }
console.log(error.config) console.log(error.config);
return Promise.reject(error) return Promise.reject(error);
} },
) );
class Api { class Api {
static get(url: string, queryParams: any) { static get(url: string, queryParams: any) {
return axiosInstance.get(url + this.convertObjectToQueryParams(queryParams)) return axiosInstance.get(
url + this.convertObjectToQueryParams(queryParams),
);
} }
static post(url: string, queryParams?: any, body?: any) { static post(url: string, queryParams?: any, body?: any) {
return axiosInstance.post( return axiosInstance.post(
url + this.convertObjectToQueryParams(queryParams), url + this.convertObjectToQueryParams(queryParams),
body body,
) );
} }
static convertObjectToQueryParams(object: any): string { static convertObjectToQueryParams(object: any): string {
if (!_.isNil(object)) { if (!_.isNil(object)) {
const paramArray: string[] = _.map(_.keys(object), key => { const paramArray: string[] = _.map(_.keys(object), key => {
return encodeURIComponent(key) + "=" + encodeURIComponent(object[key]) return encodeURIComponent(key) + "=" + encodeURIComponent(object[key]);
}) });
return "?" + _.join(paramArray, "&") return "?" + _.join(paramArray, "&");
} else { } else {
return "" return "";
} }
} }
} }
export default Api export default Api;

12
app/client/src/api/ApiRequests.tsx
View File

@ -1,11 +1,9 @@
import { ContentType, DataType, EncodingType } from "../constants/ApiConstants"; import { ContentType, DataType } from "../constants/ApiConstants";
export interface ApiHeaders { export interface ApiHeaders {
Accept: ContentType Accept: ContentType;
"Content-Type": ContentType "Content-Type": ContentType;
dataType: DataType dataType: DataType;
} }
export interface ApiRequest { export {};
}

6
app/client/src/api/ApiResponses.tsx
View File

@ -1,9 +1,9 @@
export type ApiErrorCodes = "INVALID_REQUEST" | "UNKNOWN" export type ApiErrorCodes = "INVALID_REQUEST" | "UNKNOWN";
export interface ResponseMeta { export interface ResponseMeta {
errorCode?: ApiErrorCodes errorCode?: ApiErrorCodes;
} }
export interface ApiResponse { export interface ApiResponse {
responseMeta: ResponseMeta responseMeta: ResponseMeta;
} }

16
app/client/src/api/PageApi.tsx
View File

@ -1,6 +1,6 @@
import Api from "./Api" import Api from "./Api";
import { ContainerWidgetProps } from "../widgets/ContainerWidget" import { ContainerWidgetProps } from "../widgets/ContainerWidget";
import { ApiResponse } from "./ApiResponses" import { ApiResponse } from "./ApiResponses";
import { RenderMode } from "../constants/WidgetConstants"; import { RenderMode } from "../constants/WidgetConstants";
export interface PageRequest { export interface PageRequest {
@ -21,17 +21,15 @@ export interface SavePageResponse {
} }
class PageApi extends Api { class PageApi extends Api {
static url = "/page" static url = "/page";
static fetchPage(pageRequest: PageRequest): Promise<PageResponse> { static fetchPage(pageRequest: PageRequest): Promise<PageResponse> {
return Api.get(PageApi.url + "/" + pageRequest.pageId, pageRequest) return Api.get(PageApi.url + "/" + pageRequest.pageId, pageRequest);
} }
static savePage(savePageRequest: SavePageRequest): Promise<PageResponse> { static savePage(savePageRequest: SavePageRequest): Promise<PageResponse> {
return Api.post(PageApi.url, undefined, savePageRequest) return Api.post(PageApi.url, undefined, savePageRequest);
} }
} }
export default PageApi;
export default PageApi

15
app/client/src/api/WidgetCardsPaneApi.tsx
View File

@ -1,17 +1,16 @@
import Api from "./Api" import Api from "./Api";
import { WidgetCardProps } from "../widgets/BaseWidget" import { WidgetCardProps } from "../widgets/BaseWidget";
export interface WidgetCardsPaneResponse { export interface WidgetCardsPaneResponse {
cards: { [id: string]: WidgetCardProps[]} cards: { [id: string]: WidgetCardProps[] };
} }
export interface WidgetCardsPaneRequest {} // export interface WidgetCardsPaneRequest {}
class WidgetCardsPaneApi extends Api { class WidgetCardsPaneApi extends Api {
static url = "/widgetCards" static url = "/widgetCards";
static fetchWidgetCards(): Promise<WidgetCardsPaneResponse> { static fetchWidgetCards(): Promise<WidgetCardsPaneResponse> {
return Api.get(WidgetCardsPaneApi.url, {}) return Api.get(WidgetCardsPaneApi.url, {});
} }
} }
export default WidgetCardsPaneApi;
export default WidgetCardsPaneApi

14
app/client/src/constants/ActionConstants.tsx
View File

@ -1,5 +1,5 @@
// import ContainerWidget from "../widgets/ContainerWidget" // import ContainerWidget from "../widgets/ContainerWidget"
import { IWidgetProps, WidgetCardProps } from "../widgets/BaseWidget" import { WidgetProps, WidgetCardProps } from "../widgets/BaseWidget";
export type ActionType = export type ActionType =
| "UPDATE_CANVAS" | "UPDATE_CANVAS"
@ -18,7 +18,7 @@ export type ActionType =
| "SUCCESS_FETCHING_WIDGET_CARDS" | "SUCCESS_FETCHING_WIDGET_CARDS"
| "ERROR_FETCHING_WIDGET_CARDS" | "ERROR_FETCHING_WIDGET_CARDS"
| "ADD_PAGE_WIDGET" | "ADD_PAGE_WIDGET"
| "REMOVE_PAGE_WIDGET" | "REMOVE_PAGE_WIDGET";
export const ActionTypes: { [id: string]: ActionType } = { export const ActionTypes: { [id: string]: ActionType } = {
UPDATE_CANVAS: "UPDATE_CANVAS", UPDATE_CANVAS: "UPDATE_CANVAS",
@ -37,8 +37,8 @@ export const ActionTypes: { [id: string]: ActionType } = {
SUCCESS_FETCHING_WIDGET_CARDS: "SUCCESS_FETCHING_WIDGET_CARDS", SUCCESS_FETCHING_WIDGET_CARDS: "SUCCESS_FETCHING_WIDGET_CARDS",
ERROR_FETCHING_WIDGET_CARDS: "ERROR_FETCHING_WIDGET_CARDS", ERROR_FETCHING_WIDGET_CARDS: "ERROR_FETCHING_WIDGET_CARDS",
ADD_PAGE_WIDGET: "ADD_PAGE_WIDGET", ADD_PAGE_WIDGET: "ADD_PAGE_WIDGET",
REMOVE_PAGE_WIDGET: "REMOVE_PAGE_WIDGET" REMOVE_PAGE_WIDGET: "REMOVE_PAGE_WIDGET",
} };
export interface ReduxAction<T> { export interface ReduxAction<T> {
type: ActionType; type: ActionType;
@ -47,13 +47,13 @@ export interface ReduxAction<T> {
export interface LoadCanvasPayload { export interface LoadCanvasPayload {
pageWidgetId: string; pageWidgetId: string;
widgets: { [widgetId: string]: IWidgetProps }; widgets: { [widgetId: string]: WidgetProps };
} }
export interface LoadWidgetPanePayload { export interface LoadWidgetPanePayload {
widgets: IWidgetProps[]; widgets: WidgetProps[];
} }
export interface LoadWidgetCardsPanePayload { export interface LoadWidgetCardsPanePayload {
cards: { [id: string]: WidgetCardProps[] } cards: { [id: string]: WidgetCardProps[] };
} }

22
app/client/src/constants/ApiConstants.tsx
View File

@ -1,19 +1,23 @@
import { ApiHeaders } from "../api/ApiRequests"; import { ApiHeaders } from "../api/ApiRequests";
export type DataType = "json" | "xml" export type DataType = "json" | "xml";
export type ContentType = "application/json" | "application/x-www-form-urlencoded" export type ContentType =
export type EncodingType = "gzip" | "application/json"
| "application/x-www-form-urlencoded";
export type EncodingType = "gzip";
export const PROD_BASE_URL = "https://mobtools.com/api/" export const PROD_BASE_URL = "https://mobtools.com/api/";
export const MOCK_BASE_URL = "https://f78ff9dd-2c08-45f1-9bf9-8c670a1bb696.mock.pstmn.io" export const MOCK_BASE_URL =
export const STAGE_BASE_URL = "https://14157cb0-190f-4082-a791-886a8df05930.mock.pstmn.io" "https://f78ff9dd-2c08-45f1-9bf9-8c670a1bb696.mock.pstmn.io";
export const BASE_URL = MOCK_BASE_URL export const STAGE_BASE_URL =
export const REQUEST_TIMEOUT_MS = 2000 "https://14157cb0-190f-4082-a791-886a8df05930.mock.pstmn.io";
export const BASE_URL = MOCK_BASE_URL;
export const REQUEST_TIMEOUT_MS = 2000;
export const REQUEST_HEADERS: ApiHeaders = { export const REQUEST_HEADERS: ApiHeaders = {
Accept: "application/json", Accept: "application/json",
"Content-Type": "application/json", "Content-Type": "application/json",
dataType: "json", dataType: "json",
} };
export interface APIException { export interface APIException {
error: number; error: number;

2
app/client/src/constants/StyleConstants.tsx
View File

@ -1 +1 @@
export default {} export default {};

16
app/client/src/constants/ThirdPartyConstants.tsx
View File

@ -1,6 +1,12 @@
export type ENVIRONMENT = "PRODUCTION" | "STAGING" | "LOCAL" export type ENVIRONMENT = "PRODUCTION" | "STAGING" | "LOCAL";
export const SENTRY_PROD_CONFIG = { dsn: "https://a63362b692d64edeb175741f1f80b091@sentry.io/1546547", environment: 'Production' } export const SENTRY_PROD_CONFIG = {
export const SENTRY_STAGE_CONFIG = { dsn: "https://a63362b692d64edeb175741f1f80b091@sentry.io/1546547", environment: 'Staging' } dsn: "https://a63362b692d64edeb175741f1f80b091@sentry.io/1546547",
environment: "Production",
};
export const SENTRY_STAGE_CONFIG = {
dsn: "https://a63362b692d64edeb175741f1f80b091@sentry.io/1546547",
environment: "Staging",
};
export const HOTJAR_PROD_HJID = "1465835" export const HOTJAR_PROD_HJID = "1465835";
export const HOTJAR_PROD_HJSV = "6" export const HOTJAR_PROD_HJSV = "6";

22
app/client/src/constants/WidgetConstants.tsx
View File

@ -14,17 +14,17 @@ export type WidgetType =
| "CHECKBOX_WIDGET" | "CHECKBOX_WIDGET"
| "RADIO_GROUP_WIDGET" | "RADIO_GROUP_WIDGET"
| "INPUT_WIDGET" | "INPUT_WIDGET"
| "TOGGLE_WIDGET" | "TOGGLE_WIDGET";
export const WidgetTypes: {[id: string]: WidgetType } = { export const WidgetTypes: { [id: string]: WidgetType } = {
BUTTON_WIDGET: "BUTTON_WIDGET", BUTTON_WIDGET: "BUTTON_WIDGET",
TEXT_WIDGET: "TEXT_WIDGET", TEXT_WIDGET: "TEXT_WIDGET",
INPUT_WIDGET: "INPUT_WIDGET", INPUT_WIDGET: "INPUT_WIDGET",
TOGGLE_WIDGET: "TOGGLE_WIDGET", TOGGLE_WIDGET: "TOGGLE_WIDGET",
} };
export type ContainerOrientation = "HORIZONTAL" | "VERTICAL" export type ContainerOrientation = "HORIZONTAL" | "VERTICAL";
export type PositionType = "ABSOLUTE" | "CONTAINER_DIRECTION" export type PositionType = "ABSOLUTE" | "CONTAINER_DIRECTION";
export type CSSUnit = export type CSSUnit =
| "px" | "px"
| "cm" | "cm"
@ -40,23 +40,23 @@ export type CSSUnit =
| "vh" | "vh"
| "vmin" | "vmin"
| "vmax" | "vmax"
| "%" | "%";
export type RenderMode = export type RenderMode =
| "COMPONENT_PANE" | "COMPONENT_PANE"
| "CANVAS" | "CANVAS"
| "PAGE" | "PAGE"
| "CANVAS_SELECTED" | "CANVAS_SELECTED";
export const RenderModes: { [id: string]: RenderMode } = { export const RenderModes: { [id: string]: RenderMode } = {
COMPONENT_PANE: "COMPONENT_PANE", COMPONENT_PANE: "COMPONENT_PANE",
CANVAS: "CANVAS", CANVAS: "CANVAS",
PAGE: "PAGE", PAGE: "PAGE",
CANVAS_SELECTED: "CANVAS_SELECTED" CANVAS_SELECTED: "CANVAS_SELECTED",
} };
export const CSSUnits: { [id: string]: CSSUnit } = { export const CSSUnits: { [id: string]: CSSUnit } = {
PIXEL: "px", PIXEL: "px",
RELATIVE_FONTSIZE: "rem", RELATIVE_FONTSIZE: "rem",
RELATIVE_PARENT: "%" RELATIVE_PARENT: "%",
} };

31
app/client/src/editorComponents/BaseComponent.tsx
View File

@ -1,5 +1,5 @@
import { Component } from "react" import { Component } from "react";
import { PositionType, CSSUnit } from "../constants/WidgetConstants" import { PositionType, CSSUnit } from "../constants/WidgetConstants";
import { Color } from "../constants/DefaultTheme"; import { Color } from "../constants/DefaultTheme";
/*** /***
@ -8,22 +8,21 @@ import { Color } from "../constants/DefaultTheme";
abstract class BaseComponent<T extends ComponentProps> extends Component<T> {} abstract class BaseComponent<T extends ComponentProps> extends Component<T> {}
export interface BaseStyle { export interface BaseStyle {
height?: number; height?: number;
width?: number; width?: number;
positionType: PositionType; positionType: PositionType;
xPosition: number; xPosition: number;
yPosition: number; yPosition: number;
xPositionUnit: CSSUnit; xPositionUnit: CSSUnit;
yPositionUnit: CSSUnit; yPositionUnit: CSSUnit;
heightUnit?: CSSUnit; heightUnit?: CSSUnit;
widthUnit?: CSSUnit; widthUnit?: CSSUnit;
backgroundColor?: Color; backgroundColor?: Color;
} }
export interface ComponentProps { export interface ComponentProps {
widgetId: string; widgetId: string;
style: BaseStyle; style: BaseStyle;
} }
export default BaseComponent export default BaseComponent;

16
app/client/src/editorComponents/BreadcrumbsComponent.tsx
View File

@ -1,11 +1,7 @@
import * as React from "react" import * as React from "react";
import { ComponentProps } from "./BaseComponent" import { ComponentProps } from "./BaseComponent";
import { import { Boundary, Breadcrumbs, IBreadcrumbProps } from "@blueprintjs/core";
Boundary, import { Container } from "./ContainerComponent";
Breadcrumbs,
IBreadcrumbProps
} from "@blueprintjs/core"
import { Container } from "./ContainerComponent"
class BreadcrumbsComponent extends React.Component<BreadcrumbsComponentProps> { class BreadcrumbsComponent extends React.Component<BreadcrumbsComponentProps> {
render() { render() {
@ -18,7 +14,7 @@ class BreadcrumbsComponent extends React.Component<BreadcrumbsComponentProps> {
className={this.props.className} className={this.props.className}
/> />
</Container> </Container>
) );
} }
} }
@ -30,4 +26,4 @@ export interface BreadcrumbsComponentProps extends ComponentProps {
items?: IBreadcrumbProps[]; items?: IBreadcrumbProps[];
} }
export default BreadcrumbsComponent export default BreadcrumbsComponent;

20
app/client/src/editorComponents/ButtonComponent.tsx
View File

@ -1,20 +1,20 @@
import * as React from "react" import * as React from "react";
import { Button, MaybeElement } from "@blueprintjs/core" import { Button, MaybeElement } from "@blueprintjs/core";
import { ITextComponentProps } from "./TextComponent" import { TextComponentProps } from "./TextComponent";
import { Container } from "./ContainerComponent" import { Container } from "./ContainerComponent";
class ButtonComponent extends React.Component<IButtonComponentProps> { class ButtonComponent extends React.Component<ButtonComponentProps> {
render() { render() {
return ( return (
<Container {...this.props}> <Container {...this.props}>
<Button icon={this.props.icon}>{this.props.text}</Button> <Button icon={this.props.icon}>{this.props.text}</Button>
</Container> </Container>
) );
} }
} }
interface IButtonComponentProps extends ITextComponentProps { interface ButtonComponentProps extends TextComponentProps {
icon?: MaybeElement icon?: MaybeElement;
} }
export default ButtonComponent export default ButtonComponent;

26
app/client/src/editorComponents/CalloutComponent.tsx
View File

@ -1,8 +1,8 @@
import * as React from "react" import * as React from "react";
import { ComponentProps } from "./BaseComponent" import { ComponentProps } from "./BaseComponent";
import { Callout, Intent } from "@blueprintjs/core" import { Callout, Intent } from "@blueprintjs/core";
import { Container } from "./ContainerComponent" import { Container } from "./ContainerComponent";
class CalloutComponent extends React.Component<ICalloutComponentProps> { class CalloutComponent extends React.Component<CalloutComponentProps> {
render() { render() {
return ( return (
<Container {...this.props}> <Container {...this.props}>
@ -13,16 +13,16 @@ class CalloutComponent extends React.Component<ICalloutComponentProps> {
{this.props.description} {this.props.description}
</Callout> </Callout>
</Container> </Container>
) );
} }
} }
export interface ICalloutComponentProps extends ComponentProps { export interface CalloutComponentProps extends ComponentProps {
id?: string id?: string;
title?: string title?: string;
description?: string description?: string;
intent?: Intent intent?: Intent;
ellipsize?: boolean ellipsize?: boolean;
} }
export default CalloutComponent export default CalloutComponent;

6
app/client/src/editorComponents/CheckboxComponent.tsx
View File

@ -2,12 +2,13 @@ import * as React from "react";
import { ComponentProps } from "./BaseComponent"; import { ComponentProps } from "./BaseComponent";
import { Checkbox } from "@blueprintjs/core"; import { Checkbox } from "@blueprintjs/core";
import { Container } from "./ContainerComponent"; import { Container } from "./ContainerComponent";
class CheckboxComponent extends React.Component<ICheckboxComponentProps> { class CheckboxComponent extends React.Component<CheckboxComponentProps> {
render() { render() {
return ( return (
<Container {...this.props}> <Container {...this.props}>
{this.props.items.map(item => ( {this.props.items.map(item => (
<Checkbox <Checkbox
key={item.key}
label={item.label} label={item.label}
defaultIndeterminate={item.defaultIndeterminate} defaultIndeterminate={item.defaultIndeterminate}
value={item.value} value={item.value}
@ -18,8 +19,9 @@ class CheckboxComponent extends React.Component<ICheckboxComponentProps> {
} }
} }
export interface ICheckboxComponentProps extends ComponentProps { export interface CheckboxComponentProps extends ComponentProps {
items: Array<{ items: Array<{
key: string;
label: string; label: string;
defaultIndeterminate: boolean; defaultIndeterminate: boolean;
value: number | string; value: number | string;

34
app/client/src/editorComponents/ContainerComponent.tsx
View File

@ -1,26 +1,30 @@
import { ComponentProps } from "./BaseComponent"; import { ComponentProps } from "./BaseComponent";
import { ContainerOrientation } from "../constants/WidgetConstants"; import { ContainerOrientation } from "../constants/WidgetConstants";
import styled from "../constants/DefaultTheme"; import styled from "../constants/DefaultTheme";
import { useDrop } from "react-dnd" import { useDrop } from "react-dnd";
import { WidgetTypes } from "../constants/WidgetConstants" import { WidgetTypes } from "../constants/WidgetConstants";
import { DraggableWidget } from "../widgets/BaseWidget" import { DraggableWidget } from "../widgets/BaseWidget";
import React from "react"; import React from "react";
export const Container = styled("div")<ContainerProps>` export const Container = styled("div")<ContainerProps>`
display: flex; display: flex;
flex-direction: ${props => { flex-direction: ${props => {
return props.orientation === "HORIZONTAL" ? "row" : "column" return props.orientation === "HORIZONTAL" ? "row" : "column";
}}; }};
background: ${props => props.style.backgroundColor}; background: ${props => props.style.backgroundColor};
color: ${props => props.theme.colors.primary}; color: ${props => props.theme.colors.primary};
position: ${props => { position: ${props => {
return props.style.positionType === "ABSOLUTE" ? "absolute" : "relative" return props.style.positionType === "ABSOLUTE" ? "absolute" : "relative";
}}; }};
left: ${props => { left: ${props => {
return props.style.positionType !== "ABSOLUTE" ? undefined : props.style.xPosition + props.style.xPositionUnit return props.style.positionType !== "ABSOLUTE"
? undefined
: props.style.xPosition + props.style.xPositionUnit;
}}; }};
top: ${props => { top: ${props => {
return props.style.positionType !== "ABSOLUTE" ? undefined : props.style.yPosition + props.style.yPositionUnit return props.style.positionType !== "ABSOLUTE"
? undefined
: props.style.yPosition + props.style.yPositionUnit;
}}; }};
`; `;
const ContainerComponent = (props: ContainerProps) => { const ContainerComponent = (props: ContainerProps) => {
@ -28,14 +32,18 @@ const ContainerComponent = (props: ContainerProps) => {
const [, drop] = useDrop({ const [, drop] = useDrop({
accept: Object.values(WidgetTypes), accept: Object.values(WidgetTypes),
drop(item: DraggableWidget, monitor) { drop(item: DraggableWidget, monitor) {
if (addWidgetFn && monitor.isOver({shallow: true})){ if (addWidgetFn && monitor.isOver({ shallow: true })) {
addWidgetFn(item.type); addWidgetFn(item.type);
} }
return undefined return undefined;
}, },
}) });
return <Container ref={drop} {...props}>{props.children}</Container> return (
} <Container ref={drop} {...props}>
{props.children}
</Container>
);
};
export interface ContainerProps extends ComponentProps { export interface ContainerProps extends ComponentProps {
children?: JSX.Element[] | JSX.Element; children?: JSX.Element[] | JSX.Element;
@ -43,4 +51,4 @@ export interface ContainerProps extends ComponentProps {
addWidget?: Function; addWidget?: Function;
} }
export default ContainerComponent export default ContainerComponent;

40
app/client/src/editorComponents/DraggableComponent.tsx
View File

@ -1,14 +1,14 @@
import * as React from "react" import * as React from "react";
import { IWidgetProps, IWidgetState } from "../widgets/BaseWidget" import { WidgetProps, WidgetState } from "../widgets/BaseWidget";
import { DragSource, DragSourceConnector, DragSourceMonitor } from "react-dnd" import { DragSource, DragSourceConnector, DragSourceMonitor } from "react-dnd";
import { ContainerProps } from "./ContainerComponent" import { ContainerProps } from "./ContainerComponent";
export interface DraggableProps extends ContainerProps { export interface DraggableProps extends ContainerProps {
connectDragSource: Function; connectDragSource: Function;
isDragging?: boolean; isDragging?: boolean;
} }
class DraggableComponent extends React.Component<DraggableProps, IWidgetState> { class DraggableComponent extends React.Component<DraggableProps, WidgetState> {
render() { render() {
return this.props.connectDragSource( return this.props.connectDragSource(
<div <div
@ -20,33 +20,35 @@ class DraggableComponent extends React.Component<DraggableProps, IWidgetState> {
: 0, : 0,
top: this.props.style top: this.props.style
? this.props.style.yPosition + this.props.style.yPositionUnit ? this.props.style.yPosition + this.props.style.yPositionUnit
: 0 : 0,
}} }}
> >
{this.props.children} {this.props.children}
</div> </div>,
) );
} }
} }
const widgetSource = { const widgetSource = {
beginDrag(props: IWidgetProps) { beginDrag(props: WidgetProps) {
return { return {
widgetId: props.widgetId, widgetId: props.widgetId,
widgetType: props.widgetType widgetType: props.widgetType,
} };
} },
} };
const widgetType = (props: IWidgetProps) => { const widgetType = (props: WidgetProps) => {
return props.widgetType return props.widgetType;
} };
function collect(connect: DragSourceConnector, monitor: DragSourceMonitor) { function collect(connect: DragSourceConnector, monitor: DragSourceMonitor) {
return { return {
connectDragSource: connect.dragSource(), connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging() isDragging: monitor.isDragging(),
} };
} }
export default DragSource(widgetType, widgetSource, collect)(DraggableComponent) export default DragSource(widgetType, widgetSource, collect)(
DraggableComponent,
);

60
app/client/src/editorComponents/DroppableComponent.tsx
View File

@ -1,7 +1,12 @@
import * as React from "react" import * as React from "react";
import { IWidgetProps, IWidgetState } from "../widgets/BaseWidget" import { WidgetProps, WidgetState } from "../widgets/BaseWidget";
import { DropTargetConnector, DropTargetMonitor, DropTarget, XYCoord } from "react-dnd" import {
import { ContainerProps } from "./ContainerComponent" DropTargetConnector,
DropTargetMonitor,
DropTarget,
XYCoord,
} from "react-dnd";
import { ContainerProps } from "./ContainerComponent";
import WidgetFactory from "../utils/WidgetFactory"; import WidgetFactory from "../utils/WidgetFactory";
export interface DroppableProps extends ContainerProps { export interface DroppableProps extends ContainerProps {
@ -9,10 +14,7 @@ export interface DroppableProps extends ContainerProps {
isOver?: boolean; isOver?: boolean;
} }
class DroppableComponent extends React.Component< class DroppableComponent extends React.Component<DroppableProps, WidgetState> {
DroppableProps,
IWidgetState
> {
render() { render() {
return this.props.connectDropTarget( return this.props.connectDropTarget(
<div <div
@ -22,37 +24,39 @@ class DroppableComponent extends React.Component<
height: this.props.style.height, height: this.props.style.height,
width: this.props.style.width, width: this.props.style.width,
background: this.props.isOver ? "#f4f4f4" : undefined, background: this.props.isOver ? "#f4f4f4" : undefined,
top: this.props.style.yPosition + this.props.style.yPositionUnit top: this.props.style.yPosition + this.props.style.yPositionUnit,
}} }}
> >
{ this.props.isOver ? undefined : this.props.children} {this.props.isOver ? undefined : this.props.children}
</div> </div>,
) );
} }
} }
const dropTarget = { const dropTarget = {
canDrop(props: IWidgetProps) { canDrop() {
return true return true;
}, },
drop(props: IWidgetProps, monitor: DropTargetMonitor) { drop(props: WidgetProps, monitor: DropTargetMonitor) {
const item = monitor.getItem() const item = monitor.getItem();
const delta = monitor.getDifferenceFromInitialOffset() as XYCoord const delta = monitor.getDifferenceFromInitialOffset() as XYCoord;
const left = Math.round(item.left + delta.x) const left = Math.round(item.left + delta.x);
const top = Math.round(item.top + delta.y) const top = Math.round(item.top + delta.y);
return { left: left, top: top } return { left: left, top: top };
} },
} };
const getDropTypes = (props: IWidgetProps) => { const getDropTypes = () => {
return WidgetFactory.getWidgetTypes() return WidgetFactory.getWidgetTypes();
} };
function collect(connect: DropTargetConnector, monitor: DropTargetMonitor) { function collect(connect: DropTargetConnector, monitor: DropTargetMonitor) {
return { return {
connectDropTarget: connect.dropTarget(), connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver() isOver: monitor.isOver(),
} };
} }
export default DropTarget(getDropTypes, dropTarget, collect)(DroppableComponent) export default DropTarget(getDropTypes, dropTarget, collect)(
DroppableComponent,
);

14
app/client/src/editorComponents/IconComponent.tsx
View File

@ -1,8 +1,8 @@
import * as React from "react" import * as React from "react";
import { ComponentProps } from "./BaseComponent" import { ComponentProps } from "./BaseComponent";
import { Icon, Intent } from "@blueprintjs/core" import { Icon, Intent } from "@blueprintjs/core";
import { IconName } from "@blueprintjs/icons" import { IconName } from "@blueprintjs/icons";
import { Container } from "./ContainerComponent" import { Container } from "./ContainerComponent";
class IconComponent extends React.Component<IconComponentProps> { class IconComponent extends React.Component<IconComponentProps> {
render() { render() {
return ( return (
@ -13,7 +13,7 @@ class IconComponent extends React.Component<IconComponentProps> {
intent={this.props.intent} intent={this.props.intent}
/> />
</Container> </Container>
) );
} }
} }
@ -24,4 +24,4 @@ export interface IconComponentProps extends ComponentProps {
ellipsize?: boolean; ellipsize?: boolean;
} }
export default IconComponent export default IconComponent;

16
app/client/src/editorComponents/InputGroupComponent.tsx
View File

@ -1,8 +1,8 @@
import * as React from "react" import * as React from "react";
import { ComponentProps } from "./BaseComponent" import { ComponentProps } from "./BaseComponent";
import { IconName, InputGroup, Intent } from "@blueprintjs/core" import { IconName, InputGroup, Intent } from "@blueprintjs/core";
import { Container } from "./ContainerComponent" import { Container } from "./ContainerComponent";
class InputGroupComponent extends React.Component<IInputGroupComponentProps> { class InputGroupComponent extends React.Component<InputGroupComponentProps> {
render() { render() {
return ( return (
<Container {...this.props}> <Container {...this.props}>
@ -21,11 +21,11 @@ class InputGroupComponent extends React.Component<IInputGroupComponentProps> {
type={this.props.type} type={this.props.type}
/> />
</Container> </Container>
) );
} }
} }
export interface IInputGroupComponentProps extends ComponentProps { export interface InputGroupComponentProps extends ComponentProps {
className?: string; className?: string;
disabled?: boolean; disabled?: boolean;
large?: boolean; large?: boolean;
@ -40,4 +40,4 @@ export interface IInputGroupComponentProps extends ComponentProps {
placeholder?: string; placeholder?: string;
} }
export default InputGroupComponent export default InputGroupComponent;

16
app/client/src/editorComponents/NumericInputComponent.tsx
View File

@ -1,9 +1,9 @@
import * as React from "react" import * as React from "react";
import { ComponentProps } from "./BaseComponent" import { ComponentProps } from "./BaseComponent";
import { Intent, NumericInput, IconName } from "@blueprintjs/core" import { Intent, NumericInput, IconName } from "@blueprintjs/core";
import { Container } from "./ContainerComponent" import { Container } from "./ContainerComponent";
class NumericInputComponent extends React.Component< class NumericInputComponent extends React.Component<
INumericInputComponentProps NumericInputComponentProps
> { > {
render() { render() {
return ( return (
@ -30,11 +30,11 @@ class NumericInputComponent extends React.Component<
stepSize={this.props.stepSize} stepSize={this.props.stepSize}
/> />
</Container> </Container>
) );
} }
} }
export interface INumericInputComponentProps extends ComponentProps { export interface NumericInputComponentProps extends ComponentProps {
className?: string; className?: string;
disabled?: boolean; disabled?: boolean;
large?: boolean; large?: boolean;
@ -57,4 +57,4 @@ export interface INumericInputComponentProps extends ComponentProps {
placeholder?: string; placeholder?: string;
} }
export default NumericInputComponent export default NumericInputComponent;

15
app/client/src/editorComponents/RadioGroupComponent.tsx
View File

@ -1,7 +1,7 @@
import * as React from "react" import * as React from "react";
import { ComponentProps } from "./BaseComponent" import { ComponentProps } from "./BaseComponent";
import { Radio, RadioGroup, IOptionProps } from "@blueprintjs/core" import { Radio, RadioGroup, IOptionProps } from "@blueprintjs/core";
import { Container } from "./ContainerComponent" import { Container } from "./ContainerComponent";
class RadioGroupComponent extends React.Component<RadioGroupComponentProps> { class RadioGroupComponent extends React.Component<RadioGroupComponentProps> {
render() { render() {
return ( return (
@ -17,11 +17,11 @@ class RadioGroupComponent extends React.Component<RadioGroupComponentProps> {
options={this.props.options} options={this.props.options}
> >
{this.props.items.map(item => ( {this.props.items.map(item => (
<Radio label={item.label} value={item.value} /> <Radio key={item.key} label={item.label} value={item.value} />
))} ))}
</RadioGroup> </RadioGroup>
</Container> </Container>
) );
} }
} }
@ -36,8 +36,9 @@ export interface RadioGroupComponentProps extends ComponentProps {
options: IOptionProps[]; options: IOptionProps[];
items: Array<{ items: Array<{
label: string; label: string;
key: string;
value: number | string; value: number | string;
}>; }>;
} }
export default RadioGroupComponent export default RadioGroupComponent;

12
app/client/src/editorComponents/SpinnerComponent.tsx
View File

@ -1,7 +1,7 @@
import * as React from "react" import * as React from "react";
import { ComponentProps } from "./BaseComponent" import { ComponentProps } from "./BaseComponent";
import { Spinner, Intent } from "@blueprintjs/core" import { Spinner, Intent } from "@blueprintjs/core";
import { Container } from "./ContainerComponent" import { Container } from "./ContainerComponent";
class SpinnerComponent extends React.Component<SpinnerComponentProps> { class SpinnerComponent extends React.Component<SpinnerComponentProps> {
render() { render() {
@ -13,7 +13,7 @@ class SpinnerComponent extends React.Component<SpinnerComponentProps> {
intent={this.props.intent} intent={this.props.intent}
/> />
</Container> </Container>
) );
} }
} }
@ -23,4 +23,4 @@ export interface SpinnerComponentProps extends ComponentProps {
intent?: Intent; intent?: Intent;
} }
export default SpinnerComponent export default SpinnerComponent;

12
app/client/src/editorComponents/TagInputComponent.tsx
View File

@ -1,7 +1,7 @@
import * as React from "react" import * as React from "react";
import { ComponentProps } from "./BaseComponent" import { ComponentProps } from "./BaseComponent";
import { Intent, ITagProps, TagInput, HTMLInputProps } from "@blueprintjs/core" import { Intent, ITagProps, TagInput, HTMLInputProps } from "@blueprintjs/core";
import { Container } from "./ContainerComponent" import { Container } from "./ContainerComponent";
class TagInputComponent extends React.Component<TagInputComponentProps> { class TagInputComponent extends React.Component<TagInputComponentProps> {
render() { render() {
return ( return (
@ -11,7 +11,7 @@ class TagInputComponent extends React.Component<TagInputComponentProps> {
values={this.props.values} values={this.props.values}
/> />
</Container> </Container>
) );
} }
} }
@ -32,4 +32,4 @@ export interface TagInputComponentProps extends ComponentProps {
values?: string[]; //Required field values?: string[]; //Required field
} }
export default TagInputComponent export default TagInputComponent;

16
app/client/src/editorComponents/TextComponent.tsx
View File

@ -1,8 +1,8 @@
import * as React from "react" import * as React from "react";
import { ComponentProps } from "./BaseComponent" import { ComponentProps } from "./BaseComponent";
import { Text } from "@blueprintjs/core" import { Text } from "@blueprintjs/core";
import { Container } from "./ContainerComponent" import { Container } from "./ContainerComponent";
class TextComponent extends React.Component<ITextComponentProps> { class TextComponent extends React.Component<TextComponentProps> {
render() { render() {
return ( return (
<Container {...this.props}> <Container {...this.props}>
@ -10,14 +10,14 @@ class TextComponent extends React.Component<ITextComponentProps> {
{this.props.text} {this.props.text}
</Text> </Text>
</Container> </Container>
) );
} }
} }
export interface ITextComponentProps extends ComponentProps { export interface TextComponentProps extends ComponentProps {
text?: string; text?: string;
ellipsize?: boolean; ellipsize?: boolean;
tagName?: keyof JSX.IntrinsicElements; tagName?: keyof JSX.IntrinsicElements;
} }
export default TextComponent export default TextComponent;

14
app/client/src/mockResponses/WidgetCardsPaneResponse.tsx
View File

@ -42,7 +42,8 @@ const WidgetCardsPaneResponse: WidgetCardsPaneReduxState = {
widgetType: "BREADCRUMBS_WIDGET", widgetType: "BREADCRUMBS_WIDGET",
icon: "icon-collapse", icon: "icon-collapse",
label: "Input", label: "Input",
},{ },
{
widgetType: "TAG_INPUT_WIDGET", widgetType: "TAG_INPUT_WIDGET",
icon: "icon-dropdown", icon: "icon-dropdown",
label: "Tag", label: "Tag",
@ -51,7 +52,7 @@ const WidgetCardsPaneResponse: WidgetCardsPaneReduxState = {
widgetType: "NUMERIC_INPUT_WIDGET", widgetType: "NUMERIC_INPUT_WIDGET",
icon: "icon-table", icon: "icon-table",
label: "Numeric", label: "Numeric",
} },
], ],
form: [ form: [
{ {
@ -63,17 +64,16 @@ const WidgetCardsPaneResponse: WidgetCardsPaneReduxState = {
widgetType: "CALLOUT_WIDGET", widgetType: "CALLOUT_WIDGET",
icon: "icon-alert", icon: "icon-alert",
label: "Callout", label: "Callout",
} },
], ],
view: [ view: [
{ {
widgetType: "INPUT_GROUP_WIDGET", widgetType: "INPUT_GROUP_WIDGET",
icon: "icon-input", icon: "icon-input",
label: "Input", label: "Input",
} },
] ],
} },
}; };
export default WidgetCardsPaneResponse; export default WidgetCardsPaneResponse;

31
app/client/src/normalizers/CanvasWidgetsNormalizer.tsx
View File

@ -1,21 +1,26 @@
import { normalize, schema, denormalize } from 'normalizr'; import { normalize, schema, denormalize } from "normalizr";
import { PageResponse } from '../api/PageApi'; import { PageResponse } from "../api/PageApi";
import { ContainerWidgetProps } from '../widgets/ContainerWidget'; import { ContainerWidgetProps } from "../widgets/ContainerWidget";
export const widgetSchema = new schema.Entity('canvasWidgets', { }, { idAttribute: "widgetId" }); export const widgetSchema = new schema.Entity(
"canvasWidgets",
{},
{ idAttribute: "widgetId" },
);
// const widgets = new schema.Array(widgetSchema); // const widgets = new schema.Array(widgetSchema);
widgetSchema.define({ children: [widgetSchema] }); widgetSchema.define({ children: [widgetSchema] });
class CanvasWidgetsNormalizer { class CanvasWidgetsNormalizer {
static normalize(pageResponse: PageResponse): { entities: any; result: any } {
return normalize(pageResponse.pageWidget, widgetSchema);
}
static normalize(pageResponse: PageResponse): { entities: any, result: any } { static denormalize(
return normalize(pageResponse.pageWidget, widgetSchema) pageWidgetId: string,
} entities: any,
): ContainerWidgetProps<any> {
static denormalize(pageWidgetId: string, entities: any): ContainerWidgetProps<any> { return denormalize(pageWidgetId, widgetSchema, entities);
return denormalize(pageWidgetId, widgetSchema, entities) }
}
} }
export default CanvasWidgetsNormalizer export default CanvasWidgetsNormalizer;

9
app/client/src/pages/Editor/index.tsx
View File

@ -2,7 +2,7 @@ import React, { Component } from "react"
import { connect } from "react-redux" import { connect } from "react-redux"
import styled from "styled-components" import styled from "styled-components"
import Canvas from "./Canvas" import Canvas from "./Canvas"
import { WidgetCardProps, IWidgetProps } from '../../widgets/BaseWidget' import { WidgetCardProps, WidgetProps } from '../../widgets/BaseWidget'
import { AppState } from "../../reducers" import { AppState } from "../../reducers"
import { EditorReduxState } from "../../reducers/uiReducers/editorReducer" import { EditorReduxState } from "../../reducers/uiReducers/editorReducer"
import WidgetCardsPane from "./WidgetCardsPane" import WidgetCardsPane from "./WidgetCardsPane"
@ -23,7 +23,10 @@ const CanvasContainer = styled.section`
margin: 0px 10px; margin: 0px 10px;
&:before { &:before {
position: absolute; position: absolute;
top: 0; right: 0; bottom: 0; left: 0; top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000; z-index: 1000;
pointer-events: none; pointer-events: none;
} }
@ -100,7 +103,7 @@ const mapStateToProps = (state: AppState, props: EditorProps): EditorReduxState
const mapDispatchToProps = (dispatch: any) => { const mapDispatchToProps = (dispatch: any) => {
return { return {
fetchCanvasWidgets: (pageId: string) => dispatch(fetchPage(pageId, RenderModes.CANVAS)), fetchCanvasWidgets: (pageId: string) => dispatch(fetchPage(pageId, RenderModes.CANVAS)),
addPageWidget: (pageId: string, widgetProps: IWidgetProps) => dispatch(addWidget(pageId, widgetProps)) addPageWidget: (pageId: string, widgetProps: WidgetProps) => dispatch(addWidget(pageId, widgetProps))
} }
} }

6
app/client/src/reducers/entityReducers/canvasWidgetsReducers.tsx
View File

@ -4,13 +4,13 @@ import {
LoadCanvasPayload, LoadCanvasPayload,
ReduxAction ReduxAction
} from "../../constants/ActionConstants" } from "../../constants/ActionConstants"
import { IWidgetProps } from "../../widgets/BaseWidget" import { WidgetProps } from "../../widgets/BaseWidget"
import CanvasWidgetsNormalizer from "../../normalizers/CanvasWidgetsNormalizer"; import CanvasWidgetsNormalizer from "../../normalizers/CanvasWidgetsNormalizer";
const initialState: CanvasWidgetsReduxState = {} const initialState: CanvasWidgetsReduxState = {}
export interface IFlattenedWidgetProps extends IWidgetProps { export interface IFlattenedWidgetProps extends WidgetProps {
children?: string[]; children?: string[];
} }
@ -23,7 +23,7 @@ const canvasWidgetsReducer = createReducer(initialState, {
}, },
[ActionTypes.ADD_PAGE_WIDGET]: ( [ActionTypes.ADD_PAGE_WIDGET]: (
state: CanvasWidgetsReduxState, state: CanvasWidgetsReduxState,
action: ReduxAction<{pageId: string, widget: IWidgetProps}> action: ReduxAction<{pageId: string, widget: WidgetProps}>
) => { ) => {
const widget = action.payload.widget const widget = action.payload.widget
const widgetTree = CanvasWidgetsNormalizer.denormalize("0", { canvasWidgets: state }) const widgetTree = CanvasWidgetsNormalizer.denormalize("0", { canvasWidgets: state })

36
app/client/src/reducers/index.tsx
View File

@ -1,27 +1,27 @@
import { combineReducers } from "redux" import { combineReducers } from "redux";
import entityReducer from "./entityReducers" import entityReducer from "./entityReducers";
import uiReducer from "./uiReducers" import uiReducer from "./uiReducers";
import { CanvasReduxState } from "./uiReducers/canvasReducer" import { CanvasReduxState } from "./uiReducers/canvasReducer";
import { CanvasWidgetsReduxState } from "./entityReducers/canvasWidgetsReducers" import { CanvasWidgetsReduxState } from "./entityReducers/canvasWidgetsReducers";
import { WidgetCardsPaneReduxState } from "./uiReducers/widgetCardsPaneReducer" import { WidgetCardsPaneReduxState } from "./uiReducers/widgetCardsPaneReducer";
import { EditorHeaderReduxState } from "./uiReducers/editorHeaderReducer" import { EditorHeaderReduxState } from "./uiReducers/editorHeaderReducer";
import { EditorReduxState } from "./uiReducers/editorReducer" import { EditorReduxState } from "./uiReducers/editorReducer";
const appReducer = combineReducers({ const appReducer = combineReducers({
entities: entityReducer, entities: entityReducer,
ui: uiReducer ui: uiReducer,
}) });
export default appReducer export default appReducer;
export interface AppState { export interface AppState {
ui: { ui: {
canvas: CanvasReduxState canvas: CanvasReduxState;
widgetCardsPane: WidgetCardsPaneReduxState widgetCardsPane: WidgetCardsPaneReduxState;
editorHeader: EditorHeaderReduxState editorHeader: EditorHeaderReduxState;
editor: EditorReduxState editor: EditorReduxState;
} };
entities: { entities: {
canvasWidgets: CanvasWidgetsReduxState canvasWidgets: CanvasWidgetsReduxState;
} };
} }

4
app/client/src/reducers/uiReducers/editorReducer.tsx
View File

@ -5,7 +5,7 @@ import {
LoadCanvasPayload, LoadCanvasPayload,
LoadWidgetCardsPanePayload LoadWidgetCardsPanePayload
} from "../../constants/ActionConstants" } from "../../constants/ActionConstants"
import { WidgetCardProps, IWidgetProps } from "../../widgets/BaseWidget" import { WidgetCardProps, WidgetProps } from "../../widgets/BaseWidget"
import { ContainerWidgetProps } from "../../widgets/ContainerWidget" import { ContainerWidgetProps } from "../../widgets/ContainerWidget"
const initialState: EditorReduxState = {} const initialState: EditorReduxState = {}
@ -19,7 +19,7 @@ const editorReducer = createReducer(initialState, {
}, },
[ActionTypes.ADD_PAGE_WIDGET]: ( [ActionTypes.ADD_PAGE_WIDGET]: (
state: EditorReduxState, state: EditorReduxState,
action: ReduxAction<{pageId: string, widget: IWidgetProps}> action: ReduxAction<{pageId: string, widget: WidgetProps}>
) => { ) => {
return state return state
}, },

31
app/client/src/sagas/PageSagas.tsx
View File

@ -1,26 +1,31 @@
import CanvasWidgetsNormalizer from "../normalizers/CanvasWidgetsNormalizer" import CanvasWidgetsNormalizer from "../normalizers/CanvasWidgetsNormalizer";
import { ActionTypes, ReduxAction } from "../constants/ActionConstants" import { ActionTypes, ReduxAction } from "../constants/ActionConstants";
import PageApi, { PageResponse, PageRequest } from "../api/PageApi" import PageApi, { PageResponse, PageRequest } from "../api/PageApi";
import { call, put, takeEvery } from "redux-saga/effects" import { call, put, takeEvery } from "redux-saga/effects";
import { RenderModes } from "../constants/WidgetConstants" import { RenderModes } from "../constants/WidgetConstants";
export function* fetchPageSaga(pageRequestAction: ReduxAction<PageRequest>) { export function* fetchPageSaga(pageRequestAction: ReduxAction<PageRequest>) {
const pageRequest = pageRequestAction.payload const pageRequest = pageRequestAction.payload;
try { try {
const pageResponse: PageResponse = yield call(PageApi.fetchPage, pageRequest) const pageResponse: PageResponse = yield call(
PageApi.fetchPage,
pageRequest,
);
if (pageRequest.renderMode === RenderModes.CANVAS) { if (pageRequest.renderMode === RenderModes.CANVAS) {
const normalizedResponse = CanvasWidgetsNormalizer.normalize(pageResponse) const normalizedResponse = CanvasWidgetsNormalizer.normalize(
pageResponse,
);
const payload = { const payload = {
pageWidgetId: normalizedResponse.result, pageWidgetId: normalizedResponse.result,
widgets: normalizedResponse.entities.canvasWidgets widgets: normalizedResponse.entities.canvasWidgets,
} };
yield put({ type: ActionTypes.UPDATE_CANVAS, payload }) yield put({ type: ActionTypes.UPDATE_CANVAS, payload });
} }
} catch(err){ } catch (err) {
//TODO(abhinav): REFACTOR THIS //TODO(abhinav): REFACTOR THIS
} }
} }
export function* watchFetchPage() { export function* watchFetchPage() {
yield takeEvery(ActionTypes.FETCH_PAGE, fetchPageSaga) yield takeEvery(ActionTypes.FETCH_PAGE, fetchPageSaga);
} }

25
app/client/src/sagas/WidgetCardsPaneSagas.tsx
View File

@ -1,19 +1,22 @@
// import CanvasWidgetsNormalizer from "../normalizers/CanvasWidgetsNormalizer" // import CanvasWidgetsNormalizer from "../normalizers/CanvasWidgetsNormalizer"
import { ActionTypes, ReduxAction } from "../constants/ActionConstants" import { ActionTypes } from "../constants/ActionConstants";
import WidgetCardsPaneApi, { WidgetCardsPaneResponse, WidgetCardsPaneRequest } from "../api/WidgetCardsPaneApi" import WidgetCardsPaneApi, {
import { successFetchingWidgetCards } from "../actions/widgetCardsPaneActions" WidgetCardsPaneResponse,
import { call, put, takeLatest } from "redux-saga/effects" } from "../api/WidgetCardsPaneApi";
import { successFetchingWidgetCards } from "../actions/widgetCardsPaneActions";
import { call, put, takeLatest } from "redux-saga/effects";
export function* fetchWidgetCards() {
export function* fetchWidgetCards(widgetCardsRequestAction: ReduxAction<WidgetCardsPaneRequest>) {
try { try {
const widgetCards: WidgetCardsPaneResponse = yield call(WidgetCardsPaneApi.fetchWidgetCards) const widgetCards: WidgetCardsPaneResponse = yield call(
yield put(successFetchingWidgetCards(widgetCards.cards)) WidgetCardsPaneApi.fetchWidgetCards,
} catch(err) { );
yield put({ type: ActionTypes.ERROR_FETCHING_WIDGET_CARDS, err}) yield put(successFetchingWidgetCards(widgetCards.cards));
} catch (err) {
yield put({ type: ActionTypes.ERROR_FETCHING_WIDGET_CARDS, err });
} }
} }
export function* fetchWidgetCardsSaga() { export function* fetchWidgetCardsSaga() {
yield takeLatest(ActionTypes.FETCH_WIDGET_CARDS, fetchWidgetCards) yield takeLatest(ActionTypes.FETCH_WIDGET_CARDS, fetchWidgetCards);
} }

8
app/client/src/sagas/index.tsx
View File

@ -1,7 +1,7 @@
import { all } from "redux-saga/effects" import { all } from "redux-saga/effects";
import { watchFetchPage } from "../sagas/PageSagas" import { watchFetchPage } from "../sagas/PageSagas";
import { fetchWidgetCardsSaga } from './WidgetCardsPaneSagas' import { fetchWidgetCardsSaga } from "./WidgetCardsPaneSagas";
export function* rootSaga() { export function* rootSaga() {
yield all([watchFetchPage(), fetchWidgetCardsSaga()]) yield all([watchFetchPage(), fetchWidgetCardsSaga()]);
} }

143
app/client/src/utils/AnalyticsUtil.tsx
View File

@ -1,59 +1,102 @@
export type EventName =
export type EventName = "PAGE_VIEW" | "ADD_COMPONENT" | "DELETE_COMPONENT" | "RESIZE_COMPONENT" | "PAGE_VIEW"
export type Gender = "MALE" | "FEMALE" | "ADD_COMPONENT"
| "DELETE_COMPONENT"
| "RESIZE_COMPONENT";
export type Gender = "MALE" | "FEMALE";
export interface User { export interface User {
userId: string userId: string;
name: string name: string;
email: string email: string;
gender: Gender gender: Gender;
} }
class AnalyticsUtil { class AnalyticsUtil {
static initializeHotjar(id: string, sv: string) {
(function init(h: any, o: any, t: any, j: any, a?: any, r?: any) {
h.hj =
h.hj ||
function() {
(h.hj.q = h.hj.q || []).push(arguments); //eslint-disable-line prefer-rest-params
};
h._hjSettings = { hjid: id, hjsv: sv };
a = o.getElementsByTagName("head")[0];
r = o.createElement("script");
r.async = 1;
r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
a.appendChild(r);
})(window, document, "//static.hotjar.com/c/hotjar-", ".js?sv=");
}
static initializeHotjar(id: string, sv: string) { static initializeSegment() {
(function init(h: any, o: any, t: any, j: any, a?: any, r?: any) { (function init(window: any) {
h.hj = const analytics = (window.analytics = window.analytics || []);
h.hj || if (!analytics.initialize) {
function() { if (analytics.invoked) {
(h.hj.q = h.hj.q || []).push(arguments); window.console &&
}; console.error &&
h._hjSettings = { hjid: id, hjsv: sv }; console.error("Segment snippet included twice.");
a = o.getElementsByTagName('head')[0]; } else {
r = o.createElement('script'); analytics.invoked = !0;
r.async = 1; analytics.methods = [
r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv; "trackSubmit",
a.appendChild(r); "trackClick",
})(window, document, '//static.hotjar.com/c/hotjar-', '.js?sv='); "trackLink",
}; "trackForm",
"pageview",
"identify",
"reset",
"group",
"track",
"ready",
"alias",
"debug",
"page",
"once",
"off",
"on",
];
analytics.factory = function(t: any) {
return function() {
const e = Array.prototype.slice.call(arguments); //eslint-disable-line prefer-rest-params
e.unshift(t);
analytics.push(e);
return analytics;
};
};
}
for (let t: any = 0; t < analytics.methods.length; t++) {
const e = analytics.methods[t];
analytics[e] = analytics.factory(e);
}
analytics.load = function(t: any, e: any) {
const n = document.createElement("script");
n.type = "text/javascript";
n.async = !0;
n.src =
"https://cdn.segment.com/analytics.js/v1/" +
t +
"/analytics.min.js";
const a: any = document.getElementsByTagName("script")[0];
a.parentNode.insertBefore(n, a);
analytics._loadOptions = e;
};
analytics.SNIPPET_VERSION = "4.1.0";
analytics.load("O7rsLdWq7fhJI9rYsj1eatGAjuULTmfP");
analytics.page();
}
})(window);
}
static initializeSegment() { static logEvent(eventName: EventName, eventData: any) {
(function init(window: any){ const windowDoc: any = window;
var analytics=window.analytics=window.analytics||[]; windowDoc.analytics.track(eventName, eventData);
if(!analytics.initialize) { }
if(analytics.invoked) {
window.console&&console.error&&console.error("Segment snippet included twice.");
} else {
analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];
analytics.factory=function(t: any){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}
};
}
for(var t: any=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t: any,e: any){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var a: any=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.1.0";
analytics.load("O7rsLdWq7fhJI9rYsj1eatGAjuULTmfP");
analytics.page();
}
})(window)
}
static logEvent(eventName: EventName, eventData: any) {
const windowDoc: any = window
windowDoc.analytics.track(eventName, eventData);
}
static identifyUser(userId: string, userData: User) {
const windowDoc: any = window
windowDoc.analytics.identify(userId, userData);
}
static identifyUser(userId: string, userData: User) {
const windowDoc: any = window;
windowDoc.analytics.identify(userId, userData);
}
} }
export default AnalyticsUtil export default AnalyticsUtil;

46
app/client/src/utils/AppsmithUtils.tsx
View File

@ -1,22 +1,27 @@
import FontFaceObserver from 'fontfaceobserver' import FontFaceObserver from "fontfaceobserver";
import { ReduxAction } from "../constants/ActionConstants" import { ReduxAction } from "../constants/ActionConstants";
import { SENTRY_PROD_CONFIG, SENTRY_STAGE_CONFIG, HOTJAR_PROD_HJID, HOTJAR_PROD_HJSV } from "../constants/ThirdPartyConstants"; import {
import * as Sentry from '@sentry/browser'; SENTRY_PROD_CONFIG,
import AnalyticsUtil from "./AnalyticsUtil" SENTRY_STAGE_CONFIG,
import netlifyIdentity from 'netlify-identity-widget'; HOTJAR_PROD_HJID,
HOTJAR_PROD_HJSV,
} from "../constants/ThirdPartyConstants";
import * as Sentry from "@sentry/browser";
import AnalyticsUtil from "./AnalyticsUtil";
import netlifyIdentity from "netlify-identity-widget";
export const createReducer = ( export const createReducer = (
initialState: any, initialState: any,
handlers: { [type: string]: Function } handlers: { [type: string]: Function },
) => { ) => {
return function reducer(state = initialState, action: ReduxAction<any>) { return function reducer(state = initialState, action: ReduxAction<any>) {
if (handlers.hasOwnProperty(action.type)) { if (handlers.hasOwnProperty(action.type)) {
return handlers[action.type](state, action) return handlers[action.type](state, action);
} else { } else {
return state return state;
} }
} };
} };
export const appInitializer = () => { export const appInitializer = () => {
netlifyIdentity.init(); netlifyIdentity.init();
@ -27,16 +32,19 @@ export const appInitializer = () => {
AnalyticsUtil.initializeSegment(); AnalyticsUtil.initializeSegment();
break; break;
case "STAGING": case "STAGING":
Sentry.init(SENTRY_STAGE_CONFIG); Sentry.init(SENTRY_STAGE_CONFIG);
break break;
case "LOCAL": case "LOCAL":
break; break;
} }
const textFont = new FontFaceObserver("DM Sans"); const textFont = new FontFaceObserver("DM Sans");
textFont.load().then(()=> { textFont
document.body.className += "fontLoaded"; .load()
}).catch(err => { .then(() => {
console.log(err); document.body.className += "fontLoaded";
}); })
} .catch(err => {
console.log(err);
});
};

48
app/client/src/utils/WidgetFactory.tsx
View File

@ -1,35 +1,37 @@
import { WidgetType } from "../constants/WidgetConstants"; import { WidgetType } from "../constants/WidgetConstants";
import { IWidgetBuilder, IWidgetProps } from "../widgets/BaseWidget"; import { WidgetBuilder, WidgetProps } from "../widgets/BaseWidget";
class WidgetFactory { class WidgetFactory {
static widgetMap: Map<WidgetType, WidgetBuilder<WidgetProps>> = new Map();
static widgetMap: Map<WidgetType, IWidgetBuilder<IWidgetProps>> = new Map() static registerWidgetBuilder(
widgetType: WidgetType,
widgetBuilder: WidgetBuilder<WidgetProps>,
) {
this.widgetMap.set(widgetType, widgetBuilder);
}
static registerWidgetBuilder(widgetType: WidgetType, widgetBuilder: IWidgetBuilder<IWidgetProps>) { static createWidget(widgetData: WidgetProps): JSX.Element {
this.widgetMap.set(widgetType, widgetBuilder) widgetData.key = widgetData.widgetId;
} const widgetBuilder = this.widgetMap.get(widgetData.widgetType);
if (widgetBuilder) return widgetBuilder.buildWidget(widgetData);
static createWidget(widgetData: IWidgetProps): JSX.Element { else {
widgetData.key = widgetData.widgetId const ex: WidgetCreationException = {
const widgetBuilder = this.widgetMap.get(widgetData.widgetType) message:
if (widgetBuilder) "Widget Builder not registered for widget type" +
return widgetBuilder.buildWidget(widgetData) widgetData.widgetType,
else { };
const ex: WidgetCreationException = { throw ex;
message: "Widget Builder not registered for widget type" + widgetData.widgetType
}
throw ex
}
}
static getWidgetTypes(): WidgetType[] {
return Array.from(this.widgetMap.keys());
} }
}
static getWidgetTypes(): WidgetType[] {
return Array.from(this.widgetMap.keys());
}
} }
export interface WidgetCreationException { export interface WidgetCreationException {
message: string; message: string;
} }
export default WidgetFactory export default WidgetFactory;

119
app/client/src/utils/WidgetRegistry.tsx
View File

@ -1,106 +1,103 @@
import { IWidgetProps } from "../widgets/BaseWidget" import { WidgetProps } from "../widgets/BaseWidget";
import ContainerWidget, { import ContainerWidget, {
ContainerWidgetProps ContainerWidgetProps,
} from "../widgets/ContainerWidget" } from "../widgets/ContainerWidget";
import TextWidget, { TextWidgetProps } from "../widgets/TextWidget" import TextWidget, { TextWidgetProps } from "../widgets/TextWidget";
import InputGroupWidget, { import InputGroupWidget, {
InputGroupWidgetProps InputGroupWidgetProps,
} from "../widgets/InputGroupWidget" } from "../widgets/InputGroupWidget";
import CalloutWidget, { CalloutWidgetProps } from "../widgets/CalloutWidget" import CalloutWidget, { CalloutWidgetProps } from "../widgets/CalloutWidget";
import IconWidget, { IconWidgetProps } from "../widgets/IconWidget" import IconWidget, { IconWidgetProps } from "../widgets/IconWidget";
import SpinnerWidget, { SpinnerWidgetProps } from "../widgets/SpinnerWidget" import SpinnerWidget, { SpinnerWidgetProps } from "../widgets/SpinnerWidget";
import BreadcrumbsWidget, { import BreadcrumbsWidget, {
BreadcrumbsWidgetProps BreadcrumbsWidgetProps,
} from "../widgets/BreadcrumbsWidget" } from "../widgets/BreadcrumbsWidget";
import TagInputWidget, { TagInputWidgetProps } from "../widgets/TagInputWidget" import TagInputWidget, { TagInputWidgetProps } from "../widgets/TagInputWidget";
import NumericInputWidget, { import NumericInputWidget, {
NumericInputWidgetProps NumericInputWidgetProps,
} from "../widgets/NumericInputWidget" } from "../widgets/NumericInputWidget";
import CheckboxWidget, { CheckboxWidgetProps } from "../widgets/CheckboxWidget" import CheckboxWidget, { CheckboxWidgetProps } from "../widgets/CheckboxWidget";
import RadioGroupWidget, { import RadioGroupWidget, {
RadioGroupWidgetProps RadioGroupWidgetProps,
} from "../widgets/RadioGroupWidget" } from "../widgets/RadioGroupWidget";
import WidgetFactory from "./WidgetFactory" import WidgetFactory from "./WidgetFactory";
import React from "react" import React from "react";
import ButtonWidget, { ButtonWidgetProps } from "../widgets/ButtonWidget" import ButtonWidget, { ButtonWidgetProps } from "../widgets/ButtonWidget";
class WidgetBuilderRegistry { class WidgetBuilderRegistry {
static registerWidgetBuilders() { static registerWidgetBuilders() {
WidgetFactory.registerWidgetBuilder("CONTAINER_WIDGET", { WidgetFactory.registerWidgetBuilder("CONTAINER_WIDGET", {
buildWidget( buildWidget(widgetData: ContainerWidgetProps<WidgetProps>): JSX.Element {
widgetData: ContainerWidgetProps<IWidgetProps> return <ContainerWidget {...widgetData} />;
): JSX.Element { },
return <ContainerWidget {...widgetData} /> });
}
})
WidgetFactory.registerWidgetBuilder("TEXT_WIDGET", { WidgetFactory.registerWidgetBuilder("TEXT_WIDGET", {
buildWidget(widgetData: TextWidgetProps): JSX.Element { buildWidget(widgetData: TextWidgetProps): JSX.Element {
return <TextWidget {...widgetData} /> return <TextWidget {...widgetData} />;
} },
}) });
WidgetFactory.registerWidgetBuilder("BUTTON_WIDGET", { WidgetFactory.registerWidgetBuilder("BUTTON_WIDGET", {
buildWidget(widgetData: ButtonWidgetProps): JSX.Element { buildWidget(widgetData: ButtonWidgetProps): JSX.Element {
return <ButtonWidget {...widgetData} /> return <ButtonWidget {...widgetData} />;
} },
}) });
WidgetFactory.registerWidgetBuilder("CALLOUT_WIDGET", { WidgetFactory.registerWidgetBuilder("CALLOUT_WIDGET", {
buildWidget(widgetData: CalloutWidgetProps): JSX.Element { buildWidget(widgetData: CalloutWidgetProps): JSX.Element {
return <CalloutWidget {...widgetData} /> return <CalloutWidget {...widgetData} />;
} },
}) });
WidgetFactory.registerWidgetBuilder("ICON_WIDGET", { WidgetFactory.registerWidgetBuilder("ICON_WIDGET", {
buildWidget(widgetData: IconWidgetProps): JSX.Element { buildWidget(widgetData: IconWidgetProps): JSX.Element {
return <IconWidget {...widgetData} /> return <IconWidget {...widgetData} />;
} },
}) });
WidgetFactory.registerWidgetBuilder("SPINNER_WIDGET", { WidgetFactory.registerWidgetBuilder("SPINNER_WIDGET", {
buildWidget(widgetData: SpinnerWidgetProps): JSX.Element { buildWidget(widgetData: SpinnerWidgetProps): JSX.Element {
return <SpinnerWidget {...widgetData} /> return <SpinnerWidget {...widgetData} />;
} },
}) });
WidgetFactory.registerWidgetBuilder("INPUT_GROUP_WIDGET", { WidgetFactory.registerWidgetBuilder("INPUT_GROUP_WIDGET", {
buildWidget(widgetData: InputGroupWidgetProps): JSX.Element { buildWidget(widgetData: InputGroupWidgetProps): JSX.Element {
return <InputGroupWidget {...widgetData} /> return <InputGroupWidget {...widgetData} />;
} },
}) });
WidgetFactory.registerWidgetBuilder("BREADCRUMBS_WIDGET", { WidgetFactory.registerWidgetBuilder("BREADCRUMBS_WIDGET", {
buildWidget(widgetData: BreadcrumbsWidgetProps): JSX.Element { buildWidget(widgetData: BreadcrumbsWidgetProps): JSX.Element {
return <BreadcrumbsWidget {...widgetData} /> return <BreadcrumbsWidget {...widgetData} />;
} },
}) });
WidgetFactory.registerWidgetBuilder("TAG_INPUT_WIDGET", { WidgetFactory.registerWidgetBuilder("TAG_INPUT_WIDGET", {
buildWidget(widgetData: TagInputWidgetProps): JSX.Element { buildWidget(widgetData: TagInputWidgetProps): JSX.Element {
return <TagInputWidget {...widgetData} /> return <TagInputWidget {...widgetData} />;
} },
}) });
WidgetFactory.registerWidgetBuilder("NUMERIC_INPUT_WIDGET", { WidgetFactory.registerWidgetBuilder("NUMERIC_INPUT_WIDGET", {
buildWidget(widgetData: NumericInputWidgetProps): JSX.Element { buildWidget(widgetData: NumericInputWidgetProps): JSX.Element {
return <NumericInputWidget {...widgetData} /> return <NumericInputWidget {...widgetData} />;
} },
}) });
WidgetFactory.registerWidgetBuilder("CHECKBOX_WIDGET", { WidgetFactory.registerWidgetBuilder("CHECKBOX_WIDGET", {
buildWidget(widgetData: CheckboxWidgetProps): JSX.Element { buildWidget(widgetData: CheckboxWidgetProps): JSX.Element {
return <CheckboxWidget {...widgetData} /> return <CheckboxWidget {...widgetData} />;
} },
}) });
WidgetFactory.registerWidgetBuilder("RADIO_GROUP_WIDGET", { WidgetFactory.registerWidgetBuilder("RADIO_GROUP_WIDGET", {
buildWidget(widgetData: RadioGroupWidgetProps): JSX.Element { buildWidget(widgetData: RadioGroupWidgetProps): JSX.Element {
return <RadioGroupWidget {...widgetData} /> return <RadioGroupWidget {...widgetData} />;
} },
}) });
} }
} }
export default WidgetBuilderRegistry export default WidgetBuilderRegistry;

16
app/client/src/utils/generators.tsx
View File

@ -1,11 +1,13 @@
import generate from 'nanoid/generate' import generate from "nanoid/generate";
const ALPHABET = "1234567890abcdefghijklmnopqrstuvwxyz" const ALPHABET = "1234567890abcdefghijklmnopqrstuvwxyz";
export const generateReactKey = ({prefix = ""}: {prefix?: string}={}): string => { export const generateReactKey = ({
return prefix + generate(ALPHABET, 10) prefix = "",
} }: { prefix?: string } = {}): string => {
return prefix + generate(ALPHABET, 10);
};
export default { export default {
generateReactKey generateReactKey,
} };

92
app/client/src/widgets/BaseWidget.tsx
View File

@ -7,27 +7,27 @@ import {
WidgetType, WidgetType,
RenderMode, RenderMode,
RenderModes, RenderModes,
CSSUnits CSSUnits,
} from "../constants/WidgetConstants" } from "../constants/WidgetConstants";
import { Component } from "react" import { Component } from "react";
import { BaseStyle } from "../editorComponents/BaseComponent" import { BaseStyle } from "../editorComponents/BaseComponent";
import _ from "lodash" import _ from "lodash";
import React from "react" import React from "react";
import DraggableComponent from "../editorComponents/DraggableComponent" import DraggableComponent from "../editorComponents/DraggableComponent";
abstract class BaseWidget< abstract class BaseWidget<
T extends IWidgetProps, T extends WidgetProps,
K extends IWidgetState K extends WidgetState
> extends Component<T, K> { > extends Component<T, K> {
constructor(props: T) { constructor(props: T) {
super(props) super(props);
const initialState: IWidgetState = { const initialState: WidgetState = {
height: 0, height: 0,
width: 0 width: 0,
} };
initialState.height = 0 initialState.height = 0;
initialState.width = 0 initialState.width = 0;
this.state = initialState as K this.state = initialState as K;
} }
componentDidMount(): void { componentDidMount(): void {
@ -37,10 +37,10 @@ abstract class BaseWidget<
this.props.topRow, this.props.topRow,
this.props.bottomRow, this.props.bottomRow,
this.props.parentColumnSpace, this.props.parentColumnSpace,
this.props.parentRowSpace this.props.parentRowSpace,
) );
} }
//eslint-disable-next-line @typescript-eslint/no-unused-vars
componentDidUpdate(prevProps: T) { componentDidUpdate(prevProps: T) {
this.calculateWidgetBounds( this.calculateWidgetBounds(
this.props.rightColumn, this.props.rightColumn,
@ -48,8 +48,8 @@ abstract class BaseWidget<
this.props.topRow, this.props.topRow,
this.props.bottomRow, this.props.bottomRow,
this.props.parentColumnSpace, this.props.parentColumnSpace,
this.props.parentRowSpace this.props.parentRowSpace,
) );
} }
calculateWidgetBounds( calculateWidgetBounds(
@ -58,42 +58,42 @@ abstract class BaseWidget<
topRow: number, topRow: number,
bottomRow: number, bottomRow: number,
parentColumnSpace: number, parentColumnSpace: number,
parentRowSpace: number parentRowSpace: number,
) { ) {
const widgetState: IWidgetState = { const widgetState: WidgetState = {
width: (rightColumn - leftColumn) * parentColumnSpace, width: (rightColumn - leftColumn) * parentColumnSpace,
height: (bottomRow - topRow) * parentRowSpace height: (bottomRow - topRow) * parentRowSpace,
} };
if ( if (
_.isNil(this.state) || _.isNil(this.state) ||
widgetState.height !== this.state.height || widgetState.height !== this.state.height ||
widgetState.width !== this.state.width widgetState.width !== this.state.width
) { ) {
this.setState(widgetState) this.setState(widgetState);
} }
} }
render() { render() {
return this.getWidgetView() return this.getWidgetView();
} }
getWidgetView(): JSX.Element { getWidgetView(): JSX.Element {
switch (this.props.renderMode) { switch (this.props.renderMode) {
case RenderModes.CANVAS: case RenderModes.CANVAS:
return this.getCanvasView() return this.getCanvasView();
case RenderModes.COMPONENT_PANE: case RenderModes.COMPONENT_PANE:
return this.getComponentPaneView() return this.getComponentPaneView();
case RenderModes.PAGE: case RenderModes.PAGE:
return this.getPageView() return this.getPageView();
default: default:
return this.getPageView() return this.getPageView();
} }
} }
abstract getPageView(): JSX.Element abstract getPageView(): JSX.Element;
getCanvasView(): JSX.Element { getCanvasView(): JSX.Element {
return this.getPageView() return this.getPageView();
} }
getComponentPaneView(): JSX.Element { getComponentPaneView(): JSX.Element {
@ -101,16 +101,16 @@ abstract class BaseWidget<
<DraggableComponent <DraggableComponent
{...this.props} {...this.props}
style={{ style={{
...this.getPositionStyle() ...this.getPositionStyle(),
}} }}
orientation={"VERTICAL"} orientation={"VERTICAL"}
> >
{this.getPageView()} {this.getPageView()}
</DraggableComponent> </DraggableComponent>
) );
} }
abstract getWidgetType(): WidgetType abstract getWidgetType(): WidgetType;
getPositionStyle(): BaseStyle { getPositionStyle(): BaseStyle {
return { return {
@ -123,34 +123,34 @@ abstract class BaseWidget<
yPosition: this.props.topRow * this.props.parentRowSpace, yPosition: this.props.topRow * this.props.parentRowSpace,
xPosition: this.props.leftColumn * this.props.parentColumnSpace, xPosition: this.props.leftColumn * this.props.parentColumnSpace,
xPositionUnit: CSSUnits.PIXEL, xPositionUnit: CSSUnits.PIXEL,
yPositionUnit: CSSUnits.PIXEL yPositionUnit: CSSUnits.PIXEL,
} };
} }
static defaultProps: Partial<IWidgetProps> = { static defaultProps: Partial<WidgetProps> = {
parentRowSpace: 64, parentRowSpace: 64,
parentColumnSpace: 64, parentColumnSpace: 64,
topRow: 0, topRow: 0,
leftColumn: 0 leftColumn: 0,
} };
} }
export interface IWidgetState { export interface WidgetState {
height: number; height: number;
width: number; width: number;
} }
export interface DraggableWidget { export interface DraggableWidget {
type: string; type: string;
widget: IWidgetProps; widget: WidgetProps;
key: string; key: string;
} }
export interface IWidgetBuilder<T extends IWidgetProps> { export interface WidgetBuilder<T extends WidgetProps> {
buildWidget(data: T): JSX.Element; buildWidget(data: T): JSX.Element;
} }
export interface IWidgetProps { export interface WidgetProps {
widgetType: WidgetType; widgetType: WidgetType;
key?: string; key?: string;
widgetId: string; widgetId: string;
@ -170,4 +170,4 @@ export interface WidgetCardProps {
icon: string; icon: string;
} }
export default BaseWidget export default BaseWidget;

21
app/client/src/widgets/BreadcrumbsWidget.tsx
View File

@ -1,14 +1,13 @@
import React from "react" import React from "react";
import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget" import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants" import { WidgetType } from "../constants/WidgetConstants";
import { Boundary, IBreadcrumbProps } from "@blueprintjs/core" import { Boundary, IBreadcrumbProps } from "@blueprintjs/core";
import BreadcrumbsComponent from "../editorComponents/BreadcrumbsComponent" import BreadcrumbsComponent from "../editorComponents/BreadcrumbsComponent";
class BreadcrumbsWidget extends BaseWidget< class BreadcrumbsWidget extends BaseWidget<
BreadcrumbsWidgetProps, BreadcrumbsWidgetProps,
IWidgetState WidgetState
> { > {
getPageView() { getPageView() {
return ( return (
<BreadcrumbsComponent <BreadcrumbsComponent
@ -20,15 +19,15 @@ class BreadcrumbsWidget extends BaseWidget<
minVisibleItems={this.props.minVisibleItems} minVisibleItems={this.props.minVisibleItems}
className={this.props.className} className={this.props.className}
/> />
) );
} }
getWidgetType(): WidgetType { getWidgetType(): WidgetType {
return "BREADCRUMBS_WIDGET" return "BREADCRUMBS_WIDGET";
} }
} }
export interface BreadcrumbsWidgetProps extends IWidgetProps { export interface BreadcrumbsWidgetProps extends WidgetProps {
width?: number; width?: number;
collapseFrom?: Boundary; collapseFrom?: Boundary;
className?: string; className?: string;
@ -36,4 +35,4 @@ export interface BreadcrumbsWidgetProps extends IWidgetProps {
items?: IBreadcrumbProps[]; items?: IBreadcrumbProps[];
} }
export default BreadcrumbsWidget export default BreadcrumbsWidget;

19
app/client/src/widgets/ButtonWidget.tsx
View File

@ -1,10 +1,9 @@
import * as React from "react" import * as React from "react";
import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget" import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants" import { WidgetType } from "../constants/WidgetConstants";
import ButtonComponent from "../editorComponents/ButtonComponent" import ButtonComponent from "../editorComponents/ButtonComponent";
class ButtonWidget extends BaseWidget<ButtonWidgetProps, IWidgetState> {
class ButtonWidget extends BaseWidget<ButtonWidgetProps, WidgetState> {
getPageView() { getPageView() {
return ( return (
<ButtonComponent <ButtonComponent
@ -13,17 +12,17 @@ class ButtonWidget extends BaseWidget<ButtonWidgetProps, IWidgetState> {
key={this.props.widgetId} key={this.props.widgetId}
text={this.props.text || "Button"} text={this.props.text || "Button"}
/> />
) );
} }
getWidgetType(): WidgetType { getWidgetType(): WidgetType {
return "BUTTON_WIDGET" return "BUTTON_WIDGET";
} }
} }
export interface ButtonWidgetProps extends IWidgetProps { export interface ButtonWidgetProps extends WidgetProps {
text?: string; text?: string;
ellipsize?: boolean; ellipsize?: boolean;
} }
export default ButtonWidget export default ButtonWidget;

6
app/client/src/widgets/CalloutWidget.tsx
View File

@ -1,10 +1,10 @@
import React from "react"; import React from "react";
import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"; import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { Intent } from "@blueprintjs/core"; import { Intent } from "@blueprintjs/core";
import { WidgetType } from "../constants/WidgetConstants"; import { WidgetType } from "../constants/WidgetConstants";
import CalloutComponent from "../editorComponents/CalloutComponent"; import CalloutComponent from "../editorComponents/CalloutComponent";
class CalloutWidget extends BaseWidget<CalloutWidgetProps, IWidgetState> { class CalloutWidget extends BaseWidget<CalloutWidgetProps, WidgetState> {
getPageView() { getPageView() {
return ( return (
<CalloutComponent <CalloutComponent
@ -24,7 +24,7 @@ class CalloutWidget extends BaseWidget<CalloutWidgetProps, IWidgetState> {
} }
} }
export interface CalloutWidgetProps extends IWidgetProps { export interface CalloutWidgetProps extends WidgetProps {
id?: string; id?: string;
title?: string; title?: string;
description?: string; description?: string;

19
app/client/src/widgets/CheckboxWidget.tsx
View File

@ -1,9 +1,9 @@
import React from "react" import React from "react";
import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget" import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants" import { WidgetType } from "../constants/WidgetConstants";
import CheckboxComponent from "../editorComponents/CheckboxComponent" import CheckboxComponent from "../editorComponents/CheckboxComponent";
class CheckboxWidget extends BaseWidget<CheckboxWidgetProps, IWidgetState> { class CheckboxWidget extends BaseWidget<CheckboxWidgetProps, WidgetState> {
getPageView() { getPageView() {
return ( return (
<CheckboxComponent <CheckboxComponent
@ -12,20 +12,21 @@ class CheckboxWidget extends BaseWidget<CheckboxWidgetProps, IWidgetState> {
key={this.props.widgetId} key={this.props.widgetId}
items={this.props.items} items={this.props.items}
/> />
) );
} }
getWidgetType(): WidgetType { getWidgetType(): WidgetType {
return "ICON_WIDGET" return "ICON_WIDGET";
} }
} }
export interface CheckboxWidgetProps extends IWidgetProps { export interface CheckboxWidgetProps extends WidgetProps {
items: Array<{ items: Array<{
label: string; label: string;
key: string;
defaultIndeterminate: boolean; defaultIndeterminate: boolean;
value: number | string; value: number | string;
}>; }>;
} }
export default CheckboxWidget export default CheckboxWidget;

77
app/client/src/widgets/ContainerWidget.tsx
View File

@ -1,58 +1,55 @@
import React from "react" import React from "react";
import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget" import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import ContainerComponent from "../editorComponents/ContainerComponent" import ContainerComponent from "../editorComponents/ContainerComponent";
import { import { ContainerOrientation, WidgetType } from "../constants/WidgetConstants";
ContainerOrientation, import WidgetFactory from "../utils/WidgetFactory";
WidgetType, import _ from "lodash";
} from "../constants/WidgetConstants" import { Color } from "../constants/DefaultTheme";
import WidgetFactory from "../utils/WidgetFactory" import DroppableComponent from "../editorComponents/DroppableComponent";
import _ from "lodash"
import { Color } from "../constants/DefaultTheme"
import DroppableComponent from "../editorComponents/DroppableComponent"
const DEFAULT_NUM_COLS = 16 const DEFAULT_NUM_COLS = 16;
const DEFAULT_NUM_ROWS = 16 const DEFAULT_NUM_ROWS = 16;
class ContainerWidget extends BaseWidget< class ContainerWidget extends BaseWidget<
ContainerWidgetProps<IWidgetProps>, ContainerWidgetProps<WidgetProps>,
ContainerWidgetState ContainerWidgetState
> { > {
constructor(props: ContainerWidgetProps<IWidgetProps>) { constructor(props: ContainerWidgetProps<WidgetProps>) {
super(props) super(props);
this.renderChildWidget = this.renderChildWidget.bind(this) this.renderChildWidget = this.renderChildWidget.bind(this);
this.state = { this.state = {
width: 0, width: 0,
height: 0, height: 0,
snapColumnSpace: DEFAULT_NUM_COLS, snapColumnSpace: DEFAULT_NUM_COLS,
snapRowSpace: DEFAULT_NUM_ROWS snapRowSpace: DEFAULT_NUM_ROWS,
} };
} }
componentDidUpdate(previousProps: ContainerWidgetProps<IWidgetProps>) { componentDidUpdate(previousProps: ContainerWidgetProps<WidgetProps>) {
super.componentDidUpdate(previousProps) super.componentDidUpdate(previousProps);
let snapColumnSpace = this.state.snapColumnSpace let snapColumnSpace = this.state.snapColumnSpace;
let snapRowSpace = this.state.snapRowSpace let snapRowSpace = this.state.snapRowSpace;
if (this.state.width) if (this.state.width)
snapColumnSpace = snapColumnSpace =
this.state.width / (this.props.snapColumns || DEFAULT_NUM_COLS) this.state.width / (this.props.snapColumns || DEFAULT_NUM_COLS);
if (this.state.height) if (this.state.height)
snapRowSpace = snapRowSpace =
this.state.height / (this.props.snapRows || DEFAULT_NUM_ROWS) this.state.height / (this.props.snapRows || DEFAULT_NUM_ROWS);
if ( if (
this.state.snapColumnSpace !== snapColumnSpace || this.state.snapColumnSpace !== snapColumnSpace ||
this.state.snapRowSpace !== snapRowSpace this.state.snapRowSpace !== snapRowSpace
) { ) {
this.setState({ this.setState({
snapColumnSpace: snapColumnSpace, snapColumnSpace: snapColumnSpace,
snapRowSpace: snapRowSpace snapRowSpace: snapRowSpace,
}) });
} }
} }
renderChildWidget(childWidgetData: IWidgetProps) { renderChildWidget(childWidgetData: WidgetProps) {
childWidgetData.parentColumnSpace = this.state.snapColumnSpace childWidgetData.parentColumnSpace = this.state.snapColumnSpace;
childWidgetData.parentRowSpace = this.state.snapRowSpace childWidgetData.parentRowSpace = this.state.snapRowSpace;
return WidgetFactory.createWidget(childWidgetData) return WidgetFactory.createWidget(childWidgetData);
} }
getPageView() { getPageView() {
@ -60,13 +57,13 @@ class ContainerWidget extends BaseWidget<
<ContainerComponent <ContainerComponent
widgetId={this.props.widgetId} widgetId={this.props.widgetId}
style={{ style={{
...this.getPositionStyle() ...this.getPositionStyle(),
}} }}
orientation={this.props.orientation || "VERTICAL"} orientation={this.props.orientation || "VERTICAL"}
> >
{_.map(this.props.children, this.renderChildWidget)} {_.map(this.props.children, this.renderChildWidget)}
</ContainerComponent> </ContainerComponent>
) );
} }
getCanvasView() { getCanvasView() {
@ -74,26 +71,26 @@ class ContainerWidget extends BaseWidget<
<DroppableComponent <DroppableComponent
{...this.props} {...this.props}
style={{ style={{
...this.getPositionStyle() ...this.getPositionStyle(),
}} }}
> >
{super.getCanvasView()} {super.getCanvasView()}
</DroppableComponent> </DroppableComponent>
) );
} }
getWidgetType(): WidgetType { getWidgetType(): WidgetType {
return "CONTAINER_WIDGET" return "CONTAINER_WIDGET";
} }
} }
export interface ContainerWidgetState extends IWidgetState { export interface ContainerWidgetState extends WidgetState {
snapColumnSpace: number; snapColumnSpace: number;
snapRowSpace: number; snapRowSpace: number;
} }
export interface ContainerWidgetProps<T extends IWidgetProps> export interface ContainerWidgetProps<T extends WidgetProps>
extends IWidgetProps { extends WidgetProps {
children?: T[]; children?: T[];
snapColumns?: number; snapColumns?: number;
snapRows?: number; snapRows?: number;
@ -101,4 +98,4 @@ export interface ContainerWidgetProps<T extends IWidgetProps>
backgroundColor?: Color; backgroundColor?: Color;
} }
export default ContainerWidget export default ContainerWidget;

6
app/client/src/widgets/IconWidget.tsx
View File

@ -1,11 +1,11 @@
import React from "react"; import React from "react";
import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"; import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants"; import { WidgetType } from "../constants/WidgetConstants";
import { Intent } from "@blueprintjs/core"; import { Intent } from "@blueprintjs/core";
import { IconName } from "@blueprintjs/icons"; import { IconName } from "@blueprintjs/icons";
import IconComponent from "../editorComponents/IconComponent"; import IconComponent from "../editorComponents/IconComponent";
class IconWidget extends BaseWidget<IconWidgetProps, IWidgetState> { class IconWidget extends BaseWidget<IconWidgetProps, WidgetState> {
getPageView() { getPageView() {
return ( return (
<IconComponent <IconComponent
@ -24,7 +24,7 @@ class IconWidget extends BaseWidget<IconWidgetProps, IWidgetState> {
} }
} }
export interface IconWidgetProps extends IWidgetProps { export interface IconWidgetProps extends WidgetProps {
icon?: IconName; icon?: IconName;
iconSize?: number; iconSize?: number;
ellipsize?: boolean; ellipsize?: boolean;

10
app/client/src/widgets/InputGroupWidget.tsx
View File

@ -1,14 +1,10 @@
import React from "react"; import React from "react";
import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"; import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants"; import { WidgetType } from "../constants/WidgetConstants";
import InputGroupComponent from "../editorComponents/InputGroupComponent"; import InputGroupComponent from "../editorComponents/InputGroupComponent";
import { IconName, Intent } from "@blueprintjs/core"; import { IconName, Intent } from "@blueprintjs/core";
class InputGroupWidget extends BaseWidget< class InputGroupWidget extends BaseWidget<InputGroupWidgetProps, WidgetState> {
InputGroupWidgetProps,
IWidgetState
> {
getPageView() { getPageView() {
return ( return (
<InputGroupComponent <InputGroupComponent
@ -36,7 +32,7 @@ class InputGroupWidget extends BaseWidget<
} }
} }
export interface InputGroupWidgetProps extends IWidgetProps { export interface InputGroupWidgetProps extends WidgetProps {
className?: string; className?: string;
disabled?: boolean; disabled?: boolean;
large?: boolean; large?: boolean;

21
app/client/src/widgets/NumericInputWidget.tsx
View File

@ -1,14 +1,13 @@
import * as React from "react" import * as React from "react";
import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget" import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants" import { WidgetType } from "../constants/WidgetConstants";
import NumericInputComponent from "../editorComponents/NumericInputComponent" import NumericInputComponent from "../editorComponents/NumericInputComponent";
import { Intent, IconName } from "@blueprintjs/core" import { Intent, IconName } from "@blueprintjs/core";
class NumericInputWidget extends BaseWidget< class NumericInputWidget extends BaseWidget<
NumericInputWidgetProps, NumericInputWidgetProps,
IWidgetState WidgetState
> { > {
getPageView() { getPageView() {
return ( return (
<NumericInputComponent <NumericInputComponent
@ -35,15 +34,15 @@ class NumericInputWidget extends BaseWidget<
selectAllOnIncrement={this.props.selectAllOnIncrement} selectAllOnIncrement={this.props.selectAllOnIncrement}
stepSize={this.props.stepSize} stepSize={this.props.stepSize}
/> />
) );
} }
getWidgetType(): WidgetType { getWidgetType(): WidgetType {
return "NUMERIC_INPUT_WIDGET" return "NUMERIC_INPUT_WIDGET";
} }
} }
export interface NumericInputWidgetProps extends IWidgetProps { export interface NumericInputWidgetProps extends WidgetProps {
className?: string; className?: string;
disabled?: boolean; disabled?: boolean;
large?: boolean; large?: boolean;
@ -66,4 +65,4 @@ export interface NumericInputWidgetProps extends IWidgetProps {
placeholder?: string; placeholder?: string;
} }
export default NumericInputWidget export default NumericInputWidget;

25
app/client/src/widgets/RadioGroupWidget.tsx
View File

@ -1,14 +1,10 @@
import * as React from "react" import * as React from "react";
import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget" import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants" import { WidgetType } from "../constants/WidgetConstants";
import RadioGroupComponent from "../editorComponents/RadioGroupComponent" import RadioGroupComponent from "../editorComponents/RadioGroupComponent";
import { IOptionProps } from "@blueprintjs/core" import { IOptionProps } from "@blueprintjs/core";
class RadioButtonWidget extends BaseWidget<
RadioGroupWidgetProps,
IWidgetState
> {
class RadioButtonWidget extends BaseWidget<RadioGroupWidgetProps, WidgetState> {
getPageView() { getPageView() {
return ( return (
<RadioGroupComponent <RadioGroupComponent
@ -25,15 +21,15 @@ class RadioButtonWidget extends BaseWidget<
className={this.props.className} className={this.props.className}
options={this.props.options} options={this.props.options}
/> />
) );
} }
getWidgetType(): WidgetType { getWidgetType(): WidgetType {
return "RADIO_GROUP_WIDGET" return "RADIO_GROUP_WIDGET";
} }
} }
export interface RadioGroupWidgetProps extends IWidgetProps { export interface RadioGroupWidgetProps extends WidgetProps {
label: string; label: string;
inline: boolean; inline: boolean;
selectedValue: string | number; selectedValue: string | number;
@ -45,7 +41,8 @@ export interface RadioGroupWidgetProps extends IWidgetProps {
items: Array<{ items: Array<{
label: string; label: string;
value: number | string; value: number | string;
key: string;
}>; }>;
} }
export default RadioButtonWidget export default RadioButtonWidget;

7
app/client/src/widgets/SpinnerWidget.tsx
View File

@ -1,11 +1,10 @@
import React from "react"; import React from "react";
import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"; import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants"; import { WidgetType } from "../constants/WidgetConstants";
import { Intent } from "@blueprintjs/core"; import { Intent } from "@blueprintjs/core";
import SpinnerComponent from "../editorComponents/SpinnerComponent"; import SpinnerComponent from "../editorComponents/SpinnerComponent";
class SpinnerWidget extends BaseWidget<SpinnerWidgetProps, IWidgetState> { class SpinnerWidget extends BaseWidget<SpinnerWidgetProps, WidgetState> {
getPageView() { getPageView() {
return ( return (
<SpinnerComponent <SpinnerComponent
@ -24,7 +23,7 @@ class SpinnerWidget extends BaseWidget<SpinnerWidgetProps, IWidgetState> {
} }
} }
export interface SpinnerWidgetProps extends IWidgetProps { export interface SpinnerWidgetProps extends WidgetProps {
size?: number; size?: number;
value?: number; value?: number;
ellipsize?: boolean; ellipsize?: boolean;

8
app/client/src/widgets/TagInputWidget.tsx
View File

@ -1,12 +1,10 @@
import React from "react"; import React from "react";
import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"; import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants"; import { WidgetType } from "../constants/WidgetConstants";
import TagInputComponent from "../editorComponents/TagInputComponent"; import TagInputComponent from "../editorComponents/TagInputComponent";
import { Intent, ITagProps, HTMLInputProps } from "@blueprintjs/core"; import { Intent, ITagProps, HTMLInputProps } from "@blueprintjs/core";
class TagInputWidget extends BaseWidget<TagInputWidgetProps, WidgetState> {
class TagInputWidget extends BaseWidget<TagInputWidgetProps, IWidgetState> {
getPageView() { getPageView() {
return ( return (
<TagInputComponent <TagInputComponent
@ -24,7 +22,7 @@ class TagInputWidget extends BaseWidget<TagInputWidgetProps, IWidgetState> {
} }
} }
export interface TagInputWidgetProps extends IWidgetProps { export interface TagInputWidgetProps extends WidgetProps {
addOnPaste?: boolean; addOnPaste?: boolean;
className?: string; className?: string;
disabled?: boolean; disabled?: boolean;

7
app/client/src/widgets/TextWidget.tsx
View File

@ -1,10 +1,9 @@
import React from "react"; import React from "react";
import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"; import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants"; import { WidgetType } from "../constants/WidgetConstants";
import TextComponent from "../editorComponents/TextComponent"; import TextComponent from "../editorComponents/TextComponent";
class TextWidget extends BaseWidget<TextWidgetProps, IWidgetState> { class TextWidget extends BaseWidget<TextWidgetProps, WidgetState> {
getPageView() { getPageView() {
return ( return (
<TextComponent <TextComponent
@ -22,7 +21,7 @@ class TextWidget extends BaseWidget<TextWidgetProps, IWidgetState> {
} }
} }
export interface TextWidgetProps extends IWidgetProps { export interface TextWidgetProps extends WidgetProps {
text?: string; text?: string;
ellipsize?: boolean; ellipsize?: boolean;
tagName?: keyof JSX.IntrinsicElements; tagName?: keyof JSX.IntrinsicElements;