@elice/material-quiz 1.260825.0-runboxusability.2 → 1.260826.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/components/material-quiz/MaterialQuiz.js +31 -4
- package/cjs/hooks/useCaculatePassage.d.ts +8 -0
- package/cjs/hooks/useCaculatePassage.js +18 -16
- package/es/components/material-quiz/MaterialQuiz.js +31 -4
- package/es/hooks/useCaculatePassage.d.ts +8 -0
- package/es/hooks/useCaculatePassage.js +18 -16
- package/package.json +5 -5
|
@@ -49,6 +49,8 @@ var AsyncMaterialQuizImage = React__default.default.lazy(function () {
|
|
|
49
49
|
});
|
|
50
50
|
// 746px
|
|
51
51
|
var MAX_CONTENT_WIDTH = '46.625rem';
|
|
52
|
+
// 1280px, the narrowest quiz area that fits the passage and the question side by side
|
|
53
|
+
var SIDE_BY_SIDE_MIN_WIDTH = designTokens.base.screen.large;
|
|
52
54
|
var StyledMaterialQuizInfo = /*#__PURE__*/_styled__default.default("div", {
|
|
53
55
|
target: "e1qtxzl13"
|
|
54
56
|
})();
|
|
@@ -90,7 +92,9 @@ var MaterialQuiz = function MaterialQuiz() {
|
|
|
90
92
|
isLongPassage = _useMaterialQuizState.isLongPassage,
|
|
91
93
|
isInitialLoading = _useMaterialQuizState.isInitialLoading;
|
|
92
94
|
var _useMaterialQuizDispa = MaterialQuizContext.useMaterialQuizDispatch(),
|
|
93
|
-
setVertical = _useMaterialQuizDispa.setVertical
|
|
95
|
+
setVertical = _useMaterialQuizDispa.setVertical,
|
|
96
|
+
setIsLongPassage = _useMaterialQuizDispa.setIsLongPassage,
|
|
97
|
+
setIsInitialLoading = _useMaterialQuizDispa.setIsInitialLoading;
|
|
94
98
|
var _useMeasure = reactUse.useMeasure(),
|
|
95
99
|
_useMeasure2 = _rollupPluginBabelHelpers.slicedToArray(_useMeasure, 2),
|
|
96
100
|
ref = _useMeasure2[0],
|
|
@@ -107,11 +111,34 @@ var MaterialQuiz = function MaterialQuiz() {
|
|
|
107
111
|
var isLoadingLayout = isFetchingData || isInitialLoading;
|
|
108
112
|
var isVisibleSideBySide = !vertical && isLongPassage;
|
|
109
113
|
var isRenderQuestionWithPassage = (vertical || !isLongPassage || isQuizGroupType) && !!materialQuiz;
|
|
114
|
+
var hasPassage = Boolean(materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.questionDescription);
|
|
115
|
+
//
|
|
116
|
+
// Resolve the layout from the available width.
|
|
117
|
+
//
|
|
118
|
+
// Deciding it from measured heights made the predicate depend on its own result:
|
|
119
|
+
// turning the side by side layout on re-widths the passage and unmounts the
|
|
120
|
+
// element being measured, so the layout flickered around the threshold. In
|
|
121
|
+
// vertical mode the passage always renders inline, so useCaculatePassage keeps
|
|
122
|
+
// measuring there to drive the anchor section.
|
|
123
|
+
//
|
|
110
124
|
React__default.default.useEffect(function () {
|
|
111
|
-
if (debouncedWidth
|
|
112
|
-
|
|
125
|
+
if (!materialQuiz || debouncedWidth <= 0) {
|
|
126
|
+
return;
|
|
113
127
|
}
|
|
114
|
-
|
|
128
|
+
var nextVertical = debouncedWidth <= designTokens.base.screen.medium;
|
|
129
|
+
setVertical(nextVertical);
|
|
130
|
+
if (!nextVertical) {
|
|
131
|
+
setIsLongPassage(hasPassage && debouncedWidth > SIDE_BY_SIDE_MIN_WIDTH);
|
|
132
|
+
}
|
|
133
|
+
// the layout no longer waits on a measurement, so the shimmer only has to
|
|
134
|
+
// outlive the first paint
|
|
135
|
+
var timer = setTimeout(function () {
|
|
136
|
+
setIsInitialLoading(false);
|
|
137
|
+
}, 300);
|
|
138
|
+
return function () {
|
|
139
|
+
return clearTimeout(timer);
|
|
140
|
+
};
|
|
141
|
+
}, [materialQuiz, debouncedWidth, hasPassage, setVertical, setIsLongPassage, setIsInitialLoading]);
|
|
115
142
|
var renderQuestionOption = function renderQuestionOption() {
|
|
116
143
|
if (isFetchingData) {
|
|
117
144
|
return null;
|
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Measures the passage so vertical mode can tell whether it warrants the anchor
|
|
3
|
+
* section.
|
|
4
|
+
*
|
|
5
|
+
* The horizontal layout is decided from the available width in MaterialQuiz.
|
|
6
|
+
* Measuring is only safe here because the passage always renders inline while
|
|
7
|
+
* vertical, so it cannot move with the layout it feeds.
|
|
8
|
+
*/
|
|
1
9
|
export declare const useCaculatePassage: () => {
|
|
2
10
|
questionRef: import("react-use/lib/useMeasure").UseMeasureRef<HTMLDivElement>;
|
|
3
11
|
containerRef: import("react-use/lib/useMeasure").UseMeasureRef<HTMLDivElement>;
|
|
@@ -6,35 +6,37 @@ var reactUse = require('react-use');
|
|
|
6
6
|
var MaterialQuizContext = require('../components/material-quiz/context/MaterialQuizContext.js');
|
|
7
7
|
var element = require('../constant/element.js');
|
|
8
8
|
|
|
9
|
+
/**
|
|
10
|
+
* Measures the passage so vertical mode can tell whether it warrants the anchor
|
|
11
|
+
* section.
|
|
12
|
+
*
|
|
13
|
+
* The horizontal layout is decided from the available width in MaterialQuiz.
|
|
14
|
+
* Measuring is only safe here because the passage always renders inline while
|
|
15
|
+
* vertical, so it cannot move with the layout it feeds.
|
|
16
|
+
*/
|
|
9
17
|
var useCaculatePassage = function useCaculatePassage() {
|
|
10
18
|
var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
|
|
11
19
|
materialQuiz = _useMaterialQuizState.materialQuiz,
|
|
12
20
|
vertical = _useMaterialQuizState.vertical;
|
|
13
21
|
var _useMaterialQuizDispa = MaterialQuizContext.useMaterialQuizDispatch(),
|
|
14
|
-
setIsLongPassage = _useMaterialQuizDispa.setIsLongPassage
|
|
15
|
-
setIsInitialLoading = _useMaterialQuizDispa.setIsInitialLoading;
|
|
22
|
+
setIsLongPassage = _useMaterialQuizDispa.setIsLongPassage;
|
|
16
23
|
var _useMeasure = reactUse.useMeasure(),
|
|
17
24
|
_useMeasure2 = _rollupPluginBabelHelpers.slicedToArray(_useMeasure, 2),
|
|
18
25
|
questionRef = _useMeasure2[0],
|
|
19
26
|
questionDetailHeight = _useMeasure2[1].height;
|
|
20
27
|
var _useMeasure3 = reactUse.useMeasure(),
|
|
21
|
-
_useMeasure4 = _rollupPluginBabelHelpers.slicedToArray(_useMeasure3,
|
|
22
|
-
containerRef = _useMeasure4[0]
|
|
23
|
-
containerHeight = _useMeasure4[1].height;
|
|
28
|
+
_useMeasure4 = _rollupPluginBabelHelpers.slicedToArray(_useMeasure3, 1),
|
|
29
|
+
containerRef = _useMeasure4[0];
|
|
24
30
|
React.useEffect(function () {
|
|
25
31
|
var _a, _b;
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
setIsLongPassage(questionDetailHeight > currentContainerHeight);
|
|
29
|
-
// add timeout for forcing caculate layout and render in the parent
|
|
30
|
-
// finish before turning off loading
|
|
31
|
-
setTimeout(function () {
|
|
32
|
-
setIsInitialLoading(false);
|
|
33
|
-
}, 300);
|
|
34
|
-
} else if (materialQuiz && !materialQuiz.questionDescription) {
|
|
35
|
-
setIsInitialLoading(false);
|
|
32
|
+
if (!materialQuiz || !vertical) {
|
|
33
|
+
return;
|
|
36
34
|
}
|
|
37
|
-
|
|
35
|
+
var containerHeight = (_b = (_a = document.getElementById(element.MATERIAL_QUIZ_CONTAINER_ID)) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0;
|
|
36
|
+
if (containerHeight && questionDetailHeight) {
|
|
37
|
+
setIsLongPassage(questionDetailHeight > containerHeight);
|
|
38
|
+
}
|
|
39
|
+
}, [vertical, questionDetailHeight, materialQuiz, setIsLongPassage]);
|
|
38
40
|
return {
|
|
39
41
|
questionRef: questionRef,
|
|
40
42
|
containerRef: containerRef
|
|
@@ -40,6 +40,8 @@ var AsyncMaterialQuizImage = React.lazy(function () {
|
|
|
40
40
|
});
|
|
41
41
|
// 746px
|
|
42
42
|
var MAX_CONTENT_WIDTH = '46.625rem';
|
|
43
|
+
// 1280px, the narrowest quiz area that fits the passage and the question side by side
|
|
44
|
+
var SIDE_BY_SIDE_MIN_WIDTH = base.screen.large;
|
|
43
45
|
var StyledMaterialQuizInfo = /*#__PURE__*/_styled("div", {
|
|
44
46
|
target: "e1qtxzl13"
|
|
45
47
|
})();
|
|
@@ -81,7 +83,9 @@ var MaterialQuiz = function MaterialQuiz() {
|
|
|
81
83
|
isLongPassage = _useMaterialQuizState.isLongPassage,
|
|
82
84
|
isInitialLoading = _useMaterialQuizState.isInitialLoading;
|
|
83
85
|
var _useMaterialQuizDispa = useMaterialQuizDispatch(),
|
|
84
|
-
setVertical = _useMaterialQuizDispa.setVertical
|
|
86
|
+
setVertical = _useMaterialQuizDispa.setVertical,
|
|
87
|
+
setIsLongPassage = _useMaterialQuizDispa.setIsLongPassage,
|
|
88
|
+
setIsInitialLoading = _useMaterialQuizDispa.setIsInitialLoading;
|
|
85
89
|
var _useMeasure = useMeasure(),
|
|
86
90
|
_useMeasure2 = _slicedToArray(_useMeasure, 2),
|
|
87
91
|
ref = _useMeasure2[0],
|
|
@@ -98,11 +102,34 @@ var MaterialQuiz = function MaterialQuiz() {
|
|
|
98
102
|
var isLoadingLayout = isFetchingData || isInitialLoading;
|
|
99
103
|
var isVisibleSideBySide = !vertical && isLongPassage;
|
|
100
104
|
var isRenderQuestionWithPassage = (vertical || !isLongPassage || isQuizGroupType) && !!materialQuiz;
|
|
105
|
+
var hasPassage = Boolean(materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.questionDescription);
|
|
106
|
+
//
|
|
107
|
+
// Resolve the layout from the available width.
|
|
108
|
+
//
|
|
109
|
+
// Deciding it from measured heights made the predicate depend on its own result:
|
|
110
|
+
// turning the side by side layout on re-widths the passage and unmounts the
|
|
111
|
+
// element being measured, so the layout flickered around the threshold. In
|
|
112
|
+
// vertical mode the passage always renders inline, so useCaculatePassage keeps
|
|
113
|
+
// measuring there to drive the anchor section.
|
|
114
|
+
//
|
|
101
115
|
React.useEffect(function () {
|
|
102
|
-
if (debouncedWidth
|
|
103
|
-
|
|
116
|
+
if (!materialQuiz || debouncedWidth <= 0) {
|
|
117
|
+
return;
|
|
104
118
|
}
|
|
105
|
-
|
|
119
|
+
var nextVertical = debouncedWidth <= base.screen.medium;
|
|
120
|
+
setVertical(nextVertical);
|
|
121
|
+
if (!nextVertical) {
|
|
122
|
+
setIsLongPassage(hasPassage && debouncedWidth > SIDE_BY_SIDE_MIN_WIDTH);
|
|
123
|
+
}
|
|
124
|
+
// the layout no longer waits on a measurement, so the shimmer only has to
|
|
125
|
+
// outlive the first paint
|
|
126
|
+
var timer = setTimeout(function () {
|
|
127
|
+
setIsInitialLoading(false);
|
|
128
|
+
}, 300);
|
|
129
|
+
return function () {
|
|
130
|
+
return clearTimeout(timer);
|
|
131
|
+
};
|
|
132
|
+
}, [materialQuiz, debouncedWidth, hasPassage, setVertical, setIsLongPassage, setIsInitialLoading]);
|
|
106
133
|
var renderQuestionOption = function renderQuestionOption() {
|
|
107
134
|
if (isFetchingData) {
|
|
108
135
|
return null;
|
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Measures the passage so vertical mode can tell whether it warrants the anchor
|
|
3
|
+
* section.
|
|
4
|
+
*
|
|
5
|
+
* The horizontal layout is decided from the available width in MaterialQuiz.
|
|
6
|
+
* Measuring is only safe here because the passage always renders inline while
|
|
7
|
+
* vertical, so it cannot move with the layout it feeds.
|
|
8
|
+
*/
|
|
1
9
|
export declare const useCaculatePassage: () => {
|
|
2
10
|
questionRef: import("react-use/lib/useMeasure").UseMeasureRef<HTMLDivElement>;
|
|
3
11
|
containerRef: import("react-use/lib/useMeasure").UseMeasureRef<HTMLDivElement>;
|
|
@@ -4,35 +4,37 @@ import { useMeasure } from 'react-use';
|
|
|
4
4
|
import { useMaterialQuizState, useMaterialQuizDispatch } from '../components/material-quiz/context/MaterialQuizContext.js';
|
|
5
5
|
import { MATERIAL_QUIZ_CONTAINER_ID } from '../constant/element.js';
|
|
6
6
|
|
|
7
|
+
/**
|
|
8
|
+
* Measures the passage so vertical mode can tell whether it warrants the anchor
|
|
9
|
+
* section.
|
|
10
|
+
*
|
|
11
|
+
* The horizontal layout is decided from the available width in MaterialQuiz.
|
|
12
|
+
* Measuring is only safe here because the passage always renders inline while
|
|
13
|
+
* vertical, so it cannot move with the layout it feeds.
|
|
14
|
+
*/
|
|
7
15
|
var useCaculatePassage = function useCaculatePassage() {
|
|
8
16
|
var _useMaterialQuizState = useMaterialQuizState(),
|
|
9
17
|
materialQuiz = _useMaterialQuizState.materialQuiz,
|
|
10
18
|
vertical = _useMaterialQuizState.vertical;
|
|
11
19
|
var _useMaterialQuizDispa = useMaterialQuizDispatch(),
|
|
12
|
-
setIsLongPassage = _useMaterialQuizDispa.setIsLongPassage
|
|
13
|
-
setIsInitialLoading = _useMaterialQuizDispa.setIsInitialLoading;
|
|
20
|
+
setIsLongPassage = _useMaterialQuizDispa.setIsLongPassage;
|
|
14
21
|
var _useMeasure = useMeasure(),
|
|
15
22
|
_useMeasure2 = _slicedToArray(_useMeasure, 2),
|
|
16
23
|
questionRef = _useMeasure2[0],
|
|
17
24
|
questionDetailHeight = _useMeasure2[1].height;
|
|
18
25
|
var _useMeasure3 = useMeasure(),
|
|
19
|
-
_useMeasure4 = _slicedToArray(_useMeasure3,
|
|
20
|
-
containerRef = _useMeasure4[0]
|
|
21
|
-
containerHeight = _useMeasure4[1].height;
|
|
26
|
+
_useMeasure4 = _slicedToArray(_useMeasure3, 1),
|
|
27
|
+
containerRef = _useMeasure4[0];
|
|
22
28
|
useEffect(function () {
|
|
23
29
|
var _a, _b;
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
setIsLongPassage(questionDetailHeight > currentContainerHeight);
|
|
27
|
-
// add timeout for forcing caculate layout and render in the parent
|
|
28
|
-
// finish before turning off loading
|
|
29
|
-
setTimeout(function () {
|
|
30
|
-
setIsInitialLoading(false);
|
|
31
|
-
}, 300);
|
|
32
|
-
} else if (materialQuiz && !materialQuiz.questionDescription) {
|
|
33
|
-
setIsInitialLoading(false);
|
|
30
|
+
if (!materialQuiz || !vertical) {
|
|
31
|
+
return;
|
|
34
32
|
}
|
|
35
|
-
|
|
33
|
+
var containerHeight = (_b = (_a = document.getElementById(MATERIAL_QUIZ_CONTAINER_ID)) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0;
|
|
34
|
+
if (containerHeight && questionDetailHeight) {
|
|
35
|
+
setIsLongPassage(questionDetailHeight > containerHeight);
|
|
36
|
+
}
|
|
37
|
+
}, [vertical, questionDetailHeight, materialQuiz, setIsLongPassage]);
|
|
36
38
|
return {
|
|
37
39
|
questionRef: questionRef,
|
|
38
40
|
containerRef: containerRef
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elice/material-quiz",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.260826.0",
|
|
4
4
|
"description": "User view and editing components of Elice material quiz",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
"@elice/icons": "^1",
|
|
26
26
|
"@elice/intl": "^0",
|
|
27
27
|
"@elice/markdown": "^1",
|
|
28
|
-
"@elice/material-shared-types": "1.
|
|
29
|
-
"@elice/material-shared-utils": "1.
|
|
28
|
+
"@elice/material-shared-types": "1.260826.0",
|
|
29
|
+
"@elice/material-shared-utils": "1.260826.0",
|
|
30
30
|
"@elice/mui-elements": "^5",
|
|
31
31
|
"@elice/mui-system": "^5",
|
|
32
32
|
"@elice/openapi-client-course": "^1",
|
|
@@ -71,8 +71,8 @@
|
|
|
71
71
|
"@elice/icons-legacy": "npm:@elice/icons@0.230814.0",
|
|
72
72
|
"@elice/intl": "0.260526.0",
|
|
73
73
|
"@elice/markdown": "1.241015.0",
|
|
74
|
-
"@elice/material-shared-types": "1.
|
|
75
|
-
"@elice/material-shared-utils": "1.
|
|
74
|
+
"@elice/material-shared-types": "1.260826.0",
|
|
75
|
+
"@elice/material-shared-utils": "1.260826.0",
|
|
76
76
|
"@elice/mui-elements": "5.251204.0",
|
|
77
77
|
"@elice/mui-system": "5.251204.0",
|
|
78
78
|
"@elice/openapi-client-course": "^1.250702.0",
|