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

13
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 = {
parser: '@typescript-eslint/parser',
plugins: ["react", "@typescript-eslint", "prettier"],
@ -22,8 +15,8 @@ module.exports = {
}
},
rules: {
"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/no-unexpected-multiline": "on",
"@typescript-eslint/explicit-function-return-type": 0,
"@typescript-eslint/no-explicit-any": 0
},
settings: {
react: {
@ -31,4 +24,4 @@ module.exports = {
version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
}
}
};
};

3
app/client/package.json
View File

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

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

@ -1,37 +1,43 @@
import {
ReduxAction,
ActionTypes
} from "../constants/ActionConstants"
import { PageRequest } from "../api/PageApi"
import { ReduxAction, ActionTypes } from "../constants/ActionConstants";
import { PageRequest } from "../api/PageApi";
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 {
type: ActionTypes.FETCH_PAGE,
payload: {
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 {
type: ActionTypes.ADD_PAGE_WIDGET,
payload: {
pageId,
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 {
type: ActionTypes.REMOVE_PAGE_WIDGET,
payload: {
pageId,
widgetId,
}
}
}
},
};
};

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

@ -1,30 +1,30 @@
import {
ActionTypes
} from "../constants/ActionConstants"
import { WidgetCardProps } from '../widgets/BaseWidget'
import { ActionTypes } from "../constants/ActionConstants";
import { WidgetCardProps } from "../widgets/BaseWidget";
export const fetchWidgetCards = () => {
return {
type: ActionTypes.FETCH_WIDGET_CARDS
}
}
type: ActionTypes.FETCH_WIDGET_CARDS,
};
};
export const errorFetchingWidgetCards = (error: any) => {
return {
type: ActionTypes.ERROR_FETCHING_WIDGET_CARDS,
error
}
}
error,
};
};
export const successFetchingWidgetCards = (cards: { [id: string]: WidgetCardProps[] }) => {
export const successFetchingWidgetCards = (cards: {
[id: string]: WidgetCardProps[];
}) => {
return {
type: ActionTypes.SUCCESS_FETCHING_WIDGET_CARDS,
cards
}
}
cards,
};
};
export default {
fetchWidgetCards,
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 {
BASE_URL,
REQUEST_TIMEOUT_MS,
REQUEST_HEADERS
} from "../constants/ApiConstants"
REQUEST_HEADERS,
} from "../constants/ApiConstants";
const axios = require("axios")
const axios = require("axios");
const axiosInstance = axios.create({
baseURL: BASE_URL,
timeout: REQUEST_TIMEOUT_MS,
headers: REQUEST_HEADERS
})
headers: REQUEST_HEADERS,
});
axiosInstance.interceptors.response.use(
function(response: any) {
// Do something with response data
return response.data
return response.data;
},
function(error: any) {
if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.log(error.response.data)
console.log(error.response.status)
console.log(error.response.headers)
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
console.log(error.request)
console.log(error.request);
} else {
// 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)
return Promise.reject(error)
}
)
console.log(error.config);
return Promise.reject(error);
},
);
class Api {
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) {
return axiosInstance.post(
url + this.convertObjectToQueryParams(queryParams),
body
)
body,
);
}
static convertObjectToQueryParams(object: any): string {
if (!_.isNil(object)) {
const paramArray: string[] = _.map(_.keys(object), key => {
return encodeURIComponent(key) + "=" + encodeURIComponent(object[key])
})
return "?" + _.join(paramArray, "&")
return encodeURIComponent(key) + "=" + encodeURIComponent(object[key]);
});
return "?" + _.join(paramArray, "&");
} 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 {
Accept: ContentType
"Content-Type": ContentType
dataType: DataType
Accept: ContentType;
"Content-Type": ContentType;
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 {
errorCode?: ApiErrorCodes
errorCode?: ApiErrorCodes;
}
export interface ApiResponse {
responseMeta: ResponseMeta
responseMeta: ResponseMeta;
}

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

@ -1,6 +1,6 @@
import Api from "./Api"
import { ContainerWidgetProps } from "../widgets/ContainerWidget"
import { ApiResponse } from "./ApiResponses"
import Api from "./Api";
import { ContainerWidgetProps } from "../widgets/ContainerWidget";
import { ApiResponse } from "./ApiResponses";
import { RenderMode } from "../constants/WidgetConstants";
export interface PageRequest {
@ -21,17 +21,15 @@ export interface SavePageResponse {
}
class PageApi extends Api {
static url = "/page"
static url = "/page";
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> {
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 { WidgetCardProps } from "../widgets/BaseWidget"
import Api from "./Api";
import { WidgetCardProps } from "../widgets/BaseWidget";
export interface WidgetCardsPaneResponse {
cards: { [id: string]: WidgetCardProps[]}
cards: { [id: string]: WidgetCardProps[] };
}
export interface WidgetCardsPaneRequest {}
// export interface WidgetCardsPaneRequest {}
class WidgetCardsPaneApi extends Api {
static url = "/widgetCards"
static url = "/widgetCards";
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 { IWidgetProps, WidgetCardProps } from "../widgets/BaseWidget"
import { WidgetProps, WidgetCardProps } from "../widgets/BaseWidget";
export type ActionType =
| "UPDATE_CANVAS"
@ -18,7 +18,7 @@ export type ActionType =
| "SUCCESS_FETCHING_WIDGET_CARDS"
| "ERROR_FETCHING_WIDGET_CARDS"
| "ADD_PAGE_WIDGET"
| "REMOVE_PAGE_WIDGET"
| "REMOVE_PAGE_WIDGET";
export const ActionTypes: { [id: string]: ActionType } = {
UPDATE_CANVAS: "UPDATE_CANVAS",
@ -37,8 +37,8 @@ export const ActionTypes: { [id: string]: 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"
}
REMOVE_PAGE_WIDGET: "REMOVE_PAGE_WIDGET",
};
export interface ReduxAction<T> {
type: ActionType;
@ -47,13 +47,13 @@ export interface ReduxAction<T> {
export interface LoadCanvasPayload {
pageWidgetId: string;
widgets: { [widgetId: string]: IWidgetProps };
widgets: { [widgetId: string]: WidgetProps };
}
export interface LoadWidgetPanePayload {
widgets: IWidgetProps[];
widgets: WidgetProps[];
}
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";
export type DataType = "json" | "xml"
export type ContentType = "application/json" | "application/x-www-form-urlencoded"
export type EncodingType = "gzip"
export type DataType = "json" | "xml";
export type ContentType =
| "application/json"
| "application/x-www-form-urlencoded";
export type EncodingType = "gzip";
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 STAGE_BASE_URL = "https://14157cb0-190f-4082-a791-886a8df05930.mock.pstmn.io"
export const BASE_URL = MOCK_BASE_URL
export const REQUEST_TIMEOUT_MS = 2000
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 STAGE_BASE_URL =
"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 = {
Accept: "application/json",
"Content-Type": "application/json",
dataType: "json",
}
};
export interface APIException {
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 const SENTRY_PROD_CONFIG = { dsn: "https://a63362b692d64edeb175741f1f80b091@sentry.io/1546547", environment: 'Production' }
export const SENTRY_STAGE_CONFIG = { dsn: "https://a63362b692d64edeb175741f1f80b091@sentry.io/1546547", environment: 'Staging' }
export type ENVIRONMENT = "PRODUCTION" | "STAGING" | "LOCAL";
export const SENTRY_PROD_CONFIG = {
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_HJSV = "6"
export const HOTJAR_PROD_HJID = "1465835";
export const HOTJAR_PROD_HJSV = "6";

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

@ -14,17 +14,17 @@ export type WidgetType =
| "CHECKBOX_WIDGET"
| "RADIO_GROUP_WIDGET"
| "INPUT_WIDGET"
| "TOGGLE_WIDGET"
| "TOGGLE_WIDGET";
export const WidgetTypes: {[id: string]: WidgetType } = {
export const WidgetTypes: { [id: string]: WidgetType } = {
BUTTON_WIDGET: "BUTTON_WIDGET",
TEXT_WIDGET: "TEXT_WIDGET",
INPUT_WIDGET: "INPUT_WIDGET",
TOGGLE_WIDGET: "TOGGLE_WIDGET",
}
};
export type ContainerOrientation = "HORIZONTAL" | "VERTICAL"
export type PositionType = "ABSOLUTE" | "CONTAINER_DIRECTION"
export type ContainerOrientation = "HORIZONTAL" | "VERTICAL";
export type PositionType = "ABSOLUTE" | "CONTAINER_DIRECTION";
export type CSSUnit =
| "px"
| "cm"
@ -40,23 +40,23 @@ export type CSSUnit =
| "vh"
| "vmin"
| "vmax"
| "%"
| "%";
export type RenderMode =
| "COMPONENT_PANE"
| "CANVAS"
| "PAGE"
| "CANVAS_SELECTED"
| "CANVAS_SELECTED";
export const RenderModes: { [id: string]: RenderMode } = {
COMPONENT_PANE: "COMPONENT_PANE",
CANVAS: "CANVAS",
PAGE: "PAGE",
CANVAS_SELECTED: "CANVAS_SELECTED"
}
CANVAS_SELECTED: "CANVAS_SELECTED",
};
export const CSSUnits: { [id: string]: CSSUnit } = {
PIXEL: "px",
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 { PositionType, CSSUnit } from "../constants/WidgetConstants"
import { Component } from "react";
import { PositionType, CSSUnit } from "../constants/WidgetConstants";
import { Color } from "../constants/DefaultTheme";
/***
@ -8,22 +8,21 @@ import { Color } from "../constants/DefaultTheme";
abstract class BaseComponent<T extends ComponentProps> extends Component<T> {}
export interface BaseStyle {
height?: number;
width?: number;
positionType: PositionType;
xPosition: number;
yPosition: number;
xPositionUnit: CSSUnit;
yPositionUnit: CSSUnit;
heightUnit?: CSSUnit;
widthUnit?: CSSUnit;
backgroundColor?: Color;
height?: number;
width?: number;
positionType: PositionType;
xPosition: number;
yPosition: number;
xPositionUnit: CSSUnit;
yPositionUnit: CSSUnit;
heightUnit?: CSSUnit;
widthUnit?: CSSUnit;
backgroundColor?: Color;
}
export interface ComponentProps {
widgetId: string;
style: BaseStyle;
widgetId: string;
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 { ComponentProps } from "./BaseComponent"
import {
Boundary,
Breadcrumbs,
IBreadcrumbProps
} from "@blueprintjs/core"
import { Container } from "./ContainerComponent"
import * as React from "react";
import { ComponentProps } from "./BaseComponent";
import { Boundary, Breadcrumbs, IBreadcrumbProps } from "@blueprintjs/core";
import { Container } from "./ContainerComponent";
class BreadcrumbsComponent extends React.Component<BreadcrumbsComponentProps> {
render() {
@ -18,7 +14,7 @@ class BreadcrumbsComponent extends React.Component<BreadcrumbsComponentProps> {
className={this.props.className}
/>
</Container>
)
);
}
}
@ -30,4 +26,4 @@ export interface BreadcrumbsComponentProps extends ComponentProps {
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 { Button, MaybeElement } from "@blueprintjs/core"
import { ITextComponentProps } from "./TextComponent"
import { Container } from "./ContainerComponent"
import * as React from "react";
import { Button, MaybeElement } from "@blueprintjs/core";
import { TextComponentProps } from "./TextComponent";
import { Container } from "./ContainerComponent";
class ButtonComponent extends React.Component<IButtonComponentProps> {
class ButtonComponent extends React.Component<ButtonComponentProps> {
render() {
return (
<Container {...this.props}>
<Button icon={this.props.icon}>{this.props.text}</Button>
<Button icon={this.props.icon}>{this.props.text}</Button>
</Container>
)
);
}
}
interface IButtonComponentProps extends ITextComponentProps {
icon?: MaybeElement
interface ButtonComponentProps extends TextComponentProps {
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 { ComponentProps } from "./BaseComponent"
import { Callout, Intent } from "@blueprintjs/core"
import { Container } from "./ContainerComponent"
class CalloutComponent extends React.Component<ICalloutComponentProps> {
import * as React from "react";
import { ComponentProps } from "./BaseComponent";
import { Callout, Intent } from "@blueprintjs/core";
import { Container } from "./ContainerComponent";
class CalloutComponent extends React.Component<CalloutComponentProps> {
render() {
return (
<Container {...this.props}>
@ -13,16 +13,16 @@ class CalloutComponent extends React.Component<ICalloutComponentProps> {
{this.props.description}
</Callout>
</Container>
)
);
}
}
export interface ICalloutComponentProps extends ComponentProps {
id?: string
title?: string
description?: string
intent?: Intent
ellipsize?: boolean
export interface CalloutComponentProps extends ComponentProps {
id?: string;
title?: string;
description?: string;
intent?: Intent;
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 { Checkbox } from "@blueprintjs/core";
import { Container } from "./ContainerComponent";
class CheckboxComponent extends React.Component<ICheckboxComponentProps> {
class CheckboxComponent extends React.Component<CheckboxComponentProps> {
render() {
return (
<Container {...this.props}>
{this.props.items.map(item => (
<Checkbox
key={item.key}
label={item.label}
defaultIndeterminate={item.defaultIndeterminate}
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<{
key: string;
label: string;
defaultIndeterminate: boolean;
value: number | string;

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

@ -1,26 +1,30 @@
import { ComponentProps } from "./BaseComponent";
import { ContainerOrientation } from "../constants/WidgetConstants";
import styled from "../constants/DefaultTheme";
import { useDrop } from "react-dnd"
import { WidgetTypes } from "../constants/WidgetConstants"
import { DraggableWidget } from "../widgets/BaseWidget"
import { useDrop } from "react-dnd";
import { WidgetTypes } from "../constants/WidgetConstants";
import { DraggableWidget } from "../widgets/BaseWidget";
import React from "react";
export const Container = styled("div")<ContainerProps>`
display: flex;
flex-direction: ${props => {
return props.orientation === "HORIZONTAL" ? "row" : "column"
return props.orientation === "HORIZONTAL" ? "row" : "column";
}};
background: ${props => props.style.backgroundColor};
color: ${props => props.theme.colors.primary};
position: ${props => {
return props.style.positionType === "ABSOLUTE" ? "absolute" : "relative"
return props.style.positionType === "ABSOLUTE" ? "absolute" : "relative";
}};
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 => {
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) => {
@ -28,14 +32,18 @@ const ContainerComponent = (props: ContainerProps) => {
const [, drop] = useDrop({
accept: Object.values(WidgetTypes),
drop(item: DraggableWidget, monitor) {
if (addWidgetFn && monitor.isOver({shallow: true})){
if (addWidgetFn && monitor.isOver({ shallow: true })) {
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 {
children?: JSX.Element[] | JSX.Element;
@ -43,4 +51,4 @@ export interface ContainerProps extends ComponentProps {
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 { IWidgetProps, IWidgetState } from "../widgets/BaseWidget"
import { DragSource, DragSourceConnector, DragSourceMonitor } from "react-dnd"
import { ContainerProps } from "./ContainerComponent"
import * as React from "react";
import { WidgetProps, WidgetState } from "../widgets/BaseWidget";
import { DragSource, DragSourceConnector, DragSourceMonitor } from "react-dnd";
import { ContainerProps } from "./ContainerComponent";
export interface DraggableProps extends ContainerProps {
connectDragSource: Function;
isDragging?: boolean;
}
class DraggableComponent extends React.Component<DraggableProps, IWidgetState> {
class DraggableComponent extends React.Component<DraggableProps, WidgetState> {
render() {
return this.props.connectDragSource(
<div
@ -20,33 +20,35 @@ class DraggableComponent extends React.Component<DraggableProps, IWidgetState> {
: 0,
top: this.props.style
? this.props.style.yPosition + this.props.style.yPositionUnit
: 0
: 0,
}}
>
{this.props.children}
</div>
)
</div>,
);
}
}
const widgetSource = {
beginDrag(props: IWidgetProps) {
beginDrag(props: WidgetProps) {
return {
widgetId: props.widgetId,
widgetType: props.widgetType
}
}
}
widgetType: props.widgetType,
};
},
};
const widgetType = (props: IWidgetProps) => {
return props.widgetType
}
const widgetType = (props: WidgetProps) => {
return props.widgetType;
};
function collect(connect: DragSourceConnector, monitor: DragSourceMonitor) {
return {
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 { IWidgetProps, IWidgetState } from "../widgets/BaseWidget"
import { DropTargetConnector, DropTargetMonitor, DropTarget, XYCoord } from "react-dnd"
import { ContainerProps } from "./ContainerComponent"
import * as React from "react";
import { WidgetProps, WidgetState } from "../widgets/BaseWidget";
import {
DropTargetConnector,
DropTargetMonitor,
DropTarget,
XYCoord,
} from "react-dnd";
import { ContainerProps } from "./ContainerComponent";
import WidgetFactory from "../utils/WidgetFactory";
export interface DroppableProps extends ContainerProps {
@ -9,10 +14,7 @@ export interface DroppableProps extends ContainerProps {
isOver?: boolean;
}
class DroppableComponent extends React.Component<
DroppableProps,
IWidgetState
> {
class DroppableComponent extends React.Component<DroppableProps, WidgetState> {
render() {
return this.props.connectDropTarget(
<div
@ -22,37 +24,39 @@ class DroppableComponent extends React.Component<
height: this.props.style.height,
width: this.props.style.width,
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}
</div>
)
{this.props.isOver ? undefined : this.props.children}
</div>,
);
}
}
const dropTarget = {
canDrop(props: IWidgetProps) {
return true
canDrop() {
return true;
},
drop(props: IWidgetProps, monitor: DropTargetMonitor) {
const item = monitor.getItem()
const delta = monitor.getDifferenceFromInitialOffset() as XYCoord
const left = Math.round(item.left + delta.x)
const top = Math.round(item.top + delta.y)
return { left: left, top: top }
}
}
drop(props: WidgetProps, monitor: DropTargetMonitor) {
const item = monitor.getItem();
const delta = monitor.getDifferenceFromInitialOffset() as XYCoord;
const left = Math.round(item.left + delta.x);
const top = Math.round(item.top + delta.y);
return { left: left, top: top };
},
};
const getDropTypes = (props: IWidgetProps) => {
return WidgetFactory.getWidgetTypes()
}
const getDropTypes = () => {
return WidgetFactory.getWidgetTypes();
};
function collect(connect: DropTargetConnector, monitor: DropTargetMonitor) {
return {
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 { ComponentProps } from "./BaseComponent"
import { Icon, Intent } from "@blueprintjs/core"
import { IconName } from "@blueprintjs/icons"
import { Container } from "./ContainerComponent"
import * as React from "react";
import { ComponentProps } from "./BaseComponent";
import { Icon, Intent } from "@blueprintjs/core";
import { IconName } from "@blueprintjs/icons";
import { Container } from "./ContainerComponent";
class IconComponent extends React.Component<IconComponentProps> {
render() {
return (
@ -13,7 +13,7 @@ class IconComponent extends React.Component<IconComponentProps> {
intent={this.props.intent}
/>
</Container>
)
);
}
}
@ -24,4 +24,4 @@ export interface IconComponentProps extends ComponentProps {
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 { ComponentProps } from "./BaseComponent"
import { IconName, InputGroup, Intent } from "@blueprintjs/core"
import { Container } from "./ContainerComponent"
class InputGroupComponent extends React.Component<IInputGroupComponentProps> {
import * as React from "react";
import { ComponentProps } from "./BaseComponent";
import { IconName, InputGroup, Intent } from "@blueprintjs/core";
import { Container } from "./ContainerComponent";
class InputGroupComponent extends React.Component<InputGroupComponentProps> {
render() {
return (
<Container {...this.props}>
@ -21,11 +21,11 @@ class InputGroupComponent extends React.Component<IInputGroupComponentProps> {
type={this.props.type}
/>
</Container>
)
);
}
}
export interface IInputGroupComponentProps extends ComponentProps {
export interface InputGroupComponentProps extends ComponentProps {
className?: string;
disabled?: boolean;
large?: boolean;
@ -40,4 +40,4 @@ export interface IInputGroupComponentProps extends ComponentProps {
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 { ComponentProps } from "./BaseComponent"
import { Intent, NumericInput, IconName } from "@blueprintjs/core"
import { Container } from "./ContainerComponent"
import * as React from "react";
import { ComponentProps } from "./BaseComponent";
import { Intent, NumericInput, IconName } from "@blueprintjs/core";
import { Container } from "./ContainerComponent";
class NumericInputComponent extends React.Component<
INumericInputComponentProps
NumericInputComponentProps
> {
render() {
return (
@ -30,11 +30,11 @@ class NumericInputComponent extends React.Component<
stepSize={this.props.stepSize}
/>
</Container>
)
);
}
}
export interface INumericInputComponentProps extends ComponentProps {
export interface NumericInputComponentProps extends ComponentProps {
className?: string;
disabled?: boolean;
large?: boolean;
@ -57,4 +57,4 @@ export interface INumericInputComponentProps extends ComponentProps {
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 { ComponentProps } from "./BaseComponent"
import { Radio, RadioGroup, IOptionProps } from "@blueprintjs/core"
import { Container } from "./ContainerComponent"
import * as React from "react";
import { ComponentProps } from "./BaseComponent";
import { Radio, RadioGroup, IOptionProps } from "@blueprintjs/core";
import { Container } from "./ContainerComponent";
class RadioGroupComponent extends React.Component<RadioGroupComponentProps> {
render() {
return (
@ -17,11 +17,11 @@ class RadioGroupComponent extends React.Component<RadioGroupComponentProps> {
options={this.props.options}
>
{this.props.items.map(item => (
<Radio label={item.label} value={item.value} />
<Radio key={item.key} label={item.label} value={item.value} />
))}
</RadioGroup>
</Container>
)
);
}
}
@ -36,8 +36,9 @@ export interface RadioGroupComponentProps extends ComponentProps {
options: IOptionProps[];
items: Array<{
label: string;
key: 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 { ComponentProps } from "./BaseComponent"
import { Spinner, Intent } from "@blueprintjs/core"
import { Container } from "./ContainerComponent"
import * as React from "react";
import { ComponentProps } from "./BaseComponent";
import { Spinner, Intent } from "@blueprintjs/core";
import { Container } from "./ContainerComponent";
class SpinnerComponent extends React.Component<SpinnerComponentProps> {
render() {
@ -13,7 +13,7 @@ class SpinnerComponent extends React.Component<SpinnerComponentProps> {
intent={this.props.intent}
/>
</Container>
)
);
}
}
@ -23,4 +23,4 @@ export interface SpinnerComponentProps extends ComponentProps {
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 { ComponentProps } from "./BaseComponent"
import { Intent, ITagProps, TagInput, HTMLInputProps } from "@blueprintjs/core"
import { Container } from "./ContainerComponent"
import * as React from "react";
import { ComponentProps } from "./BaseComponent";
import { Intent, ITagProps, TagInput, HTMLInputProps } from "@blueprintjs/core";
import { Container } from "./ContainerComponent";
class TagInputComponent extends React.Component<TagInputComponentProps> {
render() {
return (
@ -11,7 +11,7 @@ class TagInputComponent extends React.Component<TagInputComponentProps> {
values={this.props.values}
/>
</Container>
)
);
}
}
@ -32,4 +32,4 @@ export interface TagInputComponentProps extends ComponentProps {
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 { ComponentProps } from "./BaseComponent"
import { Text } from "@blueprintjs/core"
import { Container } from "./ContainerComponent"
class TextComponent extends React.Component<ITextComponentProps> {
import * as React from "react";
import { ComponentProps } from "./BaseComponent";
import { Text } from "@blueprintjs/core";
import { Container } from "./ContainerComponent";
class TextComponent extends React.Component<TextComponentProps> {
render() {
return (
<Container {...this.props}>
@ -10,14 +10,14 @@ class TextComponent extends React.Component<ITextComponentProps> {
{this.props.text}
</Text>
</Container>
)
);
}
}
export interface ITextComponentProps extends ComponentProps {
export interface TextComponentProps extends ComponentProps {
text?: string;
ellipsize?: boolean;
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",
icon: "icon-collapse",
label: "Input",
},{
},
{
widgetType: "TAG_INPUT_WIDGET",
icon: "icon-dropdown",
label: "Tag",
@ -51,7 +52,7 @@ const WidgetCardsPaneResponse: WidgetCardsPaneReduxState = {
widgetType: "NUMERIC_INPUT_WIDGET",
icon: "icon-table",
label: "Numeric",
}
},
],
form: [
{
@ -63,17 +64,16 @@ const WidgetCardsPaneResponse: WidgetCardsPaneReduxState = {
widgetType: "CALLOUT_WIDGET",
icon: "icon-alert",
label: "Callout",
}
},
],
view: [
{
widgetType: "INPUT_GROUP_WIDGET",
icon: "icon-input",
label: "Input",
}
]
}
},
],
},
};
export default WidgetCardsPaneResponse;

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

@ -1,21 +1,26 @@
import { normalize, schema, denormalize } from 'normalizr';
import { PageResponse } from '../api/PageApi';
import { ContainerWidgetProps } from '../widgets/ContainerWidget';
import { normalize, schema, denormalize } from "normalizr";
import { PageResponse } from "../api/PageApi";
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);
widgetSchema.define({ children: [widgetSchema] });
class CanvasWidgetsNormalizer {
static normalize(pageResponse: PageResponse): { entities: any; result: any } {
return normalize(pageResponse.pageWidget, widgetSchema);
}
static normalize(pageResponse: PageResponse): { entities: any, result: any } {
return normalize(pageResponse.pageWidget, widgetSchema)
}
static denormalize(pageWidgetId: string, entities: any): ContainerWidgetProps<any> {
return denormalize(pageWidgetId, widgetSchema, entities)
}
static denormalize(
pageWidgetId: string,
entities: any,
): ContainerWidgetProps<any> {
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 styled from "styled-components"
import Canvas from "./Canvas"
import { WidgetCardProps, IWidgetProps } from '../../widgets/BaseWidget'
import { WidgetCardProps, WidgetProps } from '../../widgets/BaseWidget'
import { AppState } from "../../reducers"
import { EditorReduxState } from "../../reducers/uiReducers/editorReducer"
import WidgetCardsPane from "./WidgetCardsPane"
@ -23,7 +23,10 @@ const CanvasContainer = styled.section`
margin: 0px 10px;
&:before {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
pointer-events: none;
}
@ -100,7 +103,7 @@ const mapStateToProps = (state: AppState, props: EditorProps): EditorReduxState
const mapDispatchToProps = (dispatch: any) => {
return {
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,
ReduxAction
} from "../../constants/ActionConstants"
import { IWidgetProps } from "../../widgets/BaseWidget"
import { WidgetProps } from "../../widgets/BaseWidget"
import CanvasWidgetsNormalizer from "../../normalizers/CanvasWidgetsNormalizer";
const initialState: CanvasWidgetsReduxState = {}
export interface IFlattenedWidgetProps extends IWidgetProps {
export interface IFlattenedWidgetProps extends WidgetProps {
children?: string[];
}
@ -23,7 +23,7 @@ const canvasWidgetsReducer = createReducer(initialState, {
},
[ActionTypes.ADD_PAGE_WIDGET]: (
state: CanvasWidgetsReduxState,
action: ReduxAction<{pageId: string, widget: IWidgetProps}>
action: ReduxAction<{pageId: string, widget: WidgetProps}>
) => {
const widget = action.payload.widget
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 entityReducer from "./entityReducers"
import uiReducer from "./uiReducers"
import { CanvasReduxState } from "./uiReducers/canvasReducer"
import { CanvasWidgetsReduxState } from "./entityReducers/canvasWidgetsReducers"
import { WidgetCardsPaneReduxState } from "./uiReducers/widgetCardsPaneReducer"
import { EditorHeaderReduxState } from "./uiReducers/editorHeaderReducer"
import { EditorReduxState } from "./uiReducers/editorReducer"
import { combineReducers } from "redux";
import entityReducer from "./entityReducers";
import uiReducer from "./uiReducers";
import { CanvasReduxState } from "./uiReducers/canvasReducer";
import { CanvasWidgetsReduxState } from "./entityReducers/canvasWidgetsReducers";
import { WidgetCardsPaneReduxState } from "./uiReducers/widgetCardsPaneReducer";
import { EditorHeaderReduxState } from "./uiReducers/editorHeaderReducer";
import { EditorReduxState } from "./uiReducers/editorReducer";
const appReducer = combineReducers({
entities: entityReducer,
ui: uiReducer
})
ui: uiReducer,
});
export default appReducer
export default appReducer;
export interface AppState {
ui: {
canvas: CanvasReduxState
widgetCardsPane: WidgetCardsPaneReduxState
editorHeader: EditorHeaderReduxState
editor: EditorReduxState
}
canvas: CanvasReduxState;
widgetCardsPane: WidgetCardsPaneReduxState;
editorHeader: EditorHeaderReduxState;
editor: EditorReduxState;
};
entities: {
canvasWidgets: CanvasWidgetsReduxState
}
canvasWidgets: CanvasWidgetsReduxState;
};
}

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

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

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

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

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

@ -1,19 +1,22 @@
// import CanvasWidgetsNormalizer from "../normalizers/CanvasWidgetsNormalizer"
import { ActionTypes, ReduxAction } from "../constants/ActionConstants"
import WidgetCardsPaneApi, { WidgetCardsPaneResponse, WidgetCardsPaneRequest } from "../api/WidgetCardsPaneApi"
import { successFetchingWidgetCards } from "../actions/widgetCardsPaneActions"
import { call, put, takeLatest } from "redux-saga/effects"
import { ActionTypes } from "../constants/ActionConstants";
import WidgetCardsPaneApi, {
WidgetCardsPaneResponse,
} from "../api/WidgetCardsPaneApi";
import { successFetchingWidgetCards } from "../actions/widgetCardsPaneActions";
import { call, put, takeLatest } from "redux-saga/effects";
export function* fetchWidgetCards(widgetCardsRequestAction: ReduxAction<WidgetCardsPaneRequest>) {
export function* fetchWidgetCards() {
try {
const widgetCards: WidgetCardsPaneResponse = yield call(WidgetCardsPaneApi.fetchWidgetCards)
yield put(successFetchingWidgetCards(widgetCards.cards))
} catch(err) {
yield put({ type: ActionTypes.ERROR_FETCHING_WIDGET_CARDS, err})
const widgetCards: WidgetCardsPaneResponse = yield call(
WidgetCardsPaneApi.fetchWidgetCards,
);
yield put(successFetchingWidgetCards(widgetCards.cards));
} catch (err) {
yield put({ type: ActionTypes.ERROR_FETCHING_WIDGET_CARDS, err });
}
}
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 { watchFetchPage } from "../sagas/PageSagas"
import { fetchWidgetCardsSaga } from './WidgetCardsPaneSagas'
import { all } from "redux-saga/effects";
import { watchFetchPage } from "../sagas/PageSagas";
import { fetchWidgetCardsSaga } from "./WidgetCardsPaneSagas";
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 = "PAGE_VIEW" | "ADD_COMPONENT" | "DELETE_COMPONENT" | "RESIZE_COMPONENT"
export type Gender = "MALE" | "FEMALE"
export type EventName =
| "PAGE_VIEW"
| "ADD_COMPONENT"
| "DELETE_COMPONENT"
| "RESIZE_COMPONENT";
export type Gender = "MALE" | "FEMALE";
export interface User {
userId: string
name: string
email: string
gender: Gender
userId: string;
name: string;
email: string;
gender: Gender;
}
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) {
(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);
};
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 initializeSegment() {
(function init(window: any) {
const analytics = (window.analytics = window.analytics || []);
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() {
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() {
(function init(window: any){
var analytics=window.analytics=window.analytics||[];
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 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);
}
}
export default AnalyticsUtil
export default AnalyticsUtil;

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

@ -1,42 +1,50 @@
import FontFaceObserver from 'fontfaceobserver'
import { ReduxAction } from "../constants/ActionConstants"
import { SENTRY_PROD_CONFIG, SENTRY_STAGE_CONFIG, 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';
import FontFaceObserver from "fontfaceobserver";
import { ReduxAction } from "../constants/ActionConstants";
import {
SENTRY_PROD_CONFIG,
SENTRY_STAGE_CONFIG,
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 = (
initialState: any,
handlers: { [type: string]: Function }
handlers: { [type: string]: Function },
) => {
return function reducer(state = initialState, action: ReduxAction<any>) {
if (handlers.hasOwnProperty(action.type)) {
return handlers[action.type](state, action)
return handlers[action.type](state, action);
} else {
return state
return state;
}
}
}
};
};
export const appInitializer = () => {
netlifyIdentity.init();
switch (process.env.REACT_APP_ENVIRONMENT) {
case "PRODUCTION":
Sentry.init(SENTRY_PROD_CONFIG);
Sentry.init(SENTRY_PROD_CONFIG);
AnalyticsUtil.initializeHotjar(HOTJAR_PROD_HJID, HOTJAR_PROD_HJSV);
AnalyticsUtil.initializeSegment();
break;
case "STAGING":
Sentry.init(SENTRY_STAGE_CONFIG);
break
Sentry.init(SENTRY_STAGE_CONFIG);
break;
case "LOCAL":
break;
}
const textFont = new FontFaceObserver("DM Sans");
textFont.load().then(()=> {
document.body.className += "fontLoaded";
}).catch(err => {
console.log(err);
});
}
textFont
.load()
.then(() => {
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 { IWidgetBuilder, IWidgetProps } from "../widgets/BaseWidget";
import { WidgetBuilder, WidgetProps } from "../widgets/BaseWidget";
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>) {
this.widgetMap.set(widgetType, widgetBuilder)
}
static createWidget(widgetData: IWidgetProps): JSX.Element {
widgetData.key = widgetData.widgetId
const widgetBuilder = this.widgetMap.get(widgetData.widgetType)
if (widgetBuilder)
return widgetBuilder.buildWidget(widgetData)
else {
const ex: WidgetCreationException = {
message: "Widget Builder not registered for widget type" + widgetData.widgetType
}
throw ex
}
}
static getWidgetTypes(): WidgetType[] {
return Array.from(this.widgetMap.keys());
static createWidget(widgetData: WidgetProps): JSX.Element {
widgetData.key = widgetData.widgetId;
const widgetBuilder = this.widgetMap.get(widgetData.widgetType);
if (widgetBuilder) return widgetBuilder.buildWidget(widgetData);
else {
const ex: WidgetCreationException = {
message:
"Widget Builder not registered for widget type" +
widgetData.widgetType,
};
throw ex;
}
}
static getWidgetTypes(): WidgetType[] {
return Array.from(this.widgetMap.keys());
}
}
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, {
ContainerWidgetProps
} from "../widgets/ContainerWidget"
import TextWidget, { TextWidgetProps } from "../widgets/TextWidget"
ContainerWidgetProps,
} from "../widgets/ContainerWidget";
import TextWidget, { TextWidgetProps } from "../widgets/TextWidget";
import InputGroupWidget, {
InputGroupWidgetProps
} from "../widgets/InputGroupWidget"
import CalloutWidget, { CalloutWidgetProps } from "../widgets/CalloutWidget"
import IconWidget, { IconWidgetProps } from "../widgets/IconWidget"
import SpinnerWidget, { SpinnerWidgetProps } from "../widgets/SpinnerWidget"
InputGroupWidgetProps,
} from "../widgets/InputGroupWidget";
import CalloutWidget, { CalloutWidgetProps } from "../widgets/CalloutWidget";
import IconWidget, { IconWidgetProps } from "../widgets/IconWidget";
import SpinnerWidget, { SpinnerWidgetProps } from "../widgets/SpinnerWidget";
import BreadcrumbsWidget, {
BreadcrumbsWidgetProps
} from "../widgets/BreadcrumbsWidget"
import TagInputWidget, { TagInputWidgetProps } from "../widgets/TagInputWidget"
BreadcrumbsWidgetProps,
} from "../widgets/BreadcrumbsWidget";
import TagInputWidget, { TagInputWidgetProps } from "../widgets/TagInputWidget";
import NumericInputWidget, {
NumericInputWidgetProps
} from "../widgets/NumericInputWidget"
import CheckboxWidget, { CheckboxWidgetProps } from "../widgets/CheckboxWidget"
NumericInputWidgetProps,
} from "../widgets/NumericInputWidget";
import CheckboxWidget, { CheckboxWidgetProps } from "../widgets/CheckboxWidget";
import RadioGroupWidget, {
RadioGroupWidgetProps
} from "../widgets/RadioGroupWidget"
import WidgetFactory from "./WidgetFactory"
import React from "react"
import ButtonWidget, { ButtonWidgetProps } from "../widgets/ButtonWidget"
RadioGroupWidgetProps,
} from "../widgets/RadioGroupWidget";
import WidgetFactory from "./WidgetFactory";
import React from "react";
import ButtonWidget, { ButtonWidgetProps } from "../widgets/ButtonWidget";
class WidgetBuilderRegistry {
static registerWidgetBuilders() {
WidgetFactory.registerWidgetBuilder("CONTAINER_WIDGET", {
buildWidget(
widgetData: ContainerWidgetProps<IWidgetProps>
): JSX.Element {
return <ContainerWidget {...widgetData} />
}
})
buildWidget(widgetData: ContainerWidgetProps<WidgetProps>): JSX.Element {
return <ContainerWidget {...widgetData} />;
},
});
WidgetFactory.registerWidgetBuilder("TEXT_WIDGET", {
buildWidget(widgetData: TextWidgetProps): JSX.Element {
return <TextWidget {...widgetData} />
}
})
return <TextWidget {...widgetData} />;
},
});
WidgetFactory.registerWidgetBuilder("BUTTON_WIDGET", {
buildWidget(widgetData: ButtonWidgetProps): JSX.Element {
return <ButtonWidget {...widgetData} />
}
})
return <ButtonWidget {...widgetData} />;
},
});
WidgetFactory.registerWidgetBuilder("CALLOUT_WIDGET", {
buildWidget(widgetData: CalloutWidgetProps): JSX.Element {
return <CalloutWidget {...widgetData} />
}
})
return <CalloutWidget {...widgetData} />;
},
});
WidgetFactory.registerWidgetBuilder("ICON_WIDGET", {
buildWidget(widgetData: IconWidgetProps): JSX.Element {
return <IconWidget {...widgetData} />
}
})
return <IconWidget {...widgetData} />;
},
});
WidgetFactory.registerWidgetBuilder("SPINNER_WIDGET", {
buildWidget(widgetData: SpinnerWidgetProps): JSX.Element {
return <SpinnerWidget {...widgetData} />
}
})
return <SpinnerWidget {...widgetData} />;
},
});
WidgetFactory.registerWidgetBuilder("INPUT_GROUP_WIDGET", {
buildWidget(widgetData: InputGroupWidgetProps): JSX.Element {
return <InputGroupWidget {...widgetData} />
}
})
return <InputGroupWidget {...widgetData} />;
},
});
WidgetFactory.registerWidgetBuilder("BREADCRUMBS_WIDGET", {
buildWidget(widgetData: BreadcrumbsWidgetProps): JSX.Element {
return <BreadcrumbsWidget {...widgetData} />
}
})
return <BreadcrumbsWidget {...widgetData} />;
},
});
WidgetFactory.registerWidgetBuilder("TAG_INPUT_WIDGET", {
buildWidget(widgetData: TagInputWidgetProps): JSX.Element {
return <TagInputWidget {...widgetData} />
}
})
return <TagInputWidget {...widgetData} />;
},
});
WidgetFactory.registerWidgetBuilder("NUMERIC_INPUT_WIDGET", {
buildWidget(widgetData: NumericInputWidgetProps): JSX.Element {
return <NumericInputWidget {...widgetData} />
}
})
return <NumericInputWidget {...widgetData} />;
},
});
WidgetFactory.registerWidgetBuilder("CHECKBOX_WIDGET", {
buildWidget(widgetData: CheckboxWidgetProps): JSX.Element {
return <CheckboxWidget {...widgetData} />
}
})
return <CheckboxWidget {...widgetData} />;
},
});
WidgetFactory.registerWidgetBuilder("RADIO_GROUP_WIDGET", {
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 => {
return prefix + generate(ALPHABET, 10)
}
export const generateReactKey = ({
prefix = "",
}: { prefix?: string } = {}): string => {
return prefix + generate(ALPHABET, 10);
};
export default {
generateReactKey
}
generateReactKey,
};

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

@ -7,27 +7,27 @@ import {
WidgetType,
RenderMode,
RenderModes,
CSSUnits
} from "../constants/WidgetConstants"
import { Component } from "react"
import { BaseStyle } from "../editorComponents/BaseComponent"
import _ from "lodash"
import React from "react"
import DraggableComponent from "../editorComponents/DraggableComponent"
CSSUnits,
} from "../constants/WidgetConstants";
import { Component } from "react";
import { BaseStyle } from "../editorComponents/BaseComponent";
import _ from "lodash";
import React from "react";
import DraggableComponent from "../editorComponents/DraggableComponent";
abstract class BaseWidget<
T extends IWidgetProps,
K extends IWidgetState
T extends WidgetProps,
K extends WidgetState
> extends Component<T, K> {
constructor(props: T) {
super(props)
const initialState: IWidgetState = {
super(props);
const initialState: WidgetState = {
height: 0,
width: 0
}
initialState.height = 0
initialState.width = 0
this.state = initialState as K
width: 0,
};
initialState.height = 0;
initialState.width = 0;
this.state = initialState as K;
}
componentDidMount(): void {
@ -37,10 +37,10 @@ abstract class BaseWidget<
this.props.topRow,
this.props.bottomRow,
this.props.parentColumnSpace,
this.props.parentRowSpace
)
this.props.parentRowSpace,
);
}
//eslint-disable-next-line @typescript-eslint/no-unused-vars
componentDidUpdate(prevProps: T) {
this.calculateWidgetBounds(
this.props.rightColumn,
@ -48,8 +48,8 @@ abstract class BaseWidget<
this.props.topRow,
this.props.bottomRow,
this.props.parentColumnSpace,
this.props.parentRowSpace
)
this.props.parentRowSpace,
);
}
calculateWidgetBounds(
@ -58,42 +58,42 @@ abstract class BaseWidget<
topRow: number,
bottomRow: number,
parentColumnSpace: number,
parentRowSpace: number
parentRowSpace: number,
) {
const widgetState: IWidgetState = {
const widgetState: WidgetState = {
width: (rightColumn - leftColumn) * parentColumnSpace,
height: (bottomRow - topRow) * parentRowSpace
}
height: (bottomRow - topRow) * parentRowSpace,
};
if (
_.isNil(this.state) ||
widgetState.height !== this.state.height ||
widgetState.width !== this.state.width
) {
this.setState(widgetState)
this.setState(widgetState);
}
}
render() {
return this.getWidgetView()
return this.getWidgetView();
}
getWidgetView(): JSX.Element {
switch (this.props.renderMode) {
case RenderModes.CANVAS:
return this.getCanvasView()
return this.getCanvasView();
case RenderModes.COMPONENT_PANE:
return this.getComponentPaneView()
return this.getComponentPaneView();
case RenderModes.PAGE:
return this.getPageView()
return this.getPageView();
default:
return this.getPageView()
return this.getPageView();
}
}
abstract getPageView(): JSX.Element
abstract getPageView(): JSX.Element;
getCanvasView(): JSX.Element {
return this.getPageView()
return this.getPageView();
}
getComponentPaneView(): JSX.Element {
@ -101,16 +101,16 @@ abstract class BaseWidget<
<DraggableComponent
{...this.props}
style={{
...this.getPositionStyle()
...this.getPositionStyle(),
}}
orientation={"VERTICAL"}
>
{this.getPageView()}
</DraggableComponent>
)
);
}
abstract getWidgetType(): WidgetType
abstract getWidgetType(): WidgetType;
getPositionStyle(): BaseStyle {
return {
@ -123,34 +123,34 @@ abstract class BaseWidget<
yPosition: this.props.topRow * this.props.parentRowSpace,
xPosition: this.props.leftColumn * this.props.parentColumnSpace,
xPositionUnit: CSSUnits.PIXEL,
yPositionUnit: CSSUnits.PIXEL
}
yPositionUnit: CSSUnits.PIXEL,
};
}
static defaultProps: Partial<IWidgetProps> = {
static defaultProps: Partial<WidgetProps> = {
parentRowSpace: 64,
parentColumnSpace: 64,
topRow: 0,
leftColumn: 0
}
leftColumn: 0,
};
}
export interface IWidgetState {
export interface WidgetState {
height: number;
width: number;
}
export interface DraggableWidget {
type: string;
widget: IWidgetProps;
widget: WidgetProps;
key: string;
}
export interface IWidgetBuilder<T extends IWidgetProps> {
export interface WidgetBuilder<T extends WidgetProps> {
buildWidget(data: T): JSX.Element;
}
export interface IWidgetProps {
export interface WidgetProps {
widgetType: WidgetType;
key?: string;
widgetId: string;
@ -170,4 +170,4 @@ export interface WidgetCardProps {
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 BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"
import { WidgetType } from "../constants/WidgetConstants"
import { Boundary, IBreadcrumbProps } from "@blueprintjs/core"
import BreadcrumbsComponent from "../editorComponents/BreadcrumbsComponent"
import React from "react";
import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants";
import { Boundary, IBreadcrumbProps } from "@blueprintjs/core";
import BreadcrumbsComponent from "../editorComponents/BreadcrumbsComponent";
class BreadcrumbsWidget extends BaseWidget<
BreadcrumbsWidgetProps,
IWidgetState
WidgetState
> {
getPageView() {
return (
<BreadcrumbsComponent
@ -20,15 +19,15 @@ class BreadcrumbsWidget extends BaseWidget<
minVisibleItems={this.props.minVisibleItems}
className={this.props.className}
/>
)
);
}
getWidgetType(): WidgetType {
return "BREADCRUMBS_WIDGET"
return "BREADCRUMBS_WIDGET";
}
}
export interface BreadcrumbsWidgetProps extends IWidgetProps {
export interface BreadcrumbsWidgetProps extends WidgetProps {
width?: number;
collapseFrom?: Boundary;
className?: string;
@ -36,4 +35,4 @@ export interface BreadcrumbsWidgetProps extends IWidgetProps {
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 BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"
import { WidgetType } from "../constants/WidgetConstants"
import ButtonComponent from "../editorComponents/ButtonComponent"
class ButtonWidget extends BaseWidget<ButtonWidgetProps, IWidgetState> {
import * as React from "react";
import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants";
import ButtonComponent from "../editorComponents/ButtonComponent";
class ButtonWidget extends BaseWidget<ButtonWidgetProps, WidgetState> {
getPageView() {
return (
<ButtonComponent
@ -13,17 +12,17 @@ class ButtonWidget extends BaseWidget<ButtonWidgetProps, IWidgetState> {
key={this.props.widgetId}
text={this.props.text || "Button"}
/>
)
);
}
getWidgetType(): WidgetType {
return "BUTTON_WIDGET"
return "BUTTON_WIDGET";
}
}
export interface ButtonWidgetProps extends IWidgetProps {
export interface ButtonWidgetProps extends WidgetProps {
text?: string;
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 BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget";
import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { Intent } from "@blueprintjs/core";
import { WidgetType } from "../constants/WidgetConstants";
import CalloutComponent from "../editorComponents/CalloutComponent";
class CalloutWidget extends BaseWidget<CalloutWidgetProps, IWidgetState> {
class CalloutWidget extends BaseWidget<CalloutWidgetProps, WidgetState> {
getPageView() {
return (
<CalloutComponent
@ -24,7 +24,7 @@ class CalloutWidget extends BaseWidget<CalloutWidgetProps, IWidgetState> {
}
}
export interface CalloutWidgetProps extends IWidgetProps {
export interface CalloutWidgetProps extends WidgetProps {
id?: string;
title?: string;
description?: string;

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

@ -1,9 +1,9 @@
import React from "react"
import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"
import { WidgetType } from "../constants/WidgetConstants"
import CheckboxComponent from "../editorComponents/CheckboxComponent"
import React from "react";
import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants";
import CheckboxComponent from "../editorComponents/CheckboxComponent";
class CheckboxWidget extends BaseWidget<CheckboxWidgetProps, IWidgetState> {
class CheckboxWidget extends BaseWidget<CheckboxWidgetProps, WidgetState> {
getPageView() {
return (
<CheckboxComponent
@ -12,20 +12,21 @@ class CheckboxWidget extends BaseWidget<CheckboxWidgetProps, IWidgetState> {
key={this.props.widgetId}
items={this.props.items}
/>
)
);
}
getWidgetType(): WidgetType {
return "ICON_WIDGET"
return "ICON_WIDGET";
}
}
export interface CheckboxWidgetProps extends IWidgetProps {
export interface CheckboxWidgetProps extends WidgetProps {
items: Array<{
label: string;
key: string;
defaultIndeterminate: boolean;
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 BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"
import ContainerComponent from "../editorComponents/ContainerComponent"
import {
ContainerOrientation,
WidgetType,
} from "../constants/WidgetConstants"
import WidgetFactory from "../utils/WidgetFactory"
import _ from "lodash"
import { Color } from "../constants/DefaultTheme"
import DroppableComponent from "../editorComponents/DroppableComponent"
import React from "react";
import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import ContainerComponent from "../editorComponents/ContainerComponent";
import { ContainerOrientation, WidgetType } from "../constants/WidgetConstants";
import WidgetFactory from "../utils/WidgetFactory";
import _ from "lodash";
import { Color } from "../constants/DefaultTheme";
import DroppableComponent from "../editorComponents/DroppableComponent";
const DEFAULT_NUM_COLS = 16
const DEFAULT_NUM_ROWS = 16
const DEFAULT_NUM_COLS = 16;
const DEFAULT_NUM_ROWS = 16;
class ContainerWidget extends BaseWidget<
ContainerWidgetProps<IWidgetProps>,
ContainerWidgetProps<WidgetProps>,
ContainerWidgetState
> {
constructor(props: ContainerWidgetProps<IWidgetProps>) {
super(props)
this.renderChildWidget = this.renderChildWidget.bind(this)
constructor(props: ContainerWidgetProps<WidgetProps>) {
super(props);
this.renderChildWidget = this.renderChildWidget.bind(this);
this.state = {
width: 0,
height: 0,
snapColumnSpace: DEFAULT_NUM_COLS,
snapRowSpace: DEFAULT_NUM_ROWS
}
snapRowSpace: DEFAULT_NUM_ROWS,
};
}
componentDidUpdate(previousProps: ContainerWidgetProps<IWidgetProps>) {
super.componentDidUpdate(previousProps)
let snapColumnSpace = this.state.snapColumnSpace
let snapRowSpace = this.state.snapRowSpace
componentDidUpdate(previousProps: ContainerWidgetProps<WidgetProps>) {
super.componentDidUpdate(previousProps);
let snapColumnSpace = this.state.snapColumnSpace;
let snapRowSpace = this.state.snapRowSpace;
if (this.state.width)
snapColumnSpace =
this.state.width / (this.props.snapColumns || DEFAULT_NUM_COLS)
this.state.width / (this.props.snapColumns || DEFAULT_NUM_COLS);
if (this.state.height)
snapRowSpace =
this.state.height / (this.props.snapRows || DEFAULT_NUM_ROWS)
this.state.height / (this.props.snapRows || DEFAULT_NUM_ROWS);
if (
this.state.snapColumnSpace !== snapColumnSpace ||
this.state.snapRowSpace !== snapRowSpace
) {
this.setState({
snapColumnSpace: snapColumnSpace,
snapRowSpace: snapRowSpace
})
snapRowSpace: snapRowSpace,
});
}
}
renderChildWidget(childWidgetData: IWidgetProps) {
childWidgetData.parentColumnSpace = this.state.snapColumnSpace
childWidgetData.parentRowSpace = this.state.snapRowSpace
return WidgetFactory.createWidget(childWidgetData)
renderChildWidget(childWidgetData: WidgetProps) {
childWidgetData.parentColumnSpace = this.state.snapColumnSpace;
childWidgetData.parentRowSpace = this.state.snapRowSpace;
return WidgetFactory.createWidget(childWidgetData);
}
getPageView() {
@ -60,13 +57,13 @@ class ContainerWidget extends BaseWidget<
<ContainerComponent
widgetId={this.props.widgetId}
style={{
...this.getPositionStyle()
...this.getPositionStyle(),
}}
orientation={this.props.orientation || "VERTICAL"}
>
{_.map(this.props.children, this.renderChildWidget)}
</ContainerComponent>
)
);
}
getCanvasView() {
@ -74,26 +71,26 @@ class ContainerWidget extends BaseWidget<
<DroppableComponent
{...this.props}
style={{
...this.getPositionStyle()
...this.getPositionStyle(),
}}
>
{super.getCanvasView()}
</DroppableComponent>
)
);
}
getWidgetType(): WidgetType {
return "CONTAINER_WIDGET"
return "CONTAINER_WIDGET";
}
}
export interface ContainerWidgetState extends IWidgetState {
export interface ContainerWidgetState extends WidgetState {
snapColumnSpace: number;
snapRowSpace: number;
}
export interface ContainerWidgetProps<T extends IWidgetProps>
extends IWidgetProps {
export interface ContainerWidgetProps<T extends WidgetProps>
extends WidgetProps {
children?: T[];
snapColumns?: number;
snapRows?: number;
@ -101,4 +98,4 @@ export interface ContainerWidgetProps<T extends IWidgetProps>
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 BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget";
import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants";
import { Intent } from "@blueprintjs/core";
import { IconName } from "@blueprintjs/icons";
import IconComponent from "../editorComponents/IconComponent";
class IconWidget extends BaseWidget<IconWidgetProps, IWidgetState> {
class IconWidget extends BaseWidget<IconWidgetProps, WidgetState> {
getPageView() {
return (
<IconComponent
@ -24,7 +24,7 @@ class IconWidget extends BaseWidget<IconWidgetProps, IWidgetState> {
}
}
export interface IconWidgetProps extends IWidgetProps {
export interface IconWidgetProps extends WidgetProps {
icon?: IconName;
iconSize?: number;
ellipsize?: boolean;

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

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

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

@ -1,14 +1,13 @@
import * as React from "react"
import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"
import { WidgetType } from "../constants/WidgetConstants"
import NumericInputComponent from "../editorComponents/NumericInputComponent"
import { Intent, IconName } from "@blueprintjs/core"
import * as React from "react";
import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants";
import NumericInputComponent from "../editorComponents/NumericInputComponent";
import { Intent, IconName } from "@blueprintjs/core";
class NumericInputWidget extends BaseWidget<
NumericInputWidgetProps,
IWidgetState
WidgetState
> {
getPageView() {
return (
<NumericInputComponent
@ -35,15 +34,15 @@ class NumericInputWidget extends BaseWidget<
selectAllOnIncrement={this.props.selectAllOnIncrement}
stepSize={this.props.stepSize}
/>
)
);
}
getWidgetType(): WidgetType {
return "NUMERIC_INPUT_WIDGET"
return "NUMERIC_INPUT_WIDGET";
}
}
export interface NumericInputWidgetProps extends IWidgetProps {
export interface NumericInputWidgetProps extends WidgetProps {
className?: string;
disabled?: boolean;
large?: boolean;
@ -66,4 +65,4 @@ export interface NumericInputWidgetProps extends IWidgetProps {
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 BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"
import { WidgetType } from "../constants/WidgetConstants"
import RadioGroupComponent from "../editorComponents/RadioGroupComponent"
import { IOptionProps } from "@blueprintjs/core"
class RadioButtonWidget extends BaseWidget<
RadioGroupWidgetProps,
IWidgetState
> {
import * as React from "react";
import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants";
import RadioGroupComponent from "../editorComponents/RadioGroupComponent";
import { IOptionProps } from "@blueprintjs/core";
class RadioButtonWidget extends BaseWidget<RadioGroupWidgetProps, WidgetState> {
getPageView() {
return (
<RadioGroupComponent
@ -25,15 +21,15 @@ class RadioButtonWidget extends BaseWidget<
className={this.props.className}
options={this.props.options}
/>
)
);
}
getWidgetType(): WidgetType {
return "RADIO_GROUP_WIDGET"
return "RADIO_GROUP_WIDGET";
}
}
export interface RadioGroupWidgetProps extends IWidgetProps {
export interface RadioGroupWidgetProps extends WidgetProps {
label: string;
inline: boolean;
selectedValue: string | number;
@ -45,7 +41,8 @@ export interface RadioGroupWidgetProps extends IWidgetProps {
items: Array<{
label: 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 BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget";
import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
import { WidgetType } from "../constants/WidgetConstants";
import { Intent } from "@blueprintjs/core";
import SpinnerComponent from "../editorComponents/SpinnerComponent";
class SpinnerWidget extends BaseWidget<SpinnerWidgetProps, IWidgetState> {
class SpinnerWidget extends BaseWidget<SpinnerWidgetProps, WidgetState> {
getPageView() {
return (
<SpinnerComponent
@ -24,7 +23,7 @@ class SpinnerWidget extends BaseWidget<SpinnerWidgetProps, IWidgetState> {
}
}
export interface SpinnerWidgetProps extends IWidgetProps {
export interface SpinnerWidgetProps extends WidgetProps {
size?: number;
value?: number;
ellipsize?: boolean;

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

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

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

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