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
|
import * as React from 'react';
import { FontWeightProperty, FontStyleProperty, FontSizeProperty, ColorProperty } from 'csstype';
import { observer } from 'mobx-react';
import { observable, action, runInAction } from 'mobx';
import { FormattedTextBox, FormattedTextBoxProps } from '../../nodes/FormattedTextBox';
import { FieldViewProps } from '../../nodes/FieldView';
interface DetailedCaptionDataProps {
captionFieldKey?: string;
detailsFieldKey?: string;
}
interface DetailedCaptionStylingProps {
sharedFontColor?: ColorProperty;
captionFontStyle?: FontStyleProperty;
detailsFontStyle?: FontStyleProperty;
toggleSize?: number;
}
@observer
export default class DetailedCaptionToggle extends React.Component<DetailedCaptionDataProps & DetailedCaptionStylingProps & FieldViewProps> {
@observable loaded: boolean = false;
@observable detailsExpanded: boolean = false;
@action toggleDetails = (e: React.MouseEvent<HTMLDivElement>) => {
e.preventDefault();
e.stopPropagation();
this.detailsExpanded = !this.detailsExpanded;
}
componentDidMount() {
runInAction(() => this.loaded = true);
}
render() {
let size = this.props.toggleSize || 20;
return (
<div style={{
transition: "0.5s opacity ease",
opacity: this.loaded ? 1 : 0,
bottom: 0,
fontSize: 14,
width: "100%",
position: "absolute"
}}>
{/* caption */}
<div style={{ opacity: this.detailsExpanded ? 0 : 1, transition: "opacity 0.3s ease" }}>
<FormattedTextBox {...this.props} fieldKey={this.props.captionFieldKey || "caption"} />
</div>
{/* details */}
<div style={{ opacity: this.detailsExpanded ? 1 : 0, transition: "opacity 0.3s ease" }}>
<FormattedTextBox {...this.props} fieldKey={this.props.detailsFieldKey || "captiondetails"} />
</div>
{/* toggle */}
<div
style={{
width: size,
height: size,
borderRadius: "50%",
backgroundColor: "red",
zIndex: 3,
cursor: "pointer"
}}
onClick={this.toggleDetails}
>
<span style={{ color: "white" }}></span>
</div>
</div>
);
}
}
|
