Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2274 | Rev 2276 | 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,
2275 stevensc 18 
  borderRadius: 0,
2261 stevensc 19 
  boxShadow: theme.shadows[1],
20 
  height: 'fit-content',
21 
  position: 'relative',
22 
  width: '100%',
23 
  [theme.breakpoints.up('sm')]: {
24 
    borderRadius: theme.shape.borderRadius
25 
  }
26 
}))
27 
 
2268 stevensc 28 
export function Widget({ children, styles, ...props }) {
29 
  return (
30 
    <WidgetContainer sx={styles} {...props}>
31 
      {children}
32 
    </WidgetContainer>
33 
  )
2261 stevensc 34 
}
35 
 
36 
export function WidgetHeader({
37 
  title = '',
38 
  subheader = '',
39 
  avatar = '',
2274 stevensc 40 
  optionsIcon,
2261 stevensc 41 
  options = [],
2270 stevensc 42 
  styles,
2261 stevensc 43 
  ...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 
 
52 
  return (
53 
    <CardHeader
2262 stevensc 54 
      avatar={avatar ? <Avatar alt={avatar.alt} src={avatar.src} /> : null}
2261 stevensc 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 
          >
2274 stevensc 67 
            {optionsIcon ?? <MoreVert />}
2261 stevensc 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 
            }}
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 
      }
98 
      title={title}
99 
      subheader={subheader}
2262 stevensc 100 
      titleTypographyProps={{
2263 stevensc 101 
        sx: { fontSize: '16px', fontWeight: 600, color: 'var(--title-color)' }
2262 stevensc 102 
      }}
103 
      subheaderTypographyProps={{
2263 stevensc 104 
        sx: { fontSize: '14px', color: 'var(--subtitle-color)' }
2262 stevensc 105 
      }}
2275 stevensc 106 
      sx={{ padding: 1, paddingBottom: 0, ...styles }}
2261 stevensc 107 
      {...props}
108 
    />
109 
  )
110 
}
111 
 
2270 stevensc 112 
export function WidgetBody({ children, styles, ...props }) {
113 
  return (
2275 stevensc 114 
    <CardContent sx={{ padding: 1, ...styles }} {...props}>
2270 stevensc 115 
      {children}
116 
    </CardContent>
117 
  )
2261 stevensc 118 
}
119 
 
2270 stevensc 120 
export function WidgetActions({ children, styles, ...props }) {
2261 stevensc 121 
  return (
2275 stevensc 122 
    <CardActions
123 
      sx={{ padding: 1, paddingTop: 0, ...styles }}
124 
      disableSpacing
125 
      {...props}
126 
    >
2261 stevensc 127 
      {children}
128 
    </CardActions>
129 
  )
130 
}
131 
 
132 
export function WidgetMedia({
133 
  src = '',
134 
  height = 200,
135 
  width = 200,
136 
  alt = '',
137 
  component = 'img',
2270 stevensc 138 
  styles,
2261 stevensc 139 
  ...props
140 
}) {
141 
  return (
142 
    <CardMedia
143 
      alt={alt}
144 
      component={component}
145 
      height={height}
146 
      image={src}
147 
      width={width}
2270 stevensc 148 
      sx={styles}
2261 stevensc 149 
      {...props}
150 
    />
151 
  )
152 
}
153 
 
154 
Widget.Header = WidgetHeader
155 
Widget.Body = WidgetBody
156 
Widget.Actions = WidgetActions
157 
Widget.Media = WidgetMedia
158 
 
159 
export default Widget