danak/dmail-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

border + height section

Browse Source
This commit is contained in:
hamid zarghami
2025-08-06 08:49:11 +03:30
parent dcd5ab07e0
commit a47e10402c
6 changed files with 291 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/setting/personality/components/GenericSection.tsx
+84 -10
View File
@@ -15,6 +15,37 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
const { activeSection, activeItemIndex, data, setActiveSection, setActiveItemIndex } = usePersonalityStore()
// Helper function to get numeric height
const getNumericHeight = (height?: string) => {
return parseInt(height?.replace(/px|em|rem|%/g, '') || "123")
}
// Helper function to generate border style object based on selected sides
const generateBorderStyle = (border?: { width?: string; color?: string; style?: string; sides?: string[] }) => {
if (!border || border.style === 'none') {
return {}
}
const { width = '0px', color = '#E5E7EB', style = 'solid', sides = [] } = border
// اگر width صفر باشد یا تعریف نشده باشد، border نمایش نده
if (!width || width === '0px') {
return {}
}
if (sides.length === 0 || sides.length === 4) {
return { border: `${width} ${style} ${color}` }
}
// Generate individual border sides
const borderStyle: any = {}
sides.forEach(side => {
borderStyle[`border${side.charAt(0).toUpperCase() + side.slice(1)}`] = `${width} ${style} ${color}`
})
return borderStyle
}
// Early return if data is not available
if (!data || !data[sectionKey]) {
return (
@@ -95,9 +126,30 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
sectionData.columnsCount > 0 ?
<td style={{
padding: '10px',
border: activeSection === sectionKey ? '1px dashed #0038FF' : '1px dashed #E5E7EB',
...(() => {
const borderStyle = generateBorderStyle(sectionData.border)
if (activeSection === sectionKey) {
// اگر سکشن انتخاب شده است، border آبی + border سکشن را نمایش بده
if (Object.keys(borderStyle).length === 0) {
return { border: '1px dashed #0038FF' }
} else {
return {
...borderStyle,
outline: '1px dashed #0038FF',
outlineOffset: '2px'
}
}
} else {
// اگر سکشن انتخاب نشده، فقط border سکشن یا border پیش‌فرض
if (Object.keys(borderStyle).length === 0) {
return { border: '1px dashed #E5E7EB' }
}
return borderStyle
}
})(),
borderRadius: '24px',
cursor: 'pointer'
cursor: 'pointer',
height: sectionData.height || '123px'
}}>
<table width="100%" cellPadding="0" cellSpacing="0" border={0} style={{ tableLayout: 'fixed' }}>
<tbody>
@@ -114,7 +166,7 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
onClick={(e) => handleItemClick(index, e)}
style={{
width: `${100 / sectionData.columnsCount}%`,
height: '123px',
height: sectionData.height || '123px',
border: isActive ? '1px dashed #0038FF' : '1px dashed #EAECF4',
backgroundColor: item?.backgroundColor || '#ffffff',
backgroundImage: item?.backgroundImage ? `url(${item.backgroundImage})` : 'none',
@@ -130,7 +182,7 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
>
<table width="100%" cellPadding="0" cellSpacing="0" border={0} style={{
borderCollapse: 'collapse',
height: '123px'
height: sectionData.height || '123px'
}}>
<tbody>
{/* اگر column خالی است */}
@@ -141,7 +193,7 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
<tr>
<td
width="100%"
height="123"
height={getNumericHeight(sectionData.height).toString()}
style={{
padding: '8px',
cursor: 'pointer'
@@ -158,7 +210,7 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
<tr>
<td
width="100%"
height="123"
height={getNumericHeight(sectionData.height).toString()}
align={getButtonHorizontalAlign(item.buttons[0])}
valign={getButtonVerticalAlign(item.buttons[0])}
style={{
@@ -178,7 +230,9 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
<tr>
<td
width="100%"
height={item?.buttons && item.buttons.length > 0 ? "60" : "87"}
height={item?.buttons && item.buttons.length > 0 ?
Math.floor(getNumericHeight(sectionData.height) * 0.6).toString() :
Math.floor(getNumericHeight(sectionData.height) * 0.8).toString()}
align={item?.texts?.[0]?.alignment || 'center'}
valign={item?.texts?.[0]?.verticalAlignment === VerticalAlignment.TOP ? 'top' :
item?.texts?.[0]?.verticalAlignment === VerticalAlignment.BOTTOM ? 'bottom' : 'middle'}
@@ -210,7 +264,7 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
<tr>
<td
width="100%"
height="27"
height={Math.floor(getNumericHeight(sectionData.height) * 0.2).toString()}
align={getButtonHorizontalAlign(item.buttons[0])}
valign={getButtonVerticalAlign(item.buttons[0])}
style={{
@@ -247,8 +301,28 @@ const GenericSection: FC<GenericSectionProps> = ({ sectionKey }) => {
<td
onClick={(e) => handleSectionClick(sectionKey, e)}
style={{
height: '123px',
border: activeSection === sectionKey ? '1px dashed #0038FF' : '1px dashed #E5E7EB',
height: sectionData.height || '123px',
...(() => {
const borderStyle = generateBorderStyle(sectionData.border)
if (activeSection === sectionKey) {
// اگر سکشن انتخاب شده است، border آبی + border سکشن را نمایش بده
if (Object.keys(borderStyle).length === 0) {
return { border: '1px dashed #0038FF' }
} else {
return {
...borderStyle,
outline: '1px dashed #0038FF',
outlineOffset: '2px'
}
}
} else {
// اگر سکشن انتخاب نشده، فقط border سکشن یا border پیش‌فرض
if (Object.keys(borderStyle).length === 0) {
return { border: '1px dashed #E5E7EB' }
}
return borderStyle
}
})(),
borderRadius: '24px',
textAlign: 'center',
verticalAlign: 'middle',