Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2262 | Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
2261 stevensc 1 
import React, { useState } from 'react'
2 
import {
3 
  Avatar,
4 
  Card,
5 
  CardActions,
6 
  CardContent,
7 
  CardHeader,
8 
  CardMedia,
9 
  IconButton,
10 
  Menu,
11 
  MenuItem,
12 
  styled
13 
} from '@mui/material'
14 
import { MoreVert } from '@mui/icons-material'
15 
 
16 
const WidgetContainer = styled(Card)(({ theme }) => ({
17 
  backgroundColor: theme.palette.background.default,
18 
  boxShadow: theme.shadows[1],
19 
  height: 'fit-content',
20 
  position: 'relative',
21 
  width: '100%',
22 
  [theme.breakpoints.up('sm')]: {
23 
    borderRadius: theme.shape.borderRadius
24 
  }
25 
}))
26 
 
27 
export function Widget({ children, ...props }) {
28 
  return <WidgetContainer {...props}>{children}</WidgetContainer>
29 
}
30 
 
31 
export function WidgetHeader({
32 
  title = '',
33 
  subheader = '',
34 
  avatar = '',
35 
  options = [],
36 
  ...props
37 
}) {
38 
  const [anchorEl, setAnchorEl] = useState(null)
39 
  const open = Boolean(anchorEl)
40 
 
41 
  const handleClick = (event) => setAnchorEl(event.currentTarget)
42 
 
43 
  const handleClose = () => setAnchorEl(null)
44 
 
45 
  return (
46 
    <CardHeader
47 
      avatar={<Avatar alt={title} src={avatar} />}
48 
      action={
49 
        <>
50 
          <IconButton
51 
            id='settings-button'
52 
            aria-controls={open ? 'settings-menu' : undefined}
53 
            aria-haspopup='true'
54 
            aria-expanded={open ? 'true' : undefined}
55 
            onClick={handleClick}
56 
            sx={{
57 
              display: options.length > 0 ? 'block' : 'none'
58 
            }}
59 
          >
60 
            <MoreVert />
61 
          </IconButton>
62 
          <Menu
63 
            id='settings-menu'
64 
            aria-labelledby='settings-button'
65 
            anchorEl={anchorEl}
66 
            open={open}
67 
            onClose={handleClose}
68 
            anchorOrigin={{
69 
              vertical: 'top',
70 
              horizontal: 'left'
71 
            }}
72 
            transformOrigin={{
73 
              vertical: 'top',
74 
              horizontal: 'left'
75 
            }}
76 
          >
77 
            {options.map((option, index) => (
78 
              <MenuItem
79 
                key={index}
80 
                onClick={() => {
81 
                  option.action()
82 
                  handleClose()
83 
                }}
84 
              >
85 
                {option.label}
86 
              </MenuItem>
87 
            ))}
88 
          </Menu>
89 
        </>
90 
      }
91 
      title={title}
92 
      subheader={subheader}
93 
      {...props}
94 
    />
95 
  )
96 
}
97 
 
98 
export function WidgetBody({ children, ...props }) {
99 
  return <CardContent {...props}>{children}</CardContent>
100 
}
101 
 
102 
export function WidgetActions({ children, ...props }) {
103 
  return (
104 
    <CardActions disableSpacing {...props}>
105 
      {children}
106 
    </CardActions>
107 
  )
108 
}
109 
 
110 
export function WidgetMedia({
111 
  src = '',
112 
  height = 200,
113 
  width = 200,
114 
  alt = '',
115 
  component = 'img',
116 
  ...props
117 
}) {
118 
  return (
119 
    <CardMedia
120 
      alt={alt}
121 
      component={component}
122 
      height={height}
123 
      image={src}
124 
      width={width}
125 
      {...props}
126 
    />
127 
  )
128 
}
129 
 
130 
Widget.Header = WidgetHeader
131 
Widget.Body = WidgetBody
132 
Widget.Actions = WidgetActions
133 
Widget.Media = WidgetMedia
134 
 
135 
export default Widget