@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.
Files changed (67) hide show
  1. package/cjs/components/markdown-editor/index.d.ts +2 -1
  2. package/cjs/components/markdown-editor/index.js +10 -19
  3. package/cjs/components/material-survey/MaterialSurvey.js +57 -82
  4. package/cjs/components/material-survey/MaterialSurveyInfo.js +59 -69
  5. package/cjs/components/material-survey/MaterialSurveySelectMultiple.js +90 -131
  6. package/cjs/components/material-survey/MaterialSurveySelectOne.js +86 -125
  7. package/cjs/components/material-survey/MaterialSurveyShimmer.js +40 -47
  8. package/cjs/components/material-survey/MaterialSurveyText.js +75 -114
  9. package/cjs/components/material-survey/SurveyResultBadge.js +10 -17
  10. package/cjs/components/material-survey/SurveySubmitStatusText.js +16 -21
  11. package/cjs/components/material-survey/context/MaterialSurveyContext.d.ts +1 -1
  12. package/cjs/components/material-survey/context/MaterialSurveyContext.js +74 -115
  13. package/cjs/components/material-survey-edit/MaterialSurveyEdit.js +36 -49
  14. package/cjs/components/material-survey-edit/MaterialSurveyEditContent.js +91 -113
  15. package/cjs/components/material-survey-edit/MaterialSurveyEditOptionSelect.js +87 -100
  16. package/cjs/components/material-survey-edit/context.js +2 -8
  17. package/cjs/components/material-survey-edit/utils/editValue.js +11 -17
  18. package/cjs/components/shared/StyledMarkdown.js +1 -5
  19. package/cjs/components/shared/SurveyContentBox.js +74 -85
  20. package/cjs/components/shared/question-checkbox/QuestionCheckbox.js +7 -13
  21. package/cjs/components/shared/question-checkbox/QuestionCheckboxContext.d.ts +1 -1
  22. package/cjs/components/shared/question-checkbox/QuestionCheckboxContext.js +17 -24
  23. package/cjs/components/shared/question-checkbox/QuestionCheckboxOption.js +89 -66
  24. package/cjs/components/shared/question-radio/QuestionRadio.js +7 -13
  25. package/cjs/components/shared/question-radio/QuestionRadioContext.d.ts +1 -1
  26. package/cjs/components/shared/question-radio/QuestionRadioContext.js +17 -24
  27. package/cjs/components/shared/question-radio/QuestionRadioOption.js +80 -59
  28. package/es/components/markdown-editor/index.d.ts +2 -1
  29. package/es/components/markdown-editor/index.js +10 -15
  30. package/es/components/material-survey/MaterialSurvey.js +57 -77
  31. package/es/components/material-survey/MaterialSurveyInfo.js +59 -65
  32. package/es/components/material-survey/MaterialSurveySelectMultiple.js +90 -127
  33. package/es/components/material-survey/MaterialSurveySelectOne.js +86 -121
  34. package/es/components/material-survey/MaterialSurveyShimmer.js +40 -43
  35. package/es/components/material-survey/MaterialSurveyText.js +75 -109
  36. package/es/components/material-survey/SurveyResultBadge.js +10 -13
  37. package/es/components/material-survey/SurveySubmitStatusText.js +16 -17
  38. package/es/components/material-survey/context/MaterialSurveyContext.d.ts +1 -1
  39. package/es/components/material-survey/context/MaterialSurveyContext.js +75 -112
  40. package/es/components/material-survey-edit/MaterialSurveyEdit.js +36 -45
  41. package/es/components/material-survey-edit/MaterialSurveyEditContent.js +90 -107
  42. package/es/components/material-survey-edit/MaterialSurveyEditOptionSelect.js +87 -96
  43. package/es/components/material-survey-edit/context.js +2 -4
  44. package/es/components/material-survey-edit/utils/editValue.js +11 -17
  45. package/es/components/shared/StyledMarkdown.js +1 -1
  46. package/es/components/shared/SurveyContentBox.js +74 -81
  47. package/es/components/shared/question-checkbox/QuestionCheckbox.js +7 -9
  48. package/es/components/shared/question-checkbox/QuestionCheckboxContext.d.ts +1 -1
  49. package/es/components/shared/question-checkbox/QuestionCheckboxContext.js +17 -20
  50. package/es/components/shared/question-checkbox/QuestionCheckboxOption.js +89 -61
  51. package/es/components/shared/question-radio/QuestionRadio.js +7 -9
  52. package/es/components/shared/question-radio/QuestionRadioContext.d.ts +1 -1
  53. package/es/components/shared/question-radio/QuestionRadioContext.js +17 -20
  54. package/es/components/shared/question-radio/QuestionRadioOption.js +80 -54
  55. package/package.json +12 -9
  56. package/cjs/_virtual/_rollupPluginBabelHelpers.js +0 -399
  57. package/cjs/components/material-survey/index.js +0 -9
  58. package/cjs/components/material-survey/locales/index.js +0 -13
  59. package/cjs/components/material-survey-edit/index.js +0 -7
  60. package/cjs/components/material-survey-edit/locales/index.js +0 -13
  61. package/cjs/components/shared/index.js +0 -13
  62. package/es/_virtual/_rollupPluginBabelHelpers.js +0 -386
  63. package/es/components/material-survey/index.js +0 -2
  64. package/es/components/material-survey/locales/index.js +0 -4
  65. package/es/components/material-survey-edit/index.js +0 -1
  66. package/es/components/material-survey-edit/locales/index.js +0 -4
  67. 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
