pmret/website
1
0
Fork 0
mirror of https://github.com/pmret/website.git synced 2024-09-18 23:02:28 +02:00
Code Issues Packages Projects Releases Wiki Activity

Smoothed out tab transition and removed unused vars (#7)

Browse Source
This commit is contained in:
Spencer Vaughn 2022-11-09 18:29:07 -06:00 committed by GitHub
parent 59c129a713
commit be18b9479a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/ProgressPane.jsx
View File

@ -1,6 +1,6 @@
import React, { useState, useEffect, useMemo } from "react"
import { createPortal } from "react-dom"
import { Area, XAxis, YAxis, AreaChart, CartesianGrid, Tooltip, ResponsiveContainer, Text } from "recharts"
import { Area, XAxis, YAxis, AreaChart, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"
const csvVersions = {
"1": {
@ -47,7 +47,7 @@ async function fetchData(version) {
return rows
}
export default function ProgressPane({ captionPortal, nonce, color, version }) {
export default function ProgressPane({ captionPortal, color, version }) {
const [data, setData] = useState()
const [dataVersion, setDataVersion] = useState()
@ -62,11 +62,11 @@ export default function ProgressPane({ captionPortal, nonce, color, version }) {
const isDataValid = dataVersion === version
return <div style={{ display: "flex", flexDirection: "column", width: "100%" }}>
{<DataView data={isDataValid ? data : []} nonce={nonce} captionPortal={captionPortal} color={color}/>}
{data && <DataView data={isDataValid ? data : []} captionPortal={captionPortal} color={color}/>}
</div>
}
function DataView({ data, captionPortal, nonce, color }) {
function DataView({ data, captionPortal, color }) {
const latest = data[data.length - 1]
const oldest = data[0]
const { stroke, fill } = colors[color]
@ -148,7 +148,7 @@ function DataView({ data, captionPortal, nonce, color }) {
</button>
</div>
{data.length && selectedEntry && captionPortal.current && createPortal(<EntryInfo entry={selectedEntry} isLatest={selectedEntry.commit === latest.commit}/>, captionPortal.current)}
{(data.length && selectedEntry && captionPortal.current && createPortal(<EntryInfo entry={selectedEntry} isLatest={selectedEntry.commit === latest.commit}/>, captionPortal.current) || null)}
</>
}

16
src/main.jsx
View File

@ -116,21 +116,20 @@ function App() {
const [flip, setFlip] = useState(false)
const pane = useRef()
function switchToTab(index, pushState) {
function switchToTab(index, pushState, prevTabIndex) {
if (index === paneIndex || index === tabIndex) return
console.info("switching to tab", index)
setRotation(rotation - 180)
setTabIndex(index)
console.info("switching to tab", index, "from ", prevTabIndex)
if (pushState)
history.pushState(null, tabs[index].name, tabs[index].slug)
setTimeout(() => {
setTabIndex(index)
setPaneIndex(index)
setFlip(!flip)
}, 300) // half the animation time
}, prevTabIndex === 0 ? 175 : 300) // half the animation time
}
useEffect(() => {
@ -155,7 +154,7 @@ function App() {
onClick={evt => {
const q = window.matchMedia("(prefers-reduced-motion: reduce)")
if (!q.matches) {
switchToTab(index, true)
switchToTab(index, true, tabIndex)
evt.preventDefault()
}
}}
@ -172,13 +171,14 @@ function App() {
</nav>
<main id="main" ref={pane} className={clsx(tabs[paneIndex].color)} style={{
transform: `perspective(4000px) rotateX(${rotation}deg)`,
overflow: 'hidden'
}}>
<div style={{
display: "flex",
flex: 1,
transform: `rotateX(${flip ? '180deg' : '0deg'})`,
}}>
{tabs[paneIndex].pane({ captionPortal, nonce: rotation })}
{tabs[paneIndex].pane({ captionPortal })}
</div>
</main>
{tabIndex !== 0 && <div className="caption outline-invert" ref={captionPortal}></div>}