Display CW switch

This commit is contained in:
AkiraFukushima 2023-11-25 14:50:46 +09:00
parent b0603eeee4
commit fcbca21ce5
No known key found for this signature in database
GPG Key ID: B6E51BAC4DE1A957
4 changed files with 50 additions and 12 deletions

View File

@ -12,7 +12,9 @@
"vote": "Vote",
"people": "{num} people",
"closed": "Closed"
}
},
"show_more": "Show more",
"show_less": "Show less"
}
},
"accounts": {

View File

@ -41,7 +41,7 @@ export default function Compose(props: Props) {
})
}
const sensitive = document.getElementById('sensitive') as HTMLInputElement
if (sensitive.checked) {
if (sensitive && sensitive.checked) {
options = Object.assign({}, options, {
sensitive: sensitive.checked
})

View File

@ -1,19 +1,48 @@
import { Entity } from 'megalodon'
import { HTMLAttributes } from 'react'
import { Dispatch, HTMLAttributes, SetStateAction } from 'react'
import emojify from '@/utils/emojify'
import { Button } from 'flowbite-react'
import { FormattedMessage } from 'react-intl'
type Props = {
status: Entity.Status
spoilered: boolean
setSpoilered: Dispatch<SetStateAction<boolean>>
} & HTMLAttributes<HTMLElement>
export default function Body(props: Props) {
const { spoilered, setSpoilered } = props
const spoiler = () => {
if (props.status.spoiler_text.length > 0) {
return (
<div>
<div
className="spoiler-text"
style={Object.assign({ wordWrap: 'break-word' }, props.style)}
dangerouslySetInnerHTML={{ __html: emojify(props.status.spoiler_text, props.status.emojis) }}
onClick={props.onClick}
/>
<Button size="xs" color="gray" className="focus:ring-0 my-1" onClick={() => setSpoilered(current => !current)}>
{spoilered ? <FormattedMessage id="timeline.status.show_more" /> : <FormattedMessage id="timeline.status.show_less" />}
</Button>
</div>
)
} else {
return null
}
}
return (
<>
<div
className={props.className}
style={Object.assign({ wordWrap: 'break-word' }, props.style)}
dangerouslySetInnerHTML={{ __html: emojify(props.status.content, props.status.emojis) }}
/>
{spoiler()}
{!spoilered && (
<div
className={props.className}
style={Object.assign({ wordWrap: 'break-word' }, props.style)}
dangerouslySetInnerHTML={{ __html: emojify(props.status.content, props.status.emojis) }}
/>
)}
</>
)
}

View File

@ -9,6 +9,7 @@ import Poll from './Poll'
import { FormattedMessage } from 'react-intl'
import Actions from './Actions'
import { useRouter } from 'next/router'
import { useState } from 'react'
type Props = {
status: Entity.Status
@ -18,6 +19,7 @@ type Props = {
export default function Status(props: Props) {
const status = originalStatus(props.status)
const [spoilered, setSpoilered] = useState(status.spoiler_text.length > 0)
const router = useRouter()
const onRefresh = async () => {
@ -49,10 +51,15 @@ export default function Status(props: Props) {
<time dateTime={status.created_at}>{dayjs(status.created_at).format('YYYY-MM-DD HH:mm:ss')}</time>
</div>
</div>
<Body status={status} />
{status.poll && <Poll poll={status.poll} onRefresh={onRefresh} client={props.client} />}
{status.card && <Card card={status.card} />}
<Media media={status.media_attachments} />
<Body status={status} spoilered={spoilered} setSpoilered={setSpoilered} />
{!spoilered && (
<>
{status.poll && <Poll poll={status.poll} onRefresh={onRefresh} client={props.client} />}
{status.card && <Card card={status.card} />}
<Media media={status.media_attachments} />
</>
)}
<Actions status={status} client={props.client} onRefresh={onRefresh} />
</div>
</div>