@intuitionrobotics/thunderstorm
Version:
55 lines • 2.53 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FieldEditorWithButtons = void 0;
const React = require("react");
const FieldEditor_1 = require("./FieldEditor");
const StorageModule_1 = require("../modules/StorageModule");
const BaseComponent_1 = require("../core/BaseComponent");
class FieldEditorWithButtons extends BaseComponent_1.BaseComponent {
createStorageKey() {
return new StorageModule_1.StorageKey(`editable-label-controller-${this.props.id}`);
}
constructor(props) {
super(props);
this.handleEdit = () => {
// Save the state's value in case of cancellation.
this.setState({ isEditing: true });
};
this.handleSave = () => {
this.props.onAccept(this.state.storageKey.get());
this.handleCancel();
};
this.handleCancel = () => {
this.state.storageKey.delete();
this.setState({ isEditing: false });
};
this.renderEditButton = () => {
return React.createElement("button", { onClick: this.handleEdit }, "Edit");
};
this.renderControlButtons = () => {
return React.createElement("div", null,
React.createElement("button", { onClick: this.handleSave }, "Save"),
React.createElement("button", { onClick: this.handleCancel }, "Cancel"));
};
const storage = this.createStorageKey();
this.state = {
storageKey: storage,
isEditing: false,
};
}
componentDidUpdate(prevProps, prevState) {
if (prevProps.id !== this.props.id) {
this.setState({ storageKey: this.createStorageKey() });
}
}
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_1.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()));
}
}
exports.FieldEditorWithButtons = FieldEditorWithButtons;
//# sourceMappingURL=FieldEditorWithButtons.js.map