You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
1005 B
54 lines
1005 B
4 years ago
|
import React from 'react'
|
||
|
|
||
|
interface Caret {
|
||
|
color: string
|
||
|
isForward: boolean
|
||
|
name: string
|
||
|
}
|
||
|
|
||
|
const Caret: React.FC<Caret> = ({ color, isForward, name }) => {
|
||
|
const cursorStyles = {
|
||
|
...cursorStyleBase,
|
||
|
background: color,
|
||
|
left: isForward ? '100%' : '0%'
|
||
|
}
|
||
|
const caretStyles = {
|
||
|
...caretStyleBase,
|
||
|
background: color,
|
||
|
left: isForward ? '100%' : '0%'
|
||
|
}
|
||
|
|
||
|
return (
|
||
|
<>
|
||
|
<span contentEditable={false} style={cursorStyles}>
|
||
|
{name}
|
||
|
</span>
|
||
|
<span contentEditable={false} style={caretStyles} />
|
||
|
</>
|
||
|
)
|
||
|
}
|
||
|
|
||
|
export default Caret
|
||
5 years ago
|
|
||
|
const cursorStyleBase = {
|
||
|
position: 'absolute',
|
||
|
top: -2,
|
||
|
pointerEvents: 'none',
|
||
|
userSelect: 'none',
|
||
|
transform: 'translateY(-100%)',
|
||
|
fontSize: 10,
|
||
|
color: 'white',
|
||
|
background: 'palevioletred',
|
||
|
whiteSpace: 'nowrap'
|
||
|
} as any
|
||
|
|
||
|
const caretStyleBase = {
|
||
|
position: 'absolute',
|
||
|
top: 0,
|
||
|
pointerEvents: 'none',
|
||
|
userSelect: 'none',
|
||
4 years ago
|
height: '1.2em',
|
||
5 years ago
|
width: 2,
|
||
|
background: 'palevioletred'
|
||
|
} as any
|