101 lines
2.3 KiB
TypeScript
101 lines
2.3 KiB
TypeScript
import type { FC, MouseEventHandler } from 'react';
|
|
|
|
import type { MessageDescriptor } from 'react-intl';
|
|
import { defineMessages, useIntl } from 'react-intl';
|
|
|
|
import classNames from 'classnames';
|
|
|
|
import { Button } from '@/mastodon/components/button';
|
|
import { IconButton } from '@/mastodon/components/icon_button';
|
|
import DeleteIcon from '@/material-icons/400-24px/delete.svg?react';
|
|
import EditIcon from '@/material-icons/400-24px/edit.svg?react';
|
|
|
|
import classes from '../styles.module.scss';
|
|
|
|
const messages = defineMessages({
|
|
add: {
|
|
id: 'account_edit.button.add',
|
|
defaultMessage: 'Add {item}',
|
|
},
|
|
edit: {
|
|
id: 'account_edit.button.edit',
|
|
defaultMessage: 'Edit {item}',
|
|
},
|
|
delete: {
|
|
id: 'account_edit.button.delete',
|
|
defaultMessage: 'Delete {item}',
|
|
},
|
|
});
|
|
|
|
export interface EditButtonProps {
|
|
onClick: MouseEventHandler;
|
|
item: string | MessageDescriptor;
|
|
edit?: boolean;
|
|
icon?: boolean;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export const EditButton: FC<EditButtonProps> = ({
|
|
onClick,
|
|
item,
|
|
edit = false,
|
|
icon = edit,
|
|
disabled,
|
|
}) => {
|
|
const intl = useIntl();
|
|
|
|
const itemText = typeof item === 'string' ? item : intl.formatMessage(item);
|
|
const label = intl.formatMessage(messages[edit ? 'edit' : 'add'], {
|
|
item: itemText,
|
|
});
|
|
|
|
if (icon) {
|
|
return (
|
|
<EditIconButton title={label} onClick={onClick} disabled={disabled} />
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Button
|
|
className={classes.editButton}
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
>
|
|
{label}
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
export const EditIconButton: FC<{
|
|
onClick: MouseEventHandler;
|
|
title: string;
|
|
disabled?: boolean;
|
|
}> = ({ title, onClick, disabled }) => (
|
|
<IconButton
|
|
icon='pencil'
|
|
iconComponent={EditIcon}
|
|
onClick={onClick}
|
|
className={classes.editButton}
|
|
title={title}
|
|
disabled={disabled}
|
|
/>
|
|
);
|
|
|
|
export const DeleteIconButton: FC<{
|
|
onClick: MouseEventHandler;
|
|
item: string;
|
|
disabled?: boolean;
|
|
}> = ({ onClick, item, disabled }) => {
|
|
const intl = useIntl();
|
|
return (
|
|
<IconButton
|
|
icon='delete'
|
|
iconComponent={DeleteIcon}
|
|
onClick={onClick}
|
|
className={classNames(classes.editButton, classes.deleteButton)}
|
|
title={intl.formatMessage(messages.delete, { item })}
|
|
disabled={disabled}
|
|
/>
|
|
);
|
|
};
|