Last active
February 14, 2020 22:19
-
-
Save cbaconnier/e9d4a69e1fcb13d75d140ec7e29cc9dd to your computer and use it in GitHub Desktop.
Livewire flash component
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div> | |
@if($isOpen) | |
<div class="fixed right-0 bottom-0 mr-5 mb-10 z-50" | |
x-data="{open: false}" | |
x-init=" | |
setTimeout(function(){open=true}, 300); | |
setTimeout(function(){open=false;}, 1500); | |
setTimeout(function(){ window.livewire.emit('closeFlash')}, 1900); | |
" | |
> | |
<div | |
class="h-32 w-32 " | |
x-cloak | |
x-show="open" | |
x-transition:enter="transition ease-out duration-300" | |
x-transition:enter-start="opacity-0 transform scale-90" | |
x-transition:enter-end="opacity-100 transform scale-100" | |
x-transition:leave="transition ease-in duration-300" | |
x-transition:leave-start="opacity-100 transform scale-100" | |
x-transition:leave-end="opacity-0 transform scale-90" | |
> | |
<!-- svg from nucleoapp you may not have the right to use it without the licence :( --> | |
<svg xmlns="http://www.w3.org/2000/svg" | |
xmlns:xlink="http://www.w3.org/1999/xlink" | |
viewBox="0 0 48 48"> | |
<g transform="translate(0, 0)"> | |
<path fill="#72C472" | |
d="M24,47C11.31738,47,1,36.68213,1,24S11.31738,1,24,1s23,10.31787,23,23S36.68262,47,24,47z"></path> | |
<polygon fill="#FFFFFF" | |
points="20,34.82861 9.17188,24 12,21.17139 20,29.17139 36,13.17139 38.82812,16 "></polygon> | |
</g> | |
</svg> | |
</div> | |
</div> | |
@endif | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
namespace App\Components; | |
use Livewire\Component; | |
class Flash extends Component | |
{ | |
public $message = ''; | |
public $isOpen = false; | |
protected $listeners = ['openFlash' => 'open', 'closeFlash' => 'close']; | |
public function open($message) | |
{ | |
$this->isOpen = true; | |
$this->message = $message; | |
} | |
public function close() | |
{ | |
$this->isOpen = false; | |
$this->message = ''; | |
} | |
public function render() | |
{ | |
if($message = session()->pull('success')) { | |
$this->open($message); | |
} | |
return view('components.flash'); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment