37 lines
960 B
TypeScript
37 lines
960 B
TypeScript
|
import React from 'react';
|
||
|
|
import { useIntl, defineMessages } from 'react-intl';
|
||
|
|
|
||
|
|
import { TagInput } from 'soapbox/components/ui';
|
||
|
|
import { badgeToTag, tagToBadge } from 'soapbox/utils/badges';
|
||
|
|
|
||
|
|
const messages = defineMessages({
|
||
|
|
placeholder: { id: 'badge_input.placeholder', defaultMessage: 'Enter a badge…' },
|
||
|
|
});
|
||
|
|
|
||
|
|
interface IBadgeInput {
|
||
|
|
/** A badge is a tag that begins with `badge:` */
|
||
|
|
badges: string[],
|
||
|
|
/** Callback when badges change. */
|
||
|
|
onChange: (badges: string[]) => void,
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Manages user badges. */
|
||
|
|
const BadgeInput: React.FC<IBadgeInput> = ({ badges, onChange }) => {
|
||
|
|
const intl = useIntl();
|
||
|
|
const tags = badges.map(badgeToTag);
|
||
|
|
|
||
|
|
const handleTagsChange = (tags: string[]) => {
|
||
|
|
const badges = tags.map(tagToBadge);
|
||
|
|
onChange(badges);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<TagInput
|
||
|
|
tags={tags}
|
||
|
|
onChange={handleTagsChange}
|
||
|
|
placeholder={intl.formatMessage(messages.placeholder)}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default BadgeInput;
|