@@ -7,38 +7,15 @@ import {
77 isMobile ,
88 nameColor
99} from "../../constant/Utils" ;
10-
10+ const cursor =
11+ "cursor-[url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAASElEQVR4nGNgwAMkJSUbpKSkOvCpIaT5PxSTbogUQjMYMwxeIIXmVFIxA8UGDDyQGg0DnIDi6JKUlCxHMqCeZAOghjSAMD5FAKfeaURdUFxCAAAAAElFTkSuQmCC'),_pointer]" ;
1112const RecipientList = ( props ) => {
1213 const [ animationParent ] = useAutoAnimate ( ) ;
1314 const [ isHover , setIsHover ] = useState ( ) ;
1415 const [ isEdit , setIsEdit ] = useState ( false ) ;
1516 //function for onhover signer name change background color
1617 const inputRef = useRef ( null ) ;
17- const onHoverStyle = ( ind , blockColor ) => {
18- const style = {
19- background : blockColor ? blockColor : color [ ind % color . length ] ,
20- padding : "10px" ,
21- marginTop : "2px" ,
22- display : "flex" ,
23- flexDirection : "row" ,
24- borderRadius : 12 ,
25- borderBottom : "1px solid #e3e1e1" ,
26- alignItems : "center"
27- } ;
28- return style ;
29- } ;
30- //function for onhover signer name remove background color
31- const nonHoverStyle = ( ) => {
32- const style = {
33- padding : "10px" ,
34- marginTop : "2px" ,
35- display : "flex" ,
36- flexDirection : "row" ,
37- borderBottom : "1px solid #e3e1e1" ,
38- alignItems : "center"
39- } ;
40- return style ;
41- } ;
18+
4219 const isWidgetExist = ( Id ) => {
4320 return props . signerPos . some ( ( x ) => x . Id === Id ) ;
4421 } ;
@@ -117,18 +94,21 @@ const RecipientList = (props) => {
11794 data-tut = "reactourFirst"
11895 onMouseEnter = { ( ) => setIsHover ( ind ) }
11996 onMouseLeave = { ( ) => setIsHover ( null ) }
120- className = {
97+ className = { ` ${
12198 props . sendInOrder
12299 ? props . isMailSend
123- ? "disabled"
124- : "dragCursor"
125- : props . isMailSend && "disabled"
126- }
127- style = {
128- ( ! isMobile && isHover === ind ) || props . isSelectListId === ind
129- ? onHoverStyle ( ind , obj ?. blockColor )
130- : nonHoverStyle ( ind )
131- }
100+ ? "pointer-events-none bg-opacity-80"
101+ : `text-[12px] font-bold ${ cursor }
102+ : props . isMailSend && "pointer-events-none bg-opacity-80"
103+ } flex flex-row rounded-xl px-2 py-[10px] mt-[2px] mx-1 items-center`}
104+ style = { {
105+ background :
106+ ( ! isMobile && isHover === ind ) || props . isSelectListId === ind
107+ ? obj ?. blockColor
108+ ? obj ?. blockColor
109+ : color [ ind % color . length ]
110+ : "transparent"
111+ } }
132112 onClick = { ( e ) => {
133113 e . preventDefault ( ) ;
134114 props . setSignerObjId ( obj ?. objectId || "" ) ;
@@ -144,29 +124,14 @@ const RecipientList = (props) => {
144124 >
145125 < div className = "flex flex-row items-center w-full" >
146126 < div
127+ className = "flex w-[30px] h-[30px] rounded-full items-center justify-center mr-2"
147128 style = { {
148129 background : obj ?. blockColor
149130 ? darkenColor ( obj ?. blockColor , 0.4 )
150- : nameColor [ ind % nameColor . length ] ,
151- width : 30 ,
152- height : 30 ,
153- display : "flex" ,
154- borderRadius : 30 / 2 ,
155- justifyContent : "center" ,
156- alignItems : "center" ,
157- marginRight : "12px"
131+ : nameColor [ ind % nameColor . length ]
158132 } }
159133 >
160- < span
161- className = { props . sendInOrder && "dragCursor" }
162- style = { {
163- fontSize : "12px" ,
164- textAlign : "center" ,
165- fontWeight : "bold" ,
166- color : "white" ,
167- textTransform : "uppercase"
168- } }
169- >
134+ < span className = "text-white uppercase font-bold text-center text-[12px]" >
170135 { isWidgetExist ( obj . Id ) ? (
171136 < i className = "fa-solid fa-check" > </ i >
172137 ) : (
@@ -179,75 +144,80 @@ const RecipientList = (props) => {
179144 </ span >
180145 </ div >
181146 < div
182- style = { {
183- display : "flex" ,
184- flexDirection : obj . Name ? "column" : "row" ,
185- alignItems : "center"
186- } }
147+ className = { `${
148+ obj ?. Name ? "flex-col" : "flex-row"
149+ } flex items-center`}
187150 >
188151 { obj . Name ? (
189- < span className = { "userName" } > { obj . Name } </ span >
152+ < span
153+ className = { `${
154+ ( ! isMobile && isHover === ind ) ||
155+ props . isSelectListId === ind
156+ ? "text-[#424242]"
157+ : "text-base-content"
158+ } text-[12px] font-bold w-[100px] whitespace-nowrap overflow-hidden text-ellipsis`}
159+ >
160+ { obj . Name }
161+ </ span >
190162 ) : (
191- < >
192- < span
193- className = "userName"
194- style = { { cursor : "pointer" } }
195- onClick = { ( ) => {
196- setIsEdit ( { [ obj . Id ] : true } ) ;
197- props . setRoleName ( obj . Role ) ;
198- } }
199- >
200- { isEdit ?. [ obj . Id ] && props . handleRoleChange ? (
201- < input
202- ref = { inputRef }
203- style = { {
204- backgroundColor : "transparent" ,
205- width : "inherit" ,
206- padding : "3px"
207- } }
208- value = { obj . Role }
209- onChange = { ( e ) => props . handleRoleChange ( e , obj . Id ) }
210- onBlur = { ( ) => {
211- setIsEdit ( { } ) ;
212- props . handleOnBlur ( obj . Role , obj . Id ) ;
213- } }
214- onKeyDown = { ( e ) => {
215- if ( e . key === "Enter" ) {
216- e . preventDefault ( ) ;
217- inputRef . current . blur ( ) ;
218- }
219- } }
220- />
221- ) : (
222- < span style = { { padding : "3px" } } > { obj . Role } </ span >
223- ) }
224- </ span >
225- </ >
163+ < span
164+ className = { `${
165+ ( ! isMobile && isHover === ind ) ||
166+ props . isSelectListId === ind
167+ ? "text-[#424242]"
168+ : "text-base-content"
169+ } text-[12px] font-bold w-[100px] whitespace-nowrap overflow-hidden text-ellipsis cursor-pointer`}
170+ onClick = { ( ) => {
171+ setIsEdit ( { [ obj . Id ] : true } ) ;
172+ props . setRoleName ( obj . Role ) ;
173+ } }
174+ >
175+ { isEdit ?. [ obj . Id ] && props . handleRoleChange ? (
176+ < input
177+ ref = { inputRef }
178+ className = "bg-transparent p-[3px"
179+ value = { obj . Role }
180+ onChange = { ( e ) => props . handleRoleChange ( e , obj . Id ) }
181+ onBlur = { ( ) => {
182+ setIsEdit ( { } ) ;
183+ props . handleOnBlur ( obj . Role , obj . Id ) ;
184+ } }
185+ onKeyDown = { ( e ) => {
186+ if ( e . key === "Enter" ) {
187+ e . preventDefault ( ) ;
188+ inputRef . current . blur ( ) ;
189+ }
190+ } }
191+ />
192+ ) : (
193+ < span className = "p-[3px]" > { obj . Role } </ span >
194+ ) }
195+ </ span >
226196 ) }
227197 { obj . Name && (
228- < span className = { "useEmail" } >
198+ < span
199+ className = { ` ${
200+ ( ! isMobile && isHover === ind ) ||
201+ props . isSelectListId === ind
202+ ? "text-[#424242]"
203+ : "text-base-content"
204+ } text-[10px] font-medium w-[100px] whitespace-nowrap overflow-hidden text-ellipsis`}
205+ >
229206 { obj ?. Role || obj ?. Email }
230207 </ span >
231208 ) }
232209 </ div >
233210 </ div >
234211 { isMobile && props . sendInOrder && (
235- < div
236- style = { {
237- display : "flex" ,
238- flexDirection : "row" ,
239- alignItems : "center" ,
240- gap : 5
241- } }
242- >
212+ < div className = "flex flex-row items-center gap-[5px]" >
243213 < div
244214 onClick = { ( e ) => {
245215 if ( ind !== 0 ) {
246216 e . stopPropagation ( ) ;
247217 handleChangeSequence ( e , ind , "up" ) ;
248218 }
249219 } }
250- style = { { color : ind === 0 ? "gray" : "black" } }
220+ className = { ind === 0 ? "text-[ gray] " : "text- black" }
251221 >
252222 ▲
253223 </ div >
@@ -258,10 +228,11 @@ const RecipientList = (props) => {
258228 handleChangeSequence ( e , ind , null , "down" ) ;
259229 }
260230 } }
261- style = { {
262- color :
263- ind === props . signersdata . length - 1 ? "gray" : "black"
264- } }
231+ className = {
232+ ind === props . signersdata . length - 1
233+ ? "text-[gray]"
234+ : "text-black"
235+ }
265236 >
266237 ▼
267238 </ div >
@@ -273,7 +244,12 @@ const RecipientList = (props) => {
273244 e . stopPropagation ( ) ;
274245 props . handleDeleteUser ( obj . Id ) ;
275246 } }
276- style = { { cursor : "pointer" , marginLeft : "5px" } }
247+ className = { `${
248+ ( ! isMobile && isHover === ind ) ||
249+ props . isSelectListId === ind
250+ ? "text-[#424242]"
251+ : "text-base-content"
252+ } cursor-pointer ml-[5px]`}
277253 >
278254 < i className = "fa-regular fa-trash-can" > </ i >
279255 </ div >
0 commit comments