@nualang/nualang-ui-components 0.1.1244 → 0.1.1246

package/dist/Chat/Messages/Messages.js

@@ -10,7 +10,8 @@ var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _Message = _interopRequireDefault(require("./Message"));
 var _Question = _interopRequireDefault(require("./Question"));
 var _material = require("@mui/material");
-var _reactBeautifulDnd = require("react-beautiful-dnd");
+var _dragAndDrop = require("../../utils/dragAndDrop/dragAndDrop");
+var _core = require("@dnd-kit/core");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useStyles = (0, _mui.makeStyles)()(theme => ({
@@ -83,7 +84,19 @@ function Messages({
     }
   }, [disableScroll, messages.length, currentMessage, isTimeUp]);
   const onDragEnd = result => {
-    result.destination && moveScriptItem(result.source.index, result.destination.index);
+    const {
+      active,
+      over
+    } = result;
+    if (!over) {
+      return;
+    }
+    if (active.id !== over.id) {
+      const oldIndex = messages.findIndex((item, index) => `${index}-${item.text}` === active.id);
+      const newIndex = messages.findIndex((item, index) => `${index}-${item.text}` === over.id);
+      moveScriptItem(oldIndex, newIndex);
+      return;
+    }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     id: "messages",
@@ -95,158 +108,143 @@ function Messages({
         maxWidth: 800,
         mx: "auto"
       },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBeautifulDnd.DragDropContext, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_dragAndDrop.SortableDndContextWrapper, {
+        items: messages.map((m, i) => `${i}-${m.text}`),
         onDragEnd: onDragEnd,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBeautifulDnd.Droppable, {
-          droppableId: "droppableMessages",
-          children: provided => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            ...provided.droppableProps,
-            ref: provided.innerRef,
-            children: [isLiveGame && isLivePlayer && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
-              sx: {
-                display: "flex",
-                flexDirection: "column"
-              },
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-                sx: {
-                  textAlign: "center"
-                },
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-                  src: roleplayImage,
-                  width: 250,
-                  alt: "",
-                  style: {
-                    borderRadius: "5%"
-                  }
-                })
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-                align: "center",
-                variant: "h6",
-                component: "h2",
-                gutterBottom: true,
-                sx: {
-                  fontWeight: 600
-                },
-                children: t("listen_to_story")
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-                align: "center",
-                variant: "subtitle",
-                color: "textSecondary",
-                sx: {
-                  pb: 5
-                },
-                children: t("story_description")
-              })]
-            }), messages.map((m, i) => {
-              let isCurrentMessage = m === currentMessage;
-              return moveScriptItem ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBeautifulDnd.Draggable, {
-                draggableId: `message-${i}`,
-                index: i,
-                children: (provided, snapshot) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                  ref: provided.innerRef,
-                  ...provided.draggableProps,
-                  style: {
-                    ...provided.draggableProps.style,
-                    opacity: snapshot.isDragging ? 0.8 : 1
-                  },
-                  children: m?.question && !isLivePlayer ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Question.default, {
-                    t: t,
-                    languageTag: languageTag,
-                    messageIndex: i,
-                    messageCount: messages.length,
-                    answerAttempts: answerAttempts,
-                    isLiveGame: isLiveGame,
-                    isLivePlayer: isLivePlayer,
-                    isTimeUp: isCurrentMessage ? isTimeUp : true,
-                    time: time,
-                    handleTimeUp: handleTimeUp,
-                    setCurrentAnswer: setCurrentAnswer,
-                    setIsAnswered: setIsAnswered,
-                    isAnswered: isAnswered,
-                    handleContinue: handleContinue,
-                    isCurrentMessage: isCurrentMessage,
-                    answerCounts: answerCounts,
-                    noAnswerCounts: noAnswerCounts,
-                    messages: messages,
-                    moveScriptItem: moveScriptItem,
-                    provided: provided,
-                    ...m,
-                    ...otherProps
-                  }, `messx_${i}`) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Message.default, {
-                    t: t,
-                    languageTag: languageTag,
-                    disableTranslation: disableTranslation,
-                    messageIndex: i,
-                    voiceSpeed: voiceSpeed,
-                    voice: voice,
-                    messageCount: messages.length,
-                    isSpeaking: isSpeaking,
-                    isSpeakingTextContainer: isSpeakingTextContainer,
-                    muteSound: muteSound,
-                    exercise: exercise,
-                    setCheckedDefault: setCheckedDefault,
-                    index: i,
-                    setBotMessages: setBotMessages,
-                    messages: messages,
-                    gameId: gameId,
-                    speak: speak,
-                    isLivePlayer: isLivePlayer,
-                    siteLanguage: siteLanguage,
-                    moveScriptItem: moveScriptItem,
-                    provided: provided,
-                    ...m,
-                    ...otherProps
-                  }, `messy_${i}`)
-                })
-              }, i) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                children: [m?.question && !isLivePlayer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Question.default, {
-                  t: t,
-                  languageTag: languageTag,
-                  messageIndex: i,
-                  messageCount: messages.length,
-                  answerAttempts: answerAttempts,
-                  isLiveGame: isLiveGame,
-                  isLivePlayer: isLivePlayer,
-                  isTimeUp: isCurrentMessage ? isTimeUp : true,
-                  time: time,
-                  handleTimeUp: handleTimeUp,
-                  setCurrentAnswer: setCurrentAnswer,
-                  setIsAnswered: setIsAnswered,
-                  isAnswered: isAnswered,
-                  handleContinue: handleContinue,
-                  isCurrentMessage: isCurrentMessage,
-                  answerCounts: answerCounts,
-                  noAnswerCounts: noAnswerCounts,
-                  messages: messages,
-                  ...m,
-                  ...otherProps
-                }, `messx_${i}`), !m?.question && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Message.default, {
-                  t: t,
-                  languageTag: languageTag,
-                  disableTranslation: disableTranslation,
-                  messageIndex: i,
-                  voiceSpeed: voiceSpeed,
-                  voice: voice,
-                  messageCount: messages.length,
-                  isSpeaking: isSpeaking,
-                  isSpeakingTextContainer: isSpeakingTextContainer,
-                  muteSound: muteSound,
-                  exercise: exercise,
-                  setCheckedDefault: setCheckedDefault,
-                  index: i,
-                  setBotMessages: setBotMessages,
-                  messages: messages,
-                  gameId: gameId,
-                  speak: speak,
-                  isLivePlayer: isLivePlayer,
-                  siteLanguage: siteLanguage,
-                  ...m,
-                  ...otherProps
-                }, `messy_${i}`)]
-              });
-            }), provided.placeholder]
-          })
-        })
+        collisionOverride: _core.rectIntersection,
+        children: [isLiveGame && isLivePlayer && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          sx: {
+            display: "flex",
+            flexDirection: "column"
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            sx: {
+              textAlign: "center"
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+              src: roleplayImage,
+              width: 250,
+              alt: "",
+              style: {
+                borderRadius: "5%"
+              }
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+            align: "center",
+            variant: "h6",
+            component: "h2",
+            gutterBottom: true,
+            sx: {
+              fontWeight: 600
+            },
+            children: t("listen_to_story")
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+            align: "center",
+            variant: "subtitle",
+            color: "textSecondary",
+            sx: {
+              pb: 5
+            },
+            children: t("story_description")
+          })]
+        }), messages.map((m, i) => {
+          let isCurrentMessage = m === currentMessage;
+          return moveScriptItem ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dragAndDrop.Sortable, {
+            sortId: `${i}-${m.text}`,
+            index: i,
+            children: m?.question && !isLivePlayer ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Question.default, {
+              t: t,
+              languageTag: languageTag,
+              messageIndex: i,
+              messageCount: messages.length,
+              answerAttempts: answerAttempts,
+              isLiveGame: isLiveGame,
+              isLivePlayer: isLivePlayer,
+              isTimeUp: isCurrentMessage ? isTimeUp : true,
+              time: time,
+              handleTimeUp: handleTimeUp,
+              setCurrentAnswer: setCurrentAnswer,
+              setIsAnswered: setIsAnswered,
+              isAnswered: isAnswered,
+              handleContinue: handleContinue,
+              isCurrentMessage: isCurrentMessage,
+              answerCounts: answerCounts,
+              noAnswerCounts: noAnswerCounts,
+              messages: messages,
+              moveScriptItem: moveScriptItem,
+              ...m,
+              ...otherProps
+            }, `messx_${i}`) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Message.default, {
+              t: t,
+              languageTag: languageTag,
+              disableTranslation: disableTranslation,
+              messageIndex: i,
+              voiceSpeed: voiceSpeed,
+              voice: voice,
+              messageCount: messages.length,
+              isSpeaking: isSpeaking,
+              isSpeakingTextContainer: isSpeakingTextContainer,
+              muteSound: muteSound,
+              exercise: exercise,
+              setCheckedDefault: setCheckedDefault,
+              index: i,
+              setBotMessages: setBotMessages,
+              messages: messages,
+              gameId: gameId,
+              speak: speak,
+              isLivePlayer: isLivePlayer,
+              siteLanguage: siteLanguage,
+              moveScriptItem: moveScriptItem,
+              ...m,
+              ...otherProps
+            }, `messy_${i}`)
+          }, `${i}-${m.text}`) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [m?.question && !isLivePlayer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Question.default, {
+              t: t,
+              languageTag: languageTag,
+              messageIndex: i,
+              messageCount: messages.length,
+              answerAttempts: answerAttempts,
+              isLiveGame: isLiveGame,
+              isLivePlayer: isLivePlayer,
+              isTimeUp: isCurrentMessage ? isTimeUp : true,
+              time: time,
+              handleTimeUp: handleTimeUp,
+              setCurrentAnswer: setCurrentAnswer,
+              setIsAnswered: setIsAnswered,
+              isAnswered: isAnswered,
+              handleContinue: handleContinue,
+              isCurrentMessage: isCurrentMessage,
+              answerCounts: answerCounts,
+              noAnswerCounts: noAnswerCounts,
+              messages: messages,
+              ...m,
+              ...otherProps
+            }, `messx_${i}`), !m?.question && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Message.default, {
+              t: t,
+              languageTag: languageTag,
+              disableTranslation: disableTranslation,
+              messageIndex: i,
+              voiceSpeed: voiceSpeed,
+              voice: voice,
+              messageCount: messages.length,
+              isSpeaking: isSpeaking,
+              isSpeakingTextContainer: isSpeakingTextContainer,
+              muteSound: muteSound,
+              exercise: exercise,
+              setCheckedDefault: setCheckedDefault,
+              index: i,
+              setBotMessages: setBotMessages,
+              messages: messages,
+              gameId: gameId,
+              speak: speak,
+              isLivePlayer: isLivePlayer,
+              siteLanguage: siteLanguage,
+              ...m,
+              ...otherProps
+            }, `messy_${i}`)]
+          });
+        })]
       })
     }), afterElements]
   });

