Skip to content

Commit

Permalink
feat: done button
Browse files Browse the repository at this point in the history
  • Loading branch information
saade committed Aug 21, 2023
1 parent f68cca3 commit 7fd0c6d
Show file tree
Hide file tree
Showing 9 changed files with 152 additions and 10 deletions.
10 changes: 9 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -68,14 +68,21 @@ SignaturePad::make('signature')
->downloadActionDropdownPlacement('center-end') // Dropdown placement of the download action (defaults to 'bottom-end')
```

### Disabling clear, download and undo actions.
### Disabling clear, download, undo and done actions.
```php
use Saade\FilamentAutograph\Forms\Components\SignaturePad;

SignaturePad::make('signature')
->clearable(false)
->downloadable(false)
->undoable(false)
->confirmable(false)
```

### Requiring confirmation (Done button).
```php
SignaturePad::make('signature')
->confirmable() // Requires user to click on 'Done' (defaults to false)
```

### Customizing actions
Expand All @@ -87,6 +94,7 @@ SignaturePad::make('signature')
->clearAction(fn (Action $action) => $action->button())
->downloadAction(fn (Action $action) => $action->color('primary'))
->undoAction(fn (Action $action) => $action->icon('heroicon-o-ctrl-z'))
->confirmAction(fn (Action $action) => $action->iconButton()->icon('heroicon-o-thumbs-up'))
```
## Changelog

Expand Down
2 changes: 1 addition & 1 deletion resources/dist/filament-autograph.js

Large diffs are not rendered by default.

