@@ -4,6 +4,7 @@ import RecipientList from "./RecipientList";
4
4
import { useDrag } from "react-dnd" ;
5
5
import WidgetList from "./WidgetList" ;
6
6
import {
7
+ color ,
7
8
radioButtonWidget ,
8
9
textInputWidget ,
9
10
textWidget ,
@@ -43,163 +44,69 @@ function WidgetComponent({
43
44
const [ isSignersModal , setIsSignersModal ] = useState ( false ) ;
44
45
const [ , dropdown ] = useDrag ( {
45
46
type : "BOX" ,
46
- item : {
47
- type : "BOX" ,
48
- id : 5 ,
49
- text : "dropdown"
50
- } ,
51
-
47
+ item : { type : "BOX" , id : 5 , text : "dropdown" } ,
52
48
collect : ( monitor ) => ( {
53
49
isDragDropdown : ! ! monitor . isDragging ( )
54
50
} )
55
51
} ) ;
56
52
const [ , checkbox ] = useDrag ( {
57
53
type : "BOX" ,
58
- item : {
59
- type : "BOX" ,
60
- id : 6 ,
61
- text : "checkbox"
62
- } ,
63
-
64
- collect : ( monitor ) => ( {
65
- isDragCheck : ! ! monitor . isDragging ( )
66
- } )
54
+ item : { type : "BOX" , id : 6 , text : "checkbox" } ,
55
+ collect : ( monitor ) => ( { isDragCheck : ! ! monitor . isDragging ( ) } )
67
56
} ) ;
68
57
const [ , textInput ] = useDrag ( {
69
58
type : "BOX" ,
70
- item : {
71
- type : "BOX" ,
72
- id : 7 ,
73
- text : textInputWidget
74
- } ,
75
- collect : ( monitor ) => ( {
76
- isDragTextInput : ! ! monitor . isDragging ( )
77
- } )
59
+ item : { type : "BOX" , id : 7 , text : textInputWidget } ,
60
+ collect : ( monitor ) => ( { isDragTextInput : ! ! monitor . isDragging ( ) } )
78
61
} ) ;
79
62
const [ , initials ] = useDrag ( {
80
63
type : "BOX" ,
81
- item : {
82
- type : "BOX" ,
83
- id : 8 ,
84
- text : "initials"
85
- } ,
86
-
87
- collect : ( monitor ) => ( {
88
- isDragInitial : ! ! monitor . isDragging ( )
89
- } )
64
+ item : { type : "BOX" , id : 8 , text : "initials" } ,
65
+ collect : ( monitor ) => ( { isDragInitial : ! ! monitor . isDragging ( ) } )
90
66
} ) ;
91
67
const [ , name ] = useDrag ( {
92
68
type : "BOX" ,
93
- item : {
94
- type : "BOX" ,
95
- id : 9 ,
96
- text : "name"
97
- } ,
98
-
99
- collect : ( monitor ) => ( {
100
- isDragName : ! ! monitor . isDragging ( )
101
- } )
69
+ item : { type : "BOX" , id : 9 , text : "name" } ,
70
+ collect : ( monitor ) => ( { isDragName : ! ! monitor . isDragging ( ) } )
102
71
} ) ;
103
72
const [ , company ] = useDrag ( {
104
73
type : "BOX" ,
105
- item : {
106
- type : "BOX" ,
107
- id : 10 ,
108
- text : "company"
109
- } ,
110
-
111
- collect : ( monitor ) => ( {
112
- isDragCompany : ! ! monitor . isDragging ( )
113
- } )
74
+ item : { type : "BOX" , id : 10 , text : "company" } ,
75
+ collect : ( monitor ) => ( { isDragCompany : ! ! monitor . isDragging ( ) } )
114
76
} ) ;
115
77
const [ , jobTitle ] = useDrag ( {
116
78
type : "BOX" ,
117
- item : {
118
- type : "BOX" ,
119
- id : 11 ,
120
- text : "job title"
121
- } ,
122
-
123
- collect : ( monitor ) => ( {
124
- isDragJobtitle : ! ! monitor . isDragging ( )
125
- } )
79
+ item : { type : "BOX" , id : 11 , text : "job title" } ,
80
+ collect : ( monitor ) => ( { isDragJobtitle : ! ! monitor . isDragging ( ) } )
126
81
} ) ;
127
82
const [ , date ] = useDrag ( {
128
83
type : "BOX" ,
129
- item : {
130
- type : "BOX" ,
131
- id : 12 ,
132
- text : "date"
133
- } ,
134
-
135
- collect : ( monitor ) => ( {
136
- isDragDate : ! ! monitor . isDragging ( )
137
- } )
84
+ item : { type : "BOX" , id : 12 , text : "date" } ,
85
+ collect : ( monitor ) => ( { isDragDate : ! ! monitor . isDragging ( ) } )
138
86
} ) ;
139
87
const [ , image ] = useDrag ( {
140
88
type : "BOX" ,
141
- item : {
142
- type : "BOX" ,
143
- id : 13 ,
144
- text : "image"
145
- } ,
146
-
147
- collect : ( monitor ) => ( {
148
- isDragImage : ! ! monitor . isDragging ( )
149
- } )
89
+ item : { type : "BOX" , id : 13 , text : "image" } ,
90
+ collect : ( monitor ) => ( { isDragImage : ! ! monitor . isDragging ( ) } )
150
91
} ) ;
151
92
const [ , email ] = useDrag ( {
152
93
type : "BOX" ,
153
- item : {
154
- type : "BOX" ,
155
- id : 14 ,
156
- text : "email"
157
- } ,
158
- collect : ( monitor ) => ( {
159
- isDragEmail : ! ! monitor . isDragging ( )
160
- } )
94
+ item : { type : "BOX" , id : 14 , text : "email" } ,
95
+ collect : ( monitor ) => ( { isDragEmail : ! ! monitor . isDragging ( ) } )
161
96
} ) ;
162
97
const [ , radioButton ] = useDrag ( {
163
98
type : "BOX" ,
164
-
165
- item : {
166
- type : "BOX" ,
167
- id : 15 ,
168
- text : radioButtonWidget
169
- } ,
170
- collect : ( monitor ) => ( {
171
- isDragRadiotton : ! ! monitor . isDragging ( )
172
- } )
99
+ item : { type : "BOX" , id : 15 , text : radioButtonWidget } ,
100
+ collect : ( monitor ) => ( { isDragRadiotton : ! ! monitor . isDragging ( ) } )
173
101
} ) ;
174
102
const [ , text ] = useDrag ( {
175
103
type : "BOX" ,
176
-
177
- item : {
178
- type : "BOX" ,
179
- id : 16 ,
180
- text : textWidget
181
- } ,
182
- collect : ( monitor ) => ( {
183
- isDragText : ! ! monitor . isDragging ( )
184
- } )
104
+ item : { type : "BOX" , id : 16 , text : textWidget } ,
105
+ collect : ( monitor ) => ( { isDragText : ! ! monitor . isDragging ( ) } )
185
106
} ) ;
186
107
const isMobile = window . innerWidth < 767 ;
187
108
const scrollContainerRef = useRef ( null ) ;
188
109
const [ widget , setWidget ] = useState ( [ ] ) ;
189
- const color = [
190
- "#93a3db" ,
191
- "#e6c3db" ,
192
- "#c0e3bc" ,
193
- "#bce3db" ,
194
- "#b8ccdb" ,
195
- "#ceb8db" ,
196
- "#ffccff" ,
197
- "#99ffcc" ,
198
- "#cc99ff" ,
199
- "#ffcc99" ,
200
- "#66ccff" ,
201
- "#ffffcc"
202
- ] ;
203
110
const handleModal = ( ) => {
204
111
setIsSignersModal ( ! isSignersModal ) ;
205
112
} ;
0 commit comments