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

chore: lift components folder

Browse source
This commit is contained in:
Eric Liu 2020-07-19 09:06:08 -07:00
commit 2200b29b92
301 changed files with 57 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,75 +0,0 @@
<script>
export let status = "uploading"; // "uploading" | "edit" | "complete"
export let accept = [];
export let files = [];
export const clearFiles = () => (files = []);
export let buttonLabel = "";
export let iconDescription = "Provide icon description";
export let kind = "primary";
export let labelDescription = "";
export let labelTitle = "";
export let multiple = false;
export let name = "";
import { createEventDispatcher, afterUpdate } from "svelte";
import Filename from "./Filename.svelte";
import FileUploaderButton from "./FileUploaderButton.svelte";
const dispatch = createEventDispatcher();
$: prevFiles = [];
afterUpdate(() => {
if (files.length > prevFiles.length) {
dispatch("add", files);
} else {
dispatch("remove", prevFiles.filter(_ => !files.includes(_)));
}
prevFiles = [...files];
});
</script>
<div
class:bx--form-item={true}
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave>
<strong class:bx--file--label={true}>{labelTitle}</strong>
<p class:bx--label-description={true}>{labelDescription}</p>
<FileUploaderButton
disableLabelChanges
labelText={buttonLabel}
{accept}
{name}
{multiple}
{kind}
on:change
on:change={({ target }) => {
files = [...target.files].map(({ name }) => name);
}} />
<div class:bx--file-container={true}>
{#each files as name, i (name)}
<span class:bx--file__selected-file={true}>
<p class:bx--file-filename={true}>{name}</p>
<span class:bx--file__state-container={true}>
<Filename
{iconDescription}
{status}
on:keydown
on:keydown={({ key }) => {
if (key === ' ' || key === 'Enter') {
files = files.filter((_, index) => index !== i);
}
}}
on:click
on:click={() => {
files = files.filter((_, index) => index !== i);
}} />
</span>
</span>
{/each}
</div>
</div>