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;