mirror of https://github.com/msgbyte/tailchat
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import { Icon } from '@iconify/react';
|
|
import { Button, ButtonProps, Tooltip } from 'antd';
|
|
import React from 'react';
|
|
import { isValidStr } from 'tailchat-shared';
|
|
|
|
const btnClassName =
|
|
'border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60';
|
|
|
|
type IconBtnShapeType = 'circle' | 'square';
|
|
|
|
function calcShape(
|
|
inputShape: IconBtnShapeType = 'circle'
|
|
): ButtonProps['shape'] {
|
|
if (inputShape === 'circle') {
|
|
return 'circle';
|
|
}
|
|
|
|
return 'default';
|
|
}
|
|
|
|
interface IconBtnProps extends Omit<ButtonProps, 'shape'> {
|
|
icon: string;
|
|
iconClassName?: string;
|
|
shape?: IconBtnShapeType;
|
|
title?: string;
|
|
}
|
|
export const IconBtn: React.FC<IconBtnProps> = React.memo(
|
|
({ icon, iconClassName, title, ...props }) => {
|
|
const shape = calcShape(props.shape);
|
|
|
|
const iconEl = (
|
|
<span className="anticon">
|
|
<Icon className={iconClassName} icon={icon} />
|
|
</span>
|
|
);
|
|
|
|
const btnEl = (
|
|
<Button className={btnClassName} {...props} shape={shape} icon={iconEl} />
|
|
);
|
|
|
|
if (isValidStr(title)) {
|
|
return <Tooltip title={title}>{btnEl}</Tooltip>;
|
|
} else {
|
|
return btnEl;
|
|
}
|
|
}
|
|
);
|
|
IconBtn.displayName = 'IconBtn';
|