@elice/material-quiz 1.240715.0-touch.2 → 1.240715.0-touch.4

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 (7) hide show
  1. package/cjs/components/eb-sortable/EbDraggable.js +5 -2
  2. package/cjs/components/material-quiz/MaterialQuizSelectMultipleOrder.js +12 -15
  3. package/cjs/components/shared/QuizDraggbleOption.js +1 -1
  4. package/es/components/eb-sortable/EbDraggable.js +5 -2
  5. package/es/components/material-quiz/MaterialQuizSelectMultipleOrder.js +12 -15
  6. package/es/components/shared/QuizDraggbleOption.js +1 -1
  7. package/package.json +4 -4
package/cjs/components/eb-sortable/EbDraggable.js CHANGED
@@ -19,7 +19,8 @@ const EbDraggable = ({
19
19
  attributes,
20
20
  listeners,
21
21
  setNodeRef,
22
- transform
22
+ transform,
23
+ isDragging
23
24
  } = core.useDraggable({
24
25
  id,
25
26
  disabled
@@ -34,7 +35,9 @@ const EbDraggable = ({
34
35
  return React.createElement("div", Object.assign({
35
36
  ref: setNodeRef,
36
37
  className: className,
37
- style: style
38
+ style: isDragging ? Object.assign(Object.assign({}, style), {
39
+ zIndex: 1000
40
+ }) : style
38
41
  }, listeners, attributes), children);
39
42
  };
40
43
 
package/cjs/components/material-quiz/MaterialQuizSelectMultipleOrder.js CHANGED
@@ -422,7 +422,7 @@ const MaterialQuizSelectMultipleOrder = ({
422
422
  }, optionList.map((option, index) => {
423
423
  return React.createElement(QuizDraggbleOption.default, {
424
424
  disabled: !!userId,
425
- key: option.order,
425
+ key: `quiz-option-${index}`,
426
426
  id: `quiz-option-${index}`,
427
427
  className: "quiz-option",
428
428
  content: option.value,
@@ -466,12 +466,12 @@ const MaterialQuizSelectMultipleOrder = ({
466
466
  children: intl$1.formatMessage({
467
467
  id: 'materialQuiz.selectMultipleOrder.answer.title'
468
468
  }),
469
- key: index$1,
469
+ key: `quiz-dummy-${index$1}`,
470
470
  indexOrder: index$1 + 1
471
471
  });
472
472
  } else {
473
473
  return React.createElement(QuizDraggbleDroppedOption.default, {
474
- key: index$1,
474
+ key: `option-answer-${index$1}`,
475
475
  id: `option-answer-${index$1}`,
476
476
  content: option.value,
477
477
  role: getRole(),
@@ -550,18 +550,15 @@ const MaterialQuizSelectMultipleOrder = ({
550
550
  size: "small"
551
551
  }, intl$1.formatMessage({
552
552
  id: 'materialQuiz.answer'
553
- })), correctAnswerList.map((correctAnswer, index) => {
554
- var _a;
555
- return React.createElement(QuizDraggbleDroppedOption.default, {
556
- key: correctAnswer.order,
557
- id: (_a = correctAnswer.order) === null || _a === void 0 ? void 0 : _a.toString(),
558
- content: correctAnswer.value,
559
- disabled: true,
560
- role: "correct",
561
- indexOrder: index + 1,
562
- isMarkdown: !!(course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions)
563
- });
564
- }))) : null, React.createElement(MaterialQuizAnswerExplanation.default, null)))));
553
+ })), correctAnswerList.map((correctAnswer, index) => React.createElement(QuizDraggbleDroppedOption.default, {
554
+ key: `dropped-option-answer-${index}`,
555
+ id: `option-answer-${index}`,
556
+ content: correctAnswer.value,
557
+ disabled: true,
558
+ role: "correct",
559
+ indexOrder: index + 1,
560
+ isMarkdown: !!(course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions)
561
+ })))) : null, React.createElement(MaterialQuizAnswerExplanation.default, null)))));
565
562
  };
566
563
 
567
564
  exports.default = MaterialQuizSelectMultipleOrder;
package/cjs/components/shared/QuizDraggbleOption.js CHANGED
@@ -45,7 +45,7 @@ const StyledOrder = styled.div.withConfig({
45
45
  })(["width:1.5rem;height:1.5rem;display:flex;border-radius:4px;align-items:center;justify-content:center;color:", ";background-color:", ";flex:none;margin-left:0.5rem;"], designTokens.base.color.navy0, designTokens.base.color.navy4);
