@elice/material-quiz 1.240828.0 → 1.240909.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.
Files changed (3) hide show
  1. package/cjs/components/material-quiz/MaterialQuiz.js +14 -5
  2. package/es/components/material-quiz/MaterialQuiz.js +16 -7
  3. package/package.json +3 -3
package/cjs/components/material-quiz/MaterialQuiz.js CHANGED
@@ -69,8 +69,9 @@ var StyledMaterialQuizWrapper = styled__default.default.div.withConfig({
69
69
  }, function (_ref4) {
70
70
  var vertical = _ref4.vertical,
71
71
  isQuizGroupType = _ref4.isQuizGroupType,
72
- isLongPassage = _ref4.isLongPassage;
73
- return !isLongPassage && !vertical && !isQuizGroupType ? "".concat(MAX_CONTENT_WIDTH) : 'unset';
72
+ isLongPassage = _ref4.isLongPassage,
73
+ $maxWidth = _ref4.$maxWidth;
74
+ return !isLongPassage && !vertical && !isQuizGroupType ? "".concat(MAX_CONTENT_WIDTH) : $maxWidth ? "".concat($maxWidth, "px") : 'unset';
74
75
  }, StyledMaterialQuizInfo, function (_ref5) {
75
76
  var vertical = _ref5.vertical;
76
77
  return vertical ? 'auto' : '100%';
@@ -91,16 +92,23 @@ var MaterialQuiz = function MaterialQuiz() {
91
92
  _useMeasure2 = _rollupPluginBabelHelpers.slicedToArray(_useMeasure, 2),
92
93
  ref = _useMeasure2[0],
93
94
  width = _useMeasure2[1].width;
95
+ var _useState = React.useState(0),
96
+ _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
97
+ debouncedWidth = _useState2[0],
98
+ setDebouncedWidth = _useState2[1];
99
+ reactUse.useDebounce(function () {
100
+ setDebouncedWidth(width);
101
+ }, 300, [width]);
94
102
  var isQuizGroupType = Boolean((materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.optionType) === types.enums.QuizOptionType.Group);
95
103
  var isFetchingData = !materialQuiz || !course;
96
104
  var isLoadingLayout = isFetchingData || isInitialLoading;
97
105
  var isVisibleSideBySide = !vertical && isLongPassage;
98
106
  var isRenderQuestionWithPassage = (vertical || !isLongPassage || isQuizGroupType) && !!materialQuiz;
99
107
  React__default.default.useEffect(function () {
100
- if (width > 0) {
101
- setVertical(width <= designTokens.base.screen.medium);
108
+ if (debouncedWidth > 0) {
109
+ setVertical(debouncedWidth <= designTokens.base.screen.medium);
102
110
  }
103
- }, [width, setVertical]);
111
+ }, [debouncedWidth, setVertical]);
104
112
  var renderQuestionOption = function renderQuestionOption() {
105
113
  if (isFetchingData) {
106
114
  return null;
@@ -133,6 +141,7 @@ var MaterialQuiz = function MaterialQuiz() {
133
141
  vertical: vertical,
134
142
  isQuizGroupType: isQuizGroupType,
135
143
  isLongPassage: isLongPassage,
144
+ "$maxWidth": debouncedWidth,
136
145
  children: [isLoadingLayout && jsxRuntime.jsx(LoadingContainer, {
137
146
  children: jsxRuntime.jsx(MaterialQuizShimmer.default, {})
138
147
  }), isVisibleSideBySide && jsxRuntime.jsx(StyledMaterialQuizInfo, {
package/es/components/material-quiz/MaterialQuiz.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
2
2
  import { jsx, jsxs } from 'react/jsx-runtime';
3
- import React from 'react';
4
- import { useMeasure } from 'react-use';
3
+ import React, { useState } from 'react';
4
+ import { useMeasure, useDebounce } from 'react-use';
5
5
  import { base } from '@elice/design-tokens';
6
6
  import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
7
7
  import { createEliceTheme } from '@elice/mui-system';
@@ -60,8 +60,9 @@ var StyledMaterialQuizWrapper = styled.div.withConfig({
60
60
  }, function (_ref4) {
61
61
  var vertical = _ref4.vertical,
62
62
  isQuizGroupType = _ref4.isQuizGroupType,
63
- isLongPassage = _ref4.isLongPassage;
64
- return !isLongPassage && !vertical && !isQuizGroupType ? "".concat(MAX_CONTENT_WIDTH) : 'unset';
63
+ isLongPassage = _ref4.isLongPassage,
64
+ $maxWidth = _ref4.$maxWidth;
65
+ return !isLongPassage && !vertical && !isQuizGroupType ? "".concat(MAX_CONTENT_WIDTH) : $maxWidth ? "".concat($maxWidth, "px") : 'unset';
65
66
  }, StyledMaterialQuizInfo, function (_ref5) {
66
67
  var vertical = _ref5.vertical;
67
68
  return vertical ? 'auto' : '100%';
@@ -82,16 +83,23 @@ var MaterialQuiz = function MaterialQuiz() {
82
83
  _useMeasure2 = _slicedToArray(_useMeasure, 2),
83
84
  ref = _useMeasure2[0],
84
85
  width = _useMeasure2[1].width;
86
+ var _useState = useState(0),
87
+ _useState2 = _slicedToArray(_useState, 2),
88
+ debouncedWidth = _useState2[0],
89
+ setDebouncedWidth = _useState2[1];
90
+ useDebounce(function () {
91
+ setDebouncedWidth(width);
92
+ }, 300, [width]);
85
93
  var isQuizGroupType = Boolean((materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.optionType) === enums.QuizOptionType.Group);
86
94
  var isFetchingData = !materialQuiz || !course;
87
95
  var isLoadingLayout = isFetchingData || isInitialLoading;
88
96
  var isVisibleSideBySide = !vertical && isLongPassage;
89
97
  var isRenderQuestionWithPassage = (vertical || !isLongPassage || isQuizGroupType) && !!materialQuiz;
90
98
  React.useEffect(function () {
91
- if (width > 0) {
92
- setVertical(width <= base.screen.medium);
99
+ if (debouncedWidth > 0) {
100
+ setVertical(debouncedWidth <= base.screen.medium);
93
101
  }
94
- }, [width, setVertical]);
102
+ }, [debouncedWidth, setVertical]);
95
103
  var renderQuestionOption = function renderQuestionOption() {
96
104
  if (isFetchingData) {
97
105
  return null;
@@ -124,6 +132,7 @@ var MaterialQuiz = function MaterialQuiz() {
124
132
  vertical: vertical,
125
133
  isQuizGroupType: isQuizGroupType,
126
134
  isLongPassage: isLongPassage,
135
+ "$maxWidth": debouncedWidth,
127
136
  children: [isLoadingLayout && jsx(LoadingContainer, {
128
137
  children: jsx(MaterialQuizShimmer, {})
129
138
  }), isVisibleSideBySide && jsx(StyledMaterialQuizInfo, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elice/material-quiz",
3
- "version": "1.240828.0",
3
+ "version": "1.240909.0",
4
4
  "description": "User view and editing components of Elice material quiz",
5
5
  "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
6
6
  "license": "UNLICENSED",
@@ -68,8 +68,8 @@
68
68
  "@elice/icons-legacy": "npm:@elice/icons@0.230814.0",
69
69
  "@elice/intl": "0.240425.0-rc.2",
70
70
  "@elice/markdown": "^1.240124.0",
71
- "@elice/material-shared-types": "1.240828.0",
72
- "@elice/material-shared-utils": "1.240828.0",
71
+ "@elice/material-shared-types": "1.240909.0",
72
+ "@elice/material-shared-utils": "1.240909.0",
73
73
  "@elice/mui-elements": "^5.240820.0",
74
74
  "@elice/mui-system": "^5.240820.0",
75
75
  "@elice/openapi-client-course": "^1.230814.0",