fix: export `keys` error

packages/semi-ui/hotKeys/_story/hotKeys.stories.jsx

@@ -1,13 +1,13 @@
 import React, { useState } from 'react';
 import { Button, Tag } from '@douyinfe/semi-ui'
-import { HotKeys, Keys } from '../../index';
+import { HotKeys } from '../../index';
 
 export default {
   title: 'HotKeys'
 }
 
 export const Demo = () => {
-  const hotKeys = [HotKeys.Keys.Control, Keys.K]
+  const hotKeys = [HotKeys.Keys.Control, "k"]
   const [cnt, setCnt] = useState(0)
   const onHotKey = (e) => {
     console.log(e)
@@ -15,14 +15,14 @@ export const Demo = () => {
   }
   return (
     <div>
-      <HotKeys hotKeys={hotKeys} content={["Control", "K"]} onHotKey={onHotKey} onClick={onHotKey} mergeMetaCtrl></HotKeys>
+      <HotKeys hotKeys={hotKeys} content={["Control", "K"]} onHotKey={onHotKey} onClick={() => setCnt(cnt + 1)} mergeMetaCtrl></HotKeys>
       <pre id='pre'>{cnt}</pre>
     </div>
   );
 }
 
 export const renderButton = () => {
-  const hotKeys = [Keys.R]
+  const hotKeys = [HotKeys.Keys.R]
   const [cnt, setCnt] = useState(0)
   const onHotKey = () => {
     setCnt(cnt+1)
@@ -37,7 +37,7 @@ export const renderButton = () => {
   return (
     <div>
       <pre id='pre'>{" cnt:" + cnt}</pre>
-      <HotKeys hotKeys={hotKeys} onHotKey={onHotKey} render={button} clickable></HotKeys>
+      <HotKeys hotKeys={hotKeys} onHotKey={onHotKey} render={button}></HotKeys>
     </div>
 
   );
@@ -52,14 +52,14 @@ export const renderNull = () => {
   return (
     <div>
       <span>{" cnt:" + cnt}</span>
-      <HotKeys hotKeys={hotKeys} onHotKey={onHotKey} render={null} clickable></HotKeys>
+      <HotKeys hotKeys={hotKeys} onHotKey={onHotKey} render={null}></HotKeys>
     </div>
 
   );
 }
 
 export const combine = () => {
-  const hotKeys = [Keys.Meta, Keys.Alt, "k"]
+  const hotKeys = [HotKeys.Keys.Meta, HotKeys.Keys.Alt, "k"]
   const [cnt, setCnt] = useState(0)
   const onHotKey = () => {
     setCnt(cnt+1)
@@ -75,7 +75,7 @@ export const combine = () => {
 }
 
 export const target = () => {
-  const hotKeys = ["Meta", Keys.S]
+  const hotKeys = ["Meta", HotKeys.Keys.S]
   const [cnt, setCnt] = useState(0)
   const onHotKey = () => {
     setCnt(cnt+1)
@@ -100,7 +100,7 @@ export const disabled = () => {
   }
   return (
     <div>
-      <HotKeys hotKeys={hotKeys} onHotKey={onHotKey} disabled></HotKeys>
+      <HotKeys hotKeys={hotKeys} onHotKey={onHotKey}></HotKeys>
       <pre id='pre'>{cnt}</pre>
     </div>
   );
@@ -133,9 +133,9 @@ export const hotKeys = () => {
       fontWeight: 'bold',
       rowGap: '5px',
     }}>
-      <HotKeys hotKeys={hotKeys} onHotKey={onHotKey} disabled={true}></HotKeys>
+      <HotKeys hotKeys={hotKeys} onHotKey={onHotKey}></HotKeys>
       <HotKeys hotKeys={hotKeys} onHotKey={onHotKey} content={['⌘ ','⏎']}></HotKeys>
-      <HotKeys hotKeys={hotKeys} onHotKey={onHotKey} render={button} clickable></HotKeys>
+      <HotKeys hotKeys={hotKeys} onHotKey={onHotKey} render={button}></HotKeys>
     </div>
   );
 }

packages/semi-ui/hotKeys/_story/hotKeys.stories.tsx

@@ -1,44 +1,30 @@
 import React, { useState } from 'react';
-import { Button } from '@douyinfe/semi-ui'
-import { HotKeys, Keys } from '../../index';
+import { Button, Tag } from '@douyinfe/semi-ui'
+import { HotKeys } from '../../index';
 
 export default {
   title: 'HotKeys'
 }
 
 export const Demo = () => {
-  const hotKeys = ["alt", Keys.K]
+  const hotKeys = [HotKeys.Keys.Control, "k"]
   const [cnt, setCnt] = useState(0)
-  const onClick = () => {
+  const onHotKey = (e) => {
+    console.log(e)
     setCnt(cnt+1)
   }
   return (
     <div>
-      <HotKeys hotKeys={hotKeys} onClick={onClick}></HotKeys>
-      <pre id='pre'>{cnt}</pre>
-    </div>
-  );
-}
-
-export const Clickable = () => {
-  const hotKeys = ["Alt", Keys.K]
-  const [cnt, setCnt] = useState(0)
-  const onClick = () => {
-    setCnt(cnt+1)
-  }
-  return (
-    <div>
-      <div>clickable</div>
-      <HotKeys hotKeys={hotKeys} onClick={onClick} clickable={true}></HotKeys>
+      <HotKeys hotKeys={hotKeys} content={["Control", "K"]} onHotKey={onHotKey} onClick={() => setCnt(cnt + 1)} mergeMetaCtrl></HotKeys>
       <pre id='pre'>{cnt}</pre>
     </div>
   );
 }
 
 export const renderButton = () => {
-  const hotKeys = [Keys.R]
+  const hotKeys = [HotKeys.Keys.R]
   const [cnt, setCnt] = useState(0)
-  const onClick = () => {
+  const onHotKey = () => {
     setCnt(cnt+1)
   }
   const button = () => {
@@ -51,7 +37,7 @@ export const renderButton = () => {
   return (
     <div>
       <pre id='pre'>{" cnt:" + cnt}</pre>
-      <HotKeys hotKeys={hotKeys} onClick={onClick} render={button} clickable></HotKeys>
+      <HotKeys hotKeys={hotKeys} onHotKey={onHotKey} render={button}></HotKeys>
     </div>
 
   );
@@ -60,38 +46,38 @@ export const renderButton = () => {
 export const renderNull = () => {
   const hotKeys = ["r"]
   const [cnt, setCnt] = useState(0)
-  const onClick = () => {
+  const onHotKey = () => {
     setCnt(cnt+1)
   }
   return (
     <div>
       <span>{" cnt:" + cnt}</span>
-      <HotKeys hotKeys={hotKeys} onClick={onClick} render={null} clickable></HotKeys>
+      <HotKeys hotKeys={hotKeys} onHotKey={onHotKey} render={null}></HotKeys>
     </div>
 
   );
 }
 
 export const combine = () => {
-  const hotKeys = [Keys.Meta, Keys.Alt, "k"]
+  const hotKeys = [HotKeys.Keys.Meta, HotKeys.Keys.Alt, "k"]
   const [cnt, setCnt] = useState(0)
-  const onClick = () => {
+  const onHotKey = () => {
     setCnt(cnt+1)
   }
   return (
     <div>
       <pre id='pre'>{cnt}</pre>
-      <HotKeys hotKeys={hotKeys} onClick={onClick}></HotKeys>
-      <HotKeys hotKeys={["Meta", "Shift", "k"]} onClick={onClick}></HotKeys>
+      <HotKeys hotKeys={hotKeys} onHotKey={onHotKey}></HotKeys>
+      <HotKeys hotKeys={["Meta", "Shift", "k"]} onHotKey={onHotKey}></HotKeys>
     </div>
     
   );
 }
 
 export const target = () => {
-  const hotKeys = ["Meta", Keys.S]
+  const hotKeys = ["Meta", HotKeys.Keys.S]
   const [cnt, setCnt] = useState(0)
-  const onClick = () => {
+  const onHotKey = () => {
     setCnt(cnt+1)
   }
   
@@ -100,22 +86,56 @@ export const target = () => {
     <div>
       {target}
       <pre id='pre'>{cnt}</pre>
-      <HotKeys hotKeys={hotKeys} onClick={onClick} getListenerTarget={() => document.getElementById("test")}></HotKeys>
+      <HotKeys hotKeys={hotKeys} onHotKey={onHotKey} getListenerTarget={() => document.getElementById("test")}></HotKeys>
     </div>
     
   );
 }
 
 export const disabled = () => {
-  const hotKeys = [Keys.Meta, "k"]
+  const hotKeys = ["Meta", "k"]
   const [cnt, setCnt] = useState(0)
-  const onClick = () => {
+  const onHotKey = () => {
     setCnt(cnt+1)
   }
   return (
     <div>
-      <HotKeys hotKeys={hotKeys} onClick={onClick} disabled></HotKeys>
+      <HotKeys hotKeys={hotKeys} onHotKey={onHotKey}></HotKeys>
       <pre id='pre'>{cnt}</pre>
     </div>
   );
+}
+
+export const hotKeys = () => {
+  const hotKeys = ["Meta", "k"]
+  const [cnt, setCnt] = useState(0)
+  const onHotKey = () => {
+    setCnt(cnt+1)
+  }
+  const button = () => {
+    return (
+      <div>
+        <Tag>{"Press R To do ..."}</Tag>
+      </div>
+    )
+  }
+  return (
+    <div style={{ 
+      width: '195px', height: '129px', 
+      border: '1px solid var(--semi-color-border)',
+      boxSizing: 'border-box',
+      backgroundColor: 'rgb(249,249,249)',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: '24px',
+      fontWeight: 'bold',
+      rowGap: '5px',
+    }}>
+      <HotKeys hotKeys={hotKeys} onHotKey={onHotKey}></HotKeys>
+      <HotKeys hotKeys={hotKeys} onHotKey={onHotKey} content={['⌘ ','⏎']}></HotKeys>
+      <HotKeys hotKeys={hotKeys} onHotKey={onHotKey} render={button}></HotKeys>
+    </div>
+  );
 }

packages/semi-ui/index.ts

@@ -113,4 +113,4 @@ export { default as Lottie } from "./lottie";
 
 export { default as Chat } from './chat';
 
-export { default as HotKeys, Keys } from './hotKeys'; 
+export { default as HotKeys} from './hotKeys';