Skip to content

Instantly share code, notes, and snippets.

@ctavan
Created September 18, 2017 20:50
Show Gist options
  • Save ctavan/0a5d192a9e0b66b649f69f79e27865e0 to your computer and use it in GitHub Desktop.
Save ctavan/0a5d192a9e0b66b649f69f79e27865e0 to your computer and use it in GitHub Desktop.
import PropTypes from 'prop-types';
import React from 'react';
import Input, { InputLabel } from 'material-ui/Input';
import FormControl from 'material-ui/Form/FormControl';
import FormHelperText from 'material-ui/Form/FormHelperText';
import MenuItem from 'material-ui/Menu/MenuItem';
import Select from 'material-ui/Select';
const SelectFieldBase = (props) => {
const {
autoComplete,
autoFocus,
children,
className,
defaultValue,
disabled,
error,
id,
inputClassName,
InputClassName,
inputProps: inputPropsProp,
InputProps,
inputRef,
label,
labelClassName,
InputLabelProps,
helperText,
helperTextClassName,
FormHelperTextProps,
fullWidth,
required,
type,
multiline,
multiple,
name,
placeholder,
rootRef,
rows,
rowsMax,
value,
onChange,
...other
} = props;
let inputProps = inputPropsProp;
if (inputClassName) {
inputProps = {
className: inputClassName,
...inputProps,
};
}
return (
<FormControl
fullWidth={fullWidth}
ref={rootRef}
className={className}
error={error}
required={required}
{...other}
>
{label && (
<InputLabel htmlFor={id} className={labelClassName} {...InputLabelProps}>
{label}
</InputLabel>
)}
<Select
autoComplete={autoComplete}
autoFocus={autoFocus}
className={InputClassName}
defaultValue={defaultValue}
disabled={disabled}
multiline={multiline}
multiple={multiple}
name={name}
rows={rows}
rowsMax={rowsMax}
type={type}
value={value}
id={id}
inputProps={inputProps}
inputRef={inputRef}
placeholder={placeholder}
onChange={event => onChange(event.target.value)}
input={<Input id={id} />}
{...InputProps}
>
{children}
</Select>
{helperText && (
<FormHelperText className={helperTextClassName} {...FormHelperTextProps}>
{helperText}
</FormHelperText>
)}
</FormControl>
);
};
const SelectField = ({ options, ...props }) => (
<SelectFieldBase {...props}>
{options.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label !== undefined ? option.label : option.value}
</MenuItem>
))}
</SelectFieldBase>
);
SelectField.propTypes = {
options: PropTypes.arrayOf(PropTypes.shape({
value: PropTypes.node.isRequired,
label: PropTypes.string,
})).isRequired,
};
export default SelectField;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment