refactor: alert close button

This commit is contained in:
Aman Harwara
2023-01-17 00:33:20 +05:30
parent 029c74cc1f
commit 11dde8d03d
5 changed files with 81 additions and 49 deletions

View File

@@ -103,7 +103,14 @@ export class SKAlert {
buttonsTemplate = ''
panelStyle = 'style="padding-bottom: 8px"'
}
const titleTemplate = this.title ? `<div class='mb-1 font-bold text-lg'>${this.title}</div>` : ''
const titleTemplate = this.title
? `<div class='mb-1 font-bold text-lg flex items-center justify-between'>
${this.title}
<button id="close-button" class="rounded p-1 font-bold hover:bg-contrast" onClick={closeDialog}>
<svg class="w-5 h-5 fill-current" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.2459 5.92925C15.5704 5.60478 15.5704 5.07872 15.2459 4.75425C14.9214 4.42978 14.3954 4.42978 14.0709 4.75425L10.0001 8.82508L5.92925 4.75425C5.60478 4.42978 5.07872 4.42978 4.75425 4.75425C4.42978 5.07872 4.42978 5.60478 4.75425 5.92925L8.82508 10.0001L4.75425 14.0709C4.42978 14.3954 4.42978 14.9214 4.75425 15.2459C5.07872 15.5704 5.60478 15.5704 5.92925 15.2459L10.0001 11.1751L14.0709 15.2459C14.3954 15.5704 14.9214 15.5704 15.2459 15.2459C15.5704 14.9214 15.5704 14.3954 15.2459 14.0709L11.1751 10.0001L15.2459 5.92925Z" /></svg>
</button>
</div>`
: ''
const messageTemplate = this.text ? `<p class='sk-p text-base lg:text-sm'>${this.text}</p>` : ''
const template = `
@@ -169,5 +176,12 @@ export class SKAlert {
}
})
}
const closeButton = this.element.querySelector<HTMLButtonElement>('#close-button')
if (closeButton) {
closeButton.onclick = () => {
this.dismiss()
}
}
}
}