Skip to content

Commit f627ab2

Browse files
hulinNeilhulinNeil
committed
add table cell background
(cherry picked from commit 96f2411)
1 parent e8c374f commit f627ab2

File tree

6 files changed

+179
-10
lines changed

6 files changed

+179
-10
lines changed

‎packages/easy-email-core/src/blocks/advanced/generateAdvancedTableBlock.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export function generateAdvancedTableBlock(option: {
5757
e =>
5858
`<td rowspan="${e.rowSpan || 1}" colspan="${
5959
e.colSpan || 1
60-
}" style="${styles.join(';')}">${e.content}</td>`,
60+
}" style="${styles.join(';')}; background-color:${e.backgroundColor};">${e.content}</td>`,
6161
);
6262
return `<tr style="text-align:${textAlign};font-style:${fontStyle};">${_trString.join(
6363
'\n',
@@ -81,6 +81,7 @@ export interface IAdvancedTableData {
8181
content: string;
8282
colSpan?: number;
8383
rowSpan?: number;
84+
backgroundColor?: string;
8485
}
8586

8687
export type AdvancedTableBlock = IBlockData<

‎packages/easy-email-extensions/src/AttributePanel/components/blocks/AdvancedTable/Operation/menu.scss

Lines changed: 60 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.easy-email-table-operation-menu {
22
background-color: #fff;
3-
box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
3+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
44
font-size: 14px;
55
z-index: 100;
66
overflow: hidden;
@@ -12,7 +12,6 @@
1212
background-color: #efefef;
1313
}
1414

15-
1615
.easy-email-table-operation-color-picker {
1716
display: flex;
1817
align-items: center;
@@ -53,5 +52,63 @@
5352
font-size: 0;
5453
}
5554
}
56-
}
5755

56+
.easy-email-table-operation-menu-bg-item {
57+
padding: 10px 16px;
58+
background-color: #fff;
59+
color: #595959;
60+
61+
> div:nth-child(2) {
62+
margin-top: 4px;
63+
display: flex;
64+
align-items: center;
65+
flex-shrink: 0;
66+
67+
.arco-input-inner-wrapper {
68+
box-shadow: none;
69+
}
70+
.arco-btn-size-default {
71+
padding: 0 12px;
72+
}
73+
74+
.arco-input-group {
75+
display: flex;
76+
.arco-input-inner-wrapper {
77+
flex: 1;
78+
}
79+
.arco-input-group-addafter {
80+
height: 100%;
81+
width: auto;
82+
}
83+
}
84+
}
85+
86+
&-color {
87+
height: 28px;
88+
width: 28px;
89+
flex-shrink: 0;
90+
border: 1px solid var(--color-neutral-3, rgb(229, 230, 235));
91+
border-right: none;
92+
padding: 4px;
93+
cursor: pointer;
94+
position: relative;
95+
96+
> div {
97+
height: 100%;
98+
width: 100%;
99+
border: 1px solid var(--color-neutral-3, rgb(229, 230, 235));
100+
border-radius: 2px;
101+
}
102+
input {
103+
cursor: pointer;
104+
position: absolute;
105+
width: 100%;
106+
height: 100%;
107+
z-index: 1;
108+
left: 0;
109+
top: 0;
110+
opacity: 0;
111+
}
112+
}
113+
}
114+
}

‎packages/easy-email-extensions/src/AttributePanel/components/blocks/AdvancedTable/Operation/tableCellBgSelector.tsx

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { Input } from '@arco-design/web-react';
2+
import React, { useEffect } from 'react';
3+
import { render } from 'react-dom';
4+
import { useState } from 'react';
5+
6+
interface CellBackgroundSelectorProps {
7+
bgColorHandler: (color: string) => void;
8+
rootDom: Element;
9+
}
10+
11+
const CellBackgroundSelector: React.FC<CellBackgroundSelectorProps> = ({
12+
bgColorHandler,
13+
rootDom,
14+
}) => {
15+
const [color, setColor] = useState('#ffffff');
16+
17+
useEffect(() => {
18+
if (!rootDom) {
19+
return;
20+
}
21+
const observer = new ResizeObserver(e => {
22+
setColor('#ffffff');
23+
});
24+
observer.observe(rootDom);
25+
return () => {
26+
observer.disconnect();
27+
};
28+
}, []);
29+
30+
return (
31+
<div
32+
onClick={e => e.stopPropagation()}
33+
className='easy-email-table-operation-menu-bg-item'
34+
>
35+
<div>Set Background Color</div>
36+
<div>
37+
<div className='easy-email-table-operation-menu-bg-item-color'>
38+
<div style={{ backgroundColor: color }}></div>
39+
<input
40+
type='color'
41+
value={color}
42+
onChange={e => setColor(e.target.value)}
43+
/>
44+
</div>
45+
<Input.Search
46+
height={28}
47+
searchButton='Set'
48+
onSearch={() => bgColorHandler(color)}
49+
value={color}
50+
onKeyDown={e => e.stopPropagation()}
51+
onChange={e => setColor(e)}
52+
/>
53+
</div>
54+
</div>
55+
);
56+
};
57+
58+
const getCellBackgroundSelectorRoot = (
59+
bgColorHandler: CellBackgroundSelectorProps['bgColorHandler'],
60+
rootDom: any,
61+
) => {
62+
const node = document.createElement('div');
63+
64+
render(
65+
<CellBackgroundSelector
66+
bgColorHandler={bgColorHandler}
67+
rootDom={rootDom}
68+
/>,
69+
node,
70+
);
71+
return node;
72+
};
73+
74+
export default getCellBackgroundSelectorRoot;

‎packages/easy-email-extensions/src/AttributePanel/components/blocks/AdvancedTable/Operation/tableMenuConfig.ts

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import getCellBackgroundSelectorRoot from './tableCellBgSelector';
12
import TableOperationMenu from './tableOperationMenu';
23
import { IOperationData } from './type';
34

@@ -69,10 +70,7 @@ const MENU_CONFIG = {
6970
break;
7071
}
7172
// pre cell intersect current cell.
72-
if (
73-
tdLeft > left &&
74-
(!tr[index - 1] || (tr[index - 1].right || 0) + 1 === left)
75-
) {
73+
if (tdLeft > left && tr[index - 1] && (tr[index - 1].right || 0) + 1 === left) {
7674
tr.splice(index, 0, { content: '-' } as any);
7775
break;
7876
}
@@ -274,6 +272,39 @@ const MENU_CONFIG = {
274272
_this.changeTableData?.(_this.tableData);
275273
},
276274
},
275+
setCellBg: {
276+
text: 'Set Background',
277+
render(tableOperationMenu: TableOperationMenu) {
278+
const bgColorHandler = this.handler.bind(tableOperationMenu);
279+
const root = getCellBackgroundSelectorRoot(
280+
bgColorHandler,
281+
tableOperationMenu.domNode,
282+
);
283+
return root;
284+
},
285+
handler(color: string) {
286+
const _this = this as unknown as TableOperationMenu;
287+
const { top, bottom, left, right } = _this.tableIndexBoundary;
288+
_this.tableData.forEach(tr => {
289+
for (let index = 0; index < tr.length; index++) {
290+
const td = tr[index];
291+
const tdTop = tr[index].top || 0;
292+
const tdBottom = tr[index].bottom || 0;
293+
const tdLeft = tr[index].left || 0;
294+
const tdRight = tr[index].right || 0;
295+
296+
if (tdLeft > right) {
297+
break;
298+
}
299+
if (top <= tdTop && bottom >= tdBottom && left <= tdLeft && right >= tdRight) {
300+
td.backgroundColor = color;
301+
}
302+
}
303+
});
304+
_this.changeTableData?.(_this.tableData);
305+
_this.hide();
306+
},
307+
},
277308
};
278309

279310
export default MENU_CONFIG;

‎packages/easy-email-extensions/src/AttributePanel/components/blocks/AdvancedTable/Operation/tableOperationMenu.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,9 +99,13 @@ export default class TableOperationMenu {
9999
for (let name in this.menuItems) {
100100
const itemOption = (this.menuItems as any)[name];
101101
if (itemOption) {
102-
this.domNode.appendChild(this.menuItemCreator(Object.assign({}, itemOption)));
102+
this.domNode.appendChild(
103+
itemOption.render
104+
? itemOption.render(this)
105+
: this.menuItemCreator(Object.assign({}, itemOption)),
106+
);
103107

104-
if (['insertRowDown'].indexOf(name) > -1) {
108+
if (['insertRowDown', 'deleteRow'].indexOf(name) > -1) {
105109
this.domNode.appendChild(dividingCreator());
106110
}
107111
}

‎packages/easy-email-extensions/src/AttributePanel/components/blocks/AdvancedTable/Operation/tableTool.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,8 @@ class TableColumnTool {
6363
document.body.removeEventListener('click', this.hideBorder, false);
6464
document.body.removeEventListener('contextmenu', this.hideTableMenu, false);
6565
document.removeEventListener('keydown', this.hideBorderByKeyDown);
66+
67+
this.tableMenu?.destroy();
6668
}
6769

6870
hideBorder = (e: any) => {

0 commit comments

Comments
 (0)