-
-
Notifications
You must be signed in to change notification settings - Fork 57
/
Alert.js
95 lines (90 loc) · 4.98 KB
/
Alert.js
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 React from "react";
export default function Alert({ type, text, message, onFix, options, onUpdate, rulesWithInvalidConfigs, setRulesWithInvalidConfigs }) {
if (!message) {
return (
<article aria-roledescription={type} className={`alert alert--${type}`}>
<div className="alert__content">
<div className="alert__position">
<svg className="alert__icon" aria-hidden="true" focusable="false" width="19" height="20" viewBox="0 0 19 20" fill="none">
<path d="M9.49999 6.66667V10M9.49999 13.3333H9.50832M17.8333 10C17.8333 14.6024 14.1024 18.3333 9.49999 18.3333C4.89762 18.3333 1.16666 14.6024 1.16666 10C1.16666 5.39763 4.89762 1.66667 9.49999 1.66667C14.1024 1.66667 17.8333 5.39763 17.8333 10Z" stroke="currentColor" strokeWidth="1.66667" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
<div className="alert__text">
{text}
</div>
</div>
</article>
);
}
const { line, column, message: alertMessage, ruleId, fix, suggestions } = message;
return (
<article aria-roledescription={type} className={`alert alert--${type}`}>
<div className="alert__content">
<div className="alert__position">
<svg className="alert__icon" aria-hidden="true" focusable="false" width="19" height="20" viewBox="0 0 19 20" fill="none">
<path d="M9.49999 6.66667V10M9.49999 13.3333H9.50832M17.8333 10C17.8333 14.6024 14.1024 18.3333 9.49999 18.3333C4.89762 18.3333 1.16666 14.6024 1.16666 10C1.16666 5.39763 4.89762 1.66667 9.49999 1.66667C14.1024 1.66667 17.8333 5.39763 17.8333 10Z" stroke="currentColor" strokeWidth="1.66667" strokeLinecap="round" strokeLinejoin="round" />
</svg>
<span className="visually-hidden">Error</span>
<p className="alert__line-number">
<span className="line-number">{line}</span>
{line && column && <span aria-hidden="true">:</span>}
<span className="colun-number">{column}</span>
</p>
</div>
<div className="alert__text">
{alertMessage}
{ruleId && (
<>
(<a href={`https://eslint.org/docs/rules/${ruleId}`} target="_blank" rel="noreferrer">{ruleId}</a>)
</>
)}
</div>
</div>
{/*
keyboard functionality needs to be implemented to make this menu accessible ‼️
Implementation details: https://w3c.github.io/aria-practices/examples/menu-button/menu-button-actions.html
*/}
{suggestions ? (
<>
<button className="alert__fix-btn" aria-expanded="false" aria-haspopup="true" id="UNIQUE_BUTTON_ID_2" data-toggle hidden>
<span>Fix</span>
<svg width="12" height="8" aria-hidden="true" focusable="false" viewBox="0 0 12 8"><g fill="none"><path fill="currentColor" d="M1.41.59l4.59 4.58 4.59-4.58 1.41 1.41-6 6-6-6z" /><path d="M-6-8h24v24h-24z" /></g></svg>
</button>
<ul className="alert__fix-options" role="menu" aria-labelledby="UNIQUE_BUTTON_ID_2" id="js-fix-options_2" data-panel>
{suggestions.map(suggestion => (
<li
className="alert__fix-options__item"
role="menuitem"
onKeyPress={() => onFix(suggestion)}
tabIndex="-1"
key={suggestion.desc}
onClick={() => onFix(suggestion)}
>
{suggestion.desc}
</li>
))}
</ul>
</>
) : (
<div style={{
display: "flex"
}}>
{ fix && (
<button onClick={() => onFix(message)} className="alert__fix-btn" style={{ "border-radius": 0 }}>
Fix
</button>
)}
<button
onClick={() => {
delete options.rules[ruleId];
setRulesWithInvalidConfigs(new Set([...rulesWithInvalidConfigs].filter(rule => rule !== ruleId)));
onUpdate(Object.assign({}, options));
}}
className="alert__fix-btn">
Turnoff
</button>
</div>
)}
</article>
);
}