feat: add 'Keys' variable to enum values and check for hotKeys

content/input/hotkeys/index-en-US.md

@@ -22,6 +22,11 @@ The hotkeys only support combinations of modifier keys like Shift, Control, Meta
 
 When a hotkey is set to a common shortcut like Ctrl/Meta + C, it may prevent the default behavior (e.g., copying) from being triggered properly.
 
+It's also possible to use the `Keys` wrapper to set hotkeys.
+```jsx import
+import { Keys } from '@douyinfe/semi-ui';
+```
+
 ### Basic Usage
 
 Pass in key combinations via `hotKeys` and bind a shortcut handler function using `onClick` to respond to the action.
@@ -41,7 +46,7 @@ function Demo() {
   }
   return (
     <div>
-      <HotKeys hotKeys={['Control', 'Shift', 'a']} onClick={onClick} ></HotKeys>
+      <HotKeys hotKeys={[Keys.Control, 'Shift', 'a']} onClick={onClick} ></HotKeys>
       <div>{cnt}</div>
     </div>
   );
@@ -63,9 +68,9 @@ function Demo() {
   }
   return (
     <div>
-      <HotKeys hotKeys={["Control", "b"]} onClick={onClick} content={["Ctrl", "B"]}></HotKeys>
+      <HotKeys hotKeys={["Control", Keys.B]} onClick={onClick} content={["Ctrl", "B"]}></HotKeys>
         <br></br>
-      <HotKeys hotKeys={["Meta","b"]} onClick={onClick} content={["⌘", "B"]}></HotKeys>
+      <HotKeys hotKeys={[Keys.Meta,"b"]} onClick={onClick} content={["⌘", "B"]}></HotKeys>
       <div>{cnt}</div>
     </div>
   );

content/input/hotkeys/index.md

@@ -30,9 +30,14 @@ import { HotKeys } from '@douyinfe/semi-ui';
 
 [hotKeys取值参考](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values)
 
