Display CW switch
This commit is contained in:
parent
b0603eeee4
commit
fcbca21ce5
|
@ -12,7 +12,9 @@
|
|||
"vote": "Vote",
|
||||
"people": "{num} people",
|
||||
"closed": "Closed"
|
||||
}
|
||||
},
|
||||
"show_more": "Show more",
|
||||
"show_less": "Show less"
|
||||
}
|
||||
},
|
||||
"accounts": {
|
||||
|
|
|
@ -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
|
||||
})
|
||||
|
|
|
@ -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 (
|
||||
<>
|
||||
{spoiler()}
|
||||
{!spoilered && (
|
||||
<div
|
||||
className={props.className}
|
||||
style={Object.assign({ wordWrap: 'break-word' }, props.style)}
|
||||
dangerouslySetInnerHTML={{ __html: emojify(props.status.content, props.status.emojis) }}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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} />
|
||||
<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>
|
||||
|
|
Loading…
Reference in New Issue