wba/frontend/src/js/component/wb-json-editor.js

import { h, Component, createRef } from 'preact';
import WBJsonViewer from 'wb-json-viewer';
import WBAccordion from 'wb-accordion';
import WBDialog from 'wb-dialog';

class WbJsonEditorDialog extends Component {
  constructor(...args) {
    super(...args);
    this.dialogRef = createRef();
  }

  render({ name, onChange }, { editValue, parseError }) {
    return (
      <WBDialog title={ 'Edit ' + name } ref={ this.dialogRef }
        accept={ () => {
          onChange(JSON.parse(editValue));
        } }
        canAccept={ () => {
          try { JSON.parse(editValue) }
          catch (exc) { this.setState({ parseError: exc.message }); return false; }
          return true;
        } }>
        <div>
          <textarea class="form-control wb-json-editor" value={ editValue } rows="10"
            onChange={ e => this.setState({ editValue: e.target.value }) } />
          { parseError ? (
            <div class="alert alert-danger mt-2" role="alert">
              { parseError }
            </div>
          ) : null }
        </div>
      </WBDialog>
    );
  }

  show() {
    this.dialogRef.current.show();
  }
}

class WBJsonEditor extends Component {
  constructor(...args) {
    super(...args);
    this.dialogRef = createRef();
  }

  render({ app, name, value, stringify, pretty, onChange }, { editValue, parseError }) {
    return (
      <div>
        <WbJsonEditorDialog name={ name } onChange={ onChange } ref={ this.dialogRef } />
        <WBAccordion names={ [ name ] } extraHeaderUi={ [ (
          <button class="btn btn-link px-0" title="Edit"
            onclick={ () => {
              const dlg = this.dialogRef.current;
              dlg.setState({ parseError: null,
                  editValue: stringify ?
                  pretty ? JSON.stringify(value, null, 2)
                  : JSON.stringify(value) : value });
              dlg.show();
            } }>
            <i class="fas fa-edit text-secondary" />
          </button>
        ) ] } cardHeaderClass="card-header-sm">
          <WBJsonViewer app={ app } value={ value } stringify={ stringify }
            pretty={ pretty } />
        </WBAccordion>
      </div>
    );
  }
}

WBJsonEditor.defaultProps = {
  stringify: true,
  pretty: true,
  onChange: () => {}
};

export default WBJsonEditor;