Browse Source

remove behaviorOfResetBtn

Yuki Takei 4 years ago
parent
commit
4d5de8f1fe

+ 0 - 1
packages/app/src/components/PageEditor/LinkEditModal.jsx

@@ -292,7 +292,6 @@ class LinkEditModal extends React.PureComponent {
                 inputName="link"
                 placeholder={t('link_edit.placeholder_of_link_input')}
                 keywordOnInit={this.state.linkInputValue}
-                behaviorOfResetBtn="clear"
                 autoFocus
               />
               <div className="d-none d-sm-block input-group-append">

+ 0 - 1
packages/app/src/components/PagePathAutoComplete.jsx

@@ -41,7 +41,6 @@ const PagePathAutoComplete = (props) => {
       onChange={inputChangeHandler}
       onInputChange={props.onInputChange}
       inputName="new_path"
-      behaviorOfResetBtn="clear"
       placeholder="Input page path"
       keywordOnInit={getKeywordOnInit(initializedPath)}
       autoFocus={props.autoFocus}

+ 14 - 24
packages/app/src/components/SearchTypeahead.tsx

@@ -1,6 +1,6 @@
 import React, {
   FC, ForwardRefRenderFunction, forwardRef, useImperativeHandle,
-  KeyboardEvent, useCallback, useRef, useState,
+  KeyboardEvent, useCallback, useRef, useState, MouseEventHandler,
 } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { AxiosResponse } from 'axios';
@@ -17,15 +17,12 @@ import { IPage } from '~/interfaces/page';
 
 type ResetFormButtonProps = {
   keywordOnInit: string,
-  behaviorOfResetBtn: 'restore' | 'clear',
   input: string,
-  onReset: () => void,
+  onReset: MouseEventHandler,
 }
 
 const ResetFormButton: FC<ResetFormButtonProps> = (props: ResetFormButtonProps) => {
-  const isClearBtn = props.behaviorOfResetBtn === 'clear';
-  const initialKeyword = isClearBtn ? '' : props.keywordOnInit;
-  const isHidden = props.input === initialKeyword;
+  const isHidden = props.input.length === 0;
 
   return isHidden ? (
     <span />
@@ -45,7 +42,6 @@ type Props = TypeaheadProps & {
   keywordOnInit?: string,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   helpElement?: any,
-  behaviorOfResetBtn?: 'restore' | 'clear',
 };
 
 // see https://github.com/ericgio/react-bootstrap-typeahead/issues/266#issuecomment-414987723
@@ -60,7 +56,6 @@ type TypeaheadInstanceFactory = {
 
 const SearchTypeahead: ForwardRefRenderFunction<IFocusable, Props> = (props: Props, ref) => {
   const {
-    keywordOnInit,
     onSearchSuccess, onSearchError, onInputChange, onSubmit,
     emptyLabel, helpElement,
   } = props;
@@ -74,18 +69,18 @@ const SearchTypeahead: ForwardRefRenderFunction<IFocusable, Props> = (props: Pro
 
   const typeaheadRef = useRef<TypeaheadInstanceFactory>(null);
 
+  const focusToTypeahead = () => {
+    const instance = typeaheadRef.current?.getInstance();
+    if (instance != null) {
+      instance.focus();
+    }
+  };
 
   // publish focus()
   useImperativeHandle(ref, () => ({
-    focus() {
-      const instance = typeaheadRef.current?.getInstance();
-      if (instance != null) {
-        instance.focus();
-      }
-    },
+    focus: focusToTypeahead,
   }));
 
-
   const changeKeyword = (text: string | undefined) => {
     const instance = typeaheadRef.current?.getInstance();
     if (instance != null) {
@@ -94,12 +89,12 @@ const SearchTypeahead: ForwardRefRenderFunction<IFocusable, Props> = (props: Pro
     }
   };
 
-  const restoreInitialData = () => {
-    changeKeyword(keywordOnInit);
-  };
+  const resetForm = (e: MouseEvent) => {
+    e.preventDefault();
 
-  const clearKeyword = () => {
+    setInput('');
     changeKeyword('');
+    focusToTypeahead();
   };
 
   /**
@@ -187,9 +182,6 @@ const SearchTypeahead: ForwardRefRenderFunction<IFocusable, Props> = (props: Pro
     inputProps.name = props.inputName;
   }
 
-  const isClearBtn = props.behaviorOfResetBtn === 'clear';
-  const resetForm = isClearBtn ? clearKeyword : restoreInitialData;
-
   const renderMenuItemChildren = (page: IPage) => (
     <span>
       <UserPicture user={page.lastUpdateUser} size="sm" noLink />
@@ -226,7 +218,6 @@ const SearchTypeahead: ForwardRefRenderFunction<IFocusable, Props> = (props: Pro
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         keywordOnInit={props.keywordOnInit!}
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        behaviorOfResetBtn={props.behaviorOfResetBtn!}
         input={input}
         onReset={resetForm}
       />
@@ -239,7 +230,6 @@ const ForwardedSearchTypeahead = forwardRef(SearchTypeahead);
 ForwardedSearchTypeahead.defaultProps = {
   placeholder: '',
   keywordOnInit: '',
-  behaviorOfResetBtn: 'restore',
   autoFocus: false,
 };