LukeParke/unicorn-utterances
1
0
Fork 0
mirror of https://github.com/LukeHagar/unicorn-utterances.git synced 2025-12-07 21:07:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: add react file table container component

Browse Source
This commit is contained in:
Corbin Crutchley
2024-01-07 15:39:39 -08:00
parent cd0edc74eb
commit ae0fd7a5a8
10 changed files with 2307 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
content/blog/ffg-fundamentals-passing-children/ffg-fundamentals-angular-broken-file-table-58/src/main.ts
View File

@@ -155,7 +155,7 @@ class FileTableBody {
standalone: true, standalone: true,
imports: [NgFor, NgIf, FileTableBody], imports: [NgFor, NgIf, FileTableBody],
template: ` template: `
<table style="border-collapse: collapse;"> <table style="border-spacing: 0;">
<file-table-body /> <file-table-body />
</table> </table>
`, `,

2
content/blog/ffg-fundamentals-passing-children/ffg-fundamentals-angular-file-table-58/src/main.ts
View File

@@ -153,7 +153,7 @@ class FileTableBody {
<button (click)="toggleOnlyShow()" style="margin-bottom: 1rem"> <button (click)="toggleOnlyShow()" style="margin-bottom: 1rem">
Only show files Only show files
</button> </button>
<table style="border-collapse: collapse;"> <table style="border-spacing: 0;">
<tbody file-table-body [onlyShowFiles]="onlyShowFiles"></tbody> <tbody file-table-body [onlyShowFiles]="onlyShowFiles"></tbody>
</table> </table>
</div> </div>

2
content/blog/ffg-fundamentals-passing-children/ffg-fundamentals-react-file-table-58/src/main.jsx
View File

@@ -122,7 +122,7 @@ const FileTable = () => {
<button onClick={toggleOnlyShow} style={{ marginBottom: "1rem" }}> <button onClick={toggleOnlyShow} style={{ marginBottom: "1rem" }}>
Only show files Only show files
</button> </button>
<table style={{ borderCollapse: "collapse" }}> <table style={{ borderSpacing: 0 }}>
<FileTableBody onlyShowFiles={onlyShowFiles} /> <FileTableBody onlyShowFiles={onlyShowFiles} />
</table> </table>
</div> </div>

24
content/blog/ffg-fundamentals-passing-children/ffg-fundamentals-react-file-table-container-59/.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

9
content/blog/ffg-fundamentals-passing-children/ffg-fundamentals-react-file-table-container-59/index.html Normal file
View File

@@ -0,0 +1,9 @@
<html>
<head>
<title>React File Table Container - Example #59 - FFG Fundamentals</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

2056
content/blog/ffg-fundamentals-passing-children/ffg-fundamentals-react-file-table-container-59/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

19
content/blog/ffg-fundamentals-passing-children/ffg-fundamentals-react-file-table-container-59/package.json Normal file
View File

@@ -0,0 +1,19 @@
{
"name": "@ffg-fundamentals/react-file-table-container-59",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.0.4",
"vite": "^4.4.9"
}
}

189
content/blog/ffg-fundamentals-passing-children/ffg-fundamentals-react-file-table-container-59/src/main.jsx Normal file
View File

@@ -0,0 +1,189 @@
import { createRoot } from "react-dom/client";
import { useState, useEffect, useMemo, Fragment } from "react";
const FileDate = ({ inputDate }) => {
const dateStr = useMemo(() => formatDate(inputDate), [inputDate]);
const labelText = useMemo(() => formatReadableDate(inputDate), [inputDate]);
return <span aria-label={labelText}>{dateStr}</span>;
};
const File = ({ href, fileName, isSelected, onSelected, isFolder }) => {
const [inputDate, setInputDate] = useState(new Date());
useEffect(() => {
// Check if it's a new day every 10 minutes
const timeout = setTimeout(
() => {
const newDate = new Date();
if (inputDate.getDate() === newDate.getDate()) return;
setInputDate(newDate);
},
10 * 60 * 1000,
);
return () => clearTimeout(timeout);
}, [inputDate]);
return (
<tr
onClick={onSelected}
aria-selected={isSelected}
style={
isSelected
? { backgroundColor: "blue", color: "white" }
: { backgroundColor: "white", color: "blue" }
}
>
<td>
<a href={href} style={{ color: "inherit" }}>
{fileName}
</a>
</td>
<td>{isFolder ? "Type: Folder" : "Type: File"}</td>
<td>{!isFolder && <FileDate inputDate={inputDate} />}</td>
</tr>
);
};
const filesArray = [
{
fileName: "File one",
href: "/file/file_one",
isFolder: false,
id: 1,
},
{
fileName: "File two",
href: "/file/file_two",
isFolder: false,
id: 2,
},
{
fileName: "File three",
href: "/file/file_three",
isFolder: false,
id: 3,
},
{
fileName: "Folder one",
href: "/file/folder_one/",
isFolder: true,
id: 4,
},
{
fileName: "Folder two",
href: "/file/folder_two/",
isFolder: true,
id: 5,
},
];
// This was previously called "FileList"
const FileTableBody = ({ onlyShowFiles }) => {
const [selectedIndex, setSelectedIndex] = useState(-1);
const onSelected = (idx) => {
if (selectedIndex === idx) {
setSelectedIndex(-1);
return;
}
setSelectedIndex(idx);
};
return (
<tbody>
{filesArray.map((file, i) => {
return (
<Fragment key={file.id}>
{(!onlyShowFiles || !file.isFolder) && (
<File
fileName={file.fileName}
href={file.href}
isFolder={file.isFolder}
isSelected={selectedIndex === i}
onSelected={() => onSelected(i)}
/>
)}
</Fragment>
);
})}
</tbody>
);
};
const FileTableContainer = ({ children }) => {
return (
<table
style={{
color: "#3366FF",
border: "2px solid #3366FF",
padding: "0.5rem",
borderSpacing: 0,
}}
>
{children}
</table>
);
};
const FileTable = () => {
const [onlyShowFiles, setOnlyShowFiles] = useState(false);
const toggleOnlyShow = () => setOnlyShowFiles(!onlyShowFiles);
return (
<div>
<button onClick={toggleOnlyShow} style={{ marginBottom: "1rem" }}>
Only show files
</button>
<FileTableContainer>
<FileTableBody onlyShowFiles={onlyShowFiles} />
</FileTableContainer>
</div>
);
};
createRoot(document.getElementById("root")).render(<FileTable />);
function formatDate(inputDate) {
// Month starts at 0, annoyingly
const month = inputDate.getMonth() + 1;
const date = inputDate.getDate();
const year = inputDate.getFullYear();
return month + "/" + date + "/" + year;
}
function formatReadableDate(inputDate) {
const months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
const monthStr = months[inputDate.getMonth()];
const dateSuffixStr = dateSuffix(inputDate.getDate());
const yearNum = inputDate.getFullYear();
return monthStr + " " + dateSuffixStr + "," + yearNum;
}
function dateSuffix(dayNumber) {
const lastDigit = dayNumber % 10;
if (lastDigit == 1 && dayNumber != 11) {
return dayNumber + "st";
}
if (lastDigit == 2 && dayNumber != 12) {
return dayNumber + "nd";
}
if (lastDigit == 3 && dayNumber != 13) {
return dayNumber + "rd";
}
return dayNumber + "th";
}

6
content/blog/ffg-fundamentals-passing-children/ffg-fundamentals-react-file-table-container-59/vite.config.js Normal file
View File

@@ -0,0 +1,6 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
});

2
content/blog/ffg-fundamentals-passing-children/ffg-fundamentals-vue-file-table-58/src/FileTable.vue
View File

@@ -12,7 +12,7 @@ function toggleOnlyShow() {
<template> <template>
<div> <div>
<button @click="toggleOnlyShow()" style="margin-bottom: 1rem">Only show files</button> <button @click="toggleOnlyShow()" style="margin-bottom: 1rem">Only show files</button>
<table style="border-collapse: collapse;"> <table style="border-spacing: 0;">
<FileTableBody :onlyShowFiles="onlyShowFiles"/> <FileTableBody :onlyShowFiles="onlyShowFiles"/>
</table> </table>
</div> </div>