Skip to content

Commit e915639

Browse files
zerodevxzerodevx
committed
Refactor component-messages feature
1 parent 1ae26a4 commit e915639

File tree

6 files changed

+98
-89
lines changed

6 files changed

+98
-89
lines changed

‎cypress/integration/test.spec.js‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -96,15 +96,6 @@ describe('Integration Tests', () => {
9696
.click()
9797
})
9898

99-
it('Uses component', () => {
100-
cy.get('[data-btn=useComponent]')
101-
.click()
102-
.get('._toastItem span')
103-
.should('have.text', 'I am a Dummy.svelte component with property foo=bar (id: 10)')
104-
.get('._toastBtn')
105-
.click()
106-
})
107-
10899
it('Restores defaults', () => {
109100
cy.get('[data-btn=restoreDefaults]')
110101
.click()
@@ -147,10 +138,7 @@ describe('Integration Tests', () => {
147138
.get('._toastItem')
148139
.should('have.css', 'top', '0px')
149140
.get('._toastBtn')
150-
.should($e => {
151-
expect($e).to.have.length(2)
152-
})
153-
cy.window().invoke('toast.pop', 2)
141+
.click()
154142
})
155143

156144
it('Removes all toasts from selected container target', () => {
@@ -165,4 +153,12 @@ describe('Integration Tests', () => {
165153
.should('not.contain', 'NEW:')
166154
.window().invoke('toast.pop', 0)
167155
})
156+
157+
it('Uses component', () => {
158+
cy.get('[data-btn=sendComponentAsAMessage]')
159+
.click()
160+
.get('._toastItem h1')
161+
.should('have.text', 'A Dummy Cookie Component')
162+
.window().invoke('toast.pop')
163+
})
168164
})

‎docs/App.svelte‎

Lines changed: 64 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const handleClick = btn => {
1818
selected = btn.name
1919
code = btn.code
2020
btn.run()
21-
gtag('event', `toast:${camelCase(btn.name)}`)
21+
gtag('event', 'toast', { event_label: btn.name })
2222
}
2323
2424
const buttons = [
@@ -145,6 +145,7 @@ toast.set(id, { progress: 1 })`,
145145
--toastProgressBackground: aquamarine;
146146
}
147147
</style>
148+
148149
<script>
149150
toast.push('Changed some colors')
150151
<\/script>`, // eslint-disable-line no-useless-escape
@@ -156,12 +157,12 @@ toast.set(id, { progress: 1 })`,
156157
{
157158
name: 'POSITION TO BOTTOM',
158159
code: `<style>
159-
:root {
160-
--toastContainerTop: auto;
161-
--toastContainerRight: auto;
162-
--toastContainerBottom: 8rem;
163-
--toastContainerLeft: calc(50vw - 8rem);
164-
}
160+
:root {
161+
--toastContainerTop: auto;
162+
--toastContainerRight: auto;
163+
--toastContainerBottom: 8rem;
164+
--toastContainerLeft: calc(50vw - 8rem);
165+
}
165166
</style>
166167
167168
<SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
@@ -176,28 +177,6 @@ toast.set(id, { progress: 1 })`,
176177
toast.push('Bottoms up!')
177178
}
178179
},
179-
{
180-
name: 'USE COMPONENT',
181-
code: `
182-
toast.push({
183-
component: {
184-
src: DummyComponent,
185-
props: {
186-
foo: 'bar'
187-
}
188-
}
189-
})`,
190-
run: async () => {
191-
toast.push({
192-
component: {
193-
src: DummyComponent,
194-
props: {
195-
foo: 'bar'
196-
}
197-
}
198-
})
199-
}
200-
},
201180
{
202181
name: 'RESTORE DEFAULTS',
203182
code: '// All default settings restored!',
@@ -229,19 +208,12 @@ toast.set(id, { progress: 1 })`,
229208
<SvelteToast target="new" options={{ initial: 0, intro: { y: -64 } }} />
230209
</div>
231210
232-
<div>
233-
<SvelteToast options={{ initial: 0, intro: { y: -64 } }} />
234-
</div>
235-
236211
<script>
237212
// Send toast to "new" container
238-
toast.push('NEW: Multiple toast container support', { target: 'new' });
239-
// Send toast to "default" container
240-
toast.push('Default container toast')
213+
toast.push('NEW: Multiple toast container support', { target: 'new' })
241214
<\/script>`, // eslint-disable-line no-useless-escape
242215
run: () => {
243216
toast.push('NEW: Multiple toast container support', { target: 'new' })
244-
toast.push('Default container toast')
245217
}
246218
},
247219
{
@@ -254,6 +226,37 @@ toast.pop(0)`,
254226
run: () => {
255227
toast.pop(i => i.target !== 'new')
256228
}
229+
},
230+
{
231+
name: 'SEND COMPONENT AS A MESSAGE',
232+
code: `toast.push({
233+
component: {
234+
src: DummyComponent,
235+
props: {
236+
title: 'A Dummy Cookie Component'
237+
}
238+
},
239+
dismissable: false,
240+
initial: 0,
241+
theme: {
242+
'--toastMsgPadding': '0'
243+
}
244+
})`,
245+
run: () => {
246+
toast.push({
247+
component: {
248+
src: DummyComponent,
249+
props: {
250+
title: 'A Dummy Cookie Component'
251+
}
252+
},
253+
dismissable: false,
254+
initial: 0,
255+
theme: {
256+
'--toastMsgPadding': '0'
257+
}
258+
})
259+
}
257260
}
258261
]
259262
</script>
@@ -282,32 +285,29 @@ toast.pop(0)`,
282285
font-size: 0.875rem;
283286
}
284287
</style>
285-
286-
<div class="container">
287-
<div class="w-full h-64 px-2 mt-4 mb-8">
288-
<Prism classes="w-full h-full bg-gray-700 text-gray-200 font-mono shadow rounded-sm overflow-scroll p-4">
289-
{code}
290-
</Prism>
291-
</div>
292-
293-
<div class="flex flex-row flex-wrap items-center justify-center">
294-
295-
{#each buttons as btn}
296-
<button
297-
class:selected={selected === btn.name}
298-
on:click={() => { handleClick(btn) }}
299-
data-btn={camelCase(btn.name)}>
300-
{btn.name}
301-
</button>
302-
{/each}
303-
304-
</div>
288+
289+
<div class="container">
290+
<div class="w-full h-64 px-2 mt-4 mb-8">
291+
<Prism classes="w-full h-full bg-gray-700 text-gray-200 font-mono shadow rounded-sm overflow-scroll p-4">
292+
{code}
293+
</Prism>
305294
</div>
306-
307-
<div class="top">
308-
<SvelteToast options={{ initial: 0, intro: { y: -64 } }} target="new" />
295+
<div class="flex flex-row flex-wrap items-center justify-center">
296+
{#each buttons as btn}
297+
<button
298+
class:selected={selected === btn.name}
299+
on:click={() => { handleClick(btn) }}
300+
data-btn={camelCase(btn.name)}>
301+
{btn.name}
302+
</button>
303+
{/each}
309304
</div>
310-
311-
<div class:colors class:bottom>
312-
<SvelteToast {options} />
313-
</div>
305+
</div>
306+
307+
<div class="top">
308+
<SvelteToast options={{ initial: 0, intro: { y: -64 } }} target="new" />
309+
</div>
310+
311+
<div class:colors class:bottom>
312+
<SvelteToast {options} />
313+
</div>

‎docs/Dummy.svelte‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
<script>
2-
export let foo
3-
export let toastId
2+
import { toast } from '../src'
3+
4+
export let toastId
5+
export let title
6+
7+
const clicked = () => toast.pop(toastId)
48
</script>
5-
<span>I am a Dummy.svelte component with property foo={foo} (id: {toastId})</span>
9+
10+
<div class="w-full h-48 bg-yellow-500 rounded-sm flex flex-col">
11+
<h1 class="font-bold m-2">{title}</h1>
12+
<p class="text-sm mx-2 mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
13+
<div class="flex-1 flex flex-row justify-between">
14+
<button class="w-28" on:click={clicked}>DECLINE</button>
15+
<button class="w-28" on:click={clicked}>ACCEPT</button>
16+
</div>
17+
</div>

‎src/SvelteToast.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ ul {
2525
margin: 0;
2626
padding: 0;
2727
list-style-type: none;
28-
pointer-events: var(--toastContainerPointerEvents, auto);
28+
pointer-events: none;
2929
z-index: 9999;
3030
}
3131
</style>

‎src/ToastItem.svelte‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ $: if (prevProgress !== item.progress) {
4040
padding: var(--toastMsgPadding,0.75rem 0.5rem);
4141
flex: 1 1 0%;
4242
}
43-
._toastMsg :global(a) {
43+
.pe, ._toastMsg :global(a) {
4444
pointer-events: auto;
4545
}
4646
._toastBtn {
@@ -52,7 +52,6 @@ $: if (prevProgress !== item.progress) {
5252
justify-content: center;
5353
cursor: pointer;
5454
outline: none;
55-
pointer-events: auto;
5655
}
5756
._toastBar {
5857
display: block;
@@ -78,17 +77,15 @@ $: if (prevProgress !== item.progress) {
7877
</style>
7978

8079
<div class="_toastItem">
81-
<div class="_toastMsg">
80+
<div class="_toastMsg" class:pe={item.component}>
8281
{#if item.component}
83-
<svelte:component this="{item.component.src}" { ...item.component.props} toastId={item.id} />
82+
<svelte:component this="{item.component.src}" {...item.component.props} toastId={item.id} />
8483
{:else}
85-
{@html item.msg}
84+
{@html item.msg}
8685
{/if}
8786
</div>
88-
8987
{#if item.dismissable}
90-
<div class="_toastBtn" role="button" tabindex="-1" on:click={() => toast.pop(item.id)}>✕</div>
88+
<div class="_toastBtn pe" role="button" tabindex="-1" on:click={() => toast.pop(item.id)}>✕</div>
9189
{/if}
92-
9390
<progress class="_toastBar" value={$progress}></progress>
9491
</div>

‎src/index.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@ export interface SvelteToastOptions {
2929
reversed?: boolean
3030
intro?: FlyParams
3131
theme?: { [key: string]: string }
32+
component?: {
33+
src: object
34+
props?: { [key: string]: any }
35+
}
3236
}
3337

3438
export class SvelteToast extends SvelteComponent {

0 commit comments

Comments
 (0)