hamid zarghami
94 lines
4.8 KiB
TypeScript
94 lines
4.8 KiB
TypeScript
import { FC } from 'react'
|
|
import { ButtonType, ButtonSize, HorizontalAlignment, VerticalAlignment } from '../types/Types'
|
|
|
|
interface ButtonRendererProps {
|
|
buttons: ButtonType[]
|
|
}
|
|
|
|
const ButtonRenderer: FC<ButtonRendererProps> = ({ buttons }) => {
|
|
if (!buttons || buttons.length === 0) return null
|
|
|
|
// تبدیل enum به string برای HTML attributes
|
|
const getHorizontalAlign = (alignment?: HorizontalAlignment) => {
|
|
switch (alignment) {
|
|
case HorizontalAlignment.LEFT:
|
|
return 'left'
|
|
case HorizontalAlignment.RIGHT:
|
|
return 'right'
|
|
case HorizontalAlignment.CENTER:
|
|
default:
|
|
return 'center'
|
|
}
|
|
}
|
|
|
|
const getVerticalAlign = (verticalAlignment?: VerticalAlignment) => {
|
|
switch (verticalAlignment) {
|
|
case VerticalAlignment.TOP:
|
|
return 'top'
|
|
case VerticalAlignment.BOTTOM:
|
|
return 'bottom'
|
|
case VerticalAlignment.MIDDLE:
|
|
default:
|
|
return 'middle'
|
|
}
|
|
}
|
|
|
|
return (
|
|
<table width="100%" cellPadding="0" cellSpacing="0" border={0} style={{ borderCollapse: 'collapse' }}>
|
|
<tbody>
|
|
<tr>
|
|
<td
|
|
align={getHorizontalAlign(buttons[0]?.alignment)}
|
|
valign={getVerticalAlign(buttons[0]?.verticalAlignment)}
|
|
style={{ width: '100%' }}
|
|
>
|
|
<table cellPadding="0" cellSpacing="0" border={0} style={{ borderCollapse: 'collapse' }}>
|
|
<tbody>
|
|
<tr>
|
|
{buttons.slice(0, 2).map((button, buttonIndex) => (
|
|
<td key={button.id} style={{ paddingRight: buttonIndex === 0 && buttons.length > 1 ? '4px' : '0' }}>
|
|
<table cellPadding="0" cellSpacing="0" border={0} style={{
|
|
borderCollapse: 'collapse',
|
|
backgroundColor: button.backgroundColor,
|
|
border: button.isBorder ? `${button.borderSize}px solid ${button.borderColor}` : 'none',
|
|
borderRadius: '4px'
|
|
}}>
|
|
<tbody>
|
|
<tr>
|
|
<td
|
|
align="center"
|
|
valign="middle"
|
|
style={{
|
|
padding: button.size === ButtonSize.SMALL ? '2px 4px' : button.size === ButtonSize.MEDIUM ? '4px 8px' : '8px 12px',
|
|
fontSize: button.size === ButtonSize.SMALL ? '11px' : button.size === ButtonSize.MEDIUM ? '13px' : '15px',
|
|
color: button.textColor,
|
|
textDecoration: 'none',
|
|
whiteSpace: 'nowrap',
|
|
maxWidth: 'fit-content',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis'
|
|
}}
|
|
>
|
|
<a href={button.link || '#'} style={{
|
|
color: button.textColor,
|
|
textDecoration: 'none',
|
|
}}>
|
|
{button.text}
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</td>
|
|
))}
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
)
|
|
}
|
|
|
|
export default ButtonRenderer
|