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.tsx26
1 files changed, 8 insertions, 18 deletions
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 684b948af..23da5a666 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -1,10 +1,7 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
import { action, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import * as Autosuggest from 'react-autosuggest';
-import { ObjectField } from '../../fields/ObjectField';
import './EditableView.scss';
import { DocumentIconContainer } from './nodes/DocumentIcon';
import { FieldView, FieldViewProps } from './nodes/FieldView';
@@ -29,7 +26,7 @@ export interface EditableProps {
/**
* The contents to render when not editing
*/
- contents: any;
+ contents: JSX.Element | string;
fieldContents?: FieldViewProps;
fontStyle?: string;
fontSize?: number;
@@ -41,8 +38,8 @@ export interface EditableProps {
autosuggestProps?: {
resetValue: () => void;
value: string;
- onChange: (e: React.ChangeEvent, { newValue }: { newValue: string }) => void;
- autosuggestProps: Autosuggest.AutosuggestProps<string, any>;
+ onChange: (e: React.FormEvent, { newValue }: { newValue: string }) => void;
+ autosuggestProps: Autosuggest.AutosuggestProps<string, unknown>;
};
oneLine?: boolean; // whether to display the editable view as a single input line or as a textarea
allowCRs?: boolean; // can carriage returns be entered
@@ -112,8 +109,8 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
}
onChange = (e: React.ChangeEvent) => {
- const targVal = (e.target as any).value;
- if (!(targVal.startsWith(':=') || targVal.startsWith('='))) {
+ const targVal = (e.target as HTMLSelectElement).value;
+ if (!(targVal?.startsWith(':=') || targVal?.startsWith('='))) {
this._overlayDisposer?.();
this._overlayDisposer = undefined;
} else if (!this._overlayDisposer) {
@@ -230,13 +227,11 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
className: 'editableView-input',
onKeyDown: this.onKeyDown,
autoFocus: true,
- // @ts-ignore
- onBlur: e => this.finalizeEdit(e.currentTarget.value, false, true, false),
+ onBlur: e => this.finalizeEdit((e.currentTarget as HTMLSelectElement).value, false, true, false),
onPointerDown: this.stopPropagation,
onClick: this.stopPropagation,
onPointerUp: this.stopPropagation,
value: this._props.autosuggestProps.value,
- // @ts-ignore
onChange: this._props.autosuggestProps.onChange,
}}
/>
@@ -248,7 +243,6 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
placeholder={this._props.placeholder}
onBlur={e => this.finalizeEdit(e.currentTarget.value, false, true, false)}
defaultValue={this._props.GetValue()}
- // eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus
onChange={this.onChange}
onKeyDown={this.onKeyDown}
@@ -264,7 +258,6 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
placeholder={this._props.placeholder}
onBlur={e => this.finalizeEdit(e.currentTarget.value, false, true, false)}
defaultValue={this._props.GetValue()}
- // eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus
onChange={this.onChange}
onKeyDown={this.onKeyDown}
@@ -288,7 +281,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
);
}
setTimeout(() => this._props.autosuggestProps?.resetValue());
- return this._props.contents instanceof ObjectField ? null : (
+ return (
<div
className={`editableView-container-editing${this._props.oneLine ? '-oneLine' : ''}`}
ref={this._ref}
@@ -308,10 +301,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
fontStyle: this._props.fontStyle,
fontSize: this._props.fontSize,
}}>
- {
- // eslint-disable-next-line react/jsx-props-no-spreading
- this._props.fieldContents ? <FieldView {...this._props.fieldContents} /> : this.props.contents ? this._props.contents?.valueOf() : ''
- }
+ {this._props.fieldContents ? <FieldView {...this._props.fieldContents} /> : (this._props.contents ?? '')}
</span>
</div>
);