fixes issue with loosing state if field is hidden/visible toggled

awcodes · May 19, 2022 · ebdc504 · ebdc504
1 parent fb26934
commit ebdc504
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 36 deletions.
diff --git a/resources/views/components/media-picker.blade.php b/resources/views/components/media-picker.blade.php
@@ -11,29 +11,30 @@
         x-on:close-modal.window="$event.detail.fieldId == '{{ $getStatePath() }}' ? state = $event.detail.media : null"
         class="w-full">
 
-        <div wire:ignore>
-            <x-filament::button x-show="!state"
-                type="button"
-                :outlined="true"
-                x-on:click="$dispatch('open-modal', {id: 'filament-curator-media-picker', fieldId: '{{ $getStatePath() }}'})">
-                Add Media
-            </x-filament::button>
-        </div>
-
-        <div x-show="state"
-            style="display: none;"
-            class="relative block w-full h-64 overflow-hidden transition duration-75 border border-gray-300 rounded-lg shadow-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white">
-            <img x-bind:src="state?.url"
-                x-bind:alt="state?.alt"
-                x-bind:width="state?.width"
-                x-bind:height="state?.height"
-                class="object-cover w-full h-full checkered" />
-            <button type="button"
-                x-on:click="state = null"
-                class="absolute flex items-center justify-center w-10 h-10 text-white rounded-full top-4 left-4 !bg-black/75">
-                <x-heroicon-s-x class="w-6 h-6" />
-            </button>
-        </div>
+        @if (!$getState())
+            <div>
+                <x-filament::button type="button"
+                    :outlined="true"
+                    x-on:click="$dispatch('open-modal', {id: 'filament-curator-media-picker', fieldId: '{{ $getStatePath() }}'})">
+                    Add Media
+                </x-filament::button>
+            </div>
+        @else
+            @php
+                $currentItem = $getCurrentItem($getState());
+            @endphp
+            <div
+                class="relative block w-full h-64 overflow-hidden transition duration-75 border border-gray-300 rounded-lg shadow-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white">
+                <img src="{{ $currentItem['url'] }}"
+                    alt="{{ $currentItem['alt'] }}"
+                    class="object-cover w-full h-full checkered" />
+                <button type="button"
+                    x-on:click="state = null"
+                    class="absolute flex items-center justify-center w-10 h-10 text-white rounded-full top-4 left-4 !bg-black/75">
+                    <x-heroicon-s-x class="w-6 h-6" />
+                </button>
+            </div>
+        @endif
     </div>
 
     @once

diff --git a/src/Forms/Components/MediaPicker.php b/src/Forms/Components/MediaPicker.php
@@ -9,19 +9,8 @@ class MediaPicker extends Field
 {
     protected string $view = 'filament-curator::components.media-picker';
 
-    protected function setUp(): void
+    public function getCurrentItem($state)
     {
-        parent::setUp();
-
-        $this->afterStateHydrated(function (MediaPicker $component, $state): void {
-            $item = resolve(config('filament-curator.model'))->where('id', $state)->first();
-            if ($item instanceof Media) {
-                $component->state($item);
-            }
-        });
-
-        $this->dehydrateStateUsing(function ($state): ?int {
-            return isset($state['id']) ? $state['id'] : null;
-        });
+        return resolve(config('filament-curator.model'))->where('id', $state)->first();
     }
 }