Skip to content

Commit d25b2a7

Browse files
findyourmagicfindyourmagic
committed
[fix] long table name not editable findyourmagic#23 
1 parent bdaf426 commit d25b2a7

File tree

2 files changed

+110
-33
lines changed

2 files changed

+110
-33
lines changed

‎components/table.js

Lines changed: 105 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,20 @@
11
import { useState } from 'react';
2-
import { Button, Popover, Space, Tag, Popconfirm, Input } from '@arco-design/web-react';
3-
import { IconEdit, IconDelete, IconMessage, IconPlus, IconMinus, IconPalette } from '@arco-design/web-react/icon';
2+
import {
3+
Button,
4+
Popover,
5+
Space,
6+
Tag,
7+
Popconfirm,
8+
Input,
9+
} from '@arco-design/web-react';
10+
import {
11+
IconEdit,
12+
IconDelete,
13+
IconMessage,
14+
IconPlus,
15+
IconMinus,
16+
IconPalette,
17+
} from '@arco-design/web-react/icon';
418

519
import themes from '../data/theme';
620

@@ -44,14 +58,36 @@ export default function Table(props) {
4458
</div>
4559
<div className="content">
4660
<Space wrap size={4}>
47-
{field.pk && <Tag size="small" color="gold">PRIMARY</Tag>}
48-
{field.unique && <Tag size="small" color="green">UNIQUE</Tag>}
49-
{field.not_null && <Tag size="small" color="magenta">NOT NULL</Tag>}
50-
{field.increment && <Tag size="small" color="lime">INCREMENT</Tag>}
61+
{field.pk && (
62+
<Tag size="small" color="gold">
63+
PRIMARY
64+
</Tag>
65+
)}
66+
{field.unique && (
67+
<Tag size="small" color="green">
68+
UNIQUE
69+
</Tag>
70+
)}
71+
{field.not_null && (
72+
<Tag size="small" color="magenta">
73+
NOT NULL
74+
</Tag>
75+
)}
76+
{field.increment && (
77+
<Tag size="small" color="lime">
78+
INCREMENT
79+
</Tag>
80+
)}
5181
</Space>
5282

53-
<div className="field-item dbdefault"><span>DEFAULT:</span>{field.dbdefault}</div>
54-
<div className="field-item note"><span>COMMENT:</span>{field.note}</div>
83+
<div className="field-item dbdefault">
84+
<span>DEFAULT:</span>
85+
{field.dbdefault}
86+
</div>
87+
<div className="field-item note">
88+
<span>COMMENT:</span>
89+
{field.note}
90+
</div>
5591
</div>
5692
</div>
5793
);
@@ -78,10 +114,11 @@ export default function Table(props) {
78114
className={`table ${editable ? 'editable' : ''}`}
79115
style={{ borderColor: table.theme }}
80116
>
81-
<div className="table-title" style={{ background: table.theme }}>
82-
<span>
83-
{table.name}
84-
</span>
117+
<div
118+
className="table-title"
119+
style={{ background: table.theme }}
120+
>
121+
<span className="table-name">{table.name}</span>
85122

86123
{editable && (
87124
<Space size={4}>
@@ -119,36 +156,55 @@ export default function Table(props) {
119156
setNote(props.table.note);
120157
}}
121158
>
122-
<Button
123-
size="mini"
124-
icon={<IconMessage />}
125-
/>
159+
<Button size="mini" icon={<IconMessage />} />
126160
</Popconfirm>
127161
<Popover
128162
position="tr"
129163
title={
130164
<>
131165
Theme
132-
133166
<Button
134167
size="mini"
135-
style={{ float: 'right', fontSize: '12px' }}
136-
onClick={() => props.updateTable({ ...props.table, theme: undefined })}
168+
style={{
169+
float: 'right',
170+
fontSize: '12px',
171+
}}
172+
onClick={() =>
173+
props.updateTable({
174+
...props.table,
175+
theme: undefined,
176+
})
177+
}
137178
>
138179
Clear
139180
</Button>
140181
</>
141182
}
142183
content={
143-
<Space warp direction="vertical" size="medium" style={{ margin: '8px 0 4px' }}>
184+
<Space
185+
warp
186+
direction="vertical"
187+
size="medium"
188+
style={{ margin: '8px 0 4px' }}
189+
>
144190
{themes.map(list => (
145-
<Space size="medium" key={list.toString()}>
191+
<Space
192+
size="medium"
193+
key={list.toString()}
194+
>
146195
{list.map(item => (
147196
<Button
148197
key={item}
149198
shape="circle"
150-
style={{ background: item }}
151-
onClick={() => props.updateTable({ ...props.table, theme: item })}
199+
style={{
200+
background: item,
201+
}}
202+
onClick={() =>
203+
props.updateTable({
204+
...props.table,
205+
theme: item,
206+
})
207+
}
152208
/>
153209
))}
154210
</Space>
@@ -157,10 +213,7 @@ export default function Table(props) {
157213
}
158214
trigger="click"
159215
>
160-
<Button
161-
size="mini"
162-
icon={<IconPalette />}
163-
/>
216+
<Button size="mini" icon={<IconPalette />} />
164217
</Popover>
165218
<Popconfirm
166219
position="tr"
@@ -172,7 +225,7 @@ export default function Table(props) {
172225
}}
173226
>
174227
<Button
175-
status='danger'
228+
status="danger"
176229
size="mini"
177230
icon={<IconDelete />}
178231
/>
@@ -204,13 +257,29 @@ export default function Table(props) {
204257
<div>
205258
{field.name}
206259
{field.pk && (
207-
<img style={{ width: 10, height: 10, marginLeft: 4 }} src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB30lEQVR4AYySg44eURxHm75MbdvmCzQso0a1bdsKatu2MTNre3fMT6c3t1gjyS+6Oef+1QpoMgVXR+4X4W/2131vEZwIs2UakjQPe5+JKo4Ttx8DKSnJuTD8aJOCmnBYso2o8tS/3wHIOdWPt/v6PWlCIMuWcFC4nLBsr8hDpOTicFIJnayD3aWkUYEoWcIyRaukJG49xEnfgpc1jmT4jPSdXWm8guCXqGATQlBDtBpbGYP5ua9o7zLK0nYNwq1F9pe/nCuAlVjfBuFlTMPPmYOjTsX41JO4sQ5lRTvur++p1d/39VGUv5pPTL8ofusn4Eni9xnYnwdivOsuYXVVBx5s7PUTwdUUiOFYxK0H+IVLML+3xfvZBz93DQXnBpNwToqyz6Gu7sCTLb2+/ONqXhpR+QUcbTLGuw44yiCCvM2839xdv7umR6ayrB3auo482977Q82W//5sipKv4moj0N+2xVWHEeRv4sOW7lXXN/Y909CgawrsmPEA61s/9Fdt8TMnC3gd77d0129t6XekUbhmBXH3NZYyAi9jLF7eat5u7Gbe2dbvYHOwFORdHP4pqHiJn7eCoPgE7zZ3N+7v7L+rJfDvgQ04Ndeu+uI0s6dnJhi/Bvn50FTrdpAEsRgA3aj/RFymC/IAAAAASUVORK5CYII=" />
260+
<img
261+
style={{
262+
width: 10,
263+
height: 10,
264+
marginLeft: 4,
265+
}}
266+
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB30lEQVR4AYySg44eURxHm75MbdvmCzQso0a1bdsKatu2MTNre3fMT6c3t1gjyS+6Oef+1QpoMgVXR+4X4W/2131vEZwIs2UakjQPe5+JKo4Ttx8DKSnJuTD8aJOCmnBYso2o8tS/3wHIOdWPt/v6PWlCIMuWcFC4nLBsr8hDpOTicFIJnayD3aWkUYEoWcIyRaukJG49xEnfgpc1jmT4jPSdXWm8guCXqGATQlBDtBpbGYP5ua9o7zLK0nYNwq1F9pe/nCuAlVjfBuFlTMPPmYOjTsX41JO4sQ5lRTvur++p1d/39VGUv5pPTL8ofusn4Eni9xnYnwdivOsuYXVVBx5s7PUTwdUUiOFYxK0H+IVLML+3xfvZBz93DQXnBpNwToqyz6Gu7sCTLb2+/ONqXhpR+QUcbTLGuw44yiCCvM2839xdv7umR6ayrB3auo482977Q82W//5sipKv4moj0N+2xVWHEeRv4sOW7lXXN/Y909CgawrsmPEA61s/9Fdt8TMnC3gd77d0129t6XekUbhmBXH3NZYyAi9jLF7eat5u7Gbe2dbvYHOwFORdHP4pqHiJn7eCoPgE7zZ3N+7v7L+rJfDvgQ04Ndeu+uI0s6dnJhi/Bvn50FTrdpAEsRgA3aj/RFymC/IAAAAASUVORK5CYII="
267+
/>
208268
)}
209269
{(field.unique || field.index) && (
210-
<img style={{ width: 10, height: 10, marginLeft: 4 }} src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAA7UlEQVR4AW2Qg26GURQEb/rWtW3bts2otm27jdpouv39YTeeuTjH2FNdUo1a4gBB/KVaFQt+Zp9bkFJe5Yo3OKBahUJSZ60CX8KLbHMhoZIfsq1Kta5eVJel3LDIEA+kYxHeWBPwSn20ckkMQRxWXTLEEh1MMMsgzWwSS9Rh4Hs1jHJKJ0PM0U6jcDzRu4HLf7lmgUYJi5RzzLlw3EbI5o51aT3drJDwHnEaSyIJKyGnz+ijll7hxLfIRvt6vq9op4ZhlnU6ptK5Xh7oYZBF4j5jy4wzFWv6HrskfMTnG7dkRWbcJb8kvqWkGtf8ARG87I1KSSe4AAAAAElFTkSuQmCC" />
270+
<img
271+
style={{
272+
width: 10,
273+
height: 10,
274+
marginLeft: 4,
275+
}}
276+
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAA7UlEQVR4AW2Qg26GURQEb/rWtW3bts2otm27jdpouv39YTeeuTjH2FNdUo1a4gBB/KVaFQt+Zp9bkFJe5Yo3OKBahUJSZ60CX8KLbHMhoZIfsq1Kta5eVJel3LDIEA+kYxHeWBPwSn20ckkMQRxWXTLEEh1MMMsgzWwSS9Rh4Hs1jHJKJ0PM0U6jcDzRu4HLf7lmgUYJi5RzzLlw3EbI5o51aT3drJDwHnEaSyIJKyGnz+ijll7hxLfIRvt6vq9op4ZhlnU6ptK5Xh7oYZBF4j5jy4wzFWv6HrskfMTnG7dkRWbcJb8kvqWkGtf8ARG87I1KSSe4AAAAAElFTkSuQmCC"
277+
/>
211278
)}
212279
</div>
213-
<div className="field-type">{field.type}</div>
280+
<div className="field-type">
281+
{field.type}
282+
</div>
214283
</div>
215284
<div className="grip-setting">
216285
<Button
@@ -219,7 +288,10 @@ export default function Table(props) {
219288
size="mini"
220289
icon={<IconEdit />}
221290
onClick={() => {
222-
handlerEditingField({ field, table });
291+
handlerEditingField({
292+
field,
293+
table,
294+
});
223295
}}
224296
/>
225297
<Button
@@ -232,7 +304,7 @@ export default function Table(props) {
232304
}}
233305
/>
234306
<Button
235-
status='danger'
307+
status="danger"
236308
className="grip-setting-btn"
237309
size="mini"
238310
icon={<IconMinus />}

‎styles/globals.sass

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,11 @@ a
9292
background: var(--color-fill-2)
9393
font-weight: 600
9494

95+
&-name
96+
max-width: 50%
97+
overflow: hidden
98+
text-overflow: ellipsis
99+
95100
&-comment
96101
padding: 0 8px
97102
height: 24px

0 commit comments

Comments
 (0)