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

Adding horizontal layout

Author: andrerpena

demo/client.tsx

@@ -7,6 +7,7 @@ import "../node_modules/normalize.css/normalize.css";
 import "../node_modules/draft-js/dist/Draft.css";
 import "../src/styles/react-mde-all.scss";
 import "./styles/demo.scss";
+import "./styles/variables.scss";
 
 render(
     <App />,

demo/styles/demo.scss

@@ -1,13 +1,16 @@
 @import 'variables.scss';
 
+* {
+    box-sizing: border-box;
+}
+
 body {
     font-size: 14px;
     font-family: sans-serif;
 }
 
 .container {
-    max-width: 600px;
-    @media screen and (min-width: 768px) {
-        margin: 50px auto;
-    }
+    width: 100%;
+    height: 600px;
+    padding: 10px;
 }

src/LayoutMap.tsx

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

src/components-layout/HorizontalLayout.tsx

@@ -0,0 +1,55 @@
+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 class HorizontalLayout extends React.Component<LayoutProps, {}> {
+
+    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-horizontal-layout">
+                <MdeToolbar
+                    commands={commands}
+                    onCommand={this.handleCommand}
+                />
+                <div className="react-mde-content">
+                    <MdeEditor
+                        editorRef={(c) => this.editorRef = c}
+                        onChange={this.handleMdeStateChange}
+                        editorState={mdeEditorState}
+                    />
+                    <MdePreview
+                        previewRef={(c) => this.previewRef = c}
+                        html={mdeEditorState ? mdeEditorState.html : ""}
+                    />
+                </div>
+            </div>
+        );
+    }
+}

src/components-layout/VerticalLayout.tsx

@@ -33,20 +33,22 @@ export class VerticalLayout extends React.Component<LayoutProps, {}> {
         const { commands, mdeEditorState } = this.props;
 
         return (
-            <div className="vertical-layout">
+            <div className="react-mde-vertical-layout">
                 <MdeToolbar
                     commands={commands}
                     onCommand={this.handleCommand}
                 />
-                <MdeEditor
-                    editorRef={(c) => this.editorRef = c}
-                    onChange={this.handleMdeStateChange}
-                    editorState={mdeEditorState}
-                />
-                <MdePreview
-                    previewRef={(c) => this.previewRef = c}
-                    html={mdeEditorState ? mdeEditorState.html : ""}
-                />
+                <div className="react-mde-content">
+                    <MdeEditor
+                        editorRef={(c) => this.editorRef = c}
+                        onChange={this.handleMdeStateChange}
+                        editorState={mdeEditorState}
+                    />
+                    <MdePreview
+                        previewRef={(c) => this.previewRef = c}
+                        html={mdeEditorState ? mdeEditorState.html : ""}
+                    />
+                </div>
             </div>
         );
     }

src/components-layout/index.tsx

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

src/styles/react-mde-all.scss

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

src/styles/react-mde-editor.scss

@@ -1,15 +1,10 @@
 @import "variables";
 
 .mde-text {
-  border-width: 1px 0 1px 0;
-  border-style: solid;
-  border-color: $mde-border-color;
+
   .public-DraftEditor-content {
-    box-sizing: border-box;
     width: 100%;
     min-height: $mde-editor-min-height;
-    max-height: $mde-editor-max-height;
     padding: $mde-editor-padding;
-    overflow-y: scroll;
   }
 }

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

@@ -0,0 +1,29 @@
+@import "variables";
+
+.react-mde-horizontal-layout {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .mde-header {
+        border-bottom: 1px solid $mde-border-color;
+    }
+
+    .react-mde-content {
+        display: flex;
+        height: 100%;
+
+        .mde-text {
+            width: 50%;
+            overflow-y: auto;
+            border-radius: 0px;
+        }
+
+        .mde-preview {
+            width: 50%;
+            padding: 10px;
+            border-left: 1px solid $mde-border-color;
+            overflow-y: auto;
+        }
+    }
+}