dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed: focus on fullscreen for react schema grouped forms (#2400)

Browse Source
This commit is contained in:
Dmitriy Mushat 2020-02-19 16:14:18 +02:00 committed by GitHub
parent 1540f08695
commit d5c3a9cc5d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/src/app/components/react/json-form-ace-editor.jsx
View File

@ -83,9 +83,9 @@ class ThingsboardAceEditor extends React.Component {
fixAceEditor(editor);
}
onToggleFull() {
onToggleFull(groupId) {
this.setState({ isFull: !this.state.isFull });
this.props.onToggleFullscreen();
this.props.onToggleFullscreen(groupId);
this.updateAceEditorSize = true;
}
@ -140,7 +140,7 @@ class ThingsboardAceEditor extends React.Component {
<div className="title-panel">
<label>{this.props.mode}</label>
<FlatButton style={ styles.tidyButtonStyle } className="tidy-button" label={'Tidy'} onTouchTap={this.onTidy}/>
<FlatButton style={ styles.tidyButtonStyle } className="tidy-button" label={this.state.isFull ? 'Exit fullscreen' : 'Fullscreen'} onTouchTap={this.onToggleFull}/>
<FlatButton style={ styles.tidyButtonStyle } className="tidy-button" label={this.state.isFull ? 'Exit fullscreen' : 'Fullscreen'} onTouchTap={() => this.onToggleFull(this.props.groupId)}/>
</div>
<AceEditor mode={this.props.mode}
height={this.state.isFull ? "100%" : "150px"}

21
ui/src/app/components/react/json-form-schema-form.jsx
View File

@ -40,6 +40,9 @@ class ThingsboardSchemaForm extends React.Component {
constructor(props) {
super(props);
this.state = {
groupId: null,
};
this.mapper = {
'number': ThingsboardNumber,
@ -71,7 +74,6 @@ class ThingsboardSchemaForm extends React.Component {
}
onChange(key, val) {
//console.log('SchemaForm.onChange', key, val);
this.props.onModelChange(key, val);
if (this.hasConditions) {
this.forceUpdate();
@ -86,12 +88,15 @@ class ThingsboardSchemaForm extends React.Component {
this.props.onIconClick(event);
}
onToggleFullscreen() {
onToggleFullscreen(groupId) {
this.setState({
groupId: groupId
});
this.props.onToggleFullscreen();
}
builder(form, model, index, onChange, onColorClick, onIconClick, onToggleFullscreen, mapper) {
builder(form, groupId, model, index, onChange, onColorClick, onIconClick, onToggleFullscreen, mapper) {
var type = form.type;
let Field = this.mapper[type];
if(!Field) {
@ -104,21 +109,21 @@ class ThingsboardSchemaForm extends React.Component {
return null;
}
}
return <Field model={model} form={form} key={index} onChange={onChange} onColorClick={onColorClick} onIconClick={onIconClick} onToggleFullscreen={onToggleFullscreen} mapper={mapper} builder={this.builder}/>
return <Field model={model} groupId={groupId} form={form} key={index} onChange={onChange} onColorClick={onColorClick} onIconClick={onIconClick} onToggleFullscreen={onToggleFullscreen} mapper={mapper} builder={this.builder}/>
}
createSchema(theForm) {
createSchema(theForm, groupId) {
let merged = utils.merge(this.props.schema, theForm, this.props.ignore, this.props.option);
let mapper = this.mapper;
if(this.props.mapper) {
mapper = _.merge(this.mapper, this.props.mapper);
}
let forms = merged.map(function(form, index) {
return this.builder(form, this.props.model, index, this.onChange, this.onColorClick, this.onIconClick, this.onToggleFullscreen, mapper);
return this.builder(form, groupId, this.props.model, index, this.onChange, this.onColorClick, this.onIconClick, this.onToggleFullscreen, mapper);
}.bind(this));
let formClass = 'SchemaForm';
if (this.props.isFullscreen) {
if (this.props.isFullscreen && groupId === this.state.groupId) {
formClass += ' SchemaFormFullscreen';
}
@ -131,7 +136,7 @@ class ThingsboardSchemaForm extends React.Component {
if(this.props.groupInfoes&&this.props.groupInfoes.length>0){
let content=[];
for(let info of this.props.groupInfoes){
let forms = this.createSchema(this.props.form[info.formIndex]);
let forms = this.createSchema(this.props.form[info.formIndex], info.formIndex);
let item = <ThingsboardSchemaGroup key={content.length} forms={forms} info={info}></ThingsboardSchemaGroup>;
content.push(item);
}

3
ui/src/app/components/react/json-form.scss
View File

@ -24,12 +24,15 @@ $input-label-float-scale: .75 !default;
.tb-fullscreen {
[name="ReactSchemaForm"] {
.SchemaForm {
display: none;
&.SchemaFormFullscreen {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
> div:not(.fullscreen-form-field) {
display: none !important;