-
Notifications
You must be signed in to change notification settings - Fork 295
/
IncidentOverlay.tsx
84 lines (77 loc) · 2.35 KB
/
IncidentOverlay.tsx
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
// @flow
import React, { Component } from 'react';
import moment from 'moment';
import { observer } from 'mobx-react';
import { get, camelCase } from 'lodash';
import ReactMarkdown from 'react-markdown';
import classnames from 'classnames';
import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
import News from '../../domains/News';
import ButtonLink from '../widgets/ButtonLink';
import styles from './IncidentOverlay.scss';
type Props = {
incident: News.News,
onOpenExternalLink: Function,
onProceedNewsAction: Function,
currentDateFormat: string,
};
@observer
export default class IncidentOverlay extends Component<Props> {
localizedDateFormat: 'MM/DD/YYYY';
componentDidMount() {
this.localizedDateFormat = moment.localeData().longDateFormat('L');
}
contentClickHandler(event: SyntheticMouseEvent<HTMLElement>) {
const linkUrl = get(event, ['target', 'href']);
if (linkUrl) {
event.preventDefault();
this.props.onOpenExternalLink(linkUrl);
}
}
onProceedNewsAction = (event: SyntheticMouseEvent<HTMLElement>) => {
const { incident, onProceedNewsAction } = this.props;
onProceedNewsAction(incident, event);
};
renderAction = (action: Object) => {
if (action && (action.url || action.event)) {
return (
<ButtonLink
className={styles.actionBtn}
onClick={this.onProceedNewsAction}
skin={ButtonSkin}
label={action.label}
linkProps={{
className: styles.externalLink,
hasIconBefore: false,
hasIconAfter: action.url && true,
}}
/>
);
}
return null;
};
render() {
const { incident, currentDateFormat } = this.props;
const { content, date, action, title } = incident;
const componentClasses = classnames([
styles.component,
styles[camelCase(incident.color)],
]);
return (
<div className={componentClasses}>
<h1 className={styles.title}>{title}</h1>
<span className={styles.date}>
{moment(date).format(currentDateFormat)}
</span>
<div
className={styles.content}
role="presentation"
onClick={this.contentClickHandler.bind(this)}
>
<ReactMarkdown escapeHtml={false} source={content} />
</div>
{this.renderAction(action)}
</div>
);
}
}