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

feat(file-uploader): export clearFiles method

Browse source
This commit is contained in:
Eric Liu 2019-12-25 07:17:30 -08:00
commit 0fe8975850
2 changed files with 7 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/FileUploader/FileUploader.Story.svelte
View file

@ -10,6 +10,7 @@
import FileUploaderDropContainer from './FileUploaderDropContainer.svelte'; import FileUploaderDropContainer from './FileUploaderDropContainer.svelte';
import FileUploaderSkeleton from './FileUploader.Skeleton.svelte'; import FileUploaderSkeleton from './FileUploader.Skeleton.svelte';
let fileUploader = undefined;
let files = []; let files = [];
$: disabled = files.length === 0; $: disabled = files.length === 0;
@ -37,6 +38,7 @@
{:else if story === 'uploader'} {:else if story === 'uploader'}
<div class={cx('--file__container')}> <div class={cx('--file__container')}>
<FileUploader <FileUploader
bind:this={fileUploader}
{...$$props} {...$$props}
bind:files bind:files
on:add={({ detail }) => { on:add={({ detail }) => {
@ -50,9 +52,7 @@
size="small" size="small"
style="margin-top: 1rem" style="margin-top: 1rem"
{disabled} {disabled}
on:click={() => { on:click={fileUploader.clearFiles}>
files = [];
}}>
Clear File{files.length === 1 ? '' : 's'} Clear File{files.length === 1 ? '' : 's'}
</Button> </Button>
</div> </div>

7
src/components/FileUploader/FileUploader.svelte
View file

@ -2,6 +2,7 @@
let className = undefined; let className = undefined;
export { className as class }; export { className as class };
export let files = []; export let files = [];
export const clearFiles = () => (files = []);
export let name = ''; export let name = '';
export let labelDescription = ''; export let labelDescription = '';
export let labelTitle = ''; export let labelTitle = '';
@ -13,7 +14,7 @@
export let accept = []; export let accept = [];
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';
import Filename from './Filename.svelte'; import Filename from './Filename.svelte';
import FileUploaderButton from './FileUploaderButton.svelte'; import FileUploaderButton from './FileUploaderButton.svelte';
@ -22,7 +23,7 @@
let prevFiles = []; let prevFiles = [];
$: { afterUpdate(() => {
if (files.length > prevFiles.length) { if (files.length > prevFiles.length) {
dispatch('add', files); dispatch('add', files);
} else { } else {
@ -33,7 +34,7 @@
} }
prevFiles = [...files]; prevFiles = [...files];
} });
</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}>