remove console warnings:

"2x
 "<Folder> was created with unknown prop 'type'"
 "<File> was created with unknown prop 'type'""

 Determine type based on files property
pull/4715/head
Simon Scharf 6 years ago
parent dbfc44d078
commit e963926d4d

@ -3,39 +3,35 @@
let root = [ let root = [
{ {
type: 'folder',
name: 'Important work stuff', name: 'Important work stuff',
files: [ files: [
{ type: 'file', name: 'quarterly-results.xlsx' } { name: 'quarterly-results.xlsx' }
] ]
}, },
{ {
type: 'folder',
name: 'Animal GIFs', name: 'Animal GIFs',
files: [ files: [
{ {
type: 'folder',
name: 'Dogs', name: 'Dogs',
files: [ files: [
{ type: 'file', name: 'treadmill.gif' }, { name: 'treadmill.gif' },
{ type: 'file', name: 'rope-jumping.gif' } { name: 'rope-jumping.gif' }
] ]
}, },
{ {
type: 'folder',
name: 'Goats', name: 'Goats',
files: [ files: [
{ type: 'file', name: 'parkour.gif' }, { name: 'parkour.gif' },
{ type: 'file', name: 'rampage.gif' } { name: 'rampage.gif' }
] ]
}, },
{ type: 'file', name: 'cat-roomba.gif' }, { name: 'cat-roomba.gif' },
{ type: 'file', name: 'duck-shuffle.gif' }, { name: 'duck-shuffle.gif' },
{ type: 'file', name: 'monkey-on-a-pig.gif' } { name: 'monkey-on-a-pig.gif' }
] ]
}, },
{ type: 'file', name: 'TODO.md' } { name: 'TODO.md' }
]; ];
</script> </script>
<Folder name="Home" files={root} expanded/> <Folder name="Home" files={root} expanded/>

@ -41,7 +41,7 @@
<ul> <ul>
{#each files as file} {#each files as file}
<li> <li>
{#if file.type === 'folder'} {#if file.files}
<!-- show folder --> <!-- show folder -->
{:else} {:else}
<File {...file}/> <File {...file}/>
@ -49,4 +49,4 @@
</li> </li>
{/each} {/each}
</ul> </ul>
{/if} {/if}

@ -3,39 +3,35 @@
let root = [ let root = [
{ {
type: 'folder',
name: 'Important work stuff', name: 'Important work stuff',
files: [ files: [
{ type: 'file', name: 'quarterly-results.xlsx' } { name: 'quarterly-results.xlsx' }
] ]
}, },
{ {
type: 'folder',
name: 'Animal GIFs', name: 'Animal GIFs',
files: [ files: [
{ {
type: 'folder',
name: 'Dogs', name: 'Dogs',
files: [ files: [
{ type: 'file', name: 'treadmill.gif' }, { name: 'treadmill.gif' },
{ type: 'file', name: 'rope-jumping.gif' } { name: 'rope-jumping.gif' }
] ]
}, },
{ {
type: 'folder',
name: 'Goats', name: 'Goats',
files: [ files: [
{ type: 'file', name: 'parkour.gif' }, { name: 'parkour.gif' },
{ type: 'file', name: 'rampage.gif' } { name: 'rampage.gif' }
] ]
}, },
{ type: 'file', name: 'cat-roomba.gif' }, { name: 'cat-roomba.gif' },
{ type: 'file', name: 'duck-shuffle.gif' }, { name: 'duck-shuffle.gif' },
{ type: 'file', name: 'monkey-on-a-pig.gif' } { name: 'monkey-on-a-pig.gif' }
] ]
}, },
{ type: 'file', name: 'TODO.md' } { name: 'TODO.md' }
]; ];
</script> </script>
<Folder name="Home" files={root} expanded/> <Folder name="Home" files={root} expanded/>

@ -41,7 +41,7 @@
<ul> <ul>
{#each files as file} {#each files as file}
<li> <li>
{#if file.type === 'folder'} {#if file.files}
<svelte:self {...file}/> <svelte:self {...file}/>
{:else} {:else}
<File {...file}/> <File {...file}/>
@ -49,4 +49,4 @@
</li> </li>
{/each} {/each}
</ul> </ul>
{/if} {/if}

@ -7,7 +7,7 @@ Svelte provides a variety of built-in elements. The first, `<svelte:self>`, allo
It's useful for things like this folder tree view, where folders can contain *other* folders. In `Folder.svelte` we want to be able to do this... It's useful for things like this folder tree view, where folders can contain *other* folders. In `Folder.svelte` we want to be able to do this...
```html ```html
{#if file.type === 'folder'} {#if file.files}
<Folder {...file}/> <Folder {...file}/>
{:else} {:else}
<File {...file}/> <File {...file}/>
@ -17,9 +17,9 @@ It's useful for things like this folder tree view, where folders can contain *ot
...but that's impossible, because a file can't import itself. Instead, we use `<svelte:self>`: ...but that's impossible, because a file can't import itself. Instead, we use `<svelte:self>`:
```html ```html
{#if file.type === 'folder'} {#if file.files}
<svelte:self {...file}/> <svelte:self {...file}/>
{:else} {:else}
<File {...file}/> <File {...file}/>
{/if} {/if}
``` ```

Loading…
Cancel
Save