Emoji picker

close #78 (closed)

This component is used as was discussed in issue

src/components/common/autocomplete/autocomplete.tsx

@@ -3,54 +3,58 @@ import { Popover, openHandler } from '../popover/popover'
 import Account from '../../../entities/account'
 import { ProfileSearchResult } from '../../profile_card/profile_search_result'
 import Icons from '../icons/icons'
+import { AUTOCOMPLETE_TYPES } from '../../../constants'
+import { EmojiSearchResult } from '../../emoji_search_result/emoji_search_result'
+import { EmojiClickEventDetail } from 'emoji-picker-element/shared'
 
 interface AutocompleteType {
+  children?: any,
+  ref: any,
   _component?: any,
-  results: Account[],
+  results: Account[] | EmojiClickEventDetail[],
   onClose?: Function,
-  type: string,
   onSelect?: Function,
   keydown?: any,
-  isLoading: boolean
+  isLoading?: boolean,
 }
 interface AutocompleteState {
   selectedIdx: number,
   isOpen: boolean,
+  type: string,
 }
 
-export const AUTOCOMPLETE_TYPES: { [key: string]: { name: string, char: string } } = {
-  users: {
-    name: 'users',
-    char: '@'
-  }
-}
 export class Autocomplete extends Component<AutocompleteType, AutocompleteState> {
   constructor(props: AutocompleteType) {
     super(props)
     this.state = {
       selectedIdx: 0,
       isOpen: false,
+      type: AUTOCOMPLETE_TYPES.users.name,
     }
   }
   autocomplete: React.RefObject<any> = React.createRef()
   resultsContainer: React.RefObject<any> = React.createRef()
-  open = (e: any) => {
-    this.setState({ isOpen: true })
-    openHandler(e, this.autocomplete)
+  open = async (e: any, type: string) => {
+    this.setState({ isOpen: true, type })
+    await openHandler(e, this.autocomplete)
   }
   close = () => {
     this.autocomplete.current.close()
-    this.setState({ selectedIdx: 0, isOpen: false })
+    this.setState({
+      selectedIdx: 0,
+      isOpen: false,
+      type: '',
+    })
   }
-  onSelect = (item?: Account) => {
+  onSelect = (item?: Account | EmojiClickEventDetail) => {
     const { onSelect, results } = this.props
-    const { selectedIdx } = this.state
+    const { selectedIdx, type } = this.state
 
-    onSelect && onSelect(item || results[selectedIdx])
+    onSelect && onSelect({ res: item || results[selectedIdx], type })
     this.close()
   }
   setScrollPosition = () => {
-    const resultNodesList = this.resultsContainer.current.querySelectorAll('.profile-search-result')
+    const resultNodesList = this.resultsContainer.current.querySelectorAll(AUTOCOMPLETE_TYPES[this.state.type].searchComponentClass)
     const container = document.querySelectorAll('.autocomplete .popover-content')
 
     container[0].scrollTop  = resultNodesList[this.state.selectedIdx].offsetTop
@@ -103,12 +107,20 @@ export class Autocomplete extends Component<AutocompleteType, AutocompleteState>
     highlighted={key === this.state.selectedIdx}
   />)
 
+  renderEmojiResult = (emoji: EmojiClickEventDetail, key: number) => (<EmojiSearchResult
+    onClick={() => this.onSelect(emoji)}
+    key={key}
+    emoji={emoji}
+    highlighted={key === this.state.selectedIdx}
+  />)
+
   render() {
-    const { type, results, onClose, isLoading } = this.props
+    const { results, onClose, isLoading, children } = this.props
+    const { type } = this.state
 
     return (
       <div onKeyDown={this.onKeyDown}>
-        {this.props.children}
+        {children}
         <Popover
           ref={this.autocomplete}
           onClose={onClose}
@@ -119,12 +131,12 @@ export class Autocomplete extends Component<AutocompleteType, AutocompleteState>
             && <div className='w-6 h-6 mx-auto my-2 text-secondary'>
               <Icons.Cog className='w-6 h-6 a-loader-spin' />
             </div>}
-            <ul ref={this.resultsContainer}>
-              {results.map((item: Account, idx: number) => (type === AUTOCOMPLETE_TYPES.users.name
-                ? this.renderUserResult(item, idx)
-                : JSON.stringify(item))
-              )}
-            </ul>
+            {type === AUTOCOMPLETE_TYPES.users.name && <ul ref={this.resultsContainer}>
+              {(results as Account[]).map((item: Account, idx: number) => this.renderUserResult(item, idx))}
+            </ul>}
+            {type === AUTOCOMPLETE_TYPES.emojis.name && <ul ref={this.resultsContainer}>
+              {(results as EmojiClickEventDetail[]).map((item: EmojiClickEventDetail, idx: number) => this.renderEmojiResult(item, idx))}
+            </ul>}
         </Popover>
       </div>