diff options
Diffstat (limited to 'src')
3 files changed, 19 insertions, 36 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx index bf47820a1..3c19ef4e9 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx @@ -3,18 +3,11 @@ import { observer } from 'mobx-react'; import './CollectionFreeFormView.scss'; import React = require('react'); -export type infoArc = { - events: () => any; - actions: (arg?: any) => any; +export type infoState = { + Message: string; + Events: () => any; + Actions: (arg?: any) => any; }; -export class infoState { - Message: string = ''; - Arcs: infoArc[] = []; - constructor(message: string, arcs: infoArc[]) { - this.Message = message; - this.Arcs = arcs; - } -} export interface CollectionFreeFormInfoStateProps { state: infoState; @@ -22,28 +15,20 @@ export interface CollectionFreeFormInfoStateProps { @observer export class CollectionFreeFormInfoState extends React.Component<CollectionFreeFormInfoStateProps> { - _disposers: IReactionDisposer[] = []; + _disposer: IReactionDisposer | undefined; + + clearState = () => this._disposer?.(); + initState = () => (this._disposer = reaction(this.props.state.Events, this.props.state.Actions, { fireImmediately: true })); + componentDidMount(): void { - this._disposers = this.props.state.Arcs.map(arc => - reaction( - () => arc.events(), - args => arc.actions(args), - { fireImmediately: true } - ) - ); + this.initState(); } componentWillUpdate() { - this._disposers.map(disposer => disposer()); - this._disposers = this.props.state.Arcs.map(arc => - reaction( - () => arc.events(), - args => arc.actions(args), - { fireImmediately: true } - ) - ); + this.clearState(); + this.initState(); } componentWillUnmount(): void { - this._disposers.map(disposer => disposer()); + this.clearState(); } render() { return <div className="infoUI">{this.props.state.Message}</div>; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx index e5933d47b..8b2b32581 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx @@ -33,7 +33,7 @@ export class CollectionFreeFormInfoUI extends React.Component<CollectionFreeForm } @observable currState: infoState; state0: infoState = { - Message: 'Click anywhere and begin typing to create your first text document.', + Message: 'Click to create Object', Arcs: [ { events: () => this.props.Freeform.childDocs.slice(), @@ -45,7 +45,7 @@ export class CollectionFreeFormInfoUI extends React.Component<CollectionFreeForm ], }; state1: infoState = { - Message: 'Hello world! Try creating a second document.', + Message: 'Create a second doc', Arcs: [ { events: () => this.props.Freeform.childDocs.slice(), @@ -57,7 +57,7 @@ export class CollectionFreeFormInfoUI extends React.Component<CollectionFreeForm ], }; state2: infoState = { - Message: 'To create a link between them, click the link icon on both documents.', + Message: 'Create a link', Arcs: [ { events: () => ({ links: this.first_doc && LinkManager.Instance.getAllDirectLinks(this.first_doc), docs: this.props.Freeform.childDocs.slice() }), @@ -72,7 +72,7 @@ export class CollectionFreeFormInfoUI extends React.Component<CollectionFreeForm }; state3: infoState = { - Message: 'You made your first link! You can view your links by selecting the blue dot.', + Message: 'View links', Arcs: [ { events: () => ({ links: this.first_doc && LinkManager.Instance.getAllDirectLinks(this.first_doc), viewingLinks: DocumentLinksButton.LinkEditorDocView }), @@ -85,7 +85,7 @@ export class CollectionFreeFormInfoUI extends React.Component<CollectionFreeForm ], }; state4: infoState = { - Message: 'Great work. You are now ready to create your own hypermedia world.', + Message: 'You did it!', Arcs: [ { events: () => false, diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index e432c9682..91617ec44 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1429,9 +1429,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection return anchor; }; - infoUI = () => { - return <CollectionFreeFormInfoUI Document={this.Document} Freeform={this}></CollectionFreeFormInfoUI>; - }; // this.props.PanelWidth(), this.props.PanelHeight() + infoUI = () => <CollectionFreeFormInfoUI Document={this.Document} Freeform={this} />; componentDidMount() { this.props.setContentView?.(this); |