# All files / layouts/Flow/fields FlowMulti.js

40% Statements 4/10
100% Branches 0/0
0% Functions 0/5
40% Lines 4/10

    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

    5x

    5x

    5x
    5x

     import React from 'react';
    import PropTypes from 'prop-types';
    import styled from 'styled-components';
    import Anchor from '../../../components/Anchor';
    import FlowItem from '../FlowItem';

    const List = styled.ul`
      appearance: none;
      border: 1px solid #e1e1e1;
      width: 100%;
      padding: 2px;
    `;

    const SubFieldContainer = styled.li`
      display: flex;
      flex-direction: row;
      margin: ${({ theme }) => theme.padding.small};

      & > * {
        flex: 1;
      }

      & > *:last-child {
        flex-grow: 0;
        flex-basis: auto;
        flex-shrink: 0;
        margin-left: 8px;
      }

      & label {
        display: none;
      }
    `;

    class FlowMultiField extends React.Component {
      static propTypes = {
        /**
         * redux-form defined fields object.
         */
        fields: PropTypes.shape({
          name: PropTypes.string,
          forEach: PropTypes.func,
          get: PropTypes.func,
          getAll: PropTypes.func,
          insert: PropTypes.func,
          length: PropTypes.number,
          map: PropTypes.func,
          move: PropTypes.func,
          pop: PropTypes.func,
          push: PropTypes.func,
          remove: PropTypes.func,
          removeAll: PropTypes.func,
          shift: PropTypes.func,
          swap: PropTypes.func,
          unshift: PropTypes.func,
        }).isRequired,
        /**
         * Function which renders a field. Function signature is (name, index) => field
         */
        renderField: PropTypes.func.isRequired,
        /**
         * Contents of the label above the fields.
         */
        label: PropTypes.string,
        /**
         * Contents of the help text below the fields.
         */
        helpText: PropTypes.string,
        /**
         * Indicates whether this value is required for form submission.
         */
        required: PropTypes.bool,
        /**
         * Adds an id to the container element.
         */
        id: PropTypes.string,
        /**
         * Adds a class name to the container element.
         */
        className: PropTypes.string,
      };

      static defaultProps = {
        label: null,
        helpText: null,
        required: false,
      };

      renderSubField = (name, index, fields) => (
        <SubFieldContainer key={name}>
          {this.props.renderField(name, index)}
          <Anchor onClick={() => fields.remove(index)}>remove</Anchor>
        </SubFieldContainer>
      );

      render() {
        const { label, helpText, required, id, className, fields } = this.props;
        return (
          <FlowItem
            label={label}
            helpText={helpText}
            required={required}
            id={id}
            className={className}
            flexibleContent
          >
            <List>{fields.map(this.renderSubField)}</List>
            <Anchor onClick={() => fields.push('')}>add</Anchor>
          </FlowItem>
        );
      }
    }

    FlowMultiField.List = List;
    FlowMultiField.SubFieldContainer = SubFieldContainer;

    export default FlowMultiField;