Merge pull request nubasedev#98 from Nes-si/to_pr

Adding Tabbed layout

Author: andrerpena

src/LayoutMap.tsx

@@ -1,10 +1,11 @@
 import * as React from "react";
-import {VerticalLayout, NoPreviewLayout, HorizontalLayout} from "./components-layout";
+import {VerticalLayout, NoPreviewLayout, HorizontalLayout, TabbedLayout} from "./components-layout";
 
 class LayoutMap {
     vertical: typeof VerticalLayout = VerticalLayout;
     noPreview: typeof NoPreviewLayout = NoPreviewLayout;
     horizontal: typeof HorizontalLayout = HorizontalLayout;
+    tabbed: typeof TabbedLayout = TabbedLayout;
 }
 
 const layoutMap = new LayoutMap();

src/components-layout/TabbedLayout.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import {Command} from "../types";
+import {ReactMde} from "../ReactMde";
+import {MdePreview, MdeEditor, MdeToolbar} from "../components";
+import {LayoutProps} from "../types/LayoutProps";
+
+
+export const TAB_CODE: string = "TAB_CODE";
+export const TAB_PREVIEW: string = "TAB_PREVIEW";
+
+export class TabbedLayout extends React.Component<LayoutProps, {}> {
+    state = {
+        tab: TAB_CODE,
+    };
+
+    editorRef: MdeEditor;
+    previewRef: MdePreview;
+
+
+
+    /**
+     * Handler for the textArea value change
+     * @memberOf ReactMde
+     */
+    handleMdeStateChange = (value) => {
+        const {onChange} = this.props;
+        onChange(value);
+    }
+
+    handleCommand = (command: Command) => {
+        const { onCommand } = this.props;
+        onCommand(command);
+    }
+
+    /**
+     * Renders react-mde
+     * @returns
+     * @memberOf ReactMde
+     */
+    render() {
+
+        const { commands, mdeEditorState } = this.props;
+
+        return (
+            <div className="react-mde-tabbed-layout">
+                <div>
+                    <button onClick={() => this.setState({tab: TAB_CODE})}>Code</button>
+                    <button onClick={() => this.setState({tab: TAB_PREVIEW})}>Preview</button>
+                </div>
+                <MdeToolbar
+                    commands={commands}
+                    onCommand={this.handleCommand}
+                />
+                {
+                    this.state.tab === TAB_CODE ?
+                        <MdeEditor
+                            editorRef={(c) => this.editorRef = c}
+                            onChange={this.handleMdeStateChange}
+                            editorState={mdeEditorState}
+                        />
+                    :
+                        < MdePreview
+                            previewRef={(c) => this.previewRef = c}
+                            html={mdeEditorState ? mdeEditorState.html : ""}
+                        />
+                }
+            </div>
+        );
+    }
+}

src/components-layout/index.tsx

@@ -1,3 +1,4 @@
 export * from "./VerticalLayout";
 export * from "./NoPreviewLayout";
 export * from "./HorizontalLayout";
+export * from "./TabbedLayout";

src/styles/react-mde-all.scss

@@ -6,3 +6,4 @@
 @import "react-mde-vertical-layout";
 @import "react-mde-no-preview-layout";
 @import "react-mde-horizontal-layout";
+@import "react-mde-tabbed-layout";

src/styles/react-mde-tabbed-layout.scss

@@ -0,0 +1,19 @@
+@import "variables";
+
+.react-mde-tabbed-layout {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .mde-header {
+        border-bottom: 1px solid $mde-border-color;
+    }
+
+    .mde-text {
+        overflow-y: auto;
+    }
+
+    .mde-preview {
+        overflow-y: auto;
+    }
+}

src/styles/react-mde-toolbar.scss

@@ -5,6 +5,7 @@
     outline: 0;
   }
   padding: $mde-toolbar-padding;
+  background: $mde-toolbar-color;
   ul.mde-header-group {
     display: inline-block;
     margin: 0 1rem 0 0;

src/styles/variables.scss

@@ -1,6 +1,7 @@
 $mde-border-radius:                 2px !default;
 $mde-border-color:                  #c8ccd0 !default;
 $mde-button-color:                  #242729 !default;
+$mde-toolbar-color:                 #f9f9f9 !default;
 $mde-toolbar-padding:               10px !default;
 $mde-editor-min-height:             200px !default;
 $mde-editor-padding:                10px !default;