diff options
Diffstat (limited to 'src/client/views/nodes/LabelBox.tsx')
| -rw-r--r-- | src/client/views/nodes/LabelBox.tsx | 29 |
1 files changed, 20 insertions, 9 deletions
diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx index f8140af93..52ca8b5b1 100644 --- a/src/client/views/nodes/LabelBox.tsx +++ b/src/client/views/nodes/LabelBox.tsx @@ -1,10 +1,11 @@ -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable, override } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, DocListCast } from '../../../fields/Doc'; import { List } from '../../../fields/List'; import { listSpec } from '../../../fields/Schema'; import { Cast, StrCast, NumCast, BoolCast } from '../../../fields/Types'; +import { copyProps } from '../../../Utils'; import { DragManager } from '../../util/DragManager'; import { undoBatch } from '../../util/UndoManager'; import { ContextMenu } from '../ContextMenu'; @@ -29,21 +30,32 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps & LabelBoxProp } private dropDisposer?: DragManager.DragDropDisposer; private _timeout: any; + + _prevProps: React.PropsWithChildren<FieldViewProps & LabelBoxProps>; + @override _props: React.PropsWithChildren<FieldViewProps & LabelBoxProps>; + constructor(props: React.PropsWithChildren<FieldViewProps & LabelBoxProps>) { + super(props); + this._props = this._prevProps = props; + makeObservable(this); + } + componentDidUpdate() { + copyProps(this); + } componentDidMount() { - this.props.setContentView?.(this); + this._props.setContentView?.(this); } componentWillUnMount() { this._timeout && clearTimeout(this._timeout); } @computed get Title() { - return this.dataDoc.title_custom ? StrCast(this.Document.title) : this.props.label ? this.props.label : typeof this.dataDoc[this.fieldKey] === 'string' ? StrCast(this.dataDoc[this.fieldKey]) : StrCast(this.Document.title); + return this.dataDoc.title_custom ? StrCast(this.Document.title) : this._props.label ? this._props.label : typeof this.dataDoc[this.fieldKey] === 'string' ? StrCast(this.dataDoc[this.fieldKey]) : StrCast(this.Document.title); } protected createDropTarget = (ele: HTMLDivElement) => { this.dropDisposer?.(); if (ele) { - this.dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this), this.props.Document); + this.dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this), this.Document); } }; @@ -66,7 +78,6 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps & LabelBoxProp }; @undoBatch - @action drop = (e: Event, de: DragManager.DropEvent) => { const docDragData = de.complete.docDragData; const params = Cast(this.paramsDoc['onClick-paramFieldKeys'], listSpec('string'), []); @@ -81,7 +92,7 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps & LabelBoxProp @observable _mouseOver = false; @computed get hoverColor() { - return this._mouseOver ? StrCast(this.layoutDoc._hoverBackgroundColor) : this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor); + return this._mouseOver ? StrCast(this.layoutDoc._hoverBackgroundColor) : this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor); } fitTextToBox = ( @@ -142,7 +153,7 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps & LabelBoxProp onMouseOver={action(() => (this._mouseOver = true))} ref={this.createDropTarget} onContextMenu={this.specificContextMenu} - style={{ boxShadow: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BoxShadow) }}> + style={{ boxShadow: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BoxShadow) }}> <div className="labelBox-mainButton" style={{ @@ -156,8 +167,8 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps & LabelBoxProp paddingRight: NumCast(this.layoutDoc._xPadding), paddingTop: NumCast(this.layoutDoc._yPadding), paddingBottom: NumCast(this.layoutDoc._yPadding), - width: this.props.PanelWidth(), - height: this.props.PanelHeight(), + width: this._props.PanelWidth(), + height: this._props.PanelHeight(), whiteSpace: 'singleLine' in boxParams && boxParams.singleLine ? 'pre' : 'pre-wrap', }}> <span style={{ width: 'singleLine' in boxParams ? '' : '100%' }} ref={action((r: any) => this.fitTextToBox(r))}> |
