feat search sug

virzs · Aug 13, 2021 · 9d62bdb · 9d62bdb
1 parent 692aab1
commit 9d62bdb
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 22 deletions.
diff --git a/src/components/search-input/searchInput.tsx b/src/components/search-input/searchInput.tsx
@@ -11,6 +11,7 @@ import { Button } from '@material-ui/core';
 import { useIntl } from 'react-intl';
 import EngineChip from './engineChip';
 import { SearchEngineValueTypes } from '@/data/engine';
+import SugPopper from './sugPopper';
 
 // 自动填充内容，off不填充，on填充
 // 更多参数：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input
@@ -56,8 +57,17 @@ const RenderInput: React.FC<SearchInputPropTypes> = ({
   );
   const [engine, setEngine] = React.useState({} as SearchEngineValueTypes);
 
+  const [sugOpen, setSugOpen] = React.useState<boolean>(false);
+
+  const [wd, setWd] = React.useState<string>('');
+
+  const [sugAnchorEl, setSugAnchorEl] = React.useState<null | HTMLElement>(
+    null,
+  );
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(e.target.value);
+    setWd(e.target.value);
     if (onChange) onChange(e, e.target.value, engine);
   };
 
@@ -82,7 +92,19 @@ const RenderInput: React.FC<SearchInputPropTypes> = ({
   };
 
   return (
-    <div className="v-search-input">
+    <div
+      className="v-search-input"
+      onFocus={(e) => {
+        setSugOpen(true);
+        setSugAnchorEl(e.currentTarget);
+      }}
+      onBlur={(e) => {
+        // 元素外部失去焦点时隐藏提示词
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+          setSugOpen(false);
+        }
+      }}
+    >
       <EngineChip onChange={chipChange}></EngineChip>
       <div className="v-input">
         <input
@@ -105,6 +127,14 @@ const RenderInput: React.FC<SearchInputPropTypes> = ({
             formatMessage({ id: 'app.component.searchinput.submitbutton' })}
         </Button>
       </div>
+      <SugPopper
+        open={sugOpen}
+        wd={wd}
+        anchorEl={sugAnchorEl}
+        onSelect={(content) => {
+          if (onBtnClick) onBtnClick(content, engine);
+        }}
+      />
     </div>
   );
 };

diff --git a/...ges/index/components/sug-popper/index.tsx → src/components/search-input/sugPopper.tsx b/...ges/index/components/sug-popper/index.tsx → src/components/search-input/sugPopper.tsx
@@ -18,6 +18,7 @@ export interface SugPopperProps {
   open: boolean;
   wd: string;
   anchorEl: any;
+  onSelect: (content: string) => void;
 }
 
 interface SugList {
@@ -36,10 +37,21 @@ const SugPopperCardCss = (width: number = 0) => css`
   margin-top: 4px;
 `;
 
+const SugSourceCss = css`
+  padding: 10px 20px;
+  text-align: right;
+  margin: 0;
+`;
+
+const SugPopperCss = css`
+  z-index: 1;
+`;
+
 const SugPopper: React.FC<SugPopperProps> = ({
   open,
   anchorEl,
   wd,
+  onSelect,
   ...props
 }) => {
   const [sugList, setSugList] = React.useState<SugList[]>([]);
@@ -72,19 +84,33 @@ const SugPopper: React.FC<SugPopperProps> = ({
   }, [wd]);
 
   return (
-    <Popper open={open} anchorEl={anchorEl} transition>
+    <Popper
+      open={open && wd.length > 0}
+      anchorEl={anchorEl}
+      transition
+      placement="bottom"
+      container={anchorEl}
+      className={classNames(SugPopperCss)}
+    >
       <Card className={classNames(SugPopperCardCss(anchorEl?.clientWidth))}>
         <Spin spinning={refresh} color="#5f5f5f" type="chase">
           {sugList.length ? (
             <>
-              <List>
+              <List disablePadding>
                 {sugList.map((i, j) => (
-                  <ListItem button key={j}>
+                  <ListItem
+                    button
+                    key={j}
+                    onClick={() => {
+                      console.log(i.content);
+                      onSelect(i.content);
+                    }}
+                  >
                     {i.content}
                   </ListItem>
                 ))}
               </List>
-              <p>数据来源：{engine.name}</p>
+              <p className={SugSourceCss}>数据来源：{engine.name}</p>
             </>
           ) : (
             <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />

diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
@@ -20,7 +20,6 @@ import { Bookmarks, Settings } from '@material-ui/icons';
 import { useSnackbar } from 'notistack';
 import React from 'react';
 import { useIntl } from 'react-intl';
-import SugPopper from './components/sug-popper';
 import './index.less';
 
 interface CopyrightTypeWithVersion extends CopyrightType {
@@ -34,12 +33,6 @@ export default function IndexPage() {
   const { enqueueSnackbar, closeSnackbar } = useSnackbar();
   const [bg, setBg] = React.useState<BingImage>();
 
-  const [sugOpen, setSugOpen] = React.useState<boolean>(false);
-  const [sugAnchorEl, setSugAnchorEl] = React.useState<null | HTMLElement>(
-    null,
-  );
-  const [wd, setWd] = React.useState<string>('');
-
   const getCopyright = () => {
     copyrightApi().then((res) => {
       setCopyright(res.data);
@@ -51,7 +44,6 @@ export default function IndexPage() {
     const image = localStorage.getItem('checkIndexBg');
     if (image) {
       setBg(JSON.parse(image));
-      console.log(image);
     }
   };
 
@@ -81,12 +73,10 @@ export default function IndexPage() {
     engine: SearchEngineValueTypes,
   ) => {
     console.log('search', value, engine);
-    setWd(value);
-    setSugAnchorEl(e.currentTarget);
-    setSugOpen(true);
   };
 
   const handleSearch = (value: string, engine: SearchEngineValueTypes) => {
+    console.log(value);
     window.open(`${engine.href}${value}`);
   };
 
@@ -119,10 +109,6 @@ export default function IndexPage() {
         <SearchInput
           autoFocus
           onChange={inputChange}
-          // onBlur={() => setSugOpen(false)}
-          onFocus={() => {
-            if (wd) setSugOpen(true);
-          }}
           onBtnClick={handleSearch}
           placeholder={formatMessage({
             id: 'app.page.index.searchinput.placeholder',
@@ -145,8 +131,6 @@ export default function IndexPage() {
           ></Copyright>
         )}
       </div>
-      {/* sug popper */}
-      <SugPopper open={sugOpen} anchorEl={sugAnchorEl} wd={wd} />
     </div>
   );
 }