#53: DropDown can be closed from the inside

PzYon · Aug 3, 2018 · 97c207c · 97c207c
1 parent 439015f
commit 97c207c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/client/src/common/searchBox/SearchBox.tsx b/client/src/common/searchBox/SearchBox.tsx
@@ -3,6 +3,7 @@ import * as React from "react";
 import { ChangeEvent, ReactNode } from "react";
 import styled from "styled-components";
 import { StyleConstants } from "../../styling/StyleConstants";
+import { If } from "../If";
 import { DropDown } from "./dropDown/DropDown";
 import { IDropDownItemGroup } from "./dropDown/IDropDownItemGroup";
 import { SelectedKeywords } from "./SelectedKeywords";
@@ -90,7 +91,15 @@ export class SearchBox extends React.Component<ISearchBoxProps, ISearchBoxState>
             placeholder={this.state.hidePlaceholder ? "" : this.props.placeholder}
           />
         </InnerContainerDiv>
-        {this.state.showDropDown && <DropDown groups={this.props.dropDownItemGroups} />}
+        <If
+          value={this.state.showDropDown}
+          render={() => (
+            <DropDown
+              groups={this.props.dropDownItemGroups}
+              onClose={() => this.setState({ showDropDown: false })}
+            />
+          )}
+        />
       </ContainerDiv>
     );
   }

diff --git a/client/src/common/searchBox/dropDown/DropDown.tsx b/client/src/common/searchBox/dropDown/DropDown.tsx
@@ -49,8 +49,18 @@ const GroupItem = styled.li`
   }
 `;
 
+const Closer = styled.span`
+  position: absolute;
+  top: 0;
+  right: 0.5rem;
+  cursor: pointer;
+  font-weight: bold;
+  color: ${StyleConstants.colors.accent};
+`;
+
 export interface ISuggestionsProps {
   groups: IDropDownItemGroup[];
+  onClose: () => void;
 }
 
 interface ISuggestionsState {
@@ -75,6 +85,7 @@ export class DropDown extends React.PureComponent<ISuggestionsProps, ISuggestion
 
     return (
       <ContainerDiv>
+        <Closer onClick={this.props.onClose}>x</Closer>
         {groups.map((g: IDropDownItemGroup, index: number) => {
           return (
             <GroupContainerDiv key={g.title || index}>