# All files / layouts/Grid Grid.js

0% Statements 0/45
0% Branches 0/6
0% Functions 0/6
0% Lines 0/13

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66

     import React from 'react';
    import PropTypes from 'prop-types';
    import styled from 'styled-components';
    import get from 'extensions/themeGet';
    import { defaultProps } from 'recompose';

    const GridDiv = styled.div`
      display: grid;
      grid-auto-rows: min-content;
      grid-gap: ${({ gridGap }) => gridGap};
      grid-template-columns: ${({ columns, minSize, maxSize }) =>
        `repeat(${columns}, minmax(${minSize}, ${maxSize}))`};
      & > * {
        grid-column: 1 span;
      }
    `;

    class Grid extends React.PureComponent {
      static propTypes = {
        /**
         * The number of columns to use in the grid. Alternatively, provide "auto-fill"
         * or "auto-fit" to fit rows. See CSS grid for more details.
         */
        columns: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
        /**
         * Minimum column size.
         */
        minSize: PropTypes.string,
        /**
         * Maximum column size. Usually does not need to be set.
         */
        maxSize: PropTypes.string,
        /**
         * Gap size between grid items both horizontally and vertically.
         */
        gridGap: PropTypes.string,
      };

      static defaultProps = {
        minSize: 'min-content',
        maxSize: '1fr',
        gridGap: get('spacing.medium'),
        columns: 'auto-fit',
      };
      render() {
        const { props: { columns, minSize, maxSize, gridGap, children } } = this;
        return (
          <GridDiv
            columns={columns}
            minSize={minSize}
            maxSize={maxSize}
            gridGap={gridGap}
          >
            {children}
          </GridDiv>
        );
      }
    }

    Grid.Small = defaultProps({
      gridGap: get('spacing.extraSmall'),
      minSize: '30px',
    })(Grid);

    export default Grid;