1
1
import React , { Component } from 'react' ;
2
2
import T from 'prop-types' ;
3
3
import { Tab , Tabs , TabList , TabPanel } from 'react-tabs' ; // eslint-disable-line
4
+ import { LiveProvider , LiveEditor , LivePreview , LiveError } from 'react-live' ;
4
5
import classNames from 'classnames' ;
5
6
6
- let ReactLive ;
7
-
8
7
const scope = { Tabs, Tab, TabList, TabPanel } ;
9
8
10
9
export default class ExampleItem extends Component {
11
10
state = {
12
11
editorOpen : false ,
13
- liveLoaded : false ,
14
12
} ;
15
13
16
- constructor ( props ) {
17
- super ( props ) ;
18
-
19
- import ( 'react-live' ) . then ( Live => {
20
- ReactLive = Live ;
21
- this . setState ( { liveLoaded : true } ) ;
22
- } ) ;
23
- }
24
-
25
14
toggleCheckbox ( { target : { name, checked } } ) {
26
15
this . setState ( {
27
16
[ name ] : checked ,
@@ -40,34 +29,11 @@ export default class ExampleItem extends Component {
40
29
return < div className = "hint" > { this . props . hint } </ div > ;
41
30
}
42
31
43
- renderLiveEditor ( ) {
44
- if ( ! this . state . liveLoaded ) return null ;
45
-
32
+ render ( ) {
46
33
const { editorOpen } = this . state ;
47
34
const editorClassNames = classNames ( 'live-editor' , {
48
35
'live-editor--visible' : editorOpen ,
49
36
} ) ;
50
-
51
- return (
52
- < ReactLive . LiveProvider
53
- mountStylesheet = { false }
54
- scope = { scope }
55
- code = { this . props . code }
56
- noInline
57
- >
58
- < ReactLive . LiveError />
59
- < div className = "live-preview" >
60
- < div className = { editorClassNames } >
61
- < ReactLive . LiveEditor ignoreTabKey />
62
- </ div >
63
- < ReactLive . LivePreview />
64
- </ div >
65
- </ ReactLive . LiveProvider >
66
- ) ;
67
- }
68
-
69
- render ( ) {
70
- const { editorOpen } = this . state ;
71
37
const formId = `editorOpen${ this . props . label . replace ( ' ' , '_' ) } ` ;
72
38
73
39
return (
@@ -86,7 +52,20 @@ export default class ExampleItem extends Component {
86
52
</ label >
87
53
</ h3 >
88
54
{ this . renderHint ( ) }
89
- { this . renderLiveEditor ( ) }
55
+ < LiveProvider
56
+ mountStylesheet = { false }
57
+ scope = { scope }
58
+ code = { this . props . code }
59
+ noInline
60
+ >
61
+ < LiveError />
62
+ < div className = "live-preview" >
63
+ < div className = { editorClassNames } >
64
+ < LiveEditor ignoreTabKey />
65
+ </ div >
66
+ < LivePreview />
67
+ </ div >
68
+ </ LiveProvider >
90
69
</ div >
91
70
) ;
92
71
}
0 commit comments