Full demo!

This commit is contained in:
Matthew Cardarelli 2024-08-06 17:13:43 -07:00
parent e3635677d5
commit b996d3c3f4

View File

@ -3,19 +3,74 @@ import { useAnimatedListItems } from './useAnimatedListItems';
type Mutation = 'reverse' | 'randomize' | 'insert' | 'remove';
/**
* Randomizer function shamelessly copied unmodified from https://stackoverflow.com/a/12646864
*
* License: https://creativecommons.org/licenses/by-sa/4.0/
*
* Author(s):
* - https://stackoverflow.com/users/310500/laurens-holst
* - https://stackoverflow.com/users/8112776/ashleedawg
*/
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
function insertRandomlyIntoArray(array: string[]): string[] {
const insertBefore = Math.floor(Math.random() * (array.length + 1));
const newItem = `Serial Number ${crypto.randomUUID()}`;
if (insertBefore === 0) {
return [newItem, ...array];
}
return [
...array.slice(0, insertBefore),
newItem,
...array.slice(insertBefore),
];
}
function removeRandomlyFromArray(array: string[]): string[] {
const removeIndex = Math.floor(Math.random() * array.length);
if (removeIndex === 0) {
return [...array.slice(1)];
}
if (removeIndex === array.length) {
return [...array.slice(0, -1)];
}
return [...array.slice(0, removeIndex), ...array.slice(removeIndex + 1)];
}
export const AnimatedListDemo = () => {
const [items, mutateItems] = useReducer(
(prevState: string[], mutation: Mutation) => {
let newState: string[] = [...prevState];
switch (mutation) {
case 'reverse':
const newState = [...prevState];
newState.reverse();
return newState;
break;
case 'randomize':
shuffleArray(newState);
break;
case 'insert':
newState = insertRandomlyIntoArray(newState);
break;
case 'remove':
newState = removeRandomlyFromArray(newState);
break;
default:
return prevState;
}
return newState;
},
['Item 0', 'Item 1', 'Item 2', 'Item 3'],
[
`Serial Number ${crypto.randomUUID()}`,
`Serial Number ${crypto.randomUUID()}`,
`Serial Number ${crypto.randomUUID()}`,
`Serial Number ${crypto.randomUUID()}`,
],
);
const { updateItemRef, updateItemPositions, itemStyles } =
@ -23,6 +78,43 @@ export const AnimatedListDemo = () => {
return (
<main>
<button
type="button"
onClick={() => {
updateItemPositions();
mutateItems('reverse');
}}
>
Reverse
</button>
<button
type="button"
onClick={() => {
updateItemPositions();
mutateItems('randomize');
}}
>
Randomize
</button>
<button
type="button"
onClick={() => {
updateItemPositions();
mutateItems('insert');
}}
>
Insert
</button>
<button
type="button"
onClick={() => {
updateItemPositions();
mutateItems('remove');
}}
>
Remove
</button>
<ol>
{items.map((item) => {
return (
@ -36,15 +128,6 @@ export const AnimatedListDemo = () => {
);
})}
</ol>
<button
type="button"
onClick={() => {
updateItemPositions();
mutateItems('reverse');
}}
>
Reverse
</button>
</main>
);
};