add renderer components

2025-07-01 14:36:27 +03:30
parent 2babdb1897
commit 7638e07e39
13 changed files with 1102 additions and 192 deletions
@@ -0,0 +1,94 @@
+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