59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { defineMessages, useIntl } from 'react-intl';
|
||
|
|
|
||
|
|
import { changeStatusLanguage } from 'soapbox/actions/statuses';
|
||
|
|
import { type Language, languages } from 'soapbox/features/preferences';
|
||
|
|
import { useAppDispatch } from 'soapbox/hooks';
|
||
|
|
|
||
|
|
import DropdownMenu from './dropdown-menu';
|
||
|
|
import { HStack, Icon, Text } from './ui';
|
||
|
|
|
||
|
|
import type { Status } from 'soapbox/types/entities';
|
||
|
|
|
||
|
|
const messages = defineMessages({
|
||
|
|
languageVersions: { id: 'status.language_versions', defaultMessage: 'The post has multiple language versions.' },
|
||
|
|
});
|
||
|
|
|
||
|
|
interface IStatusLanguagePicker {
|
||
|
|
status: Status;
|
||
|
|
showLabel?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
const StatusLanguagePicker: React.FC<IStatusLanguagePicker> = ({ status, showLabel }) => {
|
||
|
|
const intl = useIntl();
|
||
|
|
const dispatch = useAppDispatch();
|
||
|
|
|
||
|
|
if (!status.contentMapHtml || status.contentMapHtml.isEmpty()) return null;
|
||
|
|
|
||
|
|
const icon = <Icon className='h-5 w-5 text-gray-700 dark:text-gray-600' src={require('@tabler/icons/outline/language.svg')} />;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Text tag='span' theme='muted' size='sm'>·</Text>
|
||
|
|
|
||
|
|
<DropdownMenu
|
||
|
|
items={status.contentMapHtml.keySeq().toJS().map((language) => ({
|
||
|
|
text: languages[language as Language] || language,
|
||
|
|
action: () => dispatch(changeStatusLanguage(status.id, language)),
|
||
|
|
active: language === status.currentLanguage,
|
||
|
|
}))}
|
||
|
|
>
|
||
|
|
<button title={intl.formatMessage(messages.languageVersions)} className='hover:underline'>
|
||
|
|
{showLabel ? (
|
||
|
|
<HStack space={1} alignItems='center'>
|
||
|
|
{icon}
|
||
|
|
<Text tag='span' theme='muted' size='sm'>
|
||
|
|
{languages[status.currentLanguage as Language] || status.currentLanguage}
|
||
|
|
</Text>
|
||
|
|
</HStack>
|
||
|
|
) : icon}
|
||
|
|
</button>
|
||
|
|
</DropdownMenu>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export {
|
||
|
|
StatusLanguagePicker as default,
|
||
|
|
};
|