Skip to content

Commit c29c399

Browse files
andrerpenaandrerpena
authored
Merge pull request nubasedev#99 from Nes-si/to_pr
Code/preview switchers in toolbar
2 parents 2745666 + 1c6436d commit c29c399

File tree

10 files changed

+252
-41
lines changed

10 files changed

+252
-41
lines changed

‎src/components-layout/HorizontalLayout.tsx‎

Lines changed: 56 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,13 @@ import {Command} from "../types";
33
import {ReactMde} from "../ReactMde";
44
import {MdePreview, MdeEditor, MdeToolbar} from "../components";
55
import {LayoutProps} from "../types/LayoutProps";
6+
import {TAB_CODE, TAB_PREVIEW} from "./TabbedLayout";
67

78
export class HorizontalLayout extends React.Component<LayoutProps, {}> {
9+
state = {
10+
showCode: true,
11+
showPreview: true,
12+
};
813

914
editorRef: MdeEditor;
1015
previewRef: MdePreview;
@@ -23,31 +28,70 @@ export class HorizontalLayout extends React.Component<LayoutProps, {}> {
2328
onCommand(command);
2429
}
2530

31+
handleShowCode = () => {
32+
if (!this.state.showCode || this.state.showPreview)
33+
this.setState({showCode: !this.state.showCode});
34+
};
35+
36+
handleShowPreview = () => {
37+
if (!this.state.showPreview || this.state.showCode)
38+
this.setState({showPreview: !this.state.showPreview});
39+
};
40+
2641
/**
2742
* Renders react-mde
2843
* @returns
2944
* @memberOf ReactMde
3045
*/
3146
render() {
32-
3347
const { commands, mdeEditorState } = this.props;
3448

49+
let styleTabCode = "mde-tab";
50+
let styleTabPreview = "mde-tab";
51+
let stylePreview = null;
52+
if (this.state.showCode)
53+
styleTabCode += " mde-tab-activated";
54+
else
55+
stylePreview = "mde-preview-only";
56+
if (this.state.showPreview)
57+
styleTabPreview += " mde-tab-activated";
58+
3559
return (
3660
<div className="react-mde-horizontal-layout">
3761
<MdeToolbar
3862
commands={commands}
3963
onCommand={this.handleCommand}
40-
/>
41-
<div className="react-mde-content">
42-
<MdeEditor
43-
editorRef={(c) => this.editorRef = c}
44-
onChange={this.handleMdeStateChange}
45-
editorState={mdeEditorState}
46-
/>
47-
<MdePreview
48-
previewRef={(c) => this.previewRef = c}
49-
html={mdeEditorState ? mdeEditorState.html : ""}
50-
/>
64+
>
65+
<div className="mde-tabs">
66+
<button
67+
className={styleTabCode}
68+
onClick={this.handleShowCode}
69+
>
70+
Code
71+
</button>
72+
<button
73+
className={styleTabPreview}
74+
onClick={this.handleShowPreview}
75+
>
76+
Preview
77+
</button>
78+
</div>
79+
</MdeToolbar>
80+
<div className="mde-content">
81+
{this.state.showCode &&
82+
<MdeEditor
83+
editorRef={(c) => this.editorRef = c}
84+
onChange={this.handleMdeStateChange}
85+
editorState={mdeEditorState}
86+
/>
87+
}
88+
{this.state.showPreview &&
89+
<MdePreview
90+
className={stylePreview}
91+
previewRef={(c) => this.previewRef = c}
92+
html={mdeEditorState ? mdeEditorState.html : ""}
93+
/>
94+
}
5195
</div>
5296
</div>
5397
);

‎src/components-layout/TabbedLayout.tsx‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,16 +41,34 @@ export class TabbedLayout extends React.Component<LayoutProps, {}> {
4141

4242
const { commands, mdeEditorState } = this.props;
4343

44+
let styleTabCode = "mde-tab";
45+
let styleTabPreview = "mde-tab";
46+
switch (this.state.tab) {
47+
case TAB_CODE: styleTabCode += " mde-tab-activated"; break;
48+
case TAB_PREVIEW: styleTabPreview += " mde-tab-activated"; break;
49+
}
50+
4451
return (
4552
<div className="react-mde-tabbed-layout">
46-
<div>
47-
<button onClick={() => this.setState({tab: TAB_CODE})}>Code</button>
48-
<button onClick={() => this.setState({tab: TAB_PREVIEW})}>Preview</button>
49-
</div>
5053
<MdeToolbar
5154
commands={commands}
5255
onCommand={this.handleCommand}
53-
/>
56+
>
57+
<div className="mde-tabs">
58+
<button
59+
className={styleTabCode}
60+
onClick={() => this.setState({tab: TAB_CODE})}
61+
>
62+
Code
63+
</button>
64+
<button
65+
className={styleTabPreview}
66+
onClick={() => this.setState({tab: TAB_PREVIEW})}
67+
>
68+
Preview
69+
</button>
70+
</div>
71+
</MdeToolbar>
5472
{
5573
this.state.tab === TAB_CODE ?
5674
<MdeEditor

‎src/components-layout/VerticalLayout.tsx‎

Lines changed: 58 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ import {MdePreview, MdeEditor, MdeToolbar} from "../components";
55
import {LayoutProps} from "../types/LayoutProps";
66

77
export class VerticalLayout extends React.Component<LayoutProps, {}> {
8+
state = {
9+
showCode: true,
10+
showPreview: true,
11+
};
812

913
editorRef: MdeEditor;
1014
previewRef: MdePreview;
@@ -23,6 +27,16 @@ export class VerticalLayout extends React.Component<LayoutProps, {}> {
2327
onCommand(command);
2428
}
2529

30+
handleShowCode = () => {
31+
if (!this.state.showCode || this.state.showPreview)
32+
this.setState({showCode: !this.state.showCode});
33+
}
34+
35+
handleShowPreview = () => {
36+
if (!this.state.showPreview || this.state.showCode)
37+
this.setState({showPreview: !this.state.showPreview});
38+
}
39+
2640
/**
2741
* Renders react-mde
2842
* @returns
@@ -32,22 +46,56 @@ export class VerticalLayout extends React.Component<LayoutProps, {}> {
3246

3347
const { commands, mdeEditorState } = this.props;
3448

49+
let styleTabCode = "mde-tab";
50+
let styleTabPreview = "mde-tab";
51+
let stylePreview = null;
52+
let styleCode = null;
53+
if (this.state.showCode)
54+
styleTabCode += " mde-tab-activated";
55+
else
56+
stylePreview = "mde-preview-only";
57+
if (this.state.showPreview)
58+
styleTabPreview += " mde-tab-activated";
59+
else
60+
styleCode = "mde-text-only";
61+
3562
return (
3663
<div className="react-mde-vertical-layout">
3764
<MdeToolbar
3865
commands={commands}
3966
onCommand={this.handleCommand}
40-
/>
67+
>
68+
<div className="mde-tabs">
69+
<button
70+
className={styleTabCode}
71+
onClick={this.handleShowCode}
72+
>
73+
Code
74+
</button>
75+
<button
76+
className={styleTabPreview}
77+
onClick={this.handleShowPreview}
78+
>
79+
Preview
80+
</button>
81+
</div>
82+
</MdeToolbar>
4183
<div className="react-mde-content">
42-
<MdeEditor
43-
editorRef={(c) => this.editorRef = c}
44-
onChange={this.handleMdeStateChange}
45-
editorState={mdeEditorState}
46-
/>
47-
<MdePreview
48-
previewRef={(c) => this.previewRef = c}
49-
html={mdeEditorState ? mdeEditorState.html : ""}
50-
/>
84+
{this.state.showCode &&
85+
<MdeEditor
86+
className={styleCode}
87+
editorRef={(c) => this.editorRef = c}
88+
onChange={this.handleMdeStateChange}
89+
editorState={mdeEditorState}
90+
/>
91+
}
92+
{this.state.showPreview &&
93+
<MdePreview
94+
className={stylePreview}
95+
previewRef={(c) => this.previewRef = c}
96+
html={mdeEditorState ? mdeEditorState.html : ""}
97+
/>
98+
}
5199
</div>
52100
</div>
53101
);

‎src/components/MdeEditor.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {MdeState} from "../types";
33
import {Editor, EditorState} from "draft-js";
44

55
export interface MdeEditorProps {
6+
className?: string,
67
onChange: (value: EditorState) => void;
78
editorRef?: (ref: MdeEditor) => void;
89
editorState: MdeState;
@@ -17,9 +18,9 @@ export class MdeEditor extends React.Component<MdeEditorProps, {}> {
1718
}
1819

1920
render() {
20-
const {editorState: {draftEditorState}} = this.props;
21+
const {editorState: {draftEditorState}, className} = this.props;
2122
return (
22-
<div className="mde-text">
23+
<div className={`mde-text ${className || ""}`}>
2324
<Editor
2425
ref={(editor) => this.editorRef = editor}
2526
stripPastedStyles={true}

‎src/components/MdePreview.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from "react";
22

33
export interface ReactMdePreviewProps {
4+
className?: string,
45
previewRef?: (ref: MdePreview) => void;
56
html: string;
67
}
@@ -12,9 +13,9 @@ export class MdePreview extends React.Component<ReactMdePreviewProps, MdePreview
1213
previewRef: HTMLDivElement;
1314

1415
render() {
15-
const {html} = this.props;
16+
const {html, className} = this.props;
1617
return (
17-
<div className="mde-preview">
18+
<div className={`mde-preview ${className || ""}`}>
1819
<div
1920
className="mde-preview-content"
2021
dangerouslySetInnerHTML={{__html: html}}

‎src/components/MdeToolbar.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ export interface MdeToolbarProps {
99
onCommand: (command: Command) => void;
1010
}
1111

12-
export const MdeToolbar: React.SFC<MdeToolbarProps> = ({commands, onCommand}) => {
13-
if (!commands || commands.length === 0) {
12+
export const MdeToolbar: React.SFC<MdeToolbarProps> = ({children, commands, onCommand}) => {
13+
if ((!commands || commands.length === 0) && !children) {
1414
return null;
1515
}
1616
return (
@@ -39,7 +39,11 @@ export const MdeToolbar: React.SFC<MdeToolbarProps> = ({commands, onCommand}) =>
3939
/>;
4040
})
4141
}
42-
</MdeToolbarButtonGroup>))}
42+
</MdeToolbarButtonGroup>))
43+
}
44+
<div className="mde-toolbar-children">
45+
{children}
46+
</div>
4347
</div>
4448
);
4549
};

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

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,45 @@
99
border-bottom: 1px solid $mde-border-color;
1010
}
1111

12-
.react-mde-content {
12+
.mde-tabs {
13+
display: flex;
14+
align-items: stretch;
15+
16+
.mde-tab {
17+
border: none;
18+
border-left: 1px solid $mde-border-color;
19+
padding: 10px;
20+
background: none;
21+
}
22+
23+
.mde-tab:hover {
24+
cursor: pointer;
25+
}
26+
27+
.mde-tab-activated {
28+
background: white;
29+
}
30+
}
31+
32+
.mde-content {
1333
display: flex;
1434
height: 100%;
1535

1636
.mde-text {
17-
width: 50%;
37+
min-width: 50%;
1838
overflow-y: auto;
1939
border-radius: 0px;
2040
}
2141

2242
.mde-preview {
23-
width: 50%;
43+
min-width: 50%;
2444
padding: 10px;
2545
border-left: 1px solid $mde-border-color;
2646
overflow-y: auto;
2747
}
48+
49+
.mde-preview-only {
50+
border-left: none;
51+
}
2852
}
2953
}

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,33 @@
99
border-bottom: 1px solid $mde-border-color;
1010
}
1111

12+
.mde-tabs {
13+
display: flex;
14+
align-items: flex-end;
15+
16+
.mde-tab {
17+
position: relative;
18+
top: 1px;
19+
border: 1px solid $mde-toolbar-color;
20+
border-bottom: none;
21+
border-top-left-radius: $mde-border-radius;
22+
border-top-right-radius: $mde-border-radius;
23+
margin-right: 10px;
24+
padding: 10px;
25+
background: none;
26+
}
27+
28+
.mde-tab:hover {
29+
border-color: $mde-border-color;
30+
cursor: pointer;
31+
}
32+
33+
.mde-tab-activated {
34+
border-color: $mde-border-color;
35+
background: white;
36+
}
37+
}
38+
1239
.mde-text {
1340
overflow-y: auto;
1441
}

0 commit comments

Comments
 (0)