diff --git a/package.json b/package.json index 75152a9..c3a567e 100644 --- a/package.json +++ b/package.json @@ -2,10 +2,10 @@ "name": "demo-react-animated-list", "version": "1.0.0", "description": "A demo of an implementation of an animated list in React Typescript.", - "main": "index.tsx", + "main": "src/index.tsx", "scripts": { - "build": "esbuild index.tsx --bundle --sourcemap --outfile=./dist/demo-react-animated-list.js", - "dev": "esbuild index.tsx --bundle --watch --serve --outdir=./public/scripts --servedir=./public", + "build": "esbuild ./src/index.tsx --bundle --sourcemap --outfile=./dist/demo-react-animated-list.js", + "dev": "esbuild ./src/index.tsx --bundle --watch --serve --outdir=./public/scripts --servedir=./public", "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { diff --git a/AnimatedListDemo.tsx b/src/AnimatedListDemo.tsx similarity index 89% rename from AnimatedListDemo.tsx rename to src/AnimatedListDemo.tsx index c9466dc..00101e8 100644 --- a/AnimatedListDemo.tsx +++ b/src/AnimatedListDemo.tsx @@ -3,6 +3,16 @@ import { useAnimatedListItems } from './useAnimatedListItems'; type Mutation = 'reverse' | 'randomize' | 'insert' | 'remove'; +function getRandomChar(): string { + return String.fromCharCode(98 + Math.floor(Math.random() * 25)); +} +function getRandomItemName(): string { + return `Serial Number - ${new Array(16) + .fill('') + .map(() => getRandomChar()) + .join('')}`; +} + /** * Randomizer function shamelessly copied unmodified from https://stackoverflow.com/a/12646864 * @@ -21,7 +31,7 @@ function shuffleArray(array) { function insertRandomlyIntoArray(array: string[]): string[] { const insertBefore = Math.floor(Math.random() * (array.length + 1)); - const newItem = `Serial Number ${crypto.randomUUID()}`; + const newItem = getRandomItemName(); if (insertBefore === 0) { return [newItem, ...array]; } @@ -65,12 +75,7 @@ export const AnimatedListDemo = () => { } return newState; }, - [ - `Serial Number ${crypto.randomUUID()}`, - `Serial Number ${crypto.randomUUID()}`, - `Serial Number ${crypto.randomUUID()}`, - `Serial Number ${crypto.randomUUID()}`, - ], + new Array(4).fill('').map(() => getRandomItemName()), ); const { updateItemRef, updateItemPositions, itemStyles } = diff --git a/index.tsx b/src/index.tsx similarity index 100% rename from index.tsx rename to src/index.tsx diff --git a/useAnimatedListItems.ts b/src/useAnimatedListItems.ts similarity index 100% rename from useAnimatedListItems.ts rename to src/useAnimatedListItems.ts diff --git a/tsconfig.json b/tsconfig.json index a601514..00f9571 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,5 +8,11 @@ "noEmit": true, "alwaysStrict": true }, - "include": ["*.ts", "*.tsx"] + "include": [ + "*.ts", + "*.tsx", + "src/index.tsx", + "src/AnimatedListDemo.tsx", + "src/useAnimatedListItems.ts" + ] }