npm - catchup-library-web - Versions diffs - 1.20.3 → 1.20.5 - Mend

catchup-library-web 1.20.3 → 1.20.5

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 (6) hide show

package/dist/index.js +39 -35
package/dist/index.mjs +39 -35
package/package.json +1 -1
package/src/components/activities/material-contents/GroupingActivityMaterialContent.tsx +1 -3
package/src/components/activities/material-contents/MatchingActivityMaterialContent.tsx +3 -5
package/src/components/groups/InputGroup.tsx +27 -11

package/dist/index.js CHANGED Viewed

@@ -3917,6 +3917,15 @@ var InputGroup = ({
       label: option.text
     }));
   };
+  const handleTextOnChange = (e) => {
+    if (limit) {
+      if (e.target.value.length <= limit) {
+        onChange && onChange(e);
+      }
+    } else {
+      onChange && onChange(e);
+    }
+  };
   const handleTextAreaOnChange = (e) => {
     if (!textAreaRef) return;
     if (!textAreaRef.current) return;
@@ -4200,7 +4209,14 @@ var InputGroup = ({
   };
   const TextInputGroup = () => {
     return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "my-1 relative", children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-row justify-between items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: title ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: value && limit ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
+          value.length,
+          " / ",
+          limit
+        ] }) : null })
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "div",
         {
@@ -4214,7 +4230,7 @@ var InputGroup = ({
               defaultValue,
               placeholder: errorText ? errorText : placeholder,
               value,
-              onChange,
+              onChange: handleTextOnChange,
               onFocus,
               onKeyDown
             }
@@ -5318,22 +5334,16 @@ var GroupingActivityMaterialContent = ({
         "div",
         {
           className: `border-catchup-blue ${contentMap.type === "TEXT" ? "h-catchup-activity-text-outer-box-item" : "h-catchup-activity-media-outer-box-item"} flex flex-col items-center justify-center border-2 rounded-catchup-xlarge transition-all duration-300 my-3`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-            "div",
-            {
-              className: `flex flex-col items-center justify-center transition-all duration-300 m-4`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
-                (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-                  "span",
-                  {
-                    className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_katex4.InlineMath, { math: inputPart.value }) }) : inputPart.value
-                  },
-                  index2
-                )
-              ) })
-            }
-          )
+          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
+            (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              "span",
+              {
+                className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_katex4.InlineMath, { math: inputPart.value }) }) : inputPart.value
+              },
+              index2
+            )
+          ) }) })
         }
       ) }),
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
@@ -5577,22 +5587,16 @@ var MatchingActivityMaterialContent = ({
                       setSelectedValue(null);
                     }
                   },
