Igor Kulikov
7 years ago
34 changed files with 1151 additions and 360 deletions
@ -0,0 +1,23 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
|
|||
export interface JsonFormComponentData { |
|||
model?: any; |
|||
schema?: any; |
|||
form?: any; |
|||
groupInfoes?: any[]; |
|||
} |
|||
@ -0,0 +1,184 @@ |
|||
/* |
|||
* Copyright © 2016-2019 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
|
|||
import * as React from 'react'; |
|||
import ThingsboardBaseComponent from './json-form-base-component'; |
|||
import reactCSS from 'reactcss'; |
|||
import ReactAce from 'react-ace'; |
|||
import Button from '@material-ui/core/Button'; |
|||
import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models'; |
|||
import * as tinycolor from 'tinycolor2'; |
|||
import { IEditorProps } from 'react-ace/src/types'; |
|||
|
|||
interface ThingsboardAceEditorProps extends JsonFormFieldProps { |
|||
mode: string; |
|||
onTidy: (value: string) => string; |
|||
} |
|||
|
|||
interface ThingsboardAceEditorState extends JsonFormFieldState { |
|||
isFull: boolean; |
|||
focused: boolean; |
|||
} |
|||
|
|||
class ThingsboardAceEditor extends React.Component<ThingsboardAceEditorProps, ThingsboardAceEditorState> { |
|||
|
|||
hostElement: HTMLElement; |
|||
private aceEditor: IEditorProps; |
|||
|
|||
constructor(props) { |
|||
super(props); |
|||
this.onValueChanged = this.onValueChanged.bind(this); |
|||
this.onBlur = this.onBlur.bind(this); |
|||
this.onFocus = this.onFocus.bind(this); |
|||
this.onTidy = this.onTidy.bind(this); |
|||
this.onLoad = this.onLoad.bind(this); |
|||
this.onToggleFull = this.onToggleFull.bind(this); |
|||
const value = props.value ? props.value + '' : ''; |
|||
this.state = { |
|||
isFull: false, |
|||
value, |
|||
focused: false |
|||
}; |
|||
} |
|||
|
|||
onValueChanged(value) { |
|||
this.setState({ |
|||
value |
|||
}); |
|||
this.props.onChangeValidate({ |
|||
target: { |
|||
value |
|||
} |
|||
}); |
|||
} |
|||
|
|||
onBlur() { |
|||
this.setState({ focused: false }); |
|||
} |
|||
|
|||
onFocus() { |
|||
this.setState({ focused: true }); |
|||
} |
|||
|
|||
onTidy() { |
|||
if (!this.props.form.readonly) { |
|||
let value = this.state.value; |
|||
value = this.props.onTidy(value); |
|||
this.setState({ |
|||
value |
|||
}); |
|||
this.props.onChangeValidate({ |
|||
target: { |
|||
value |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
|
|||
onLoad(editor: IEditorProps) { |
|||
this.aceEditor = editor; |
|||
} |
|||
|
|||
onToggleFull() { |
|||
this.setState({ isFull: !this.state.isFull }); |
|||
this.props.onToggleFullscreen(this.hostElement, () => { |
|||
if (this.aceEditor) { |
|||
this.aceEditor.resize(); |
|||
this.aceEditor.renderer.updateFull(); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
componentDidUpdate() { |
|||
} |
|||
|
|||
render() { |
|||
|
|||
const styles = reactCSS({ |
|||
default: { |
|||
tidyButtonStyle: { |
|||
color: '#7B7B7B', |
|||
minWidth: '32px', |
|||
minHeight: '15px', |
|||
lineHeight: '15px', |
|||
fontSize: '0.800rem', |
|||
margin: '0', |
|||
padding: '4px', |
|||
height: '23px', |
|||
borderRadius: '5px', |
|||
marginLeft: '5px' |
|||
} |
|||
} |
|||
}); |
|||
|
|||
let labelClass = 'tb-label'; |
|||
if (this.props.form.required) { |
|||
labelClass += ' tb-required'; |
|||
} |
|||
if (this.props.form.readonly) { |
|||
labelClass += ' tb-readonly'; |
|||
} |
|||
if (this.state.focused) { |
|||
labelClass += ' tb-focused'; |
|||
} |
|||
let containerClass = 'tb-container'; |
|||
const style = this.props.form.style || {width: '100%'}; |
|||
if (this.state.isFull) { |
|||
containerClass += ' fullscreen-form-field'; |
|||
} |
|||
return ( |
|||
<div> |
|||
<div className='tb-json-form' ref={c => (this.hostElement = c)}> |
|||
<div className={containerClass}> |
|||
<label className={labelClass}>{this.props.form.title}</label> |
|||
<div className='json-form-ace-editor'> |
|||
<div className='title-panel'> |
|||
<label>{this.props.mode}</label> |
|||
<Button style={ styles.tidyButtonStyle } |
|||
className='tidy-button' onClick={this.onTidy}>Tidy</Button> |
|||
<Button style={ styles.tidyButtonStyle } |
|||
className='tidy-button' onClick={this.onToggleFull}> |
|||
{this.state.isFull ? |
|||
'Exit fullscreen' : 'Fullscreen'} |
|||
</Button> |
|||
</div> |
|||
<ReactAce mode={this.props.mode} |
|||
height={this.state.isFull ? '100%' : '150px'} |
|||
width={this.state.isFull ? '100%' : '300px'} |
|||
theme='github' |
|||
onChange={this.onValueChanged} |
|||
onFocus={this.onFocus} |
|||
onBlur={this.onBlur} |
|||
onLoad={this.onLoad} |
|||
name={this.props.form.title} |
|||
value={this.state.value} |
|||
readOnly={this.props.form.readonly} |
|||
editorProps={{$blockScrolling: Infinity}} |
|||
enableBasicAutocompletion={true} |
|||
enableSnippets={true} |
|||
enableLiveAutocompletion={true} |
|||
style={style}/> |
|||
</div> |
|||
<div className='json-form-error' |
|||
style={{opacity: this.props.valid ? '0' : '1'}}>{this.props.error}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
} |
|||
|
|||
export default ThingsboardBaseComponent(ThingsboardAceEditor); |
|||
@ -0,0 +1,184 @@ |
|||
/* |
|||
* Copyright © 2016-2019 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
import * as React from 'react'; |
|||
import * as ReactDOM from 'react-dom'; |
|||
import ThingsboardBaseComponent from './json-form-base-component'; |
|||
import reactCSS from 'reactcss'; |
|||
import * as tinycolor from 'tinycolor2'; |
|||
import TextField from '@material-ui/core/TextField'; |
|||
import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models'; |
|||
import IconButton from '@material-ui/core/IconButton'; |
|||
import ClearIcon from '@material-ui/icons/Clear'; |
|||
import Tooltip from '@material-ui/core/Tooltip'; |
|||
|
|||
interface ThingsboardColorState extends JsonFormFieldState { |
|||
color: tinycolor.ColorFormats.RGBA | null; |
|||
focused: boolean; |
|||
} |
|||
|
|||
class ThingsboardColor extends React.Component<JsonFormFieldProps, ThingsboardColorState> { |
|||
|
|||
constructor(props) { |
|||
super(props); |
|||
this.onBlur = this.onBlur.bind(this); |
|||
this.onFocus = this.onFocus.bind(this); |
|||
this.onValueChanged = this.onValueChanged.bind(this); |
|||
this.onSwatchClick = this.onSwatchClick.bind(this); |
|||
this.onClear = this.onClear.bind(this); |
|||
const value = props.value ? props.value + '' : null; |
|||
const color = value != null ? tinycolor(value).toRgb() : null; |
|||
this.state = { |
|||
color, |
|||
focused: false |
|||
}; |
|||
} |
|||
|
|||
onBlur() { |
|||
this.setState({focused: false}); |
|||
} |
|||
|
|||
onFocus() { |
|||
this.setState({focused: true}); |
|||
} |
|||
|
|||
componentDidMount() { |
|||
const node = ReactDOM.findDOMNode(this); |
|||
const colContainer = $(node).children('#color-container'); |
|||
colContainer.click((event) => { |
|||
if (!this.props.form.readonly) { |
|||
this.onSwatchClick(event); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
componentWillUnmount() { |
|||
const node = ReactDOM.findDOMNode(this); |
|||
const colContainer = $(node).children('#color-container'); |
|||
colContainer.off( 'click' ); |
|||
} |
|||
|
|||
onValueChanged(value: tinycolor.ColorFormats.RGBA | null) { |
|||
let color: tinycolor.Instance = null; |
|||
if (value != null) { |
|||
color = tinycolor(value); |
|||
} |
|||
this.setState({ |
|||
color: value |
|||
}); |
|||
let colorValue = ''; |
|||
if (color != null && color.getAlpha() !== 1) { |
|||
colorValue = color.toRgbString(); |
|||
} else if (color != null) { |
|||
colorValue = color.toHexString(); |
|||
} |
|||
this.props.onChangeValidate({ |
|||
target: { |
|||
value: colorValue |
|||
} |
|||
}); |
|||
} |
|||
|
|||
onSwatchClick(event) { |
|||
this.props.onColorClick(this.props.form.key, this.state.color, |
|||
(color) => { |
|||
this.onValueChanged(color); |
|||
} |
|||
); |
|||
} |
|||
|
|||
onClear(event) { |
|||
if (event) { |
|||
event.stopPropagation(); |
|||
} |
|||
this.onValueChanged(null); |
|||
} |
|||
|
|||
render() { |
|||
|
|||
let background = 'rgba(0,0,0,0)'; |
|||
if (this.state.color != null) { |
|||
background = `rgba(${ this.state.color.r }, ${ this.state.color.g }, ${ this.state.color.b }, ${ this.state.color.a })`; |
|||
} |
|||
|
|||
const styles = reactCSS({ |
|||
default: { |
|||
color: { |
|||
background: `${ background }` |
|||
}, |
|||
swatch: { |
|||
display: 'inline-block', |
|||
marginRight: '10px', |
|||
marginTop: 'auto', |
|||
marginBottom: 'auto', |
|||
cursor: 'pointer', |
|||
opacity: `${ this.props.form.readonly ? '0.6' : '1' }` |
|||
}, |
|||
swatchText: { |
|||
width: '100%' |
|||
}, |
|||
container: { |
|||
display: 'flex', |
|||
flexDirection: 'row', |
|||
alignItems: 'center' |
|||
}, |
|||
colorContainer: { |
|||
display: 'flex', |
|||
width: '100%' |
|||
} |
|||
}, |
|||
}); |
|||
|
|||
let fieldClass = 'tb-field'; |
|||
if (this.props.form.required) { |
|||
fieldClass += ' tb-required'; |
|||
} |
|||
if (this.props.form.readonly) { |
|||
fieldClass += ' tb-readonly'; |
|||
} |
|||
if (this.state.focused) { |
|||
fieldClass += ' tb-focused'; |
|||
} |
|||
|
|||
let stringColor = ''; |
|||
if (this.state.color != null) { |
|||
const color = tinycolor(this.state.color); |
|||
stringColor = color.toRgbString(); |
|||
} |
|||
|
|||
return ( |
|||
<div style={ styles.container }> |
|||
<div id='color-container' style={ styles.colorContainer }> |
|||
<div className='tb-color-preview' style={ styles.swatch }> |
|||
<div className='tb-color-result' style={ styles.color }/> |
|||
</div> |
|||
<TextField |
|||
className={fieldClass} |
|||
label={this.props.form.title} |
|||
error={!this.props.valid} |
|||
helperText={this.props.valid ? this.props.form.placeholder : this.props.error} |
|||
value={stringColor} |
|||
disabled={this.props.form.readonly} |
|||
onFocus={this.onFocus} |
|||
onBlur={this.onBlur} |
|||
style={ styles.swatchText }/> |
|||
</div> |
|||
<Tooltip title='Clear' placement='top'><IconButton onClick={this.onClear}><ClearIcon/></IconButton></Tooltip> |
|||
</div> |
|||
); |
|||
} |
|||
} |
|||
|
|||
export default ThingsboardBaseComponent(ThingsboardColor); |
|||
@ -0,0 +1,39 @@ |
|||
/* |
|||
* Copyright © 2016-2019 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
import * as React from 'react'; |
|||
import ThingsboardAceEditor from './json-form-ace-editor'; |
|||
import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models'; |
|||
import { css_beautify } from 'js-beautify'; |
|||
|
|||
class ThingsboardCss extends React.Component<JsonFormFieldProps, JsonFormFieldState> { |
|||
|
|||
constructor(props) { |
|||
super(props); |
|||
this.onTidyCss = this.onTidyCss.bind(this); |
|||
} |
|||
|
|||
onTidyCss(css: string): string { |
|||
return css_beautify(css, {indent_size: 4}); |
|||
} |
|||
|
|||
render() { |
|||
return ( |
|||
<ThingsboardAceEditor {...this.props} mode='css' onTidy={this.onTidyCss} {...this.state}></ThingsboardAceEditor> |
|||
); |
|||
} |
|||
} |
|||
|
|||
export default ThingsboardCss; |
|||
@ -0,0 +1,39 @@ |
|||
/* |
|||
* Copyright © 2016-2019 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
import * as React from 'react'; |
|||
import ThingsboardAceEditor from './json-form-ace-editor'; |
|||
import { html_beautify } from 'js-beautify'; |
|||
import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models'; |
|||
|
|||
class ThingsboardHtml extends React.Component<JsonFormFieldProps, JsonFormFieldState> { |
|||
|
|||
constructor(props) { |
|||
super(props); |
|||
this.onTidyHtml = this.onTidyHtml.bind(this); |
|||
} |
|||
|
|||
onTidyHtml(html: string): string { |
|||
return html_beautify(html, {indent_size: 4}); |
|||
} |
|||
|
|||
render() { |
|||
return ( |
|||
<ThingsboardAceEditor {...this.props} mode='html' onTidy={this.onTidyHtml} {...this.state}></ThingsboardAceEditor> |
|||
); |
|||
} |
|||
} |
|||
|
|||
export default ThingsboardHtml; |
|||
@ -0,0 +1,109 @@ |
|||
/* |
|||
* Copyright © 2016-2019 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
import React, {useCallback} from 'react'; |
|||
import { DropzoneState, useDropzone } from 'react-dropzone'; |
|||
import ThingsboardBaseComponent from './json-form-base-component'; |
|||
import Dropzone from 'react-dropzone'; |
|||
import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models'; |
|||
import IconButton from '@material-ui/core/IconButton'; |
|||
import ClearIcon from '@material-ui/icons/Clear'; |
|||
import Tooltip from '@material-ui/core/Tooltip'; |
|||
|
|||
interface ThingsboardImageState extends JsonFormFieldState { |
|||
imageUrl: string; |
|||
} |
|||
|
|||
class ThingsboardImage extends React.Component<JsonFormFieldProps, ThingsboardImageState> { |
|||
|
|||
constructor(props) { |
|||
super(props); |
|||
this.onDrop = this.onDrop.bind(this); |
|||
this.onClear = this.onClear.bind(this); |
|||
const value = props.value ? props.value + '' : null; |
|||
this.state = { |
|||
imageUrl: value |
|||
}; |
|||
} |
|||
|
|||
onDrop(acceptedFiles: File[]) { |
|||
const reader = new FileReader(); |
|||
reader.onload = () => { |
|||
this.onValueChanged(reader.result); |
|||
}; |
|||
reader.readAsDataURL(acceptedFiles[0]); |
|||
} |
|||
|
|||
onValueChanged(value) { |
|||
this.setState({ |
|||
imageUrl: value |
|||
}); |
|||
this.props.onChangeValidate({ |
|||
target: { |
|||
value |
|||
} |
|||
}); |
|||
} |
|||
|
|||
onClear(event) { |
|||
if (event) { |
|||
event.stopPropagation(); |
|||
} |
|||
this.onValueChanged(''); |
|||
} |
|||
|
|||
render() { |
|||
|
|||
let labelClass = 'tb-label'; |
|||
if (this.props.form.required) { |
|||
labelClass += ' tb-required'; |
|||
} |
|||
if (this.props.form.readonly) { |
|||
labelClass += ' tb-readonly'; |
|||
} |
|||
|
|||
let previewComponent; |
|||
if (this.state.imageUrl) { |
|||
previewComponent = <img className='tb-image-preview' src={this.state.imageUrl} />; |
|||
} else { |
|||
previewComponent = <div>No image selected</div>; |
|||
} |
|||
|
|||
return ( |
|||
<div className='tb-container'> |
|||
<label className={labelClass}>{this.props.form.title}</label> |
|||
<div className='tb-image-select-container'> |
|||
<div className='tb-image-preview-container'>{previewComponent}</div> |
|||
<div className='tb-image-clear-container'> |
|||
<Tooltip title='Clear' placement='top'> |
|||
<IconButton className='tb-image-clear-btn' onClick={this.onClear}><ClearIcon/></IconButton> |
|||
</Tooltip> |
|||
</div> |
|||
<Dropzone onDrop={this.onDrop} |
|||
accept='image/*' multiple={false}> |
|||
{({getRootProps, getInputProps}) => ( |
|||
<div className='tb-dropzone' {...getRootProps()}> |
|||
<div>Drop an image or click to select a file to upload.</div> |
|||
<input {...getInputProps()} /> |
|||
</div> |
|||
)} |
|||
</Dropzone> |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
} |
|||
|
|||
export default ThingsboardBaseComponent(ThingsboardImage); |
|||
@ -0,0 +1,38 @@ |
|||
/* |
|||
* Copyright © 2016-2019 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
import * as React from 'react'; |
|||
import ThingsboardAceEditor from './json-form-ace-editor'; |
|||
import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models'; |
|||
|
|||
class ThingsboardJavaScript extends React.Component<JsonFormFieldProps, JsonFormFieldState> { |
|||
|
|||
constructor(props) { |
|||
super(props); |
|||
this.onTidyJavascript = this.onTidyJavascript.bind(this); |
|||
} |
|||
|
|||
onTidyJavascript(javascript: string): string { |
|||
return js_beautify(javascript, {indent_size: 4, wrap_line_length: 60}); |
|||
} |
|||
|
|||
render() { |
|||
return ( |
|||
<ThingsboardAceEditor {...this.props} mode='javascript' onTidy={this.onTidyJavascript} {...this.state}></ThingsboardAceEditor> |
|||
); |
|||
} |
|||
} |
|||
|
|||
export default ThingsboardJavaScript; |
|||
@ -0,0 +1,38 @@ |
|||
/* |
|||
* Copyright © 2016-2019 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
import * as React from 'react'; |
|||
import ThingsboardAceEditor from './json-form-ace-editor'; |
|||
import { JsonFormFieldProps, JsonFormFieldState } from '@shared/components/json-form/react/json-form.models'; |
|||
|
|||
class ThingsboardJson extends React.Component<JsonFormFieldProps, JsonFormFieldState> { |
|||
|
|||
constructor(props) { |
|||
super(props); |
|||
this.onTidyJson = this.onTidyJson.bind(this); |
|||
} |
|||
|
|||
onTidyJson(json: string): string { |
|||
return js_beautify(json, {indent_size: 4}); |
|||
} |
|||
|
|||
render() { |
|||
return ( |
|||
<ThingsboardAceEditor {...this.props} mode='json' onTidy={this.onTidyJson} {...this.state}></ThingsboardAceEditor> |
|||
); |
|||
} |
|||
} |
|||
|
|||
export default ThingsboardJson; |
|||
Loading…
Reference in new issue