wba/frontend/src/js/dialog/wb-rename-dialog.js

import { h, Component, createRef } from 'preact';
import WBDialog from 'wb-dialog';
import linkState from 'linkstate';
import wbRenameObject from 'wb-rename-object';

class WBRenameDialog extends Component {
  constructor(...args) {
    super(...args);
    this.dialogRef = createRef();
    this.state.inputId = uuid.v4();
  }

  show(item, callback) {
    const { inputId } = this.state;
    this.setState({
      'item': item,
      'newName': null,
      'callback': callback || (() => {})
    });
    this.dialogRef.current.show();
    $('#' + inputId).focus();
  }

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

  render({ app }, { item, newName, callback, inputId }) {
    const { arvHost, arvToken } = app.state;
    return (
      <WBDialog title="Rename" ref={ this.dialogRef } accept={ () => {
        if (newName)
          wbRenameObject(arvHost, arvToken, item.uuid, newName).then(callback);
      } }>
        <div>
          <input type="text" class="form-control" id={ inputId }
            placeholder={ item ? item.name : 'Type new name here' }
            value={ newName } onChange={ linkState(this, 'newName') } />
        </div>
      </WBDialog>
    );
  }
}

export default WBRenameDialog;