@elice/material-survey 1.240718.0-trasncript.2 → 1.240718.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/components/markdown-editor/index.d.ts +2 -1
- package/cjs/components/markdown-editor/index.js +10 -19
- package/cjs/components/material-survey/MaterialSurvey.js +57 -82
- package/cjs/components/material-survey/MaterialSurveyInfo.js +59 -69
- package/cjs/components/material-survey/MaterialSurveySelectMultiple.js +90 -131
- package/cjs/components/material-survey/MaterialSurveySelectOne.js +86 -125
- package/cjs/components/material-survey/MaterialSurveyShimmer.js +40 -47
- package/cjs/components/material-survey/MaterialSurveyText.js +75 -114
- package/cjs/components/material-survey/SurveyResultBadge.js +10 -17
- package/cjs/components/material-survey/SurveySubmitStatusText.js +16 -21
- package/cjs/components/material-survey/context/MaterialSurveyContext.d.ts +1 -1
- package/cjs/components/material-survey/context/MaterialSurveyContext.js +74 -115
- package/cjs/components/material-survey-edit/MaterialSurveyEdit.js +36 -49
- package/cjs/components/material-survey-edit/MaterialSurveyEditContent.js +91 -113
- package/cjs/components/material-survey-edit/MaterialSurveyEditOptionSelect.js +87 -100
- package/cjs/components/material-survey-edit/context.js +2 -8
- package/cjs/components/material-survey-edit/utils/editValue.js +11 -17
- package/cjs/components/shared/StyledMarkdown.js +1 -5
- package/cjs/components/shared/SurveyContentBox.js +74 -85
- package/cjs/components/shared/question-checkbox/QuestionCheckbox.js +7 -13
- package/cjs/components/shared/question-checkbox/QuestionCheckboxContext.d.ts +1 -1
- package/cjs/components/shared/question-checkbox/QuestionCheckboxContext.js +17 -24
- package/cjs/components/shared/question-checkbox/QuestionCheckboxOption.js +89 -66
- package/cjs/components/shared/question-radio/QuestionRadio.js +7 -13
- package/cjs/components/shared/question-radio/QuestionRadioContext.d.ts +1 -1
- package/cjs/components/shared/question-radio/QuestionRadioContext.js +17 -24
- package/cjs/components/shared/question-radio/QuestionRadioOption.js +80 -59
- package/es/components/markdown-editor/index.d.ts +2 -1
- package/es/components/markdown-editor/index.js +10 -15
- package/es/components/material-survey/MaterialSurvey.js +57 -77
- package/es/components/material-survey/MaterialSurveyInfo.js +59 -65
- package/es/components/material-survey/MaterialSurveySelectMultiple.js +90 -127
- package/es/components/material-survey/MaterialSurveySelectOne.js +86 -121
- package/es/components/material-survey/MaterialSurveyShimmer.js +40 -43
- package/es/components/material-survey/MaterialSurveyText.js +75 -109
- package/es/components/material-survey/SurveyResultBadge.js +10 -13
- package/es/components/material-survey/SurveySubmitStatusText.js +16 -17
- package/es/components/material-survey/context/MaterialSurveyContext.d.ts +1 -1
- package/es/components/material-survey/context/MaterialSurveyContext.js +75 -112
- package/es/components/material-survey-edit/MaterialSurveyEdit.js +36 -45
- package/es/components/material-survey-edit/MaterialSurveyEditContent.js +90 -107
- package/es/components/material-survey-edit/MaterialSurveyEditOptionSelect.js +87 -96
- package/es/components/material-survey-edit/context.js +2 -4
- package/es/components/material-survey-edit/utils/editValue.js +11 -17
- package/es/components/shared/StyledMarkdown.js +1 -1
- package/es/components/shared/SurveyContentBox.js +74 -81
- package/es/components/shared/question-checkbox/QuestionCheckbox.js +7 -9
- package/es/components/shared/question-checkbox/QuestionCheckboxContext.d.ts +1 -1
- package/es/components/shared/question-checkbox/QuestionCheckboxContext.js +17 -20
- package/es/components/shared/question-checkbox/QuestionCheckboxOption.js +89 -61
- package/es/components/shared/question-radio/QuestionRadio.js +7 -9
- package/es/components/shared/question-radio/QuestionRadioContext.d.ts +1 -1
- package/es/components/shared/question-radio/QuestionRadioContext.js +17 -20
- package/es/components/shared/question-radio/QuestionRadioOption.js +80 -54
- package/package.json +12 -9
- package/cjs/_virtual/_rollupPluginBabelHelpers.js +0 -399
- package/cjs/components/material-survey/index.js +0 -9
- package/cjs/components/material-survey/locales/index.js +0 -13
- package/cjs/components/material-survey-edit/index.js +0 -7
- package/cjs/components/material-survey-edit/locales/index.js +0 -13
- package/cjs/components/shared/index.js +0 -13
- package/es/_virtual/_rollupPluginBabelHelpers.js +0 -386
- package/es/components/material-survey/index.js +0 -2
- package/es/components/material-survey/locales/index.js +0 -4
- package/es/components/material-survey-edit/index.js +0 -1
- package/es/components/material-survey-edit/locales/index.js +0 -4
- package/es/components/shared/index.js +0 -4
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
1
|
import React, { forwardRef } from 'react';
|
|
3
2
|
import { useForm, FormProvider } from 'react-hook-form';
|
|
4
3
|
import { RawEliceIntlProvider, IntlComponentBuilder } from '@elice/intl';
|
|
@@ -12,28 +11,29 @@ import MaterialSurveyEditContent from './MaterialSurveyEditContent.js';
|
|
|
12
11
|
//
|
|
13
12
|
//
|
|
14
13
|
//
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
14
|
+
const MaterialSurveyEdit = forwardRef(({
|
|
15
|
+
value,
|
|
16
|
+
disabled = false,
|
|
17
|
+
onChange,
|
|
18
|
+
onFormStateChange,
|
|
19
|
+
onFileUploadRequest,
|
|
20
|
+
__intl
|
|
21
|
+
}, ref) => {
|
|
22
|
+
const formElRef = React.useRef(null);
|
|
23
|
+
const useFormMethods = useForm({
|
|
25
24
|
defaultValues: manipulateValue(value),
|
|
26
25
|
mode: 'onBlur'
|
|
27
26
|
});
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
isDirty
|
|
31
|
-
isValid
|
|
27
|
+
const watchedMaterialSurveyEditValue = useFormMethods.watch();
|
|
28
|
+
const {
|
|
29
|
+
isDirty,
|
|
30
|
+
isValid
|
|
31
|
+
} = useFormMethods.formState;
|
|
32
32
|
//
|
|
33
33
|
// Reset from value, when `value` changes.
|
|
34
34
|
// TODO: will be removed, since `CourseLecturesMaterialTemplate` removed at `elice-web`.
|
|
35
35
|
//
|
|
36
|
-
useDeepClonedCompareEffect(
|
|
36
|
+
useDeepClonedCompareEffect(() => {
|
|
37
37
|
useFormMethods.reset(manipulateValue(value), {
|
|
38
38
|
keepDirty: true,
|
|
39
39
|
keepErrors: true,
|
|
@@ -47,17 +47,15 @@ var MaterialSurveyEdit = forwardRef(function (_ref, ref) {
|
|
|
47
47
|
// Emit `onChange` handler when form value changed.
|
|
48
48
|
// TODO: will be removed, since `CourseLecturesMaterialTemplate` removed at `elice-web`.
|
|
49
49
|
//
|
|
50
|
-
useDeepClonedCompareEffect(
|
|
51
|
-
return onChange(restoreValue(watchedMaterialSurveyEditValue));
|
|
52
|
-
}, [watchedMaterialSurveyEditValue]);
|
|
50
|
+
useDeepClonedCompareEffect(() => onChange(restoreValue(watchedMaterialSurveyEditValue)), [watchedMaterialSurveyEditValue]);
|
|
53
51
|
//
|
|
54
52
|
// Emit `onFormStateChange` handler when form state change.
|
|
55
53
|
//
|
|
56
|
-
React.useEffect(
|
|
54
|
+
React.useEffect(() => {
|
|
57
55
|
if (typeof onFormStateChange === 'function') {
|
|
58
56
|
onFormStateChange({
|
|
59
|
-
isDirty
|
|
60
|
-
isValid
|
|
57
|
+
isDirty,
|
|
58
|
+
isValid
|
|
61
59
|
});
|
|
62
60
|
}
|
|
63
61
|
},
|
|
@@ -66,32 +64,25 @@ var MaterialSurveyEdit = forwardRef(function (_ref, ref) {
|
|
|
66
64
|
//
|
|
67
65
|
// Set ref.
|
|
68
66
|
//
|
|
69
|
-
React.useImperativeHandle(ref,
|
|
70
|
-
|
|
71
|
-
reset
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
});
|
|
76
|
-
}, [useFormMethods, value]);
|
|
67
|
+
React.useImperativeHandle(ref, () => Object.assign(Object.assign({}, formElRef.current), {
|
|
68
|
+
reset: () => {
|
|
69
|
+
useFormMethods.reset(manipulateValue(value));
|
|
70
|
+
void useFormMethods.trigger();
|
|
71
|
+
}
|
|
72
|
+
}), [useFormMethods, value]);
|
|
77
73
|
//
|
|
78
74
|
//
|
|
79
75
|
//
|
|
80
|
-
return
|
|
81
|
-
value: __intl
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
children: jsx(MaterialSurveyEditContent, {})
|
|
91
|
-
}))
|
|
92
|
-
})
|
|
93
|
-
})
|
|
94
|
-
});
|
|
76
|
+
return React.createElement(RawEliceIntlProvider, {
|
|
77
|
+
value: __intl
|
|
78
|
+
}, React.createElement("form", {
|
|
79
|
+
ref: formElRef
|
|
80
|
+
}, React.createElement(MaterialSurveyEditContext.Provider, {
|
|
81
|
+
value: {
|
|
82
|
+
disabled,
|
|
83
|
+
onFileUploadRequest
|
|
84
|
+
}
|
|
85
|
+
}, React.createElement(FormProvider, Object.assign({}, useFormMethods), React.createElement(MaterialSurveyEditContent, null)))));
|
|
95
86
|
});
|
|
96
87
|
var MaterialSurveyEdit$1 = new IntlComponentBuilder(MaterialSurveyEdit).add('en', messageEn).add('ko', messageKo).addAsync('th', import('./locales/th.json.js')).addAsync('ja', import('./locales/ja.json.js')).build();
|
|
97
88
|
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
3
1
|
import React from 'react';
|
|
4
2
|
import { useFormContext, Controller } from 'react-hook-form';
|
|
5
3
|
import { FormInputVerticalLayout, Label, Input, Tooltip, Select, Vspace } from '@elice/blocks';
|
|
@@ -11,29 +9,28 @@ import { createRandomId } from './utils/randomId.js';
|
|
|
11
9
|
import { useMaterialSurveyEditContext } from './context.js';
|
|
12
10
|
import OptionSelectOne from './MaterialSurveyEditOptionSelect.js';
|
|
13
11
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
12
|
+
const MIN_TEXT_LENGTH = 1;
|
|
13
|
+
const MAX_TEXT_LENGTH = 128;
|
|
14
|
+
const StyledSurveyOptionTypeSelectWrap = styled.div.withConfig({
|
|
17
15
|
componentId: "sc-r4ms68-0"
|
|
18
16
|
})(["display:flex;max-width:12rem;"]);
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
disabled
|
|
23
|
-
onFileUploadRequest
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
watchedOptionInfo = _watch2[1];
|
|
17
|
+
const MaterialSurveyEditContent = () => {
|
|
18
|
+
const intl = useRawEliceIntl();
|
|
19
|
+
const {
|
|
20
|
+
disabled,
|
|
21
|
+
onFileUploadRequest
|
|
22
|
+
} = useMaterialSurveyEditContext();
|
|
23
|
+
const {
|
|
24
|
+
control,
|
|
25
|
+
watch,
|
|
26
|
+
setValue
|
|
27
|
+
} = useFormContext();
|
|
28
|
+
const [watchedOptionType, watchedOptionInfo] = watch(['questionInfoList.0.optionType', 'questionInfoList.0.optionInfo']);
|
|
32
29
|
//
|
|
33
30
|
// Change `optionInfo` according to `optionType`.
|
|
34
31
|
//
|
|
35
|
-
React.useEffect(
|
|
36
|
-
|
|
32
|
+
React.useEffect(() => {
|
|
33
|
+
const get = () => {
|
|
37
34
|
switch (watchedOptionType) {
|
|
38
35
|
case enums.SurveyOptionType.SelectOne:
|
|
39
36
|
case enums.SurveyOptionType.SelectMultiple:
|
|
@@ -68,7 +65,7 @@ var MaterialSurveyEditContent = function MaterialSurveyEditContent() {
|
|
|
68
65
|
* Input of option info and answer info,
|
|
69
66
|
* according to option type.
|
|
70
67
|
*/
|
|
71
|
-
|
|
68
|
+
const Option = React.useMemo(() => {
|
|
72
69
|
switch (watchedOptionType) {
|
|
73
70
|
case enums.SurveyOptionType.SelectOne:
|
|
74
71
|
case enums.SurveyOptionType.SelectMultiple:
|
|
@@ -81,16 +78,15 @@ var MaterialSurveyEditContent = function MaterialSurveyEditContent() {
|
|
|
81
78
|
/**
|
|
82
79
|
* Render input for survey title.
|
|
83
80
|
*/
|
|
84
|
-
|
|
85
|
-
return
|
|
86
|
-
label:
|
|
81
|
+
const renderQuestionTitleInput = () => {
|
|
82
|
+
return React.createElement(FormInputVerticalLayout, {
|
|
83
|
+
label: React.createElement(Label, {
|
|
87
84
|
size: "small",
|
|
88
|
-
required: true
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
input: jsx(Controller, {
|
|
85
|
+
required: true
|
|
86
|
+
}, intl.formatMessage({
|
|
87
|
+
id: 'content.title'
|
|
88
|
+
})),
|
|
89
|
+
input: React.createElement(Controller, {
|
|
94
90
|
control: control,
|
|
95
91
|
name: "questionInfoList.0.questionTitle",
|
|
96
92
|
rules: {
|
|
@@ -119,11 +115,12 @@ var MaterialSurveyEditContent = function MaterialSurveyEditContent() {
|
|
|
119
115
|
})
|
|
120
116
|
}
|
|
121
117
|
},
|
|
122
|
-
render:
|
|
123
|
-
|
|
124
|
-
|
|
118
|
+
render: ({
|
|
119
|
+
field,
|
|
120
|
+
fieldState
|
|
121
|
+
}) => {
|
|
125
122
|
var _a;
|
|
126
|
-
return
|
|
123
|
+
return React.createElement(Input, Object.assign({
|
|
127
124
|
size: "small",
|
|
128
125
|
width: "full",
|
|
129
126
|
minLength: MIN_TEXT_LENGTH,
|
|
@@ -141,93 +138,79 @@ var MaterialSurveyEditContent = function MaterialSurveyEditContent() {
|
|
|
141
138
|
/**
|
|
142
139
|
* Render input for survey description.
|
|
143
140
|
*/
|
|
144
|
-
|
|
145
|
-
return
|
|
146
|
-
label:
|
|
147
|
-
size: "small"
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
input: jsx(Controller, {
|
|
141
|
+
const renderQuestionDescriptionInput = () => {
|
|
142
|
+
return React.createElement(FormInputVerticalLayout, {
|
|
143
|
+
label: React.createElement(Label, {
|
|
144
|
+
size: "small"
|
|
145
|
+
}, intl.formatMessage({
|
|
146
|
+
id: 'content.description.title'
|
|
147
|
+
})),
|
|
148
|
+
input: React.createElement(Controller, {
|
|
153
149
|
control: control,
|
|
154
150
|
name: "questionInfoList.0.questionDescription",
|
|
155
|
-
render:
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
}
|
|
151
|
+
render: ({
|
|
152
|
+
field
|
|
153
|
+
}) => React.createElement(MarkdownEditor, Object.assign({
|
|
154
|
+
placeholder: intl.formatMessage({
|
|
155
|
+
id: 'content.description.placeholder'
|
|
156
|
+
}),
|
|
157
|
+
onFileUploadRequest: onFileUploadRequest
|
|
158
|
+
}, field))
|
|
164
159
|
})
|
|
165
160
|
});
|
|
166
161
|
};
|
|
167
162
|
/**
|
|
168
163
|
* Render input of option type, option info and answer info.
|
|
169
164
|
*/
|
|
170
|
-
|
|
171
|
-
return
|
|
172
|
-
label:
|
|
165
|
+
const renderOptionInput = () => {
|
|
166
|
+
return React.createElement(FormInputVerticalLayout, {
|
|
167
|
+
label: React.createElement(Label, {
|
|
173
168
|
size: "small",
|
|
174
|
-
required: true
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
})
|
|
214
|
-
})]
|
|
215
|
-
}))
|
|
216
|
-
})
|
|
217
|
-
});
|
|
218
|
-
}
|
|
219
|
-
}), jsx(Vspace, {
|
|
220
|
-
height: 0.5
|
|
221
|
-
}), jsx(Option, {})]
|
|
222
|
-
})
|
|
169
|
+
required: true
|
|
170
|
+
}, intl.formatMessage({
|
|
171
|
+
id: 'content.option.title'
|
|
172
|
+
})),
|
|
173
|
+
input: React.createElement(React.Fragment, null, React.createElement(Controller, {
|
|
174
|
+
control: control,
|
|
175
|
+
name: "questionInfoList.0.optionType",
|
|
176
|
+
render: ({
|
|
177
|
+
field
|
|
178
|
+
}) => React.createElement(Tooltip, {
|
|
179
|
+
title: disabled ? intl.formatMessage({
|
|
180
|
+
id: 'content.option.tooltip.disabled'
|
|
181
|
+
}) : undefined,
|
|
182
|
+
placement: "top-end"
|
|
183
|
+
}, React.createElement(StyledSurveyOptionTypeSelectWrap, null, React.createElement(Select, Object.assign({
|
|
184
|
+
size: "small",
|
|
185
|
+
width: "small",
|
|
186
|
+
readOnly: disabled
|
|
187
|
+
}, field, {
|
|
188
|
+
onChange: v => field.onChange(Number(v))
|
|
189
|
+
}), React.createElement("option", {
|
|
190
|
+
value: enums.SurveyOptionType.SelectOne,
|
|
191
|
+
children: intl.formatMessage({
|
|
192
|
+
id: 'content.option.select.items.selectOne'
|
|
193
|
+
})
|
|
194
|
+
}), React.createElement("option", {
|
|
195
|
+
value: enums.SurveyOptionType.SelectMultiple,
|
|
196
|
+
children: intl.formatMessage({
|
|
197
|
+
id: 'content.option.select.items.selectMultiple'
|
|
198
|
+
})
|
|
199
|
+
}), React.createElement("option", {
|
|
200
|
+
value: enums.SurveyOptionType.Text,
|
|
201
|
+
children: intl.formatMessage({
|
|
202
|
+
id: 'content.option.select.items.text'
|
|
203
|
+
})
|
|
204
|
+
}))))
|
|
205
|
+
}), React.createElement(Vspace, {
|
|
206
|
+
height: 0.5
|
|
207
|
+
}), React.createElement(Option, null))
|
|
223
208
|
});
|
|
224
209
|
};
|
|
225
210
|
//
|
|
226
211
|
//
|
|
227
212
|
//
|
|
228
|
-
return
|
|
229
|
-
children: [renderQuestionTitleInput(), renderQuestionDescriptionInput(), renderOptionInput()]
|
|
230
|
-
});
|
|
213
|
+
return React.createElement(React.Fragment, null, renderQuestionTitleInput(), renderQuestionDescriptionInput(), renderOptionInput());
|
|
231
214
|
};
|
|
232
215
|
|
|
233
216
|
export { MaterialSurveyEditContent as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { useFormContext, useFieldArray, Controller } from 'react-hook-form';
|
|
3
3
|
import { Input, Tooltip, IconButton, Vspace, Button, Icon } from '@elice/blocks';
|
|
4
4
|
import { eilMathsignMultiplyBasic, eilMathsignAddCircle } from '@elice/icons';
|
|
@@ -7,32 +7,35 @@ import styled from 'styled-components';
|
|
|
7
7
|
import { createRandomId } from './utils/randomId.js';
|
|
8
8
|
import { useMaterialSurveyEditContext } from './context.js';
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
const MIN_OPTION_INFO_COUNT = 2;
|
|
11
|
+
const MAX_OPTION_INFO_COUNT = 20;
|
|
12
|
+
const StyledWrap = styled.div.withConfig({
|
|
13
13
|
componentId: "sc-1eiyk6z-0"
|
|
14
14
|
})([""]);
|
|
15
|
-
|
|
15
|
+
const StyledInputGroup = styled.div.withConfig({
|
|
16
16
|
componentId: "sc-1eiyk6z-1"
|
|
17
17
|
})(["width:100%;.eb-input{margin-bottom:0.5rem;&:last-of-type{margin-bottom:0;}}"]);
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
disabled
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
18
|
+
const OptionSelectOne = () => {
|
|
19
|
+
const intl = useRawEliceIntl();
|
|
20
|
+
const {
|
|
21
|
+
disabled
|
|
22
|
+
} = useMaterialSurveyEditContext();
|
|
23
|
+
const {
|
|
24
|
+
control
|
|
25
|
+
} = useFormContext();
|
|
26
|
+
const {
|
|
27
|
+
fields: optionInfoFields,
|
|
28
|
+
append: appendOptionInfoFieldItem,
|
|
29
|
+
remove: removeOptionInfoFieldItem
|
|
30
|
+
} = useFieldArray({
|
|
31
|
+
name: 'questionInfoList.0.optionInfo',
|
|
32
|
+
keyName: 'id',
|
|
33
|
+
shouldUnregister: true
|
|
34
|
+
});
|
|
32
35
|
/**
|
|
33
36
|
* Append option info.
|
|
34
37
|
*/
|
|
35
|
-
|
|
38
|
+
const appendOptionInfo = () => {
|
|
36
39
|
appendOptionInfoFieldItem({
|
|
37
40
|
id: createRandomId(),
|
|
38
41
|
value: ''
|
|
@@ -41,88 +44,76 @@ var OptionSelectOne = function OptionSelectOne() {
|
|
|
41
44
|
/**
|
|
42
45
|
* Remove item from option info at index.
|
|
43
46
|
*/
|
|
44
|
-
|
|
47
|
+
const removeOptionInfo = index => {
|
|
45
48
|
removeOptionInfoFieldItem(index);
|
|
46
49
|
};
|
|
47
50
|
//
|
|
48
51
|
//
|
|
49
52
|
//
|
|
50
|
-
return
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
id: 'option.common.select.errorMessage.required'
|
|
62
|
-
})
|
|
63
|
-
}
|
|
64
|
-
},
|
|
65
|
-
render: function render(_ref2) {
|
|
66
|
-
var field = _ref2.field,
|
|
67
|
-
fieldState = _ref2.fieldState;
|
|
68
|
-
var _a;
|
|
69
|
-
return jsx(Input, Object.assign({
|
|
70
|
-
size: "small",
|
|
71
|
-
width: "full",
|
|
72
|
-
placeholder: intl.formatMessage({
|
|
73
|
-
id: 'option.common.select.placeholder'
|
|
74
|
-
}),
|
|
75
|
-
suffix: jsx(Tooltip, {
|
|
76
|
-
title: optionInfoFields.length <= MIN_OPTION_INFO_COUNT ? intl.formatMessage({
|
|
77
|
-
id: 'option.common.select.tooltip.minOptionInfoItem'
|
|
78
|
-
}) : undefined,
|
|
79
|
-
placement: "top-start",
|
|
80
|
-
children: jsx("span", {
|
|
81
|
-
children: jsx(IconButton, {
|
|
82
|
-
icon: eilMathsignMultiplyBasic,
|
|
83
|
-
role: "grey9",
|
|
84
|
-
size: "tiny",
|
|
85
|
-
border: false,
|
|
86
|
-
transparent: true,
|
|
87
|
-
disabled: optionInfoFields.length <= MIN_OPTION_INFO_COUNT || disabled,
|
|
88
|
-
onClick: function onClick() {
|
|
89
|
-
return removeOptionInfo(index);
|
|
90
|
-
}
|
|
91
|
-
})
|
|
92
|
-
})
|
|
93
|
-
}),
|
|
94
|
-
readOnly: disabled,
|
|
95
|
-
invalid: fieldState.invalid,
|
|
96
|
-
invalidText: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message
|
|
97
|
-
}, field));
|
|
98
|
-
}
|
|
99
|
-
}, id);
|
|
100
|
-
})
|
|
101
|
-
}), jsx(Vspace, {
|
|
102
|
-
height: 0.5
|
|
103
|
-
}), jsx(Tooltip, {
|
|
104
|
-
title: optionInfoFields.length >= MAX_OPTION_INFO_COUNT ? intl.formatMessage({
|
|
105
|
-
id: 'option.common.select.tooltip.maxOptionInfoItem'
|
|
106
|
-
}) : undefined,
|
|
107
|
-
placement: "bottom",
|
|
108
|
-
children: jsx("span", {
|
|
109
|
-
children: jsx(Button, {
|
|
110
|
-
block: true,
|
|
111
|
-
size: "micro",
|
|
112
|
-
borderDashed: true,
|
|
113
|
-
transparent: true,
|
|
114
|
-
icon: jsx(Icon, {
|
|
115
|
-
icon: eilMathsignAddCircle
|
|
116
|
-
}),
|
|
117
|
-
disabled: optionInfoFields.length >= MAX_OPTION_INFO_COUNT || disabled,
|
|
118
|
-
onClick: appendOptionInfo,
|
|
119
|
-
children: intl.formatMessage({
|
|
120
|
-
id: 'option.common.select.addButton'
|
|
121
|
-
})
|
|
53
|
+
return React.createElement(StyledWrap, null, React.createElement(StyledInputGroup, null, optionInfoFields.map(({
|
|
54
|
+
id
|
|
55
|
+
}, index) => React.createElement(Controller, {
|
|
56
|
+
key: id,
|
|
57
|
+
control: control,
|
|
58
|
+
name: `questionInfoList.0.optionInfo.${index}.value`,
|
|
59
|
+
rules: {
|
|
60
|
+
required: {
|
|
61
|
+
value: true,
|
|
62
|
+
message: intl.formatMessage({
|
|
63
|
+
id: 'option.common.select.errorMessage.required'
|
|
122
64
|
})
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
render: ({
|
|
68
|
+
field,
|
|
69
|
+
fieldState
|
|
70
|
+
}) => {
|
|
71
|
+
var _a;
|
|
72
|
+
return React.createElement(Input, Object.assign({
|
|
73
|
+
size: "small",
|
|
74
|
+
width: "full",
|
|
75
|
+
placeholder: intl.formatMessage({
|
|
76
|
+
id: 'option.common.select.placeholder'
|
|
77
|
+
}),
|
|
78
|
+
suffix: React.createElement(Tooltip, {
|
|
79
|
+
title: optionInfoFields.length <= MIN_OPTION_INFO_COUNT ? intl.formatMessage({
|
|
80
|
+
id: 'option.common.select.tooltip.minOptionInfoItem'
|
|
81
|
+
}) : undefined,
|
|
82
|
+
placement: "top-start"
|
|
83
|
+
}, React.createElement("span", null, React.createElement(IconButton, {
|
|
84
|
+
icon: eilMathsignMultiplyBasic,
|
|
85
|
+
role: "grey9",
|
|
86
|
+
size: "tiny",
|
|
87
|
+
border: false,
|
|
88
|
+
transparent: true,
|
|
89
|
+
disabled: optionInfoFields.length <= MIN_OPTION_INFO_COUNT || disabled,
|
|
90
|
+
onClick: () => removeOptionInfo(index)
|
|
91
|
+
}))),
|
|
92
|
+
readOnly: disabled,
|
|
93
|
+
invalid: fieldState.invalid,
|
|
94
|
+
invalidText: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message
|
|
95
|
+
}, field));
|
|
96
|
+
}
|
|
97
|
+
}))), React.createElement(Vspace, {
|
|
98
|
+
height: 0.5
|
|
99
|
+
}), React.createElement(Tooltip, {
|
|
100
|
+
title: optionInfoFields.length >= MAX_OPTION_INFO_COUNT ? intl.formatMessage({
|
|
101
|
+
id: 'option.common.select.tooltip.maxOptionInfoItem'
|
|
102
|
+
}) : undefined,
|
|
103
|
+
placement: "bottom"
|
|
104
|
+
}, React.createElement("span", null, React.createElement(Button, {
|
|
105
|
+
block: true,
|
|
106
|
+
size: "micro",
|
|
107
|
+
borderDashed: true,
|
|
108
|
+
transparent: true,
|
|
109
|
+
icon: React.createElement(Icon, {
|
|
110
|
+
icon: eilMathsignAddCircle
|
|
111
|
+
}),
|
|
112
|
+
disabled: optionInfoFields.length >= MAX_OPTION_INFO_COUNT || disabled,
|
|
113
|
+
onClick: appendOptionInfo
|
|
114
|
+
}, intl.formatMessage({
|
|
115
|
+
id: 'option.common.select.addButton'
|
|
116
|
+
})))));
|
|
126
117
|
};
|
|
127
118
|
|
|
128
119
|
export { OptionSelectOne as default };
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
return React.useContext(MaterialSurveyEditContext);
|
|
6
|
-
};
|
|
3
|
+
const MaterialSurveyEditContext = React.createContext(null);
|
|
4
|
+
const useMaterialSurveyEditContext = () => React.useContext(MaterialSurveyEditContext);
|
|
7
5
|
|
|
8
6
|
export { MaterialSurveyEditContext as default, useMaterialSurveyEditContext };
|
|
@@ -5,18 +5,14 @@ import { createRandomId } from './randomId.js';
|
|
|
5
5
|
*/
|
|
6
6
|
function manipulateValue(v) {
|
|
7
7
|
return Object.assign(Object.assign({}, v), {
|
|
8
|
-
questionInfoList: v.questionInfoList.map(
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
};
|
|
17
|
-
}) : []
|
|
18
|
-
});
|
|
19
|
-
})
|
|
8
|
+
questionInfoList: v.questionInfoList.map(questionInfo => Object.assign(Object.assign({}, questionInfo), {
|
|
9
|
+
// convert string array to object array
|
|
10
|
+
// - ref: https://github.com/react-hook-form/react-hook-form/issues/7622#issuecomment-1018893318
|
|
11
|
+
optionInfo: Array.isArray(questionInfo.optionInfo) ? questionInfo.optionInfo.map(option => ({
|
|
12
|
+
id: createRandomId(),
|
|
13
|
+
value: option
|
|
14
|
+
})) : []
|
|
15
|
+
}))
|
|
20
16
|
});
|
|
21
17
|
}
|
|
22
18
|
/**
|
|
@@ -24,12 +20,10 @@ function manipulateValue(v) {
|
|
|
24
20
|
*/
|
|
25
21
|
function restoreValue(v) {
|
|
26
22
|
return Object.assign(Object.assign({}, v), {
|
|
27
|
-
questionInfoList: v.questionInfoList.map(
|
|
23
|
+
questionInfoList: v.questionInfoList.map(questionInfo => {
|
|
28
24
|
var _a;
|
|
29
|
-
|
|
30
|
-
optionInfo: ((_a = questionInfo.optionInfo) === null || _a === void 0 ? void 0 : _a.length) ? questionInfo.optionInfo.map(
|
|
31
|
-
return option.value;
|
|
32
|
-
}) : null
|
|
25
|
+
const newQuestionInfo = Object.assign(Object.assign({}, questionInfo), {
|
|
26
|
+
optionInfo: ((_a = questionInfo.optionInfo) === null || _a === void 0 ? void 0 : _a.length) ? questionInfo.optionInfo.map(option => option.value) : null
|
|
33
27
|
});
|
|
34
28
|
if (!newQuestionInfo.optionInfo) {
|
|
35
29
|
delete newQuestionInfo.optionInfo;
|