4ad072aa2c
Summary: _typescript_ Reviewed By: priteshrnandgaonkar Differential Revision: D16828872 fbshipit-source-id: 31c7a6604ab5c9749bce41bb81f6b8acb56e846b
91 lines
2.2 KiB
TypeScript
91 lines
2.2 KiB
TypeScript
/**
|
|
* 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 'react-emotion';
|
|
import React from 'react';
|
|
|
|
const Label = styled('label')({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
});
|
|
|
|
const LabelText = styled(Text)({
|
|
fontWeight: 500,
|
|
marginRight: 5,
|
|
});
|
|
|
|
const SelectMenu = styled('select')(({grow}: {grow?: boolean}) => ({
|
|
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 | null | undefined;
|
|
/** 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: React.ChangeEvent<HTMLSelectElement>) => {
|
|
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;
|
|
}
|
|
}
|