Proyectos de Subversion LeadersLinked - SPA

Rev

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