# All files / components/Table TableControls.js

12.5% Statements 1/8
0% Branches 0/13
0% Functions 0/4
12.5% Lines 1/8

    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
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136

    5x

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

    const TableControlsIcon = BaseIcon.extend`
      font-size: 21px;
    `;

    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
         */
        ControlsRow: PropTypes.func,
        /**
         * A component to render icons in the controls
         */
        Icon: 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,
        Icon: TableControlsIcon,
      };

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

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

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

    export default TableControls;