4dbf51f28c
Summary: Was getting error that the label for Select should be using htmlFor not for. found that when wrapping with JSX - changing this inside select fixes this errorlog. Reviewed By: passy Differential Revision: D16264103 fbshipit-source-id: 6a19d723a8356403ba4a169e0b160fed7e137670
90 lines
2.1 KiB
JavaScript
90 lines
2.1 KiB
JavaScript
/**
|
|
* Copyright 2018-present Facebook.
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
* @format
|
|
*/
|
|
|
|
import {Component} from 'react';
|
|
import Text from './Text';
|
|
import styled from '../styled';
|
|
|
|
const Label = styled('label')({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
});
|
|
|
|
const LabelText = styled(Text)({
|
|
fontWeight: '500',
|
|
marginRight: 5,
|
|
});
|
|
|
|
const SelectMenu = styled('select')(({grow}) => ({
|
|
flexGrow: grow ? 1 : null,
|
|
}));
|
|
|
|
/**
|
|
* Dropdown to select from a list of options
|
|
*/
|
|
export default class Select extends Component<{
|
|
/** Additional className added to the element */
|
|
className?: string,
|
|
/** Additional className added to the element */
|
|
options: {
|
|
[key: string]: string,
|
|
},
|
|
/** DEPRECATED: Callback when the selected value changes. The callback is called with the displayed value. */
|
|
onChange?: (value: string) => void,
|
|
|
|
/** Callback when the selected value changes. The callback is called with the key for the displayed value */
|
|
onChangeWithKey?: (key: string) => void,
|
|
|
|
/** Selected key */
|
|
selected?: ?string,
|
|
/** Label shown next to the dropdown */
|
|
label?: string,
|
|
/** Select box should take all available space */
|
|
grow?: boolean,
|
|
}> {
|
|
selectID: string = Math.random().toString(36);
|
|
|
|
onChange = (event: Object) => {
|
|
if (this.props.onChangeWithKey) {
|
|
this.props.onChangeWithKey(event.target.value);
|
|
}
|
|
if (this.props.onChange) {
|
|
this.props.onChange(this.props.options[event.target.value]);
|
|
}
|
|
};
|
|
|
|
render() {
|
|
const {className, options, selected, label, grow} = this.props;
|
|
|
|
let select = (
|
|
<SelectMenu
|
|
grow={grow}
|
|
id={this.selectID}
|
|
onChange={this.onChange}
|
|
className={className}
|
|
value={selected || ''}>
|
|
{Object.keys(options).map((key, index) => (
|
|
<option value={key} key={index}>
|
|
{options[key]}
|
|
</option>
|
|
))}
|
|
</SelectMenu>
|
|
);
|
|
|
|
if (label) {
|
|
select = (
|
|
<Label htmlFor={this.selectID}>
|
|
<LabelText>{label}</LabelText>
|
|
{select}
|
|
</Label>
|
|
);
|
|
}
|
|
|
|
return select;
|
|
}
|
|
}
|