+也可以引入包装好的`Keys`进行设置
+```jsx import
+import { Keys } from '@douyinfe/semi-ui';
+```
+
 ```jsx live=true
 import React, { useState } from 'react';
-import { HotKeys } from '@douyinfe/semi-ui';
+import { HotKeys, Keys } from '@douyinfe/semi-ui';
 
 function Demo() {
   const [cnt, setCnt] = useState(0)
@@ -41,7 +46,7 @@ function Demo() {
   }
   return (
     <div>
-      <HotKeys hotKeys={['Control', 'Shift', 'a']} onClick={onClick} ></HotKeys>
+      <HotKeys hotKeys={[Keys.Control, 'Shift', 'a']} onClick={onClick} ></HotKeys>
       <div>{cnt}</div>
     </div>
   );
@@ -63,9 +68,9 @@ function Demo() {
   }
   return (
     <div>
-      <HotKeys hotKeys={["Control", "b"]} onClick={onClick} content={["Ctrl", "B"]}></HotKeys>
+      <HotKeys hotKeys={["Control", Keys.B]} onClick={onClick} content={["Ctrl", "B"]}></HotKeys>
         <br></br>
-      <HotKeys hotKeys={["Meta","b"]} onClick={onClick} content={["⌘", "B"]}></HotKeys>
+      <HotKeys hotKeys={[Keys.Meta,"b"]} onClick={onClick} content={["⌘", "B"]}></HotKeys>
       <div>{cnt}</div>
     </div>
   );

packages/semi-foundation/hotKeys/constants.ts

@@ -8,62 +8,93 @@ const strings = {
 };
 
 export { cssClasses, strings };
+const keyCodeMap = {
+    // alpha
+    'a': 'KeyA', 'b': 'KeyB', 'c': 'KeyC', 'd': 'KeyD', 'e': 'KeyE',
+    'f': 'KeyF', 'g': 'KeyG', 'h': 'KeyH', 'i': 'KeyI', 'j': 'KeyJ',
+    'k': 'KeyK', 'l': 'KeyL', 'm': 'KeyM', 'n': 'KeyN', 'o': 'KeyO',
+    'p': 'KeyP', 'q': 'KeyQ', 'r': 'KeyR', 's': 'KeyS', 't': 'KeyT',
+    'u': 'KeyU', 'v': 'KeyV', 'w': 'KeyW', 'x': 'KeyX', 'y': 'KeyY',
+    'z': 'KeyZ',
 
+    // digit
+    '0': 'Digit0', '1': 'Digit1', '2': 'Digit2', '3': 'Digit3',
+    '4': 'Digit4', '5': 'Digit5', '6': 'Digit6', '7': 'Digit7', 
+    '8': 'Digit8', '9': 'Digit9',
+
+    // punctuation
+    ' ': 'Space', 'enter': 'Enter', 'escape': 'Escape', 'backspace': 'Backspace',
+    'tab': 'Tab', '-': 'Minus', '=': 'Equal', '[': 'BracketLeft',
+    ']': 'BracketRight', '\\': 'Backslash', ';': 'Semicolon', 
+    "'": 'Quote', '`': 'Backquote', ',': 'Comma', '.': 'Period',
+    '/': 'Slash', '?': 'Slash', '!': 'Digit1', '@': 'Digit2',
+    '#': 'Digit3', '$': 'Digit4', '%': 'Digit5', '^': 'Digit6',
+    '&': 'Digit7', '*': 'Digit8', '(': 'Digit9', ')': 'Digit0',
+
+    // arrow
+    'arrowup': 'ArrowUp', 'arrowdown': 'ArrowDown',
+    'arrowleft': 'ArrowLeft', 'arrowright': 'ArrowRight',
+
+    // function
+    'shift': 'ShiftLeft', 'control': 'ControlLeft', 'alt': 'AltLeft',
+    'meta': 'MetaLeft', 'capslock': 'CapsLock', 'f1': 'F1', 
+    'f2': 'F2', 'f3': 'F3', 'f4': 'F4', 'f5': 'F5', 'f6': 'F6', 
+    'f7': 'F7', 'f8': 'F8', 'f9': 'F9', 'f10': 'F10', 'f11': 'F11', 
+    'f12': 'F12', 'insert': 'Insert', 'delete': 'Delete', 'home': 'Home', 
+    'end': 'End', 'pageup': 'PageUp', 'pagedown': 'PageDown',
+    'numlock': 'NumLock', 'scrolllock': 'ScrollLock', 'pause': 'Pause',
+
+    // numpad
+    'numpad0': 'Numpad0', 'numpad1': 'Numpad1', 'numpad2': 'Numpad2',
+    'numpad3': 'Numpad3', 'numpad4': 'Numpad4', 'numpad5': 'Numpad5',
+    'numpad6': 'Numpad6', 'numpad7': 'Numpad7', 'numpad8': 'Numpad8',
+    'numpad9': 'Numpad9', 'numpaddecimal': 'NumpadDecimal', 
+    'numpaddivide': 'NumpadDivide', 'numpadmultiply': 'NumpadMultiply', 
+    'numpadsubtract': 'NumpadSubtract', 'numpadadd': 'NumpadAdd', 
+    'numpadenter': 'NumpadEnter',
+};
 export function keyToCode(key: KeyboardEvent["key"]) {
-    const keyCodeMap = {
-        // alpha
-        'a': 'KeyA', 'b': 'KeyB', 'c': 'KeyC', 'd': 'KeyD', 'e': 'KeyE',
-        'f': 'KeyF', 'g': 'KeyG', 'h': 'KeyH', 'i': 'KeyI', 'j': 'KeyJ',
-        'k': 'KeyK', 'l': 'KeyL', 'm': 'KeyM', 'n': 'KeyN', 'o': 'KeyO',
-        'p': 'KeyP', 'q': 'KeyQ', 'r': 'KeyR', 's': 'KeyS', 't': 'KeyT',
-        'u': 'KeyU', 'v': 'KeyV', 'w': 'KeyW', 'x': 'KeyX', 'y': 'KeyY',
-        'z': 'KeyZ',
+    return keyCodeMap[key.toLowerCase()] || undefined;
+}
 
-        // digit
-        '0': 'Digit0', '1': 'Digit1', '2': 'Digit2', '3': 'Digit3',
-        '4': 'Digit4', '5': 'Digit5', '6': 'Digit6', '7': 'Digit7', 
-        '8': 'Digit8', '9': 'Digit9',
+const Keys = {
+    A: 'a', B: 'b', C: 'c', D: 'd', E: 'e',
+    F: 'f', G: 'g', H: 'h', I: 'i', J: 'j',
+    K: 'k', L: 'l', M: 'm', N: 'n', O: 'o',
+    P: 'p', Q: 'q', R: 'r', S: 's', T: 't',
+    U: 'u', V: 'v', W: 'w', X: 'x', Y: 'y',
+    Z: 'z',
 
-        // punctuation
-        ' ': 'Space', 'enter': 'Enter', 'escape': 'Escape', 'backspace': 'Backspace',
-        'tab': 'Tab', '-': 'Minus', '=': 'Equal', '[': 'BracketLeft',
-        ']': 'BracketRight', '\\': 'Backslash', ';': 'Semicolon', 
-        "'": 'Quote', '`': 'Backquote', ',': 'Comma', '.': 'Period',
-        '/': 'Slash', '?': 'Slash', '!': 'Digit1', '@': 'Digit2',
-        '#': 'Digit3', '$': 'Digit4', '%': 'Digit5', '^': 'Digit6',
-        '&': 'Digit7', '*': 'Digit8', '(': 'Digit9', ')': 'Digit0',
+    Digit0: '0', Digit1: '1', Digit2: '2', Digit3: '3',
+    Digit4: '4', Digit5: '5', Digit6: '6', Digit7: '7', 
+    Digit8: '8', Digit9: '9',
 
-        // arrow
-        'arrowup': 'ArrowUp', 'arrowdown': 'ArrowDown',
-        'arrowleft': 'ArrowLeft', 'arrowright': 'ArrowRight',
+    Space: ' ', Enter: 'enter', Escape: 'escape', Backspace: 'backspace',
+    Tab: 'tab', Minus: '-', Equal: '=', BracketLeft: '[',
+    BracketRight: ']', Backslash: '\\', Semicolon: ';', 
+    Quote: "'", Backquote: '`', Comma: ',', Period: '.',
+    Slash: '/', Exclamation: '!', At: '@', Hash: '#', 
+    Dollar: '$', Percent: '%', Caret: '^', Ampersand: '&', 
+    Asterisk: '*', LeftParenthesis: '(', RightParenthesis: ')',
 
-        // function
-        'shift': 'ShiftLeft', 'control': 'ControlLeft', 'alt': 'AltLeft',
-        'meta': 'MetaLeft', 'capslock': 'CapsLock', 'f1': 'F1', 
-        'f2': 'F2', 'f3': 'F3', 'f4': 'F4', 'f5': 'F5', 'f6': 'F6', 
-        'f7': 'F7', 'f8': 'F8', 'f9': 'F9', 'f10': 'F10', 'f11': 'F11', 
-        'f12': 'F12', 'insert': 'Insert', 'delete': 'Delete', 'home': 'Home', 
-        'end': 'End', 'pageup': 'PageUp', 'pagedown': 'PageDown',
-        'numlock': 'NumLock', 'scrolllock': 'ScrollLock', 'pause': 'Pause',
+    ArrowUp: 'arrowup', ArrowDown: 'arrowdown',
+    ArrowLeft: 'arrowleft', ArrowRight: 'arrowright',
 
-        // numpad
-        'numpad0': 'Numpad0', 'numpad1': 'Numpad1', 'numpad2': 'Numpad2',
-        'numpad3': 'Numpad3', 'numpad4': 'Numpad4', 'numpad5': 'Numpad5',
-        'numpad6': 'Numpad6', 'numpad7': 'Numpad7', 'numpad8': 'Numpad8',
-        'numpad9': 'Numpad9', 'numpaddecimal': 'NumpadDecimal', 
-        'numpaddivide': 'NumpadDivide', 'numpadmultiply': 'NumpadMultiply', 
-        'numpadsubtract': 'NumpadSubtract', 'numpadadd': 'NumpadAdd', 
-        'numpadenter': 'NumpadEnter',
+    Shift: 'shift', Control: 'control', Alt: 'alt',
+    Meta: 'meta', CapsLock: 'capslock', F1: 'f1', 
+    F2: 'f2', F3: 'f3', F4: 'f4', F5: 'f5', F6: 'f6', 
+    F7: 'f7', F8: 'f8', F9: 'f9', F10: 'f10', F11: 'f11', 
+    F12: 'f12', Insert: 'insert', Delete: 'delete', Home: 'home', 
+    End: 'end', PageUp: 'pageup', PageDown: 'pagedown',
+    NumLock: 'numlock', ScrollLock: 'scrolllock', Pause: 'pause',
 
-        // Others
-        'printscreen': 'PrintScreen', 'contextmenu': 'ContextMenu',
-        'help': 'Help', 'select': 'Select', 'execute': 'Execute', 
-        'clear': 'Clear', 'kana': 'KanaMode', 'kanji': 'KanjiMode',
-        'nonconvert': 'NonConvert', 'convert': 'Convert', 
-        'process': 'Process', 'accept': 'Accept', 'modechange': 'ModeChange',
-        'launchapp1': 'LaunchApp1', 'launchapp2': 'LaunchApp2',
-        'launchmail': 'LaunchMail', 'mediaselect': 'MediaSelect'
-    };
+    Numpad0: 'numpad0', Numpad1: 'numpad1', Numpad2: 'numpad2',
+    Numpad3: 'numpad3', Numpad4: 'numpad4', Numpad5: 'numpad5',
+    Numpad6: 'numpad6', Numpad7: 'numpad7', Numpad8: 'numpad8',
+    Numpad9: 'numpad9', NumpadDecimal: 'numpaddecimal', 
+    NumpadDivide: 'numpaddivide', NumpadMultiply: 'numpadmultiply', 
+    NumpadSubtract: 'numpadsubtract', NumpadAdd: 'numpadadd', 
+    NumpadEnter: 'numpadenter',
+} as const;
 
