Home Reference Source Repository

src/material/InfoTextField.js

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

import TextField from 'material-ui/TextField';

/**
 * Material-ui [TextField](http://www.material-ui.com/#/components/text-field) extended with an info field.
 *
 * ```
 * <InfoTextField
 *     floatingLabelText="My text field"
 *     infoText="With extra infotext added"
 *     wrapStyle={{flex: 1}}
 *     required={true}
 * />
 * ```
 */
class InfoTextField extends React.Component {
    /**
     * @type {Object}
     * @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 = {
        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 {
            infoText,
            wrapStyle,
            fullWidth,
            floatingLabelText,
            required,
            ...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)}>
                <TextField {...other}
                    floatingLabelText={floatinglabel}
                    fullWidth={fullWidth}
                />
                <div style={{
                    color: muiTheme.textField.hintColor,
                    fontSize: '0.8rem',
                    width: fullWidth ? '100%' : 256,
                }}>{infoText}</div>
            </div>
        );
    }
}

export default InfoTextField;