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 WBJsonEditor extends Component {
  constructor(...args) {
    super(...args);
    this.dialogRef = createRef();
  }

  render({ app, name, value, stringify, pretty, onChange }, { editValue, parseError }) {
    return (
      <div>
        <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" role="alert">
                { parseError }
              </div>
            ) : null }
          </div>
        </WBDialog>
        <WBAccordion names={ [ name ] } extraHeaderUi={ [ (
          <button class="btn btn-link px-0" title="Edit"
            onclick={ () => {
              this.setState({ parseError: null,
                  editValue: stringify ?
                  pretty ? JSON.stringify(value, null, 2)
                  : JSON.stringify(value) : value });
              this.dialogRef.current.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;