23 lines
1.2 KiB
JavaScript
23 lines
1.2 KiB
JavaScript
import React, { useEffect, useRef, useState } from 'react'
|
||
import { names } from './names.js'
|
||
|
||
// Left end of every tab bar: an editable group name (double-click). Session-only.
|
||
export default function GroupLabel({ group }) {
|
||
const id = group.id
|
||
const name = names.use(s => s.groups[id])
|
||
const [editing, setEditing] = useState(false)
|
||
const [draft, setDraft] = useState('')
|
||
const ref = useRef(null)
|
||
useEffect(() => { if (editing) { ref.current?.focus(); ref.current?.select() } }, [editing])
|
||
const start = e => { e.stopPropagation(); setDraft(name || ''); setEditing(true) }
|
||
const commit = () => { if (!editing) return; names.renameGroup(id, draft.trim()); setEditing(false) }
|
||
return (
|
||
<div className="grouplabel" title="double-click to name this group" onDoubleClick={start} onPointerDown={e => e.stopPropagation()}>
|
||
{editing
|
||
? <input ref={ref} value={draft} placeholder="group name" onChange={e => setDraft(e.target.value)} onBlur={commit}
|
||
onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') commit(); if (e.key === 'Escape') setEditing(false) }} />
|
||
: <span className={name ? 'gname' : 'hint'}>{name || '＋ name'}</span>}
|
||
</div>
|
||
)
|
||
}
|