71 lines
1.5 KiB
TypeScript
71 lines
1.5 KiB
TypeScript
import type { FC, MouseEventHandler } from 'react';
|
|
|
|
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';
|
|
|
|
export interface EditButtonProps {
|
|
onClick: MouseEventHandler;
|
|
label: string;
|
|
icon?: boolean;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export const EditButton: FC<EditButtonProps> = ({
|
|
onClick,
|
|
label,
|
|
icon = false,
|
|
disabled,
|
|
}) => {
|
|
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;
|
|
label: string;
|
|
disabled?: boolean;
|
|
}> = ({ onClick, label, disabled }) => (
|
|
<IconButton
|
|
icon='delete'
|
|
iconComponent={DeleteIcon}
|
|
onClick={onClick}
|
|
className={classNames(classes.editButton, classes.deleteButton)}
|
|
title={label}
|
|
disabled={disabled}
|
|
/>
|
|
);
|