@samitouri / QOS-React
Code Commits Issues Pulls Sessions CI/CD
main
main
js 71 lines 1.82 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 './LayoutViewer.css';
12
13 import type {Layout} from './types';
14
15 type Props = {
16 id: number,
17 layout: Layout,
18 };
19
20 export default function LayoutViewer({id, layout}: Props): React.Node {
21 const {height, margin, padding, y, width, x} = layout;
22
23 return (
24 <div className={styles.LayoutViewer}>
25 <div className={styles.Header}>layout</div>
26 <div className={styles.DashedBox}>
27 <div className={styles.LabelRow}>
28 <label className={styles.Label}>margin</label>
29
30 <label>{margin.top || '-'}</label>
31 </div>
32
33 <div className={styles.BoxRow}>
34 <label>{margin.left || '-'}</label>
35
36 <div className={styles.SolidBox}>
37 <div className={styles.LabelRow}>
38 <label className={styles.Label}>padding</label>
39
40 <label>{padding.top || '-'}</label>
41 </div>
42
43 <div className={styles.BoxRow}>
44 <label>{padding.left || '-'}</label>
45
46 <div className={styles.DashedBox}>
47 <div className={styles.LabelRow}>
48 {format(width)} x {format(height)} ({format(x)}, {format(y)})
49 </div>
50 </div>
51
52 <label>{padding.right || '-'}</label>
53 </div>
54
55 <label>{padding.bottom || '-'}</label>
56 </div>
57 <label>{margin.right || '-'}</label>
58 </div>
59 <label>{margin.bottom || '-'}</label>
60 </div>
61 </div>
62 );
63 }
64
65 function format(number: number): string | number {
66 if (Math.round(number) === number) {
67 return number;
68 } else {
69 return number.toFixed(1);
70 }
71 }