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/chrome/ListView.tsx

@@ -15,6 +15,7 @@ import {
   Button,
   Spacer,
   Checkbox,
+  Radio,
   colors,
   View,
   Tooltip,
@@ -91,11 +92,20 @@ type RowComponentProps = {
   onChange: (name: string, selected: boolean) => void;
   disable: boolean;
   toolTipMessage?: string;
+  type: SelectionType;
 };
 
 class RowComponent extends Component<RowComponentProps> {
   render() {
-    const {id, label, selected, onChange, disable, toolTipMessage} = this.props;
+    const {
+      id,
+      label,
+      selected,
+      onChange,
+      disable,
+      toolTipMessage,
+      type,
+    } = this.props;
     return (
       <FlexColumn>
         <Tooltip
@@ -109,12 +119,22 @@ class RowComponent extends Component<RowComponentProps> {
             <FlexRow>
               <Text> {label} </Text>
               <Spacer />
-              <Checkbox
+              {type === 'multiple' && (
-                checked={selected}
+                <Checkbox
-                onChange={selected => {
+                  checked={selected}
-                  onChange(id, selected);
+                  onChange={selected => {
-                }}
+                    onChange(id, selected);
-              />
+                  }}
+                />
+              )}
+              {type === 'single' && (
+                <Radio
+                  checked={selected}
+                  onChange={selected => {
+                    onChange(id, selected);
+                  }}
+                />
+              )}
             </FlexRow>
           </Padder>
           <Line />
@@ -159,7 +179,7 @@ export default class ListView extends Component<Props, State> {
   };
 
   render() {
-    const {onSubmit} = this.props;
+    const {onSubmit, type} = this.props;
     return (
       <Container>
         <FlexColumn>
@@ -171,6 +191,7 @@ export default class ListView extends Component<Props, State> {
                   id={id}
                   label={label}
                   key={id}
+                  type={type}
                   selected={this.state.selectedElements.has(id)}
                   onChange={this.handleChange}
                   disable={unselectable != null}

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';