@elice/material-quiz 1.240709.0 → 1.240710.0

package/es/components/shared/QuestionBox.js

@@ -4,10 +4,16 @@ import { useIntersection } from 'react-use';
 import { Flex, Text, Box, Button } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { useRawEliceIntl } from '@elice/intl';
+import { useTheme } from '@mui/material';
+import animateScrollTo from 'animated-scroll-to';
 import styled from 'styled-components';
 import { MATERIAL_QUIZ_ANSWER_ID, MATERIAL_QUIZ_PASSIVE_ID } from '../../constant/element.js';
 import { useMaterialQuizState } from '../material-quiz/context/MaterialQuizContext.js';
+import { mergeRefs } from './utils/mergeRefs.js';
 
+const easeInOutCubic = t => {
+  return t < 0.5 ? 4 * Math.pow(t, 3) : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
+};
 const StyledQuestionBox = styled.div.withConfig({
   componentId: "sc-6qfyxj-0"
 })(["position:relative;display:flex;flex-direction:column;overflow:", ";border-radius:", ";width:100%;background-color:", ";", ";"], ({
@@ -22,7 +28,9 @@ const StyledQuestionBox = styled.div.withConfig({
   `);
 const StyledQuestionBoxHeader = styled.div.withConfig({
   componentId: "sc-6qfyxj-1"
-})(["display:flex;justify-content:space-between;background-color:", ";padding:1.5rem;flex:none;", ""], base.color.navy8, ({
+})(["display:flex;justify-content:space-between;background-color:", ";padding:", ";flex:none;", ""], base.color.navy8, ({
+  vertical
+}) => !vertical ? '1.5rem' : '1.5rem 1rem 1rem', ({
   vertical
 }) => vertical ? `
         position: sticky;
@@ -32,18 +40,16 @@ const StyledQuestionBoxHeader = styled.div.withConfig({
       ` : '');
 const StyledQuestionBoxBody = styled.div.withConfig({
   componentId: "sc-6qfyxj-2"
-})(["background-color:", ";flex:", ";", ";"], base.color.navy8, ({
-  vertical
-}) => vertical ? 'none' : 'auto', ({
+})(["background-color:", ";flex:auto;", ";"], base.color.navy8, ({
   hasFooter,
   vertical
-}) => hasFooter && !vertical ? 'height: 100%; padding: 0 1.5rem 1.5rem; overflow-y: auto;' : 'padding: 1.5rem');
+}) => hasFooter && !vertical ? 'height: 100%; padding: 0 1.5rem 1.5rem; overflow-y: auto;' : 'padding: 0.25rem 1.5rem 1.5rem');
 const StyledAnchorBox = styled.div.withConfig({
   componentId: "sc-6qfyxj-3"
 })(["position:sticky;bottom:0;left:0;display:flex;justify-content:center;background-color:", ";border-top:1px solid ", ";"], base.color.navy8, base.color.gray7);
 const StyledQuestionBoxFooter = styled.div.withConfig({
   componentId: "sc-6qfyxj-4"
-})(["flex:none;display:flex;align-items:center;padding:1rem 1.5rem 1.5rem;background-color:", ";", ""], base.color.navy8, ({
+})(["flex:none;display:flex;align-items:center;padding:1rem;background-color:", ";", ""], base.color.navy8, ({
   vertical
 }) => {
   return vertical ? `
@@ -62,16 +68,6 @@ const StyledQuestionBoxFooterActions = styled.div.withConfig({
 }) => {
   return vertical ? 'width: 100%' : '';
 });
-const StyledQuestionBoxFooterStatus = styled.div.withConfig({
-  componentId: "sc-6qfyxj-6"
-})(["margin-left:0.75rem;", ""], ({
-  vertical
-}) => {
-  return vertical ? `
-          margin-top: 0.75rem;
-          order: 1;
-        ` : '';
-});
 const QuestionBox = _a => {
   var {
       children,
@@ -85,18 +81,22 @@ const QuestionBox = _a => {
       bodyContainerRef
     } = _a,
     props = __rest(_a, ["children", "footerActions", "title", "titlePrefix", "submitResult", "submitStatus", "onNext", "isNextActive", "bodyContainerRef"]);
+  const theme = useTheme();
   const intl = useRawEliceIntl();
   const {
     vertical,
     isLongPassage
   } = useMaterialQuizState();
   const intersectionRef = React.useRef(null);
+  const headerRef = React.useRef(null);
+  const bodyRef = React.useRef(null);
+  const currentBodyRef = mergeRefs(bodyContainerRef, bodyRef);
   const hasFooter = footerActions.length > 0;
   const visibleAnchorSection = vertical && isLongPassage;
   const intersection = useIntersection(intersectionRef, {
     root: null,
     rootMargin: '0px',
-    threshold: 1
+    threshold: 0.1
   });
   const isViewingAnswerContainer = Boolean(intersection === null || intersection === void 0 ? void 0 : intersection.isIntersecting);
   useEffect(() => {
@@ -104,15 +104,22 @@ const QuestionBox = _a => {
     // only enable for vertical mode
     if (answerContainer && vertical) intersectionRef.current = answerContainer;
   }, [intersectionRef, vertical]);
-  const scrollToElement = elementId => {
+  const scrollToElement = async elementId => {
+    var _a, _b;
     const target = document.getElementById(elementId);
-    target && target.scrollIntoView({
-      behavior: 'smooth',
-      block: 'start'
-    });
+    if (target && bodyRef.current) {
+      await animateScrollTo(target.offsetTop, {
+        elementToScroll: bodyRef.current,
+        verticalOffset: -((_b = (_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0),
+        easing: easeInOutCubic,
+        minDuration: 50,
+        speed: 200
+      });
+    }
   };
   const header = title ? React.createElement(StyledQuestionBoxHeader, {
-    vertical: vertical
+    vertical: vertical,
+    ref: headerRef
   }, React.createElement(Flex, null, titlePrefix ? React.createElement(Text, {
     bold: true,
     size: "large",
@@ -127,36 +134,38 @@ const QuestionBox = _a => {
     wordBreak: "break-word"
   }, title)), submitResult ? React.createElement(Box, null, submitResult) : null) : null;
   const body = React.createElement(StyledQuestionBoxBody, {
+    ref: !vertical ? currentBodyRef : undefined,
     hasFooter: hasFooter,
-    ref: bodyContainerRef,
     vertical: vertical
   }, children);
   const footer = React.createElement(StyledQuestionBoxFooter, {
     vertical: vertical
-  }, React.createElement(StyledQuestionBoxFooterStatus, {
-    vertical: vertical
-  }, submitStatus), React.createElement(StyledQuestionBoxFooterActions, {
+  }, React.createElement(StyledQuestionBoxFooterActions, {
     vertical: vertical
   }, footerActions.map((action, index) => React.createElement(Button, Object.assign({
-    isFluid: true,
+    isFluid: vertical,
     key: index,
     size: "small"
   }, action), action.children)), isNextActive ? React.createElement(Button, {
-    isFluid: true,
+    isFluid: vertical,
     size: "small",
-    border: true,
+    border: false,
     tabIndex: 0,
     transparent: false,
-    role: "lightpurple",
-    onClick: onNext
+    onClick: onNext,
+    customStyles: {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText
+    }
   }, intl.formatMessage({
     id: 'materialQuiz.next'
   })) : null));
   const _renderAnchorSection = () => {
     const getCustomStyles = active => ({
-      borderBottom: active ? '3px solid currentColor' : 'none',
+      borderBottom: '3px solid currentColor',
       background: 'none',
-      paddingBlock: '1.5rem'
+      borderColor: active ? 'currentColor' : 'transparent',
+      color: active ? theme.palette.primary.main : theme.palette.secondary.light
     });
     return visibleAnchorSection && React.createElement(StyledAnchorBox, null, React.createElement(Button, {
       size: "small",
@@ -164,7 +173,6 @@ const QuestionBox = _a => {
       hasBorderRadius: false,
       tabIndex: 0,
       transparent: true,
-      role: isViewingAnswerContainer ? 'white' : 'primary',
       onClick: scrollToElement.bind(null, MATERIAL_QUIZ_PASSIVE_ID),
       customStyles: getCustomStyles(!isViewingAnswerContainer)
     }, intl.formatMessage({
@@ -175,16 +183,28 @@ const QuestionBox = _a => {
       hasBorderRadius: false,
       tabIndex: 0,
       transparent: true,
-      role: isViewingAnswerContainer ? 'primary' : 'white',
       onClick: scrollToElement.bind(null, MATERIAL_QUIZ_ANSWER_ID),
       customStyles: getCustomStyles(isViewingAnswerContainer)
     }, intl.formatMessage({
       id: 'materialQuiz.anchorLabel.answer'
     })));
   };
+  const renderContent = () => {
+    const content = React.createElement(React.Fragment, null, body, footerActions.length > 0 ? footer : null);
+    if (vertical) {
+      return React.createElement("div", {
+        ref: currentBodyRef,
+        style: {
+          height: '100%',
+          overflow: 'auto'
+        }
+      }, content);
+    }
+    return content;
+  };
   return React.createElement(StyledQuestionBox, Object.assign({}, props, {
     vertical: vertical
-  }), header, body, footerActions.length > 0 ? footer : null, _renderAnchorSection());
+  }), header, renderContent(), _renderAnchorSection());
 };
 
 export { StyledQuestionBox, QuestionBox as default };

package/es/components/shared/utils/mergeRefs.d.ts

@@ -0,0 +1,2 @@
+import type { Ref, RefCallback } from 'react';
+export declare const mergeRefs: <T>(...refs: (Ref<T> | undefined)[]) => RefCallback<T>;

package/es/components/shared/utils/mergeRefs.js

@@ -0,0 +1,9 @@
+const mergeRefs = (...refs) => element => refs.forEach(ref => {
+  if (typeof ref === 'function') {
+    ref(element);
+  } else if (ref && typeof ref === 'object') {
+    ref.current = element;
+  }
+});
+
+export { mergeRefs };

package/es/hooks/useCaculatePassage.js

@@ -1,4 +1,4 @@
-import { useLayoutEffect } from 'react';
+import { useEffect } from 'react';
 import { useMeasure } from 'react-use';
 import { useMaterialQuizState, useMaterialQuizDispatch } from '../components/material-quiz/context/MaterialQuizContext.js';
 import { MATERIAL_QUIZ_CONTAINER_ID } from '../constant/element.js';
@@ -9,7 +9,8 @@ const useCaculatePassage = () => {
     vertical
   } = useMaterialQuizState();
   const {
-    setIsLongPassage
+    setIsLongPassage,
+    setIsInitialLoading
   } = useMaterialQuizDispatch();
   const [questionRef, {
     height: questionDetailHeight
@@ -17,13 +18,20 @@ const useCaculatePassage = () => {
   const [containerRef, {
     height: containerHeight
   }] = useMeasure();
-  useLayoutEffect(() => {
+  useEffect(() => {
     var _a, _b;
     const currentContainerHeight = vertical ? (_b = (_a = document.getElementById(MATERIAL_QUIZ_CONTAINER_ID)) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0 : containerHeight;
     if (currentContainerHeight && questionDetailHeight && materialQuiz) {
       setIsLongPassage(questionDetailHeight > currentContainerHeight);
+      // add timeout for forcing caculate layout and render in the parent
+      // finish before turning off loading
+      setTimeout(() => {
+        setIsInitialLoading(false);
+      }, 300);
+    } else if (materialQuiz && !materialQuiz.questionDescription) {
+      setIsInitialLoading(false);
     }
-  }, [containerHeight, questionDetailHeight, materialQuiz, setIsLongPassage, vertical]);
+  }, [containerHeight, questionDetailHeight, materialQuiz, setIsLongPassage, vertical, setIsInitialLoading]);
   return {
     questionRef,
     containerRef

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-quiz",
-  "version": "1.240709.0",
+  "version": "1.240710.0",
   "description": "User view and editing components of Elice material quiz",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -48,6 +48,7 @@
     "styled-components": "^5.2.0"
   },
   "dependencies": {
+    "animated-scroll-to": "^2.0.5",
     "classnames": "^2.2.0",
     "jquery": "^3.6.0",
     "jquery-ui": "^1.13.1",
@@ -64,8 +65,8 @@
     "@elice/icons-legacy": "npm:@elice/icons@0.230814.0",
     "@elice/intl": "0.240425.0-rc.2",
     "@elice/markdown": "^1.240124.0",
-    "@elice/material-shared-types": "1.240709.0",
-    "@elice/material-shared-utils": "1.240709.0",
+    "@elice/material-shared-types": "1.240710.0",
+    "@elice/material-shared-utils": "1.240710.0",
     "@elice/mui-system": "^5.240108.1",
     "@elice/types": "^1.240619.0",
     "@emotion/react": "^11.10.0",
@@ -87,5 +88,5 @@
     "react-use": "^17.2.4",
     "styled-components": "^5.3.0"
   },
-  "gitHead": "1890e435180fb5e3662fdaedbba1009225bc316a"
+  "gitHead": "26aba6603e491668e8258b108b3b45f31ba33b24"
 }