65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
import styled from "@emotion/styled"
|
|
import type { ItemSection } from "opvault.js"
|
|
import { useCallback, useState } from "react"
|
|
import { useTranslate } from "../../i18n"
|
|
import { useItemFieldContextMenu } from "../ItemFieldContextMenu"
|
|
import { Container } from "./Container"
|
|
import { useCopy } from "./hooks"
|
|
|
|
const OTPItemContainer = styled(Container)`
|
|
margin: 5px 0;
|
|
`
|
|
|
|
const OTPItem = ({ children }: { children: string }) => {
|
|
const { onRightClick } = useItemFieldContextMenu()
|
|
const onCopy = useCopy(children)
|
|
|
|
return (
|
|
<OTPItemContainer onContextMenu={onRightClick} onClick={onCopy} style={{}}>
|
|
{children}
|
|
</OTPItemContainer>
|
|
)
|
|
}
|
|
|
|
const ItemCount = styled(Container)`
|
|
opacity: 0.5;
|
|
user-select: none;
|
|
`
|
|
|
|
export const OTP: React.FC<{
|
|
field: Pick<ItemSection.Concealed, "v">
|
|
}> = ({ field }) => {
|
|
const t = useTranslate()
|
|
const [show, setShow] = useState(false)
|
|
|
|
const { onRightClick, ContextMenuContainer, Item } = useItemFieldContextMenu()
|
|
const onToggle = useCallback(() => setShow(x => !x), [])
|
|
const fields = field.v.split(" ")
|
|
|
|
return (
|
|
<>
|
|
{show ? (
|
|
<div
|
|
onContextMenu={onRightClick}
|
|
onDoubleClick={() => setShow(x => !x)}
|
|
style={{
|
|
fontFamily: "var(--monospace)",
|
|
paddingTop: 5,
|
|
}}
|
|
>
|
|
{fields.map((item, i) => (
|
|
<OTPItem key={i}>{item}</OTPItem>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<ItemCount onContextMenu={onRightClick} onClick={onToggle}>
|
|
{fields.length} {fields.length === 1 ? t.noun.item : t.noun.items}
|
|
</ItemCount>
|
|
)}
|
|
<ContextMenuContainer>
|
|
<Item onClick={onToggle}>{show ? t.action.hide : t.action.show}</Item>
|
|
</ContextMenuContainer>
|
|
</>
|
|
)
|
|
}
|