kopia lustrzana https://github.com/Tldraw/Tldraw
80 wiersze
1.5 KiB
TypeScript
80 wiersze
1.5 KiB
TypeScript
import { useStateDesigner } from '@state-designer/react'
|
|
import state from 'state'
|
|
import styled from 'styles'
|
|
import { useRef } from 'react'
|
|
|
|
export default function StatusBar() {
|
|
const local = useStateDesigner(state)
|
|
const { count, time } = useRenderCount()
|
|
|
|
const active = local.active.slice(1).map((s) => {
|
|
const states = s.split('.')
|
|
return states[states.length - 1]
|
|
})
|
|
const log = local.log[0]
|
|
|
|
return (
|
|
<StatusBarContainer
|
|
size={{
|
|
'@sm': 'small',
|
|
}}
|
|
>
|
|
<Section>
|
|
{active.join(' | ')} | {log}
|
|
</Section>
|
|
{/* <Section
|
|
title="Renders | Time"
|
|
>
|
|
{count} | {time.toString().padStart(3, '0')}
|
|
</Section> */}
|
|
</StatusBarContainer>
|
|
)
|
|
}
|
|
|
|
const StatusBarContainer = styled('div', {
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
zIndex: 300,
|
|
height: 40,
|
|
userSelect: 'none',
|
|
borderTop: '1px solid black',
|
|
gridArea: 'status',
|
|
display: 'grid',
|
|
gridTemplateColumns: 'auto 1fr auto',
|
|
alignItems: 'center',
|
|
backgroundColor: 'white',
|
|
gap: 8,
|
|
fontSize: '$0',
|
|
padding: '0 16px',
|
|
|
|
variants: {
|
|
size: {
|
|
small: {
|
|
fontSize: '$1',
|
|
},
|
|
},
|
|
},
|
|
})
|
|
|
|
const Section = styled('div', {
|
|
whiteSpace: 'nowrap',
|
|
overflow: 'hidden',
|
|
})
|
|
|
|
function useRenderCount() {
|
|
const rTime = useRef(Date.now())
|
|
const rCounter = useRef(0)
|
|
|
|
rCounter.current++
|
|
const now = Date.now()
|
|
let time = now - rTime.current
|
|
if (time > 100) {
|
|
time = 0
|
|
}
|
|
rTime.current = now
|
|
|
|
return { count: rCounter.current, time }
|
|
}
|