@douyinfe/semi-foundation 2.66.0-alpha.3 → 2.66.0

package/hotKeys/constants.ts

@@ -8,62 +8,94 @@ 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',
 
-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',
-
-        // 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',
-
-        // 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'
-    };
+    // 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"]) {
     return keyCodeMap[key.toLowerCase()] || undefined;
 }
+
+enum 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',
+
+    Digit0 = '0', Digit1 = '1', Digit2 = '2', Digit3 = '3',
+    Digit4 = '4', Digit5 = '5', Digit6 = '6', Digit7 = '7', 
+    Digit8 = '8', Digit9 = '9',
+
+    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 = ')',
+
+    ArrowUp = 'arrowup', ArrowDown = 'arrowdown',
+    ArrowLeft = 'arrowleft', ArrowRight = 'arrowright',
+
+    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',
+
+    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 { Keys };

package/hotKeys/foundation.ts

@@ -1,8 +1,8 @@
 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;
+    notifyHotKey: (e: KeyboardEvent) => void;
     getListenerTarget: () => HTMLElement
 }
 
@@ -15,27 +15,45 @@ 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 (!Object.values(Keys).some((value) => value === key)) {
+                throw new Error(`${key} is not a valid key`);
+            }
+            if (!modifierKeys.includes(key)) {
+                commonKeyCnt += 1;
+            }
+        });
+
+        return commonKeyCnt === 1;
     }
 
     handleKeyDown = (event: KeyboardEvent): void => {
-        const disabled = this.getProps().disabled;
-        if (disabled) {
-            return;
-        }
-        const hotKeys = this.getProps().hotKeys;
+        const { mergeMetaCtrl: merged, hotKeys, preventDefault } = this.getProps();
         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") {
+        const keysPressed = hotKeys?.map((key: KeyboardEvent["key"]) => {
+            key = key.toLowerCase();
+            if (key === Keys.Meta) {
                 allModifier[0] = true;
                 return event.metaKey; 
-            } else if (key === "Shift") {
+            } else if (key === Keys.Shift) {
                 allModifier[1] = true;
                 return event.shiftKey;
-            } else if (key === "Alt") {
+            } else if (key === Keys.Alt) {
                 allModifier[2] = true;
                 return event.altKey;
-            } else if (key === "Control") {
+            } else if (key === Keys.Control) {
                 allModifier[3] = true;
                 return event.ctrlKey;
             }
@@ -46,17 +64,15 @@ export default class HotKeysFoundation<P = Record<string, any>, S = Record<strin
             return;
         }
         if (keysPressed.every(Boolean)) {
-            event.preventDefault();
-            this.handleClick();
+            if (preventDefault) {
+                event.preventDefault();
+            }
+            this._adapter.notifyHotKey(event);
             return;
         }
         
     }
 
-    handleClick(): void {
-        this._adapter.notifyClick();
-    }
-
     destroy(): void {
         // remove Listener
         const target = this._adapter.getListenerTarget();

package/hotKeys/hotKeys.scss

@@ -24,6 +24,7 @@ $module: #{$prefix}-hotKeys;
     &-split {
         @include font-size-small;
         margin: 0 3px;
+        color: $color-hotKeys-split;
     }
 
 }

package/hotKeys/variables.scss

@@ -1,5 +1,6 @@
 $color-hotKeys-bg: var(--semi-color-fill-0); // 快捷键背景颜色
 $color-hotKeys-text: var(--semi-color-text-2); // 快捷键文字颜色
+$color-hotKeys-split: var(--semi-color-text-0); // 快捷键文字颜色
 
 $width-hotKeys-border: 1px; // 快捷键描边宽度
 $radius-hotKeys: 2px; // 边框半径

package/lib/cjs/hotKeys/constants.d.ts

@@ -4,3 +4,114 @@ declare const cssClasses: {
 declare const strings: {};
 export { cssClasses, strings };
 export declare function keyToCode(key: KeyboardEvent["key"]): any;
+declare enum 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",
+    Digit0 = "0",
+    Digit1 = "1",
+    Digit2 = "2",
+    Digit3 = "3",
+    Digit4 = "4",
+    Digit5 = "5",
+    Digit6 = "6",
+    Digit7 = "7",
+    Digit8 = "8",
+    Digit9 = "9",
+    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 = ")",
+    ArrowUp = "arrowup",
+    ArrowDown = "arrowdown",
+    ArrowLeft = "arrowleft",
+    ArrowRight = "arrowright",
+    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",
+    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 { Keys };