+
{renderItem()}
- )
-}
-export default EditorDragLayer
+ );
+};
+export default EditorDragLayer;
diff --git a/app/client/src/pages/Editor/EditorHeader.tsx b/app/client/src/pages/Editor/EditorHeader.tsx
index b01e8d5d0c..ed47517185 100644
--- a/app/client/src/pages/Editor/EditorHeader.tsx
+++ b/app/client/src/pages/Editor/EditorHeader.tsx
@@ -1,8 +1,8 @@
-import React, { Component } from "react"
-import styled from "styled-components"
-import { connect } from "react-redux"
-import { AppState } from "../../reducers"
-import { EditorHeaderReduxState } from "../../reducers/uiReducers/editorHeaderReducer";
+import React, { Component } from "react";
+import styled from "styled-components";
+// import { connect } from "react-redux";
+// import { AppState } from "../../reducers";
+// import { EditorHeaderReduxState } from "../../reducers/uiReducers/editorHeaderReducer";
const Header = styled.header`
height: 50px;
@@ -10,25 +10,26 @@ const Header = styled.header`
background: #fff;
`;
-
-class EditorHeader extends Component
{
+class EditorHeader extends Component {
render() {
- return (
-
- )
+ return ;
}
}
-const mapStateToProps = (state: AppState, props: any): EditorHeaderReduxState => {
- return {}
-}
+export default EditorHeader;
-const mapDispatchToProps = (dispatch: any) => {
- return {}
-}
+// const mapStateToProps = (
+// state: AppState,
+// props: any,
+// ): EditorHeaderReduxState => {
+// return state;
+// };
-export default connect(
- mapStateToProps,
- mapDispatchToProps
-)(EditorHeader)
+// const mapDispatchToProps = (dispatch: any) => {
+// return {};
+// };
+
+// export default connect(
+// mapStateToProps,
+// mapDispatchToProps,
+// )(EditorHeader);
diff --git a/app/client/src/pages/Editor/WidgetCard.tsx b/app/client/src/pages/Editor/WidgetCard.tsx
index 216a73366c..7dfdcf8d01 100644
--- a/app/client/src/pages/Editor/WidgetCard.tsx
+++ b/app/client/src/pages/Editor/WidgetCard.tsx
@@ -1,20 +1,19 @@
-import React, { useState, useLayoutEffect, MutableRefObject } from 'react';
-import { useDrag, DragSourceMonitor, DragPreviewImage } from 'react-dnd'
-import blankImage from "../../assets/images/blank.png"
-import { WidgetCardProps } from '../../widgets/BaseWidget'
-import styled from 'styled-components';
-import { generateReactKey } from "../../utils/generators"
-
+import React, { useState, useLayoutEffect, MutableRefObject } from "react";
+import { useDrag, DragSourceMonitor, DragPreviewImage } from "react-dnd";
+import blankImage from "../../assets/images/blank.png";
+import { WidgetCardProps } from "../../widgets/BaseWidget";
+import styled from "styled-components";
+import { generateReactKey } from "../../utils/generators";
type CardProps = {
details: WidgetCardProps;
-}
+};
export const Wrapper = styled.div`
padding: 10px 5px 10px 5px;
border-radius: ${props => props.theme.radii[1]}px;
background: ${props => props.theme.colors.paneCard};
- border: 1px solid ${props=> props.theme.colors.paneCard};
+ border: 1px solid ${props => props.theme.colors.paneCard};
color: ${props => props.theme.colors.textOnDarkBG};
& > div {
display: flex;
@@ -22,10 +21,10 @@ export const Wrapper = styled.div`
align-items: center;
justify-content: center;
}
- &:hover{
+ &:hover {
background: #fff;
cursor: grab;
- color: ${props => props.theme.colors.textDefault}
+ color: ${props => props.theme.colors.textDefault};
}
& i {
font-family: ${props => props.theme.fonts[2]};
@@ -45,27 +44,32 @@ export const IconLabel = styled.h5`
/* eslint-disable @typescript-eslint/no-unused-vars */
const WidgetCard = (props: CardProps) => {
- const [initialOffset, setInitialOffset] = useState({ x: 0, y: 0})
+ const [initialOffset, setInitialOffset] = useState({ x: 0, y: 0 });
- const [{ isDragging }, drag, preview] = useDrag({
- item: { type: props.details.widgetType, widget: props.details, key: generateReactKey(), initialOffset},
+ const [{ isDragging }, drag, preview] = useDrag({
+ item: {
+ type: props.details.widgetType,
+ widget: props.details,
+ key: generateReactKey(),
+ initialOffset,
+ },
collect: (monitor: DragSourceMonitor) => ({
isDragging: monitor.isDragging(),
}),
- })
- const card: MutableRefObject = React.useRef(null)
- useLayoutEffect(()=> {
- const el = card.current
+ });
+ const card: MutableRefObject = React.useRef(null);
+ useLayoutEffect(() => {
+ const el = card.current;
if (el) {
- const rect = el.getBoundingClientRect()
+ const rect = el.getBoundingClientRect();
setInitialOffset({
x: Math.ceil(rect.left),
- y: Math.ceil(rect.top)
- })
+ y: Math.ceil(rect.top),
+ });
}
}, [setInitialOffset]);
return (
-
+
@@ -74,7 +78,7 @@ const WidgetCard = (props: CardProps) => {
- )
-}
+ );
+};
-export default WidgetCard
\ No newline at end of file
+export default WidgetCard;
diff --git a/app/client/src/pages/Editor/WidgetCardsPane.tsx b/app/client/src/pages/Editor/WidgetCardsPane.tsx
index b89d82a01a..cb1849a273 100644
--- a/app/client/src/pages/Editor/WidgetCardsPane.tsx
+++ b/app/client/src/pages/Editor/WidgetCardsPane.tsx
@@ -1,14 +1,14 @@
-import React from "react"
-import WidgetCard from "./WidgetCard"
-import styled from "styled-components"
-import { WidgetCardProps } from "../../widgets/BaseWidget"
+import React from "react";
+import WidgetCard from "./WidgetCard";
+import styled from "styled-components";
+import { WidgetCardProps } from "../../widgets/BaseWidget";
-type WidgetCardPaneProps = {
- cards: { [id: string]: WidgetCardProps[]};
-}
+type WidgetCardPaneProps = {
+ cards: { [id: string]: WidgetCardProps[] };
+};
const CardsPaneWrapper = styled.div`
- background-color: ${props => props.theme.colors.paneBG};
+ background-color: ${props => props.theme.colors.paneBG};
border-radius: ${props => props.theme.radii[2]}px;
box-shadow: 0px 0px 3px ${props => props.theme.colors.paneBG};
padding: 5px 10px;
@@ -24,22 +24,24 @@ const CardsWrapper = styled.div`
align-items: stretch;
`;
-const WidgetCardsPane: React.SFC = (props: WidgetCardPaneProps) => {
- const groups = Object.keys(props.cards)
+const WidgetCardsPane: React.SFC = (
+ props: WidgetCardPaneProps,
+) => {
+ const groups = Object.keys(props.cards);
return (
-
- {
- groups.map((group: string) =>
-
- {group}
-
- { props.cards[group].map((card: WidgetCardProps) => ) }
-
-
- )
- }
-
- )
-}
+
+ {groups.map((group: string) => (
+
+ {group}
+
+ {props.cards[group].map((card: WidgetCardProps) => (
+
+ ))}
+
+
+ ))}
+
+ );
+};
-export default WidgetCardsPane
\ No newline at end of file
+export default WidgetCardsPane;
diff --git a/app/client/src/pages/Editor/index.tsx b/app/client/src/pages/Editor/index.tsx
index 029e5423f6..fcd0222402 100644
--- a/app/client/src/pages/Editor/index.tsx
+++ b/app/client/src/pages/Editor/index.tsx
@@ -1,17 +1,17 @@
-import React, { Component } from "react"
-import { connect } from "react-redux"
-import styled from "styled-components"
-import Canvas from "./Canvas"
-import { WidgetCardProps, WidgetProps } from '../../widgets/BaseWidget'
-import { AppState } from "../../reducers"
-import { EditorReduxState } from "../../reducers/uiReducers/editorReducer"
-import WidgetCardsPane from "./WidgetCardsPane"
-import EditorHeader from "./EditorHeader"
-import { WidgetType } from "../../constants/WidgetConstants"
-import CanvasWidgetsNormalizer from "../../normalizers/CanvasWidgetsNormalizer"
-import { ContainerWidgetProps } from "../../widgets/ContainerWidget"
-import { fetchPage, addWidget } from "../../actions/pageActions"
-import { RenderModes } from "../../constants/WidgetConstants"
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import styled from "styled-components";
+import Canvas from "./Canvas";
+import { WidgetCardProps, WidgetProps } from "../../widgets/BaseWidget";
+import { AppState } from "../../reducers";
+import { EditorReduxState } from "../../reducers/uiReducers/editorReducer";
+import WidgetCardsPane from "./WidgetCardsPane";
+import EditorHeader from "./EditorHeader";
+import { WidgetType } from "../../constants/WidgetConstants";
+import CanvasWidgetsNormalizer from "../../normalizers/CanvasWidgetsNormalizer";
+import { ContainerWidgetProps } from "../../widgets/ContainerWidget";
+import { fetchPage, addWidget } from "../../actions/pageActions";
+import { RenderModes } from "../../constants/WidgetConstants";
// import EditorDragLayer from "./EditorDragLayer"
const CanvasContainer = styled.section`
@@ -49,11 +49,11 @@ type EditorProps = {
cards: { [id: string]: WidgetCardProps[] } | any;
addPageWidget: Function;
page: string;
-}
+};
class Editor extends Component {
componentDidMount() {
- this.props.fetchCanvasWidgets("1")
+ this.props.fetchCanvasWidgets("1");
}
addWidgetToCanvas = (widgetType: WidgetType, key: string): void => {
@@ -70,9 +70,9 @@ class Editor extends Component {
children: [],
topRow: 1,
widgetId: key,
- widgetType: widgetType
- })
- }
+ widgetType: widgetType,
+ });
+ };
public render() {
return (
@@ -81,33 +81,38 @@ class Editor extends Component {
-
+
- )
+ );
}
}
-const mapStateToProps = (state: AppState, props: EditorProps): EditorReduxState => {
+const mapStateToProps = (state: AppState): EditorReduxState => {
const pageWidget = CanvasWidgetsNormalizer.denormalize(
state.ui.canvas.pageWidgetId,
- state.entities
- )
+ state.entities,
+ );
return {
cards: state.ui.widgetCardsPane.cards,
pageWidget,
- }
-}
+ };
+};
const mapDispatchToProps = (dispatch: any) => {
return {
- fetchCanvasWidgets: (pageId: string) => dispatch(fetchPage(pageId, RenderModes.CANVAS)),
- addPageWidget: (pageId: string, widgetProps: WidgetProps) => dispatch(addWidget(pageId, widgetProps))
- }
-}
+ fetchCanvasWidgets: (pageId: string) =>
+ dispatch(fetchPage(pageId, RenderModes.CANVAS)),
+ addPageWidget: (pageId: string, widgetProps: WidgetProps) =>
+ dispatch(addWidget(pageId, widgetProps)),
+ };
+};
export default connect(
mapStateToProps,
- mapDispatchToProps
-)(Editor)
+ mapDispatchToProps,
+)(Editor);
diff --git a/app/client/src/pages/common/LoginPage.tsx b/app/client/src/pages/common/LoginPage.tsx
index f87a7b19ec..afc94fc999 100644
--- a/app/client/src/pages/common/LoginPage.tsx
+++ b/app/client/src/pages/common/LoginPage.tsx
@@ -1,21 +1,15 @@
-import * as React from "react"
+import * as React from "react";
import { RouterProps } from "react-router";
-import netlifyIdentity from 'netlify-identity-widget';
+import netlifyIdentity from "netlify-identity-widget";
class LoginPage extends React.PureComponent {
+ componentDidMount() {
+ netlifyIdentity.open();
+ }
- componentDidMount() {
- netlifyIdentity.open()
- }
-
- render() {
- return (
-
-
- )
- }
+ render() {
+ return ;
+ }
}
-export default LoginPage
-
-
+export default LoginPage;
diff --git a/app/client/src/pages/common/PageNotFound.tsx b/app/client/src/pages/common/PageNotFound.tsx
index c42203e221..2401fff88d 100644
--- a/app/client/src/pages/common/PageNotFound.tsx
+++ b/app/client/src/pages/common/PageNotFound.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
-import { NonIdealState, Button, Card, Elevation } from "@blueprintjs/core"
+import { NonIdealState, Button, Card, Elevation } from "@blueprintjs/core";
import { RouterProps } from "react-router";
class PageNotFound extends React.PureComponent {
@@ -14,12 +14,20 @@ class PageNotFound extends React.PureComponent {
description={
"The page you were looking for does not appear to exist"
}
- action={}
+ action={
+
+ }
/>