Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2275 | Rev 2364 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 2275 Rev 2276
Línea 1... Línea 1...
1 
import React, { useState } from 'react'
 1 
import React from 'react'
2 
import {
 2 
import {
3 
  Avatar,
 3 
  Avatar,
4 
  Card,
 4 
  Card,
5 
  CardActions,
 5 
  CardActions,
6 
  CardContent,
 6 
  CardContent,
7 
  CardHeader,
 7 
  CardHeader,
8 
  CardMedia,
 8 
  CardMedia,
9 
  IconButton,
 - 
 
10 
  Menu,
 - 
 
11 
  MenuItem,
 - 
 
12 
  styled
 9 
  styled
13 
} from '@mui/material'
 10 
} from '@mui/material'
14 
import { MoreVert } from '@mui/icons-material'
 - 
 
Línea 15... Línea 11...
15 
 
 11 
 
16 
const WidgetContainer = styled(Card)(({ theme }) => ({
 12 
const WidgetContainer = styled(Card)(({ theme }) => ({
17 
  backgroundColor: theme.palette.background.default,
 13 
  backgroundColor: theme.palette.background.default,
18 
  borderRadius: 0,
 14 
  borderRadius: 0,
Línea 35... Línea 31...
35 
 
 31 
 
36 
export function WidgetHeader({
 32 
export function WidgetHeader({
37 
  title = '',
 33 
  title = '',
38 
  subheader = '',
 34 
  subheader = '',
39 
  avatar = '',
 - 
 
40 
  optionsIcon,
 35 
  avatar = '',
41 
  options = [],
 36 
  renderAction = () => null,
42 
  styles,
 37 
  styles,
43 
  ...props
 38 
  ...props
44 
}) {
 - 
 
45 
  const [anchorEl, setAnchorEl] = useState(null)
 - 
 
46 
  const open = Boolean(anchorEl)
 - 
 
47 
 
 - 
 
48 
  const handleClick = (event) => setAnchorEl(event.currentTarget)
 - 
 
49 
 
 - 
 
50 
  const handleClose = () => setAnchorEl(null)
 - 
 
51 
 
 39 
}) {
52 
  return (
 40 
  return (
53 
    <CardHeader
 41 
    <CardHeader
54 
      avatar={avatar ? <Avatar alt={avatar.alt} src={avatar.src} /> : null}
 - 
 
55 
      action={
 - 
 
56 
        <>
 - 
 
57 
          <IconButton
 - 
 
58 
            id='settings-button'
 - 
 
59 
            aria-controls={open ? 'settings-menu' : undefined}
 - 
 
60 
            aria-haspopup='true'
 - 
 
61 
            aria-expanded={open ? 'true' : undefined}
 - 
 
62 
            onClick={handleClick}
 - 
 
63 
            sx={{
 - 
 
64 
              display: options.length > 0 ? 'block' : 'none'
 - 
 
65 
            }}
 - 
 
66 
          >
 - 
 
67 
            {optionsIcon ?? <MoreVert />}
 - 
 
68 
          </IconButton>
 - 
 
69 
          <Menu
 - 
 
70 
            id='settings-menu'
 - 
 
71 
            aria-labelledby='settings-button'
 - 
 
72 
            anchorEl={anchorEl}
 - 
 
73 
            open={open}
 - 
 
74 
            onClose={handleClose}
 - 
 
75 
            anchorOrigin={{
 - 
 
76 
              vertical: 'top',
 - 
 
77 
              horizontal: 'left'
 - 
 
78 
            }}
 42 
      avatar={avatar ? <Avatar alt={avatar.alt} src={avatar.src} /> : null}
79 
            transformOrigin={{
 - 
 
80 
              vertical: 'top',
 - 
 
81 
              horizontal: 'left'
 - 
 
82 
            }}
 - 
 
83 
          >
 - 
 
84 
            {options.map((option, index) => (
 - 
 
85 
              <MenuItem
 - 
 
86 
                key={index}
 - 
 
87 
                onClick={() => {
 - 
 
88 
                  option.action()
 - 
 
89 
                  handleClose()
 - 
 
90 
                }}
 - 
 
91 
              >
 - 
 
92 
                {option.label}
 - 
 
93 
              </MenuItem>
 - 
 
94 
            ))}
 - 
 
95 
          </Menu>
 - 
 
96 
        </>
 - 
 
97 
      }
 43 
      action={renderAction()}
98 
      title={title}
 44 
      title={title}
99 
      subheader={subheader}
 45 
      subheader={subheader}
100 
      titleTypographyProps={{
 46 
      titleTypographyProps={{
101 
        sx: { fontSize: '16px', fontWeight: 600, color: 'var(--title-color)' }
 47 
        sx: { fontSize: '16px', fontWeight: 600, color: 'var(--title-color)' }
Línea 109... Línea 55...
109 
  )
 55 
  )
110 
}
 56 
}
Línea 111... Línea 57...
111 
 
 57 
 
112 
export function WidgetBody({ children, styles, ...props }) {
 58 
export function WidgetBody({ children, styles, ...props }) {
- 
 
 59 
  return (
113 
  return (
 60 
    <CardContent
- 
 
 61 
      sx={{ padding: 1, '&:last-child': { paddingBottom: 1 }, ...styles }}
- 
 
 62 
      {...props}
114 
    <CardContent sx={{ padding: 1, ...styles }} {...props}>
 63 
    >
115 
      {children}
 64 
      {children}
116 
    </CardContent>
 65 
    </CardContent>
117 
  )
 66 
  )