46
46
  const StyledQuizDraggbleOption = styled(EbDraggable.default).withConfig({
47
47
  componentId: "sc-19b0zkq-3"
48
- })(["display:flex;border-radius:8px;border:1px solid ", ";background-color:", ";overflow:hidden;z-index:980 !important;&:not(:last-of-type){margin-bottom:1rem;}", "{background-color:", ";color:", ";}", "{background-color:", ";& *{color:", ";}}", "{background-color:", ";color:", ";}&.ui-draggable-dragging{z-index:1000 !important;color:", " !important;border:none !important;", "{background-color:", ";}", "{background-color:", ";border:1px solid ", " !important;}", "{color:", ";background-color:", ";}& *{color:", " !important;}}&.ui-draggable-dragging.quiz-answer{width:calc(100% - 1rem * 2);}"], designTokens.base.color.navy4, designTokens.base.color.navy5, StyledQuizDraggbleOptionHandle, ({
48
+ })(["display:flex;border-radius:8px;border:1px solid ", ";background-color:", ";overflow:hidden;&:not(:last-of-type){margin-bottom:1rem;}", "{background-color:", ";color:", ";}", "{background-color:", ";& *{color:", ";}}", "{background-color:", ";color:", ";}&.ui-draggable-dragging{z-index:1000 !important;color:", " !important;border:none !important;", "{background-color:", ";}", "{background-color:", ";border:1px solid ", " !important;}", "{color:", ";background-color:", ";}& *{color:", " !important;}}&.ui-draggable-dragging.quiz-answer{width:calc(100% - 1rem * 2);}"], designTokens.base.color.navy4, designTokens.base.color.navy5, StyledQuizDraggbleOptionHandle, ({
49
49
  role
50
50
  }) => {
51
51
  switch (role) {
package/es/components/eb-sortable/EbDraggable.js CHANGED
@@ -15,7 +15,8 @@ const EbDraggable = ({
15
15
  attributes,
16
16
  listeners,
17
17
  setNodeRef,
18
- transform
18
+ transform,
19
+ isDragging
19
20
  } = useDraggable({
20
21
  id,
21
22
  disabled
@@ -30,7 +31,9 @@ const EbDraggable = ({
30
31
  return React.createElement("div", Object.assign({
31
32
  ref: setNodeRef,
32
33
  className: className,
33
- style: style
34
+ style: isDragging ? Object.assign(Object.assign({}, style), {
35
+ zIndex: 1000
36
+ }) : style
34
37
  }, listeners, attributes), children);
35
38
  };
36
39
 
package/es/components/material-quiz/MaterialQuizSelectMultipleOrder.js CHANGED
@@ -418,7 +418,7 @@ const MaterialQuizSelectMultipleOrder = ({
418
418
  }, optionList.map((option, index) => {
419
419
  return React.createElement(QuizDraggbleOption, {
420
420
  disabled: !!userId,
421
- key: option.order,
421
+ key: `quiz-option-${index}`,
422
422
  id: `quiz-option-${index}`,
423
423
  className: "quiz-option",
424
424
  content: option.value,
@@ -462,12 +462,12 @@ const MaterialQuizSelectMultipleOrder = ({
462
462
  children: intl.formatMessage({
463
463
  id: 'materialQuiz.selectMultipleOrder.answer.title'
464
464
  }),
465
- key: index,
465
+ key: `quiz-dummy-${index}`,
466
466
  indexOrder: index + 1
467
467
  });
468
468
  } else {
469
469
  return React.createElement(QuizDraggbleDroppedOption, {
470
- key: index,
470
+ key: `option-answer-${index}`,
471
471
  id: `option-answer-${index}`,
472
472
  content: option.value,
473
473
  role: getRole(),
@@ -546,18 +546,15 @@ const MaterialQuizSelectMultipleOrder = ({
546
546
  size: "small"
547
547
  }, intl.formatMessage({
548
548
  id: 'materialQuiz.answer'
549
- })), correctAnswerList.map((correctAnswer, index) => {
550
- var _a;
551
- return React.createElement(QuizDraggbleDroppedOption, {
552
- key: correctAnswer.order,
553
- id: (_a = correctAnswer.order) === null || _a === void 0 ? void 0 : _a.toString(),
554
- content: correctAnswer.value,
555
- disabled: true,
556
- role: "correct",
557
- indexOrder: index + 1,
558
- isMarkdown: !!(course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions)
559
- });
560
- }))) : null, React.createElement(MaterialQuizAnswerExplanation, null)))));
549
+ })), correctAnswerList.map((correctAnswer, index) => React.createElement(QuizDraggbleDroppedOption, {
550
+ key: `dropped-option-answer-${index}`,
551
+ id: `option-answer-${index}`,
552
+ content: correctAnswer.value,
553
+ disabled: true,
554
+ role: "correct",
555
+ indexOrder: index + 1,
556
+ isMarkdown: !!(course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions)
557
+ })))) : null, React.createElement(MaterialQuizAnswerExplanation, null)))));
561
558
  };
