oolib 2.129.0 → 2.129.1
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.
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
export default RadioListMultiQuestion;
|
|
2
|
-
declare function RadioListMultiQuestion({ options, subQuestionLabels, onChange, value, readOnly, id }: {
|
|
2
|
+
declare function RadioListMultiQuestion({ options, subQuestionLabels, onChange, value, readOnly, id, questionColWidth, radioColsWidth, variant: _variant }: {
|
|
3
3
|
options: any;
|
|
4
4
|
subQuestionLabels: any;
|
|
5
5
|
onChange: any;
|
|
6
6
|
value: any;
|
|
7
7
|
readOnly: any;
|
|
8
8
|
id: any;
|
|
9
|
+
questionColWidth?: number;
|
|
10
|
+
radioColsWidth?: number;
|
|
11
|
+
variant?: string;
|
|
9
12
|
}, ...args: any[]): React.JSX.Element;
|
|
10
|
-
import React from
|
|
13
|
+
import React from "react";
|
|
@@ -41,9 +41,16 @@ var styled_1 = require("./styled");
|
|
|
41
41
|
var BlockLabel_1 = require("../BlockLabel");
|
|
42
42
|
var themes_1 = require("../../themes");
|
|
43
43
|
var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
|
|
44
|
+
var _EXPORTS_1 = require("../../utils/_EXPORTS");
|
|
45
|
+
var mixins_1 = require("../../themes/mixins");
|
|
46
|
+
var DropdownSingle_1 = require("../Dropdowns/DropdownSingle");
|
|
44
47
|
var greyColor10 = themes_1.colors.greyColor10;
|
|
45
48
|
function RadioListMultiQuestion(_a) {
|
|
46
|
-
var options = _a.options, subQuestionLabels = _a.subQuestionLabels, onChange = _a.onChange, value = _a.value, readOnly = _a.readOnly, id = _a.id;
|
|
49
|
+
var options = _a.options, subQuestionLabels = _a.subQuestionLabels, onChange = _a.onChange, value = _a.value, readOnly = _a.readOnly, id = _a.id, _b = _a.questionColWidth, questionColWidth = _b === void 0 ? 200 : _b, _c = _a.radioColsWidth, radioColsWidth = _c === void 0 ? 120 : _c, _d = _a.variant, _variant = _d === void 0 ? 'radio' : _d;
|
|
50
|
+
var screenWidth = (0, _EXPORTS_1.useScreenWidth)();
|
|
51
|
+
var variant = (screenWidth < (0, mixins_1.getBreakPoint)("sm") || _variant === 'dropdown')
|
|
52
|
+
? 'dropdown'
|
|
53
|
+
: 'radio';
|
|
47
54
|
var props = arguments[0];
|
|
48
55
|
var handleChange = function (subQuestionValue, option) {
|
|
49
56
|
// const key = `${label.trim().replaceAll(' ','').toLowerCase()}.${subQuestionValue}`
|
|
@@ -53,12 +60,19 @@ function RadioListMultiQuestion(_a) {
|
|
|
53
60
|
};
|
|
54
61
|
return (react_1.default.createElement("div", null,
|
|
55
62
|
react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),
|
|
56
|
-
react_1.default.createElement(styled_1.StyledTable, null,
|
|
63
|
+
react_1.default.createElement("div", { style: { overflowX: "auto", overflowY: "hidden" } }, variant === 'radio' ? (react_1.default.createElement(styled_1.StyledTable, null,
|
|
57
64
|
react_1.default.createElement("thead", null,
|
|
58
65
|
react_1.default.createElement("tr", null,
|
|
59
|
-
react_1.default.createElement("th", { style: {
|
|
60
|
-
|
|
61
|
-
|
|
66
|
+
react_1.default.createElement("th", { style: {
|
|
67
|
+
width: "".concat(questionColWidth, "px"),
|
|
68
|
+
minWidth: "".concat(questionColWidth, "px"),
|
|
69
|
+
borderBottom: "1px solid ".concat(greyColor10),
|
|
70
|
+
} }),
|
|
71
|
+
" ", options === null || options === void 0 ? void 0 :
|
|
72
|
+
options.map(function (option) { return (react_1.default.createElement(styled_1.StyledTableTh, { style: {
|
|
73
|
+
width: "".concat(radioColsWidth, "px"),
|
|
74
|
+
minWidth: "".concat(radioColsWidth, "px"),
|
|
75
|
+
}, key: option === null || option === void 0 ? void 0 : option.value },
|
|
62
76
|
react_1.default.createElement(styled_1.StyledElem, null,
|
|
63
77
|
react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, option === null || option === void 0 ? void 0 : option.display)))); }))),
|
|
64
78
|
react_1.default.createElement("tbody", null, subQuestionLabels === null || subQuestionLabels === void 0 ? void 0 : subQuestionLabels.map(function (subQuestion, i) { return (react_1.default.createElement(styled_1.StyledTableRow, { key: subQuestion === null || subQuestion === void 0 ? void 0 : subQuestion.value, index: i },
|
|
@@ -71,9 +85,16 @@ function RadioListMultiQuestion(_a) {
|
|
|
71
85
|
react_1.default.createElement(styled_1.StyledElem, null,
|
|
72
86
|
react_1.default.createElement(RadioAndCheckbox_1.RadioButton, { isSelected: (value &&
|
|
73
87
|
(subQuestion === null || subQuestion === void 0 ? void 0 : subQuestion.value) &&
|
|
74
|
-
((_a = value[subQuestion.value]) === null || _a === void 0 ? void 0 : _a.value) ===
|
|
75
|
-
|
|
76
|
-
|
|
88
|
+
((_a = value[subQuestion.value]) === null || _a === void 0 ? void 0 : _a.value) ===
|
|
89
|
+
(option === null || option === void 0 ? void 0 : option.value)) ||
|
|
90
|
+
false, onClick: function () {
|
|
91
|
+
return !readOnly &&
|
|
92
|
+
handleChange(subQuestion === null || subQuestion === void 0 ? void 0 : subQuestion.value, option);
|
|
93
|
+
} }))));
|
|
94
|
+
}))); })))) : (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '2rem' } }, subQuestionLabels.map(function (subQuestion) { return (react_1.default.createElement("div", null,
|
|
95
|
+
react_1.default.createElement(Typo_1.SANS_2, { semibold: true, style: { paddingBottom: "1rem" } }, subQuestion.display),
|
|
96
|
+
react_1.default.createElement(DropdownSingle_1.DropdownSingle, { options: options, value: value && value[subQuestion.value], onChange: function (k, v) {
|
|
97
|
+
handleChange(subQuestion.value, v);
|
|
98
|
+
} }))); }))))));
|
|
77
99
|
}
|
|
78
|
-
;
|
|
79
100
|
exports.default = RadioListMultiQuestion;
|
|
@@ -22,17 +22,17 @@ var _RadioListMultiQuestion = function (args) {
|
|
|
22
22
|
console.log({ valueParent: value });
|
|
23
23
|
return (React.createElement("div", { style: { background: args.invert ? themes_1.colors.greyColor100 : '' } },
|
|
24
24
|
React.createElement(RadioListMultiQuestion_1.default, { label: "When shopping online, how often do you do each of the following?", subQuestionLabels: [
|
|
25
|
-
{ display: 'Visit multiple websites', value: 'visit_multiple_websites' },
|
|
26
|
-
{ display: 'Read customer reviews', value: 'read_customer_reviews' },
|
|
27
|
-
{ display: 'Watch a video demonstration', value: 'watch_video_demo' },
|
|
28
|
-
{ display: 'Check the delivery date', value: 'check_delivery_date' },
|
|
29
|
-
{ display: 'Check for payment options', value: 'check_payment_options' },
|
|
25
|
+
{ display: 'Visit multiple websites Visit multiple websites', value: 'visit_multiple_websites' },
|
|
26
|
+
{ display: 'Read customer reviews Read customer reviews ', value: 'read_customer_reviews' },
|
|
27
|
+
{ display: 'Watch a video demonstration Watch a video demonstration', value: 'watch_video_demo' },
|
|
28
|
+
{ display: 'Check the delivery date Check the delivery date', value: 'check_delivery_date' },
|
|
29
|
+
{ display: 'Check for payment options Check for payment options', value: 'check_payment_options' },
|
|
30
30
|
], options: [
|
|
31
|
-
{ display: 'Never', value: 'never' },
|
|
32
|
-
{ display: 'Rarely', value: 'rarely' },
|
|
33
|
-
{ display: 'Sometimes', value: 'sometimes' },
|
|
34
|
-
{ display: 'Often', value: 'often' },
|
|
35
|
-
{ display: 'Always', value: 'always' },
|
|
31
|
+
{ display: 'Never Never Never Never ', value: 'never' },
|
|
32
|
+
{ display: 'Rarely Rarely Rarely Rarely ', value: 'rarely' },
|
|
33
|
+
{ display: 'Sometimes Sometimes Sometimes Sometimes ', value: 'sometimes' },
|
|
34
|
+
{ display: 'Often Often Often Often ', value: 'often' },
|
|
35
|
+
{ display: 'Always Always Always Always ', value: 'always' },
|
|
36
36
|
], sublabel: "Select all that apply", value: value, onChange: function (id, value) { return setValue(value); }, readOnly: args.readOnly })));
|
|
37
37
|
};
|
|
38
38
|
exports._RadioListMultiQuestion = _RadioListMultiQuestion;
|