Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2268 | Rev 2274 | Ir a la última revisión | | Comparar con el anterior | 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 
 
2268 stevensc 27 
export function Widget({ children, styles, ...props }) {
28 
  return (
29 
    <WidgetContainer sx={styles} {...props}>
30 
      {children}
31 
    </WidgetContainer>
32 
  )
2261 stevensc 33 
}
34 
 
35 
export function WidgetHeader({
36 
  title = '',
37 
  subheader = '',
38 
  avatar = '',
39 
  options = [],
2270 stevensc 40 
  styles,
2261 stevensc 41 
  ...props
42 
}) {
43 
  const [anchorEl, setAnchorEl] = useState(null)
44 
  const open = Boolean(anchorEl)
45 
 
46 
  const handleClick = (event) => setAnchorEl(event.currentTarget)
47 
 
48 
  const handleClose = () => setAnchorEl(null)
49 
 
50 
  return (
51 
    <CardHeader
2262 stevensc 52 
      avatar={avatar ? <Avatar alt={avatar.alt} src={avatar.src} /> : null}
2261 stevensc 53 
      action={
54 
        <>
55 
          <IconButton
56 
            id='settings-button'
57 
            aria-controls={open ? 'settings-menu' : undefined}
58 
            aria-haspopup='true'
59 
            aria-expanded={open ? 'true' : undefined}
60 
            onClick={handleClick}
61 
            sx={{
62 
              display: options.length > 0 ? 'block' : 'none'
63 
            }}
64 
          >
65 
            <MoreVert />
66 
          </IconButton>
67 
          <Menu
68 
            id='settings-menu'
69 
            aria-labelledby='settings-button'
70 
            anchorEl={anchorEl}
71 
            open={open}
72 
            onClose={handleClose}
73 
            anchorOrigin={{
74 
              vertical: 'top',
75 
              horizontal: 'left'
76 
            }}
77 
            transformOrigin={{
78 
              vertical: 'top',
79 
              horizontal: 'left'
80 
            }}
81 
          >
82 
            {options.map((option, index) => (
83 
              <MenuItem
84 
                key={index}
85 
                onClick={() => {
86 
                  option.action()
87 
                  handleClose()
88 
                }}
89 
              >
90 
                {option.label}
91 
              </MenuItem>
92 
            ))}
93 
          </Menu>
94 
        </>
95 
      }
96 
      title={title}
97 
      subheader={subheader}
2262 stevensc 98 
      titleTypographyProps={{
2263 stevensc 99 
        sx: { fontSize: '16px', fontWeight: 600, color: 'var(--title-color)' }
2262 stevensc 100 
      }}
101 
      subheaderTypographyProps={{
2263 stevensc 102 
        sx: { fontSize: '14px', color: 'var(--subtitle-color)' }
2262 stevensc 103 
      }}
2270 stevensc 104 
      sx={styles}
2261 stevensc 105 
      {...props}
106 
    />
107 
  )
108 
}
109 
 
2270 stevensc 110 
export function WidgetBody({ children, styles, ...props }) {
111 
  return (
112 
    <CardContent sx={styles} {...props}>
113 
      {children}
114 
    </CardContent>
115 
  )
2261 stevensc 116 
}
117 
 
2270 stevensc 118 
export function WidgetActions({ children, styles, ...props }) {
2261 stevensc 119 
  return (
2270 stevensc 120 
    <CardActions sx={styles} disableSpacing {...props}>
2261 stevensc 121 
      {children}
122 
    </CardActions>
123 
  )
124 
}
125 
 
126 
export function WidgetMedia({
127 
  src = '',
128 
  height = 200,
129 
  width = 200,
130 
  alt = '',
131 
  component = 'img',
2270 stevensc 132 
  styles,
2261 stevensc 133 
  ...props
134 
}) {
135 
  return (
136 
    <CardMedia
137 
      alt={alt}
138 
      component={component}
139 
      height={height}
140 
      image={src}
141 
      width={width}
2270 stevensc 142 
      sx={styles}
2261 stevensc 143 
      {...props}
144 
    />
145 
  )
146 
}
147 
 
148 
Widget.Header = WidgetHeader
149 
Widget.Body = WidgetBody
150 
Widget.Actions = WidgetActions
151 
Widget.Media = WidgetMedia
152 
 
153 
export default Widget