562
559
 
563
560
  export { MaterialQuizSelectMultipleOrder as default };
package/es/components/shared/QuizDraggbleOption.js CHANGED
@@ -41,7 +41,7 @@ const StyledOrder = styled.div.withConfig({
41
41
  })(["width:1.5rem;height:1.5rem;display:flex;border-radius:4px;align-items:center;justify-content:center;color:", ";background-color:", ";flex:none;margin-left:0.5rem;"], base.color.navy0, base.color.navy4);
42
42
  const StyledQuizDraggbleOption = styled(EbDraggable).withConfig({
43
43
  componentId: "sc-19b0zkq-3"
44
- })(["display:flex;border-radius:8px;border:1px solid ", ";background-color:", ";overflow:hidden;z-index:980 !important;&:not(:last-of-type){margin-bottom:1rem;}", "{background-color:", ";color:", ";}", "{background-color:", ";& *{color:", ";}}", "{background-color:", ";color:", ";}&.ui-draggable-dragging{z-index:1000 !important;color:", " !important;border:none !important;", "{background-color:", ";}", "{background-color:", ";border:1px solid ", " !important;}", "{color:", ";background-color:", ";}& *{color:", " !important;}}&.ui-draggable-dragging.quiz-answer{width:calc(100% - 1rem * 2);}"], base.color.navy4, base.color.navy5, StyledQuizDraggbleOptionHandle, ({
44
+ })(["display:flex;border-radius:8px;border:1px solid ", ";background-color:", ";overflow:hidden;&:not(:last-of-type){margin-bottom:1rem;}", "{background-color:", ";color:", ";}", "{background-color:", ";& *{color:", ";}}", "{background-color:", ";color:", ";}&.ui-draggable-dragging{z-index:1000 !important;color:", " !important;border:none !important;", "{background-color:", ";}", "{background-color:", ";border:1px solid ", " !important;}", "{color:", ";background-color:", ";}& *{color:", " !important;}}&.ui-draggable-dragging.quiz-answer{width:calc(100% - 1rem * 2);}"], base.color.navy4, base.color.navy5, StyledQuizDraggbleOptionHandle, ({
45
45
  role
46
46
  }) => {
47
47
  switch (role) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elice/material-quiz",
3
- "version": "1.240715.0-touch.2",
3
+ "version": "1.240715.0-touch.4",
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",
@@ -67,8 +67,8 @@
67
67
  "@elice/icons-legacy": "npm:@elice/icons@0.230814.0",
68
68
  "@elice/intl": "0.240425.0-rc.2",
69
69
  "@elice/markdown": "^1.240124.0",
70
- "@elice/material-shared-types": "1.240715.0-touch.2",
71
- "@elice/material-shared-utils": "1.240715.0-touch.2",
70
+ "@elice/material-shared-types": "1.240715.0-touch.4",
71
+ "@elice/material-shared-utils": "1.240715.0-touch.4",
72
72
  "@elice/mui-system": "^5.240108.1",
73
73
  "@elice/types": "^1.240619.0",
74
74
  "@emotion/react": "^11.10.0",
@@ -90,5 +90,5 @@
90
90
  "react-use": "^17.2.4",
91
91
  "styled-components": "^5.3.0"
92
92
  },
93
- "gitHead": "50a22bd481d8687c939ed3180f9fa88d842c4102"
93
+ "gitHead": "2f4f75ac5db8f73968fecc24f3bb563db270fe09"
94
94
  }