@intuitionrobotics/thunderstorm
Version:
51 lines • 2.21 kB
JavaScript
import * as React from 'react';
import { FieldEditor } from "./FieldEditor.js";
import { StorageKey } from '../modules/StorageModule.js';
import { BaseComponent } from '../core/BaseComponent.js';
export class FieldEditorWithButtons extends BaseComponent {
createStorageKey() {
return new StorageKey(`editable-label-controller-${this.props.id}`);
}
constructor(props) {
super(props);
const storage = this.createStorageKey();
this.state = {
storageKey: storage,
isEditing: false,
};
}
componentDidUpdate(prevProps, _prevState) {
if (prevProps.id !== this.props.id) {
this.setState({ storageKey: this.createStorageKey() });
}
}
handleEdit = () => {
// Save the state's value in case of cancellation.
this.setState({ isEditing: true });
};
handleSave = () => {
this.props.onAccept(this.state.storageKey.get());
this.handleCancel();
};
handleCancel = () => {
this.state.storageKey.delete();
this.setState({ isEditing: false });
};
render() {
const { isEditing } = this.state;
const { inputStyle, labelStyle } = this.props;
return (React.createElement("div", { className: `ll_h_c`, style: { justifyContent: "space-between" } },
React.createElement("div", null,
React.createElement(FieldEditor, { isEditing: this.state.isEditing, inputStyle: inputStyle, labelStyle: labelStyle, onAccept: this.handleSave, onCancel: this.handleCancel, storageKey: this.state.storageKey, value: this.props.value, placeholder: this.props.placeholder, id: this.props.id })),
isEditing ? this.renderControlButtons() : this.renderEditButton()));
}
renderEditButton = () => {
return React.createElement("button", { onClick: this.handleEdit }, "Edit");
};
renderControlButtons = () => {
return React.createElement("div", null,
React.createElement("button", { onClick: this.handleSave }, "Save"),
React.createElement("button", { onClick: this.handleCancel }, "Cancel"));
};
}
//# sourceMappingURL=FieldEditorWithButtons.js.map