aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/EditableView.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/EditableView.tsx')
-rw-r--r--src/client/views/EditableView.tsx23
1 files changed, 21 insertions, 2 deletions
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 88ef67afa..84b1b91c3 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -3,12 +3,30 @@ import { observer } from 'mobx-react';
import { observable, action } from 'mobx';
export interface EditableProps {
+ /**
+ * Called to get the initial value for editing
+ * */
GetValue(): string;
+
+ /**
+ * Called to apply changes
+ * @param value - The string entered by the user to set the value to
+ * @returns `true` if setting the value was successful, `false` otherwise
+ * */
SetValue(value: string): boolean;
+
+ /**
+ * The contents to render when not editing
+ */
contents: any;
height: number
}
+/**
+ * Customizable view that can be given an arbitrary view to render normally,
+ * but can also be edited with customizable functions to get a string version
+ * of the content, and set the value based on the entered string.
+ */
@observer
export class EditableView extends React.Component<EditableProps> {
@observable
@@ -17,8 +35,9 @@ export class EditableView extends React.Component<EditableProps> {
@action
onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key == "Enter" && !e.ctrlKey) {
- this.props.SetValue(e.currentTarget.value);
- this.editing = false;
+ if (this.props.SetValue(e.currentTarget.value)) {
+ this.editing = false;
+ }
} else if (e.key == "Escape") {
this.editing = false;
}