feat(icons):add close search bar

antvis · Jan 20, 2021 · ee6d7c6 · ee6d7c6
1 parent 9ec21b3
commit ee6d7c6
Showing 1 changed file with 29 additions and 16 deletions.
diff --git a/packages/graphin-icons/src/demos/index.tsx b/packages/graphin-icons/src/demos/index.tsx
@@ -59,6 +59,7 @@ const Search = (props) => {
     let isKeyController = false;
     let isKeyF = false;
     graph.on('keydown', (e) => {
+      console.log('e', e);
       if (e.key === 'Control') {
         isKeyController = true;
       }
@@ -73,6 +74,16 @@ const Search = (props) => {
           };
         });
       }
+      if (e.key === 'Escape') {
+        isKeyF = false;
+        isKeyController = false;
+        setState((preState) => {
+          return {
+            ...preState,
+            visible: false,
+          };
+        });
+      }
     });
     graph.on('keyup', (e) => {
       if (e.key === 'Control') {
@@ -87,32 +98,34 @@ const Search = (props) => {
   const styles = {
     position: 'absolute',
     width: '80%',
-    top: '50%',
+    top: '0px',
     left: '50%',
-    transform: ' translate(-50%, -50%)',
+    transform: ' translate(-50%, 0)',
     zIndex: 1000,
+    boxShadow: `0px 8px 10px -5px rgba(0,0,0,0.2), 0px 16px 24px 2px rgba(0,0,0,0.14), 0px 6px 30px 5px rgba(0,0,0,0.12)`,
     ...style,
-  };
-  const maskStyle = {
-    position: 'absolute',
-    width: '100%',
-    top: '0px',
-    right: '0px',
-    left: '0px',
-    bottom: '0px',
-    zIndex: 999,
-    background: 'rgba(0,0,0,0.4)',
     display: visible ? 'block' : 'none',
   };
+  // const maskStyle = {
+  //   position: 'absolute',
+  //   width: '100%',
+  //   top: '0px',
+  //   right: '0px',
+  //   left: '0px',
+  //   bottom: '0px',
+  //   zIndex: 999,
+  //   background: 'rgba(0,0,0,0.4)',
+
+  // };
   const handleClose = () => {
     setState({ visible: false });
   };
   return (
-    <div style={maskStyle} onClick={handleClose}>
-      <div style={styles}>
-        <Input placeholder="Basic usage" />
-      </div>
+    // <div style={maskStyle} onClick={handleClose}>
+    <div style={styles}>
+      <Input placeholder="搜索图标" bordered={false} style={{ height: '80px' }} />
     </div>
+    // </div>
   );
 };
 const Demo = () => {