# All files / components/Table TableControls.js

0% Statements 0/58
0% Branches 0/19
0% Functions 0/7
0% Lines 0/15

    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
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126

     import React from 'react';
    import PropTypes from 'prop-types';
    import styled from 'styled-components';
    import H1 from '../H';
    import TableControlsContainer from './styles/TableControlsContainer';
    import TableControlsRow from './styles/TableControlsRow';
    import TableControlsIcons from './styles/TableControlsIcons';
    import DefaultAnchor from 'components/Anchor';

    class TableControls extends React.Component {
      static propTypes = {
        /**
         * Show a delete button.
         */
        enableDelete: PropTypes.bool,
        /**
         * Show an add button.
         */
        enableAdd: PropTypes.bool,
        /**
         * Show a search button.
         */
        enableSearch: PropTypes.bool,
        /**
         * A title to give for the table (optional).
         */
        title: PropTypes.string,
        /**
         * Any other things you'd like to render below the title and the main controls.
         */
        children: PropTypes.node,
        /**
         * Called when the user clicks the delete button.
         */
        onDelete: PropTypes.func,
        /**
         * Called when the user clicks the add button.
         */
        onAdd: PropTypes.func,
        /**
         * Called when the user clicks the search button.
         */
        onSearch: PropTypes.func,
        /**
         * Adds a class name to the container element.
         */
        className: PropTypes.string,
        /**
         * Adds an id to the container element.
         */
        id: PropTypes.string,
        /**
         * A component to render the containing element
         */
        Container: PropTypes.func,
        /**
         * A component to render the controls row, including header and icons
         */
        ControlsRow: PropTypes.func,
        /**
         * A component to render the container for icons. Mainly controls font size.
         */
        ControlsIcons: PropTypes.func,
        /**
         * A component to render an Anchor, defaults to library Anchor
         */
        Anchor: PropTypes.func,
      };

      static defaultProps = {
        enableDelete: false,
        enableAdd: false,
        enableSearch: false,
        title: null,
        children: null,
        onDelete: () => null,
        onAdd: () => null,
        onSearch: () => null,
        className: null,
        id: null,
        Container: TableControlsContainer,
        ControlsRow: TableControlsRow,
        ControlsIcons: TableControlsIcons,
        Anchor: DefaultAnchor,
      };

      render() {
        const {
          title,
          enableDelete,
          enableAdd,
          enableSearch,
          children,
          onDelete,
          onAdd,
          id,
          className,
          onSearch,
          Container,
          ControlsRow,
          ControlsIcons,
          Anchor,
        } = this.props;

        if (!title && !enableAdd && !enableDelete && !enableSearch && !children) {
          return null;
        }

        return (
          <Container>
            <ControlsRow id={id} className={className}>
              <H1>{title}</H1>
              <ControlsIcons>
                {enableAdd ? <Anchor onClick={onAdd} icon="plusMath" /> : null}
                {enableSearch ? <Anchor onClick={onSearch} icon="search" /> : null}
                {enableDelete ? <Anchor onClick={onDelete} icon="delete3" /> : null}
              </ControlsIcons>
            </ControlsRow>
            {children}
          </Container>
        );
      }
    }

    export default TableControls;