main
js 405 lines 13.9 KB
Raw
1 /**
2 * Copyright (c) Meta Platforms, Inc. and affiliates.
3 *
4 * This source code is licensed under the MIT license found in the
5 * LICENSE file in the root directory of this source tree.
6 *
7 * @flow
8 */
9
10 import * as React from 'react';
11 import styles from './ButtonIcon.css';
12
13 export type IconType =
14 | 'add'
15 | 'cancel'
16 | 'clear'
17 | 'close'
18 | 'collapsed'
19 | 'copy'
20 | 'delete'
21 | 'down'
22 | 'editor'
23 | 'expanded'
24 | 'export'
25 | 'filter'
26 | 'find'
27 | 'import'
28 | 'log-data'
29 | 'more'
30 | 'next'
31 | 'parse-hook-names'
32 | 'previous'
33 | 'record'
34 | 'reload'
35 | 'save'
36 | 'search'
37 | 'settings'
38 | 'panel-left-close'
39 | 'panel-left-open'
40 | 'panel-right-close'
41 | 'panel-right-open'
42 | 'panel-bottom-open'
43 | 'panel-bottom-close'
44 | 'filter-on'
45 | 'filter-off'
46 | 'play'
47 | 'pause'
48 | 'skip-previous'
49 | 'skip-next'
50 | 'error'
51 | 'suspend'
52 | 'undo'
53 | 'up'
54 | 'view-dom'
55 | 'view-source';
56
57 type Props = {
58 className?: string,
59 type: IconType,
60 };
61
62 const panelIcons = '96 -864 768 768';
63 export default function ButtonIcon({className = '', type}: Props): React.Node {
64 let pathData = null;
65 let viewBox = '0 0 24 24';
66 switch (type) {
67 case 'add':
68 pathData = PATH_ADD;
69 break;
70 case 'cancel':
71 pathData = PATH_CANCEL;
72 break;
73 case 'clear':
74 pathData = PATH_CLEAR;
75 break;
76 case 'close':
77 pathData = PATH_CLOSE;
78 break;
79 case 'collapsed':
80 pathData = PATH_COLLAPSED;
81 break;
82 case 'copy':
83 pathData = PATH_COPY;
84 break;
85 case 'delete':
86 pathData = PATH_DELETE;
87 break;
88 case 'down':
89 pathData = PATH_DOWN;
90 break;
91 case 'editor':
92 pathData = PATH_EDITOR;
93 break;
94 case 'expanded':
95 pathData = PATH_EXPANDED;
96 break;
97 case 'export':
98 pathData = PATH_EXPORT;
99 break;
100 case 'filter':
101 pathData = PATH_FILTER;
102 break;
103 case 'import':
104 pathData = PATH_IMPORT;
105 break;
106 case 'log-data':
107 pathData = PATH_LOG_DATA;
108 break;
109 case 'more':
110 pathData = PATH_MORE;
111 break;
112 case 'next':
113 pathData = PATH_NEXT;
114 break;
115 case 'parse-hook-names':
116 pathData = PATH_PARSE_HOOK_NAMES;
117 break;
118 case 'previous':
119 pathData = PATH_PREVIOUS;
120 break;
121 case 'record':
122 pathData = PATH_RECORD;
123 break;
124 case 'reload':
125 pathData = PATH_RELOAD;
126 break;
127 case 'save':
128 pathData = PATH_SAVE;
129 break;
130 case 'search':
131 pathData = PATH_SEARCH;
132 break;
133 case 'find':
134 pathData = PATH_FIND;
135 viewBox = '0 0 16 16';
136 break;
137 case 'settings':
138 pathData = PATH_SETTINGS;
139 break;
140 case 'error':
141 pathData = PATH_ERROR;
142 break;
143 case 'panel-left-close':
144 pathData = PATH_MATERIAL_PANEL_LEFT_CLOSE;
145 viewBox = panelIcons;
146 break;
147 case 'panel-left-open':
148 pathData = PATH_MATERIAL_PANEL_LEFT_OPEN;
149 viewBox = panelIcons;
150 break;
151 case 'panel-right-close':
152 pathData = PATH_MATERIAL_PANEL_RIGHT_CLOSE;
153 viewBox = panelIcons;
154 break;
155 case 'panel-right-open':
156 pathData = PATH_MATERIAL_PANEL_RIGHT_OPEN;
157 viewBox = panelIcons;
158 break;
159 case 'panel-bottom-open':
160 pathData = PATH_MATERIAL_PANEL_BOTTOM_OPEN;
161 viewBox = panelIcons;
162 break;
163 case 'panel-bottom-close':
164 pathData = PATH_MATERIAL_PANEL_BOTTOM_CLOSE;
165 viewBox = panelIcons;
166 break;
167 case 'filter-on':
168 pathData = PATH_MATERIAL_FILTER_ALT;
169 viewBox = panelIcons;
170 break;
171 case 'filter-off':
172 pathData = PATH_MATERIAL_FILTER_ALT_OFF;
173 viewBox = panelIcons;
174 break;
175 case 'play':
176 pathData = PATH_MATERIAL_PLAY_ARROW;
177 viewBox = panelIcons;
178 break;
179 case 'pause':
180 pathData = PATH_MATERIAL_PAUSE;
181 viewBox = panelIcons;
182 break;
183 case 'skip-previous':
184 pathData = PATH_MATERIAL_SKIP_PREVIOUS_ARROW;
185 viewBox = panelIcons;
186 break;
187 case 'skip-next':
188 pathData = PATH_MATERIAL_SKIP_NEXT_ARROW;
189 viewBox = panelIcons;
190 break;
191 case 'suspend':
192 pathData = PATH_SUSPEND;
193 break;
194 case 'undo':
195 pathData = PATH_UNDO;
196 break;
197 case 'up':
198 pathData = PATH_UP;
199 break;
200 case 'view-dom':
201 pathData = PATH_VIEW_DOM;
202 break;
203 case 'view-source':
204 pathData = PATH_VIEW_SOURCE;
205 break;
206 default:
207 console.warn(`Unsupported type "${type}" specified for ButtonIcon`);
208 break;
209 }
210
211 return (
212 <svg
213 xmlns="http://www.w3.org/2000/svg"
214 className={`${styles.ButtonIcon} ${className}`}
215 width="24"
216 height="24"
217 viewBox={viewBox}>
218 <path d="M0 0h24v24H0z" fill="none" />
219 <path fill="currentColor" d={pathData} />
220 </svg>
221 );
222 }
223
224 const PATH_ADD =
225 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z';
226
227 const PATH_CANCEL = `
228 M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z
229 `;
230
231 const PATH_CLEAR = `
232 M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69
233 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z
234 `;
235
236 const PATH_CLOSE =
237 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z';
238
239 const PATH_COLLAPSED = 'M10 17l5-5-5-5v10z';
240
241 const PATH_COPY = `
242 M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3a2 2 0 0 0 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9a2 2 0 0 0-2
243 2v10a2 2 0 0 0 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z
244 `;
245
246 const PATH_DELETE = `
247 M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12
248 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z
249 `;
250
251 const PATH_DOWN = 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z';
252
253 const PATH_EXPANDED = 'M7 10l5 5 5-5z';
254
255 const PATH_EXPORT = 'M15.82,2.14v7H21l-9,9L3,9.18H8.18v-7ZM3,20.13H21v1.73H3Z';
256
257 const PATH_FILTER = 'M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z';
258
259 const PATH_IMPORT = 'M8.18,18.13v-7H3l9-8.95,9,9H15.82v7ZM3,20.13H21v1.73H3Z';
260
261 const PATH_LOG_DATA = `
262 M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41
263 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04
264 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6
265 8h-4v-2h4v2zm0-4h-4v-2h4v2z
266 `;
267
268 const PATH_MORE = `
269 M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9
270 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z
271 `;
272
273 const PATH_NEXT = 'M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z';
274
275 const PATH_PARSE_HOOK_NAMES = (
276 <g>
277 <polygon points="20,7 20.94,4.94 23,4 20.94,3.06 20,1 19.06,3.06 17,4 19.06,4.94" />
278 <polygon points="8.5,7 9.44,4.94 11.5,4 9.44,3.06 8.5,1 7.56,3.06 5.5,4 7.56,4.94" />
279 <polygon points="20,12.5 19.06,14.56 17,15.5 19.06,16.44 20,18.5 20.94,16.44 23,15.5 20.94,14.56" />
280 <path d="M17.71,9.12l-2.83-2.83C14.68,6.1,14.43,6,14.17,6c-0.26,0-0.51,0.1-0.71,0.29L2.29,17.46c-0.39,0.39-0.39,1.02,0,1.41 l2.83,2.83C5.32,21.9,5.57,22,5.83,22s0.51-0.1,0.71-0.29l11.17-11.17C18.1,10.15,18.1,9.51,17.71,9.12z M14.17,8.42l1.41,1.41 L14.41,11L13,9.59L14.17,8.42z M5.83,19.59l-1.41-1.41L11.59,11L13,12.41L5.83,19.59z" />
281 </g>
282 );
283
284 const PATH_PREVIOUS =
285 'M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z';
286
287 const PATH_RECORD = 'M4,12a8,8 0 1,0 16,0a8,8 0 1,0 -16,0';
288
289 const PATH_RELOAD = `
290 M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0
291 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0
292 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z
293 `;
294
295 const PATH_SAVE = `
296 M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z
297 `;
298
299 const PATH_SEARCH = `
300 M8.5,22H3.7l-1.4-1.5V3.8l1.3-1.5h17.2l1,1.5v4.9h-1.3V4.3l-0.4-0.6H4.2L3.6,4.3V20l0.7,0.7h4.2V22z
301 M23,13.9l-4.6,3.6l4.6,4.6l-1.1,1.1l-4.7-4.4l-3.3,4.4l-3.2-12.3L23,13.9z
302 `;
303
304 const PATH_FIND =
305 'M6.5 0.5a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm0 1.5a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9z' +
306 'M11.17 10.03l3.7 3.7a0.8 0.8 0 0 1-1.14 1.14l-3.7-3.7z';
307
308 const PATH_SETTINGS = `
309 M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49
310 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38
311 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11
312 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4
313 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49
314 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5
315 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z
316 `;
317
318 const PATH_ERROR =
319 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z';
320
321 const PATH_SUSPEND = `
322 M15 1H9v2h6V1zm-4 13h2V8h-2v6zm8.03-6.61l1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42C16.07 4.74 14.12 4 12 4c-4.97
323 0-9 4.03-9 9s4.02 9 9 9 9-4.03 9-9c0-2.12-.74-4.07-1.97-5.61zM12 20c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z
324 `;
325
326 const PATH_UNDO = `
327 M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88
328 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z
329 `;
330
331 const PATH_UP = 'M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z';
332
333 const PATH_VIEW_DOM = `
334 M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12
335 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3
336 3-1.34 3-3-1.34-3-3-3z
337 `;
338
339 const PATH_VIEW_SOURCE = `
340 M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z
341 `;
342
343 const PATH_EDITOR = `
344 M7 5h10v2h2V3c0-1.1-.9-1.99-2-1.99L7 1c-1.1 0-2 .9-2 2v4h2V5zm8.41 11.59L20 12l-4.59-4.59L14 8.83 17.17 12 14 15.17l1.41 1.42zM10 15.17L6.83 12 10 8.83 8.59 7.41 4 12l4.59 4.59L10 15.17zM17 19H7v-2H5v4c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2v-4h-2v2z
345 `;
346
347 // Source: Material Design Icons left_panel_close
348 const PATH_MATERIAL_PANEL_LEFT_CLOSE = `
349 M648-324v-312L480-480l168 156ZM211-144q-27.64 0-47.32-19.68T144-211v-538q0-27.64 19.68-47.32T211-816h538q27.64 0 47.32 19.68T816-749v538q0 27.64-19.68 47.32T749-144H211Zm125-72v-528H216v528h120Zm72 0h336v-528H408v528Zm-72 0H216h120Z
350 `;
351
352 // Source: Material Design Icons left_panel_open
353 const PATH_MATERIAL_PANEL_LEFT_OPEN = `
354 M504-595v230q0 12.25 10.5 16.62Q525-344 534-352l110-102q11-11.18 11-26.09T644-506L534-608q-8.82-8-19.41-3.5T504-595ZM211-144q-27.64 0-47.32-19.68T144-211v-538q0-27.64 19.68-47.32T211-816h538q27.64 0 47.32 19.68T816-749v538q0 27.64-19.68 47.32T749-144H211Zm125-72v-528H216v528h120Zm72 0h336v-528H408v528Zm-72 0H216h120Z
355 `;
356
357 // Source: Material Design Icons right_panel_close
358 const PATH_MATERIAL_PANEL_RIGHT_CLOSE = `
359 M312-365q0 12.25 10.5 16.62Q333-344 342-352l110-102q11-11.18 11-26.09T452-506L342-608q-8.82-8-19.41-3.5T312-595v230ZM211-144q-27.64 0-47.32-19.68T144-211v-538q0-27.64 19.68-47.32T211-816h538q27.64 0 47.32 19.68T816-749v538q0 27.64-19.68 47.32T749-144H211Zm413-72h120v-528H624v528Zm-72 0v-528H216v528h336Zm72 0h120-120Z
360 `;
361
362 // Source: Material Design Icons right_panel_open
363 const PATH_MATERIAL_PANEL_RIGHT_OPEN = `
364 M456-365v-230q0-12.25-10.5-16.63Q435-616 426-608L316-506q-11 11.18-11 26.09T316-454l110 102q8.82 8 19.41 3.5T456-365ZM211-144q-27.64 0-47.32-19.68T144-211v-538q0-27.64 19.68-47.32T211-816h538q27.64 0 47.32 19.68T816-749v538q0 27.64-19.68 47.32T749-144H211Zm413-72h120v-528H624v528Zm-72 0v-528H216v528h336Zm72 0h120-120Z
365 `;
366
367 // Source: Material Design Icons bottom_panel_open
368 const PATH_MATERIAL_PANEL_BOTTOM_OPEN = `
369 M365-504h230q12.25 0 16.63-10.5Q616-525 608-534L506-644q-11.18-11-26.09-11T454-644L352-534q-8 8.82-3.5 19.41T365-504ZM211-144q-27.64 0-47.32-19.68T144-211v-538q0-27.64 19.68-47.32T211-816h538q27.64 0 47.32 19.68T816-749v538q0 27.64-19.68 47.32T749-144H211Zm5-192v120h528v-120H216Zm0-72h528v-336H216v336Zm0 72v120-120Z
370 `;
371
372 // Source: Material Design Icons bottom_panel_close
373 const PATH_MATERIAL_PANEL_BOTTOM_CLOSE = `
374 m506-508 102-110q8-8.82 3.5-19.41T595-648H365q-12.25 0-16.62 10.5Q344-627 352-618l102 110q11.18 11 26.09 11T506-508Zm243-308q27.64 0 47.32 19.68T816-749v538q0 27.64-19.68 47.32T749-144H211q-27.64 0-47.32-19.68T144-211v-538q0-27.64 19.68-47.32T211-816h538ZM216-336v120h528v-120H216Zm528-72v-336H216v336h528Zm-528 72v120-120Z
375 `;
376
377 // Source: Material Design Icons filter_alt
378 const PATH_MATERIAL_FILTER_ALT = `
379 M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z
380 `;
381
382 // Source: Material Design Icons filter_alt_off
383 const PATH_MATERIAL_FILTER_ALT_OFF = `
384 m592-481-57-57 143-182H353l-80-80h487q25 0 36 22t-4 42L592-481ZM791-56 560-287v87q0 17-11.5 28.5T520-160h-80q-17 0-28.5-11.5T400-200v-247L56-791l56-57 736 736-57 56ZM535-538Z
385 `;
386
387 // Source: Material Design Icons play_arrow
388 const PATH_MATERIAL_PLAY_ARROW = `
389 M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z
390 `;
391
392 // Source: Material Design Icons pause
393 const PATH_MATERIAL_PAUSE = `
394 M520-200v-560h240v560H520Zm-320 0v-560h240v560H200Zm400-80h80v-400h-80v400Zm-320 0h80v-400h-80v400Zm0-400v400-400Zm320 0v400-400Z
395 `;
396
397 // Source: Material Design Icons skip_previous
398 const PATH_MATERIAL_SKIP_PREVIOUS_ARROW = `
399 M220-240v-480h80v480h-80Zm520 0L380-480l360-240v480Zm-80-240Zm0 90v-180l-136 90 136 90Z
400 `;
401
402 // Source: Material Design Icons skip_next
403 const PATH_MATERIAL_SKIP_NEXT_ARROW = `
404 M660-240v-480h80v480h-80Zm-440 0v-480l360 240-360 240Zm80-240Zm0 90 136-90-136-90v180Z
405 `;