@elice/material-survey 1.240718.0-trasncript.0 → 1.240718.0-trasncript.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/_virtual/_rollupPluginBabelHelpers.js +399 -0
- package/cjs/components/markdown-editor/index.d.ts +1 -2
- package/cjs/components/markdown-editor/index.js +19 -10
- package/cjs/components/material-survey/MaterialSurvey.js +82 -57
- package/cjs/components/material-survey/MaterialSurveyInfo.js +69 -59
- package/cjs/components/material-survey/MaterialSurveySelectMultiple.js +131 -90
- package/cjs/components/material-survey/MaterialSurveySelectOne.js +125 -86
- package/cjs/components/material-survey/MaterialSurveyShimmer.js +47 -40
- package/cjs/components/material-survey/MaterialSurveyText.js +114 -75
- package/cjs/components/material-survey/SurveyResultBadge.js +17 -10
- package/cjs/components/material-survey/SurveySubmitStatusText.js +21 -16
- package/cjs/components/material-survey/context/MaterialSurveyContext.d.ts +1 -1
- package/cjs/components/material-survey/context/MaterialSurveyContext.js +115 -74
- package/cjs/components/material-survey/index.js +9 -0
- package/cjs/components/material-survey/locales/index.js +13 -0
- package/cjs/components/material-survey-edit/MaterialSurveyEdit.js +49 -36
- package/cjs/components/material-survey-edit/MaterialSurveyEditContent.js +113 -91
- package/cjs/components/material-survey-edit/MaterialSurveyEditOptionSelect.js +100 -87
- package/cjs/components/material-survey-edit/context.js +8 -2
- package/cjs/components/material-survey-edit/index.js +7 -0
- package/cjs/components/material-survey-edit/locales/index.js +13 -0
- package/cjs/components/material-survey-edit/utils/editValue.js +17 -11
- package/cjs/components/shared/StyledMarkdown.js +5 -1
- package/cjs/components/shared/SurveyContentBox.js +85 -74
- package/cjs/components/shared/index.js +13 -0
- package/cjs/components/shared/question-checkbox/QuestionCheckbox.js +13 -7
- package/cjs/components/shared/question-checkbox/QuestionCheckboxContext.d.ts +1 -1
- package/cjs/components/shared/question-checkbox/QuestionCheckboxContext.js +24 -17
- package/cjs/components/shared/question-checkbox/QuestionCheckboxOption.js +66 -89
- package/cjs/components/shared/question-radio/QuestionRadio.js +13 -7
- package/cjs/components/shared/question-radio/QuestionRadioContext.d.ts +1 -1
- package/cjs/components/shared/question-radio/QuestionRadioContext.js +24 -17
- package/cjs/components/shared/question-radio/QuestionRadioOption.js +59 -80
- package/es/_virtual/_rollupPluginBabelHelpers.js +386 -0
- package/es/components/markdown-editor/index.d.ts +1 -2
- package/es/components/markdown-editor/index.js +15 -10
- package/es/components/material-survey/MaterialSurvey.js +77 -57
- package/es/components/material-survey/MaterialSurveyInfo.js +65 -59
- package/es/components/material-survey/MaterialSurveySelectMultiple.js +127 -90
- package/es/components/material-survey/MaterialSurveySelectOne.js +121 -86
- package/es/components/material-survey/MaterialSurveyShimmer.js +43 -40
- package/es/components/material-survey/MaterialSurveyText.js +109 -75
- package/es/components/material-survey/SurveyResultBadge.js +13 -10
- package/es/components/material-survey/SurveySubmitStatusText.js +17 -16
- package/es/components/material-survey/context/MaterialSurveyContext.d.ts +1 -1
- package/es/components/material-survey/context/MaterialSurveyContext.js +112 -75
- package/es/components/material-survey/index.js +2 -0
- package/es/components/material-survey/locales/index.js +4 -0
- package/es/components/material-survey-edit/MaterialSurveyEdit.js +45 -36
- package/es/components/material-survey-edit/MaterialSurveyEditContent.js +107 -90
- package/es/components/material-survey-edit/MaterialSurveyEditOptionSelect.js +96 -87
- package/es/components/material-survey-edit/context.js +4 -2
- package/es/components/material-survey-edit/index.js +1 -0
- package/es/components/material-survey-edit/locales/index.js +4 -0
- package/es/components/material-survey-edit/utils/editValue.js +17 -11
- package/es/components/shared/StyledMarkdown.js +1 -1
- package/es/components/shared/SurveyContentBox.js +81 -74
- package/es/components/shared/index.js +4 -0
- package/es/components/shared/question-checkbox/QuestionCheckbox.js +9 -7
- package/es/components/shared/question-checkbox/QuestionCheckboxContext.d.ts +1 -1
- package/es/components/shared/question-checkbox/QuestionCheckboxContext.js +20 -17
- package/es/components/shared/question-checkbox/QuestionCheckboxOption.js +61 -89
- package/es/components/shared/question-radio/QuestionRadio.js +9 -7
- package/es/components/shared/question-radio/QuestionRadioContext.d.ts +1 -1
- package/es/components/shared/question-radio/QuestionRadioContext.js +20 -17
- package/es/components/shared/question-radio/QuestionRadioOption.js +54 -80
- package/package.json +9 -12
|
@@ -3,98 +3,109 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var tslib = require('tslib');
|
|
6
|
-
var
|
|
6
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
7
7
|
var blocks = require('@elice/blocks');
|
|
8
8
|
var designTokens = require('@elice/design-tokens');
|
|
9
9
|
var intl = require('@elice/intl');
|
|
10
10
|
var styled = require('styled-components');
|
|
11
11
|
var MaterialSurveyContext = require('../material-survey/context/MaterialSurveyContext.js');
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
14
|
+
|
|
15
|
+
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
16
|
+
|
|
17
|
+
var StyledQuestionBox = styled__default.default.div.withConfig({
|
|
14
18
|
componentId: "sc-h8ztvr-0"
|
|
15
|
-
})(["display:flex;flex-direction:column;border-radius:", ";overflow:hidden;width:100%;max-height:", ";min-height:", ";"], ({
|
|
16
|
-
vertical
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
hasFooter
|
|
21
|
-
}
|
|
22
|
-
|
|
19
|
+
})(["display:flex;flex-direction:column;border-radius:", ";overflow:hidden;width:100%;max-height:", ";min-height:", ";"], function (_ref) {
|
|
20
|
+
var vertical = _ref.vertical;
|
|
21
|
+
return vertical ? '0' : '8px';
|
|
22
|
+
}, function (_ref2) {
|
|
23
|
+
var hasFooter = _ref2.hasFooter;
|
|
24
|
+
return hasFooter ? '100%' : '';
|
|
25
|
+
}, function (_ref3) {
|
|
26
|
+
var hasFooter = _ref3.hasFooter;
|
|
27
|
+
return hasFooter ? '' : '100%';
|
|
28
|
+
});
|
|
29
|
+
var StyledQuestionBoxHeader = styled__default.default.div.withConfig({
|
|
23
30
|
componentId: "sc-h8ztvr-1"
|
|
24
31
|
})(["display:flex;justify-content:space-between;background-color:", ";padding:1rem 1.5rem;flex:none;height:3.5rem;"], designTokens.base.color.navy6);
|
|
25
|
-
|
|
32
|
+
var StyledQuestionBoxBody = styled__default.default.div.withConfig({
|
|
26
33
|
componentId: "sc-h8ztvr-2"
|
|
27
|
-
})(["padding:1.5rem;background-color:", ";flex:auto;", "})"], designTokens.base.color.navy7, ({
|
|
28
|
-
hasFooter
|
|
29
|
-
|
|
30
|
-
|
|
34
|
+
})(["padding:1.5rem;background-color:", ";flex:auto;", "})"], designTokens.base.color.navy7, function (_ref4) {
|
|
35
|
+
var hasFooter = _ref4.hasFooter;
|
|
36
|
+
return hasFooter ? 'height: 100%; overflow-y: auto;' : '';
|
|
37
|
+
});
|
|
38
|
+
var StyledQuestionBoxFooter = styled__default.default.div.withConfig({
|
|
31
39
|
componentId: "sc-h8ztvr-3"
|
|
32
|
-
})(["flex:none;display:flex;justify-content:space-between;align-items:center;padding:0.75rem 1.5rem;background-color:", ";", ""], designTokens.base.color.navy8, ({
|
|
33
|
-
vertical
|
|
34
|
-
|
|
35
|
-
return vertical ? `
|
|
36
|
-
flex-direction: column;
|
|
37
|
-
align-items: flex-start;
|
|
38
|
-
` : '';
|
|
40
|
+
})(["flex:none;display:flex;justify-content:space-between;align-items:center;padding:0.75rem 1.5rem;background-color:", ";", ""], designTokens.base.color.navy8, function (_ref5) {
|
|
41
|
+
var vertical = _ref5.vertical;
|
|
42
|
+
return vertical ? "\n flex-direction: column;\n align-items: flex-start;\n " : '';
|
|
39
43
|
});
|
|
40
|
-
|
|
44
|
+
var StyledQuestionBoxFooterActions = styled__default.default.div.withConfig({
|
|
41
45
|
componentId: "sc-h8ztvr-4"
|
|
42
46
|
})(["display:flex;> *:not(:last-child){margin-right:0.75rem;}"]);
|
|
43
|
-
|
|
47
|
+
var StyledQuestionBoxFooterStatus = styled__default.default.div.withConfig({
|
|
44
48
|
componentId: "sc-h8ztvr-5"
|
|
45
|
-
})(["margin-left:0.75rem;", ""], ({
|
|
46
|
-
vertical
|
|
47
|
-
|
|
48
|
-
return vertical ? `
|
|
49
|
-
margin-left: 0;
|
|
50
|
-
margin-top: 0.75rem;
|
|
51
|
-
` : '';
|
|
49
|
+
})(["margin-left:0.75rem;", ""], function (_ref6) {
|
|
50
|
+
var vertical = _ref6.vertical;
|
|
51
|
+
return vertical ? "\n margin-left: 0;\n margin-top: 0.75rem;\n " : '';
|
|
52
52
|
});
|
|
53
|
-
|
|
54
|
-
var
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
} = _a,
|
|
53
|
+
var SurveyContentBox = function SurveyContentBox(_a) {
|
|
54
|
+
var children = _a.children,
|
|
55
|
+
_a$footerActions = _a.footerActions,
|
|
56
|
+
footerActions = _a$footerActions === void 0 ? [] : _a$footerActions,
|
|
57
|
+
title = _a.title,
|
|
58
|
+
submitResult = _a.submitResult,
|
|
59
|
+
submitStatus = _a.submitStatus,
|
|
60
|
+
onNext = _a.onNext,
|
|
62
61
|
props = tslib.__rest(_a, ["children", "footerActions", "title", "submitResult", "submitStatus", "onNext"]);
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
vertical
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
62
|
+
var intl$1 = intl.useRawEliceIntl();
|
|
63
|
+
var _useMaterialSurveySta = MaterialSurveyContext.useMaterialSurveyState(),
|
|
64
|
+
vertical = _useMaterialSurveySta.vertical;
|
|
65
|
+
var hasFooter = footerActions.length > 0;
|
|
66
|
+
var header = jsxRuntime.jsxs(StyledQuestionBoxHeader, {
|
|
67
|
+
children: [jsxRuntime.jsx(blocks.Text, {
|
|
68
|
+
bold: true,
|
|
69
|
+
customStyles: {
|
|
70
|
+
color: designTokens.base.color.navy0
|
|
71
|
+
},
|
|
72
|
+
children: title
|
|
73
|
+
}), submitResult ? submitResult : null]
|
|
74
|
+
});
|
|
75
|
+
var body = jsxRuntime.jsx(StyledQuestionBoxBody, {
|
|
76
|
+
hasFooter: hasFooter,
|
|
77
|
+
children: children
|
|
78
|
+
});
|
|
79
|
+
var footer = jsxRuntime.jsxs(StyledQuestionBoxFooter, {
|
|
80
|
+
vertical: vertical,
|
|
81
|
+
children: [jsxRuntime.jsxs(StyledQuestionBoxFooterActions, {
|
|
82
|
+
children: [footerActions.map(function (action, index) {
|
|
83
|
+
return jsxRuntime.jsx(blocks.Button, Object.assign({
|
|
84
|
+
size: "small"
|
|
85
|
+
}, action, {
|
|
86
|
+
children: action.children
|
|
87
|
+
}), index);
|
|
88
|
+
}), typeof onNext === 'function' ? jsxRuntime.jsx(blocks.Button, {
|
|
89
|
+
size: "small",
|
|
90
|
+
border: true,
|
|
91
|
+
tabIndex: 0,
|
|
92
|
+
transparent: false,
|
|
93
|
+
role: "lightpurple",
|
|
94
|
+
onClick: onNext,
|
|
95
|
+
children: intl$1.formatMessage({
|
|
96
|
+
id: 'materialSurvey.next'
|
|
97
|
+
})
|
|
98
|
+
}) : null]
|
|
99
|
+
}), jsxRuntime.jsx(StyledQuestionBoxFooterStatus, {
|
|
100
|
+
vertical: vertical,
|
|
101
|
+
children: submitStatus
|
|
102
|
+
})]
|
|
103
|
+
});
|
|
104
|
+
return jsxRuntime.jsxs(StyledQuestionBox, Object.assign({}, props, {
|
|
95
105
|
vertical: vertical,
|
|
96
|
-
hasFooter: hasFooter
|
|
97
|
-
|
|
106
|
+
hasFooter: hasFooter,
|
|
107
|
+
children: [header, body, footerActions.length > 0 ? footer : null]
|
|
108
|
+
}));
|
|
98
109
|
};
|
|
99
110
|
|
|
100
111
|
exports.StyledQuestionBox = StyledQuestionBox;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var QuestionRadio = require('./question-radio/QuestionRadio.js');
|
|
4
|
+
var QuestionRadioOption = require('./question-radio/QuestionRadioOption.js');
|
|
5
|
+
var QuestionCheckbox = require('./question-checkbox/QuestionCheckbox.js');
|
|
6
|
+
var QuestionCheckboxOption = require('./question-checkbox/QuestionCheckboxOption.js');
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
exports.QuestionRadio = QuestionRadio.default;
|
|
11
|
+
exports.QuestionRadioOption = QuestionRadioOption.default;
|
|
12
|
+
exports.QuestionCheckbox = QuestionCheckbox.default;
|
|
13
|
+
exports.QuestionCheckboxOption = QuestionCheckboxOption.default;
|
|
@@ -3,19 +3,25 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var tslib = require('tslib');
|
|
6
|
-
var
|
|
6
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
7
7
|
var styled = require('styled-components');
|
|
8
8
|
var QuestionCheckboxContext = require('./QuestionCheckboxContext.js');
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
11
|
+
|
|
12
|
+
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
13
|
+
|
|
14
|
+
var StyledQuestionCheckbox = styled__default.default.div.withConfig({
|
|
11
15
|
componentId: "sc-1ovh9lp-0"
|
|
12
16
|
})(["display:flex;flex-direction:column;"]);
|
|
13
|
-
|
|
14
|
-
var
|
|
15
|
-
children
|
|
16
|
-
} = _a,
|
|
17
|
+
var QuestionCheckbox = function QuestionCheckbox(_a) {
|
|
18
|
+
var children = _a.children,
|
|
17
19
|
props = tslib.__rest(_a, ["children"]);
|
|
18
|
-
return
|
|
20
|
+
return jsxRuntime.jsx(QuestionCheckboxContext.QuestionCheckboxContextProvider, Object.assign({}, props, {
|
|
21
|
+
children: jsxRuntime.jsx(StyledQuestionCheckbox, {
|
|
22
|
+
children: children
|
|
23
|
+
})
|
|
24
|
+
}));
|
|
19
25
|
};
|
|
20
26
|
|
|
21
27
|
exports.default = QuestionCheckbox;
|
|
@@ -4,6 +4,6 @@ type Value = Pick<QuestionCheckboxProps, 'selectedOptions' | 'disabled' | 'onSel
|
|
|
4
4
|
interface QuestionCheckboxProviderProps extends QuestionCheckboxProps {
|
|
5
5
|
children: React.ReactNode;
|
|
6
6
|
}
|
|
7
|
-
declare function QuestionCheckboxContextProvider({ selectedOptions, onSelect, disabled, children, }: QuestionCheckboxProviderProps):
|
|
7
|
+
declare function QuestionCheckboxContextProvider({ selectedOptions, onSelect, disabled, children, }: QuestionCheckboxProviderProps): JSX.Element;
|
|
8
8
|
declare function useQuestionCheckboxContext(): Value;
|
|
9
9
|
export { QuestionCheckboxContextProvider, useQuestionCheckboxContext };
|
|
@@ -1,28 +1,35 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
3
4
|
var React = require('react');
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
7
|
+
|
|
8
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
9
|
+
|
|
10
|
+
var QuestionCheckboxContext = React__default.default.createContext(undefined);
|
|
6
11
|
QuestionCheckboxContext.displayName = 'QuestionCheckboxContext';
|
|
7
|
-
function QuestionCheckboxContextProvider({
|
|
8
|
-
selectedOptions,
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
}) {
|
|
12
|
+
function QuestionCheckboxContextProvider(_ref) {
|
|
13
|
+
var selectedOptions = _ref.selectedOptions,
|
|
14
|
+
onSelect = _ref.onSelect,
|
|
15
|
+
disabled = _ref.disabled,
|
|
16
|
+
children = _ref.children;
|
|
13
17
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
var onSelectValue = React__default.default.useCallback(onSelect, []);
|
|
19
|
+
var value = React__default.default.useMemo(function () {
|
|
20
|
+
return {
|
|
21
|
+
selectedOptions: selectedOptions,
|
|
22
|
+
disabled: disabled,
|
|
23
|
+
onSelect: onSelectValue
|
|
24
|
+
};
|
|
25
|
+
}, [selectedOptions, disabled, onSelectValue]);
|
|
26
|
+
return jsxRuntime.jsx(QuestionCheckboxContext.Provider, {
|
|
27
|
+
value: value,
|
|
28
|
+
children: children
|
|
29
|
+
});
|
|
23
30
|
}
|
|
24
31
|
function useQuestionCheckboxContext() {
|
|
25
|
-
|
|
32
|
+
var context = React__default.default.useContext(QuestionCheckboxContext);
|
|
26
33
|
if (context === undefined) {
|
|
27
34
|
throw new Error('useQuestionCheckboxContext must be used within a QuestionCheckboxContextProvider');
|
|
28
35
|
}
|
|
@@ -2,17 +2,22 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
6
|
var React = require('react');
|
|
6
7
|
var designTokens = require('@elice/design-tokens');
|
|
7
8
|
var styled = require('styled-components');
|
|
8
9
|
var QuestionCheckboxContext = require('./QuestionCheckboxContext.js');
|
|
9
10
|
|
|
10
|
-
|
|
11
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
12
|
+
|
|
13
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
14
|
+
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
15
|
+
|
|
16
|
+
var StyledQuestionCheckboxOption = styled__default.default.div.withConfig({
|
|
11
17
|
componentId: "sc-em5vxx-0"
|
|
12
|
-
})(["display:flex;align-items:center;padding:1.125rem;border-radius:8px;background-color:", ";&:not(:last-of-type){margin-bottom:1rem;}&:hover,& *:hover{cursor:", ";}", ""], ({
|
|
13
|
-
checked,
|
|
14
|
-
|
|
15
|
-
}) => {
|
|
18
|
+
})(["display:flex;align-items:center;padding:1.125rem;border-radius:8px;background-color:", ";&:not(:last-of-type){margin-bottom:1rem;}&:hover,& *:hover{cursor:", ";}", ""], function (_ref) {
|
|
19
|
+
var checked = _ref.checked,
|
|
20
|
+
status = _ref.status;
|
|
16
21
|
if (checked) {
|
|
17
22
|
return designTokens.base.color.primary1;
|
|
18
23
|
}
|
|
@@ -24,20 +29,21 @@ const StyledQuestionCheckboxOption = styled.div.withConfig({
|
|
|
24
29
|
default:
|
|
25
30
|
return designTokens.base.color.navy5;
|
|
26
31
|
}
|
|
27
|
-
}, ({
|
|
28
|
-
disabled
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
32
|
+
}, function (_ref2) {
|
|
33
|
+
var disabled = _ref2.disabled;
|
|
34
|
+
return disabled ? 'not-allowed' : 'pointer';
|
|
35
|
+
}, function (_ref3) {
|
|
36
|
+
var isAnswer = _ref3.isAnswer;
|
|
37
|
+
return isAnswer ? "border: 3px solid ".concat(designTokens.base.color.green5) : '';
|
|
38
|
+
});
|
|
39
|
+
var StyledCustomCheckboxButton = styled__default.default.span.withConfig({
|
|
33
40
|
componentId: "sc-em5vxx-1"
|
|
34
41
|
})([""]);
|
|
35
|
-
|
|
42
|
+
var StyledQuestionCheckboxInput = styled__default.default.input.withConfig({
|
|
36
43
|
componentId: "sc-em5vxx-2"
|
|
37
|
-
})(["flex:none;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;width:1.25rem;height:1.25rem;margin-right:0.875rem;background-color:", ";border:", ";", ""], ({
|
|
38
|
-
checked,
|
|
39
|
-
|
|
40
|
-
}) => {
|
|
44
|
+
})(["flex:none;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;width:1.25rem;height:1.25rem;margin-right:0.875rem;background-color:", ";border:", ";", ""], function (_ref4) {
|
|
45
|
+
var checked = _ref4.checked,
|
|
46
|
+
status = _ref4.status;
|
|
41
47
|
if (checked) {
|
|
42
48
|
return designTokens.base.color.primary6;
|
|
43
49
|
}
|
|
@@ -49,10 +55,9 @@ const StyledQuestionCheckboxInput = styled.input.withConfig({
|
|
|
49
55
|
default:
|
|
50
56
|
return 'transparent';
|
|
51
57
|
}
|
|
52
|
-
}, ({
|
|
53
|
-
checked,
|
|
54
|
-
|
|
55
|
-
}) => {
|
|
58
|
+
}, function (_ref5) {
|
|
59
|
+
var checked = _ref5.checked,
|
|
60
|
+
status = _ref5.status;
|
|
56
61
|
if (checked) {
|
|
57
62
|
return designTokens.base.color.primary6;
|
|
58
63
|
}
|
|
@@ -62,29 +67,16 @@ const StyledQuestionCheckboxInput = styled.input.withConfig({
|
|
|
62
67
|
case 'wrong':
|
|
63
68
|
return designTokens.base.color.red9;
|
|
64
69
|
default:
|
|
65
|
-
return
|
|
70
|
+
return "1px solid ".concat(designTokens.base.color.gray3);
|
|
66
71
|
}
|
|
67
|
-
}, ({
|
|
68
|
-
status,
|
|
69
|
-
|
|
70
|
-
}) => {
|
|
72
|
+
}, function (_ref6) {
|
|
73
|
+
var status = _ref6.status,
|
|
74
|
+
checked = _ref6.checked;
|
|
71
75
|
if (checked) {
|
|
72
|
-
return
|
|
73
|
-
&:after {
|
|
74
|
-
content: '';
|
|
75
|
-
position: absolute;
|
|
76
|
-
top: 50%;
|
|
77
|
-
left: 50%;
|
|
78
|
-
width: 5px;
|
|
79
|
-
height: 10px;
|
|
80
|
-
border: solid ${designTokens.base.color.primary1};
|
|
81
|
-
transform: translate(-50%, -50%) rotate(45deg);
|
|
82
|
-
border-width: 0 3px 3px 0;
|
|
83
|
-
}
|
|
84
|
-
`;
|
|
76
|
+
return "\n &:after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 5px;\n height: 10px;\n border: solid ".concat(designTokens.base.color.primary1, ";\n transform: translate(-50%, -50%) rotate(45deg);\n border-width: 0 3px 3px 0;\n }\n ");
|
|
85
77
|
}
|
|
86
78
|
if (status) {
|
|
87
|
-
|
|
79
|
+
var bgColor;
|
|
88
80
|
switch (status) {
|
|
89
81
|
case 'correct':
|
|
90
82
|
bgColor = designTokens.base.color.green9;
|
|
@@ -96,7 +88,7 @@ const StyledQuestionCheckboxInput = styled.input.withConfig({
|
|
|
96
88
|
bgColor = 'transparent';
|
|
97
89
|
break;
|
|
98
90
|
}
|
|
99
|
-
|
|
91
|
+
var borderColor;
|
|
100
92
|
switch (status) {
|
|
101
93
|
case 'correct':
|
|
102
94
|
borderColor = designTokens.base.color.green1;
|
|
@@ -108,28 +100,14 @@ const StyledQuestionCheckboxInput = styled.input.withConfig({
|
|
|
108
100
|
borderColor = designTokens.base.color.navy5;
|
|
109
101
|
break;
|
|
110
102
|
}
|
|
111
|
-
return
|
|
112
|
-
&:after {
|
|
113
|
-
content: '';
|
|
114
|
-
position: absolute;
|
|
115
|
-
top: 50%;
|
|
116
|
-
left: 50%;
|
|
117
|
-
width: 5px;
|
|
118
|
-
height: 10px;
|
|
119
|
-
border: solid ${borderColor};
|
|
120
|
-
transform: translate(-50%, -50%) rotate(45deg);
|
|
121
|
-
border-width: 0 3px 3px 0;
|
|
122
|
-
background-color: ${bgColor};
|
|
123
|
-
}
|
|
124
|
-
`;
|
|
103
|
+
return "\n &:after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 5px;\n height: 10px;\n border: solid ".concat(borderColor, ";\n transform: translate(-50%, -50%) rotate(45deg);\n border-width: 0 3px 3px 0;\n background-color: ").concat(bgColor, ";\n }\n ");
|
|
125
104
|
}
|
|
126
105
|
});
|
|
127
|
-
|
|
106
|
+
var StyledLabel = styled__default.default.label.withConfig({
|
|
128
107
|
componentId: "sc-em5vxx-3"
|
|
129
|
-
})(["word-break:break-all;margin-right:0.875rem;font-size:", ";color:", ";& p{color:", ";}"], designTokens.base.size.body3, ({
|
|
130
|
-
checked,
|
|
131
|
-
|
|
132
|
-
}) => {
|
|
108
|
+
})(["word-break:break-all;margin-right:0.875rem;font-size:", ";color:", ";& p{color:", ";}"], designTokens.base.size.body3, function (_ref7) {
|
|
109
|
+
var checked = _ref7.checked,
|
|
110
|
+
status = _ref7.status;
|
|
133
111
|
if (checked) {
|
|
134
112
|
return designTokens.base.color.primary6;
|
|
135
113
|
}
|
|
@@ -141,10 +119,9 @@ const StyledLabel = styled.label.withConfig({
|
|
|
141
119
|
default:
|
|
142
120
|
return designTokens.base.color.navy0;
|
|
143
121
|
}
|
|
144
|
-
}, ({
|
|
145
|
-
checked,
|
|
146
|
-
|
|
147
|
-
}) => {
|
|
122
|
+
}, function (_ref8) {
|
|
123
|
+
var checked = _ref8.checked,
|
|
124
|
+
status = _ref8.status;
|
|
148
125
|
if (checked) {
|
|
149
126
|
return designTokens.base.color.primary6;
|
|
150
127
|
}
|
|
@@ -157,41 +134,41 @@ const StyledLabel = styled.label.withConfig({
|
|
|
157
134
|
return designTokens.base.color.navy0;
|
|
158
135
|
}
|
|
159
136
|
});
|
|
160
|
-
|
|
161
|
-
value,
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
const checked = selectedOptions.includes(value);
|
|
172
|
-
return React.createElement(StyledQuestionCheckboxOption, {
|
|
137
|
+
var QuestionCheckboxOption = React__default.default.memo(function (_ref9) {
|
|
138
|
+
var value = _ref9.value,
|
|
139
|
+
status = _ref9.status,
|
|
140
|
+
isAnswer = _ref9.isAnswer,
|
|
141
|
+
children = _ref9.children;
|
|
142
|
+
var _useQuestionCheckboxC = QuestionCheckboxContext.useQuestionCheckboxContext(),
|
|
143
|
+
selectedOptions = _useQuestionCheckboxC.selectedOptions,
|
|
144
|
+
disabled = _useQuestionCheckboxC.disabled,
|
|
145
|
+
onSelect = _useQuestionCheckboxC.onSelect;
|
|
146
|
+
var checked = selectedOptions.includes(value);
|
|
147
|
+
return jsxRuntime.jsxs(StyledQuestionCheckboxOption, {
|
|
173
148
|
isAnswer: isAnswer,
|
|
174
149
|
disabled: disabled,
|
|
175
150
|
checked: checked,
|
|
176
|
-
onClick: e
|
|
151
|
+
onClick: function onClick(e) {
|
|
177
152
|
e.preventDefault();
|
|
178
153
|
if (disabled) {
|
|
179
154
|
return;
|
|
180
155
|
}
|
|
181
156
|
onSelect(value);
|
|
182
157
|
},
|
|
183
|
-
status: status
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
158
|
+
status: status,
|
|
159
|
+
children: [jsxRuntime.jsx(StyledCustomCheckboxButton, {}), jsxRuntime.jsx(StyledQuestionCheckboxInput, {
|
|
160
|
+
id: value,
|
|
161
|
+
readOnly: true,
|
|
162
|
+
type: "checkbox",
|
|
163
|
+
checked: checked,
|
|
164
|
+
status: status
|
|
165
|
+
}), jsxRuntime.jsx(StyledLabel, {
|
|
166
|
+
htmlFor: value,
|
|
167
|
+
checked: checked,
|
|
168
|
+
status: status,
|
|
169
|
+
children: children
|
|
170
|
+
})]
|
|
171
|
+
});
|
|
195
172
|
});
|
|
196
173
|
|
|
197
174
|
exports.default = QuestionCheckboxOption;
|
|
@@ -3,19 +3,25 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var tslib = require('tslib');
|
|
6
|
-
var
|
|
6
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
7
7
|
var styled = require('styled-components');
|
|
8
8
|
var QuestionRadioContext = require('./QuestionRadioContext.js');
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
11
|
+
|
|
12
|
+
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
13
|
+
|
|
14
|
+
var StyledQuestionRadio = styled__default.default.div.withConfig({
|
|
11
15
|
componentId: "sc-4da40f-0"
|
|
12
16
|
})(["display:flex;flex-direction:column;"]);
|
|
13
|
-
|
|
14
|
-
var
|
|
15
|
-
children
|
|
16
|
-
} = _a,
|
|
17
|
+
var QuestionRadio = function QuestionRadio(_a) {
|
|
18
|
+
var children = _a.children,
|
|
17
19
|
props = tslib.__rest(_a, ["children"]);
|
|
18
|
-
return
|
|
20
|
+
return jsxRuntime.jsx(QuestionRadioContext.QuestionRadioContextProvider, Object.assign({}, props, {
|
|
21
|
+
children: jsxRuntime.jsx(StyledQuestionRadio, {
|
|
22
|
+
children: children
|
|
23
|
+
})
|
|
24
|
+
}));
|
|
19
25
|
};
|
|
20
26
|
|
|
21
27
|
exports.default = QuestionRadio;
|
|
@@ -4,6 +4,6 @@ type Value = Pick<QuestionRadioProps, 'selectedValue' | 'disabled' | 'onSelect'>
|
|
|
4
4
|
interface QuestionRadioProviderProps extends QuestionRadioProps {
|
|
5
5
|
children: React.ReactNode;
|
|
6
6
|
}
|
|
7
|
-
declare function QuestionRadioContextProvider({ selectedValue, onSelect, disabled, children, }: QuestionRadioProviderProps):
|
|
7
|
+
declare function QuestionRadioContextProvider({ selectedValue, onSelect, disabled, children, }: QuestionRadioProviderProps): JSX.Element;
|
|
8
8
|
declare function useQuestionRadioContext(): Value;
|
|
9
9
|
export { QuestionRadioContextProvider, useQuestionRadioContext };
|
|
@@ -1,28 +1,35 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
3
4
|
var React = require('react');
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
7
|
+
|
|
8
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
9
|
+
|
|
10
|
+
var QuestionRadioContext = React__default.default.createContext(undefined);
|
|
6
11
|
QuestionRadioContext.displayName = 'QuestionRadioContext';
|
|
7
|
-
function QuestionRadioContextProvider({
|
|
8
|
-
selectedValue,
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
}) {
|
|
12
|
+
function QuestionRadioContextProvider(_ref) {
|
|
13
|
+
var selectedValue = _ref.selectedValue,
|
|
14
|
+
onSelect = _ref.onSelect,
|
|
15
|
+
disabled = _ref.disabled,
|
|
16
|
+
children = _ref.children;
|
|
13
17
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
var onSelectValue = React__default.default.useCallback(onSelect, []);
|
|
19
|
+
var value = React__default.default.useMemo(function () {
|
|
20
|
+
return {
|
|
21
|
+
selectedValue: selectedValue,
|
|
22
|
+
disabled: disabled,
|
|
23
|
+
onSelect: onSelectValue
|
|
24
|
+
};
|
|
25
|
+
}, [selectedValue, disabled, onSelectValue]);
|
|
26
|
+
return jsxRuntime.jsx(QuestionRadioContext.Provider, {
|
|
27
|
+
value: value,
|
|
28
|
+
children: children
|
|
29
|
+
});
|
|
23
30
|
}
|
|
24
31
|
function useQuestionRadioContext() {
|
|
25
|
-
|
|
32
|
+
var context = React__default.default.useContext(QuestionRadioContext);
|
|
26
33
|
if (context === undefined) {
|
|
27
34
|
throw new Error('useQuestionRadioContext must be used within a QuestionRadioContextProvider');
|
|
28
35
|
}
|