From 0ae3a3ccb5fab12c3e2edef778dbe96161f21b15 Mon Sep 17 00:00:00 2001 From: mcc12 Date: Wed, 21 Apr 2021 17:06:54 +0100 Subject: [PATCH] refactor column layout --- src/api/Bolt.tsx | 40 +++++++++------ src/components/__stories__/BoltGUI.stories.js | 2 - .../inputs/layouts/ColumnLayout.tsx | 50 ++++++++++++------- src/redux/reducers/componentReducers.ts | 2 +- 4 files changed, 58 insertions(+), 36 deletions(-) diff --git a/src/api/Bolt.tsx b/src/api/Bolt.tsx index 9aecc6e..8d19ad9 100644 --- a/src/api/Bolt.tsx +++ b/src/api/Bolt.tsx @@ -12,6 +12,7 @@ import store from '../redux/store'; import { addPanel, clearPanel, + removePanel, setActivePanel, addWindow, addComponent, @@ -19,7 +20,8 @@ import { updateComponent, } from '../redux'; import { defaultAttributes } from '../components/Themeable'; -import { ButtonInputComponent, Label } from '..'; +import { ButtonInputComponent, Label, RangeInputComponent } from '..'; +import { CollapsibleFolderComponent, ColumnLayout, TextInputComponent } from '../components'; export class BoltClass { @@ -86,21 +88,14 @@ export class BoltClass store.dispatch(setActivePanel(id)); } - // TODO: implement an addPanel() to allow for a panel to be added back after being removed - /** * Removes a panel from a window * @param panel - panel to remove */ - // public removePanel(panel: PanelController): void - // { - // if (!this._panels.includes(panel)) - // { - // throw new Error('[Bolt] Cannot remove panel that doesn\'t exist'); - // } - - // panel._remove(); - // } + public removePanel(id: string, parentId: string): void + { + store.dispatch(removePanel(id, parentId)); + } /** * Removes all panels from there windows @@ -170,19 +165,32 @@ export class BoltClass * Creates a new component * @param options - options for the window */ - public createComponent(type: string, id: string, panelId: string, inputData: any): any + public createComponent(type: string, id: string, parentId: string, inputData: any): any { switch (type) { case 'label': { - store.dispatch(addComponent({ id, component: Label, inputData }, panelId)); + store.dispatch(addComponent({ id, component: Label, inputData }, parentId)); break; } case 'button': { - store.dispatch(addComponent({ id, component: ButtonInputComponent, inputData }, panelId)); + store.dispatch(addComponent({ id, component: ButtonInputComponent, inputData }, parentId)); + break; + } + case 'range': { + store.dispatch(addComponent({ id, component: RangeInputComponent as any, inputData }, parentId)); + break; + } + case 'text': { + store.dispatch(addComponent({ id, component: TextInputComponent, inputData }, parentId)); + break; + } + case 'columnLayout': { + store.dispatch(addComponent({ id, component: ColumnLayout, inputData }, parentId)); break; } - case 'xyr': { + case 'collapsibleFolder': { + store.dispatch(addComponent({ id, component: CollapsibleFolderComponent, inputData }, parentId)); break; } case 'custom': { diff --git a/src/components/__stories__/BoltGUI.stories.js b/src/components/__stories__/BoltGUI.stories.js index 1ea830c..746d029 100644 --- a/src/components/__stories__/BoltGUI.stories.js +++ b/src/components/__stories__/BoltGUI.stories.js @@ -11,8 +11,6 @@ import { storiesOf } from '@storybook/react'; const store = createStore(rootReducer); -// TODO: this is broken, figure out why - store.dispatch(addWindow({ id: 'window1', expanded: true, diff --git a/src/components/inputs/layouts/ColumnLayout.tsx b/src/components/inputs/layouts/ColumnLayout.tsx index 772a8ac..2d8f993 100644 --- a/src/components/inputs/layouts/ColumnLayout.tsx +++ b/src/components/inputs/layouts/ColumnLayout.tsx @@ -1,15 +1,24 @@ -import React, { FunctionComponent, ReactNode } from 'react'; - +import React, { FunctionComponent } from 'react'; +import { connect, ConnectedProps } from 'react-redux'; import styled from 'styled-components'; +import { ApplicationStore } from '../../../types'; +import { getComponentsByIds } from '../../../redux'; + +const mapStateToProps = (store: ApplicationStore) => ({ store }); +const mapDispatch = { getComponentsByIds }; +const connector = connect(mapStateToProps, mapDispatch); -export interface ColumnLayoutProps +type ColumnLayoutReduxProps = ConnectedProps; +export interface ColumnLayoutProps extends ColumnLayoutReduxProps { - children: ReactNode; - label?: string; - labelColour?: string; - labelFontSize?: string; - leftColumnWidth?: string; - rightColumnWidth?: string; + inputData: { + label?: string; + labelColour?: string; + labelFontSize?: string; + leftColumnWidth?: string; + rightColumnWidth?: string; + childIDs: string[]; + }; } interface LabelProps @@ -42,30 +51,37 @@ const LabelText = styled.p` font-size: ${(props: LabelProps): string => (props.labelFontSize ? props.labelFontSize : '11px')}; `; -export const ColumnLayout: FunctionComponent = (props: ColumnLayoutProps) => +const UnconnectedColumnLayout: FunctionComponent = (props: ColumnLayoutProps) => { - const leftColWidth = props.leftColumnWidth ? props.leftColumnWidth : '30%'; - let rightColWidth = props.label ? '70%' : '100%'; + const { getComponentsByIds, store } = props; + const { childIDs, leftColumnWidth, rightColumnWidth, label } = props.inputData; + const childComponents = getComponentsByIds(store, childIDs).payload || []; + const leftColWidth = leftColumnWidth ? leftColumnWidth : '30%'; + let rightColWidth = label ? '70%' : '100%'; - if (props.rightColumnWidth) + if (rightColumnWidth) { - rightColWidth = props.rightColumnWidth; + rightColWidth = rightColumnWidth; } return ( { - props.label + label && - {props.label} + {label} } { - props.children + childComponents.map((pair) => + ( + + )) } ); }; +export const ColumnLayout = connector(UnconnectedColumnLayout); diff --git a/src/redux/reducers/componentReducers.ts b/src/redux/reducers/componentReducers.ts index d290bd5..7a475fc 100644 --- a/src/redux/reducers/componentReducers.ts +++ b/src/redux/reducers/componentReducers.ts @@ -60,7 +60,7 @@ export function addComponentReducer(store: ReduxStore, action: AddComponentActio }; } - console.error(`Could not add ${component.id} - parent not found`); + console.error(`Could not add ${component.id} - parent ${parentID} not found`); return store; }