@@ -3,7 +3,7 @@ import * as React from 'react';
3
3
import AceEditor from 'react-ace' ;
4
4
5
5
import { IAssessment , IMCQQuestion } from '../../assessment/assessmentShape' ;
6
- import { assignToPath , getValueFromPath } from './' ;
6
+ import { assignToPath , getValueFromPath , limitNumberRange } from './' ;
7
7
import TextareaContent from './TextareaContent' ;
8
8
9
9
interface IProps {
@@ -12,9 +12,18 @@ interface IProps {
12
12
updateAssessment : ( assessment : IAssessment ) => void ;
13
13
}
14
14
15
- export class QuestionTemplateTab extends React . Component < IProps , { } > {
15
+ interface IState {
16
+ templateValue : string ;
17
+ templateFocused : boolean ;
18
+ }
19
+
20
+ export class QuestionTemplateTab extends React . Component < IProps , IState > {
16
21
public constructor ( props : IProps ) {
17
22
super ( props ) ;
23
+ this . state = {
24
+ templateValue : '' ,
25
+ templateFocused : false
26
+ } ;
18
27
}
19
28
20
29
public render ( ) {
@@ -34,30 +43,60 @@ export class QuestionTemplateTab extends React.Component<IProps, {}> {
34
43
const path = [ 'questions' , this . props . questionId , 'answer' ] ;
35
44
36
45
const handleTemplateChange = ( newCode : string ) => {
37
- const assessmentVal = this . props . assessment ;
38
- assignToPath ( path , newCode , assessmentVal ) ;
39
- this . props . updateAssessment ( assessmentVal ) ;
46
+ this . setState ( {
47
+ templateValue : newCode
48
+ } ) ;
40
49
} ;
41
50
51
+ const value = this . state . templateFocused
52
+ ? this . state . templateValue
53
+ : getValueFromPath ( path , this . props . assessment ) ;
54
+
42
55
const display = (
43
- < AceEditor
44
- className = "react-ace"
45
- editorProps = { {
46
- $blockScrolling : Infinity
47
- } }
48
- fontSize = { 14 }
49
- highlightActiveLine = { false }
50
- mode = "javascript"
51
- onChange = { handleTemplateChange }
52
- theme = "cobalt"
53
- value = { getValueFromPath ( path , this . props . assessment ) }
54
- width = "100%"
55
- />
56
+ < div onClick = { this . focusEditor ( path ) } onBlur = { this . unFocusEditor ( path ) } >
57
+ < AceEditor
58
+ className = "react-ace"
59
+ editorProps = { {
60
+ $blockScrolling : Infinity
61
+ } }
62
+ fontSize = { 14 }
63
+ highlightActiveLine = { false }
64
+ mode = "javascript"
65
+ onChange = { handleTemplateChange }
66
+ theme = "cobalt"
67
+ value = { value }
68
+ width = "100%"
69
+ />
70
+ </ div >
56
71
) ;
57
72
58
73
return display ;
59
74
} ;
60
75
76
+ private focusEditor = ( path : Array < string | number > ) => ( e : any ) : void => {
77
+ if ( ! this . state . templateFocused ) {
78
+ this . setState ( {
79
+ templateValue : getValueFromPath ( path , this . props . assessment ) ,
80
+ templateFocused : true
81
+ } ) ;
82
+ }
83
+ } ;
84
+
85
+ private unFocusEditor = ( path : Array < string | number > ) => ( e : any ) : void => {
86
+ if ( this . state . templateFocused ) {
87
+ const value = getValueFromPath ( path , this . props . assessment ) ;
88
+ if ( value !== this . state . templateValue ) {
89
+ const assessmentVal = this . props . assessment ;
90
+ assignToPath ( path , this . state . templateValue , assessmentVal ) ;
91
+ this . props . updateAssessment ( assessmentVal ) ;
92
+ }
93
+ this . setState ( {
94
+ templateValue : '' ,
95
+ templateFocused : false
96
+ } ) ;
97
+ }
98
+ } ;
99
+
61
100
private mcqTab = ( ) => {
62
101
const questionId = this . props . questionId ;
63
102
const question = this . props . assessment ! . questions [ questionId ] as IMCQQuestion ;
@@ -87,17 +126,27 @@ export class QuestionTemplateTab extends React.Component<IProps, {}> {
87
126
private textareaContent = (
88
127
path : Array < string | number > ,
89
128
isNumber : boolean = false ,
90
- numberRange : number [ ] = [ 0 ]
129
+ range : number [ ] = [ 0 ]
91
130
) => {
92
- return (
93
- < TextareaContent
94
- assessment = { this . props . assessment }
95
- isNumber = { isNumber }
96
- numberRange = { numberRange }
97
- path = { path }
98
- updateAssessment = { this . props . updateAssessment }
99
- />
100
- ) ;
131
+ if ( isNumber ) {
132
+ return (
133
+ < TextareaContent
134
+ assessment = { this . props . assessment }
135
+ isNumber = { true }
136
+ path = { path }
137
+ processResults = { limitNumberRange ( range [ 0 ] , range [ 1 ] ) }
138
+ updateAssessment = { this . props . updateAssessment }
139
+ />
140
+ ) ;
141
+ } else {
142
+ return (
143
+ < TextareaContent
144
+ assessment = { this . props . assessment }
145
+ path = { path }
146
+ updateAssessment = { this . props . updateAssessment }
147
+ />
148
+ ) ;
149
+ }
101
150
} ;
102
151
}
103
152
0 commit comments