catchup-library-web 2.6.2 → 2.6.4

package/dist/index.d.mts

@@ -282,7 +282,7 @@ interface IInputGroupProps {
     title?: string;
     defaultValue?: string;
     placeholder?: string;
-    value: string;
+    value: any;
     minValue?: string;
     maxValue?: string;
     onFocus?: (e: any) => void;
@@ -298,6 +298,8 @@ interface IInputGroupProps {
     disabled?: boolean;
     limit?: number;
     useMath?: boolean;
+    checked?: boolean;
+    description?: string;
 }
 interface ILeftTextRightInputGroupProps {
     type: string;
@@ -349,7 +351,7 @@ declare global {
         }
     }
 }
-declare const InputGroup: ({ type, title, defaultValue, placeholder, value, minValue, maxValue, onFocus, onChange, onClick, onKeyDown, optionList, errorText, multiple, accept, theme, useMinHeight, disabled, limit, useMath, }: IInputGroupProps) => react_jsx_runtime.JSX.Element;
+declare const InputGroup: ({ type, title, defaultValue, placeholder, value, minValue, maxValue, onFocus, onChange, onClick, onKeyDown, optionList, errorText, multiple, accept, theme, useMinHeight, disabled, limit, useMath, checked, description, }: IInputGroupProps) => react_jsx_runtime.JSX.Element;
 
 declare const LeftTextRightInputGroup: ({ type, title, value, optionList, onChange, disabled, errorText, }: ILeftTextRightInputGroupProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -282,7 +282,7 @@ interface IInputGroupProps {
     title?: string;
     defaultValue?: string;
     placeholder?: string;
-    value: string;
+    value: any;
     minValue?: string;
     maxValue?: string;
     onFocus?: (e: any) => void;
@@ -298,6 +298,8 @@ interface IInputGroupProps {
     disabled?: boolean;
     limit?: number;
     useMath?: boolean;
+    checked?: boolean;
+    description?: string;
 }
 interface ILeftTextRightInputGroupProps {
     type: string;
@@ -349,7 +351,7 @@ declare global {
         }
     }
 }
-declare const InputGroup: ({ type, title, defaultValue, placeholder, value, minValue, maxValue, onFocus, onChange, onClick, onKeyDown, optionList, errorText, multiple, accept, theme, useMinHeight, disabled, limit, useMath, }: IInputGroupProps) => react_jsx_runtime.JSX.Element;
+declare const InputGroup: ({ type, title, defaultValue, placeholder, value, minValue, maxValue, onFocus, onChange, onClick, onKeyDown, optionList, errorText, multiple, accept, theme, useMinHeight, disabled, limit, useMath, checked, description, }: IInputGroupProps) => react_jsx_runtime.JSX.Element;
 
 declare const LeftTextRightInputGroup: ({ type, title, value, optionList, onChange, disabled, errorText, }: ILeftTextRightInputGroupProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -3844,6 +3844,7 @@ var import_react_katex2 = require("react-katex");
 
 // src/components/groups/InputGroup.tsx
 var import_react_select = __toESM(require("react-select"));
+var import_react_switch = __toESM(require("react-switch"));
 var import_react12 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var InputGroup = ({
@@ -3866,7 +3867,9 @@ var InputGroup = ({
   useMinHeight,
   disabled,
   limit,
-  useMath
+  useMath,
+  checked,
+  description
 }) => {
   const textAreaRef = (0, import_react12.useRef)(null);
   const latexTextAreaRef = (0, import_react12.useRef)(null);
@@ -4266,6 +4269,39 @@ var InputGroup = ({
       )
     ] });
   };
+  const SwitchInputGroup = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col my-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-row items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          import_react_switch.default,
+          {
+            onChange: () => {
+              onClick && onClick(!checked);
+            },
+            checkedIcon: false,
+            offColor: "#e2e8f0",
+            onColor: "#57C2D3",
+            offHandleColor: "#57C2D3",
+            onHandleColor: "#e2e8f0",
+            uncheckedIcon: false,
+            checked: !!checked,
+            height: 20,
+            width: 40,
+            handleDiameter: 14,
+            disabled
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          "p",
+          {
+            className: `${checked ? "font-bold" : "text-catchup-gray"} px-2 transition-all duration-300`,
+            children: title
+          }
+        )
+      ] }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-sm text-catchup-gray-300 mt-1 ml-12", children: description }) : null
+    ] });
+  };
   const RenderMainContent = () => {
     if (type === "text" || type === "number") {
       return TextInputGroup();
@@ -4281,6 +4317,8 @@ var InputGroup = ({
       return FileInputGroup();
     } else if (type === "checkbox") {
       return CheckboxInputGroup();
+    } else if (type === "switch") {
+      return SwitchInputGroup();
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
@@ -4943,6 +4981,7 @@ var FillInTheBlanksActivityMaterialContent = ({
     setMousePosition({ x: 0, y: 0 });
   };
   const handleTouchStart = (e, option, element) => {
+    e.preventDefault();
     const touch = e.touches[0];
     setDraggedOption(option);
     setDraggedElement(element);
@@ -5060,6 +5099,7 @@ var FillInTheBlanksActivityMaterialContent = ({
               {
                 ref: draggedOption === option ? dragElementRef : null,
                 className: `${draggedOption === option ? "opacity-40" : selectedOption === option ? "ring-2 ring-blue-500" : "opacity-100"} transition-all duration-200`,
+                style: { touchAction: "none" },
                 onMouseDown: (e) => handleMouseDown(e, option),
                 onTouchStart: (e) => handleTouchStart(e, option, e.currentTarget),
                 onTouchMove: handleTouchMove,
@@ -5431,6 +5471,7 @@ var GroupingActivityMaterialContent = ({
   };
   const handleTouchStart = (e, materialValue, element) => {
     if (!checkCanAnswerQuestion()) return;
+    e.preventDefault();
     const touch = e.touches[0];
     setDraggedValue(materialValue);
     setDraggedElement(element);
@@ -5540,6 +5581,7 @@ var GroupingActivityMaterialContent = ({
           {
             ref: draggedValue === materialValue ? dragElementRef : null,
             className: `${draggedValue === materialValue ? "opacity-40" : selectedValue === materialValue ? "ring-2 ring-blue-500" : "opacity-100"} transition-all duration-200`,
+            style: { touchAction: "none" },
             onMouseDown: (e) => handleMouseDown(e, materialValue),
             onTouchStart: (e) => handleTouchStart(e, materialValue, e.currentTarget),
             onTouchMove: handleTouchMove,
@@ -5874,6 +5916,7 @@ var MatchingActivityMaterialContent = ({
   };
   const handleTouchStart = (e, materialValue, element) => {
     if (!checkCanAnswerQuestion()) return;
+    e.preventDefault();
     const touch = e.touches[0];
     setDraggedValue(materialValue);
     setDraggedElement(element);
@@ -5987,6 +6030,7 @@ var MatchingActivityMaterialContent = ({
             {
               ref: draggedValue === materialValue ? dragElementRef : null,
               className: `${draggedValue === materialValue ? "opacity-40" : selectedValue === materialValue ? "ring-2 ring-blue-500" : "opacity-100"} transition-all duration-200`,
+              style: { touchAction: "none" },
               onMouseDown: (e) => handleMouseDown(e, materialValue),
               onTouchStart: (e) => handleTouchStart(e, materialValue, e.currentTarget),
               onTouchMove: handleTouchMove,
@@ -6572,7 +6616,7 @@ var OpenEndedActivityMaterialContent = ({
           src: answerMapAnswer,
           alt: "document",
           size: "custom",
-          className: "w-[80%] rounded-catchup-xlarge"
+          className: "w-[80%] rounded-catchup-xlarge max-h-[50vh] object-contain"
         }
       ) });
     } else if (fileType === "PDF") {
@@ -6614,7 +6658,7 @@ var OpenEndedActivityMaterialContent = ({
         src: answerMapAnswer,
         alt: "document",
         size: "custom",
-        className: "w-[80%] rounded-catchup-xlarge"
+        className: "w-[80%] rounded-catchup-xlarge max-h-[50vh] object-contain"
       }
     ) }) : fileType === "PDF" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(BasePDF_default, { file: answerMapAnswer }) }) : null });
   };
@@ -6771,6 +6815,7 @@ var OrderingActivityMaterialContent = ({
   };
   const handleTouchStart = (e, materialKey, element) => {
     if (!checkCanAnswerQuestion()) return;
+    e.preventDefault();
     const touch = e.touches[0];
     setDraggedKey(materialKey);
     setDraggedElement(element);
@@ -6902,6 +6947,7 @@ var OrderingActivityMaterialContent = ({
                     ref: draggedKey === materialKey ? dragElementRef : null,
                     "data-ordering-drop-zone": materialKey,
                     className: `flex-1 ${draggedKey === materialKey ? "opacity-40" : selectedKey === materialKey ? "ring-2 ring-blue-500" : "opacity-100"} ${dropTargetKey === materialKey && draggedKey !== materialKey ? "ring-2 ring-blue-400 bg-blue-50" : ""} transition-all duration-200`,
+                    style: { touchAction: "none" },
                     onMouseDown: (e) => handleMouseDown(e, materialKey),
                     onMouseEnter: () => draggedKey && draggedKey !== materialKey && setDropTargetKey(materialKey),
                     onMouseLeave: () => setDropTargetKey(null),

package/dist/index.mjs

@@ -3610,6 +3610,7 @@ import { InlineMath as InlineMath2 } from "react-katex";
 
 // src/components/groups/InputGroup.tsx
 import Select from "react-select";
+import Switch from "react-switch";
 import { useEffect as useEffect3, useRef, useState as useState12, useCallback } from "react";
 import { Fragment, jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
 var InputGroup = ({
@@ -3632,7 +3633,9 @@ var InputGroup = ({
   useMinHeight,
   disabled,
   limit,
-  useMath
+  useMath,
+  checked,
+  description
 }) => {
   const textAreaRef = useRef(null);
   const latexTextAreaRef = useRef(null);
@@ -4032,6 +4035,39 @@ var InputGroup = ({
       )
     ] });
   };
+  const SwitchInputGroup = () => {
+    return /* @__PURE__ */ jsxs14("div", { className: "flex flex-col my-1", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "flex flex-row items-center", children: [
+        /* @__PURE__ */ jsx23(
+          Switch,
+          {
+            onChange: () => {
+              onClick && onClick(!checked);
+            },
+            checkedIcon: false,
+            offColor: "#e2e8f0",
+            onColor: "#57C2D3",
+            offHandleColor: "#57C2D3",
+            onHandleColor: "#e2e8f0",
+            uncheckedIcon: false,
+            checked: !!checked,
+            height: 20,
+            width: 40,
+            handleDiameter: 14,
+            disabled
+          }
+        ),
+        /* @__PURE__ */ jsx23(
+          "p",
+          {
+            className: `${checked ? "font-bold" : "text-catchup-gray"} px-2 transition-all duration-300`,
+            children: title
+          }
+        )
+      ] }),
+      description ? /* @__PURE__ */ jsx23("p", { className: "text-sm text-catchup-gray-300 mt-1 ml-12", children: description }) : null
+    ] });
+  };
   const RenderMainContent = () => {
     if (type === "text" || type === "number") {
       return TextInputGroup();
@@ -4047,6 +4083,8 @@ var InputGroup = ({
       return FileInputGroup();
     } else if (type === "checkbox") {
       return CheckboxInputGroup();
+    } else if (type === "switch") {
+      return SwitchInputGroup();
     }
   };
   return /* @__PURE__ */ jsxs14(Fragment, { children: [
@@ -4709,6 +4747,7 @@ var FillInTheBlanksActivityMaterialContent = ({
     setMousePosition({ x: 0, y: 0 });
   };
   const handleTouchStart = (e, option, element) => {
+    e.preventDefault();
     const touch = e.touches[0];
     setDraggedOption(option);
     setDraggedElement(element);
@@ -4826,6 +4865,7 @@ var FillInTheBlanksActivityMaterialContent = ({
               {
                 ref: draggedOption === option ? dragElementRef : null,
                 className: `${draggedOption === option ? "opacity-40" : selectedOption === option ? "ring-2 ring-blue-500" : "opacity-100"} transition-all duration-200`,
+                style: { touchAction: "none" },
                 onMouseDown: (e) => handleMouseDown(e, option),
                 onTouchStart: (e) => handleTouchStart(e, option, e.currentTarget),
                 onTouchMove: handleTouchMove,
@@ -5197,6 +5237,7 @@ var GroupingActivityMaterialContent = ({
   };
   const handleTouchStart = (e, materialValue, element) => {
     if (!checkCanAnswerQuestion()) return;
+    e.preventDefault();
     const touch = e.touches[0];
     setDraggedValue(materialValue);
     setDraggedElement(element);
@@ -5306,6 +5347,7 @@ var GroupingActivityMaterialContent = ({
           {
             ref: draggedValue === materialValue ? dragElementRef : null,
             className: `${draggedValue === materialValue ? "opacity-40" : selectedValue === materialValue ? "ring-2 ring-blue-500" : "opacity-100"} transition-all duration-200`,
+            style: { touchAction: "none" },
             onMouseDown: (e) => handleMouseDown(e, materialValue),
             onTouchStart: (e) => handleTouchStart(e, materialValue, e.currentTarget),
             onTouchMove: handleTouchMove,
@@ -5640,6 +5682,7 @@ var MatchingActivityMaterialContent = ({
   };
   const handleTouchStart = (e, materialValue, element) => {
     if (!checkCanAnswerQuestion()) return;
+    e.preventDefault();
     const touch = e.touches[0];
     setDraggedValue(materialValue);
     setDraggedElement(element);
@@ -5753,6 +5796,7 @@ var MatchingActivityMaterialContent = ({
             {
               ref: draggedValue === materialValue ? dragElementRef : null,
               className: `${draggedValue === materialValue ? "opacity-40" : selectedValue === materialValue ? "ring-2 ring-blue-500" : "opacity-100"} transition-all duration-200`,
+              style: { touchAction: "none" },
               onMouseDown: (e) => handleMouseDown(e, materialValue),
               onTouchStart: (e) => handleTouchStart(e, materialValue, e.currentTarget),
               onTouchMove: handleTouchMove,
@@ -6338,7 +6382,7 @@ var OpenEndedActivityMaterialContent = ({
           src: answerMapAnswer,
           alt: "document",
           size: "custom",
-          className: "w-[80%] rounded-catchup-xlarge"
+          className: "w-[80%] rounded-catchup-xlarge max-h-[50vh] object-contain"
         }
       ) });
     } else if (fileType === "PDF") {
@@ -6380,7 +6424,7 @@ var OpenEndedActivityMaterialContent = ({
         src: answerMapAnswer,
         alt: "document",
         size: "custom",
-        className: "w-[80%] rounded-catchup-xlarge"
+        className: "w-[80%] rounded-catchup-xlarge max-h-[50vh] object-contain"
       }
     ) }) : fileType === "PDF" ? /* @__PURE__ */ jsx39("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ jsx39(BasePDF_default, { file: answerMapAnswer }) }) : null });
   };
@@ -6537,6 +6581,7 @@ var OrderingActivityMaterialContent = ({
   };
   const handleTouchStart = (e, materialKey, element) => {
     if (!checkCanAnswerQuestion()) return;
+    e.preventDefault();
     const touch = e.touches[0];
     setDraggedKey(materialKey);
     setDraggedElement(element);
@@ -6668,6 +6713,7 @@ var OrderingActivityMaterialContent = ({
                     ref: draggedKey === materialKey ? dragElementRef : null,
                     "data-ordering-drop-zone": materialKey,
                     className: `flex-1 ${draggedKey === materialKey ? "opacity-40" : selectedKey === materialKey ? "ring-2 ring-blue-500" : "opacity-100"} ${dropTargetKey === materialKey && draggedKey !== materialKey ? "ring-2 ring-blue-400 bg-blue-50" : ""} transition-all duration-200`,
+                    style: { touchAction: "none" },
                     onMouseDown: (e) => handleMouseDown(e, materialKey),
                     onMouseEnter: () => draggedKey && draggedKey !== materialKey && setDropTargetKey(materialKey),
                     onMouseLeave: () => setDropTargetKey(null),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "2.6.2",
+  "version": "2.6.4",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -24,7 +24,8 @@
     "react-loader-spinner": ">=5.0.0",
     "react-modal": "^3.16.0",
     "react-pdf": ">=7.0.0",
-    "react-select": "^5.8.0"
+    "react-select": "^5.8.0",
+    "react-switch": "^7.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.0",
@@ -40,6 +41,7 @@
     "react-modal": "^3.16.3",
     "react-pdf": "^10.0.1",
     "react-select": "^5.10.0",
+    "react-switch": "^7.0.0",
     "tsup": "^8.3.6",
     "typescript": "^5.9.2"
   }

package/src/components/activities/material-contents/FillInTheBlanksActivityMaterialContent.tsx

@@ -122,6 +122,7 @@ const FillInTheBlanksActivityMaterialContent = ({
     option: any,
     element: HTMLElement,
   ): void => {
+    e.preventDefault();
     const touch = e.touches[0];
     setDraggedOption(option);
     setDraggedElement(element);
@@ -273,6 +274,7 @@ const FillInTheBlanksActivityMaterialContent = ({
                     ? "ring-2 ring-blue-500"
                     : "opacity-100"
               } transition-all duration-200`}
+              style={{ touchAction: "none" }}
               onMouseDown={(e) => handleMouseDown(e, option)}
               onTouchStart={(e) => handleTouchStart(e, option, e.currentTarget)}
               onTouchMove={handleTouchMove}

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

@@ -201,6 +201,7 @@ const GroupingActivityMaterialContent = ({
     element: HTMLElement,
   ): void => {
     if (!checkCanAnswerQuestion()) return;
+    e.preventDefault();
     const touch = e.touches[0];
     setDraggedValue(materialValue);
     setDraggedElement(element);
@@ -366,6 +367,7 @@ const GroupingActivityMaterialContent = ({
                         ? "ring-2 ring-blue-500"
                         : "opacity-100"
                   } transition-all duration-200`}
+                  style={{ touchAction: "none" }}
                   onMouseDown={(e) => handleMouseDown(e, materialValue)}
                   onTouchStart={(e) =>
                     handleTouchStart(e, materialValue, e.currentTarget)

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

@@ -198,6 +198,7 @@ const MatchingActivityMaterialContent = ({
     element: HTMLElement,
   ): void => {
     if (!checkCanAnswerQuestion()) return;
+    e.preventDefault();
     const touch = e.touches[0];
     setDraggedValue(materialValue);
     setDraggedElement(element);
@@ -365,6 +366,7 @@ const MatchingActivityMaterialContent = ({
                       ? "ring-2 ring-blue-500"
                       : "opacity-100"
                 } transition-all duration-200`}
+                style={{ touchAction: "none" }}
                 onMouseDown={(e) => handleMouseDown(e, materialValue)}
                 onTouchStart={(e) =>
                   handleTouchStart(e, materialValue, e.currentTarget)

package/src/components/activities/material-contents/OpenEndedActivityMaterialContent.tsx

@@ -29,7 +29,7 @@ const OpenEndedActivityMaterialContent = ({
             src={answerMapAnswer}
             alt="document"
             size="custom"
-            className="w-[80%] rounded-catchup-xlarge"
+            className="w-[80%] rounded-catchup-xlarge max-h-[50vh] object-contain"
           />
         </div>
       );
@@ -74,7 +74,7 @@ const OpenEndedActivityMaterialContent = ({
               src={answerMapAnswer}
               alt="document"
               size="custom"
-              className="w-[80%] rounded-catchup-xlarge"
+              className="w-[80%] rounded-catchup-xlarge max-h-[50vh] object-contain"
             />
           </div>
         ) : fileType === "PDF" ? (

package/src/components/activities/material-contents/OrderingActivityMaterialContent.tsx

@@ -95,6 +95,7 @@ const OrderingActivityMaterialContent = ({
     element: HTMLElement,
   ): void => {
     if (!checkCanAnswerQuestion()) return;
+    e.preventDefault();
     const touch = e.touches[0];
     setDraggedKey(materialKey);
     setDraggedElement(element);
@@ -286,6 +287,7 @@ const OrderingActivityMaterialContent = ({
                     ? "ring-2 ring-blue-400 bg-blue-50"
                     : ""
                 } transition-all duration-200`}
+                style={{ touchAction: "none" }}
                 onMouseDown={(e) => handleMouseDown(e, materialKey)}
                 onMouseEnter={() =>
                   draggedKey &&

package/src/components/groups/InputGroup.tsx

@@ -1,4 +1,5 @@
 import Select from "react-select";
+import Switch from "react-switch";
 import i18n from "../../language/i18n";
 import { useEffect, useRef, useState, useCallback } from "react";
 import { IInputGroupProps } from "../../properties/GroupProperties";
@@ -65,6 +66,8 @@ const InputGroup = ({
   disabled,
   limit,
   useMath,
+  checked,
+  description,
 }: IInputGroupProps) => {
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
   const latexTextAreaRef = useRef<HTMLTextAreaElement>(null);
@@ -534,6 +537,43 @@ const InputGroup = ({
     );
   };
 
+  const SwitchInputGroup = () => {
+    return (
+      <div className="flex flex-col my-1">
+        <div className="flex flex-row items-center">
+          <Switch
+            onChange={() => {
+              onClick && onClick(!checked);
+            }}
+            checkedIcon={false}
+            offColor={"#e2e8f0"}
+            onColor={"#57C2D3"}
+            offHandleColor={"#57C2D3"}
+            onHandleColor={"#e2e8f0"}
+            uncheckedIcon={false}
+            checked={!!checked}
+            height={20}
+            width={40}
+            handleDiameter={14}
+            disabled={disabled}
+          />
+          <p
+            className={`${
+              checked ? "font-bold" : "text-catchup-gray"
+            } px-2 transition-all duration-300`}
+          >
+            {title}
+          </p>
+        </div>
+        {description ? (
+          <p className="text-sm text-catchup-gray-300 mt-1 ml-12">
+            {description}
+          </p>
+        ) : null}
+      </div>
+    );
+  };
+
   const RenderMainContent = () => {
     if (type === "text" || type === "number") {
       return TextInputGroup();
@@ -549,6 +589,8 @@ const InputGroup = ({
       return FileInputGroup();
     } else if (type === "checkbox") {
       return CheckboxInputGroup();
+    } else if (type === "switch") {
+      return SwitchInputGroup();
     }
   };
 

package/src/properties/GroupProperties.ts

@@ -3,7 +3,7 @@ export interface IInputGroupProps {
   title?: string;
   defaultValue?: string;
   placeholder?: string;
-  value: string;
+  value: any;
   minValue?: string;
   maxValue?: string;
   onFocus?: (e: any) => void;
@@ -19,6 +19,8 @@ export interface IInputGroupProps {
   disabled?: boolean;
   limit?: number;
   useMath?: boolean;
+  checked?: boolean;
+  description?: string;
 }
 
 export interface ILeftTextRightInputGroupProps {