another round of comments addressed

microsoft · Feb 21, 2019 · 98d36e6 · 98d36e6
1 parent 6dadd4f
commit 98d36e6
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 26 deletions.
diff --git a/docs/src/prototypes/Prototypes.tsx b/docs/src/prototypes/Prototypes.tsx
@@ -9,14 +9,14 @@ interface ComponentPrototypeProps extends PrototypeSectionProps {
   description?: string
 }
 
-export const PrototypeSection: React.SFC<ComponentPrototypeProps> = props => (
+export const PrototypeSection: React.FC<ComponentPrototypeProps> = props => (
   <Box style={{ margin: 20 }}>
     {props.title && <Header as="h1">{props.title}</Header>}
     {props.children}
   </Box>
 )
 
-export const ComponentPrototype: React.SFC<ComponentPrototypeProps> = props => (
+export const ComponentPrototype: React.FC<ComponentPrototypeProps> = props => (
   <Box style={{ marginTop: 20 }}>
     {(props.title || props.description) && (
       <Segment>

diff --git a/docs/src/prototypes/dropdowns/inputWithDropdown.tsx b/docs/src/prototypes/dropdowns/inputWithDropdown.tsx
@@ -30,6 +30,8 @@ class InputWithDropdown extends React.Component<{}, InputWithDropdownState> {
   state = this.initialState
 
   render() {
+    const { dropdownOpen, searchQuery } = this.state
+
     return (
       <>
         <div
@@ -38,34 +40,26 @@ class InputWithDropdown extends React.Component<{}, InputWithDropdownState> {
           onKeyUp={this.handleEditorKeyUp}
           style={editorStyle}
         />
-        {this.renderDropdown()}
+        <CustomPortal mountNodeId="dropdown-mount-node" open={dropdownOpen}>
+          <Dropdown
+            defaultOpen={true}
+            inline
+            search
+            items={atMentionItems}
+            toggleIndicator={null}
+            searchInput={{
+              input: { autoFocus: true, size: searchQuery.length + 1 },
+              onInputKeyDown: this.handleInputKeyDown,
+            }}
+            onSelectedChange={this.handleSelectedChange}
+            onSearchQueryChange={this.handleSearchQueryChange}
+            noResultsMessage="We couldn't find any matches."
+          />
+        </CustomPortal>
       </>
     )
   }
 
-  private renderDropdown = () => {
-    const { dropdownOpen, searchQuery } = this.state
-
-    return (
-      <CustomPortal mountNodeId="dropdown-mount-node" open={dropdownOpen}>
-        <Dropdown
-          defaultOpen={true}
-          inline
-          search
-          items={atMentionItems}
-          toggleIndicator={null}
-          searchInput={{
-            input: { autoFocus: true, size: searchQuery.length + 1 },
-            onInputKeyDown: this.handleInputKeyDown,
-          }}
-          onSelectedChange={this.handleSelectedChange}
-          onSearchQueryChange={this.handleSearchQueryChange}
-          noResultsMessage="We couldn't find any matches."
-        />
-      </CustomPortal>
-    )
-  }
-
   private hideDropdownAndRestoreEditor = (cb?: () => void) => {
     this.setState(this.initialState, () => {
       this.tryFocusEditor()