@@ -12,23 +12,23 @@ import {
12
12
} from '@data-driven-forms/form-builder/dist/cjs/mui-builder-mappers' ;
13
13
import { makeStyles } from '@material-ui/styles' ;
14
14
import Box from '@material-ui/core/Box' ;
15
- import Button from '@material-ui/core/Button'
16
- import Snackbar from '@material-ui/core/Snackbar'
15
+ import Button from '@material-ui/core/Button' ;
16
+ import Snackbar from '@material-ui/core/Snackbar' ;
17
17
import IconButton from '@material-ui/core/IconButton' ;
18
18
import ExpansionPanel from '@material-ui/core/ExpansionPanel' ;
19
19
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails' ;
20
20
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary' ;
21
21
import Typography from '@material-ui/core/Typography' ;
22
- import CloseIcon from '@material-ui/icons/Close'
22
+ import CloseIcon from '@material-ui/icons/Close' ;
23
23
import PanToolIcon from '@material-ui/icons/PanTool' ;
24
24
25
25
import dynamic from 'next/dynamic' ;
26
+
27
+ import PropTypes from 'prop-types' ;
26
28
const CodeEditor = dynamic ( import ( '../src/components/code-editor' ) , {
27
29
ssr : false
28
30
} ) ;
29
31
30
-
31
-
32
32
const useStyles = makeStyles ( ( theme ) => ( {
33
33
builderWrapper : {
34
34
width : '100%'
@@ -37,7 +37,7 @@ const useStyles = makeStyles((theme) => ({
37
37
padding : theme . spacing ( 0.5 )
38
38
} ,
39
39
builderControlsWrapper : {
40
- width : '100%' ,
40
+ width : '100%'
41
41
} ,
42
42
builderButton : {
43
43
'&:not(:last-child)' : {
@@ -50,21 +50,22 @@ const useStyles = makeStyles((theme) => ({
50
50
emptyTarget : {
51
51
height : '100%'
52
52
}
53
- } ) )
53
+ } ) ) ;
54
54
55
55
const EmptyTarget = ( ) => {
56
56
const classes = useStyles ( ) ;
57
57
return (
58
- < Box display = "flex" justifyContent = "center" alignItems = "center" flexDirection = "column" className = { classes . emptyTarget } >
59
- < Typography variant = "h3" gutterBottom >
60
- There are no fields yet.
61
- </ Typography >
62
- < Typography variant = "h4" >
63
- < PanToolIcon />
64
- You can add fields by dragging from the menu on the left.
65
- </ Typography >
66
- </ Box >
67
- ) }
58
+ < Box display = "flex" justifyContent = "center" alignItems = "center" flexDirection = "column" className = { classes . emptyTarget } >
59
+ < Typography variant = "h3" gutterBottom >
60
+ There are no fields yet.
61
+ </ Typography >
62
+ < Typography variant = "h4" >
63
+ < PanToolIcon />
64
+ You can add fields by dragging from the menu on the left.
65
+ </ Typography >
66
+ </ Box >
67
+ ) ;
68
+ } ;
68
69
69
70
const reducedMapper = {
70
71
...builderMapper ,
@@ -135,6 +136,11 @@ const CopySnackbar = ({ open, handleClose }) => {
135
136
) ;
136
137
} ;
137
138
139
+ CopySnackbar . propTypes = {
140
+ open : PropTypes . bool ,
141
+ handleClose : PropTypes . func
142
+ } ;
143
+
138
144
const LiveEditor = ( ) => {
139
145
const classes = useStyles ( ) ;
140
146
const [ openTooltip , setOpenTooltip ] = useState ( false ) ;
@@ -155,21 +161,21 @@ const LiveEditor = () => {
155
161
debug = { false }
156
162
render = { ( { isValid, getSchema, ...props } ) => (
157
163
< BuilderTemplate { ...props } className = { classes . builderWrapper } >
158
- < ExpansionPanel className = { classes . expansionPanel } >
159
- < ExpansionPanelSummary >
160
- < Box display = "flex" justifyContent = "space-between" alignItems = "center" className = { classes . builderControlsWrapper } >
161
- < Typography > Click to preview schema</ Typography >
162
- < CopyToClipboard text = { JSON . stringify ( getSchema ( ) ) } onCopy = { ( ) => setOpenTooltip ( true ) } >
163
- < Button variant = "contained" color = "primary" className = { classes . builderButton } onClick = { event => event . stopPropagation ( ) } >
164
- Copy schema
165
- </ Button >
166
- </ CopyToClipboard >
167
- </ Box >
168
- </ ExpansionPanelSummary >
169
- < ExpansionPanelDetails >
170
- < CodeEditor value = { JSON . stringify ( getSchema ( ) , null , 2 ) } />
171
- </ ExpansionPanelDetails >
172
- </ ExpansionPanel >
164
+ < ExpansionPanel className = { classes . expansionPanel } >
165
+ < ExpansionPanelSummary >
166
+ < Box display = "flex" justifyContent = "space-between" alignItems = "center" className = { classes . builderControlsWrapper } >
167
+ < Typography > Click to preview schema</ Typography >
168
+ < CopyToClipboard text = { JSON . stringify ( getSchema ( ) ) } onCopy = { ( ) => setOpenTooltip ( true ) } >
169
+ < Button variant = "contained" color = "primary" className = { classes . builderButton } onClick = { ( event ) => event . stopPropagation ( ) } >
170
+ Copy schema
171
+ </ Button >
172
+ </ CopyToClipboard >
173
+ </ Box >
174
+ </ ExpansionPanelSummary >
175
+ < ExpansionPanelDetails >
176
+ < CodeEditor value = { JSON . stringify ( getSchema ( ) , null , 2 ) } />
177
+ </ ExpansionPanelDetails >
178
+ </ ExpansionPanel >
173
179
< CopySnackbar open = { openTooltip } handleClose = { ( ) => setOpenTooltip ( false ) } />
174
180
</ BuilderTemplate >
175
181
) }
0 commit comments