chore: rename keyboardShortCut to hotKeus

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

@@ -1,8 +1,8 @@
 ---
 localeCode: en-US
-order: 32
+order: 30
 category: Input
-title:  KeyboardShortCut
+title:  HotKeys
 icon: doc-input
 width: 60%
 brief: used to facilitate the customization of keyboard shortcut
@@ -14,7 +14,7 @@ brief: used to facilitate the customization of keyboard shortcut
 ### How to import
 
 ```jsx import 
-import { KeyboardShortCut } from '@douyinfe/semi-ui';
+import { HotKeys } from '@douyinfe/semi-ui';
 ```
 
 ### Basic Usage
@@ -25,7 +25,7 @@ Define the keyboard shortcut through `hotKeys`
 
 ```jsx live=true
 import React, { useState } from 'react';
-import { KeyboardShortCut } from '@douyinfe/semi-ui';
+import { HotKeys } from '@douyinfe/semi-ui';
 
 function Demo() {
   const hotKeys = ["Control", "a"]
@@ -35,9 +35,9 @@ function Demo() {
   }
   return (
     <div>
-      <KeyboardShortCut hotKeys={hotKeys} onClick={onClick} ></KeyboardShortCut>
+      <HotKeys hotKeys={hotKeys} onClick={onClick} ></HotKeys>
       <br></br>
-      <KeyboardShortCut hotKeys={['Control', 'Shift', 'a']} onClick={onClick} ></KeyboardShortCut>
+      <HotKeys hotKeys={['Control', 'Shift', 'a']} onClick={onClick} ></HotKeys>
       <div>{cnt}</div>
     </div>
   );
@@ -50,7 +50,7 @@ Set the characters through `content`
 
 ```jsx live=true
 import React, { useState } from 'react';
