added child prop generic to container widgets

This commit is contained in:
Nikhil Nandgopal 2019-02-10 22:09:09 +05:30
parent b4249df653
commit f7d310bcda
6 changed files with 18 additions and 15 deletions

View File

@ -5,7 +5,7 @@ import styled from "../constants/DefaultTheme"
const Container = styled.div` const Container = styled.div`
background: ${props => props.theme.primaryColor}; background: ${props => props.theme.primaryColor};
color: "black"; color: ${props => props.theme.primaryColor};
` `
class ContainerComponent extends BaseComponent<IContainerProps> { class ContainerComponent extends BaseComponent<IContainerProps> {

View File

@ -4,7 +4,7 @@ import { AppState } from "../../reducers"
import WidgetFactory from "../../utils/WidgetFactory" import WidgetFactory from "../../utils/WidgetFactory"
import { CanvasReduxState } from "../../reducers/uiReducers/canvasReducer" import { CanvasReduxState } from "../../reducers/uiReducers/canvasReducer"
class Canvas extends Component<{ canvas: CanvasReduxState }> { class Canvas extends Component<{ canvas: CanvasReduxState<any> }> {
render() { render() {
const canvasWidgetData = this.props.canvas.canvasWidgetProps const canvasWidgetData = this.props.canvas.canvasWidgetProps
if (canvasWidgetData) { if (canvasWidgetData) {

View File

@ -13,7 +13,7 @@ export default appReducer
export interface AppState { export interface AppState {
ui: { ui: {
canvas: CanvasReduxState canvas: CanvasReduxState<any>
} }
entities: { entities: {
canvasWidgets: CanvasWidgetsReduxState canvasWidgets: CanvasWidgetsReduxState

View File

@ -5,8 +5,10 @@ import {
ReduxAction ReduxAction
} from "../../constants/ActionConstants" } from "../../constants/ActionConstants"
import { IContainerWidgetProps } from "../../widgets/ContainerWidget" import { IContainerWidgetProps } from "../../widgets/ContainerWidget"
import { IWidgetProps } from "../../widgets/BaseWidget";
import { ITextWidgetProps } from "../../widgets/TextWidget";
const initialState: CanvasReduxState = { const initialState: CanvasReduxState<any> = {
canvasWidgetProps: { canvasWidgetProps: {
widgetId: "0", widgetId: "0",
widgetType: "CONTAINER_WIDGET", widgetType: "CONTAINER_WIDGET",
@ -19,7 +21,8 @@ const initialState: CanvasReduxState = {
bottomRow: 5, bottomRow: 5,
rightColumn: 5, rightColumn: 5,
parentColumnSpace: 100, parentColumnSpace: 100,
parentRowSpace: 100 parentRowSpace: 100,
text: "whaat"
} }
], ],
topRow: 0, topRow: 0,
@ -33,15 +36,15 @@ const initialState: CanvasReduxState = {
const canvasReducer = createReducer(initialState, { const canvasReducer = createReducer(initialState, {
[ActionTypes.LOAD_CANVAS]: ( [ActionTypes.LOAD_CANVAS]: (
state: CanvasReduxState, state: CanvasReduxState<any>,
action: ReduxAction<LoadCanvasPayload> action: ReduxAction<LoadCanvasPayload>
) => { ) => {
return { containerWidget: action.payload } return { containerWidget: action.payload }
} }
}) })
export interface CanvasReduxState { export interface CanvasReduxState<T extends IWidgetProps> {
canvasWidgetProps?: IContainerWidgetProps canvasWidgetProps?: IContainerWidgetProps<any>
} }
export default canvasReducer export default canvasReducer

View File

@ -1,4 +1,4 @@
import BaseWidget from "../widgets/BaseWidget" import BaseWidget, { IWidgetProps } from "../widgets/BaseWidget"
import ContainerWidget, { import ContainerWidget, {
IContainerWidgetProps IContainerWidgetProps
} from "../widgets/ContainerWidget" } from "../widgets/ContainerWidget"
@ -14,8 +14,8 @@ class WidgetBuilderRegistry {
WidgetFactory.registerWidgetBuilder("CONTAINER_WIDGET", { WidgetFactory.registerWidgetBuilder("CONTAINER_WIDGET", {
buildWidget( buildWidget(
widgetData: IContainerWidgetProps widgetData: IContainerWidgetProps<IWidgetProps>
): BaseWidget<IContainerWidgetProps, IContainerProps> { ): BaseWidget<IContainerWidgetProps<IWidgetProps>, IContainerProps> {
return new ContainerWidget(widgetData) return new ContainerWidget(widgetData)
} }
}) })

View File

@ -7,10 +7,10 @@ import { ContainerOrientation, WidgetType } from "../constants/WidgetConstants"
import WidgetFactory from "../utils/WidgetFactory" import WidgetFactory from "../utils/WidgetFactory"
class ContainerWidget extends BaseWidget< class ContainerWidget extends BaseWidget<
IContainerWidgetProps, IContainerWidgetProps<IWidgetProps>,
IContainerProps IContainerProps
> { > {
constructor(widgetProps: IContainerWidgetProps) { constructor(widgetProps: IContainerWidgetProps<IWidgetProps>) {
super(widgetProps) super(widgetProps)
this.widgetData.snapColumns = 13 this.widgetData.snapColumns = 13
this.widgetData.snapColumnSpace = this.width / this.widgetData.snapColumns this.widgetData.snapColumnSpace = this.width / this.widgetData.snapColumns
@ -53,8 +53,8 @@ class ContainerWidget extends BaseWidget<
} }
} }
export interface IContainerWidgetProps extends IWidgetProps { export interface IContainerWidgetProps<T extends IWidgetProps> extends IWidgetProps {
children?: IWidgetProps[] children?: T[]
snapColumnSpace?: number snapColumnSpace?: number
snapRowSpace?: number snapRowSpace?: number
snapColumns?: number snapColumns?: number