73 lines
1.6 KiB
TypeScript
73 lines
1.6 KiB
TypeScript
import { FormattedMessage } from 'react-intl';
|
|
|
|
import classNames from 'classnames';
|
|
|
|
interface Props {
|
|
hidden?: boolean;
|
|
sensitive: boolean;
|
|
uncached?: boolean;
|
|
onClick: React.MouseEventHandler<HTMLButtonElement>;
|
|
}
|
|
|
|
export const SpoilerButton: React.FC<Props> = ({
|
|
hidden = false,
|
|
sensitive,
|
|
uncached = false,
|
|
onClick,
|
|
}) => {
|
|
let warning;
|
|
let action;
|
|
|
|
if (uncached) {
|
|
warning = (
|
|
<FormattedMessage
|
|
id='status.uncached_media_warning'
|
|
defaultMessage='Preview not available'
|
|
/>
|
|
);
|
|
action = (
|
|
<FormattedMessage id='status.media.open' defaultMessage='Click to open' />
|
|
);
|
|
} else if (sensitive) {
|
|
warning = (
|
|
<FormattedMessage
|
|
id='status.sensitive_warning'
|
|
defaultMessage='Sensitive content'
|
|
/>
|
|
);
|
|
action = (
|
|
<FormattedMessage id='status.media.show' defaultMessage='Click to show' />
|
|
);
|
|
} else {
|
|
warning = (
|
|
<FormattedMessage
|
|
id='status.media_hidden'
|
|
defaultMessage='Media hidden'
|
|
/>
|
|
);
|
|
action = (
|
|
<FormattedMessage id='status.media.show' defaultMessage='Click to show' />
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={classNames('spoiler-button', {
|
|
'spoiler-button--hidden': hidden,
|
|
'spoiler-button--click-thru': uncached,
|
|
})}
|
|
>
|
|
<button
|
|
type='button'
|
|
className='spoiler-button__overlay'
|
|
onClick={onClick}
|
|
disabled={uncached}
|
|
>
|
|
<span className='spoiler-button__overlay__label'>
|
|
{warning}
|
|
<span className='spoiler-button__overlay__action'>{action}</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|