-    return keyCodeMap[key.toLowerCase()] || undefined;
-}
+export { Keys };

packages/semi-foundation/hotKeys/foundation.ts

@@ -1,5 +1,5 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-import { keyToCode } from './constants';
+import { keyToCode, Keys } from './constants';
 
 export interface HotKeysAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     notifyClick: () => void;
@@ -15,9 +15,28 @@ export default class HotKeysFoundation<P = Record<string, any>, S = Record<strin
         // init Listener
         const target = this._adapter.getListenerTarget();
         target?.addEventListener('keydown', this.handleKeyDown);
+        const hotKeys = this.getProps().hotKeys;
+        if (!this.isValidHotKeys(hotKeys)) {
+            throw new Error('HotKeys must have one common key and 0/some modifier key');
+        }   
+    }
+
+    isValidHotKeys = (hotKeys: string[]): boolean => {
+        let commonKeyCnt = 0;
+        const modifierKeys: string[] = [Keys.Meta, Keys.Alt, Keys.Shift, Keys.Control];
+
+        hotKeys.forEach(key => {
+            key = key.toLowerCase();
+            if (!modifierKeys.includes(key)) {
+                commonKeyCnt += 1;
+            }
+        });
+
+        return commonKeyCnt === 1;
     }
 
     handleKeyDown = (event: KeyboardEvent): void => {
+        console.log(event);
         const disabled = this.getProps().disabled;
         if (disabled) {
             return;
@@ -26,16 +45,20 @@ export default class HotKeysFoundation<P = Record<string, any>, S = Record<strin
         let allModifier = new Array(4).fill(false); // Meta Shift Alt Ctrl
         let clickedModifier = [event.metaKey, event.shiftKey, event.altKey, event.ctrlKey];
         const keysPressed = hotKeys?.map((key: KeyboardEvent["key"])=> {
-            if (key === "Meta") {
+            key = key.toLowerCase();
+            if (!Object.values(Keys).some((value) => value === key)) {
+                throw new Error(`${key} is not a valid key`);
+            }
+            if (key === "meta") {
                 allModifier[0] = true;
                 return event.metaKey; 
-            } else if (key === "Shift") {
+            } else if (key === "shift") {
                 allModifier[1] = true;
                 return event.shiftKey;
-            } else if (key === "Alt") {
+            } else if (key === "alt") {
                 allModifier[2] = true;
                 return event.altKey;
-            } else if (key === "Control") {
+            } else if (key === "control") {
                 allModifier[3] = true;
                 return event.ctrlKey;
             }

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

@@ -1,13 +1,13 @@
 import React, { useState } from 'react';
 import { Button } from '@douyinfe/semi-ui'
-import { HotKeys } from '../../index';
+import { HotKeys, Keys } from '../../index';
 
 export default {
   title: 'HotKeys'
 }
 
 export const Demo = () => {
-  const hotKeys = ["Alt","k"]
+  const hotKeys = ["alt", Keys.K]
   const [cnt, setCnt] = useState(0)
   const onClick = () => {
     setCnt(cnt+1)
@@ -21,7 +21,7 @@ export const Demo = () => {
 }
 
 export const Clickable = () => {
-  const hotKeys = ["Alt","k"]
+  const hotKeys = ["Alt", Keys.K]
   const [cnt, setCnt] = useState(0)
   const onClick = () => {
     setCnt(cnt+1)
@@ -36,7 +36,7 @@ export const Clickable = () => {
 }
 
 export const renderButton = () => {
-  const hotKeys = ["r"]
+  const hotKeys = [Keys.R]
   const [cnt, setCnt] = useState(0)
   const onClick = () => {
     setCnt(cnt+1)
@@ -73,7 +73,7 @@ export const renderNull = () => {
 }
 
 export const combine = () => {
-  const hotKeys = ["Meta", "Alt", "k"]
+  const hotKeys = [Keys.Meta, Keys.Alt, "k"]
   const [cnt, setCnt] = useState(0)
   const onClick = () => {
     setCnt(cnt+1)
@@ -89,7 +89,7 @@ export const combine = () => {
 }
 
 export const target = () => {
-  const hotKeys = ["Meta", "s"]
+  const hotKeys = ["Meta", Keys.S]
   const [cnt, setCnt] = useState(0)
   const onClick = () => {
     setCnt(cnt+1)

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

@@ -0,0 +1,121 @@
+import React, { useState } from 'react';
+import { Button } from '@douyinfe/semi-ui'
+import { HotKeys, Keys } from '../../index';
+
+export default {
+  title: 'HotKeys'
+}
+
+export const Demo = () => {
+  const hotKeys = ["alt", Keys.K]
+  const [cnt, setCnt] = useState(0)
+  const onClick = () => {
+    setCnt(cnt+1)
+  }
+  return (
+    <div>
+      <HotKeys hotKeys={hotKeys} onClick={onClick}></HotKeys>
+      <pre id='pre'>{cnt}</pre>
+    </div>
+  );
+}
+
+export const Clickable = () => {
+  const hotKeys = ["Alt","k"]
+  const [cnt, setCnt] = useState(0)
+  const onClick = () => {
+    setCnt(cnt+1)
+  }
+  return (
+    <div>
+      <div>clickable</div>
+      <HotKeys hotKeys={hotKeys} onClick={onClick} clickable={true}></HotKeys>
+      <pre id='pre'>{cnt}</pre>
+    </div>
+  );
+}
+
+export const renderButton = () => {
+  const hotKeys = [Keys.R]
+  const [cnt, setCnt] = useState(0)
+  const onClick = () => {
+    setCnt(cnt+1)
+  }
+  const button = () => {
+    return (
+      <div>
+        <Button>{"按下R即可加一"}</Button>
+      </div>
+    )
+  }
+  return (
+    <div>
+      <pre id='pre'>{" cnt:" + cnt}</pre>
+      <HotKeys hotKeys={hotKeys} onClick={onClick} render={button} clickable></HotKeys>
+    </div>
+
+  );
+}
+
+export const renderNull = () => {
+  const hotKeys = ["r"]
+  const [cnt, setCnt] = useState(0)
+  const onClick = () => {
+    setCnt(cnt+1)
+  }
+  return (
+    <div>
+      <span>{" cnt:" + cnt}</span>
+      <HotKeys hotKeys={hotKeys} onClick={onClick} render={null} clickable></HotKeys>
+    </div>
+
+  );
+}
+
+export const combine = () => {
+  const hotKeys = [Keys.Meta, Keys.Alt, "k"]
+  const [cnt, setCnt] = useState(0)
+  const onClick = () => {
+    setCnt(cnt+1)
+  }
+  return (
+    <div>
+      <pre id='pre'>{cnt}</pre>
+      <HotKeys hotKeys={hotKeys} onClick={onClick}></HotKeys>
+      <HotKeys hotKeys={["Meta", "Shift", "k"]} onClick={onClick}></HotKeys>
+    </div>
+    
+  );
+}
+
+export const target = () => {
+  const hotKeys = ["Meta", Keys.S]
+  const [cnt, setCnt] = useState(0)
+  const onClick = () => {
+    setCnt(cnt+1)
+  }
+  
+  const target = <input id="test" placeholder='test for target'></input>
+  return (
+    <div>
+      {target}
+      <pre id='pre'>{cnt}</pre>
+      <HotKeys hotKeys={hotKeys} onClick={onClick} getListenerTarget={() => document.getElementById("test")}></HotKeys>
+    </div>
+    
+  );
+}
+
+export const disabled = () => {
+  const hotKeys = ["Meta", "k"]
+  const [cnt, setCnt] = useState(0)
+  const onClick = () => {
+    setCnt(cnt+1)
+  }
+  return (
+    <div>
+      <HotKeys hotKeys={hotKeys} onClick={onClick} disabled></HotKeys>
+      <pre id='pre'>{cnt}</pre>
+    </div>
+  );
+}

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

@@ -1,124 +0,0 @@
-import React, { useState } from 'react';
-import { Button } from '@douyinfe/semi-ui/';
-import {
-    storiesOf
-} from '@storybook/react';
-// import { withKnobs, text, boolean } from '@storybook/addon-knobs';
-
-import { Switch } from '../../index';
-
-const stories = storiesOf('Switch', module);
-
-// stories.addDecorator(withKnobs);;
-
-stories.add('switch', () => (
-    <div>
-        <Switch onChange={(v, e) => console.log(v)} aria-label='power-switch'>
-        </Switch>
-        <Switch defaultChecked={true} onChange={(v, e) => console.log(v)} aria-label='power-switch'>
-        </Switch>
-    </div>
-));
-
-
-stories.add('switch size', () => (
-    <div>
-        <Switch onChange={(v, e) => console.log(v)}></Switch>
-        <Switch onChange={(v, e) => console.log(v)} size='small' aria-label='power-switch'></Switch>
-        <Switch onChange={(v, e) => console.log(v)} size='large' aria-label='power-switch'></Switch>
-    </div>
-));
-
-stories.add('switch checkedText &  uncheckedText', () => (
-    <div>
-        <Switch defaultChecked checkedText='开' uncheckedText='关' aria-label='power-switch'/>
-        <Switch checkedText={'|'} uncheckedText='〇' />
-        <br/><br/>
-        <Switch checkedText='开' uncheckedText='关' />
-        <Switch defaultChecked checkedText='｜' uncheckedText='〇' aria-label='power-switch'/>
-        <br/><br/>
-        <Switch checkedText='开' uncheckedText='关' size='large' aria-label='power-switch'/>
-        <Switch checkedText='｜' uncheckedText='〇' size='large' aria-label='power-switch'/>
-        <br/><br/>
-        <Switch defaultChecked checkedText='开' uncheckedText='关' size='large' aria-label='power-switch'/>
-        <Switch defaultChecked checkedText='｜' uncheckedText='〇' size='large' aria-label='power-switch'/>
-    </div>
-));
-
-stories.add('switch disabled', () => (
-    <>
-        <Switch disabled>
-            disabled
-        </Switch>
-
-        <Switch disabled checked={true} onChange={(v, e) => console.log(v)} aria-label='power-switch'>
-        </Switch>
-    </>
-));
-
-
-const ControlledSwitch = () => {
-    const [checked, onChange] = useState(true);
-    return (
-        <Switch checked={checked} onChange={(v, e) => onChange(v)} />
-    );
-};
-stories.add('switch checked + onChange', () => <ControlledSwitch/>);
-
-const UnControlledSwitch = () => {
-    const onChange = checked => {
-        console.log(checked);
-    };
-    return (
-        <>
-            {/* <Switch onChange={onChange} defaultChecked={false}/> */}
-            <Switch onChange={onChange} defaultChecked={true}/>
-        </>
-    );
-};
-stories.add('switch defaultChecked + onChange', () => <UnControlledSwitch/>);
-
-class LoadingDemo extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            checked: true,
-            loading:false
-        }
-        this.onChange = this.onChange.bind(this);
-    }
-    onChange(checked) {
-        this.setState({ checked });
-    }
-    render() {
-        return (
-            <>
-                <Button onClick={() => { this.setState({ checked: true }); }}>
-                    checked
-                </Button>
-                <br /><br />
-                <Button onClick={() => { this.setState({ checked: false }); }}>
-                    unchecked
-                </Button>
-                <br /><br />
-                <Button onClick={() => { this.setState({ loading: !this.state.loading }); }}>
-                    loading
-                </Button>
-                <br /><br />
-                <Switch
-                    checked={this.state.checked}
-                    onChange={this.onChange}
-                    loading={this.state.loading}>
-                </Switch>
-                <br /><br />
-                <hr />
-                <Switch loading disabled/>
-                <br /><br />
-                <Switch loading disabled defaultChecked/>
-                <br /><br />
-            </>
-        )
-    }
-}
-
-stories.add('loading', () => <LoadingDemo/>);

packages/semi-ui/hotKeys/index.tsx

@@ -2,13 +2,14 @@ import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import HotKeysFoudation, { HotKeysAdapter } from '@douyinfe/semi-foundation/hotKeys/foundation';
-import { cssClasses, strings } from '@douyinfe/semi-foundation/hotKeys/constants';
+import { cssClasses, Keys } from '@douyinfe/semi-foundation/hotKeys/constants';
 import BaseComponent from '../_base/baseComponent';
 import { noop } from 'lodash';
 import '@douyinfe/semi-foundation/hotKeys/hotKeys.scss';
 
 const prefixCls = cssClasses.PREFIX;
 
+export { Keys };
 export interface HotKeysProps {
     hotKeys?: KeyboardEvent["key"][];
     content?: string[];

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 } from './hotKeys'; 
+export { default as HotKeys, Keys } from './hotKeys';