@intuitionrobotics/thunderstorm
Version:
44 lines • 1.81 kB
JavaScript
import * as React from 'react';
import { FieldEditor } from "./FieldEditor.js";
import { BaseComponent } from '../core/BaseComponent.js';
import { StorageKey } from '../modules/StorageModule.js';
export class FieldEditorClick extends BaseComponent {
createStorageKey() {
return new StorageKey(`editable-label-controller-${this.props.id}`);
}
constructor(props) {
super(props);
this.state = {
storageKey: this.createStorageKey(),
isEditing: false,
};
}
componentDidUpdate(prevProps, _prevState) {
if (prevProps.id !== this.props.id)
this.setState({ storageKey: this.createStorageKey() });
}
handleSave = () => {
this.props.onAccept(this.state.storageKey.get());
this.endEdit();
};
startEdit = () => {
addEventListener("keydown", this.keyPressed);
this.state.storageKey.set(this.props.value || '');
this.setState({ isEditing: true });
};
endEdit = () => {
removeEventListener("keydown", this.keyPressed);
this.state.storageKey.delete();
this.setState({ isEditing: false });
};
keyPressed = (e) => {
if (e.code === 'Escape')
this.endEdit();
};
render() {
const { inputStyle, labelStyle } = this.props;
return (React.createElement("div", { className: `ll_h_c`, onDoubleClick: this.startEdit, onBlur: () => this.handleSave() },
React.createElement(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 })));
}
}
//# sourceMappingURL=FieldEditorClick.js.map