Added a radio button when Listview is used for single select

Summary: Added radio buttons when the listview enforces single selection

Reviewed By: mweststrate

Differential Revision: D19626710

fbshipit-source-id: 9220fad7b0825cac5ba39def4d5e85d671c61da7

src/ui/components/Radio.tsx

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {PureComponent} from 'react';
+import styled from '@emotion/styled';
+import React from 'react';
+
+type RadioProps = {
+  /** Whether the radio button is checked. */
+  checked: boolean;
+  /** Called when a state change is triggered */
+  onChange: (selected: boolean) => void;
+};
+
+const RadioboxContainer = styled.input({
+  display: 'inline-block',
+  marginRight: 5,
+  verticalAlign: 'middle',
+});
+RadioboxContainer.displayName = 'Radiobox:RadioboxContainer';
+
+/**
+ * A radio button to toggle UI state
+ */
+export default class Radio extends PureComponent<RadioProps> {
+  onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    this.props.onChange(e.target.checked);
+  };
+
+  render() {
+    return (
+      <RadioboxContainer
+        type="radio"
+        checked={this.props.checked}
+        onChange={this.onChange}
+      />
+    );
+  }
+}

src/ui/index.tsx

@@ -62,6 +62,7 @@ export {default as MultiLineInput} from './components/MultiLineInput';
 export {default as Textarea} from './components/Textarea';
 export {default as Select} from './components/Select';
 export {default as Checkbox} from './components/Checkbox';
+export {default as Radio} from './components/Radio';
 
 // code
 export {default as CodeBlock} from './components/CodeBlock';