Home Reference Source Repository

src/material/InfoSelectField.js

import React from 'react';
import PropTypes from 'prop-types';

import SelectField from 'material-ui/SelectField';

/**
 * Material-ui [SelectField](http://www.material-ui.com/#/components/select-field) extended with an info field.
 *
 * ```
 * <InfoSelectField
 *     floatingLabelText="My text field"
 *     infoText="With extra infotext added"
 *     wrapStyle={{flex: 1}}
 *     required={true}
 * >
 *     {items.map((item) => (
 *         <MenuItem
 *             key={item.key}
 *             value={item.key}
 *             primaryText={item.text}
 *             insetChildren={true}
 *             checked={this.state.selected === item.key}
 *         />
 *     ))}
 * </InfoSelectField>
 * ```
 */
class InfoSelectField extends React.Component {
    /**
     * @type {Object}
     * @property {Node} children MenuItems to select from.
     * @property {string} infoText
     * @property {Object} wrapStyle Styles added to wrapping element.
     * @property {boolean} fullWidth Default false.
     * @property {Node} floatingLabelText
     * @property {boolean} required Mark field as required. Default false.
     */
    static propTypes = {
        children: PropTypes.node,
        infoText: PropTypes.string,
        wrapStyle: PropTypes.object,
        fullWidth: PropTypes.bool,
        floatingLabelText: PropTypes.node,
        required: PropTypes.bool,
    };

    /**
     * @type {Object}
     * @property {Object} muiTheme Theme
     */
    static contextTypes = {
        muiTheme: PropTypes.object.isRequired,
    };

    /**
     * @return {Node}
     */
    render() {
        const {
            children,
            infoText,
            wrapStyle,
            fullWidth,
            required,
            floatingLabelText,
            ...other
        } = this.props;

        const { muiTheme } = this.context;

        const floatinglabel = floatingLabelText ? required ? (<span>{floatingLabelText} <span style={{color: muiTheme.baseTheme.palette.accent1Color}}>*</span></span>) : floatingLabelText : null;
        return (
            <div style={Object.assign({width: fullWidth ? '100%' : 256, display: 'inline-block'}, wrapStyle)}>
                <SelectField {...other}
                    fullWidth={fullWidth}
                    floatingLabelText={floatinglabel}
                >
                    {children}
                </SelectField>
                <div style={{
                    color: muiTheme.textField.hintColor,
                    fontSize: '0.8rem',
                    width: fullWidth ? '100%' : 256,
                }}>{infoText}</div>
            </div>
        );
    }
}

export default InfoSelectField;