# All files / behaviors/ExpandToggle ExpandToggle.js

5.26% Statements 1/19
0% Branches 0/6
0% Functions 0/6
5.26% Lines 1/19

    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

    5x

     import React from 'react';
    import PropTypes from 'prop-types';
    import _ from 'lodash';
    import { Collapse } from 'react-collapse';

    /**
     * A prototypical accordion element with no styling. Renders one element which can be
     * clicked to toggle expanded state, and an expandable content area.
     */
    class ExpandToggle extends React.Component {
      static propTypes = {
        /**
         * Sets the id of the containing collapsible element
         */
        id: PropTypes.string,
        /**
         * Sets the className of the containing collapsible element
         */
        className: PropTypes.string,
        /**
         * Callback for toggle events
         */
        onToggle: PropTypes.func,
        /**
         * Content to render within the toggle area. You may optionally pass a function,
         * which will be called with the current toggle on/off state.
         */
        toggleContent: PropTypes.node.isRequired,
        /**
         * Override ('control') toggling behavior, disabling default internal toggle state
         */
        isExpanded: PropTypes.bool,
        /**
         * Content to render inside the collapsible area
         */
        children: PropTypes.node.isRequired,
        /**
         * Whether to start expanded
         */
        startExpanded: PropTypes.bool,
      };

      static defaultProps = {
        id: null,
        className: null,
        onToggle: () => null,
        isExpanded: null,
        startExpanded: false,
      };

      constructor(props) {
        super(props);
        this.state = {
          internalIsExpanded: props.startExpanded,
        };
      }

      handleToggle = () => {
        if (this.props.onToggle) {
          this.props.onToggle(this.calcIsExpanded());
        }
        this.setState({ internalIsExpanded: !this.state.internalIsExpanded });
      };

      calcIsExpanded = () => {
        const { isExpanded } = this.props;
        const { internalIsExpanded } = this.state;
        if (isExpanded === null) {
          return internalIsExpanded;
        }

        return isExpanded;
      };

      renderToggle = () => {
        const { toggleContent } = this.props;
        if (_.isFunction(toggleContent)) {
          return toggleContent(this.calcIsExpanded());
        }
        return toggleContent;
      };

      render() {
        const isExpanded = this.calcIsExpanded();
        const { children, id, className } = this.props;

        return (
          <div id={id} className={className}>
            <div style={{ cursor: 'pointer' }} onClick={this.handleToggle}>
              {this.renderToggle()}
            </div>
            <Collapse isOpened={isExpanded}>{children}</Collapse>
          </div>
        );
      }
    }

    ExpandToggle.usage = `
    \`\`\`
    <ExpandToggle
      toggleContent={<Label>Click me</Label>}
      startExpanded={false}
    >
      Stuff!
    </ExpandToggle>

    <ExpandToggle
      isExpanded={true}
      toggleContent={<Label>Won't do anything</Label>}
    >
      This one won't toggle, expand state is overridden to true!
    </ExpandToggle>
    \`\`\`
    `;

    export default ExpandToggle;