feat(mention): use useClickOutside to handle onBlur event

Yoctol · Mar 27, 2019 · 2830512 · 2830512
1 parent f34c4be
commit 2830512
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 14 deletions.
diff --git a/packages/tailor-ui-lab/src/Mention/Mention.tsx b/packages/tailor-ui-lab/src/Mention/Mention.tsx
@@ -9,6 +9,8 @@ import React, {
   useRef,
 } from 'react';
 
+import { useClickOutside } from 'tailor-ui';
+
 import Suggestions from './Suggestions';
 import { Highlights, MentionWrapper, Textarea } from './styles';
 import {
@@ -40,6 +42,7 @@ export interface FilteredSuggestion {
 export type FilteredSuggestions = FilteredSuggestion[];
 
 interface MentionReducerState {
+  isFocus: boolean;
   value: string;
   height: number;
   activeIndex: number;
@@ -66,7 +69,9 @@ interface MentionReducerAction {
     | 'setSpecfiedItemActive'
     | 'updateValue'
     | 'updateHeight'
-    | 'updateCaretPos';
+    | 'updateCaretPos'
+    | 'onFocus'
+    | 'onBlur';
   payload?: any;
 }
 
@@ -77,6 +82,7 @@ interface InitialState {
 
 const initialState = ({ value, suggestions }: InitialState) => ({
   value,
+  isFocus: false,
   height: 0,
   activeIndex: -1,
   caretPos: -1,
@@ -147,6 +153,16 @@ const reducer: Reducer<MentionReducerState, MentionReducerAction> = (
         ...state,
         caretPos: action.payload,
       };
+    case 'onFocus':
+      return {
+        ...state,
+        isFocus: true,
+      };
+    case 'onBlur':
+      return {
+        ...state,
+        isFocus: false,
+      };
     default:
       throw new Error();
   }
@@ -166,6 +182,7 @@ interface MentionProps {
   creatable: boolean;
   highlightInvalid: boolean;
   formatCreateText: FormatCreateText;
+  onBlur?: () => void;
   onChange?: (value: string) => void;
   onMentionCreate: (newMention: string) => void;
 }
@@ -174,6 +191,7 @@ const Mention: FunctionComponent<MentionProps> = ({
   value: valueFromProps,
   defaultValue,
   suggestions,
+  onBlur,
   onChange,
   onMentionCreate,
   disabled,
@@ -184,6 +202,7 @@ const Mention: FunctionComponent<MentionProps> = ({
 }) => {
   const mentionRef = useRef<HTMLTextAreaElement>(null);
   const highlightRef = useRef<HTMLDivElement>(null);
+  const suggestionsRef = useRef<HTMLDivElement>(null);
 
   const cursorMention = useRef<CursorMention>({
     mention: null,
@@ -220,6 +239,18 @@ const Mention: FunctionComponent<MentionProps> = ({
     }
   }, [state.caretPos]);
 
+  useClickOutside({
+    listening: state.isFocus,
+    refs: [suggestionsRef, mentionRef],
+    onClickOutside: () => {
+      if (onBlur) {
+        onBlur();
+      }
+
+      dispatch({ type: 'onBlur' });
+    },
+  });
+
   const resetDropdown = ({ currentTarget }: ResetDropdownType) => {
     const cursor = getMentionCursor(
       currentTarget.value,
@@ -368,10 +399,13 @@ const Mention: FunctionComponent<MentionProps> = ({
     resetDropdown(event);
   };
 
+  const handleOnFocus = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    dispatch({ type: 'onFocus' });
+  };
+
   const composedProps = mergeEventProps(props, {
     onKeyUp: handleKeyUp,
     onKeyDown: handleKeyDown,
-    onBlur: () => dispatch({ type: 'closeDropdown' }),
     onClick: resetDropdown,
     onChange: handleChange,
     onScroll: (event: UIEvent<HTMLTextAreaElement>) => {
@@ -391,6 +425,7 @@ const Mention: FunctionComponent<MentionProps> = ({
         })
       );
     },
+    onFocus: handleOnFocus,
   });
 
   return (
@@ -407,8 +442,15 @@ const Mention: FunctionComponent<MentionProps> = ({
         value={value}
         disabled={disabled}
         {...composedProps}
+        onBlur={(event: ChangeEvent<HTMLTextAreaElement>) => {
+          event.preventDefault();
+          event.stopPropagation();
+
+          dispatch({ type: 'closeDropdown' });
+        }}
       />
       <Suggestions
+        ref={suggestionsRef}
         formatCreateText={formatCreateText}
         dropdownVisible={state.dropdownVisible}
         overlayPosition={state.overlayPosition}

diff --git a/packages/tailor-ui-lab/src/Mention/Suggestions.tsx b/packages/tailor-ui-lab/src/Mention/Suggestions.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useEffect, useRef } from 'react';
+import React, { FunctionComponent, forwardRef, useEffect, useRef } from 'react';
 import { config, useTransition } from 'react-spring';
 
 import { Portal } from 'tailor-ui';
@@ -20,15 +20,17 @@ interface SuggestionsProps {
   onSuggestionClick: (suggestion: FilteredSuggestion) => void;
 }
 
-const Suggestions: FunctionComponent<SuggestionsProps> = ({
-  dropdownVisible,
-  activeIndex,
-  formatCreateText,
-  overlayPosition,
-  filteredSuggestions,
-  onSuggestionClick,
-}) => {
-  const suggestionRef = useRef<HTMLDivElement>(null);
+const Suggestions = forwardRef<any, SuggestionsProps>(function Suggestions(
+  {
+    dropdownVisible,
+    activeIndex,
+    formatCreateText,
+    overlayPosition,
+    filteredSuggestions,
+    onSuggestionClick,
+  },
+  suggestionRef
+) {
   const translations = useTransition(dropdownVisible, null, {
     from: {
       opacity: 0,
@@ -56,7 +58,7 @@ const Suggestions: FunctionComponent<SuggestionsProps> = ({
         suggestionRef.current.scrollTop = activeItemScrollTop;
       }
     }
-  }, [activeIndex]);
+  }, [activeIndex, suggestionRef]);
 
   return (
     <Portal appendFor="mention">
@@ -93,6 +95,6 @@ const Suggestions: FunctionComponent<SuggestionsProps> = ({
       )}
     </Portal>
   );
-};
+});
 
 export default Suggestions;