feat: Добавление контекста для управления открытием Command Palette и создание кнопки для её открытия через клик. Улучшение взаимодействия с пользователем и упрощение доступа к функционалу командной палитры.
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m41s
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m41s
This commit is contained in:
@@ -17,6 +17,9 @@ import {
|
|||||||
* Command Palette - глобальный поиск по командам (Ctrl+K)
|
* Command Palette - глобальный поиск по командам (Ctrl+K)
|
||||||
* Простой подход со встроенным backdrop (как в HistoryModal)
|
* Простой подход со встроенным backdrop (как в HistoryModal)
|
||||||
*/
|
*/
|
||||||
|
// Создаем контекст для управления открытием/закрытием Command Palette
|
||||||
|
const CommandPaletteContext = { open: null };
|
||||||
|
|
||||||
function CommandPalette() {
|
function CommandPalette() {
|
||||||
const [isOpen, setIsOpen] = useState(false)
|
const [isOpen, setIsOpen] = useState(false)
|
||||||
const [searchTerm, setSearchTerm] = useState('')
|
const [searchTerm, setSearchTerm] = useState('')
|
||||||
@@ -24,6 +27,14 @@ function CommandPalette() {
|
|||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
const inputRef = useRef(null)
|
const inputRef = useRef(null)
|
||||||
|
|
||||||
|
// Сохраняем функцию открытия в контекст
|
||||||
|
useEffect(() => {
|
||||||
|
CommandPaletteContext.open = () => setIsOpen(true);
|
||||||
|
return () => {
|
||||||
|
CommandPaletteContext.open = null;
|
||||||
|
};
|
||||||
|
}, [])
|
||||||
|
|
||||||
// Список команд
|
// Список команд
|
||||||
const commands = [
|
const commands = [
|
||||||
{ icon: IconHome, label: 'Главная', description: 'Панель управления', action: () => navigate('/dashboard'), keywords: ['главная', 'панель', 'dashboard'] },
|
{ icon: IconHome, label: 'Главная', description: 'Панель управления', action: () => navigate('/dashboard'), keywords: ['главная', 'панель', 'dashboard'] },
|
||||||
@@ -185,4 +196,27 @@ function CommandPalette() {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Кнопка для открытия Command Palette через клик
|
||||||
|
*/
|
||||||
|
export function KeyboardShortcutsButton({ className = '' }) {
|
||||||
|
const handleClick = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (CommandPaletteContext.open) {
|
||||||
|
CommandPaletteContext.open();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className={className}
|
||||||
|
onClick={handleClick}
|
||||||
|
title="Командная палитра (Ctrl+K)"
|
||||||
|
>
|
||||||
|
<IconKeyboard size={20} />
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export default CommandPalette
|
export default CommandPalette
|
||||||
|
|||||||
Reference in New Issue
Block a user