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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
import { IconButton, Size, Type } from '@dash/components';
import { IReactionDisposer, action, makeObservable, observable, reaction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { SettingsManager } from '../../../util/SettingsManager';
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
*/
// eslint-disable-next-line no-use-before-define
export type infoArc = [() => unknown, (res?: unknown) => infoState];
export const StateMessage = Symbol('StateMessage');
export const StateMessageGIF = Symbol('StateMessageGIF');
export const StateEntryFunc = Symbol('StateEntryFunc');
export class infoState {
[StateMessage]: string = '';
[StateMessageGIF]?: string = '';
[StateEntryFunc]?: () => unknown;
[key: string]: infoArc;
constructor(message: string, arcs: { [key: string]: infoArc }, messageGif?: string, entryFunc?: () => unknown) {
this[StateMessage] = message;
Object.assign(this, arcs);
this[StateMessageGIF] = messageGif;
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 gif the gif displayed when in this state
* @param entryFunc a function to call when entering the state
* @returns an FSA state
*/
export function InfoState(
msg: string, //
arcs: { [key: string]: infoArc },
gif?: string,
entryFunc?: () => unknown
) {
return new infoState(msg, arcs, gif, entryFunc);
}
export interface CollectionFreeFormInfoStateProps {
infoState: infoState;
next: (state: infoState) => unknown;
close: () => void;
}
@observer
export class CollectionFreeFormInfoState extends ObservableReactComponent<CollectionFreeFormInfoStateProps> {
_disposers: IReactionDisposer[] = [];
@observable _expanded = false;
constructor(props: CollectionFreeFormInfoStateProps) {
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 => reaction(
arc.test,
res => res && this._props.next(arc.act(res)),
{ fireImmediately: true }
)
)}; // prettier-ignore
componentDidMount() {
this.initState();
}
componentDidUpdate(prevProps: Readonly<CollectionFreeFormInfoStateProps>) {
super.componentDidUpdate(prevProps);
this.clearState();
this.initState();
}
componentWillUnmount() {
this.clearState();
}
render() {
const gif = this.State?.[StateMessageGIF];
return (
<div className="collectionFreeform-infoUI">
<p className="collectionFreeform-infoUI-msg">
{this.State?.[StateMessage]}
<button
type="button"
className={'collectionFreeform-' + (!gif ? 'hidden' : 'infoUI-button')}
onClick={action(() => {
this._expanded = !this._expanded;
})}>
{this._expanded ? 'Less...' : 'More...'}
</button>
</p>
<div className={'collectionFreeform-' + (!this._expanded || !gif ? 'hidden' : 'infoUI-gif-container')}>
<img src={`/assets/${gif}`} alt="state message gif" />
</div>
<div className="collectionFreeform-infoUI-close">
<IconButton icon="x" color={SettingsManager.userColor} size={Size.XSMALL} type={Type.TERT} background={SettingsManager.userBackgroundColor} onClick={action(() => this.props.close())} />
</div>
</div>
);
}
}
|