52 changes: 44 additions & 8 deletions resources/js/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import SignaturePad from "signature_pad";
export default ({
backgroundColor,
backgroundColorOnDark,
confirmable,
disabled,
dotSize,
exportBackgroundColor,
Expand All @@ -19,6 +20,8 @@ export default ({
}) => ({
state,
previousState: state,
dirty: false,
confirmed: false,

/** @type {SignaturePad} */
signaturePad: null,
Expand Down Expand Up @@ -54,14 +57,42 @@ export default ({

clear() {
this.signaturePad.clear();
this.state = null;
this.confirmed = false;
this.dirty = false;
this.signaturePad.on();
},

undo() {
const data = this.signaturePad.toData();
if (data) {
if (data.length) {
data.pop();
this.signaturePad.fromData(data);
}

if (!data.length) {
this.state = null;
}

this.confirmed = false;
this.dirty = data.length > 0;
this.signaturePad.on();
},

done() {
const { data: exportedData, canvasBackgroundColor, canvasPenColor } = this.prepareToExport()
this.signaturePad.fromData(exportedData)

this.previousState = this.state;
this.state = this.signaturePad.toDataURL();

if (confirmable) {
this.confirmed = true;
this.signaturePad.off();
}

const { data: restoredData } = this.restoreFromExport(exportedData, canvasBackgroundColor, canvasPenColor)
this.signaturePad.fromData(restoredData)
},

downloadAs(type, extension) {
Expand All @@ -78,16 +109,21 @@ export default ({
},

watchState() {
this.signaturePad.addEventListener("afterUpdateStroke", (e) => {
const { data: exportedData, canvasBackgroundColor, canvasPenColor } = this.prepareToExport()
this.signaturePad.fromData(exportedData)
this.signaturePad.addEventListener("endStroke", (e) => {
this.dirty = true;

this.previousState = this.state;
this.state = this.signaturePad.toDataURL();
if (confirmable) {
return;
}

const { data: restoredData } = this.restoreFromExport(exportedData, canvasBackgroundColor, canvasPenColor)
this.signaturePad.fromData(restoredData)
this.done();
}, { once: false });

this.$watch("confirmed", (confirmed) => {
if (confirmable && !confirmed) {
this.state = null
}
})
},

watchResize() {
Expand Down
4 changes: 4 additions & 0 deletions resources/lang/en/filament-autograph.php
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,9 @@
'svg' => 'SVG',
]
],

'done' => [
'label' => 'Done',
],
]
];
4 changes: 4 additions & 0 deletions resources/lang/pt_BR/filament-autograph.php
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,9 @@
'svg' => 'SVG',
]
],

'done' => [
'label' => 'Concluir',
],
]
];
8 changes: 8 additions & 0 deletions resources/views/signature-pad.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,12 @@ class="filament-autograph"
$downloadableFormats = $getDownloadableFormats();
$downloadActionDropdownPlacement = $getDownloadActionDropdownPlacement() ?? 'bottom-start';
$isUndoable = $isUndoable();
$isConfirmable = $isConfirmable();
$clearAction = $getAction('clear');
$downloadAction = $getAction('download');
$undoAction = $getAction('undo');
$doneAction = $getAction('done');
@endphp

<div
Expand All @@ -33,6 +35,7 @@ class="filament-autograph"
x-data="signaturePad({
backgroundColor: @js($getBackgroundColor()),
backgroundColorOnDark: @js($getBackgroundColorOnDark()),
confirmable: @js($isConfirmable),
disabled: @js($isDisabled),
dotSize: {{ $getDotSize() }},
exportBackgroundColor: @js($getExportBackgroundColor()),
Expand All @@ -50,6 +53,7 @@ class="filament-autograph"
>
<canvas
x-ref="canvas"
wire:ignore
@class([
'w-full h-36 rounded-lg border border-gray-300',
'dark:bg-gray-900 dark:border-white/10',
Expand Down Expand Up @@ -99,6 +103,10 @@ class="filament-autograph"
</x-filament::dropdown.list>
</x-filament::dropdown>
@endif

@if ($isConfirmable)
{{ $doneAction }}
@endif
</div>
</div>
</x-filament-forms::field-wrapper>
32 changes: 32 additions & 0 deletions src/Forms/Components/Actions/DoneAction.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<?php

namespace Saade\FilamentAutograph\Forms\Components\Actions;

use Filament\Forms\Components\Actions\Action;
use Filament\Support\Enums\ActionSize;
use Saade\FilamentAutograph\Forms\Components\SignaturePad;

class DoneAction extends Action
{
public static function getDefaultName(): ?string
{
return 'done';
}

protected function setUp(): void
{
parent::setUp();

$this->link()->icon('heroicon-o-check')->color('primary');

$this->label(fn (): string => __('filament-autograph::filament-autograph.actions.done.label'));

$this->livewireClickHandlerEnabled(false);

$this->size(ActionSize::Small);

$this->visible(
fn (SignaturePad $component): bool => $component->isConfirmable()
);
}
}
49 changes: 49 additions & 0 deletions src/Forms/Components/Concerns/HasActions.php
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@

use Closure;
use Filament\Forms\Components\Actions\Action;
use Illuminate\Support\HtmlString;
use Saade\FilamentAutograph\Forms\Components\Actions\ClearAction;
use Saade\FilamentAutograph\Forms\Components\Actions\DoneAction;
use Saade\FilamentAutograph\Forms\Components\Actions\DownloadAction;
use Saade\FilamentAutograph\Forms\Components\Actions\UndoAction;
use Saade\FilamentAutograph\Forms\Components\Enums\DownloadableFormat;
Expand All @@ -25,12 +27,16 @@ trait HasActions

protected bool | Closure $isUndoable = true;

protected bool | Closure $isConfirmable = false;

protected ?Closure $modifyClearActionUsing = null;

protected ?Closure $modifyDownloadActionUsing = null;

protected ?Closure $modifyUndoActionUsing = null;

protected ?Closure $modifyDoneActionUsing = null;

public function getClearAction(): Action
{
$action = ClearAction::make();
Expand Down Expand Up @@ -101,6 +107,33 @@ public function undoAction(?Closure $callback): static
return $this;
}

public function getDoneAction(): Action
{
$action = DoneAction::make();

if ($this->modifyDoneActionUsing) {
$action = $this->evaluate($this->modifyDoneActionUsing, [
'action' => $action,
]) ?? $action;
}

$action->extraAttributes([
'x-on:click' => 'done',
'x-cloak' => '',
'x-show' => new HtmlString('dirty && !confirmed'),
...$action->getExtraAttributes(),
]);

return $action;
}

public function doneAction(?Closure $callback): static
{
$this->modifyDoneActionUsing = $callback;

return $this;
}

public function clearable(bool | Closure $condition = true): static
{
$this->isClearable = $condition;
Expand Down Expand Up @@ -136,6 +169,13 @@ public function undoable(bool | Closure $condition = true): static
return $this;
}

public function confirmable(bool | Closure $condition = true): static
{
$this->isConfirmable = $condition;

return $this;
}

public function isClearable(): bool
{
if ($this->isDisabled()) {
Expand Down Expand Up @@ -172,4 +212,13 @@ public function isUndoable(): bool

return (bool) $this->evaluate($this->isUndoable);
}

public function isConfirmable(): bool
{
if ($this->isDisabled()) {
return false;
}

return (bool) $this->evaluate($this->isConfirmable);
}
}
1 change: 1 addition & 0 deletions src/Forms/Components/SignaturePad.php
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ protected function setUp(): void
fn (SignaturePad $component): Action => $component->getClearAction(),
fn (SignaturePad $component): Action => $component->getDownloadAction(),
fn (SignaturePad $component): Action => $component->getUndoAction(),
fn (SignaturePad $component): Action => $component->getDoneAction(),
]);
}
}

0 comments on commit 7fd0c6d

Please sign in to comment.