@intuitionrobotics/thunderstorm
Version:
48 lines • 2.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FieldEditorClick = void 0;
const React = require("react");
const FieldEditor_1 = require("./FieldEditor");
const BaseComponent_1 = require("../core/BaseComponent");
const StorageModule_1 = require("../modules/StorageModule");
class FieldEditorClick extends BaseComponent_1.BaseComponent {
createStorageKey() {
return new StorageModule_1.StorageKey(`editable-label-controller-${this.props.id}`);
}
constructor(props) {
super(props);
this.handleSave = () => {
this.props.onAccept(this.state.storageKey.get());
this.endEdit();
};
this.startEdit = () => {
addEventListener("keydown", this.keyPressed);
this.state.storageKey.set(this.props.value || '');
this.setState({ isEditing: true });
};
this.endEdit = () => {
removeEventListener("keydown", this.keyPressed);
this.state.storageKey.delete();
this.setState({ isEditing: false });
};
this.keyPressed = (e) => {
if (e.code === 'Escape')
this.endEdit();
};
this.state = {
storageKey: this.createStorageKey(),
isEditing: false,
};
}
componentDidUpdate(prevProps, prevState) {
if (prevProps.id !== this.props.id)
this.setState({ storageKey: this.createStorageKey() });
}
render() {
const { inputStyle, labelStyle } = this.props;
return (React.createElement("div", { className: `ll_h_c`, onDoubleClick: this.startEdit, onBlur: () => this.handleSave() },
React.createElement(FieldEditor_1.FieldEditor, { isEditing: this.state.isEditing, inputStyle: inputStyle, labelStyle: labelStyle, onCancel: this.endEdit, onAccept: this.handleSave, storageKey: this.state.storageKey, value: this.props.value, placeholder: this.props.placeholder, id: this.props.id })));
}
}
exports.FieldEditorClick = FieldEditorClick;
//# sourceMappingURL=FieldEditorClick.js.map