mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactor(toggle): remove dispatch, inputRef, afterUpdate

Browse source
This commit is contained in:
Eric Liu 2019-12-29 19:25:54 -08:00
commit 4b1ed0adce
5 changed files with 19 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/Toggle/Toggle.Skeleton.svelte
View file

@ -11,7 +11,7 @@
<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
<input type="checkbox" class={cx('--toggle --skeleton')} {id} />
<label
aria-label={labelText ? null : $$props['aria-label'] || 'Toggle is loading'}
aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle is loading'}
class={cx('--toggle__label', '--skeleton')}
for={id}>
{#if labelText}

8
src/components/Toggle/Toggle.Story.svelte
View file

@ -4,11 +4,17 @@
import Layout from '../../internal/ui/Layout.svelte';
import Toggle from './Toggle.svelte';
import ToggleSkeleton from './Toggle.Skeleton.svelte';
let toggled = true;
$: {
console.log('toggled', toggled);
}
</script>
<Layout>
{#if story === 'toggled'}
<Toggle {...$$props} id="toggle-1" toggled />
<Toggle {...$$props} id="toggle-1" bind:toggled />
{:else if story === 'skeleton'}
<ToggleSkeleton />
{:else}

13
src/components/Toggle/Toggle.svelte
View file

@ -9,22 +9,11 @@
export let labelB = 'On';
export let style = undefined;
import { createEventDispatcher, afterUpdate } from 'svelte';
import { cx } from '../../lib';
const dispatch = createEventDispatcher();
let inputRef = undefined;
afterUpdate(() => {
inputRef.checked = toggled;
dispatch('toggle', { id, toggled });
});
</script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
<input
bind:this={inputRef}
type="checkbox"
class={cx('--toggle-input')}
checked={toggled}
@ -39,6 +28,8 @@
toggled = !toggled;
}
}}
on:focus
on:blur
{disabled}
{id} />
<label

8
src/components/ToggleSmall/ToggleSmall.Story.svelte
View file

@ -4,11 +4,17 @@
import Layout from '../../internal/ui/Layout.svelte';
import ToggleSmall from './ToggleSmall.svelte';
import ToggleSmallSkeleton from './ToggleSmall.Skeleton.svelte';
let toggled = true;
$: {
console.log('toggled', toggled);
}
</script>
<Layout>
{#if story === 'toggled'}
<ToggleSmall {...$$props} id="toggle-1" toggled />
<ToggleSmall {...$$props} id="toggle-1" bind:toggled />
{:else if story === 'skeleton'}
<ToggleSmallSkeleton />
{:else}

14
src/components/ToggleSmall/ToggleSmall.svelte
View file

@ -9,22 +9,11 @@
export let labelB = 'On';
export let style = undefined;
import { createEventDispatcher, afterUpdate } from 'svelte';
import { cx } from '../../lib';
const dispatch = createEventDispatcher();
let inputRef = undefined;
afterUpdate(() => {
inputRef.checked = toggled;
dispatch('toggle', { id, toggled });
});
</script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
<input
bind:this={inputRef}
type="checkbox"
class={cx('--toggle-input', '--toggle-input--small')}
checked={toggled}
@ -39,9 +28,10 @@
toggled = !toggled;
}
}}
on:focus
on:blur
{disabled}
{id} />
<label
aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle'}
class={cx('--toggle-input__label')}