Merge pull request #198 from jacargentina/feature-disable-preview

feature #197: added "disablePreview" prop
andrerpena · Dec 6, 2019 · d2e8e17 · d2e8e17
2 parents 26f099e + 790b33c
commit d2e8e17
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 18 deletions.
diff --git a/docs-md/5-readme.md b/docs-md/5-readme.md
@@ -136,6 +136,7 @@ though on the first call, *editorState* is supposed to be something like `{markd
 options. It is recommended to [inspect the layouts source code](https://github.com/andrerpena/react-mde/tree/master/src/components-layout) to see what options can be passed to each
 while the documentation is not complete. 
 -- **readOnly?: boolean**: Flag to render the editor in read-only mode.
+-- **disablePreview?: boolean**: Flag to disable preview, which also disables the tab selection. Useful when handling preview generation externally.
 
 ## Styling
 

diff --git a/src/components/MdeToolbar.tsx b/src/components/MdeToolbar.tsx
@@ -13,6 +13,7 @@ export interface MdeToolbarProps {
   onCommand: (command: Command) => void;
   onTabChange: (tab: Tab) => void;
   readOnly: boolean;
+  disablePreview: boolean;
   tab: Tab,
   l18n: L18n
 }
@@ -26,28 +27,29 @@ export class MdeToolbar extends React.Component<MdeToolbarProps> {
 
   render() {
     const { l18n } = this.props;
-    const { getIcon, children, commands, onCommand, readOnly } = this.props;
+    const { getIcon, children, commands, onCommand, readOnly, disablePreview } = this.props;
     if ((!commands || commands.length === 0) && !children) {
       return null;
     }
     return (
       <div className="mde-header">
-        <div className="mde-tabs">
-          <button
-            type="button"
-            className={classNames({ "selected": this.props.tab === "write" })}
-            onClick={() => this.handleTabChange("write")}
-          >
-            {l18n.write}
-          </button>
-          <button
-            type="button"
-            className={classNames({ "selected": this.props.tab === "preview" })}
-            onClick={() => this.handleTabChange("preview")}
-          >
-            {l18n.preview}
-          </button>
-        </div>
+        {!disablePreview && <div className="mde-tabs">
+            <button
+              type="button"
+              className={classNames({ "selected": this.props.tab === "write" })}
+              onClick={() => this.handleTabChange("write")}
+            >
+              {l18n.write}
+            </button>
+            <button
+              type="button"
+              className={classNames({ "selected": this.props.tab === "preview" })}
+              onClick={() => this.handleTabChange("preview")}
+            >
+              {l18n.preview}
+            </button>
+          </div>
+        }
         {
           commands.map((commandGroup: CommandGroup, i: number) => (
             <MdeToolbarButtonGroup key={i} hidden={this.props.tab === "preview"}>

diff --git a/src/components/ReactMde.tsx b/src/components/ReactMde.tsx
@@ -29,6 +29,7 @@ export interface ReactMdeProps {
   emptyPreviewHtml?: string;
   loadingPreview?: React.ReactNode;
   readOnly?: boolean;
+  disablePreview?: boolean;
   textAreaProps?: Partial<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>>;
   l18n?: L18n;
 }
@@ -61,7 +62,8 @@ export class ReactMde extends React.Component<ReactMdeProps, ReactMdeState> {
     minEditorHeight: 200,
     maxEditorHeight: 500,
     minPreviewHeight: 200,
-    selectedTab: "write"
+    selectedTab: "write",
+    disablePreview: false,
   };
 
   constructor(props: ReactMdeProps) {
@@ -130,6 +132,7 @@ export class ReactMde extends React.Component<ReactMdeProps, ReactMdeState> {
       loadingPreview,
       emptyPreviewHtml,
       readOnly,
+      disablePreview,
       value,
       l18n,
       minPreviewHeight,
@@ -147,6 +150,7 @@ export class ReactMde extends React.Component<ReactMdeProps, ReactMdeState> {
           onTabChange={this.handleTabChange}
           tab={selectedTab}
           readOnly={readOnly}
+          disablePreview={disablePreview}
           l18n={l18n}
         />
         {