diff options
Diffstat (limited to 'src/client/views/EditableView.tsx')
-rw-r--r-- | src/client/views/EditableView.tsx | 40 |
1 files changed, 19 insertions, 21 deletions
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 9974fc63b..898a98c98 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -7,7 +7,6 @@ import { DocumentIconContainer } from './nodes/DocumentIcon'; import { FieldView, FieldViewProps } from './nodes/FieldView'; import { ObservableReactComponent } from './ObservableReactComponent'; import { OverlayView } from './OverlayView'; -import { Padding } from 'browndash-components'; import { SchemaFieldType } from './collections/collectionSchema/SchemaColumnHeader'; export interface EditableProps { @@ -91,7 +90,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> { this._overlayDisposer?.(); this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 }); this._props.highlightCells?.(this._props.GetValue() ?? ''); - } + } }); } else { this._overlayDisposer?.(); @@ -201,7 +200,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> { } } }; - + @action finalizeEdit(value: string, shiftDown: boolean, lostFocus: boolean, enterKey: boolean) { if (this._props.SetValue(value, shiftDown, enterKey)) { @@ -236,12 +235,11 @@ export class EditableView extends ObservableReactComponent<EditableProps> { setIsEditing = (value: boolean) => { this._editing = value; return this._editing; - } + }; renderEditor() { return this._props.autosuggestProps ? ( <Autosuggest - // eslint-disable-next-line react/jsx-props-no-spreading {...this._props.autosuggestProps.autosuggestProps} inputProps={{ className: 'editableView-input', @@ -255,11 +253,11 @@ export class EditableView extends ObservableReactComponent<EditableProps> { onChange: this._props.autosuggestProps.onChange, }} /> - ) : ( this._props.oneLine !== false && this._props.GetValue()?.toString().indexOf('\n') === -1 ? ( + ) : this._props.oneLine !== false && this._props.GetValue()?.toString().indexOf('\n') === -1 ? ( <input - className="editableView-input" + className="editableView-input" ref={r => { this._inputref = r; }} // prettier-ignore - style={{ display: this._props.display, overflow: 'auto', fontSize: this._props.fontSize, minWidth: 20, background: this._props.background}} + style={{ display: this._props.display, overflow: 'auto', fontSize: this._props.fontSize, minWidth: 20, background: this._props.background }} placeholder={this._props.placeholder} onBlur={e => this.finalizeEdit(e.currentTarget.value, false, true, false)} defaultValue={this._props.GetValue()} @@ -285,7 +283,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> { onClick={this.stopPropagation} onPointerUp={this.stopPropagation} /> - )); + ); } staticDisplay = () => { @@ -300,24 +298,24 @@ export class EditableView extends ObservableReactComponent<EditableProps> { // eslint-disable-next-line jsx-a11y/no-autofocus /> } else { - toDisplay = (<span className='editableView-static' - style={{ - 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() : '' as any - } - </span>) + toDisplay = ( + <span + className="editableView-static" + style={{ + fontStyle: this._props.fontStyle, + fontSize: this._props.fontSize, + }}> + {this._props.fieldContents ? <FieldView {...this._props.fieldContents} /> : (this.props.contents ?? '')} + </span> + ); } return toDisplay; - } + }; render() { const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n'); - if ((this._editing && gval !== undefined)) { + if (this._editing && gval !== undefined) { return this._props.sizeToContent ? ( <div style={{ display: 'grid', minWidth: 100 }}> <div style={{ display: 'inline-block', position: 'relative', height: 0, width: '100%', overflow: 'hidden' }}>{this.renderEditor()}</div> |