# All files / layouts/Form FieldWrapper.js

20% Statements 2/10
0% Branches 0/10
0% Functions 0/4
20% Lines 2/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

    5x

    5x

     import React from 'react';
    import PropTypes from 'prop-types';
    import styled from 'styled-components';
    import Label from '../../components/Label';
    import HelpText from '../../components/HelpText';
    import Callout from '../../components/Callout';
    import warning from 'warning';

    export const Container = styled.div`
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin: ${({ theme }) => theme.input.margin};

      &:last-child {
        margin-right: 0;
      }
    `;

    class FieldWrapper extends React.Component {
      static propTypes = {
        /**
         * Indicates whether the user can interact with the field.
         */
        disabled: PropTypes.bool,
        /**
         * Indicates whether the field is required for form submission.
         */
        required: PropTypes.bool,
        /**
         * Content of the label above the field.
         */
        label: PropTypes.string,
        /**
         * Content of the help text below the field.
         */
        helpText: PropTypes.string,
        /**
         * Content of the callout displayed when the user hovers the field.
         */
        callout: PropTypes.node,
        /**
         * The field input itself.
         */
        children: PropTypes.node.isRequired,
        /**
         * Adds an id to the field wrapper container.
         */
        id: PropTypes.string,
        /**
         * Adds a class name to the field wrapper container.
         */
        className: PropTypes.string,
        /**
         * An error message related to this field
         */
        error: PropTypes.string,
      };

      static defaultProps = {
        disabled: false,
        required: false,
        label: null,
        id: null,
        className: null,
        type: 'text',
        helpText: null,
        callout: null,
        error: null,
      };

      componentDidMount() {
        warning(true, 'DEPRECATED: the Field system is now deprecated. Please use Flow instead. (from FieldWrapper)');
      }

      renderChildren() {
        const { children, callout } = this.props;
        if (callout) {
          return <Callout content={callout}>{children}</Callout>;
        }

        return children;
      }

      render() {
        const { label, disabled, required, helpText, id, className, error } = this.props;
        return (
          <Container id={id} className={className}>
            {label ? <Label required={required} disabled={disabled}>{label}</Label> : null}
            {this.renderChildren()}
            {helpText || error ? <HelpText error={!!error}>{error || helpText}</HelpText> : null}
          </Container>
        );
      }
    }

    FieldWrapper.usage = `
    # FieldWrapper

    Mainly used by other input classes. It adds the label and help text above and below its children.

    \`\`\`
    <FieldWrapper label="foo" helpText="bar">
      <TextBox />
    </FieldWrapper>
    \`\`\`
    `;

    export default FieldWrapper;