| 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
 | | import React, { useState, useRef, useEffect, useMemo } from "react"; |  | import { Box, Card, CardContent, Grid, Typography, Tooltip } from '@mui/material'; |  | import { |  |     useTranslate, |  |     useRecordContext, |  | } from 'react-admin'; |  | import * as Common from '@/utils/common' |  |   |  | const PanelTypography = ({ title, property, ...props }) => { |  |     const translate = useTranslate(); |  |     return ( |  |         <> |  |             <Typography variant="subtitle1" gutterBottom align="center"> |  |                 {Common.camelToPascalWithSpaces(translate(title))} |  |             </Typography> |  |             <Tooltip title={property || '-'}> |  |                 <Typography |  |                     variant="body1" |  |                     sx={{ |  |                         maxWidth: { xs: '280px', sm: '480px', md: '580px', lg: '780px' }, |  |                         whiteSpace: 'nowrap', |  |                         overflow: 'hidden', |  |                         textOverflow: 'ellipsis', |  |                         borderBottom: '1px solid background.paper', |  |                         borderRadius: '4px', |  |                         boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)', |  |                         backgroundColor: 'background.paper', |  |                     }} |  |                     pt={1} |  |                     pb={1} |  |                     align='center' |  |                     {...props} |  |                 > |  |                     {property || '-'} |  |                 </Typography> |  |             </Tooltip> |  |         </> |  |     ) |  | } |  |   |  | export default PanelTypography; | 
 |