Select

Summary: _typescript_

Reviewed By: priteshrnandgaonkar

Differential Revision: D16828872

fbshipit-source-id: 31c7a6604ab5c9749bce41bb81f6b8acb56e846b

src/ui/components/Select.tsx

@@ -0,0 +1,90 @@
+/**
+ * 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;
+  }
+}