1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
import { IReactionDisposer, makeObservable, reaction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { ObservableReactComponent } from '../../ObservableReactComponent';
import './CollectionFreeFormView.scss';
/**
* An Fsa Arc. The first array element is a test condition function that will be observed.
* The second array element is a function that will be invoked when the first test function
* returns a truthy value
*/
export type infoArc = [() => any, (res?: any) => infoState];
export const StateMessage = Symbol('StateMessage');
export const StateEntryFunc = Symbol('StateEntryFunc');
export class infoState {
[StateMessage]: string = '';
[StateEntryFunc]?: () => any;
[key: string]: infoArc;
constructor(message: string, arcs: { [key: string]: infoArc }, entryFunc?: () => any) {
this[StateMessage] = message;
Object.assign(this, arcs);
this[StateEntryFunc] = entryFunc;
}
}
/**
* Create an FSA state.
* @param msg the message displayed when in this state
* @param arcs an object with fields containing @infoArcs (an object with field names indicating the arc transition and
* field values being a tuple of an arc transition trigger function (that returns a truthy value when the arc should fire),
* and an arc transition action function (that sets the next state)
* @param entryFunc a function to call when entering the state
* @returns an FSA state
*/
export function InfoState(
msg: string, //
arcs: { [key: string]: infoArc },
entryFunc?: () => any
) {
return new infoState(msg, arcs, entryFunc);
}
export interface CollectionFreeFormInfoStateProps {
infoState: infoState;
next: (state: infoState) => any;
}
@observer
export class CollectionFreeFormInfoState extends ObservableReactComponent<CollectionFreeFormInfoStateProps> {
_disposers: IReactionDisposer[] = [];
constructor(props: any) {
super(props);
makeObservable(this);
}
get State() {
return this._props.infoState;
}
get Arcs() {
return Object.keys(this.State ?? []).map(key => this.State?.[key]);
}
clearState = () => this._disposers.map(disposer => disposer());
initState = () =>
(this._disposers = this.Arcs.map(arc => ({ test: arc[0], act: arc[1] })).map(arc => {
return reaction(
//
arc.test,
res => {
if (res) {
const next = arc.act(res);
this._props.next(next);
}
},
{ fireImmediately: true }
);
}));
componentDidMount(): void {
this.initState();
}
componentDidUpdate(prevProps: Readonly<CollectionFreeFormInfoStateProps>) {
super.componentDidUpdate(prevProps);
this.clearState();
this.initState();
}
componentWillUnmount(): void {
this.clearState();
}
render() {
return <div className="infoUI">{this.State?.[StateMessage]}</div>;
}
}
|
