refactor column layout

src/api/Bolt.tsx

@@ -12,14 +12,16 @@ import store from '../redux/store';
 import {
     addPanel,
     clearPanel,
+    removePanel,
     setActivePanel,
     addWindow,
     addComponent,
     removeComponent,
     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': {

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,

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<typeof connector>;
+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<LabelProps>`
     font-size: ${(props: LabelProps): string => (props.labelFontSize ? props.labelFontSize : '11px')};
 `;
 
-export const ColumnLayout: FunctionComponent<ColumnLayoutProps> = (props: ColumnLayoutProps) =>
+const UnconnectedColumnLayout: FunctionComponent<ColumnLayoutProps> = (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 (
         <Container>
             {
-                props.label
+                label
                 && <Column width={leftColWidth}>
-                    <LabelText>{props.label}</LabelText>
+                    <LabelText>{label}</LabelText>
                 </Column>
             }
             <Column width={rightColWidth}>
                 {
-                    props.children
+                    childComponents.map((pair) =>
+                        (
+                            <pair.component key={pair.id} inputData={pair.inputData}/>
+                        ))
                 }
             </Column>
         </Container>
     );
 };
 
+export const ColumnLayout = connector(UnconnectedColumnLayout);

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;
 }