136 lines
4.4 KiB
TypeScript
136 lines
4.4 KiB
TypeScript
import { Dropdown, TextInput, Textarea } from 'flowbite-react'
|
|
import { Dispatch, HTMLAttributes, SetStateAction, useEffect, useState } from 'react'
|
|
import { FormattedMessage, useIntl } from 'react-intl'
|
|
import { FaEnvelope, FaGlobe, FaListCheck, FaLock, FaLockOpen, FaPaperPlane, FaPaperclip } from 'react-icons/fa6'
|
|
import { MegalodonInterface } from 'megalodon'
|
|
|
|
type Props = {
|
|
client: MegalodonInterface
|
|
setComposeHeight: Dispatch<SetStateAction<number>>
|
|
} & HTMLAttributes<HTMLElement>
|
|
|
|
export default function Compose(props: Props) {
|
|
const [body, setBody] = useState('')
|
|
const [visibility, setVisibility] = useState<'public' | 'unlisted' | 'private' | 'direct'>('public')
|
|
const [cw, setCW] = useState(false)
|
|
const [spoiler, setSpoiler] = useState('')
|
|
const { formatMessage } = useIntl()
|
|
|
|
useEffect(() => {
|
|
if (cw) {
|
|
props.setComposeHeight(162)
|
|
} else {
|
|
props.setComposeHeight(120)
|
|
setSpoiler('')
|
|
}
|
|
}, [cw])
|
|
|
|
const post = async () => {
|
|
if (body.length === 0) return
|
|
let options = { visibility: visibility }
|
|
if (cw) {
|
|
options = Object.assign({}, options, {
|
|
spoiler_text: spoiler
|
|
})
|
|
}
|
|
await props.client.postStatus(body, options)
|
|
reset()
|
|
}
|
|
|
|
const reset = () => {
|
|
setBody('')
|
|
setSpoiler('')
|
|
setCW(false)
|
|
}
|
|
|
|
return (
|
|
<div style={props.style} className="pb-4">
|
|
<div className="mx-4 mb-4">
|
|
<form id="form">
|
|
{cw && (
|
|
<TextInput
|
|
id="spoiler"
|
|
type="text"
|
|
sizing="sm"
|
|
className="mb-2"
|
|
value={spoiler}
|
|
onChange={ev => setSpoiler(ev.target.value)}
|
|
placeholder={formatMessage({ id: 'compose.spoiler.placeholder' })}
|
|
/>
|
|
)}
|
|
<Textarea
|
|
id="body"
|
|
className="resize-none focus:ring-0"
|
|
placeholder={formatMessage({ id: 'compose.placeholder' })}
|
|
rows={3}
|
|
value={body}
|
|
onChange={ev => setBody(ev.target.value)}
|
|
/>
|
|
</form>
|
|
<div className="w-full flex justify-between mt-1 items-center">
|
|
<div className="ml-1 flex gap-3">
|
|
<FaPaperclip className="text-gray-400 hover:text-gray-600 cursor-pointer" />
|
|
<FaListCheck className="text-gray-400 hover:text-gray-600 cursor-pointer" />
|
|
<Dropdown label="" dismissOnClick={true} placement="top" renderTrigger={() => visibilityIcon(visibility)}>
|
|
<Dropdown.Item onClick={() => setVisibility('public')}>
|
|
<FormattedMessage id="compose.visibility.public" />
|
|
</Dropdown.Item>
|
|
<Dropdown.Item onClick={() => setVisibility('unlisted')}>
|
|
<FormattedMessage id="compose.visibility.unlisted" />
|
|
</Dropdown.Item>
|
|
<Dropdown.Item onClick={() => setVisibility('private')}>
|
|
<FormattedMessage id="compose.visibility.private" />
|
|
</Dropdown.Item>
|
|
<Dropdown.Item onClick={() => setVisibility('direct')}>
|
|
<FormattedMessage id="compose.visibility.direct" />
|
|
</Dropdown.Item>
|
|
</Dropdown>
|
|
|
|
{cw ? (
|
|
<span className="text-blue-400 hover:text-blue-600 leading-4 cursor-pointer" onClick={() => setCW(false)}>
|
|
CW
|
|
</span>
|
|
) : (
|
|
<span className="text-gray-400 hover:text-gray-600 leading-4 cursor-pointer" onClick={() => setCW(true)}>
|
|
CW
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="mr-1">
|
|
<FaPaperPlane className="text-gray-400 hover:text-gray-600 cursor-pointer" onClick={post} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const visibilityIcon = (visibility: 'public' | 'unlisted' | 'private' | 'direct') => {
|
|
switch (visibility) {
|
|
case 'public':
|
|
return (
|
|
<span>
|
|
<FaGlobe className="text-gray-400 hover:text-gray-600 cursor-pointer" />
|
|
</span>
|
|
)
|
|
case 'unlisted':
|
|
return (
|
|
<span>
|
|
<FaLockOpen className="text-gray-400 hover:text-gray-600 cursor-pointer" />
|
|
</span>
|
|
)
|
|
case 'private':
|
|
return (
|
|
<span>
|
|
<FaLock className="text-gray-400 hover:text-gray-600 cursor-pointer" />
|
|
</span>
|
|
)
|
|
case 'direct':
|
|
return (
|
|
<span>
|
|
<FaEnvelope className="text-gray-400 hover:text-gray-600 cursor-pointer" />
|
|
</span>
|
|
)
|
|
}
|
|
}
|