@elice/material-survey 1.230328.0 → 1.230418.0
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/_virtual/_rollupPluginBabelHelpers.js +409 -0
- package/cjs/components/material-survey/MaterialSurvey.i18n.js +2 -2
- package/cjs/components/material-survey/MaterialSurvey.js +56 -51
- package/cjs/components/material-survey/MaterialSurveyInfo.js +6 -5
- package/cjs/components/material-survey/MaterialSurveySelectMultiple.js +117 -91
- package/cjs/components/material-survey/MaterialSurveySelectOne.js +110 -81
- package/cjs/components/material-survey/MaterialSurveyShimmer.js +13 -12
- package/cjs/components/material-survey/MaterialSurveyText.js +111 -80
- package/cjs/components/material-survey/SurveyResultBadge.js +9 -8
- package/cjs/components/material-survey/SurveySubmitStatusText.js +6 -8
- package/cjs/components/material-survey/context/MaterialSurveyContext.js +102 -79
- package/cjs/components/material-survey-edit/MaterialSurveyEdit.js +45 -38
- package/cjs/components/material-survey-edit/MaterialSurveyEditContent.js +79 -83
- package/cjs/components/material-survey-edit/MaterialSurveyEditOptionSelect.js +71 -76
- package/cjs/components/material-survey-edit/context.js +4 -2
- package/cjs/components/material-survey-edit/locales.js +2 -2
- package/cjs/components/material-survey-edit/utils/editValue.js +17 -16
- package/cjs/components/shared/StyledMarkdown.js +4 -2
- package/cjs/components/shared/SurveyContentBox.js +48 -54
- package/cjs/components/shared/question-checkbox/QuestionCheckbox.js +7 -9
- package/cjs/components/shared/question-checkbox/QuestionCheckboxContext.js +15 -18
- package/cjs/components/shared/question-checkbox/QuestionCheckboxOption.js +48 -103
- package/cjs/components/shared/question-radio/QuestionRadio.js +7 -9
- package/cjs/components/shared/question-radio/QuestionRadioContext.js +15 -18
- package/cjs/components/shared/question-radio/QuestionRadioOption.js +41 -87
- package/cjs/helpers/index.js +0 -3
- package/cjs/index.js +7 -7
- package/es/_virtual/_rollupPluginBabelHelpers.js +394 -0
- package/es/components/material-survey/MaterialSurvey.i18n.js +2 -2
- package/es/components/material-survey/MaterialSurvey.js +51 -46
- package/es/components/material-survey/MaterialSurveyInfo.js +3 -4
- package/es/components/material-survey/MaterialSurveySelectMultiple.js +109 -85
- package/es/components/material-survey/MaterialSurveySelectOne.js +102 -75
- package/es/components/material-survey/MaterialSurveyShimmer.js +10 -11
- package/es/components/material-survey/MaterialSurveyText.js +106 -77
- package/es/components/material-survey/SurveyResultBadge.js +6 -7
- package/es/components/material-survey/SurveySubmitStatusText.js +3 -7
- package/es/components/material-survey/context/MaterialSurveyContext.js +103 -80
- package/es/components/material-survey-edit/MaterialSurveyEdit.js +41 -36
- package/es/components/material-survey-edit/MaterialSurveyEditContent.js +75 -81
- package/es/components/material-survey-edit/MaterialSurveyEditOptionSelect.js +68 -75
- package/es/components/material-survey-edit/context.js +4 -2
- package/es/components/material-survey-edit/locales.js +2 -2
- package/es/components/material-survey-edit/utils/editValue.js +17 -16
- package/es/components/shared/StyledMarkdown.js +1 -1
- package/es/components/shared/SurveyContentBox.js +48 -54
- package/es/components/shared/question-checkbox/QuestionCheckbox.js +4 -8
- package/es/components/shared/question-checkbox/QuestionCheckboxContext.js +15 -18
- package/es/components/shared/question-checkbox/QuestionCheckboxOption.js +45 -102
- package/es/components/shared/question-radio/QuestionRadio.js +4 -8
- package/es/components/shared/question-radio/QuestionRadioContext.js +15 -18
- package/es/components/shared/question-radio/QuestionRadioOption.js +38 -86
- package/es/helpers/index.js +0 -3
- package/package.json +8 -8
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
1
2
|
import React from 'react';
|
|
2
3
|
import { useFormContext, Controller } from 'react-hook-form';
|
|
3
4
|
import { useIntl, FormattedMessage } from 'react-intl';
|
|
@@ -9,33 +10,34 @@ import { createRandomId } from './utils/randomId.js';
|
|
|
9
10
|
import { useMaterialSurveyEditContext } from './context.js';
|
|
10
11
|
import OptionSelectOne from './MaterialSurveyEditOptionSelect.js';
|
|
11
12
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
var MIN_TEXT_LENGTH = 1;
|
|
14
|
+
var MAX_TEXT_LENGTH = 128;
|
|
15
|
+
var StyledSurveyOptionTypeSelectWrap = styled.div.withConfig({
|
|
15
16
|
componentId: "sc-r4ms68-0"
|
|
16
17
|
})(["display:flex;max-width:12rem;"]);
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
18
|
+
var MaterialSurveyEditContent = function MaterialSurveyEditContent() {
|
|
19
|
+
var intl = useIntl();
|
|
20
|
+
var _useMaterialSurveyEdi = useMaterialSurveyEditContext(),
|
|
21
|
+
disabled = _useMaterialSurveyEdi.disabled,
|
|
22
|
+
onFileUploadRequest = _useMaterialSurveyEdi.onFileUploadRequest;
|
|
23
|
+
var _useFormContext = useFormContext(),
|
|
24
|
+
control = _useFormContext.control,
|
|
25
|
+
watch = _useFormContext.watch,
|
|
26
|
+
setValue = _useFormContext.setValue;
|
|
27
|
+
var _watch = watch(['questionInfoList.0.optionType', 'questionInfoList.0.optionInfo']),
|
|
28
|
+
_watch2 = _slicedToArray(_watch, 2),
|
|
29
|
+
watchedOptionType = _watch2[0],
|
|
30
|
+
watchedOptionInfo = _watch2[1];
|
|
31
|
+
//
|
|
30
32
|
// Change `optionInfo` according to `optionType`.
|
|
31
33
|
//
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
const get = () => {
|
|
34
|
+
React.useEffect(function () {
|
|
35
|
+
var get = function get() {
|
|
35
36
|
switch (watchedOptionType) {
|
|
36
37
|
case enums.SurveyOptionType.SelectOne:
|
|
37
38
|
case enums.SurveyOptionType.SelectMultiple:
|
|
38
|
-
return watchedOptionInfo.length > 0 ? watchedOptionInfo :
|
|
39
|
+
return watchedOptionInfo.length > 0 ? watchedOptionInfo :
|
|
40
|
+
// add default option info
|
|
39
41
|
[{
|
|
40
42
|
id: createRandomId(),
|
|
41
43
|
value: intl.formatMessage({
|
|
@@ -51,29 +53,25 @@ const MaterialSurveyEditContent = () => {
|
|
|
51
53
|
number: 2
|
|
52
54
|
})
|
|
53
55
|
}];
|
|
54
|
-
|
|
55
56
|
case enums.SurveyOptionType.Text:
|
|
56
57
|
return [];
|
|
57
|
-
|
|
58
58
|
default:
|
|
59
59
|
return [];
|
|
60
60
|
}
|
|
61
61
|
};
|
|
62
|
-
|
|
63
62
|
setValue('questionInfoList.0.optionInfo', get());
|
|
64
|
-
},
|
|
63
|
+
},
|
|
64
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
65
65
|
[watchedOptionType, setValue, intl]);
|
|
66
66
|
/**
|
|
67
67
|
* Input of option info and answer info,
|
|
68
68
|
* according to option type.
|
|
69
69
|
*/
|
|
70
|
-
|
|
71
|
-
const Option = React.useMemo(() => {
|
|
70
|
+
var Option = React.useMemo(function () {
|
|
72
71
|
switch (watchedOptionType) {
|
|
73
72
|
case enums.SurveyOptionType.SelectOne:
|
|
74
73
|
case enums.SurveyOptionType.SelectMultiple:
|
|
75
74
|
return OptionSelectOne;
|
|
76
|
-
|
|
77
75
|
case enums.SurveyOptionType.Text:
|
|
78
76
|
default:
|
|
79
77
|
return React.Fragment;
|
|
@@ -82,8 +80,7 @@ const MaterialSurveyEditContent = () => {
|
|
|
82
80
|
/**
|
|
83
81
|
* Render input for survey title.
|
|
84
82
|
*/
|
|
85
|
-
|
|
86
|
-
const renderQuestionTitleInput = () => {
|
|
83
|
+
var renderQuestionTitleInput = function renderQuestionTitleInput() {
|
|
87
84
|
return React.createElement(FormInputVerticalLayout, {
|
|
88
85
|
label: React.createElement(Label, {
|
|
89
86
|
size: "small",
|
|
@@ -120,12 +117,10 @@ const MaterialSurveyEditContent = () => {
|
|
|
120
117
|
})
|
|
121
118
|
}
|
|
122
119
|
},
|
|
123
|
-
render: ({
|
|
124
|
-
field,
|
|
125
|
-
|
|
126
|
-
}) => {
|
|
120
|
+
render: function render(_ref) {
|
|
121
|
+
var field = _ref.field,
|
|
122
|
+
fieldState = _ref.fieldState;
|
|
127
123
|
var _a;
|
|
128
|
-
|
|
129
124
|
return React.createElement(Input, Object.assign({
|
|
130
125
|
size: "small",
|
|
131
126
|
width: "full",
|
|
@@ -144,9 +139,7 @@ const MaterialSurveyEditContent = () => {
|
|
|
144
139
|
/**
|
|
145
140
|
* Render input for survey description.
|
|
146
141
|
*/
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
const renderQuestionDescriptionInput = () => {
|
|
142
|
+
var renderQuestionDescriptionInput = function renderQuestionDescriptionInput() {
|
|
150
143
|
return React.createElement(FormInputVerticalLayout, {
|
|
151
144
|
label: React.createElement(Label, {
|
|
152
145
|
size: "small"
|
|
@@ -156,24 +149,23 @@ const MaterialSurveyEditContent = () => {
|
|
|
156
149
|
input: React.createElement(Controller, {
|
|
157
150
|
control: control,
|
|
158
151
|
name: "questionInfoList.0.questionDescription",
|
|
159
|
-
render: ({
|
|
160
|
-
field
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
152
|
+
render: function render(_ref2) {
|
|
153
|
+
var field = _ref2.field;
|
|
154
|
+
return React.createElement(MarkdownEditor, Object.assign({
|
|
155
|
+
enableFooter: true,
|
|
156
|
+
placeholder: intl.formatMessage({
|
|
157
|
+
id: 'content.description.placeholder'
|
|
158
|
+
}),
|
|
159
|
+
onFileUploadRequest: onFileUploadRequest
|
|
160
|
+
}, field));
|
|
161
|
+
}
|
|
168
162
|
})
|
|
169
163
|
});
|
|
170
164
|
};
|
|
171
165
|
/**
|
|
172
166
|
* Render input of option type, option info and answer info.
|
|
173
167
|
*/
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
const renderOptionInput = () => {
|
|
168
|
+
var renderOptionInput = function renderOptionInput() {
|
|
177
169
|
return React.createElement(FormInputVerticalLayout, {
|
|
178
170
|
label: React.createElement(Label, {
|
|
179
171
|
size: "small",
|
|
@@ -184,44 +176,46 @@ const MaterialSurveyEditContent = () => {
|
|
|
184
176
|
input: React.createElement(React.Fragment, null, React.createElement(Controller, {
|
|
185
177
|
control: control,
|
|
186
178
|
name: "questionInfoList.0.optionType",
|
|
187
|
-
render: ({
|
|
188
|
-
field
|
|
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
|
-
|
|
179
|
+
render: function render(_ref3) {
|
|
180
|
+
var field = _ref3.field;
|
|
181
|
+
return React.createElement(Tooltip, {
|
|
182
|
+
title: disabled ? intl.formatMessage({
|
|
183
|
+
id: 'content.option.tooltip.disabled'
|
|
184
|
+
}) : undefined,
|
|
185
|
+
placement: "top-end"
|
|
186
|
+
}, React.createElement(StyledSurveyOptionTypeSelectWrap, null, React.createElement(Select, Object.assign({
|
|
187
|
+
size: "small",
|
|
188
|
+
width: "small",
|
|
189
|
+
readOnly: disabled
|
|
190
|
+
}, field, {
|
|
191
|
+
onChange: function onChange(v) {
|
|
192
|
+
return field.onChange(Number(v));
|
|
193
|
+
}
|
|
194
|
+
}), React.createElement("option", {
|
|
195
|
+
value: enums.SurveyOptionType.SelectOne,
|
|
196
|
+
children: intl.formatMessage({
|
|
197
|
+
id: 'content.option.select.items.selectOne'
|
|
198
|
+
})
|
|
199
|
+
}), React.createElement("option", {
|
|
200
|
+
value: enums.SurveyOptionType.SelectMultiple,
|
|
201
|
+
children: intl.formatMessage({
|
|
202
|
+
id: 'content.option.select.items.selectMultiple'
|
|
203
|
+
})
|
|
204
|
+
}), React.createElement("option", {
|
|
205
|
+
value: enums.SurveyOptionType.Text,
|
|
206
|
+
children: intl.formatMessage({
|
|
207
|
+
id: 'content.option.select.items.text'
|
|
208
|
+
})
|
|
209
|
+
}))));
|
|
210
|
+
}
|
|
216
211
|
}), React.createElement(Vspace, {
|
|
217
212
|
height: 0.5
|
|
218
213
|
}), React.createElement(Option, null))
|
|
219
214
|
});
|
|
220
|
-
};
|
|
215
|
+
};
|
|
216
|
+
//
|
|
221
217
|
//
|
|
222
218
|
//
|
|
223
|
-
|
|
224
|
-
|
|
225
219
|
return React.createElement(React.Fragment, null, renderQuestionTitleInput(), renderQuestionDescriptionInput(), renderOptionInput());
|
|
226
220
|
};
|
|
227
221
|
|
|
@@ -7,37 +7,32 @@ 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
|
+
var MIN_OPTION_INFO_COUNT = 2;
|
|
11
|
+
var MAX_OPTION_INFO_COUNT = 20;
|
|
12
|
+
var StyledWrap = styled.div.withConfig({
|
|
13
13
|
componentId: "sc-1eiyk6z-0"
|
|
14
14
|
})([""]);
|
|
15
|
-
|
|
15
|
+
var 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
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
name: 'questionInfoList.0.optionInfo',
|
|
33
|
-
keyName: 'id',
|
|
34
|
-
shouldUnregister: true
|
|
35
|
-
});
|
|
18
|
+
var OptionSelectOne = function OptionSelectOne() {
|
|
19
|
+
var intl = useIntl();
|
|
20
|
+
var _useMaterialSurveyEdi = useMaterialSurveyEditContext(),
|
|
21
|
+
disabled = _useMaterialSurveyEdi.disabled;
|
|
22
|
+
var _useFormContext = useFormContext(),
|
|
23
|
+
control = _useFormContext.control;
|
|
24
|
+
var _useFieldArray = useFieldArray({
|
|
25
|
+
name: 'questionInfoList.0.optionInfo',
|
|
26
|
+
keyName: 'id',
|
|
27
|
+
shouldUnregister: true
|
|
28
|
+
}),
|
|
29
|
+
optionInfoFields = _useFieldArray.fields,
|
|
30
|
+
appendOptionInfoFieldItem = _useFieldArray.append,
|
|
31
|
+
removeOptionInfoFieldItem = _useFieldArray.remove;
|
|
36
32
|
/**
|
|
37
33
|
* Append option info.
|
|
38
34
|
*/
|
|
39
|
-
|
|
40
|
-
const appendOptionInfo = () => {
|
|
35
|
+
var appendOptionInfo = function appendOptionInfo() {
|
|
41
36
|
appendOptionInfoFieldItem({
|
|
42
37
|
id: createRandomId(),
|
|
43
38
|
value: ''
|
|
@@ -46,61 +41,59 @@ const OptionSelectOne = () => {
|
|
|
46
41
|
/**
|
|
47
42
|
* Remove item from option info at index.
|
|
48
43
|
*/
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
const removeOptionInfo = index => {
|
|
44
|
+
var removeOptionInfo = function removeOptionInfo(index) {
|
|
52
45
|
removeOptionInfoFieldItem(index);
|
|
53
|
-
};
|
|
46
|
+
};
|
|
54
47
|
//
|
|
55
48
|
//
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
}
|
|
49
|
+
//
|
|
50
|
+
return React.createElement(StyledWrap, null, React.createElement(StyledInputGroup, null, optionInfoFields.map(function (_ref, index) {
|
|
51
|
+
var id = _ref.id;
|
|
52
|
+
return React.createElement(Controller, {
|
|
53
|
+
key: id,
|
|
54
|
+
control: control,
|
|
55
|
+
name: "questionInfoList.0.optionInfo.".concat(index, ".value"),
|
|
56
|
+
rules: {
|
|
57
|
+
required: {
|
|
58
|
+
value: true,
|
|
59
|
+
message: intl.formatMessage({
|
|
60
|
+
id: 'option.common.select.errorMessage.required'
|
|
61
|
+
})
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
render: function render(_ref2) {
|
|
65
|
+
var field = _ref2.field,
|
|
66
|
+
fieldState = _ref2.fieldState;
|
|
67
|
+
var _a;
|
|
68
|
+
return React.createElement(Input, Object.assign({
|
|
69
|
+
size: "small",
|
|
70
|
+
width: "full",
|
|
71
|
+
placeholder: intl.formatMessage({
|
|
72
|
+
id: 'option.common.select.placeholder'
|
|
73
|
+
}),
|
|
74
|
+
suffix: React.createElement(Tooltip, {
|
|
75
|
+
title: optionInfoFields.length <= MIN_OPTION_INFO_COUNT ? intl.formatMessage({
|
|
76
|
+
id: 'option.common.select.tooltip.minOptionInfoItem'
|
|
77
|
+
}) : undefined,
|
|
78
|
+
placement: "top-start"
|
|
79
|
+
}, React.createElement("span", null, React.createElement(IconButton, {
|
|
80
|
+
icon: eilMathsignMultiplyBasic,
|
|
81
|
+
role: "grey9",
|
|
82
|
+
size: "tiny",
|
|
83
|
+
border: false,
|
|
84
|
+
transparent: true,
|
|
85
|
+
disabled: optionInfoFields.length <= MIN_OPTION_INFO_COUNT || disabled,
|
|
86
|
+
onClick: function onClick() {
|
|
87
|
+
return removeOptionInfo(index);
|
|
88
|
+
}
|
|
89
|
+
}))),
|
|
90
|
+
readOnly: disabled,
|
|
91
|
+
invalid: fieldState.invalid,
|
|
92
|
+
invalidText: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message
|
|
93
|
+
}, field));
|
|
70
94
|
}
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
field,
|
|
74
|
-
fieldState
|
|
75
|
-
}) => {
|
|
76
|
-
var _a;
|
|
77
|
-
|
|
78
|
-
return React.createElement(Input, Object.assign({
|
|
79
|
-
size: "small",
|
|
80
|
-
width: "full",
|
|
81
|
-
placeholder: intl.formatMessage({
|
|
82
|
-
id: 'option.common.select.placeholder'
|
|
83
|
-
}),
|
|
84
|
-
suffix: React.createElement(Tooltip, {
|
|
85
|
-
title: optionInfoFields.length <= MIN_OPTION_INFO_COUNT ? intl.formatMessage({
|
|
86
|
-
id: 'option.common.select.tooltip.minOptionInfoItem'
|
|
87
|
-
}) : undefined,
|
|
88
|
-
placement: "top-start"
|
|
89
|
-
}, React.createElement("span", null, React.createElement(IconButton, {
|
|
90
|
-
icon: eilMathsignMultiplyBasic,
|
|
91
|
-
role: "grey9",
|
|
92
|
-
size: "tiny",
|
|
93
|
-
border: false,
|
|
94
|
-
transparent: true,
|
|
95
|
-
disabled: optionInfoFields.length <= MIN_OPTION_INFO_COUNT || disabled,
|
|
96
|
-
onClick: () => removeOptionInfo(index)
|
|
97
|
-
}))),
|
|
98
|
-
readOnly: disabled,
|
|
99
|
-
invalid: fieldState.invalid,
|
|
100
|
-
invalidText: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message
|
|
101
|
-
}, field));
|
|
102
|
-
}
|
|
103
|
-
}))), React.createElement(Vspace, {
|
|
95
|
+
});
|
|
96
|
+
})), React.createElement(Vspace, {
|
|
104
97
|
height: 0.5
|
|
105
98
|
}), React.createElement(Tooltip, {
|
|
106
99
|
title: optionInfoFields.length >= MAX_OPTION_INFO_COUNT ? intl.formatMessage({
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
var MaterialSurveyEditContext = React.createContext(null);
|
|
4
|
+
var useMaterialSurveyEditContext = function useMaterialSurveyEditContext() {
|
|
5
|
+
return React.useContext(MaterialSurveyEditContext);
|
|
6
|
+
};
|
|
5
7
|
|
|
6
8
|
export { MaterialSurveyEditContext as default, useMaterialSurveyEditContext };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
var en = {
|
|
2
2
|
'common.option': '옵션 {number}',
|
|
3
3
|
'common.errorMessage.range': '{min} ~ {max}자 이내로 입력해주세요.',
|
|
4
4
|
'content.title': '질문',
|
|
@@ -17,7 +17,7 @@ const en = {
|
|
|
17
17
|
'option.common.select.tooltip.maxOptionInfoItem': '선택지는 20개 초과하여 입력할 수 없습니다.',
|
|
18
18
|
'option.common.select.addButton': '보기 추가'
|
|
19
19
|
};
|
|
20
|
-
|
|
20
|
+
var ko = {
|
|
21
21
|
'common.option': '옵션 {number}',
|
|
22
22
|
'common.errorMessage.range': '{min} ~ {max}자 이내로 입력해주세요.',
|
|
23
23
|
'content.title': '질문',
|
|
@@ -3,36 +3,37 @@ import { createRandomId } from './randomId.js';
|
|
|
3
3
|
/**
|
|
4
4
|
*
|
|
5
5
|
*/
|
|
6
|
-
|
|
7
6
|
function manipulateValue(v) {
|
|
8
7
|
return Object.assign(Object.assign({}, v), {
|
|
9
|
-
questionInfoList: v.questionInfoList.map(
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
8
|
+
questionInfoList: v.questionInfoList.map(function (questionInfo) {
|
|
9
|
+
return Object.assign(Object.assign({}, questionInfo), {
|
|
10
|
+
// convert string array to object array
|
|
11
|
+
// - ref: https://github.com/react-hook-form/react-hook-form/issues/7622#issuecomment-1018893318
|
|
12
|
+
optionInfo: Array.isArray(questionInfo.optionInfo) ? questionInfo.optionInfo.map(function (option) {
|
|
13
|
+
return {
|
|
14
|
+
id: createRandomId(),
|
|
15
|
+
value: option
|
|
16
|
+
};
|
|
17
|
+
}) : []
|
|
18
|
+
});
|
|
19
|
+
})
|
|
17
20
|
});
|
|
18
21
|
}
|
|
19
22
|
/**
|
|
20
23
|
* Restore manipulation from `manipulateValue()`.
|
|
21
24
|
*/
|
|
22
|
-
|
|
23
25
|
function restoreValue(v) {
|
|
24
26
|
return Object.assign(Object.assign({}, v), {
|
|
25
|
-
questionInfoList: v.questionInfoList.map(questionInfo
|
|
27
|
+
questionInfoList: v.questionInfoList.map(function (questionInfo) {
|
|
26
28
|
var _a;
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
29
|
+
var newQuestionInfo = Object.assign(Object.assign({}, questionInfo), {
|
|
30
|
+
optionInfo: ((_a = questionInfo.optionInfo) === null || _a === void 0 ? void 0 : _a.length) ? questionInfo.optionInfo.map(function (option) {
|
|
31
|
+
return option.value;
|
|
32
|
+
}) : null
|
|
30
33
|
});
|
|
31
|
-
|
|
32
34
|
if (!newQuestionInfo.optionInfo) {
|
|
33
35
|
delete newQuestionInfo.optionInfo;
|
|
34
36
|
}
|
|
35
|
-
|
|
36
37
|
return newQuestionInfo;
|
|
37
38
|
})
|
|
38
39
|
});
|
|
@@ -6,78 +6,72 @@ import { base } from '@elice/design-tokens';
|
|
|
6
6
|
import styled from 'styled-components';
|
|
7
7
|
import { useMaterialSurveyState } from '../material-survey/context/MaterialSurveyContext.js';
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
var StyledQuestionBox = styled.div.withConfig({
|
|
10
10
|
componentId: "sc-h8ztvr-0"
|
|
11
|
-
})(["display:flex;flex-direction:column;border-radius:", ";overflow:hidden;width:100%;max-height:", ";min-height:", ";"], ({
|
|
12
|
-
vertical
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
hasFooter
|
|
17
|
-
}
|
|
18
|
-
|
|
11
|
+
})(["display:flex;flex-direction:column;border-radius:", ";overflow:hidden;width:100%;max-height:", ";min-height:", ";"], function (_ref) {
|
|
12
|
+
var vertical = _ref.vertical;
|
|
13
|
+
return vertical ? '0' : '8px';
|
|
14
|
+
}, function (_ref2) {
|
|
15
|
+
var hasFooter = _ref2.hasFooter;
|
|
16
|
+
return hasFooter ? '100%' : '';
|
|
17
|
+
}, function (_ref3) {
|
|
18
|
+
var hasFooter = _ref3.hasFooter;
|
|
19
|
+
return hasFooter ? '' : '100%';
|
|
20
|
+
});
|
|
21
|
+
var StyledQuestionBoxHeader = styled.div.withConfig({
|
|
19
22
|
componentId: "sc-h8ztvr-1"
|
|
20
23
|
})(["display:flex;justify-content:space-between;background-color:", ";padding:1rem 1.5rem;flex:none;height:3.5rem;"], base.color.navy6);
|
|
21
|
-
|
|
24
|
+
var StyledQuestionBoxBody = styled.div.withConfig({
|
|
22
25
|
componentId: "sc-h8ztvr-2"
|
|
23
|
-
})(["padding:1.5rem;background-color:", ";flex:auto;", "})"], base.color.navy7, ({
|
|
24
|
-
hasFooter
|
|
25
|
-
|
|
26
|
-
|
|
26
|
+
})(["padding:1.5rem;background-color:", ";flex:auto;", "})"], base.color.navy7, function (_ref4) {
|
|
27
|
+
var hasFooter = _ref4.hasFooter;
|
|
28
|
+
return hasFooter ? 'height: 100%; overflow-y: auto;' : '';
|
|
29
|
+
});
|
|
30
|
+
var StyledQuestionBoxFooter = styled.div.withConfig({
|
|
27
31
|
componentId: "sc-h8ztvr-3"
|
|
28
|
-
})(["flex:none;display:flex;justify-content:space-between;align-items:center;padding:0.75rem 1.5rem;background-color:", ";", ""], base.color.navy6, ({
|
|
29
|
-
vertical
|
|
30
|
-
|
|
31
|
-
return vertical ? `
|
|
32
|
-
flex-direction: column;
|
|
33
|
-
align-items: flex-start;
|
|
34
|
-
` : '';
|
|
32
|
+
})(["flex:none;display:flex;justify-content:space-between;align-items:center;padding:0.75rem 1.5rem;background-color:", ";", ""], base.color.navy6, function (_ref5) {
|
|
33
|
+
var vertical = _ref5.vertical;
|
|
34
|
+
return vertical ? "\n flex-direction: column;\n align-items: flex-start;\n " : '';
|
|
35
35
|
});
|
|
36
|
-
|
|
36
|
+
var StyledQuestionBoxFooterActions = styled.div.withConfig({
|
|
37
37
|
componentId: "sc-h8ztvr-4"
|
|
38
38
|
})(["display:flex;> *:not(:last-child){margin-right:0.75rem;}"]);
|
|
39
|
-
|
|
39
|
+
var StyledQuestionBoxFooterStatus = styled.div.withConfig({
|
|
40
40
|
componentId: "sc-h8ztvr-5"
|
|
41
|
-
})(["margin-left:0.75rem;", ""], ({
|
|
42
|
-
vertical
|
|
43
|
-
|
|
44
|
-
return vertical ? `
|
|
45
|
-
margin-left: 0;
|
|
46
|
-
margin-top: 0.75rem;
|
|
47
|
-
` : '';
|
|
41
|
+
})(["margin-left:0.75rem;", ""], function (_ref6) {
|
|
42
|
+
var vertical = _ref6.vertical;
|
|
43
|
+
return vertical ? "\n margin-left: 0;\n margin-top: 0.75rem;\n " : '';
|
|
48
44
|
});
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
onNext
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
vertical
|
|
64
|
-
} = useMaterialSurveyState();
|
|
65
|
-
const hasFooter = footerActions.length > 0;
|
|
66
|
-
const header = React.createElement(StyledQuestionBoxHeader, null, React.createElement(Text, {
|
|
45
|
+
var SurveyContentBox = function SurveyContentBox(_a) {
|
|
46
|
+
var children = _a.children,
|
|
47
|
+
_a$footerActions = _a.footerActions,
|
|
48
|
+
footerActions = _a$footerActions === void 0 ? [] : _a$footerActions,
|
|
49
|
+
title = _a.title,
|
|
50
|
+
submitResult = _a.submitResult,
|
|
51
|
+
submitStatus = _a.submitStatus,
|
|
52
|
+
onNext = _a.onNext,
|
|
53
|
+
props = __rest(_a, ["children", "footerActions", "title", "submitResult", "submitStatus", "onNext"]);
|
|
54
|
+
var intl = useIntl();
|
|
55
|
+
var _useMaterialSurveySta = useMaterialSurveyState(),
|
|
56
|
+
vertical = _useMaterialSurveySta.vertical;
|
|
57
|
+
var hasFooter = footerActions.length > 0;
|
|
58
|
+
var header = React.createElement(StyledQuestionBoxHeader, null, React.createElement(Text, {
|
|
67
59
|
bold: true,
|
|
68
60
|
customStyles: {
|
|
69
61
|
color: base.color.navy0
|
|
70
62
|
}
|
|
71
63
|
}, title), submitResult ? submitResult : null);
|
|
72
|
-
|
|
64
|
+
var body = React.createElement(StyledQuestionBoxBody, {
|
|
73
65
|
hasFooter: hasFooter
|
|
74
66
|
}, children);
|
|
75
|
-
|
|
67
|
+
var footer = React.createElement(StyledQuestionBoxFooter, {
|
|
76
68
|
vertical: vertical
|
|
77
|
-
}, React.createElement(StyledQuestionBoxFooterActions, null, footerActions.map((action, index)
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
69
|
+
}, React.createElement(StyledQuestionBoxFooterActions, null, footerActions.map(function (action, index) {
|
|
70
|
+
return React.createElement(Button, Object.assign({
|
|
71
|
+
key: index,
|
|
72
|
+
size: "small"
|
|
73
|
+
}, action), action.children);
|
|
74
|
+
}), typeof onNext === 'function' ? React.createElement(Button, {
|
|
81
75
|
size: "small",
|
|
82
76
|
border: true,
|
|
83
77
|
tabIndex: 0,
|
|
@@ -3,16 +3,12 @@ import React from 'react';
|
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
import { QuestionCheckboxContextProvider } from './QuestionCheckboxContext.js';
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
var StyledQuestionCheckbox = styled.div.withConfig({
|
|
7
7
|
componentId: "sc-1ovh9lp-0"
|
|
8
8
|
})(["display:flex;flex-direction:column;"]);
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
children
|
|
13
|
-
} = _a,
|
|
14
|
-
props = __rest(_a, ["children"]);
|
|
15
|
-
|
|
9
|
+
var QuestionCheckbox = function QuestionCheckbox(_a) {
|
|
10
|
+
var children = _a.children,
|
|
11
|
+
props = __rest(_a, ["children"]);
|
|
16
12
|
return React.createElement(QuestionCheckboxContextProvider, Object.assign({}, props), React.createElement(StyledQuestionCheckbox, null, children));
|
|
17
13
|
};
|
|
18
14
|
|