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

refactor(toggle): access ref in afterUpdate method

Browse source
This commit is contained in:
Eric Liu 2019-12-25 07:16:43 -08:00
commit 8ea50a807a
2 changed files with 8 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,20 +9,17 @@
export let labelB = 'On'; export let labelB = 'On';
export let style = undefined; export let style = undefined;
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher, afterUpdate } from 'svelte';
import { cx } from '../../lib'; import { cx } from '../../lib';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
let inputRef = undefined; let inputRef = undefined;
$: { afterUpdate(() => {
dispatch('toggle', { id, toggled });
if (inputRef) {
inputRef.checked = toggled; inputRef.checked = toggled;
} dispatch('toggle', { id, toggled });
} });
</script> </script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}> <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>

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

@ -9,20 +9,17 @@
export let labelB = 'On'; export let labelB = 'On';
export let style = undefined; export let style = undefined;
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher, afterUpdate } from 'svelte';
import { cx } from '../../lib'; import { cx } from '../../lib';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
let inputRef = undefined; let inputRef = undefined;
$: { afterUpdate(() => {
dispatch('toggle', { id, toggled });
if (inputRef) {
inputRef.checked = toggled; inputRef.checked = toggled;
} dispatch('toggle', { id, toggled });
} });
</script> </script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}> <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>