diff options
author | Bob Zeleznik <zzzman@gmail.com> | 2020-01-30 22:37:44 -0500 |
---|---|---|
committer | Bob Zeleznik <zzzman@gmail.com> | 2020-01-30 22:37:44 -0500 |
commit | f93abfc577225cc04eb94d67c62eec67d7e22bca (patch) | |
tree | f55b1dce712b2c4585ccad56bd3af34ed7901213 /src/client/views/EditableView.tsx | |
parent | 2a7bd44a40b472f5a99c60fcb865aa67dcbe3983 (diff) |
changed hideSidebar to showSidebar. added contextmenu for choosing pivot field.
Diffstat (limited to 'src/client/views/EditableView.tsx')
-rw-r--r-- | src/client/views/EditableView.tsx | 19 |
1 files changed, 14 insertions, 5 deletions
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 780c5b2f4..84c6b0dfd 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -46,6 +46,7 @@ export interface EditableProps { onClick?: (e: React.MouseEvent) => boolean; isEditingCallback?: (isEditing: boolean) => void; menuCallback?: (x: number, y: number) => void; + showMenuOnLoad?: boolean; HeadingObject?: SchemaHeaderField | undefined; HeadingsHack?: number; toggle?: () => void; @@ -77,6 +78,8 @@ export class EditableView extends React.Component<EditableProps> { } } + _didShow = false; + @action onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { if (e.key === "Tab") { @@ -97,16 +100,20 @@ export class EditableView extends React.Component<EditableProps> { this._editing = false; this.props.isEditingCallback?.(false); } else if (e.key === ":") { - this.props.menuCallback?.(e.currentTarget.offsetLeft, e.currentTarget.offsetTop); + this.props.menuCallback?.(e.currentTarget.getBoundingClientRect().x, e.currentTarget.getBoundingClientRect().y); } } @action onClick = (e: React.MouseEvent) => { e.nativeEvent.stopPropagation(); - if (!this.props.onClick || !this.props.onClick(e)) { - this._editing = true; - this.props.isEditingCallback?.(true); + if (this._ref.current && this.props.showMenuOnLoad) { + this.props.menuCallback?.(this._ref.current.getBoundingClientRect().x, this._ref.current.getBoundingClientRect().y); + } else { + if (!this.props.onClick || !this.props.onClick(e)) { + this._editing = true; + this.props.isEditingCallback?.(true); + } } e.stopPropagation(); } @@ -130,6 +137,7 @@ export class EditableView extends React.Component<EditableProps> { return wasFocused !== this._editing; } + _ref = React.createRef<HTMLDivElement>(); render() { if (this._editing && this.props.GetValue() !== undefined) { return this.props.autosuggestProps @@ -156,9 +164,10 @@ export class EditableView extends React.Component<EditableProps> { style={{ display: this.props.display, fontSize: this.props.fontSize }} />; } else { - if (this.props.autosuggestProps) this.props.autosuggestProps.resetValue(); + this.props.autosuggestProps?.resetValue(); return (this.props.contents instanceof ObjectField ? (null) : <div className={`editableView-container-editing${this.props.oneLine ? "-oneLine" : ""}`} + ref={this._ref} style={{ display: this.props.display, minHeight: "20px", height: `${this.props.height ? this.props.height : "auto"}`, maxHeight: `${this.props.maxHeight}` }} onClick={this.onClick}> <span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize }}>{this.props.contents}</span> |