-                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                    "div",
+                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto px-4", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                    materialValue
+                  ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                    "span",
                     {
-                      className: `flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto`,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-                        materialValue
-                      ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                        "span",
-                        {
-                          className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                          children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_katex5.InlineMath, { math: inputPart.value }) }) : inputPart.value
-                        },
-                        index2
-                      )) })
-                    }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                      className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_katex5.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                    },
+                    index2
+                  )) }) }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                     ShowMaterialMediaByContentType_default,
                     {
                       contentType: contentMap.type,
@@ -5628,7 +5632,7 @@ var MatchingActivityMaterialContent = ({
           "div",
           {
             className: `${contentMap.type === "TEXT" ? "h-catchup-activity-text-box-item" : "h-catchup-activity-media-box-item"} flex flex-col items-center justify-center  border-2 rounded-catchup-xlarge transition-all duration-300 my-3 ${learnerAnswerState === "EMPTY" ? "border-catchup-blue" : learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-col items-center justify-center transition-all duration-300 m-4", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
               answerMapKey
             ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               "span",
@@ -5661,7 +5665,7 @@ var MatchingActivityMaterialContent = ({
                 component: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                   "div",
                   {
-                    className: "h-full flex-1 flex flex-row items-center justify-center",
+                    className: "h-full flex-1 flex flex-row items-center justify-center px-4",
                     onClick: (e) => {
                       e.preventDefault();
                       if (checkCanAnswerQuestion()) {

package/dist/index.mjs CHANGED Viewed

@@ -3701,6 +3701,15 @@ var InputGroup = ({
       label: option.text
     }));
   };
+  const handleTextOnChange = (e) => {
+    if (limit) {
+      if (e.target.value.length <= limit) {
+        onChange && onChange(e);
+      }
+    } else {
+      onChange && onChange(e);
+    }
+  };
   const handleTextAreaOnChange = (e) => {
     if (!textAreaRef) return;
     if (!textAreaRef.current) return;
@@ -3984,7 +3993,14 @@ var InputGroup = ({
   };
   const TextInputGroup = () => {
     return /* @__PURE__ */ jsxs12("div", { className: "my-1 relative", children: [
-      title ? /* @__PURE__ */ jsx22("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
+      /* @__PURE__ */ jsxs12("div", { className: "flex flex-row justify-between items-center", children: [
+        /* @__PURE__ */ jsx22("div", { children: title ? /* @__PURE__ */ jsx22("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null }),
+        /* @__PURE__ */ jsx22("div", { children: value && limit ? /* @__PURE__ */ jsxs12("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
+          value.length,
+          " / ",
+          limit
+        ] }) : null })
+      ] }),
       /* @__PURE__ */ jsx22(
         "div",
         {
@@ -3998,7 +4014,7 @@ var InputGroup = ({
               defaultValue,
               placeholder: errorText ? errorText : placeholder,
               value,
-              onChange,
+              onChange: handleTextOnChange,
               onFocus,
               onKeyDown
             }
@@ -5102,22 +5118,16 @@ var GroupingActivityMaterialContent = ({
         "div",
         {
           className: `border-catchup-blue ${contentMap.type === "TEXT" ? "h-catchup-activity-text-outer-box-item" : "h-catchup-activity-media-outer-box-item"} flex flex-col items-center justify-center border-2 rounded-catchup-xlarge transition-all duration-300 my-3`,
-          children: /* @__PURE__ */ jsx31(
-            "div",
-            {
-              className: `flex flex-col items-center justify-center transition-all duration-300 m-4`,
-              children: /* @__PURE__ */ jsx31("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
-                (inputPart, index2) => /* @__PURE__ */ jsx31(
-                  "span",
-                  {
-                    className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ jsx31("span", { className: "text-2xl", children: /* @__PURE__ */ jsx31(InlineMath4, { math: inputPart.value }) }) : inputPart.value
-                  },
-                  index2
-                )
-              ) })
-            }
-          )
+          children: /* @__PURE__ */ jsx31("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4", children: /* @__PURE__ */ jsx31("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
+            (inputPart, index2) => /* @__PURE__ */ jsx31(
+              "span",
+              {
+                className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                children: inputPart.isEquation ? /* @__PURE__ */ jsx31("span", { className: "text-2xl", children: /* @__PURE__ */ jsx31(InlineMath4, { math: inputPart.value }) }) : inputPart.value
+              },
+              index2
+            )
+          ) }) })
         }
       ) }),
       /* @__PURE__ */ jsx31("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
@@ -5361,22 +5371,16 @@ var MatchingActivityMaterialContent = ({
                       setSelectedValue(null);
                     }
                   },
-                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx33(
-                    "div",
+                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx33("div", { className: "flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto px-4", children: /* @__PURE__ */ jsx33("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                    materialValue
+                  ).map((inputPart, index2) => /* @__PURE__ */ jsx33(
+                    "span",
                     {
-                      className: `flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto`,
-                      children: /* @__PURE__ */ jsx33("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-                        materialValue
-                      ).map((inputPart, index2) => /* @__PURE__ */ jsx33(
-                        "span",
-                        {
-                          className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                          children: inputPart.isEquation ? /* @__PURE__ */ jsx33("span", { className: "text-xl", children: /* @__PURE__ */ jsx33(InlineMath5, { math: inputPart.value }) }) : inputPart.value
-                        },
-                        index2
-                      )) })
-                    }
-                  ) : /* @__PURE__ */ jsx33(
+                      className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                      children: inputPart.isEquation ? /* @__PURE__ */ jsx33("span", { className: "text-xl", children: /* @__PURE__ */ jsx33(InlineMath5, { math: inputPart.value }) }) : inputPart.value
+                    },
+                    index2
+                  )) }) }) : /* @__PURE__ */ jsx33(
                     ShowMaterialMediaByContentType_default,
                     {
                       contentType: contentMap.type,
@@ -5412,7 +5416,7 @@ var MatchingActivityMaterialContent = ({
           "div",
           {
             className: `${contentMap.type === "TEXT" ? "h-catchup-activity-text-box-item" : "h-catchup-activity-media-box-item"} flex flex-col items-center justify-center  border-2 rounded-catchup-xlarge transition-all duration-300 my-3 ${learnerAnswerState === "EMPTY" ? "border-catchup-blue" : learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
-            children: /* @__PURE__ */ jsx33("div", { className: "flex flex-col items-center justify-center transition-all duration-300 m-4", children: /* @__PURE__ */ jsx33("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+            children: /* @__PURE__ */ jsx33("div", { className: "flex flex-col items-center justify-center transition-all duration-300 px-4", children: /* @__PURE__ */ jsx33("p", { className: "text-lg whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
               answerMapKey
             ).map((inputPart, index2) => /* @__PURE__ */ jsx33(
               "span",
@@ -5445,7 +5449,7 @@ var MatchingActivityMaterialContent = ({
                 component: /* @__PURE__ */ jsx33(
                   "div",
                   {
-                    className: "h-full flex-1 flex flex-row items-center justify-center",
+                    className: "h-full flex-1 flex flex-row items-center justify-center px-4",
                     onClick: (e) => {
                       e.preventDefault();
                       if (checkCanAnswerQuestion()) {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "1.20.03",
+  "version": "1.20.05",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/components/activities/material-contents/GroupingActivityMaterialContent.tsx CHANGED Viewed

@@ -201,9 +201,7 @@ const GroupingActivityMaterialContent = ({
                     : "h-catchup-activity-media-outer-box-item"
                 } flex flex-col items-center justify-center border-2 rounded-catchup-xlarge transition-all duration-300 my-3`}
               >
-                <div
-                  className={`flex flex-col items-center justify-center transition-all duration-300 m-4`}
-                >
+                <div className="flex flex-col items-center justify-center transition-all duration-300 px-4">
                   <p className="text-lg whitespace-pre-wrap">
                     {constructInputWithSpecialExpressionList(answerMapKey).map(
                       (inputPart, index) => (

package/src/components/activities/material-contents/MatchingActivityMaterialContent.tsx CHANGED Viewed

@@ -149,9 +149,7 @@ const MatchingActivityMaterialContent = ({
                     }}
                   >
                     {contentMap.type === "TEXT" ? (
-                      <div
-                        className={`flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto`}
-                      >
+                      <div className="flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto px-4">
                         <p className="text-lg whitespace-pre-wrap">
                           {constructInputWithSpecialExpressionList(
                             materialValue
@@ -225,7 +223,7 @@ const MatchingActivityMaterialContent = ({
                       : "border-catchup-blue"
                   }`}
                 >
-                  <div className="flex flex-col items-center justify-center transition-all duration-300 m-4">
+                  <div className="flex flex-col items-center justify-center transition-all duration-300 px-4">
                     <p className="text-lg whitespace-pre-wrap">
                       {constructInputWithSpecialExpressionList(
                         answerMapKey
@@ -286,7 +284,7 @@ const MatchingActivityMaterialContent = ({
                     dropRef={drop}
                     component={
                       <div
-                        className="h-full flex-1 flex flex-row items-center justify-center"
+                        className="h-full flex-1 flex flex-row items-center justify-center px-4"
                         onClick={(e) => {
                           e.preventDefault();
                           if (checkCanAnswerQuestion()) {

package/src/components/groups/InputGroup.tsx CHANGED Viewed

@@ -118,6 +118,16 @@ const InputGroup = ({
     }));
   };
+  const handleTextOnChange = (e: any) => {
+    if (limit) {
+      if (e.target.value.length <= limit) {
+        onChange && onChange(e);
+      }
+    } else {
+      onChange && onChange(e);
+    }
+  };
   const handleTextAreaOnChange = (e: any) => {
     if (!textAreaRef) return;
     if (!textAreaRef.current) return;
@@ -137,10 +147,7 @@ const InputGroup = ({
     const latexValue = mathFieldRef.current.value;
     const wasFocused = mathFieldRef.current === document.activeElement;
     const cursorPosition = mathFieldRef.current.position;
     setMathValue(latexValue);
-    // Restore focus and cursor position after state update
     if (wasFocused) {
       setTimeout(() => {
         if (mathFieldRef.current) {
@@ -423,7 +430,6 @@ const InputGroup = ({
           onKeyDown={onKeyDown}
         />
-        {/* Math constructor button */}
         {useMath && (
           <button
             className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-catchup-blue-400 text-white rounded-md px-3 py-1 shadow-sm hover:bg-catchup-blue-500 transition-colors duration-200 z-10"
@@ -455,11 +461,22 @@ const InputGroup = ({
   const TextInputGroup = () => {
     return (
       <div className="my-1 relative">
-        {title ? (
-          <p className="text-md font-semibold pl-2 py-1 text-catchup-gray-400">
-            {title}
-          </p>
-        ) : null}
+        <div className="flex flex-row justify-between items-center">
+          <div>
+            {title ? (
+              <p className="text-md font-semibold pl-2 py-1 text-catchup-gray-400">
+                {title}
+              </p>
+            ) : null}
+          </div>
+          <div>
+            {value && limit ? (
+              <p className="text-md font-semibold pr-2 py-1 text-catchup-gray-400">
+                {value.length} / {limit}
+              </p>
+            ) : null}
+          </div>
+        </div>
         <div
           className={`w-full border ${
@@ -483,13 +500,12 @@ const InputGroup = ({
             defaultValue={defaultValue}
             placeholder={errorText ? errorText : placeholder}
             value={value}
-            onChange={onChange}
+            onChange={handleTextOnChange}
             onFocus={onFocus}
             onKeyDown={onKeyDown}
           />
         </div>
-        {/* Math constructor button */}
         {useMath && (
           <button
             className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-catchup-blue-400 text-white rounded-md px-3 py-1 shadow-sm hover:bg-catchup-blue-500 transition-colors duration-200"