Function TextInput

client/src/components/ui/SearchBox/TextInput/index.tsx:41–79

({ handleReturn, queryInfo }: Props)

}

const TextInput = ({ handleReturn, queryInfo }: Props) => {
  const [editorState, setEditorState] = useState(stateFor(queryInfo))
  const [mentionListOpen, setMentionListOpen] = useState(false)
  const [hasFocus, setHasFocus] = useState(false)
  const editor = useRef(null)

  const wrappedHandleReturn = useCallback((event: KeyboardEvent, nextEditorState: EditorState) => {
    if (!mentionListOpen) {
      handleReturn(event, nextEditorState)
      return 'handled'
    }
    return 'not-handled'
  }, [mentionListOpen])

  const onFocus = useCallback(() => setHasFocus(true), [setHasFocus])
  const onBlur = useCallback(() => setHasFocus(false), [setHasFocus])
  const focus = hasFocus ? 'focus' : ''

  return (
    <div className={`textInputTextInput form-control ${focus}`}>
      <Editor
        ref={editor}
        editorState={editorState}
        handleReturn={wrappedHandleReturn}
        onBlur={onBlur}
        onChange={setEditorState}
        onFocus={onFocus}
        placeholder="Search"
        plugins={plugins}
        stripPastedStyles
      />
      <TopicSuggestions
        Suggestions={MentionSuggestions}
        setMentionListOpen={setMentionListOpen}
        isOpen={mentionListOpen}
      />
    </div>
  )
}

export default TextInput