- var MaterialSurveyEdit = forwardRef(function (_ref, ref) {
16
- var value = _ref.value,
17
- _ref$disabled = _ref.disabled,
18
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
19
- onChange = _ref.onChange,
20
- onFormStateChange = _ref.onFormStateChange,
21
- onFileUploadRequest = _ref.onFileUploadRequest,
22
- __intl = _ref.__intl;
23
- var formElRef = React.useRef(null);
24
- var useFormMethods = useForm({
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
- var watchedMaterialSurveyEditValue = useFormMethods.watch();
29
- var _useFormMethods$formS = useFormMethods.formState,
30
- isDirty = _useFormMethods$formS.isDirty,
31
- isValid = _useFormMethods$formS.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(function () {
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(function () {
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(function () {
54
+ React.useEffect(() => {
57
55
  if (typeof onFormStateChange === 'function') {
58
56
  onFormStateChange({
59
- isDirty: isDirty,
60
- isValid: 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, function () {
70
- return Object.assign(Object.assign({}, formElRef.current), {
71
- reset: function reset() {
72
- useFormMethods.reset(manipulateValue(value));
73
- void useFormMethods.trigger();
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 jsx(RawEliceIntlProvider, {
81
- value: __intl,
82
- children: jsx("form", {
83
- ref: formElRef,
84
- children: jsx(MaterialSurveyEditContext.Provider, {
85
- value: {
86
- disabled: disabled,
87
- onFileUploadRequest: onFileUploadRequest
88
- },
89
- children: jsx(FormProvider, Object.assign({}, useFormMethods, {
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
- var MIN_TEXT_LENGTH = 1;
15
- var MAX_TEXT_LENGTH = 128;
16
- var StyledSurveyOptionTypeSelectWrap = styled.div.withConfig({
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
- var MaterialSurveyEditContent = function MaterialSurveyEditContent() {
20
- var intl = useRawEliceIntl();
21
- var _useMaterialSurveyEdi = useMaterialSurveyEditContext(),
22
- disabled = _useMaterialSurveyEdi.disabled,
23
- onFileUploadRequest = _useMaterialSurveyEdi.onFileUploadRequest;
24
- var _useFormContext = useFormContext(),
25
- control = _useFormContext.control,
26
- watch = _useFormContext.watch,
27
- setValue = _useFormContext.setValue;
28
- var _watch = watch(['questionInfoList.0.optionType', 'questionInfoList.0.optionInfo']),
29
- _watch2 = _slicedToArray(_watch, 2),
30
- watchedOptionType = _watch2[0],
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(function () {
36
- var get = function get() {
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
- var Option = React.useMemo(function () {
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
- var renderQuestionTitleInput = function renderQuestionTitleInput() {
85
- return jsx(FormInputVerticalLayout, {
86
- label: jsx(Label, {
81
+ const renderQuestionTitleInput = () => {
82
+ return React.createElement(FormInputVerticalLayout, {
83
+ label: React.createElement(Label, {
87
84
  size: "small",
88
- required: true,
89
- children: intl.formatMessage({
90
- id: 'content.title'
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: function render(_ref) {
123
- var field = _ref.field,
124
- fieldState = _ref.fieldState;
118
+ render: ({
119
+ field,
120
+ fieldState
121
+ }) => {
125
122
  var _a;
126
- return jsx(Input, Object.assign({
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
- var renderQuestionDescriptionInput = function renderQuestionDescriptionInput() {
145
- return jsx(FormInputVerticalLayout, {
146
- label: jsx(Label, {
147
- size: "small",
148
- children: intl.formatMessage({
149
- id: 'content.description.title'
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: function render(_ref2) {
156
- var field = _ref2.field;
157
- return jsx(MarkdownEditor, Object.assign({
158
- placeholder: intl.formatMessage({
159
- id: 'content.description.placeholder'
160
- }),
161
- onFileUploadRequest: onFileUploadRequest
162
- }, field));
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
- var renderOptionInput = function renderOptionInput() {
171
- return jsx(FormInputVerticalLayout, {
172
- label: jsx(Label, {
165
+ const renderOptionInput = () => {
166
+ return React.createElement(FormInputVerticalLayout, {
167
+ label: React.createElement(Label, {
173
168
  size: "small",
174
- required: true,
175
- children: intl.formatMessage({
176
- id: 'content.option.title'
177
- })
178
- }),
179
- input: jsxs(Fragment, {
180
- children: [jsx(Controller, {
181
- control: control,
182
- name: "questionInfoList.0.optionType",
183
- render: function render(_ref3) {
184
- var field = _ref3.field;
185
- return jsx(Tooltip, {
186
- title: disabled ? intl.formatMessage({
187
- id: 'content.option.tooltip.disabled'
188
- }) : undefined,
189
- placement: "top-end",
190
- children: jsx(StyledSurveyOptionTypeSelectWrap, {
191
- children: jsxs(Select, Object.assign({
192
- size: "small",
193
- width: "small",
194
- readOnly: disabled
195
- }, field, {
196
- onChange: function onChange(v) {
197
- return field.onChange(Number(v));
198
- },
199
- children: [jsx("option", {
200
- value: enums.SurveyOptionType.SelectOne,
201
- children: intl.formatMessage({
202
- id: 'content.option.select.items.selectOne'
203
- })
204
- }), jsx("option", {
205
- value: enums.SurveyOptionType.SelectMultiple,
206
- children: intl.formatMessage({
207
- id: 'content.option.select.items.selectMultiple'
208
- })
209
- }), jsx("option", {
210
- value: enums.SurveyOptionType.Text,
211
- children: intl.formatMessage({
212
- id: 'content.option.select.items.text'
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 jsxs(Fragment, {
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 { jsxs, jsx } from 'react/jsx-runtime';
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
- var MIN_OPTION_INFO_COUNT = 2;
11
- var MAX_OPTION_INFO_COUNT = 20;
12
- var StyledWrap = styled.div.withConfig({
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
- var StyledInputGroup = styled.div.withConfig({
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
- var OptionSelectOne = function OptionSelectOne() {
19
- var intl = useRawEliceIntl();
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;
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
- var appendOptionInfo = function appendOptionInfo() {
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
- var removeOptionInfo = function removeOptionInfo(index) {
47
+ const removeOptionInfo = index => {
45
48
  removeOptionInfoFieldItem(index);
46
49
  };
47
50
  //
48
51
  //
49
52
  //
50
- return jsxs(StyledWrap, {
51
- children: [jsx(StyledInputGroup, {
52
- children: optionInfoFields.map(function (_ref, index) {
53
- var id = _ref.id;
54
- return jsx(Controller, {
55
- control: control,
56
- name: "questionInfoList.0.optionInfo.".concat(index, ".value"),
57
- rules: {
58
- required: {
59
- value: true,
60
- message: intl.formatMessage({
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
- var MaterialSurveyEditContext = React.createContext(null);
4
- var useMaterialSurveyEditContext = function useMaterialSurveyEditContext() {
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(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
- })
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(function (questionInfo) {
23
+ questionInfoList: v.questionInfoList.map(questionInfo => {
28
24
  var _a;
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
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;
@@ -1,7 +1,7 @@
1
1
  import { Markdown } from '@elice/markdown';
2
2
  import styled from 'styled-components';
3
3
 
4
- var StyledMarkdown = styled(Markdown).withConfig({
4
+ const StyledMarkdown = styled(Markdown).withConfig({
5
5
  componentId: "sc-h8kc9g-0"
6
6
  })(["p{margin:0 !important;}"]);
7
7