-
Notifications
You must be signed in to change notification settings - Fork 125
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add
MapEntries
control flow component. (#728)
- Loading branch information
Showing
12 changed files
with
748 additions
and
213 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
"@solid-primitives/keyed": minor | ||
--- | ||
|
||
Add `MapEntries` control flow component. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,95 @@ | ||
// changes to this file might be applicable to similar files - grep 95DB7339-BB2A-4F06-A34A-25DDF8BF7AF7 | ||
|
||
import { createStore, produce } from "solid-js/store"; | ||
import { createEffect } from "solid-js"; | ||
import { Entries } from "../src/index.js"; | ||
import { TransitionGroup } from "solid-transition-group"; | ||
|
||
const foods = [ | ||
"oatmeal", | ||
"plantains", | ||
"cranberries", | ||
"chickpeas", | ||
"tofu", | ||
"Parmesan cheese", | ||
"amaretto", | ||
"sunflower seeds", | ||
"grapes", | ||
"vegemite", | ||
"pasta", | ||
"cider", | ||
"chicken", | ||
"pinto beans", | ||
"bok choy", | ||
"sweet peppers", | ||
"Cappuccino Latte", | ||
"corn", | ||
"broccoli", | ||
"brussels sprouts", | ||
"bread", | ||
"milk", | ||
"honey", | ||
"chips", | ||
"cookie", | ||
]; | ||
const randomIndex = (list: readonly any[]): number => Math.floor(Math.random() * list.length); | ||
const getRandomFood = () => foods[randomIndex(foods)]!; | ||
const randomKey = (record: Record<string, string>): string => { | ||
const keys = Object.keys(record); | ||
return keys[randomIndex(keys)]!; | ||
}; | ||
|
||
export default function App() { | ||
const [store, setStore] = createStore<Record<string, string>>({ | ||
[Math.random()]: "bread", | ||
[Math.random()]: "milk", | ||
[Math.random()]: "honey", | ||
[Math.random()]: "chips", | ||
[Math.random()]: "cookie", | ||
}); | ||
|
||
const addRandom = () => { | ||
setStore(Math.random().toString(), getRandomFood()); | ||
}; | ||
const removeRandom = () => setStore(p => ({ [randomKey(p)]: undefined })); | ||
const clone = () => setStore("entries", p => JSON.parse(JSON.stringify(p))); | ||
const changeRandomValue = () => setStore(p => ({ [randomKey(p)]: getRandomFood() })); | ||
|
||
return ( | ||
<> | ||
<div class="wrapper-h"> | ||
<button class="btn" onclick={addRandom}> | ||
Add | ||
</button> | ||
<button class="btn" onclick={removeRandom}> | ||
Remove | ||
</button> | ||
<button class="btn" onclick={changeRandomValue}> | ||
Change value | ||
</button> | ||
<button class="btn" onclick={clone}> | ||
Clone | ||
</button> | ||
</div> | ||
<div class="wrapper-h flex-wrap"> | ||
<TransitionGroup name="fade"> | ||
<Entries of={store} fallback={<p class="bg-yellow-500 p-1 transition-all">No items.</p>}> | ||
{(key, value, index) => { | ||
createEffect(() => { | ||
console.log("Effect:", key, value()); | ||
}); | ||
return ( | ||
<div class="node relative transition-all duration-500"> | ||
{index()}. {value()} | ||
<div class="bg-dark-500 text-light-900 absolute -bottom-2 left-2 px-1 text-[9px]"> | ||
ID: {key} | ||
</div> | ||
</div> | ||
); | ||
}} | ||
</Entries> | ||
</TransitionGroup> | ||
</div> | ||
</> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,110 @@ | ||
// changes to this file might be applicable to similar files - grep 95DB7339-BB2A-4F06-A34A-25DDF8BF7AF7 | ||
|
||
import { createEffect, createSignal } from "solid-js"; | ||
import { MapEntries } from "../src/index.js"; | ||
import { TransitionGroup } from "solid-transition-group"; | ||
|
||
const foods = [ | ||
"oatmeal", | ||
"plantains", | ||
"cranberries", | ||
"chickpeas", | ||
"tofu", | ||
"Parmesan cheese", | ||
"amaretto", | ||
"sunflower seeds", | ||
"grapes", | ||
"vegemite", | ||
"pasta", | ||
"cider", | ||
"chicken", | ||
"pinto beans", | ||
"bok choy", | ||
"sweet peppers", | ||
"Cappuccino Latte", | ||
"corn", | ||
"broccoli", | ||
"brussels sprouts", | ||
"bread", | ||
"milk", | ||
"honey", | ||
"chips", | ||
"cookie", | ||
]; | ||
const randomIndex = (list: readonly any[]): number => Math.floor(Math.random() * list.length); | ||
const getRandomFood = () => foods[randomIndex(foods)]!; | ||
const randomKey = (map: Map<string, string>): string => { | ||
const keys = Array.from(map.keys()); | ||
return keys[randomIndex(keys)]!; | ||
}; | ||
|
||
export default function App() { | ||
const [map, setMap] = createSignal( | ||
new Map([ | ||
[Math.random().toString(), "bread"], | ||
[Math.random().toString(), "milk"], | ||
[Math.random().toString(), "honey"], | ||
[Math.random().toString(), "chips"], | ||
[Math.random().toString(), "cookie"], | ||
]), | ||
); | ||
|
||
const addRandom = () => { | ||
setMap(p => { | ||
p.set(Math.random().toString(), getRandomFood()); | ||
return new Map(p); | ||
}); | ||
}; | ||
const removeRandom = () => | ||
setMap(p => { | ||
p.delete(randomKey(p)); | ||
return new Map(p); | ||
}); | ||
const clone = () => setMap(p => new Map(p)); | ||
const changeRandomValue = () => | ||
setMap(p => { | ||
p.set(randomKey(p), getRandomFood()); | ||
return new Map(p); | ||
}); | ||
|
||
return ( | ||
<> | ||
<div class="wrapper-h"> | ||
<button class="btn" onclick={addRandom}> | ||
Add | ||
</button> | ||
<button class="btn" onclick={removeRandom}> | ||
Remove | ||
</button> | ||
<button class="btn" onclick={changeRandomValue}> | ||
Change value | ||
</button> | ||
<button class="btn" onclick={clone}> | ||
Clone | ||
</button> | ||
</div> | ||
<div class="wrapper-h flex-wrap"> | ||
<TransitionGroup name="fade"> | ||
<MapEntries | ||
of={map()} | ||
fallback={<p class="bg-yellow-500 p-1 transition-all">No items.</p>} | ||
> | ||
{(key, value, index) => { | ||
createEffect(() => { | ||
console.log("Effect:", key, value()); | ||
}); | ||
return ( | ||
<div class="node relative transition-all duration-500"> | ||
{index()}. {value()} | ||
<div class="bg-dark-500 text-light-900 absolute -bottom-2 left-2 px-1 text-[9px]"> | ||
ID: {key} | ||
</div> | ||
</div> | ||
); | ||
}} | ||
</MapEntries> | ||
</TransitionGroup> | ||
</div> | ||
</> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -15,7 +15,8 @@ | |
"list": [ | ||
"keyArray", | ||
"Key", | ||
"Entries" | ||
"Entries", | ||
"MapEntries" | ||
], | ||
"category": "Control Flow" | ||
}, | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.