1
1
import { useMemo , useState } from "react" ;
2
2
import { Action , ObjectType } from "../../../data/constants" ;
3
- import { Input , Button , Popover , Select , Tooltip } from "@douyinfe/semi-ui" ;
3
+ import { Input , Button , Popover , Select } from "@douyinfe/semi-ui" ;
4
4
import { IconMore , IconKeyStroked } from "@douyinfe/semi-icons" ;
5
5
import { useEnums , useDiagram , useTypes , useUndoRedo } from "../../../hooks" ;
6
6
import { useTranslation } from "react-i18next" ;
7
7
import { dbToTypes } from "../../../data/datatypes" ;
8
8
import { DragHandle } from "../../SortableList/DragHandle" ;
9
9
import FieldDetails from "./FieldDetails" ;
10
- import { getIssues } from "../../../utils/issues" ;
11
10
12
11
export default function TableField ( { data, tid, index, inherited } ) {
13
12
const { updateField } = useDiagram ( ) ;
@@ -19,148 +18,191 @@ export default function TableField({ data, tid, index, inherited }) {
19
18
const [ editField , setEditField ] = useState ( { } ) ;
20
19
const table = useMemo ( ( ) => tables . find ( ( t ) => t . id === tid ) , [ tables , tid ] ) ;
21
20
22
- const allIssues = useMemo ( ( ) => getIssues ( { tables, types, enums, relationships : [ ] , database } ) , [ tables , types , enums , database ] ) ;
23
-
24
- const fieldIssues = useMemo ( ( ) => {
25
- if ( ! table || ! data ) return [ ] ;
26
- return allIssues . filter ( ( issue ) =>
27
- typeof issue === "string" &&
28
- issue . includes ( table . name ) &&
29
- ( data . name === "" || issue . includes ( data . name ) )
30
- ) ;
31
- } , [ allIssues , table , data ] ) ;
32
-
33
- const reportOverride = ( fieldKey , newVal ) => {
34
- if ( inherited && data [ fieldKey ] !== newVal ) {
35
- fieldIssues . push (
36
- t ( "inherited_field_override" , {
37
- tableName : table . name ,
38
- fieldName : data . name || "(unnamed)" ,
39
- } )
40
- ) ;
41
- }
42
- } ;
43
-
44
- const recordUndo = ( key , oldVal , newVal ) => {
45
- setUndoStack ( ( prev ) => [
46
- ...prev ,
47
- {
48
- action : Action . EDIT ,
49
- element : ObjectType . TABLE ,
50
- component : "field" ,
51
- tid,
52
- fid : data . id ,
53
- undo : { [ key ] : oldVal } ,
54
- redo : { [ key ] : newVal } ,
55
- message : t ( "edit_table" , {
56
- tableName : table . name ,
57
- extra : "[field]" ,
58
- } ) ,
59
- } ,
60
- ] ) ;
61
- setRedoStack ( [ ] ) ;
62
- } ;
63
21
64
22
return (
65
23
< div className = "hover-1 my-2 flex gap-2 items-center" >
66
24
< DragHandle id = { data . id } />
67
25
68
- { /* Field name input */ }
69
- < div className = "min-w-20 flex-1/3" style = { { opacity : inherited ? 0.6 : 1 } } >
70
- < Tooltip content = { fieldIssues . find ( ( i ) => i . includes ( "field name" ) ) || ( inherited ? t ( "inherited_field_cannot_be_modified" ) : "" ) } >
71
- < Input
72
- value = { data . name }
73
- id = { `scroll_table_${ tid } _input_${ index } ` }
74
- validateStatus = { data . name . trim ( ) === "" || inherited ? "error" : "default" }
75
- placeholder = { t ( "name" ) }
76
- style = { inherited ? { backgroundColor : "#f5f5f5" } : { } }
77
- onChange = { ( value ) => updateField ( tid , data . id , { name : value } ) }
78
- onFocus = { ( e ) => setEditField ( { name : e . target . value } ) }
79
- onBlur = { ( e ) => {
80
- const newName = e . target . value ;
81
- if ( newName === editField . name ) return ;
82
- reportOverride ( "name" , newName ) ;
83
- recordUndo ( "name" , editField . name , newName ) ;
84
- updateField ( tid , data . id , { name : newName } ) ;
85
- } }
86
- />
87
- </ Tooltip >
26
+ < div
27
+ className = "min-w-20 flex-1/3"
28
+ style = { { opacity : inherited ? 0.6 : 1 } }
29
+ >
30
+ < Input
31
+ value = { data . name }
32
+ id = { `scroll_table_${ tid } _input_${ index } ` }
33
+ validateStatus = {
34
+ data . name . trim ( ) === "" || inherited ? "error" : "default"
35
+ }
36
+ placeholder = { t ( "name" ) }
37
+ onChange = { ( value ) => updateField ( tid , data . id , { name : value } ) }
38
+ onFocus = { ( e ) => setEditField ( { name : e . target . value } ) }
39
+ onBlur = { ( e ) => {
40
+ if ( e . target . value === editField . name ) return ;
41
+ setUndoStack ( ( prev ) => [
42
+ ...prev ,
43
+ {
44
+ action : Action . EDIT ,
45
+ element : ObjectType . TABLE ,
46
+ component : "field" ,
47
+ tid : tid ,
48
+ fid : data . id ,
49
+ undo : editField ,
50
+ redo : { name : e . target . value } ,
51
+ message : t ( "edit_table" , {
52
+ tableName : table . name ,
53
+ extra : "[field]" ,
54
+ } ) ,
55
+ } ,
56
+ ] ) ;
57
+ setRedoStack ( [ ] ) ;
58
+ } }
59
+ />
88
60
</ div >
89
61
90
- { /* Field type select */ }
91
62
< div className = "min-w-24 flex-1/3" >
92
- < Tooltip content = { fieldIssues . find ( ( i ) => i . includes ( "field type" ) ) || "" } >
93
- < Select
94
- className = "w-full"
95
- optionList = { [
96
- ...Object . keys ( dbToTypes [ database ] ) . map ( ( value ) => ( { label : value , value } ) ) ,
97
- ...types . map ( ( type ) => ( { label : type . name . toUpperCase ( ) , value : type . name . toUpperCase ( ) } ) ) ,
98
- ...enums . map ( ( type ) => ( { label : type . name . toUpperCase ( ) , value : type . name . toUpperCase ( ) } ) ) ,
99
- ] }
100
- filter
101
- value = { data . type }
102
- validateStatus = { data . type === "" ? "error" : "default" }
103
- placeholder = { t ( "type" ) }
104
- onChange = { ( value ) => {
105
- if ( value === data . type ) return ;
106
- reportOverride ( "type" , value ) ;
107
- recordUndo ( "type" , data . type , value ) ;
108
- const canIncr = ! ! dbToTypes [ database ] [ value ] ?. canIncrement ;
109
- const updated = {
63
+ < Select
64
+ className = "w-full"
65
+ optionList = { [
66
+ ...Object . keys ( dbToTypes [ database ] ) . map ( ( value ) => ( {
67
+ label : value ,
68
+ value,
69
+ } ) ) ,
70
+ ...types . map ( ( type ) => ( {
71
+ label : type . name . toUpperCase ( ) ,
72
+ value : type . name . toUpperCase ( ) ,
73
+ } ) ) ,
74
+ ...enums . map ( ( type ) => ( {
75
+ label : type . name . toUpperCase ( ) ,
76
+ value : type . name . toUpperCase ( ) ,
77
+ } ) ) ,
78
+ ] }
79
+ filter
80
+ value = { data . type }
81
+ validateStatus = { data . type === "" ? "error" : "default" }
82
+ placeholder = { t ( "type" ) }
83
+ onChange = { ( value ) => {
84
+ if ( value === data . type ) return ;
85
+ setUndoStack ( ( prev ) => [
86
+ ...prev ,
87
+ {
88
+ action : Action . EDIT ,
89
+ element : ObjectType . TABLE ,
90
+ component : "field" ,
91
+ tid : tid ,
92
+ fid : data . id ,
93
+ undo : { type : data . type } ,
94
+ redo : { type : value } ,
95
+ message : t ( "edit_table" , {
96
+ tableName : table . name ,
97
+ extra : "[field]" ,
98
+ } ) ,
99
+ } ,
100
+ ] ) ;
101
+ setRedoStack ( [ ] ) ;
102
+ const incr =
103
+ data . increment && ! ! dbToTypes [ database ] [ value ] . canIncrement ;
104
+
105
+ if ( value === "ENUM" || value === "SET" ) {
106
+ updateField ( tid , data . id , {
107
+ type : value ,
108
+ default : "" ,
109
+ values : data . values ? [ ...data . values ] : [ ] ,
110
+ increment : incr ,
111
+ } ) ;
112
+ } else if (
113
+ dbToTypes [ database ] [ value ] . isSized ||
114
+ dbToTypes [ database ] [ value ] . hasPrecision
115
+ ) {
116
+ updateField ( tid , data . id , {
110
117
type : value ,
111
- increment : data . increment && canIncr ,
118
+ size : dbToTypes [ database ] [ value ] . defaultSize ,
119
+ increment : incr ,
120
+ } ) ;
121
+ } else if ( ! dbToTypes [ database ] [ value ] . hasDefault || incr ) {
122
+ updateField ( tid , data . id , {
123
+ type : value ,
124
+ increment : incr ,
125
+ default : "" ,
112
126
size : "" ,
113
127
values : [ ] ,
114
- default : dbToTypes [ database ] [ value ] ?. hasDefault ? data . default : "" ,
128
+ } ) ;
129
+ } else if ( dbToTypes [ database ] [ value ] . hasCheck ) {
130
+ updateField ( tid , data . id , {
131
+ type : value ,
115
132
check : "" ,
116
- } ;
117
- if ( [ "ENUM" , "SET" ] . includes ( value ) ) {
118
- updated . values = [ ...( data . values || [ ] ) ] ;
119
- updated . default = "" ;
120
- } else if (
121
- dbToTypes [ database ] [ value ] ?. isSized ||
122
- dbToTypes [ database ] [ value ] ?. hasPrecision
123
- ) {
124
- updated . size = dbToTypes [ database ] [ value ] . defaultSize ;
125
- }
126
- updateField ( tid , data . id , updated ) ;
127
- } }
128
- />
129
- </ Tooltip >
133
+ increment : incr ,
134
+ } ) ;
135
+ } else {
136
+ updateField ( tid , data . id , {
137
+ type : value ,
138
+ increment : incr ,
139
+ size : "" ,
140
+ values : [ ] ,
141
+ } ) ;
142
+ }
143
+ } }
144
+ />
130
145
</ div >
131
146
132
- { /* Not null toggle */ }
133
147
< div >
134
148
< Button
135
149
type = { data . notNull ? "tertiary" : "primary" }
136
150
title = { t ( "nullable" ) }
137
151
theme = { data . notNull ? "light" : "solid" }
138
152
onClick = { ( ) => {
139
- reportOverride ( "notNull" , ! data . notNull ) ;
140
- recordUndo ( "notNull" , data . notNull , ! data . notNull ) ;
153
+ setUndoStack ( ( prev ) => [
154
+ ...prev ,
155
+ {
156
+ action : Action . EDIT ,
157
+ element : ObjectType . TABLE ,
158
+ component : "field" ,
159
+ tid : tid ,
160
+ fid : data . id ,
161
+ undo : { notNull : data . notNull } ,
162
+ redo : { notNull : ! data . notNull } ,
163
+ message : t ( "edit_table" , {
164
+ tableName : table . name ,
165
+ extra : "[field]" ,
166
+ } ) ,
167
+ } ,
168
+ ] ) ;
169
+ setRedoStack ( [ ] ) ;
141
170
updateField ( tid , data . id , { notNull : ! data . notNull } ) ;
142
171
} }
143
172
>
144
173
?
145
174
</ Button >
146
175
</ div >
147
176
148
- { /* Primary key toggle */ }
149
177
< div >
150
178
< Button
151
179
type = { data . primary ? "primary" : "tertiary" }
152
180
title = { t ( "primary" ) }
153
181
theme = { data . primary ? "solid" : "light" }
154
182
icon = { < IconKeyStroked /> }
155
183
onClick = { ( ) => {
156
- reportOverride ( "primary" , ! data . primary ) ;
157
- recordUndo ( "primary" , data . primary , ! data . primary ) ;
184
+ setUndoStack ( ( prev ) => [
185
+ ...prev ,
186
+ {
187
+ action : Action . EDIT ,
188
+ element : ObjectType . TABLE ,
189
+ component : "field" ,
190
+ tid : tid ,
191
+ fid : data . id ,
192
+ undo : { primary : data . primary } ,
193
+ redo : { primary : ! data . primary } ,
194
+ message : t ( "edit_table" , {
195
+ tableName : table . name ,
196
+ extra : "[field]" ,
197
+ } ) ,
198
+ } ,
199
+ ] ) ;
200
+ setRedoStack ( [ ] ) ;
158
201
updateField ( tid , data . id , { primary : ! data . primary } ) ;
159
202
} }
160
203
/>
161
204
</ div >
162
205
163
- { /* Field settings */ }
164
206
< div >
165
207
< Popover
166
208
content = {
0 commit comments