Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3684 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3684 Rev 3719
Línea 1... Línea 1...
1 
import React from 'react';
 1 
import React from 'react';
2 
import { Box, Typography } from '@mui/material';
 2 
import { Box, Typography } from '@mui/material';
3 
 
 3 
 
4 
export function Grid({
 4 
export function Grid({
5 
  items = [],
 5 
  items = [],
6 
  renderItem = () => {},
 6 
  renderItem = () => {},
7 
  emptyMessage = '',
 7 
  emptyMessage = '',
8 
  keyExtractor = (item) => item,
 8 
  keyExtractor = (item) => item,
9 
  columns = 3,
 9 
  columns = 3,
10 
  gap = 1,
 10 
  gap = 1,
11 
  renderFooter
 11 
  renderFooter
12 
}) {
 12 
}) {
13 
  if (!items || !items.length) {
 13 
  if (!items || !items.length) {
14 
    return <Typography>{emptyMessage}</Typography>;
 14 
    return <Typography>{emptyMessage}</Typography>;
15 
  }
 15 
  }
16 
 
 16 
 
17 
  return (
 17 
  return (
18 
    <>
 18 
    <>
19 
      <Box
 19 
      <Box
20 
        sx={{
 20 
        sx={{
21 
          display: 'grid',
 21 
          display: 'grid',
22 
          gridTemplateColumns: { xs: 'repeat(1, 1fr)', md: `repeat(${columns}, 1fr)` },
 22 
          gridTemplateColumns: ({ spacing }) => ({
- 
 
 23 
            xs: 'repeat(1, 1fr)',
- 
 
 24 
            md: `repeat(auto-fill, calc(100% / ${columns} - ${spacing(gap)}))`
- 
 
 25 
          }),
23 
          gap
 26 
          gap
24 
        }}
 27 
        }}
25 
      >
 28 
      >
26 
        {items.map((item, index) => (
 29 
        {items.map((item, index) => (
27 
          <Box key={keyExtractor(item, index)}>{renderItem(item, index)}</Box>
 30 
          <Box key={keyExtractor(item, index)}>{renderItem(item, index)}</Box>
28 
        ))}
 31 
        ))}
29 
      </Box>
 32 
      </Box>
30 
      {renderFooter && renderFooter()}
 33 
      {renderFooter && renderFooter()}
31 
    </>
 34 
    </>
32 
  );
 35 
  );
33 
}
 36 
}