Aurora Admin v1.2.0: 79 components x 5 ends, doc site, contracts batch 1, playground, regression, deploy ready
This commit is contained in:
@@ -0,0 +1,37 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import './ShortcutPanel.css';
|
||||
|
||||
const DEFAULT_ITEMS = [
|
||||
{ name: '保存', key: 'Ctrl + S' },
|
||||
{ name: '搜索', key: 'Ctrl + K' },
|
||||
{ name: '新建', key: 'Ctrl + N' },
|
||||
{ name: '刷新', key: 'F5' },
|
||||
{ name: '关闭页签', key: 'Ctrl + W' },
|
||||
{ name: '全屏', key: 'F11' },
|
||||
{ name: '帮助', key: '?' },
|
||||
{ name: '命令面板', key: 'Ctrl + P' }
|
||||
];
|
||||
|
||||
export default function ShortcutPanel({ items = DEFAULT_ITEMS }) {
|
||||
const [q, setQ] = useState('');
|
||||
const filtered = useMemo(() => {
|
||||
const s = q.trim().toLowerCase();
|
||||
if (!s) return items;
|
||||
return items.filter((it) => it.name.toLowerCase().indexOf(s) >= 0 || it.key.toLowerCase().indexOf(s) >= 0);
|
||||
}, [q, items]);
|
||||
|
||||
return (
|
||||
<div className="aa-shortcut">
|
||||
<input className="aa-shortcut-search" value={q} placeholder="搜索快捷键…" onChange={(e) => setQ(e.target.value)} />
|
||||
<div className="aa-shortcut-list">
|
||||
{!filtered.length && <div className="aa-shortcut-empty">无匹配快捷键</div>}
|
||||
{filtered.map((it, i) => (
|
||||
<div key={i} className="aa-shortcut-item">
|
||||
<span>{it.name}</span>
|
||||
<span className="aa-shortcut-key">{it.key}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user