package/dist/Dialogs/CreateQuestion/CreateQuestion.js

@@ -14,8 +14,9 @@ var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 var _mui = require("tss-react/mui");
 var _colors = require("@mui/material/colors");
 var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
-var _reactBeautifulDnd = require("react-beautiful-dnd");
 var _DragHandle = _interopRequireDefault(require("@mui/icons-material/DragHandle"));
+var _sortable = require("@dnd-kit/sortable");
+var _dragAndDrop = require("../../utils/dragAndDrop/dragAndDrop");
 var _ResponsiveDialog = _interopRequireDefault(require("../ResponsiveDialog"));
 var _InputHelper = _interopRequireDefault(require("../../Forms/InputHelper"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
@@ -127,17 +128,17 @@ function CreateQuestion({
   };
   const handleOnDragEnd = result => {
     const {
-      source,
-      destination
+      active,
+      over
     } = result;
-    if (!destination) {
+    if (!over) {
       return;
     }
-    if (source.droppableId === "answers" && destination.droppableId === "answers") {
-      const items = Array.from(answerList);
-      const [reorderedItem] = items.splice(source.index, 1);
-      items.splice(destination.index, 0, reorderedItem);
-      setAnswerList(items);
+    if (active.id !== over.id) {
+      const oldIndex = answerList.findIndex((item, index) => `${index}-${item.text}` === active.id);
+      const newIndex = answerList.findIndex((item, index) => `${index}-${item.text}` === over.id);
+      const updatedAnswerList = (0, _sortable.arrayMove)(answerList, oldIndex, newIndex);
+      setAnswerList(updatedAnswerList);
     }
   };
   const handleAddAnswerDebounced = (0, _react.useCallback)((0, _debounce.default)(handleAddAnswer, 100), [answer]);
@@ -201,77 +202,79 @@ function CreateQuestion({
           multiline: true
         })
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBeautifulDnd.DragDropContext, {
-      onDragEnd: handleOnDragEnd,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBeautifulDnd.Droppable, {
-        droppableId: "answers",
-        children: provided => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          ...provided.droppableProps,
-          ref: provided.innerRef,
-          children: [answerList.map((a, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBeautifulDnd.Draggable, {
-            draggableId: `answer-${idx}`,
-            index: idx,
-            children: provided => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              ref: provided.innerRef,
-              ...provided.draggableProps,
-              style: provided.draggableProps.style,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
-                container: true,
-                direction: "row",
-                spacing: 1,
-                alignItems: "center",
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
-                  size: 9.5,
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputHelper.default, {
-                    t: t,
-                    value: a.text,
-                    onChange: handleExistingAnswerInputChange(idx),
-                    margin: "none",
-                    id: `answer-${idx}`,
-                    name: "text",
-                    type: "text",
-                    fullWidth: true,
-                    characters: forLangCharacters ? forLangCharacters : null,
-                    multiline: true
-                  })
-                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
-                  direction: "row",
-                  size: 2.5,
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
-                    title: t("remove_answer"),
-                    enterDelay: 300,
-                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
-                      onClick: () => handleRemoveAnswer(idx),
-                      size: "large",
-                      "aria-label": "Remove Answer",
-                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {})
-                    })
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
-                    title: t("move_answer"),
-                    enterDelay: 300,
-                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
-                      size: "large",
-                      "aria-label": "Drag Answer",
-                      ...provided.dragHandleProps,
-                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DragHandle.default, {})
-                    })
-                  })]
-                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
-                  size: 12,
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlLabel.default, {
-                    control: /*#__PURE__*/(0, _jsxRuntime.jsx)(GreenCheckbox, {
-                      checked: a.correct,
-                      value: a.correct,
-                      onChange: handleExistingAnswerInputChange(idx),
-                      name: "correct"
-                    }),
-                    label: t("correct_answer")
-                  })
-                })]
-              })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dragAndDrop.SortableDndContextWrapper, {
+        items: answerList.map((a, index) => `${index}-${a.text}`),
+        onDragEnd: handleOnDragEnd,
+        children: answerList.map((a, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_dragAndDrop.SortableHandleOnly, {
+          sortId: `${idx}-${a.text}`,
+          index: idx,
+          renderHandle: ({
+            setActivatorNodeRef,
+            listeners
+          }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+            title: t("move_answer"),
+            enterDelay: 300,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+              size: "large",
+              "aria-label": "Drag Answer",
+              ref: setActivatorNodeRef,
+              ...listeners,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DragHandle.default, {})
             })
-          }, idx)), provided.placeholder]
-        })
+          }),
+          children: ({
+            renderHandle
+          }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
+            container: true,
+            direction: "row",
+            spacing: 1,
+            alignItems: "center",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+              size: 9.5,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputHelper.default, {
+                t: t,
+                value: a.text,
+                onChange: handleExistingAnswerInputChange(idx),
+                margin: "none",
+                id: `answer-${idx}`,
+                name: "text",
+                type: "text",
+                fullWidth: true,
+                characters: forLangCharacters ? forLangCharacters : null,
+                multiline: true
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
+              direction: "row",
+              size: 2.5,
+              sx: {
+                display: "flex",
+                alignItems: "center"
+              },
+              children: [renderHandle && renderHandle(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+                title: t("remove_answer"),
+                enterDelay: 300,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+                  onClick: () => handleRemoveAnswer(idx),
+                  size: "large",
+                  "aria-label": "Remove Answer",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {})
+                })
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+              size: 12,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlLabel.default, {
+                control: /*#__PURE__*/(0, _jsxRuntime.jsx)(GreenCheckbox, {
+                  checked: a.correct,
+                  value: a.correct,
+                  onChange: handleExistingAnswerInputChange(idx),
+                  name: "correct"
+                }),
+                label: t("correct_answer")
+              })
+            })]
+          })
+        }, `${idx}-${a.text}`))
       })
     })]
   });

package/dist/Dialogs/UploadPhrases/UploadPhrases.js

@@ -111,6 +111,8 @@ function UploadPhrases({
   isRowEmpty,
   handleAppendPhrases,
   verificationStatus,
+  learnLang,
+  forLang,
   ...otherProps
 }) {
   const {
@@ -146,9 +148,10 @@ function UploadPhrases({
             setErrors(prevState => [...prevState, ...rowErrors]);
           }
         }
-        if (data.phrase && data.translations) {
-          setisError(false);
-          setErrorMessage("");
+        if (data.phrase) {
+          if (learnLang === forLang && (!data.translations || data.translations.trim() === "")) {
+            data.translations = data.phrase;
+          }
           const {
             primary,
             alternatives