Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 2946 Rev 2947
Línea 1... Línea 1...
1 
import React, { useMemo, useState } from 'react'
 1 
import React, { useMemo, useState } from 'react'
2 
import { useSelector } from 'react-redux'
 2 
import { useSelector } from 'react-redux'
- 
 
 3 
import {
- 
 
 4 
  Accordion,
- 
 
 5 
  AccordionDetails,
- 
 
 6 
  AccordionSummary,
- 
 
 7 
  Avatar,
- 
 
 8 
  List,
- 
 
 9 
  ListItemAvatar,
- 
 
 10 
  ListItemButton,
- 
 
 11 
  ListItemText
3 
import { IconButton, styled, Typography } from '@mui/material'
 12 
} from '@mui/material'
4 
import { ExpandLess, ExpandMore } from '@mui/icons-material'
 13 
import { ExpandMore } from '@mui/icons-material'
Línea 5... Línea 14...
5 
 
 14 
 
Línea 6... Línea 15...
6 
import { useFetch } from '@hooks'
 15 
import { useFetch } from '@hooks'
7 
 
 16 
 
8 
import Widget from '@components/UI/Widget'
 - 
 
9 
import List from '@components/UI/List'
 - 
 
10 
 
 - 
 
11 
const HelperItem = styled('div')`
 - 
 
12 
  cursor: pointer;
 - 
 
13 
  display: flex;
 - 
 
14 
  align-items: center;
 - 
 
15 
  justify-content: space-between;
 - 
 
Línea 16... Línea 17...
16 
  width: 100%;
 17 
import Widget from '@components/UI/Widget'
17 
`
 18 
import { Link } from 'react-router-dom'
Línea 18... Línea 19...
18 
 
 19 
 
Línea 31... Línea 32...
31 
    </Widget>
 32 
    </Widget>
32 
  )
 33 
  )
33 
}
 34 
}
Línea 34... Línea 35...
34 
 
 35 
 
35 
const Item = ({ url = '/helpers/my-groups', title = 'Mis grupos' }) => {
 - 
 
36 
  const [displayMenu, setDisplayMenu] = useState(false)
 - 
 
37 
  const [lookMore, setLookMore] = useState(false)
 36 
const Item = ({ url = '/helpers/my-groups', title = 'Mis grupos' }) => {
- 
 
 37 
  const labels = useSelector(({ intl }) => intl.labels)
Línea 38... Línea 38...
38 
  const labels = useSelector(({ intl }) => intl.labels)
 38 
  const [lookMore, setLookMore] = useState(false)
Línea 39... Línea 39...
39 
 
 39 
 
40 
  const { data } = useFetch(url, [])
 40 
  const { data } = useFetch(url, [])
41 
 
 41 
 
42 
  const items = useMemo(() => {
 42 
  const items = useMemo(() => {
Línea 43... Línea -...
43 
    if (!lookMore) return [...data].slice(0, 3)
 - 
 
44 
    return data
 - 
 
45 
  }, [lookMore, data])
 43 
    if (!lookMore) return [...data].slice(0, 3)
46 
 
 44 
    return data
- 
 
 45 
  }, [lookMore, data])
- 
 
 46 
 
47 
  const toggleMenu = () => setDisplayMenu(!displayMenu)
 47 
  return (
48 
 
 48 
    <Accordion>
49 
  return (
 - 
 
50 
    <>
 49 
      <AccordionSummary expandIcon={<ExpandMore />}>{title}</AccordionSummary>
51 
      <HelperItem>
 50 
      <AccordionDetails>
52 
        <Typography variant='overline'>{title}</Typography>
 51 
        <List>
53 
 
 52 
          {items.map(({ id, name, profile, image }) => (
54 
        <IconButton onClick={toggleMenu}>
 53 
            <ListItemButton key={id} to={profile} LinkComponent={Link}>
55 
          {displayMenu ? <ExpandLess /> : <ExpandMore />}
 - 
 
56 
        </IconButton>
 - 
 
57 
      </HelperItem>
 - 
 
58 
 
 54 
              <ListItemAvatar>
59 
      <List
 55 
                <Avatar src={image} />
60 
        styles={{
 - 
 
61 
          width: '100%',
 - 
 
62 
          height: displayMenu ? 'auto' : 0,
 - 
 
63 
          overflow: 'hidden'
 - 
 
64 
        }}
 56 
              </ListItemAvatar>
65 
      >
 57 
 
66 
        {items.map(({ id, name, profile, image }) => (
 58 
              <ListItemText primary={name} />
67 
          <List.Item key={id} image={image} title={name} url={profile} />
 59 
            </ListItemButton>
68 
        ))}
 60 
          ))}
69 
 
 61 
 
70 
        {data.length > 3 && (
 62 
          {data.length > 3 && (
71 
          <List.Item
 63 
            <ListItemButton onClick={() => setLookMore(!lookMore)}>
72 
            title={lookMore ? labels.view_less : labels.view_more}
 64 
              {lookMore ? labels.view_less : labels.view_more}
73 
            onClick={() => setLookMore(!lookMore)}
 65 
            </ListItemButton>
74 
          />
 66 
          )}
75 
        )}
 67 
        </List>
Línea 76... Línea 68...
76 
      </List>
 68 
      </AccordionDetails>