diff --git a/app/client/.eslintrc.js b/app/client/.eslintrc.js index ce1a6a076d..e1d3677973 100644 --- a/app/client/.eslintrc.js +++ b/app/client/.eslintrc.js @@ -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 } } -}; \ No newline at end of file +}; diff --git a/app/client/package.json b/app/client/package.json index c0af0cdc57..45018d3936 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -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": { diff --git a/app/client/src/actions/pageActions.tsx b/app/client/src/actions/pageActions.tsx index f54af9f794..5d957d0e0a 100644 --- a/app/client/src/actions/pageActions.tsx +++ b/app/client/src/actions/pageActions.tsx @@ -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 => { +export const fetchPage = ( + pageId: string, + renderMode: RenderMode, +): ReduxAction => { 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, - } - } -} \ No newline at end of file + }, + }; +}; diff --git a/app/client/src/actions/widgetCardsPaneActions.tsx b/app/client/src/actions/widgetCardsPaneActions.tsx index 0a5c4ce25e..7272a35334 100644 --- a/app/client/src/actions/widgetCardsPaneActions.tsx +++ b/app/client/src/actions/widgetCardsPaneActions.tsx @@ -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 -} \ No newline at end of file + successFetchingWidgetCards, +}; diff --git a/app/client/src/api/Api.tsx b/app/client/src/api/Api.tsx index c685a29589..4e14d06e00 100644 --- a/app/client/src/api/Api.tsx +++ b/app/client/src/api/Api.tsx @@ -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; diff --git a/app/client/src/api/ApiRequests.tsx b/app/client/src/api/ApiRequests.tsx index 0e890a592f..5326eb27c7 100644 --- a/app/client/src/api/ApiRequests.tsx +++ b/app/client/src/api/ApiRequests.tsx @@ -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 {}; diff --git a/app/client/src/api/ApiResponses.tsx b/app/client/src/api/ApiResponses.tsx index f469a637f6..f9efef1dac 100644 --- a/app/client/src/api/ApiResponses.tsx +++ b/app/client/src/api/ApiResponses.tsx @@ -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; } diff --git a/app/client/src/api/PageApi.tsx b/app/client/src/api/PageApi.tsx index 4aebdfd5ea..4d965156a6 100644 --- a/app/client/src/api/PageApi.tsx +++ b/app/client/src/api/PageApi.tsx @@ -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 { - return Api.get(PageApi.url + "/" + pageRequest.pageId, pageRequest) + return Api.get(PageApi.url + "/" + pageRequest.pageId, pageRequest); } static savePage(savePageRequest: SavePageRequest): Promise { - return Api.post(PageApi.url, undefined, savePageRequest) + return Api.post(PageApi.url, undefined, savePageRequest); } } - - -export default PageApi +export default PageApi; diff --git a/app/client/src/api/WidgetCardsPaneApi.tsx b/app/client/src/api/WidgetCardsPaneApi.tsx index 75a1c17b7b..d9399b7d02 100644 --- a/app/client/src/api/WidgetCardsPaneApi.tsx +++ b/app/client/src/api/WidgetCardsPaneApi.tsx @@ -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 { - return Api.get(WidgetCardsPaneApi.url, {}) + return Api.get(WidgetCardsPaneApi.url, {}); } } - -export default WidgetCardsPaneApi +export default WidgetCardsPaneApi; diff --git a/app/client/src/constants/ActionConstants.tsx b/app/client/src/constants/ActionConstants.tsx index b2ed304c9c..eef80db535 100644 --- a/app/client/src/constants/ActionConstants.tsx +++ b/app/client/src/constants/ActionConstants.tsx @@ -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 { type: ActionType; @@ -47,13 +47,13 @@ export interface ReduxAction { 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[] }; } diff --git a/app/client/src/constants/ApiConstants.tsx b/app/client/src/constants/ApiConstants.tsx index ebac51b8b3..334419115f 100644 --- a/app/client/src/constants/ApiConstants.tsx +++ b/app/client/src/constants/ApiConstants.tsx @@ -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; diff --git a/app/client/src/constants/StyleConstants.tsx b/app/client/src/constants/StyleConstants.tsx index 56004c9f9e..ff8b4c5632 100644 --- a/app/client/src/constants/StyleConstants.tsx +++ b/app/client/src/constants/StyleConstants.tsx @@ -1 +1 @@ -export default {} \ No newline at end of file +export default {}; diff --git a/app/client/src/constants/ThirdPartyConstants.tsx b/app/client/src/constants/ThirdPartyConstants.tsx index 3569fde34d..ccfe89e3f6 100644 --- a/app/client/src/constants/ThirdPartyConstants.tsx +++ b/app/client/src/constants/ThirdPartyConstants.tsx @@ -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"; diff --git a/app/client/src/constants/WidgetConstants.tsx b/app/client/src/constants/WidgetConstants.tsx index e362d67dd6..fd39fdd106 100644 --- a/app/client/src/constants/WidgetConstants.tsx +++ b/app/client/src/constants/WidgetConstants.tsx @@ -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: "%", +}; diff --git a/app/client/src/editorComponents/BaseComponent.tsx b/app/client/src/editorComponents/BaseComponent.tsx index 28b65c6b6d..5cb1c78571 100644 --- a/app/client/src/editorComponents/BaseComponent.tsx +++ b/app/client/src/editorComponents/BaseComponent.tsx @@ -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 extends Component {} 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 \ No newline at end of file +export default BaseComponent; diff --git a/app/client/src/editorComponents/BreadcrumbsComponent.tsx b/app/client/src/editorComponents/BreadcrumbsComponent.tsx index 57e50a0dd0..370f1b23a1 100644 --- a/app/client/src/editorComponents/BreadcrumbsComponent.tsx +++ b/app/client/src/editorComponents/BreadcrumbsComponent.tsx @@ -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 { render() { @@ -18,7 +14,7 @@ class BreadcrumbsComponent extends React.Component { className={this.props.className} /> - ) + ); } } @@ -30,4 +26,4 @@ export interface BreadcrumbsComponentProps extends ComponentProps { items?: IBreadcrumbProps[]; } -export default BreadcrumbsComponent +export default BreadcrumbsComponent; diff --git a/app/client/src/editorComponents/ButtonComponent.tsx b/app/client/src/editorComponents/ButtonComponent.tsx index b39cd0d34a..8e0d0eeefd 100644 --- a/app/client/src/editorComponents/ButtonComponent.tsx +++ b/app/client/src/editorComponents/ButtonComponent.tsx @@ -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 { +class ButtonComponent extends React.Component { render() { return ( - + - ) + ); } } -interface IButtonComponentProps extends ITextComponentProps { - icon?: MaybeElement +interface ButtonComponentProps extends TextComponentProps { + icon?: MaybeElement; } -export default ButtonComponent +export default ButtonComponent; diff --git a/app/client/src/editorComponents/CalloutComponent.tsx b/app/client/src/editorComponents/CalloutComponent.tsx index fcfb30504f..4b3cdbec81 100644 --- a/app/client/src/editorComponents/CalloutComponent.tsx +++ b/app/client/src/editorComponents/CalloutComponent.tsx @@ -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 { +import * as React from "react"; +import { ComponentProps } from "./BaseComponent"; +import { Callout, Intent } from "@blueprintjs/core"; +import { Container } from "./ContainerComponent"; +class CalloutComponent extends React.Component { render() { return ( @@ -13,16 +13,16 @@ class CalloutComponent extends React.Component { {this.props.description} - ) + ); } } -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; diff --git a/app/client/src/editorComponents/CheckboxComponent.tsx b/app/client/src/editorComponents/CheckboxComponent.tsx index c2d1bace36..b9298b2988 100644 --- a/app/client/src/editorComponents/CheckboxComponent.tsx +++ b/app/client/src/editorComponents/CheckboxComponent.tsx @@ -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 { +class CheckboxComponent extends React.Component { render() { return ( {this.props.items.map(item => ( { } } -export interface ICheckboxComponentProps extends ComponentProps { +export interface CheckboxComponentProps extends ComponentProps { items: Array<{ + key: string; label: string; defaultIndeterminate: boolean; value: number | string; diff --git a/app/client/src/editorComponents/ContainerComponent.tsx b/app/client/src/editorComponents/ContainerComponent.tsx index 80eae7aab4..e07fe36629 100644 --- a/app/client/src/editorComponents/ContainerComponent.tsx +++ b/app/client/src/editorComponents/ContainerComponent.tsx @@ -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")` 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 {props.children} -} + }); + return ( + + {props.children} + + ); +}; 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; diff --git a/app/client/src/editorComponents/DraggableComponent.tsx b/app/client/src/editorComponents/DraggableComponent.tsx index f5651292ce..7205983001 100644 --- a/app/client/src/editorComponents/DraggableComponent.tsx +++ b/app/client/src/editorComponents/DraggableComponent.tsx @@ -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 { +class DraggableComponent extends React.Component { render() { return this.props.connectDragSource(
{ : 0, top: this.props.style ? this.props.style.yPosition + this.props.style.yPositionUnit - : 0 + : 0, }} > {this.props.children} -
- ) + , + ); } } 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, +); diff --git a/app/client/src/editorComponents/DroppableComponent.tsx b/app/client/src/editorComponents/DroppableComponent.tsx index faeff03221..bfff53e138 100644 --- a/app/client/src/editorComponents/DroppableComponent.tsx +++ b/app/client/src/editorComponents/DroppableComponent.tsx @@ -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 { render() { return this.props.connectDropTarget(
- { this.props.isOver ? undefined : this.props.children} -
- ) + {this.props.isOver ? undefined : this.props.children} + , + ); } } 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, +); diff --git a/app/client/src/editorComponents/IconComponent.tsx b/app/client/src/editorComponents/IconComponent.tsx index fe5163d538..92c776f349 100644 --- a/app/client/src/editorComponents/IconComponent.tsx +++ b/app/client/src/editorComponents/IconComponent.tsx @@ -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 { render() { return ( @@ -13,7 +13,7 @@ class IconComponent extends React.Component { intent={this.props.intent} /> - ) + ); } } @@ -24,4 +24,4 @@ export interface IconComponentProps extends ComponentProps { ellipsize?: boolean; } -export default IconComponent +export default IconComponent; diff --git a/app/client/src/editorComponents/InputGroupComponent.tsx b/app/client/src/editorComponents/InputGroupComponent.tsx index 8427c83434..3e366ff7c8 100644 --- a/app/client/src/editorComponents/InputGroupComponent.tsx +++ b/app/client/src/editorComponents/InputGroupComponent.tsx @@ -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 { +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 { render() { return ( @@ -21,11 +21,11 @@ class InputGroupComponent extends React.Component { type={this.props.type} /> - ) + ); } } -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; diff --git a/app/client/src/editorComponents/NumericInputComponent.tsx b/app/client/src/editorComponents/NumericInputComponent.tsx index f1d476b4da..f7386a2d31 100644 --- a/app/client/src/editorComponents/NumericInputComponent.tsx +++ b/app/client/src/editorComponents/NumericInputComponent.tsx @@ -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} /> - ) + ); } } -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; diff --git a/app/client/src/editorComponents/RadioGroupComponent.tsx b/app/client/src/editorComponents/RadioGroupComponent.tsx index 61c7eae7cb..e341d5304f 100644 --- a/app/client/src/editorComponents/RadioGroupComponent.tsx +++ b/app/client/src/editorComponents/RadioGroupComponent.tsx @@ -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 { render() { return ( @@ -17,11 +17,11 @@ class RadioGroupComponent extends React.Component { options={this.props.options} > {this.props.items.map(item => ( - + ))} - ) + ); } } @@ -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; diff --git a/app/client/src/editorComponents/SpinnerComponent.tsx b/app/client/src/editorComponents/SpinnerComponent.tsx index d6d1c41ec6..b6cbce66c0 100644 --- a/app/client/src/editorComponents/SpinnerComponent.tsx +++ b/app/client/src/editorComponents/SpinnerComponent.tsx @@ -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 { render() { @@ -13,7 +13,7 @@ class SpinnerComponent extends React.Component { intent={this.props.intent} /> - ) + ); } } @@ -23,4 +23,4 @@ export interface SpinnerComponentProps extends ComponentProps { intent?: Intent; } -export default SpinnerComponent +export default SpinnerComponent; diff --git a/app/client/src/editorComponents/TagInputComponent.tsx b/app/client/src/editorComponents/TagInputComponent.tsx index d55bc50314..485b48f9de 100644 --- a/app/client/src/editorComponents/TagInputComponent.tsx +++ b/app/client/src/editorComponents/TagInputComponent.tsx @@ -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 { render() { return ( @@ -11,7 +11,7 @@ class TagInputComponent extends React.Component { values={this.props.values} /> - ) + ); } } @@ -32,4 +32,4 @@ export interface TagInputComponentProps extends ComponentProps { values?: string[]; //Required field } -export default TagInputComponent +export default TagInputComponent; diff --git a/app/client/src/editorComponents/TextComponent.tsx b/app/client/src/editorComponents/TextComponent.tsx index a93e84b1da..4012da823e 100644 --- a/app/client/src/editorComponents/TextComponent.tsx +++ b/app/client/src/editorComponents/TextComponent.tsx @@ -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 { +import * as React from "react"; +import { ComponentProps } from "./BaseComponent"; +import { Text } from "@blueprintjs/core"; +import { Container } from "./ContainerComponent"; +class TextComponent extends React.Component { render() { return ( @@ -10,14 +10,14 @@ class TextComponent extends React.Component { {this.props.text} - ) + ); } } -export interface ITextComponentProps extends ComponentProps { +export interface TextComponentProps extends ComponentProps { text?: string; ellipsize?: boolean; tagName?: keyof JSX.IntrinsicElements; } -export default TextComponent +export default TextComponent; diff --git a/app/client/src/mockResponses/WidgetCardsPaneResponse.tsx b/app/client/src/mockResponses/WidgetCardsPaneResponse.tsx index 78d7e0728b..d6d6116d6f 100644 --- a/app/client/src/mockResponses/WidgetCardsPaneResponse.tsx +++ b/app/client/src/mockResponses/WidgetCardsPaneResponse.tsx @@ -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; diff --git a/app/client/src/normalizers/CanvasWidgetsNormalizer.tsx b/app/client/src/normalizers/CanvasWidgetsNormalizer.tsx index 50c694f71d..01046654cc 100644 --- a/app/client/src/normalizers/CanvasWidgetsNormalizer.tsx +++ b/app/client/src/normalizers/CanvasWidgetsNormalizer.tsx @@ -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 { - return denormalize(pageWidgetId, widgetSchema, entities) - } - + static denormalize( + pageWidgetId: string, + entities: any, + ): ContainerWidgetProps { + return denormalize(pageWidgetId, widgetSchema, entities); + } } -export default CanvasWidgetsNormalizer \ No newline at end of file +export default CanvasWidgetsNormalizer; diff --git a/app/client/src/pages/Editor/index.tsx b/app/client/src/pages/Editor/index.tsx index 8a44f88789..029e5423f6 100644 --- a/app/client/src/pages/Editor/index.tsx +++ b/app/client/src/pages/Editor/index.tsx @@ -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)) } } diff --git a/app/client/src/reducers/entityReducers/canvasWidgetsReducers.tsx b/app/client/src/reducers/entityReducers/canvasWidgetsReducers.tsx index b8cc800362..f140dc89b5 100644 --- a/app/client/src/reducers/entityReducers/canvasWidgetsReducers.tsx +++ b/app/client/src/reducers/entityReducers/canvasWidgetsReducers.tsx @@ -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 }) diff --git a/app/client/src/reducers/index.tsx b/app/client/src/reducers/index.tsx index 5b42b897f5..f11e6f93d9 100644 --- a/app/client/src/reducers/index.tsx +++ b/app/client/src/reducers/index.tsx @@ -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; + }; } diff --git a/app/client/src/reducers/uiReducers/editorReducer.tsx b/app/client/src/reducers/uiReducers/editorReducer.tsx index 7ab9805a6c..1096f9e857 100644 --- a/app/client/src/reducers/uiReducers/editorReducer.tsx +++ b/app/client/src/reducers/uiReducers/editorReducer.tsx @@ -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 }, diff --git a/app/client/src/sagas/PageSagas.tsx b/app/client/src/sagas/PageSagas.tsx index 1f9fbbf612..5f9fe41f0b 100644 --- a/app/client/src/sagas/PageSagas.tsx +++ b/app/client/src/sagas/PageSagas.tsx @@ -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) { - 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); } diff --git a/app/client/src/sagas/WidgetCardsPaneSagas.tsx b/app/client/src/sagas/WidgetCardsPaneSagas.tsx index 54c64940f7..f7089c7cc3 100644 --- a/app/client/src/sagas/WidgetCardsPaneSagas.tsx +++ b/app/client/src/sagas/WidgetCardsPaneSagas.tsx @@ -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) { +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) -} \ No newline at end of file + yield takeLatest(ActionTypes.FETCH_WIDGET_CARDS, fetchWidgetCards); +} diff --git a/app/client/src/sagas/index.tsx b/app/client/src/sagas/index.tsx index c86314dc04..39cdbbbcd6 100644 --- a/app/client/src/sagas/index.tsx +++ b/app/client/src/sagas/index.tsx @@ -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()]); } diff --git a/app/client/src/utils/AnalyticsUtil.tsx b/app/client/src/utils/AnalyticsUtil.tsx index de4d0847ba..cd0fe8c45a 100644 --- a/app/client/src/utils/AnalyticsUtil.tsx +++ b/app/client/src/utils/AnalyticsUtil.tsx @@ -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 { return function reducer(state = initialState, action: ReduxAction) { 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); + }); +}; diff --git a/app/client/src/utils/WidgetFactory.tsx b/app/client/src/utils/WidgetFactory.tsx index 2412741a0d..42f3f48454 100644 --- a/app/client/src/utils/WidgetFactory.tsx +++ b/app/client/src/utils/WidgetFactory.tsx @@ -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> = new Map(); - static widgetMap: Map> = new Map() + static registerWidgetBuilder( + widgetType: WidgetType, + widgetBuilder: WidgetBuilder, + ) { + this.widgetMap.set(widgetType, widgetBuilder); + } - static registerWidgetBuilder(widgetType: WidgetType, widgetBuilder: IWidgetBuilder) { - 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 \ No newline at end of file +export default WidgetFactory; diff --git a/app/client/src/utils/WidgetRegistry.tsx b/app/client/src/utils/WidgetRegistry.tsx index 1971eec473..b75d1a15d7 100644 --- a/app/client/src/utils/WidgetRegistry.tsx +++ b/app/client/src/utils/WidgetRegistry.tsx @@ -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 - ): JSX.Element { - return - } - }) + buildWidget(widgetData: ContainerWidgetProps): JSX.Element { + return ; + }, + }); WidgetFactory.registerWidgetBuilder("TEXT_WIDGET", { buildWidget(widgetData: TextWidgetProps): JSX.Element { - return - } - }) + return ; + }, + }); WidgetFactory.registerWidgetBuilder("BUTTON_WIDGET", { buildWidget(widgetData: ButtonWidgetProps): JSX.Element { - return - } - }) + return ; + }, + }); WidgetFactory.registerWidgetBuilder("CALLOUT_WIDGET", { buildWidget(widgetData: CalloutWidgetProps): JSX.Element { - return - } - }) + return ; + }, + }); WidgetFactory.registerWidgetBuilder("ICON_WIDGET", { buildWidget(widgetData: IconWidgetProps): JSX.Element { - return - } - }) + return ; + }, + }); WidgetFactory.registerWidgetBuilder("SPINNER_WIDGET", { buildWidget(widgetData: SpinnerWidgetProps): JSX.Element { - return - } - }) + return ; + }, + }); WidgetFactory.registerWidgetBuilder("INPUT_GROUP_WIDGET", { buildWidget(widgetData: InputGroupWidgetProps): JSX.Element { - return - } - }) + return ; + }, + }); WidgetFactory.registerWidgetBuilder("BREADCRUMBS_WIDGET", { buildWidget(widgetData: BreadcrumbsWidgetProps): JSX.Element { - return - } - }) + return ; + }, + }); WidgetFactory.registerWidgetBuilder("TAG_INPUT_WIDGET", { buildWidget(widgetData: TagInputWidgetProps): JSX.Element { - return - } - }) + return ; + }, + }); WidgetFactory.registerWidgetBuilder("NUMERIC_INPUT_WIDGET", { buildWidget(widgetData: NumericInputWidgetProps): JSX.Element { - return - } - }) + return ; + }, + }); WidgetFactory.registerWidgetBuilder("CHECKBOX_WIDGET", { buildWidget(widgetData: CheckboxWidgetProps): JSX.Element { - return - } - }) + return ; + }, + }); WidgetFactory.registerWidgetBuilder("RADIO_GROUP_WIDGET", { buildWidget(widgetData: RadioGroupWidgetProps): JSX.Element { - return - } - }) - + return ; + }, + }); } } -export default WidgetBuilderRegistry +export default WidgetBuilderRegistry; diff --git a/app/client/src/utils/generators.tsx b/app/client/src/utils/generators.tsx index 78fb663915..0642287f60 100644 --- a/app/client/src/utils/generators.tsx +++ b/app/client/src/utils/generators.tsx @@ -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 -} \ No newline at end of file + generateReactKey, +}; diff --git a/app/client/src/widgets/BaseWidget.tsx b/app/client/src/widgets/BaseWidget.tsx index 4ad822b9c8..e79a7ef609 100644 --- a/app/client/src/widgets/BaseWidget.tsx +++ b/app/client/src/widgets/BaseWidget.tsx @@ -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 { 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< {this.getPageView()} - ) + ); } - 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 = { + static defaultProps: Partial = { 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 { +export interface WidgetBuilder { 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; diff --git a/app/client/src/widgets/BreadcrumbsWidget.tsx b/app/client/src/widgets/BreadcrumbsWidget.tsx index 0ba2802903..f5beda1139 100644 --- a/app/client/src/widgets/BreadcrumbsWidget.tsx +++ b/app/client/src/widgets/BreadcrumbsWidget.tsx @@ -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 ( - ) + ); } 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; diff --git a/app/client/src/widgets/ButtonWidget.tsx b/app/client/src/widgets/ButtonWidget.tsx index 78b90ac75d..453fd5e0c4 100644 --- a/app/client/src/widgets/ButtonWidget.tsx +++ b/app/client/src/widgets/ButtonWidget.tsx @@ -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 { +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 { getPageView() { return ( { 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; diff --git a/app/client/src/widgets/CalloutWidget.tsx b/app/client/src/widgets/CalloutWidget.tsx index aba29e6743..a3a5d46a85 100644 --- a/app/client/src/widgets/CalloutWidget.tsx +++ b/app/client/src/widgets/CalloutWidget.tsx @@ -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 { +class CalloutWidget extends BaseWidget { getPageView() { return ( { } } -export interface CalloutWidgetProps extends IWidgetProps { +export interface CalloutWidgetProps extends WidgetProps { id?: string; title?: string; description?: string; diff --git a/app/client/src/widgets/CheckboxWidget.tsx b/app/client/src/widgets/CheckboxWidget.tsx index 46a1954ed4..4d6d7ad378 100644 --- a/app/client/src/widgets/CheckboxWidget.tsx +++ b/app/client/src/widgets/CheckboxWidget.tsx @@ -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 { +class CheckboxWidget extends BaseWidget { getPageView() { return ( { 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; diff --git a/app/client/src/widgets/ContainerWidget.tsx b/app/client/src/widgets/ContainerWidget.tsx index 1707ad2612..d08e54fd7c 100644 --- a/app/client/src/widgets/ContainerWidget.tsx +++ b/app/client/src/widgets/ContainerWidget.tsx @@ -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, + ContainerWidgetProps, ContainerWidgetState > { - constructor(props: ContainerWidgetProps) { - super(props) - this.renderChildWidget = this.renderChildWidget.bind(this) + constructor(props: ContainerWidgetProps) { + 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) { - super.componentDidUpdate(previousProps) - let snapColumnSpace = this.state.snapColumnSpace - let snapRowSpace = this.state.snapRowSpace + componentDidUpdate(previousProps: ContainerWidgetProps) { + 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< {_.map(this.props.children, this.renderChildWidget)} - ) + ); } getCanvasView() { @@ -74,26 +71,26 @@ class ContainerWidget extends BaseWidget< {super.getCanvasView()} - ) + ); } 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 - extends IWidgetProps { +export interface ContainerWidgetProps + extends WidgetProps { children?: T[]; snapColumns?: number; snapRows?: number; @@ -101,4 +98,4 @@ export interface ContainerWidgetProps backgroundColor?: Color; } -export default ContainerWidget +export default ContainerWidget; diff --git a/app/client/src/widgets/IconWidget.tsx b/app/client/src/widgets/IconWidget.tsx index 24399c560b..ab7dbab4bc 100644 --- a/app/client/src/widgets/IconWidget.tsx +++ b/app/client/src/widgets/IconWidget.tsx @@ -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 { +class IconWidget extends BaseWidget { getPageView() { return ( { } } -export interface IconWidgetProps extends IWidgetProps { +export interface IconWidgetProps extends WidgetProps { icon?: IconName; iconSize?: number; ellipsize?: boolean; diff --git a/app/client/src/widgets/InputGroupWidget.tsx b/app/client/src/widgets/InputGroupWidget.tsx index fda9f9cf14..3d3f82801d 100644 --- a/app/client/src/widgets/InputGroupWidget.tsx +++ b/app/client/src/widgets/InputGroupWidget.tsx @@ -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 { getPageView() { return ( { - getPageView() { return ( - ) + ); } 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; diff --git a/app/client/src/widgets/RadioGroupWidget.tsx b/app/client/src/widgets/RadioGroupWidget.tsx index 552fcc9cd9..625032390f 100644 --- a/app/client/src/widgets/RadioGroupWidget.tsx +++ b/app/client/src/widgets/RadioGroupWidget.tsx @@ -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 { getPageView() { return ( - ) + ); } 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; diff --git a/app/client/src/widgets/SpinnerWidget.tsx b/app/client/src/widgets/SpinnerWidget.tsx index 3569e9ebc8..70429a8d50 100644 --- a/app/client/src/widgets/SpinnerWidget.tsx +++ b/app/client/src/widgets/SpinnerWidget.tsx @@ -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 { - +class SpinnerWidget extends BaseWidget { getPageView() { return ( { } } -export interface SpinnerWidgetProps extends IWidgetProps { +export interface SpinnerWidgetProps extends WidgetProps { size?: number; value?: number; ellipsize?: boolean; diff --git a/app/client/src/widgets/TagInputWidget.tsx b/app/client/src/widgets/TagInputWidget.tsx index 3b1e5db2fa..264d94fa08 100644 --- a/app/client/src/widgets/TagInputWidget.tsx +++ b/app/client/src/widgets/TagInputWidget.tsx @@ -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 { - +class TagInputWidget extends BaseWidget { getPageView() { return ( { } } -export interface TagInputWidgetProps extends IWidgetProps { +export interface TagInputWidgetProps extends WidgetProps { addOnPaste?: boolean; className?: string; disabled?: boolean; diff --git a/app/client/src/widgets/TextWidget.tsx b/app/client/src/widgets/TextWidget.tsx index 1875a603fc..be4df1d090 100644 --- a/app/client/src/widgets/TextWidget.tsx +++ b/app/client/src/widgets/TextWidget.tsx @@ -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 { - +class TextWidget extends BaseWidget { getPageView() { return ( { } } -export interface TextWidgetProps extends IWidgetProps { +export interface TextWidgetProps extends WidgetProps { text?: string; ellipsize?: boolean; tagName?: keyof JSX.IntrinsicElements;