Merge pull request #61 from johntrickett86/add-keybindings

Added support for registering keybindings to open the quick add dropdown component
awcodes · Nov 4, 2024 · 5447c49 · 5447c49
2 parents aa0051a + fd1d5b6
commit 5447c49
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 41 deletions.
diff --git a/README.md b/README.md
@@ -118,6 +118,23 @@ public function panel(Panel $panel): Panel
 }
 ```
 
+### Registering keybindings
+
+You can attach keyboard shortcuts to trigger the Quick Create dropdown. To configure these, pass the keyBindings() method to the configuration:
+
+```php
+use Awcodes\FilamentQuickCreate\QuickCreatePlugin;
+
+public function panel(Panel $panel): Panel
+{
+    return $panel
+        ->plugins([
+            QuickCreatePlugin::make()
+                ->keyBindings(['command+shift+a', 'ctrl+shift+a']),
+        ])
+}
+```
+
 ### Appearance
 
 #### Rounded

diff --git a/resources/views/components/create-menu.blade.php b/resources/views/components/create-menu.blade.php
@@ -1,41 +1,63 @@
-<div class="quick-create-component">
-@if ($resources && $this->shouldBeHidden() === false)
-    <x-filament::dropdown placement="bottom-end" :teleport="true">
-        <x-slot name="trigger">
-            <button
-                @class([
-                    'flex flex-shrink-0 bg-gray-100 items-center justify-center text-primary-500 hover:text-primary-900 dark:bg-gray-800 hover:bg-primary-500 dark:hover:bg-primary-500',
-                    'rounded-full' => $rounded,
-                    'rounded-md' => ! $rounded,
-                    'w-8 h-8' => ! $label,
-                    'py-1 ps-3 pe-4 gap-1' => $label,
-                ])
-                aria-label="{{ __('filament-quick-create::quick-create.button_label') }}"
-            >
-                <x-filament::icon
-                    alias="filament-quick-create::add"
-                    icon="heroicon-o-plus"
-                    class="w-5 h-5"
-                />
-                @if ($label)
-                    <span class="">{{ $label }}</span>
-                @endif
-            </button>
-        </x-slot>
-        <x-filament::dropdown.list>
-            @foreach($resources as $resource)
-                <x-filament::dropdown.list.item
-                    :icon="$hiddenIcons ? null : $resource['icon']"
-                    :wire:click="$resource['action']"
-                    :href="$resource['url']"
-                    :tag="$resource['url'] ? 'a' : 'button'"
+@php
+    $keyBindings = collect($keyBindings ?? [])
+        ->map(fn (string $keyBinding): string => str_replace('+', '-', $keyBinding))
+        ->implode('.');
+@endphp
+
+<div class="quick-create-component"
+     @if($keyBindings)
+         x-data="{
+        toggleDropdown() {
+            this.$refs.triggerButton.click()
+            this.$refs.triggerButton.focus()
+        }
+    }"
+     @endif
+>
+    @if ($resources && $this->shouldBeHidden() === false)
+        <x-filament::dropdown placement="bottom-end" :teleport="true">
+            <x-slot name="trigger">
+                <button
+                        x-ref="triggerButton"
+                        @click="dropdownOpen = !dropdownOpen"
+                        @if($keyBindings)
+                            x-ref="triggerButton"
+                        x-mousetrap.global.{{ $keyBindings }}="toggleDropdown"
+                        @endif
+                        @class([
+                            'flex flex-shrink-0 bg-gray-100 items-center justify-center text-primary-500 hover:text-primary-900 dark:bg-gray-800 hover:bg-primary-500 dark:hover:bg-primary-500',
+                            'rounded-full' => $rounded,
+                            'rounded-md' => ! $rounded,
+                            'w-8 h-8' => ! $label,
+                            'py-1 ps-3 pe-4 gap-1' => $label,
+                        ])
+                        aria-label="{{ __('filament-quick-create::quick-create.button_label') }}"
                 >
-                    {{ $resource['label'] }}
-                </x-filament::dropdown.list.item>
-            @endforeach
-        </x-filament::dropdown.list>
-    </x-filament::dropdown>
+                    <x-filament::icon
+                            alias="filament-quick-create::add"
+                            icon="heroicon-o-plus"
+                            class="w-5 h-5"
+                    />
+                    @if ($label)
+                        <span class="">{{ $label }}</span>
+                    @endif
+                </button>
+            </x-slot>
+
+            <x-filament::dropdown.list>
+                @foreach($resources as $resource)
+                    <x-filament::dropdown.list.item
+                            :icon="$hiddenIcons ? null : $resource['icon']"
+                            :wire:click="$resource['action']"
+                            :href="$resource['url']"
+                            :tag="$resource['url'] ? 'a' : 'button'"
+                    >
+                        {{ $resource['label'] }}
+                    </x-filament::dropdown.list.item>
+                @endforeach
+            </x-filament::dropdown.list>
+        </x-filament::dropdown>
 
-    <x-filament-actions::modals />
-@endif
+        <x-filament-actions::modals/>
+    @endif
 </div>
diff --git a/src/Components/QuickCreateMenu.php b/src/Components/QuickCreateMenu.php
@@ -33,6 +33,8 @@ class QuickCreateMenu extends Component implements HasActions, HasForms
 
     public ?string $label = null;
 
+    public ?array $keyBindings = null;
+
     /**
      * @throws Exception
      */
@@ -42,6 +44,7 @@ public function mount(): void
         $this->rounded = QuickCreatePlugin::get()->isRounded();
         $this->hiddenIcons = QuickCreatePlugin::get()->shouldHideIcons();
         $this->label = QuickCreatePlugin::get()->getLabel();
+        $this->keyBindings = QuickCreatePlugin::get()->getKeyBindings();
     }
 
     /**
@@ -146,13 +149,21 @@ public function getActions(): array
             ->toArray();
     }
 
+    public function toggleDropdown(): void
+    {
+        $this->emit('toggleQuickCreateDropdown');
+    }
+
     public function shouldBeHidden(): bool
     {
         return QuickCreatePlugin::get()->shouldBeHidden();
     }
 
     public function render(): View
     {
-        return view('filament-quick-create::components.create-menu');
+        return view('filament-quick-create::components.create-menu')
+            ->with([
+                'keyBindings' => $this->keyBindings,
+            ]);
     }
 }
diff --git a/src/QuickCreatePlugin.php b/src/QuickCreatePlugin.php
@@ -40,10 +40,11 @@ class QuickCreatePlugin implements Plugin
 
     protected bool | Closure $shouldUseModal = false;
 
+    protected string | array | Closure | null $keyBindings = null;
+
     public function boot(Panel $panel): void
     {
         Livewire::component('quick-create-menu', Components\QuickCreateMenu::class);
-
         $this->getResourcesUsing(fn () => $panel->getResources());
     }
 
@@ -184,7 +185,6 @@ public function sortBy(string | Closure $sortBy = 'label'): static
         if (! in_array($sortBy, ['label', 'navigation'])) {
             $sortBy = 'label';
         }
-
         $this->sortBy = $sortBy;
 
         return $this;
@@ -249,4 +249,16 @@ public function alwaysShowModal(bool | Closure $condition = true): static
 
         return $this;
     }
+
+    public function keyBindings(string | array | Closure | null $bindings): static
+    {
+        $this->keyBindings = $bindings;
+
+        return $this;
+    }
+
+    public function getKeyBindings(): ?array
+    {
+        return collect($this->evaluate($this->keyBindings))->toArray();
+    }
 }