# All files / layouts/Form SelectField.js

25% Statements 1/4
100% Branches 0/0
0% Functions 0/2
25% Lines 1/4

    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
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150

    5x

     import React from 'react';
    import PropTypes from 'prop-types';
    import FieldWrapper from './FieldWrapper';
    import Select from '../../components/Select';

    /**
     * DEPRECATED
     *
     * @class SelectField
     * @extends {React.Component}
     */
    class SelectField extends React.Component {
      static propTypes = {
        /**
         * Input props, expected to be passed by redux-form
         */
        input: PropTypes.shape({
          /** The currently selected value */
          value: PropTypes.any,
          /** Event handler for change in value */
          onChange: PropTypes.func,
        }).isRequired,
        /**
         * All possible values
         */
        options: PropTypes.array,
        /**
         * Function to render the display of a value
         */
        renderOption: PropTypes.func,
        /**
         * Can the user select 'none' ?
         */
        allowNone: PropTypes.bool,
        /**
         * Text to show if none is selected
         */
        noneText: PropTypes.string,
        /**
         * Adds a label above the select
         */
        label: PropTypes.string,
        /**
         * Indicates whether the user can interact with this field.
         */
        disabled: PropTypes.bool,
        /**
         * Indicates whether this field is required for form submission.
         */
        required: PropTypes.bool,
        /**
         * Contents of the help text below the field.
         */
        helpText: PropTypes.string,
        /**
         * Generates a React component iteration key from an object.
         */
        selectOptionKey: PropTypes.func,
        /**
         * Optional callout contents if the user hovers the field.
         */
        callout: PropTypes.node,
        /**
         * Adds an id to the input element.
         */
        id: PropTypes.string,
        /**
         * Adds a class name to the input element.
         */
        className: PropTypes.string,
      };

      static defaultProps = {
        options: [],
        renderOption: (val) => '' + val,
        allowNone: true,
        noneText: 'None',
        label: null,
        disabled: false,
        required: false,
        helpText: null,
        selectOptionValue: null,
        callout: null,
      };

      render() {
        const {
          label,
          helpText,
          disabled,
          required,
          input,
          noneText,
          renderOption,
          callout,
          id,
          className,
          computeValue,
          selectOptionKey,
          options,
          allowNone,
        } = this.props;
        return (
          <FieldWrapper
            label={label}
            helpText={helpText}
            disabled={disabled}
            required={required}
            callout={callout}
          >
            <Select
              {...input}
              disabled={disabled}
              required={required}
              id={id}
              className={className}
              renderOption={renderOption}
              selectOptionKey={selectOptionKey}
              computeValue={computeValue}
              options={options}
              allowNone={allowNone}
              noneText={noneText}
            />
          </FieldWrapper>
        );
      }
    }

    SelectField.usage = `
    # SelectField

    A dropdown input which lets you pick from a list of provided items. Supports default input-style props:

    * \`input\`: supplied by Redux Form's Field component, you can also specify this manually. Should contain \`value\` and \`onChange\` at least.
    * \`label\`: a renderable label to go above the component
    * \`helpText\`: some text to be rendered below the component
    * \`disabled\`: disables the component
    * \`required\`: adds a required mark and HTML field validation
    * \`options\`: an array of data
    * \`renderOption\`: a function to transform an option item into some text to show. Defaults to \`val => '' + val\`
    * \`selectOptionKey\`: a function to transform an option into a **unique** key
    * \`callout\`: optional flyout to show on hover

    \`\`\`
    <SelectField label="Choose:" required helpText="Make a choice!" options={['a', 'b']}>
    \`\`\`
    `;

    export default SelectField;