-import { KeyboardShortCut } from '@douyinfe/semi-ui';
+import { HotKeys } from '@douyinfe/semi-ui';
 
 function Demo() {
   const [cnt, setCnt] = useState(0)
@@ -59,9 +59,9 @@ function Demo() {
   }
   return (
     <div>
-      <KeyboardShortCut hotKeys={["Control", "b"]} onClick={onClick} content={["Ctrl", "B"]}></KeyboardShortCut>
+      <HotKeys hotKeys={["Control", "b"]} onClick={onClick} content={["Ctrl", "B"]}></HotKeys>
         <br></br>
-      <KeyboardShortCut hotKeys={["Meta","c"]} onClick={onClick} content={["⌘", "C"]}></KeyboardShortCut>
+      <HotKeys hotKeys={["Meta","b"]} onClick={onClick} content={["⌘", "B"]}></HotKeys>
       <div>{cnt}</div>
     </div>
   );
@@ -69,9 +69,11 @@ function Demo() {
 ```
 
 Replace the element through `render`
+
+When encountering issues caused by different operating system shortcuts, you can similarly use two components and customize the rendering.
 ```jsx live=true
 import React, { useState } from 'react';
-import { KeyboardShortCut, Tag } from '@douyinfe/semi-ui';
+import { HotKeys, Tag } from '@douyinfe/semi-ui';
 
 function Demo() {
   const hotKeys = ["r"]
@@ -88,8 +90,8 @@ function Demo() {
   }
   return (
     <div>
-      <KeyboardShortCut hotKeys={hotKeys} onClick={onClick} render={newShortCut}></KeyboardShortCut>
-      <KeyboardShortCut hotKeys={["k"]} onClick={onClick} render={() => null}></KeyboardShortCut>
+      <HotKeys hotKeys={hotKeys} onClick={onClick} render={newShortCut}></HotKeys>
+      <HotKeys hotKeys={["k"]} onClick={onClick} render={() => null}></HotKeys>
       <div>{cnt}</div>
     </div>
   );
@@ -101,7 +103,7 @@ function Demo() {
 Trigger the function by clicking component
 ```jsx live=true
 import React, { useState } from 'react';
-import { KeyboardShortCut } from '@douyinfe/semi-ui';
+import { HotKeys } from '@douyinfe/semi-ui';
 
 function Demo() {
   const hotKeys = ["Control", "a"]
@@ -111,7 +113,7 @@ function Demo() {
   }
   return (
     <div>
-      <KeyboardShortCut hotKeys={hotKeys} onClick={onClick} clickable></KeyboardShortCut>
+      <HotKeys hotKeys={hotKeys} onClick={onClick} clickable></HotKeys>
       <div>{cnt}</div>
     </div>
   );
@@ -122,7 +124,7 @@ function Demo() {
 through `getListenerTarget`
 ```jsx live=true
 import React, { useState, useRef } from 'react';
-import { KeyboardShortCut, Input } from '@douyinfe/semi-ui';
+import { HotKeys, Input } from '@douyinfe/semi-ui';
 
 function Demo() {
   const hotKeys = ["Meta", "s"]
@@ -135,9 +137,9 @@ function Demo() {
   return (
     <div>
       <Input ref={inputRef} placeholder='test for target'></Input>
-      <KeyboardShortCut hotKeys={hotKeys} onClick={onClick} 
+      <HotKeys hotKeys={hotKeys} onClick={onClick} 
         getListenerTarget={() => inputRef.current}>
-      </KeyboardShortCut>
+      </HotKeys>
       <div>{cnt}</div>
     </div>
   );
@@ -145,10 +147,11 @@ function Demo() {
 ```
 
 ### Disabled
+You can use it when only styling is needed.
 
 ```jsx live=true
 import React, { useState } from 'react';
-import { KeyboardShortCut } from '@douyinfe/semi-ui';
+import { HotKeys } from '@douyinfe/semi-ui';
 
 function Demo() {
   const hotKeys = ["Control", "a"]
@@ -158,7 +161,7 @@ function Demo() {
   }
   return (
     <div>
-      <KeyboardShortCut hotKeys={hotKeys} onClick={onClick} disabled></KeyboardShortCut>
+      <HotKeys hotKeys={hotKeys} onClick={onClick} disabled></HotKeys>
       <div>{cnt}</div>
     </div>
   );
@@ -167,7 +170,7 @@ function Demo() {
 
 ## API Reference
 
-### KeyboardShortCut
+### HotKeys
 
 
 | Property          | Instructions                                                                                                                                                                                  | type                            | Default   |

content/input/keyboardshortcut/index.md → content/input/hotkeys/index.md

@@ -1,8 +1,8 @@
 ---
 localeCode: zh-CN
-order: 32
+order: 30
 category: 输入类
-title: KeyboardShortCut 快捷键
+title: HotKeys 快捷键
 icon: doc-input
 width: 60%
 brief: 用于方便用户自定义快捷键及相关操作
@@ -14,7 +14,7 @@ brief: 用于方便用户自定义快捷键及相关操作
 ### 如何引入
 
 ```jsx import
-import { KeyboardShortCut } from '@douyinfe/semi-ui';
+import { HotKeys } from '@douyinfe/semi-ui';
 ```
 ### 基本
 
@@ -24,7 +24,7 @@ import { KeyboardShortCut } from '@douyinfe/semi-ui';
 
 ```jsx live=true
 import React, { useState } from 'react';
-import { KeyboardShortCut } from '@douyinfe/semi-ui';
+import { HotKeys } from '@douyinfe/semi-ui';
 
 function Demo() {
   const hotKeys = ["Control", "a"]
@@ -34,9 +34,9 @@ function Demo() {
   }
   return (
     <div>
-      <KeyboardShortCut hotKeys={hotKeys} onClick={onClick} ></KeyboardShortCut>
+      <HotKeys hotKeys={hotKeys} onClick={onClick} ></HotKeys>
       <br></br>
-      <KeyboardShortCut hotKeys={['Control', 'Shift', 'a']} onClick={onClick} ></KeyboardShortCut>
+      <HotKeys hotKeys={['Control', 'Shift', 'a']} onClick={onClick} ></HotKeys>
       <div>{cnt}</div>
     </div>
   );
@@ -49,7 +49,7 @@ function Demo() {
 
 ```jsx live=true
 import React, { useState } from 'react';
-import { KeyboardShortCut } from '@douyinfe/semi-ui';
+import { HotKeys } from '@douyinfe/semi-ui';
 
 function Demo() {
   const [cnt, setCnt] = useState(0)
@@ -58,9 +58,9 @@ function Demo() {
   }
   return (
     <div>
-      <KeyboardShortCut hotKeys={["Control", "b"]} onClick={onClick} content={["Ctrl", "B"]}></KeyboardShortCut>
+      <HotKeys hotKeys={["Control", "b"]} onClick={onClick} content={["Ctrl", "B"]}></HotKeys>
         <br></br>
-      <KeyboardShortCut hotKeys={["Meta","c"]} onClick={onClick} content={["⌘", "C"]}></KeyboardShortCut>
+      <HotKeys hotKeys={["Meta","b"]} onClick={onClick} content={["⌘", "B"]}></HotKeys>
       <div>{cnt}</div>
     </div>
   );
@@ -68,9 +68,11 @@ function Demo() {
 ```
 
 通过`render`传入代替渲染的元素
+
+当遇到操作系统导致的快捷键不同的问题时，可以类似地使用两个组件且自定义渲染
 ```jsx live=true
 import React, { useState } from 'react';
-import { KeyboardShortCut, Tag } from '@douyinfe/semi-ui';
+import { HotKeys, Tag } from '@douyinfe/semi-ui';
 
 function Demo() {
   const hotKeys = ["r"]
@@ -87,8 +89,8 @@ function Demo() {
   }
   return (
     <div>
-      <KeyboardShortCut hotKeys={hotKeys} onClick={onClick} render={newShortCut}></KeyboardShortCut>
-      <KeyboardShortCut hotKeys={["k"]} onClick={onClick} render={() => null}></KeyboardShortCut>
+      <HotKeys hotKeys={hotKeys} onClick={onClick} render={newShortCut}></HotKeys>
+      <HotKeys hotKeys={["k"]} onClick={onClick} render={() => null}></HotKeys>
       <div>{cnt}</div>
     </div>
   );
@@ -100,7 +102,7 @@ function Demo() {
 设置`clickable`为`true`可以通过点击触发
 ```jsx live=true
 import React, { useState } from 'react';
-import { KeyboardShortCut } from '@douyinfe/semi-ui';
+import { HotKeys } from '@douyinfe/semi-ui';
 
 function Demo() {
   const hotKeys = ["Control", "a"]
@@ -110,7 +112,7 @@ function Demo() {
   }
   return (
     <div>
-      <KeyboardShortCut hotKeys={hotKeys} onClick={onClick} clickable></KeyboardShortCut>
+      <HotKeys hotKeys={hotKeys} onClick={onClick} clickable></HotKeys>
       <div>{cnt}</div>
     </div>
   );
@@ -121,7 +123,7 @@ function Demo() {
 通过`getListenerTarget`修改快捷键监听挂载的DOM
 ```jsx live=true
 import React, { useState, useRef } from 'react';
-import { KeyboardShortCut, Input } from '@douyinfe/semi-ui';
+import { HotKeys, Input } from '@douyinfe/semi-ui';
 
 function Demo() {
   const hotKeys = ["Meta", "s"]
@@ -134,9 +136,9 @@ function Demo() {
   return (
     <div>
       <Input ref={inputRef} placeholder='test for target'></Input>
-      <KeyboardShortCut hotKeys={hotKeys} onClick={onClick} 
+      <HotKeys hotKeys={hotKeys} onClick={onClick} 
         getListenerTarget={() => inputRef.current}>
-      </KeyboardShortCut>
+      </HotKeys>
       <div>{cnt}</div>
     </div>
   );
@@ -147,9 +149,11 @@ function Demo() {
 
 设定 `disabled` 属性为 `true`
 
+当仅需要样式时可以使用
+
 ```jsx live=true
 import React, { useState } from 'react';
-import { KeyboardShortCut } from '@douyinfe/semi-ui';
+import { HotKeys } from '@douyinfe/semi-ui';
 
 function Demo() {
   const hotKeys = ["Control", "a"]
@@ -159,7 +163,7 @@ function Demo() {
   }
   return (
     <div>
-      <KeyboardShortCut hotKeys={hotKeys} onClick={onClick} disabled></KeyboardShortCut>
+      <HotKeys hotKeys={hotKeys} onClick={onClick} disabled></HotKeys>
       <div>{cnt}</div>
     </div>
   );
@@ -168,7 +172,7 @@ function Demo() {
 
 ## API 参考
 
-### KeyboardShortCut
+### HotKeys
 
 | 属性              | 说明                                                                  | 类型                            | 默认值    |
 | ----------------- | --------------------------------------------------------------------- | ------------------------------- | --------- |

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 30
+order: 31
 category: Input
 title:  Input
 subTitle: Input

content/input/input/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 30
+order: 31
 category: 输入类
 title:  Input 输入框
 icon: doc-input

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 31
+order: 32
 category: Input
 title:  InputNumber
 subTitle: InputNumber

content/input/inputnumber/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 31
+order: 32
 category: 输入类
 title: InputNumber 数字输入框
 icon: doc-inputnumber

content/order.js

@@ -28,9 +28,9 @@ const order = [
     'colorpicker',
     'datepicker',
     'form',
+    'hotkeys',
     'input',
     'inputnumber',
-    'keyboardshortcut',
     'pincode',
     'radio',
     'rating',

packages/semi-foundation/keyboardShortCut/constants.ts → packages/semi-foundation/hotKeys/constants.ts

@@ -1,7 +1,7 @@
 import { BASE_CLASS_PREFIX } from "../base/constants";
 
 const cssClasses = {
-    PREFIX: `${BASE_CLASS_PREFIX}-keyboardShortCut`,
+    PREFIX: `${BASE_CLASS_PREFIX}-hotKeys`,
 } as const;
 
 const strings = {

packages/semi-foundation/keyboardShortCut/foundation.ts → packages/semi-foundation/hotKeys/foundation.ts

@@ -1,13 +1,13 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { keyToCode } from './constants';
 
-export interface KeyboardShortCutAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+export interface HotKeysAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     notifyClick: () => void;
     getListenerTarget: () => HTMLElement
 }
 
-export default class KeyboardShortCutFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<KeyboardShortCutAdapter<P, S>, P, S> {
-    constructor(adapter: KeyboardShortCutAdapter<P, S>) {
+export default class HotKeysFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<HotKeysAdapter<P, S>, P, S> {
+    constructor(adapter: HotKeysAdapter<P, S>) {
         super({ ...adapter });
     }
 

packages/semi-foundation/hotKeys/hotKeys.scss

@@ -0,0 +1,29 @@
+@import "./variables.scss";
+
+$module: #{$prefix}-hotKeys;
+
+.#{$module} {
+    box-sizing: border-box;
+    position: relative;
+    user-select: none;
+    white-space: nowrap;
+    vertical-align: bottom;
+    @include all-center;
+    display: inline-flex;
+
+    &-content {
+        @include font-size-small;
+        border-radius: $radius-hotKeys;
+        height: $height-hotKeys;
+        padding: $spacing-hotKeys-paddingY $spacing-hotKeys-paddingX;
+        border: $width-hotKeys-border;
+        background-color: $color-hotKeys-bg;
+        color: $color-hotKeys-text;
+    }
+
+    &-split {
+        @include font-size-small;
+        margin: 0 3px;
+    }
+
+}

packages/semi-foundation/hotKeys/variables.scss

@@ -0,0 +1,9 @@
+$color-hotKeys-bg: var(--semi-color-fill-0); // 快捷键背景颜色
+$color-hotKeys-text: var(--semi-color-text-2); // 快捷键文字颜色
+
+$width-hotKeys-border: 1px; // 快捷键描边宽度
+$radius-hotKeys: 2px; // 边框半径
+
+$height-hotKeys: 20px; // 快捷键高度
+$spacing-hotKeys-paddingY: 2px;
+$spacing-hotKeys-paddingX: $spacing-tight;

packages/semi-foundation/keyboardShortCut/keyboardShortCut.scss

@@ -1,29 +0,0 @@
-@import "./variables.scss";
-
-$module: #{$prefix}-keyboardShortCut;
-
-.#{$module} {
-    box-sizing: border-box;
-    position: relative;
-    user-select: none;
-    white-space: nowrap;
-    vertical-align: bottom;
-    @include all-center;
-    display: inline-flex;
-
-    &-content {
-        @include font-size-small;
-        border-radius: $radius-keyboardShortCut;
-        height: $height-keyboardShortCut;
-        padding: $spacing-keyboardShortCut-paddingY $spacing-keyboardShortCut-paddingX;
-        border: $width-keyboardShortCut-border;
-        background-color: $color-keyboardShortCut-bg;
-        color: $color-keyboardShortCut-text;
-    }
-
-    &-split {
-        @include font-size-small;
-        margin: 0 3px;
-    }
-
-}

packages/semi-foundation/keyboardShortCut/variables.scss

@@ -1,9 +0,0 @@
-$color-keyboardShortCut-bg: var(--semi-color-fill-0); // 快捷键背景颜色
-$color-keyboardShortCut-text: var(--semi-color-text-2); // 快捷键文字颜色
-
-$width-keyboardShortCut-border: 1px; // 快捷键描边宽度
-$radius-keyboardShortCut: 2px; // 边框半径
-
-$height-keyboardShortCut: 20px; // 快捷键高度
-$spacing-keyboardShortCut-paddingY: 2px;
-$spacing-keyboardShortCut-paddingX: $spacing-tight;

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

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import { Button } from '@douyinfe/semi-ui'
-import { KeyboardShortCut } from '../../index';
+import { HotKeys } from '../../index';
 
 export default {
-  title: 'KeyboardShortCut'
+  title: 'HotKeys'
 }
 
 export const Demo = () => {
@@ -14,9 +14,9 @@ export const Demo = () => {
   }
   return (
     <div>
-      <KeyboardShortCut hotKeys={hotKeys} onClick={onClick}></KeyboardShortCut>
+      <HotKeys hotKeys={hotKeys} onClick={onClick}></HotKeys>
       <div>clickable</div>
-      <KeyboardShortCut hotKeys={hotKeys} onClick={onClick} clickable={true}></KeyboardShortCut>
+      <HotKeys hotKeys={hotKeys} onClick={onClick} clickable={true}></HotKeys>
       <pre>{cnt}</pre>
     </div>
   );
@@ -42,8 +42,8 @@ export const render = () => {
   return (
     <div>
       <span>{" cnt:" + cnt}</span>
-      <KeyboardShortCut hotKeys={hotKeys} onClick={onClick} render={button}
-      ></KeyboardShortCut>
+      <HotKeys hotKeys={hotKeys} onClick={onClick} render={button}
+      ></HotKeys>
     </div>
 
   );
@@ -58,8 +58,8 @@ export const combine = () => {
   return (
     <div>
       <pre>{cnt}</pre>
-      <KeyboardShortCut hotKeys={hotKeys} onClick={onClick}></KeyboardShortCut>
-      <KeyboardShortCut hotKeys={["Meta", "Shift", "k"]} onClick={onClick}></KeyboardShortCut>
+      <HotKeys hotKeys={hotKeys} onClick={onClick}></HotKeys>
+      <HotKeys hotKeys={["Meta", "Shift", "k"]} onClick={onClick}></HotKeys>
     </div>
     
   );
@@ -77,7 +77,7 @@ export const target = () => {
     <div>
       {target}
       <pre>{cnt}</pre>
-      <KeyboardShortCut hotKeys={hotKeys} onClick={onClick} getListenerTarget={() => document.getElementById("test")}></KeyboardShortCut>
+      <HotKeys hotKeys={hotKeys} onClick={onClick} getListenerTarget={() => document.getElementById("test")}></HotKeys>
     </div>
     
   );
@@ -91,7 +91,7 @@ export const disabled = () => {
   }
   return (
     <div>
-      <KeyboardShortCut hotKeys={hotKeys} onClick={onClick} disabled></KeyboardShortCut>
+      <HotKeys hotKeys={hotKeys} onClick={onClick} disabled></HotKeys>
       <pre>{cnt}</pre>
     </div>
   );

packages/semi-ui/keyboardShortCut/index.tsx → packages/semi-ui/hotKeys/index.tsx

@@ -1,15 +1,15 @@
 import React, { KeyboardEvent, ReactNode } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import KeyboardShortCutFoudation, { KeyboardShortCutAdapter } from '@douyinfe/semi-foundation/keyboardShortCut/foundation';
-import { cssClasses, strings } from '@douyinfe/semi-foundation/keyboardShortCut/constants';
+import HotKeysFoudation, { HotKeysAdapter } from '@douyinfe/semi-foundation/hotKeys/foundation';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/hotKeys/constants';
 import BaseComponent from '../_base/baseComponent';
 import { noop } from 'lodash';
-import '@douyinfe/semi-foundation/keyboardShortCut/keyboardShortCut.scss';
+import '@douyinfe/semi-foundation/hotKeys/hotKeys.scss';
 
 const prefixCls = cssClasses.PREFIX;
 
-export interface KeyboardShortCutProps {
+export interface HotKeysProps {
     hotKeys?: KeyboardEvent["key"][];
     content?: string[];
     onClick?: () => void;
@@ -21,11 +21,11 @@ export interface KeyboardShortCutProps {
     style?: React.CSSProperties
 }
 
-export interface KeyboardShortCutState {
+export interface HotKeysState {
     disabled: boolean
 }
 
-class KeyboardShortCut extends BaseComponent<KeyboardShortCutProps, KeyboardShortCutState> {
+class HotKeys extends BaseComponent<HotKeysProps, HotKeysState> {
     static propTypes = {
         hotKeys: PropTypes.arrayOf(PropTypes.string),
         content: PropTypes.arrayOf(PropTypes.string),
@@ -38,7 +38,7 @@ class KeyboardShortCut extends BaseComponent<KeyboardShortCutProps, KeyboardShor
         style: PropTypes.object,
     };
 
-    static defaultProps: Partial<KeyboardShortCutProps> = {
+    static defaultProps: Partial<HotKeysProps> = {
         hotKeys: null,
         content: null,
         onClick: noop,
@@ -50,19 +50,19 @@ class KeyboardShortCut extends BaseComponent<KeyboardShortCutProps, KeyboardShor
         style: null,
     };
 
-    constructor(props: KeyboardShortCutProps) {
+    constructor(props: HotKeysProps) {
         super(props);
         this.state = {
             disabled: false
         };
-        this.foundation = new KeyboardShortCutFoudation(this.adapter);
+        this.foundation = new HotKeysFoudation(this.adapter);
     }
 
     componentDidMount() {
         this.foundation.init();
     }
 
-    componentDidUpdate(_prevProps: KeyboardShortCutProps) {
+    componentDidUpdate(_prevProps: HotKeysProps) {
         
     }
 
@@ -70,7 +70,7 @@ class KeyboardShortCut extends BaseComponent<KeyboardShortCutProps, KeyboardShor
         this.foundation.destroy();
     }
 
-    get adapter(): KeyboardShortCutAdapter<KeyboardShortCutProps, KeyboardShortCutState> {
+    get adapter(): HotKeysAdapter<HotKeysProps, HotKeysState> {
         return {
             ...super.adapter,
             notifyClick: () => {
@@ -118,4 +118,4 @@ class KeyboardShortCut extends BaseComponent<KeyboardShortCutProps, KeyboardShor
     }
 }
 
-export default KeyboardShortCut;
+export default HotKeys;

packages/semi-ui/index.ts

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