Implement Drag and Drop of components
This commit is contained in:
Abhinav Jha
parent
57ad5991c3
commit
02af80d3dc
|
|
@ -26,8 +26,8 @@
|
|||
"normalizr": "^3.3.0",
|
||||
"prettier": "^1.16.0",
|
||||
"react": "^16.7.0",
|
||||
"react-dnd": "^7.4.3",
|
||||
"react-dnd-html5-backend": "^7.4.0",
|
||||
"react-dnd": "^9.3.4",
|
||||
"react-dnd-html5-backend": "^9.3.4",
|
||||
"react-dom": "^16.7.0",
|
||||
"react-redux": "^6.0.0",
|
||||
"react-router": "^4.3.1",
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import {
|
|||
} from "../constants/ActionConstants"
|
||||
import { PageRequest } from "../api/PageApi"
|
||||
import { RenderMode } from "../constants/WidgetConstants";
|
||||
import { IWidgetProps } from "../widgets/BaseWidget";
|
||||
|
||||
export const fetchPage = (pageId: string, renderMode: RenderMode): ReduxAction<PageRequest> => {
|
||||
return {
|
||||
|
|
@ -14,3 +15,23 @@ export const fetchPage = (pageId: string, renderMode: RenderMode): ReduxAction<P
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const addWidget = (pageId: string, widget: IWidgetProps): ReduxAction<{ pageId: string, widget: IWidgetProps}> => {
|
||||
return {
|
||||
type: ActionTypes.ADD_PAGE_WIDGET,
|
||||
payload: {
|
||||
pageId,
|
||||
widget,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const removeWidget = (pageId: string, widgetId: string): ReduxAction<{ pageId: string, widgetId: string}> => {
|
||||
return {
|
||||
type: ActionTypes.REMOVE_PAGE_WIDGET,
|
||||
payload: {
|
||||
pageId,
|
||||
widgetId,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -10,16 +10,22 @@ export const fetchWidgetCards = () => {
|
|||
}
|
||||
}
|
||||
|
||||
export const errorFetchingWidgetCards = (error: T) => {
|
||||
export const errorFetchingWidgetCards = (error: any) => {
|
||||
return {
|
||||
type: ActionTypes.ERROR_FETCHING_WIDGET_CARDS,
|
||||
error
|
||||
}
|
||||
}
|
||||
|
||||
export const successFetchingWidgetCards = (cards: <string, IWidgetCardProps[]>) => {
|
||||
export const successFetchingWidgetCards = (cards: { [id: string]: IWidgetCardProps[] }) => {
|
||||
return {
|
||||
type: ActionTypes.SUCCESS_FETCHING_WIDGET_CARDS,
|
||||
cards
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
fetchWidgetCards,
|
||||
errorFetchingWidgetCards,
|
||||
successFetchingWidgetCards
|
||||
}
|
||||
|
|
@ -4,7 +4,6 @@ export interface ApiHeaders {
|
|||
Accept: ContentType
|
||||
"Content-Type": ContentType
|
||||
dataType: DataType
|
||||
"Accept-Encoding": EncodingType
|
||||
}
|
||||
|
||||
export interface ApiRequest {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { IContainerWidgetProps } from "../widgets/ContainerWidget"
|
|||
import { ApiResponse } from "./ApiResponses"
|
||||
|
||||
export interface WidgetCardsPaneResponse {
|
||||
cards : Map<string, IWidgetCardProps[]>
|
||||
cards : { [id: string]: IWidgetCardProps[]}
|
||||
}
|
||||
export interface WidgetCardsPaneRequest {}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,6 +17,8 @@ export type ActionType =
|
|||
| "FETCH_WIDGET_CARDS"
|
||||
| "SUCCESS_FETCHING_WIDGET_CARDS"
|
||||
| "ERROR_FETCHING_WIDGET_CARDS"
|
||||
| "ADD_PAGE_WIDGET"
|
||||
| "REMOVE_PAGE_WIDGET"
|
||||
|
||||
export const ActionTypes: { [id: string]: ActionType } = {
|
||||
UPDATE_CANVAS: "UPDATE_CANVAS",
|
||||
|
|
@ -31,8 +33,11 @@ export const ActionTypes: { [id: string]: ActionType } = {
|
|||
UNDO_CANVAS_ACTION: "UNDO_CANVAS_ACTION",
|
||||
REDO_CANVAS_ACTION: "REDO_CANVAS_ACTION",
|
||||
PUBLISH: "PUBLISH",
|
||||
FETCH_WIDGET_CARDS: "FETCH_WIDGET_CARDS",
|
||||
SUCCESS_FETCHING_WIDGET_CARDS: "SUCCESS_FETCHING_WIDGET_CARDS",
|
||||
ERROR_FETCHING_WIDGET_CARDS: "ERROR_FETCHING_WIDGET_CARDS"
|
||||
ERROR_FETCHING_WIDGET_CARDS: "ERROR_FETCHING_WIDGET_CARDS",
|
||||
ADD_PAGE_WIDGET: "ADD_PAGE_WIDGET",
|
||||
REMOVE_PAGE_WIDGET: "REMOVE_PAGE_WIDGET"
|
||||
}
|
||||
|
||||
export interface ReduxAction<T> {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ export type ContentType = "application/json" | "application/x-www-form-urlencode
|
|||
export type EncodingType = "gzip"
|
||||
|
||||
export const PROD_BASE_URL = "https://mobtools.com/api/"
|
||||
export const MOCK_BASE_URL = "https://12064212-8b45-4d81-882a-7a044f3c9555.mock.pstmn.io"
|
||||
export const MOCK_BASE_URL = "https://f1a8b631-ef37-4932-8f41-75cf127fcc55.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
|
||||
|
|
@ -13,5 +13,4 @@ export const REQUEST_HEADERS: ApiHeaders = {
|
|||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
dataType: "json",
|
||||
"Accept-Encoding": "gzip"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,14 @@ export type WidgetType =
|
|||
| "RADIO_GROUP_WIDGET"
|
||||
| "INPUT_WIDGET"
|
||||
| "TOGGLE_WIDGET"
|
||||
|
||||
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 CSSUnit =
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { Component } from "react"
|
||||
import React from "react"
|
||||
import { PositionType, CSSUnit } from "../constants/WidgetConstants"
|
||||
import { Color } from "../constants/StyleConstants"
|
||||
/***
|
||||
* Components are responsible for binding render inputs to corresponding UI SDKs
|
||||
*/
|
||||
|
|
@ -22,6 +23,8 @@ export interface BaseStyle {
|
|||
yPositionUnit: CSSUnit
|
||||
heightUnit?: CSSUnit
|
||||
widthUnit?: CSSUnit
|
||||
backgroundColor?: Color
|
||||
|
||||
}
|
||||
|
||||
export interface IComponentProps {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ class ButtonComponent extends React.Component<IButtonComponentProps> {
|
|||
render() {
|
||||
return (
|
||||
<Container {...this.props}>
|
||||
<Button text={this.props.text} icon={this.props.icon} />
|
||||
<Button icon={this.props.icon}>{this.props.text}</Button>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import createSagaMiddleware from 'redux-saga'
|
|||
import { rootSaga } from "./sagas"
|
||||
import { ActionType, ReduxAction } from "./constants/ActionConstants";
|
||||
|
||||
import { DragDropContextProvider } from "react-dnd"
|
||||
import { DndProvider } from "react-dnd"
|
||||
import HTML5Backend from "react-dnd-html5-backend"
|
||||
|
||||
WidgetBuilderRegistry.registerWidgetBuilders();
|
||||
|
|
@ -25,18 +25,19 @@ sagaMiddleware.run(rootSaga)
|
|||
|
||||
ReactDOM.render(
|
||||
|
||||
<DragDropContextProvider backend={HTML5Backend}>
|
||||
<Provider store={store}>
|
||||
<ThemeProvider theme={theme}>
|
||||
<BrowserRouter>
|
||||
<Switch>
|
||||
<Route exact path="/" component={App} />
|
||||
<Route exact path="/builder" component={Editor} />
|
||||
<Route component={PageNotFound} />
|
||||
</Switch>
|
||||
</BrowserRouter>
|
||||
</ThemeProvider>
|
||||
</Provider></DragDropContextProvider>,
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
<Provider store={store}>
|
||||
<ThemeProvider theme={theme}>
|
||||
<BrowserRouter>
|
||||
<Switch>
|
||||
<Route exact path="/" component={App} />
|
||||
<Route exact path="/builder" component={Editor} />
|
||||
<Route component={PageNotFound} />
|
||||
</Switch>
|
||||
</BrowserRouter>
|
||||
</ThemeProvider>
|
||||
</Provider>
|
||||
</DndProvider>,
|
||||
document.getElementById("root")
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,173 +0,0 @@
|
|||
import { IContainerWidgetProps } from "../widgets/ContainerWidget"
|
||||
import { RenderModes } from "../constants/WidgetConstants"
|
||||
|
||||
const CanvasResponse: IContainerWidgetProps<any> = {
|
||||
widgetId: "0",
|
||||
widgetType: "CONTAINER_WIDGET",
|
||||
snapColumns: 10,
|
||||
snapRows: 10,
|
||||
topRow: 60,
|
||||
bottomRow: 700,
|
||||
leftColumn: 300,
|
||||
rightColumn: 1000,
|
||||
parentColumnSpace: 1,
|
||||
parentRowSpace: 1,
|
||||
renderMode: RenderModes.CANVAS,
|
||||
children: [
|
||||
{
|
||||
widgetId: "1",
|
||||
widgetType: "TEXT_WIDGET",
|
||||
topRow: 2,
|
||||
leftColumn: 1,
|
||||
bottomRow: 5,
|
||||
rightColumn: 3,
|
||||
text: "Lorem Ipsum asda asd kjhsadjhas kdh kashkjdas kdhas d as",
|
||||
renderMode: RenderModes.CANVAS
|
||||
},
|
||||
{
|
||||
widgetId: "2",
|
||||
widgetType: "BUTTON_WIDGET",
|
||||
topRow: 2,
|
||||
leftColumn: 4,
|
||||
bottomRow: 5,
|
||||
rightColumn: 5,
|
||||
text: "Lorem Ipsum",
|
||||
renderMode: RenderModes.CANVAS
|
||||
},
|
||||
{
|
||||
widgetId: "3",
|
||||
widgetType: "INPUT_GROUP_WIDGET",
|
||||
topRow: 1,
|
||||
leftColumn: 1,
|
||||
bottomRow: 1,
|
||||
rightColumn: 5,
|
||||
placeholder: "Lorem Ipsum",
|
||||
renderMode: RenderModes.CANVAS
|
||||
},
|
||||
{
|
||||
widgetId: "4",
|
||||
widgetType: "CALLOUT_WIDGET",
|
||||
topRow: 2,
|
||||
leftColumn: 8,
|
||||
bottomRow: 4,
|
||||
rightColumn: 14,
|
||||
id: "sample_id",
|
||||
title: "Visually important content",
|
||||
description:
|
||||
"The component is a simple wrapper around the CSS API that provides props for modifiers and optional title element. Any additional HTML props will be spread to the rendered <div> element.",
|
||||
icon: "",
|
||||
intent: "success",
|
||||
renderMode: RenderModes.CANVAS
|
||||
},
|
||||
{
|
||||
widgetId: "5",
|
||||
widgetType: "ICON_WIDGET",
|
||||
topRow: 4,
|
||||
leftColumn: 2,
|
||||
bottomRow: 5,
|
||||
rightColumn: 3,
|
||||
icon: "globe",
|
||||
iconSize: "20",
|
||||
intent: "warning",
|
||||
renderMode: RenderModes.CANVAS
|
||||
},
|
||||
{
|
||||
widgetId: "6",
|
||||
widgetType: "SPINNER_WIDGET",
|
||||
topRow: 5,
|
||||
leftColumn: 6,
|
||||
bottomRow: 5,
|
||||
rightColumn: 5,
|
||||
size: 20
|
||||
},
|
||||
{
|
||||
widgetId: "7",
|
||||
widgetType: "BREADCRUMBS_WIDGET",
|
||||
topRow: 6,
|
||||
leftColumn: 2,
|
||||
bottomRow: 5,
|
||||
rightColumn: 5,
|
||||
width: "100%",
|
||||
collapseFrom: "start",
|
||||
className: "breadcrumbs",
|
||||
size: 20,
|
||||
renderMode: RenderModes.CANVAS,
|
||||
items: [
|
||||
{ icon: "folder-close", text: "All files" },
|
||||
{ icon: "folder-close", text: "Users" },
|
||||
{ icon: "folder-close", text: "Janet" },
|
||||
{ href: "#", icon: "folder-close", text: "Photos" },
|
||||
{ href: "#", icon: "folder-close", text: "Wednesday" },
|
||||
{ icon: "document", text: "image.jpg" }
|
||||
]
|
||||
},
|
||||
{
|
||||
widgetId: "8",
|
||||
widgetType: "TAG_INPUT_WIDGET",
|
||||
topRow: 7,
|
||||
leftColumn: 1,
|
||||
bottomRow: 5,
|
||||
rightColumn: 5,
|
||||
palceholder: "Lorem, Ipsum",
|
||||
values: ["abx", "somf", "soke"],
|
||||
renderMode: RenderModes.CANVAS
|
||||
},
|
||||
{
|
||||
widgetId: "9",
|
||||
widgetType: "NUMERIC_INPUT_WIDGET",
|
||||
topRow: 4,
|
||||
leftColumn: 1,
|
||||
bottomRow: 5,
|
||||
rightColumn: 5,
|
||||
palceholder: "Numeric input",
|
||||
allowNumericCharactersOnly: true,
|
||||
renderMode: RenderModes.CANVAS
|
||||
},
|
||||
{
|
||||
widgetId: "10",
|
||||
widgetType: "CHECKBOX_WIDGET",
|
||||
topRow: 6,
|
||||
leftColumn: 1,
|
||||
bottomRow: 5,
|
||||
rightColumn: 5,
|
||||
items: [
|
||||
{
|
||||
label: "a",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "b",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: "c",
|
||||
value: 3
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
widgetId: "11",
|
||||
widgetType: "RADIO_GROUP_WIDGET",
|
||||
topRow: 6,
|
||||
leftColumn: 1,
|
||||
bottomRow: 5,
|
||||
rightColumn: 5,
|
||||
items: [
|
||||
{
|
||||
label: "a",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "b",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: "c",
|
||||
value: 3
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export default CanvasResponse
|
||||
|
|
@ -2,9 +2,9 @@ import { normalize, schema, denormalize } from 'normalizr';
|
|||
import { PageResponse } from '../api/PageApi';
|
||||
import { IContainerWidgetProps } from '../widgets/ContainerWidget';
|
||||
|
||||
export const widgetSchema = new schema.Entity('canvasWidgets', { }, { idAttribute: "widgetId" }, );
|
||||
const widgets = new schema.Array(widgetSchema);
|
||||
widgetSchema.define({ children: widgets });
|
||||
export const widgetSchema = new schema.Entity('canvasWidgets', { }, { idAttribute: "widgetId" });
|
||||
// const widgets = new schema.Array(widgetSchema);
|
||||
widgetSchema.define({ children: [widgetSchema] });
|
||||
|
||||
class CanvasWidgetsNormalizer {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,47 +1,30 @@
|
|||
import React, { Component } from "react"
|
||||
import { connect } from "react-redux"
|
||||
import { AppState } from "../../reducers"
|
||||
import React, { Props } from "react"
|
||||
import WidgetFactory from "../../utils/WidgetFactory"
|
||||
import CanvasWidgetsNormalizer, {
|
||||
widgetSchema
|
||||
} from "../../normalizers/CanvasWidgetsNormalizer"
|
||||
import { WidgetTypes } from "../../constants/WidgetConstants"
|
||||
import { DraggableWidget } from "../../widgets/BaseWidget"
|
||||
import { useDrop } from 'react-dnd'
|
||||
import { IContainerWidgetProps } from "../../widgets/ContainerWidget"
|
||||
import { fetchPage } from "../../actions/pageActions"
|
||||
import { RenderModes } from "../../constants/WidgetConstants"
|
||||
|
||||
class Canvas extends Component<{
|
||||
interface CanvasProps {
|
||||
pageWidget: IContainerWidgetProps<any>
|
||||
fetchPage: Function
|
||||
}> {
|
||||
componentDidMount() {
|
||||
this.props.fetchPage("1")
|
||||
}
|
||||
|
||||
render() {
|
||||
const pageWidget = this.props.pageWidget
|
||||
return pageWidget ? WidgetFactory.createWidget(pageWidget) : null
|
||||
}
|
||||
addWidget: Function
|
||||
removeWidget: Function
|
||||
}
|
||||
|
||||
const mapStateToProps = (state: AppState, props: any) => {
|
||||
const pageWidget = CanvasWidgetsNormalizer.denormalize(
|
||||
state.ui.canvas.pageWidgetId,
|
||||
state.entities
|
||||
const Canvas : React.SFC<CanvasProps> = (props) => {
|
||||
const [, drop] = useDrop({
|
||||
accept: Object.values(WidgetTypes),
|
||||
drop(item: DraggableWidget, monitor) {
|
||||
console.log("dropped")
|
||||
props.addWidget(item.type);
|
||||
return undefined
|
||||
},
|
||||
})
|
||||
return (
|
||||
<div ref={drop}>
|
||||
{props.pageWidget && WidgetFactory.createWidget(props.pageWidget)}
|
||||
</div>
|
||||
)
|
||||
return {
|
||||
pageWidget: pageWidget
|
||||
}
|
||||
}
|
||||
|
||||
const mapDispatchToProps = (dispatch: any) => {
|
||||
return {
|
||||
fetchPage: (pageId: string) => {
|
||||
return dispatch(fetchPage(pageId, RenderModes.CANVAS))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(Canvas)
|
||||
export default Canvas
|
||||
87
app/client/src/pages/Editor/EditorDragLayer.tsx
Normal file
87
app/client/src/pages/Editor/EditorDragLayer.tsx
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { XYCoord, useDragLayer } from 'react-dnd'
|
||||
import snapToGrid from './snapToGrid'
|
||||
import WidgetFactory from '../../utils/WidgetFactory';
|
||||
import { RenderModes, WidgetTypes, WidgetType } from '../../constants/WidgetConstants';
|
||||
|
||||
const WrappedDragLayer = styled.div`
|
||||
position: fixed;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
`;
|
||||
|
||||
|
||||
function getItemStyles(
|
||||
initialOffset: XYCoord | null,
|
||||
currentOffset: XYCoord | null
|
||||
) {
|
||||
if (!initialOffset || !currentOffset) {
|
||||
return {
|
||||
display: 'none',
|
||||
}
|
||||
}
|
||||
|
||||
let { x, y } = currentOffset
|
||||
|
||||
x -= initialOffset.x
|
||||
y -= initialOffset.y
|
||||
;[x, y] = snapToGrid(x, y)
|
||||
x += initialOffset.x
|
||||
y += initialOffset.y
|
||||
|
||||
const transform = `translate(${x}px, ${y}px)`
|
||||
return {
|
||||
transform,
|
||||
WebkitTransform: transform,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const EditorDragLayer: React.FC = () => {
|
||||
const {
|
||||
itemType,
|
||||
isDragging,
|
||||
item,
|
||||
initialOffset,
|
||||
currentOffset,
|
||||
} = useDragLayer(monitor => ({
|
||||
item: monitor.getItem(),
|
||||
itemType: monitor.getItemType(),
|
||||
initialOffset: monitor.getInitialSourceClientOffset(),
|
||||
currentOffset: monitor.getSourceClientOffset(),
|
||||
isDragging: monitor.isDragging(),
|
||||
}))
|
||||
|
||||
function renderItem() {
|
||||
return WidgetFactory.createWidget({
|
||||
widgetType: itemType as WidgetType,
|
||||
widgetId: '2',
|
||||
topRow: 10,
|
||||
leftColumn: 10,
|
||||
bottomRow: 14,
|
||||
rightColumn: 20,
|
||||
parentColumnSpace: 1,
|
||||
parentRowSpace: 1,
|
||||
renderMode: RenderModes.CANVAS
|
||||
})
|
||||
}
|
||||
|
||||
if (!isDragging) {
|
||||
return null
|
||||
}
|
||||
return (
|
||||
<WrappedDragLayer>
|
||||
<div
|
||||
style={getItemStyles(initialOffset, currentOffset)}
|
||||
>
|
||||
{renderItem()}
|
||||
</div>
|
||||
</WrappedDragLayer>
|
||||
)
|
||||
}
|
||||
export default EditorDragLayer
|
||||
55
app/client/src/pages/Editor/WidgetCard.tsx
Normal file
55
app/client/src/pages/Editor/WidgetCard.tsx
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
import React from 'react';
|
||||
import { useDrag, DragSourceMonitor } from 'react-dnd'
|
||||
import { IWidgetCardProps } from '../../widgets/BaseWidget'
|
||||
import styled from 'styled-components'
|
||||
import { Icon } from '@blueprintjs/core'
|
||||
import { IconNames } from '@blueprintjs/icons'
|
||||
|
||||
interface WidgetCardProps {
|
||||
details: IWidgetCardProps
|
||||
}
|
||||
|
||||
const Wrapper = styled.div`
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
padding: 10px 5px 10px 5px;
|
||||
margin: 0px 10px 0 0;
|
||||
border-radius: 5px;
|
||||
background: #eee
|
||||
border: 1px solid #eee;
|
||||
&:hover{
|
||||
background: #fff;
|
||||
cursor: grab;
|
||||
}
|
||||
`;
|
||||
const IconLabel = styled.h5`
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
flex-shrink: 1;
|
||||
font-size: 0.5rem;
|
||||
`;
|
||||
|
||||
const WidgetCard: React.SFC<WidgetCardProps> = (props) => {
|
||||
const [{ isDragging }, drag] = useDrag({
|
||||
item: { type: props.details.widgetType, widget: props.details },
|
||||
collect: (monitor: DragSourceMonitor) => ({
|
||||
isDragging: monitor.isDragging(),
|
||||
}),
|
||||
})
|
||||
return (
|
||||
<Wrapper ref={drag}>
|
||||
<div>
|
||||
<Icon icon="segmented-control" iconSize={20} />
|
||||
<IconLabel>{props.details.label}</IconLabel>
|
||||
</div>
|
||||
</Wrapper>
|
||||
)
|
||||
}
|
||||
|
||||
export default WidgetCard
|
||||
|
|
@ -1,30 +1,42 @@
|
|||
import React, { Component } from "react"
|
||||
import { connect } from "react-redux"
|
||||
import { AppState } from "../../reducers"
|
||||
import { WidgetCardsPaneReduxState } from "../../reducers/uiReducers/widgetCardsPaneReducer";
|
||||
import WidgetCard from "./WidgetCard"
|
||||
import styled from "styled-components"
|
||||
import { IWidgetCardProps } from "../../widgets/BaseWidget"
|
||||
|
||||
class WidgetCardsPane extends Component<WidgetCardsPaneReduxState> {
|
||||
render() {
|
||||
const groups = Object.keys(this.props.cards)
|
||||
return (<div style={{ width: "300px", backgroundColor: "#fff", borderRadius: "5px", boxShadow: "0px 0px 3px #ccc", padding: "5px 10px", display: "flex", flexFlow: "row wrap" }}>
|
||||
{groups.map((group: string) => {
|
||||
|
||||
})}
|
||||
</div>)
|
||||
}
|
||||
interface WidgetCardPaneProps {
|
||||
cards: { [id: string]: IWidgetCardProps[]}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state: AppState, props: any): WidgetCardsPaneReduxState => {
|
||||
return {
|
||||
cards: state.ui.widgetCardsPane.cards
|
||||
}
|
||||
const CardsPaneWrapper = styled.div`
|
||||
width: 300px;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 0px 3px #ccc;
|
||||
padding: 5px 10px;
|
||||
`;
|
||||
|
||||
const CardsWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
`;
|
||||
|
||||
const WidgetCardsPane: React.SFC<WidgetCardPaneProps> = (props) => {
|
||||
const groups = Object.keys(props.cards)
|
||||
return (
|
||||
<CardsPaneWrapper>
|
||||
{
|
||||
groups.map((group: string) =>
|
||||
<React.Fragment key={group}>
|
||||
<h5>{group}</h5>
|
||||
<CardsWrapper>
|
||||
{ props.cards[group].map((card: IWidgetCardProps) => <WidgetCard details={card} key={card.widgetType} />) }
|
||||
</CardsWrapper>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
</CardsPaneWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
const mapDispatchToProps = (dispatch: any) => {
|
||||
return {}
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(WidgetCardsPane)
|
||||
export default WidgetCardsPane
|
||||
|
|
@ -1,9 +1,19 @@
|
|||
import React, { Component } from "react"
|
||||
import { connect } from "react-redux"
|
||||
import styled from "styled-components"
|
||||
import Canvas from "./Canvas"
|
||||
import { IWidgetCardProps, IWidgetProps } from '../../widgets/BaseWidget'
|
||||
import { AppState } from "../../reducers"
|
||||
import { EditorReduxState } from "../../reducers/uiReducers/editorReducer"
|
||||
import WidgetCardsPane from "./WidgetCardsPane"
|
||||
import EditorHeader from "./EditorHeader"
|
||||
import { CALCULATOR } from "@blueprintjs/icons/lib/esm/generated/iconContents";
|
||||
import { WidgetType } from "../../constants/WidgetConstants"
|
||||
import CanvasWidgetsNormalizer from "../../normalizers/CanvasWidgetsNormalizer"
|
||||
import { fetchWidgetCards } from "../../actions/widgetCardsPaneActions"
|
||||
import { IContainerWidgetProps } from "../../widgets/ContainerWidget"
|
||||
import { fetchPage, addWidget } from "../../actions/pageActions"
|
||||
import { RenderModes } from "../../constants/WidgetConstants"
|
||||
import EditorDragLayer from "./EditorDragLayer"
|
||||
|
||||
const ArtBoard = styled.section`
|
||||
height: 100%;
|
||||
|
|
@ -12,32 +22,95 @@ const ArtBoard = styled.section`
|
|||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
margin: 0px 10px;
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
`;
|
||||
|
||||
class Editor extends Component {
|
||||
const EditorWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
height: calc(100vh - 60px);
|
||||
`;
|
||||
|
||||
class Editor extends Component<{
|
||||
pageWidget: IContainerWidgetProps<any> | any
|
||||
fetchCanvasWidgets: Function
|
||||
fetchWidgetCardsPane: Function
|
||||
cards: { [id: string] : IWidgetCardProps[] } | any
|
||||
addPageWidget: Function
|
||||
}> {
|
||||
componentDidMount() {
|
||||
this.props.fetchWidgetCardsPane()
|
||||
this.props.fetchCanvasWidgets("1")
|
||||
}
|
||||
|
||||
addWidgetToCanvas = (widgetType: WidgetType) => {
|
||||
this.props.addPageWidget("1", {
|
||||
key: "12",
|
||||
bottomRow: 9,
|
||||
leftColumn: 1,
|
||||
parentColumnSpace: 90,
|
||||
parentRowSpace: 50,
|
||||
renderMode: RenderModes.CANVAS,
|
||||
rightColumn: 3,
|
||||
snapColumns: 20,
|
||||
snapRows: 20,
|
||||
children: [],
|
||||
topRow: 1,
|
||||
widgetId: "2",
|
||||
widgetType: widgetType
|
||||
})
|
||||
}
|
||||
|
||||
removeWidgetFromCanvas = (widgetId: string) => {
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div style={{
|
||||
|
||||
}}>
|
||||
<React.Fragment>
|
||||
<EditorHeader></EditorHeader>
|
||||
<div style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "stretch",
|
||||
justifyContent: "flex-start",
|
||||
width: "100vw",
|
||||
overflow: "hidden",
|
||||
padding: "10px",
|
||||
height: "calc(100vh - 60px)"}}>
|
||||
<WidgetCardsPane />
|
||||
<ArtBoard>
|
||||
<Canvas />
|
||||
</ArtBoard>
|
||||
</div>
|
||||
</div>
|
||||
<EditorWrapper>
|
||||
<WidgetCardsPane cards={this.props.cards} />
|
||||
<ArtBoard>
|
||||
<Canvas pageWidget={this.props.pageWidget} addWidget={this.addWidgetToCanvas} removeWidget={this.removeWidgetFromCanvas} />
|
||||
<EditorDragLayer />
|
||||
</ArtBoard>
|
||||
</EditorWrapper>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Editor
|
||||
const mapStateToProps = (state: AppState, props: any): EditorReduxState => {
|
||||
const pageWidget = CanvasWidgetsNormalizer.denormalize(
|
||||
state.ui.canvas.pageWidgetId,
|
||||
state.entities
|
||||
)
|
||||
return {
|
||||
cards: state.ui.widgetCardsPane.cards,
|
||||
pageWidget,
|
||||
}
|
||||
}
|
||||
|
||||
const mapDispatchToProps = (dispatch: any) => {
|
||||
return {
|
||||
fetchCanvasWidgets: (pageId: string) => dispatch(fetchPage(pageId, RenderModes.CANVAS)),
|
||||
fetchWidgetCardsPane: () => dispatch(fetchWidgetCards()),
|
||||
addPageWidget: (pageId:string, widgetProps: IWidgetProps) => dispatch(addWidget(pageId, widgetProps))
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(Editor)
|
||||
|
|
|
|||
5
app/client/src/pages/Editor/snapToGrid.ts
Normal file
5
app/client/src/pages/Editor/snapToGrid.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export default function snapToGrid(x: number, y: number) {
|
||||
const snappedX = Math.round(x / 32) * 32
|
||||
const snappedY = Math.round(y / 32) * 32
|
||||
return [snappedX, snappedY]
|
||||
}
|
||||
|
|
@ -5,9 +5,13 @@ import {
|
|||
ReduxAction
|
||||
} from "../../constants/ActionConstants"
|
||||
import { IWidgetProps } from "../../widgets/BaseWidget"
|
||||
import CanvasWidgetsNormalizer, { widgetSchema } from "../../normalizers/CanvasWidgetsNormalizer";
|
||||
|
||||
const initialState: CanvasWidgetsReduxState = {
|
||||
|
||||
const initialState: CanvasWidgetsReduxState = {}
|
||||
|
||||
|
||||
export interface IFlattenedWidgetProps extends IWidgetProps {
|
||||
children?: string[]
|
||||
}
|
||||
|
||||
const canvasWidgetsReducer = createReducer(initialState, {
|
||||
|
|
@ -16,11 +20,26 @@ const canvasWidgetsReducer = createReducer(initialState, {
|
|||
action: ReduxAction<LoadCanvasPayload>
|
||||
) => {
|
||||
return { ...action.payload.widgets }
|
||||
},
|
||||
[ActionTypes.ADD_PAGE_WIDGET]: (
|
||||
state: CanvasWidgetsReduxState,
|
||||
action: ReduxAction<{pageId: string, widget: IWidgetProps}>
|
||||
) => {
|
||||
const widget = action.payload.widget
|
||||
const widgetTree = CanvasWidgetsNormalizer.denormalize("0", { canvasWidgets: state })
|
||||
const children = widgetTree.children || []
|
||||
children.push(widget)
|
||||
widgetTree.children = children
|
||||
const newState = CanvasWidgetsNormalizer.normalize({
|
||||
responseMeta: {},
|
||||
pageWidget: widgetTree
|
||||
}).entities
|
||||
return newState.canvasWidgets
|
||||
}
|
||||
})
|
||||
|
||||
export interface CanvasWidgetsReduxState {
|
||||
[widgetId: string]: IWidgetProps
|
||||
[widgetId: string]: IFlattenedWidgetProps
|
||||
}
|
||||
|
||||
export default canvasWidgetsReducer
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ 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,
|
||||
|
|
@ -18,6 +19,7 @@ export interface AppState {
|
|||
canvas: CanvasReduxState
|
||||
widgetCardsPane: WidgetCardsPaneReduxState
|
||||
editorHeader: EditorHeaderReduxState
|
||||
editor: EditorReduxState
|
||||
}
|
||||
entities: {
|
||||
canvasWidgets: CanvasWidgetsReduxState
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ const canvasReducer = createReducer(initialState, {
|
|||
state: CanvasReduxState,
|
||||
action: ReduxAction<LoadCanvasPayload>
|
||||
) => {
|
||||
console.log(action.payload);
|
||||
return { pageWidgetId: action.payload.pageWidgetId }
|
||||
}
|
||||
})
|
||||
|
|
|
|||
41
app/client/src/reducers/uiReducers/editorReducer.tsx
Normal file
41
app/client/src/reducers/uiReducers/editorReducer.tsx
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
import { createReducer } from "../../utils/PicassoUtils"
|
||||
import {
|
||||
ActionTypes,
|
||||
ReduxAction,
|
||||
LoadCanvasPayload,
|
||||
LoadWidgetCardsPanePayload
|
||||
} from "../../constants/ActionConstants"
|
||||
import { IWidgetCardProps, IWidgetProps } from "../../widgets/BaseWidget"
|
||||
import { IContainerWidgetProps } from "../../widgets/ContainerWidget"
|
||||
|
||||
const initialState: EditorReduxState = {}
|
||||
|
||||
const editorReducer = createReducer(initialState, {
|
||||
[ActionTypes.SUCCESS_FETCHING_WIDGET_CARDS]: (
|
||||
state: EditorReduxState,
|
||||
action: ReduxAction<LoadWidgetCardsPanePayload>
|
||||
) => {
|
||||
return { ...state.pageWidget, ...action.payload }
|
||||
},
|
||||
[ActionTypes.ADD_PAGE_WIDGET]: (
|
||||
state: EditorReduxState,
|
||||
action: ReduxAction<{pageId: string, widget: IWidgetProps}>
|
||||
) => {
|
||||
return state
|
||||
},
|
||||
[ActionTypes.UPDATE_CANVAS]: (
|
||||
state: EditorReduxState,
|
||||
action: ReduxAction<LoadCanvasPayload>
|
||||
) => {
|
||||
return { pageWidgetId: action.payload.pageWidgetId }
|
||||
}
|
||||
})
|
||||
|
||||
export interface EditorReduxState {
|
||||
pageWidget?: IContainerWidgetProps<any>
|
||||
cards?: {
|
||||
[id: string]: IWidgetCardProps[]
|
||||
}
|
||||
}
|
||||
|
||||
export default editorReducer
|
||||
|
|
@ -2,6 +2,7 @@ import { combineReducers } from "redux"
|
|||
import canvasReducer from "./canvasReducer"
|
||||
import widgetCardsPaneReducer from "./widgetCardsPaneReducer"
|
||||
import editorHeaderReducer from "./editorHeaderReducer"
|
||||
import editorReducer from "./editorReducer"
|
||||
|
||||
const uiReducer = combineReducers({ canvas: canvasReducer, widgetCardsPane: widgetCardsPaneReducer, editorHeader: editorHeaderReducer })
|
||||
const uiReducer = combineReducers({ canvas: canvasReducer, widgetCardsPane: widgetCardsPaneReducer, editorHeader: editorHeaderReducer, editor: editorReducer })
|
||||
export default uiReducer
|
||||
|
|
|
|||
|
|
@ -10,10 +10,11 @@ import WidgetCardsPaneResponse from "../../mockResponses/WidgetCardsPaneResponse
|
|||
const initialState: WidgetCardsPaneReduxState = WidgetCardsPaneResponse
|
||||
|
||||
const widgetCardsPaneReducer = createReducer(initialState, {
|
||||
[ActionTypes.SUCCESS_FETCHING_WIDGET_CARDS]: (
|
||||
[ActionTypes.ERROR_FETCHING_WIDGET_CARDS]: (
|
||||
state: WidgetCardsPaneReduxState,
|
||||
action: ReduxAction<LoadWidgetCardsPanePayload>
|
||||
) => {
|
||||
console.log(action)
|
||||
return { cards: action.payload.cards }
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -6,15 +6,21 @@ import { RenderModes } from "../constants/WidgetConstants"
|
|||
|
||||
export function* fetchPageSaga(pageRequestAction: ReduxAction<PageRequest>) {
|
||||
const pageRequest = pageRequestAction.payload
|
||||
const pageResponse: PageResponse = yield call(PageApi.fetchPage, pageRequest)
|
||||
if (pageRequest.renderMode === RenderModes.CANVAS) {
|
||||
const normalizedResponse = CanvasWidgetsNormalizer.normalize(pageResponse)
|
||||
const payload = {
|
||||
pageWidgetId: normalizedResponse.result,
|
||||
widgets: normalizedResponse.entities.canvasWidgets
|
||||
try {
|
||||
const pageResponse: PageResponse = yield call(PageApi.fetchPage, pageRequest)
|
||||
if (pageRequest.renderMode === RenderModes.CANVAS) {
|
||||
const normalizedResponse = CanvasWidgetsNormalizer.normalize(pageResponse)
|
||||
console.log(normalizedResponse);
|
||||
const payload = {
|
||||
pageWidgetId: normalizedResponse.result,
|
||||
widgets: normalizedResponse.entities.canvasWidgets
|
||||
}
|
||||
yield put({ type: ActionTypes.UPDATE_CANVAS, payload })
|
||||
}
|
||||
yield put({ type: ActionTypes.UPDATE_CANVAS, payload })
|
||||
} catch(err) {
|
||||
//TODO(abhinav): REFACTOR THIS
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export function* watchFetchPage() {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
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, takeLeading, all, takeEvery, takeLatest } from "redux-saga/effects"
|
||||
|
||||
|
||||
export function* fetchWidgetCards(widgetCardsRequestAction: ReduxAction<WidgetCardsPaneRequest>) {
|
||||
try {
|
||||
const widgetCards: WidgetCardsPaneResponse = yield call(WidgetCardsPaneApi.fetchWidgetCards)
|
||||
yield put({ type: ActionTypes.SUCCESS_FETCHING_WIDGET_CARDS, widgetCards})
|
||||
yield put(successFetchingWidgetCards(widgetCards.cards))
|
||||
} catch(err) {
|
||||
yield put({ type: ActionTypes.ERROR_FETCHING_WIDGET_CARDS, err})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -99,6 +99,7 @@ class WidgetBuilderRegistry {
|
|||
return <RadioGroupWidget {...widgetData} />
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ abstract class BaseWidget<
|
|||
widgetState.height !== this.state.height ||
|
||||
widgetState.width !== this.state.width
|
||||
) {
|
||||
console.log("*** " + this.props.widgetId + " " + JSON.stringify(widgetState))
|
||||
// console.log("*** " + this.props.widgetId + " " + JSON.stringify(widgetState))
|
||||
this.setState(widgetState)
|
||||
}
|
||||
}
|
||||
|
|
@ -143,6 +143,11 @@ export interface IWidgetState {
|
|||
width: number
|
||||
}
|
||||
|
||||
export interface DraggableWidget {
|
||||
type: string,
|
||||
widget: IWidgetProps
|
||||
}
|
||||
|
||||
export interface IWidgetBuilder<T extends IWidgetProps> {
|
||||
buildWidget(data: T): JSX.Element
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ class ButtonWidget extends BaseWidget<IButtonWidgetProps, IWidgetState> {
|
|||
style={this.getPositionStyle()}
|
||||
widgetId={this.props.widgetId}
|
||||
key={this.props.widgetId}
|
||||
text={this.props.text}
|
||||
text={this.props.text || "Button"}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,10 @@
|
|||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
"esnext",
|
||||
// "es5",
|
||||
// "es2015.collection",
|
||||
// "es2015.iterable"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
|
|
@ -17,7 +20,9 @@
|
|||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "preserve"
|
||||
"jsx": "preserve",
|
||||
// "downlevelIteration": true,
|
||||
// "importHelpers": true
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
|
|
|
|||
|
|
@ -914,6 +914,11 @@
|
|||
"@svgr/core" "^2.4.1"
|
||||
loader-utils "^1.1.0"
|
||||
|
||||
"@types/asap@^2.0.0":
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/asap/-/asap-2.0.0.tgz#d529e9608c83499a62ae08c871c5e62271aa2963"
|
||||
integrity sha512-upIS0Gt9Mc8eEpCbYMZ1K8rhNosfKUtimNcINce+zLwJF5UpM3Vv7yz3S5l/1IX+DxTa8lTkUjqynvjRXyJzsg==
|
||||
|
||||
"@types/axios@^0.14.0":
|
||||
version "0.14.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/axios/-/axios-0.14.0.tgz#ec2300fbe7d7dddd7eb9d3abf87999964cafce46"
|
||||
|
|
@ -934,6 +939,19 @@
|
|||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/hoist-non-react-statics@^3.3.1":
|
||||
version "3.3.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
|
||||
integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
hoist-non-react-statics "^3.3.0"
|
||||
|
||||
"@types/invariant@^2.2.30":
|
||||
version "2.2.30"
|
||||
resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.30.tgz#20efa342807606ada5483731a8137cb1561e5fe9"
|
||||
integrity sha512-98fB+yo7imSD2F7PF7GIpELNgtLNgo5wjivu0W5V4jx+KVVJxo6p/qN4zdzSTBWy4/sN3pPyXwnhRSD28QX+ag==
|
||||
|
||||
"@types/jest@^23.3.13":
|
||||
version "23.3.14"
|
||||
resolved "https://registry.yarnpkg.com/@types/jest/-/jest-23.3.14.tgz#37daaf78069e7948520474c87b80092ea912520a"
|
||||
|
|
@ -1003,6 +1021,11 @@
|
|||
"@types/prop-types" "*"
|
||||
csstype "^2.2.0"
|
||||
|
||||
"@types/shallowequal@^1.1.1":
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/shallowequal/-/shallowequal-1.1.1.tgz#aad262bb3f2b1257d94c71d545268d592575c9b1"
|
||||
integrity sha512-Lhni3aX80zbpdxRuWhnuYPm8j8UQaa571lHP/xI4W+7BAFhSIhRReXnqjEgT/XzPoXZTJkCqstFMJ8CZTK6IlQ==
|
||||
|
||||
"@types/styled-components@^4.1.8":
|
||||
version "4.1.12"
|
||||
resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.1.12.tgz#62c19bd1aa37b1a904d36c179a0fec66c24ac99c"
|
||||
|
|
@ -2953,20 +2976,13 @@ dir-glob@^2.0.0:
|
|||
arrify "^1.0.1"
|
||||
path-type "^3.0.0"
|
||||
|
||||
dnd-core@^7.4.0:
|
||||
version "7.4.0"
|
||||
resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-7.4.0.tgz#ff12742de12422b396bc79d10b2644a34dabc846"
|
||||
dependencies:
|
||||
asap "^2.0.6"
|
||||
invariant "^2.2.4"
|
||||
lodash "^4.17.11"
|
||||
redux "^4.0.1"
|
||||
|
||||
dnd-core@^7.7.0:
|
||||
version "7.7.0"
|
||||
resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-7.7.0.tgz#3166aefc8c5b85ca4ade4ae836712a3108975fab"
|
||||
integrity sha512-+YqwflWEY1MEAEl2QiEiRaglYkCwIZryyQwximQGuTOm/ns7fS6Lg/i7OCkrtjM10D5FhArf/VUHIL4ZaRBK0g==
|
||||
dnd-core@^9.3.4:
|
||||
version "9.3.4"
|
||||
resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-9.3.4.tgz#56b5fdc165aa7d102506d3d5a08ec1fa789e0775"
|
||||
integrity sha512-sDzBiGXgpj9bQhs8gtPWFIKMg4WY8ywI9RI81rRAUWI4oNj/Sm/ztjS67UjCvMa+fWoQ2WNIV3U9oDqeBN0+2g==
|
||||
dependencies:
|
||||
"@types/asap" "^2.0.0"
|
||||
"@types/invariant" "^2.2.30"
|
||||
asap "^2.0.6"
|
||||
invariant "^2.2.4"
|
||||
redux "^4.0.1"
|
||||
|
|
@ -4615,7 +4631,7 @@ internal-ip@^3.0.1:
|
|||
default-gateway "^2.6.0"
|
||||
ipaddr.js "^1.5.2"
|
||||
|
||||
invariant@^2.1.0, invariant@^2.2.1, invariant@^2.2.2, invariant@^2.2.4:
|
||||
invariant@^2.2.1, invariant@^2.2.2, invariant@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
|
||||
dependencies:
|
||||
|
|
@ -7704,21 +7720,22 @@ react-dev-utils@^7.0.1:
|
|||
strip-ansi "4.0.0"
|
||||
text-table "0.2.0"
|
||||
|
||||
react-dnd-html5-backend@^7.4.0:
|
||||
version "7.7.0"
|
||||
resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-7.7.0.tgz#e2b8ea61a1bc34ba743b89cafcda6213b006c06a"
|
||||
integrity sha512-JgKmWOxqorFyfGPeWV+SAPhVGFe6+LrOR24jETE9rrYZU5hCppzwK9ujjS508kWibeDvbfEgi9j5qC2wB1/MoQ==
|
||||
react-dnd-html5-backend@^9.3.4:
|
||||
version "9.3.4"
|
||||
resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-9.3.4.tgz#5d1f5ac608206d7b294b7407b9e1a336589eedd7"
|
||||
integrity sha512-s+Xu0j7fHV9bLMSaOCuX76baQKcZfycAx0EzDmkxcFXPBiiFlI8l6rzwURdSJCjNcvLYXd8MLb4VkSNSq5ISZQ==
|
||||
dependencies:
|
||||
dnd-core "^7.7.0"
|
||||
dnd-core "^9.3.4"
|
||||
|
||||
react-dnd@^7.4.3:
|
||||
version "7.4.3"
|
||||
resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-7.4.3.tgz#797d29ea2791e828eec96ac1603fcdee010ee2b7"
|
||||
react-dnd@^9.3.4:
|
||||
version "9.3.4"
|
||||
resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-9.3.4.tgz#ebab4b5b430b72f3580c058a29298054e1f9d2b8"
|
||||
integrity sha512-UUtyoHFRrryMxVMEGYa3EdZIdibnys/ax7ZRs6CKpETHlnJQOFhHE3rpI+ManvKS0o3MFc1DZ+aoudAFtrOvFA==
|
||||
dependencies:
|
||||
dnd-core "^7.4.0"
|
||||
"@types/hoist-non-react-statics" "^3.3.1"
|
||||
"@types/shallowequal" "^1.1.1"
|
||||
dnd-core "^9.3.4"
|
||||
hoist-non-react-statics "^3.3.0"
|
||||
invariant "^2.1.0"
|
||||
lodash "^4.17.11"
|
||||
shallowequal "^1.1.0"
|
||||
|
||||
react-dom@^16.7.0:
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user