1+ import React , { useState , useContext , useEffect } from 'react' ;
2+ import Modal from 'react-modal'
3+ import AppContext from "../components/AppContext" ;
4+
5+ const ModalVectorStep = ( { show, handleOK, handleCancel, vectorstepmmlist, title} ) => {
6+ const { GetLocaleString } = useContext ( AppContext ) ;
7+ const [ SelectedStep , setSelectedStep ] = useState ( 0 ) ;
8+ const [ Name , setName ] = useState ( 'New' ) ;
9+ const [ Stepmm , setStepmm ] = useState ( 2.5 ) ;
10+ console . log ( "modal" ) ;
11+ console . log ( vectorstepmmlist ) ;
12+ const [ CustomStepmmList , setCustomStepmmList ] = useState ( [ ...vectorstepmmlist ] || [ ] ) ;
13+ const [ Message , setMessage ] = useState ( "" ) ;
14+
15+ useEffect ( ( ) => {
16+ console . log ( vectorstepmmlist ) ;
17+ if ( CustomStepmmList . length === 0 )
18+ {
19+ setCustomStepmmList ( [ ...vectorstepmmlist ] || [ ] ) ;
20+ if ( vectorstepmmlist && vectorstepmmlist . length > 0 )
21+ {
22+ setName ( vectorstepmmlist [ 0 ] . name ) ;
23+ setStepmm ( vectorstepmmlist [ 0 ] . step ) ;
24+ }
25+ }
26+
27+ return ( ( ) => { } ) ;
28+ } , [ CustomStepmmList ] ) ;
29+
30+ const render_lock = ( locked ) => {
31+ return locked ? String . fromCodePoint ( 0x1f512 ) : " " ;
32+
33+ }
34+
35+ const onOk = ( ) => {
36+ if ( handleOK )
37+ handleOK ( CustomStepmmList ) ;
38+ }
39+ const onCancel = ( ) => {
40+ if ( handleCancel )
41+ handleCancel ( ) ;
42+ }
43+ const onAdd = ( ) => {
44+
45+ let data = { name : Name , step : Stepmm , lock : false } ;
46+ setCustomStepmmList ( [ ...CustomStepmmList , data ] ) ;
47+
48+ }
49+ const onUpdate = ( ) =>
50+ {
51+ let index = parseInt ( SelectedStep ) ;
52+ let option = [ ...CustomStepmmList ] ;
53+ let data = { name : Name , step : Stepmm , lock : false } ;
54+ if ( ! option [ index ] . lock )
55+ {
56+ option [ index ] = data ;
57+ setCustomStepmmList ( option ) ;
58+ }
59+ else {
60+ setMessage ( GetLocaleString ( "param.modal.updatelocked" ) ) ;
61+ }
62+
63+ }
64+ const onDelete = ( ) => {
65+ if ( SelectedStep >= 0 ) {
66+ if ( CustomStepmmList [ SelectedStep ] . lock === false ) {
67+ let data = [ ...CustomStepmmList ] ;
68+ data . splice ( SelectedStep , 1 ) ;
69+ setCustomStepmmList ( data ) ;
70+ }
71+ else
72+ {
73+ setMessage ( GetLocaleString ( "param.modal.updatelocked" ) ) ;
74+ }
75+ }
76+ }
77+ const onDuplicate = ( ) => {
78+ if ( SelectedStep >= 0 ) {
79+ let data = [ ...CustomStepmmList ] ;
80+ let elem = { ...data [ SelectedStep ] } ;
81+ elem . name += " Copy" ;
82+ elem . lock = false ;
83+ data . push ( elem ) ;
84+ setCustomStepmmList ( data ) ;
85+
86+ }
87+ }
88+
89+ const render_message = ( ) => {
90+ if ( Message . length > 0 )
91+ return ( < div className = 'content' >
92+ < div class = "alert alert-danger alert-white rounded" >
93+ { Message }
94+ < button type = "button" class = "close"
95+ data-dismiss = "alert"
96+ aria-hidden = "true"
97+ onClick = { ( ) => { setMessage ( "" ) } } > ×</ button >
98+ < div class = "icon" > < i class = "fa fa-check" > </ i > </ div >
99+ </ div >
100+
101+ </ div > ) ;
102+ return ( < div className = 'content' >
103+
104+ < div class = "rounded" >
105+
106+
107+ < div class = "icon" > < i class = "fa fa-check" > </ i > </ div >
108+ </ div >
109+ </ div > )
110+ }
111+
112+ return (
113+
114+ < div
115+ tabIndex = { 0 }
116+ onKeyUp = { ( e ) => {
117+ e . stopPropagation ( ) ;
118+ console . log ( e ) ;
119+ if ( e . key === "Escape" )
120+ onCancel ( )
121+ else if ( e . key === 'Enter' )
122+ onOk ( ) ;
123+ } } >
124+ < Modal
125+ isOpen = { show }
126+ contentLabel = "Toto"
127+ aria = { { hidden : false , label : ' ' } }
128+ onRequestClose = { ( ) => { onCancel ( ) } }
129+ >
130+
131+ < div className = 'MakeColumn100' >
132+
133+ < div >
134+ < h2 > { title ? title : "" } </ h2 >
135+ < select
136+ onChange = { ( e ) => {
137+ console . log ( e ) ;
138+ let index = parseInt ( e . target . value ) ;
139+ setStepmm ( CustomStepmmList [ index ] . step ) ;
140+ console . log ( CustomStepmmList [ index ] ) ;
141+ setName ( CustomStepmmList [ index ] . name ) ;
142+ setSelectedStep ( index ) ;
143+ } }
144+ value = { SelectedStep }
145+ id = "steplist"
146+ name = "steplist"
147+ className = 'select_modal'
148+ size = "6"
149+ >
150+ { CustomStepmmList . map ( ( item , index ) => {
151+ if ( SelectedStep === index )
152+ return ( < option aria-selected = { true } key = { item . name } value = { index } > { render_lock ( item . lock ) } { item . name } ({ item . step } mm)</ option > ) ;
153+ else
154+ return ( < option aria-selected = { false } key = { item . name } value = { index } > { render_lock ( item . lock ) } { item . name } ({ item . step } mm)</ option > ) ;
155+ } )
156+ }
157+ </ select >
158+ </ div >
159+ < div >
160+ < div className = 'pure-form pure-form-aligned' >
161+ { render_message ( ) }
162+ < div className = 'pure-control-group' >
163+ < legend > { GetLocaleString ( "param.modal.details" ) } </ legend >
164+ < fieldset >
165+ < label for = 'myInputWUDiag' >
166+ { GetLocaleString ( "param.usable.diag.material" ) } :
167+ </ label >
168+ < input type = "text"
169+ defaultValue = { Name }
170+ value = { Name }
171+ name = "myInputNameDiag"
172+ id = "myInputNameDiag"
173+
174+ onChange = { ( e ) => {
175+ //this.handleChangePaper('usablewidth', e.target.value);
176+ setName ( e . target . value ) ;
177+ } }
178+ style = { { width : "12em" } }
179+ /> < br />
180+ < label for = 'myInputWUDiag' >
181+ { GetLocaleString ( "param.diag.stepmm" ) } (mm):
182+ </ label >
183+ < input type = "number"
184+ min = { 100 }
185+ max = { 420 }
186+ defaultValue = { Stepmm }
187+ value = { Stepmm }
188+ name = "myInputWUDiag"
189+ id = "myInputWUDiag"
190+
191+ onChange = { ( e ) => {
192+ //this.handleChangePaper('usablewidth', e.target.value);
193+ setStepmm ( e . target . value ) ;
194+ } }
195+ style = { { width : "5em" } }
196+ /> < br />
197+
198+
199+
200+
201+ </ fieldset >
202+
203+ < fieldset >
204+ < button className = "pad-button pure-button"
205+ onClick = { ( ) => { onAdd ( ) } }
206+ >
207+ { GetLocaleString ( "param.modal.add" ) }
208+ </ button >
209+ < button className = "pad-button pure-button"
210+ onClick = { ( ) => { onDelete ( ) } }
211+ >
212+ { GetLocaleString ( "param.modal.delete" ) }
213+ </ button >
214+ < button className = "pad-button pure-button"
215+ onClick = { ( ) => { onUpdate ( ) } }
216+ >
217+ { GetLocaleString ( "param.modal.update" ) }
218+ </ button >
219+ < button className = "pad-button pure-button"
220+ onClick = { ( ) => { onDuplicate ( ) } }
221+ >
222+ { GetLocaleString ( "param.modal.duplicate" ) }
223+ </ button >
224+ </ fieldset >
225+ < fieldset >
226+ < button className = "pad-button pure-button"
227+ onClick = { ( ) => { onOk ( ) } }
228+ >
229+ { GetLocaleString ( "param.modal.ok" ) }
230+
231+ </ button >
232+ < button className = "pad-button pure-button"
233+ onClick = { ( ) => { onCancel ( ) } }
234+ >
235+ { GetLocaleString ( "param.modal.cancel" ) }
236+
237+ </ button >
238+ </ fieldset >
239+
240+ </ div >
241+ </ div >
242+ </ div >
243+ </ div >
244+ </ Modal >
245+ </ div >
246+ ) ;
247+ }
248+ export default ModalVectorStep ;
0 commit comments