Renamed React component files to jsx; fixed VideoAnnotator bug

packages/mephisto-addons/src/FormComposer/FormComposer.js → packages/mephisto-addons/src/FormComposer/FormComposer.jsx

@@ -5,8 +5,8 @@
  */
 
 import React from "react";
-import TaskInstructionButton from "../TaskInstructionModal/TaskInstructionButton";
-import TaskInstructionModal from "../TaskInstructionModal/TaskInstructionModal";
+import TaskInstructionButton from "../TaskInstructionModal/TaskInstructionButton.jsx";
+import TaskInstructionModal from "../TaskInstructionModal/TaskInstructionModal.jsx";
 import {
   DEFAULT_COLLAPSABLE,
   DEFAULT_INITIALLY_COLLAPSED,
@@ -23,9 +23,9 @@ import {
   TextareaField,
 } from "./fields";
 import "./FormComposer.css";
-import { FormErrors } from "./FormErrors";
-import { SectionErrors } from "./SectionErrors";
-import { SectionErrorsCountBadge } from "./SectionErrorsCountBadge";
+import { FormErrors } from "./FormErrors.jsx";
+import { SectionErrors } from "./SectionErrors.jsx";
+import { SectionErrorsCountBadge } from "./SectionErrorsCountBadge.jsx";
 import {
   getDefaultFormFieldValue,
   getFormatStringWithTokensFunction,

packages/mephisto-addons/src/FormComposer/fields/CheckboxField.js → packages/mephisto-addons/src/FormComposer/fields/CheckboxField.jsx

@@ -7,7 +7,7 @@
 import React from "react";
 import { runCustomTrigger } from "../utils";
 import "./CheckboxField.css";
-import { Errors } from "./Errors";
+import { Errors } from "./Errors.jsx";
 
 const DEFAULT_VALUE = {};
 

packages/mephisto-addons/src/FormComposer/fields/FileField.js → packages/mephisto-addons/src/FormComposer/fields/FileField.jsx

@@ -13,7 +13,7 @@ import {
 } from "../constants";
 import { runCustomTrigger } from "../utils";
 import { checkFieldRequiredness } from "../validation/helpers";
-import { Errors } from "./Errors";
+import { Errors } from "./Errors.jsx";
 import "./FileField.css";
 
 const DEFAULT_VALUE = "";

packages/mephisto-addons/src/FormComposer/fields/InputField.js → packages/mephisto-addons/src/FormComposer/fields/InputField.jsx

@@ -7,7 +7,7 @@
 import React from "react";
 import { runCustomTrigger } from "../utils";
 import { checkFieldRequiredness } from "../validation/helpers";
-import { Errors } from "./Errors";
+import { Errors } from "./Errors.jsx";
 import "./InputField.css";
 
 const DEFAULT_VALUE = "";
@@ -50,7 +50,11 @@ function InputField({
   }
 
   function onChange(e) {
+    // Update widget value
+    setValue(e.target.value);
+    // Update form data
     updateFormData(field.name, e.target.value, e);
+    // Run custom triggers
     _runCustomTrigger("onChange");
   }
 
@@ -77,7 +81,13 @@ function InputField({
 
   // Value in formData is updated
   React.useEffect(() => {
-    setValue(formData[field.name] || DEFAULT_VALUE);
+    const formDataValue = formData[field.name];
+
+    // Do not update value until it was updated only outside the widget.
+    // Otherwise, it will put cursor caret to the end of string every typed character
+    if (formDataValue !== value) {
+      setValue(formDataValue || DEFAULT_VALUE);
+    }
   }, [formData[field.name]]);
 
   return (

packages/mephisto-addons/src/FormComposer/fields/RadioField.js → packages/mephisto-addons/src/FormComposer/fields/RadioField.jsx

@@ -6,7 +6,7 @@
 
 import React from "react";
 import { runCustomTrigger } from "../utils";
-import { Errors } from "./Errors";
+import { Errors } from "./Errors.jsx";
 import "./RadioField.css";
 
 const DEFAULT_VALUE = "";

packages/mephisto-addons/src/FormComposer/fields/SelectField.js → packages/mephisto-addons/src/FormComposer/fields/SelectField.jsx

@@ -10,7 +10,7 @@ import $ from "jquery";
 import React from "react";
 import { runCustomTrigger } from "../utils";
 import { checkFieldRequiredness } from "../validation/helpers";
-import { Errors } from "./Errors";
+import { Errors } from "./Errors.jsx";
 import "./SelectField.css";
 
 function SelectField({

packages/mephisto-addons/src/FormComposer/fields/TextareaField.js → packages/mephisto-addons/src/FormComposer/fields/TextareaField.jsx

@@ -7,7 +7,7 @@
 import React from "react";
 import { runCustomTrigger } from "../utils";
 import { checkFieldRequiredness } from "../validation/helpers";
-import { Errors } from "./Errors";
+import { Errors } from "./Errors.jsx";
 import "./TextareaField.css";
 
 const DEFAULT_VALUE = "";
@@ -51,7 +51,11 @@ function TextareaField({
   }
 
   function onChange(e) {
+    // Update widget value
+    setValue(e.target.value);
+    // Update form data
     updateFormData(field.name, e.target.value, e);
+    // Run custom triggers
     _runCustomTrigger("onChange");
   }
 
@@ -78,7 +82,13 @@ function TextareaField({
 
   // Value in formData is updated
   React.useEffect(() => {
-    setValue(formData[field.name] || DEFAULT_VALUE);
+    const formDataValue = formData[field.name];
+
+    // Do not update value until it was updated only outside the widget.
+    // Otherwise, it will put cursor caret to the end of string every typed character
+    if (formDataValue !== value) {
+      setValue(formDataValue || DEFAULT_VALUE);
+    }
   }, [formData[field.name]]);
 
   return (

packages/mephisto-addons/src/FormComposer/fields/index.js

@@ -1,7 +1,7 @@
-export { CheckboxField } from "./CheckboxField";
-export { FileField } from "./FileField";
-export { HiddenField } from "./HiddenField";
-export { InputField } from "./InputField";
-export { RadioField } from "./RadioField";
-export { SelectField } from "./SelectField";
-export { TextareaField } from "./TextareaField";
+export { CheckboxField } from "./CheckboxField.jsx";
+export { FileField } from "./FileField.jsx";
+export { HiddenField } from "./HiddenField.jsx";
+export { InputField } from "./InputField.jsx";
+export { RadioField } from "./RadioField.jsx";
+export { SelectField } from "./SelectField.jsx";
+export { TextareaField } from "./TextareaField.jsx";

packages/mephisto-addons/src/VideoAnnotator/AnnotationTrack.jsx

@@ -15,12 +15,11 @@ import {
   COLORS,
   DELAY_CLICK_ON_SECTION_MSEC,
   DELAY_SHOW_OVERLAPPING_MESSAGE_MSEC,
-  INIT_SECTION,
   POPOVER_INVALID_SEGMENT_CLASS,
   POPOVER_INVALID_SEGMENT_PROPS,
   START_NEXT_SECTION_PLUS_SEC,
 } from "./constants";
-import { secontsToTime } from "./helpers.jsx";
+import { secontsToTime } from "./helpers";
 import TrackSegment from "./TrackSegment.jsx";
 import { validateTimeFieldsOnSave } from "./utils";
 
@@ -138,11 +137,33 @@ function AnnotationTrack({
     }
   }
 
+  function getCleanSegmentToChangeData() {
+    const typeDefaultValueMapping = {
+      [FieldType.CHECKBOX]: null,
+      [FieldType.EMAIL]: "",
+      [FieldType.FILE]: "",
+      [FieldType.HIDDEN]: "",
+      [FieldType.INPUT]: "",
+      [FieldType.NUMBER]: "",
+      [FieldType.PASSWORD]: "",
+      [FieldType.RADIO]: null,
+      [FieldType.SELECT]: null,
+      [FieldType.TEXTAREA]: "",
+    };
+    const _segmentToChange = {};
+    segmentFields.map((field, i) => {
+      const fieldDefaultValue = typeDefaultValueMapping[field.type] || "";
+      _segmentToChange[field.name] = fieldDefaultValue;
+    });
+
+    return _segmentToChange;
+  }
+
   function onClickAddSegment(e) {
     const segmentsCount = Object.keys(annotationTrack.segments).length;
 
-    const newSegment = cloneDeep(INIT_SECTION);
-    newSegment.title = `Segment #${segmentsCount + 1} `;
+    const newSegment = cloneDeep(getCleanSegmentToChangeData());
+    newSegment.title = `Segment #${segmentsCount + 1}`;
 
     // Get current video time and set it to new segment
     let currentVideoTime = null;
@@ -212,7 +233,11 @@ function AnnotationTrack({
     }, DELAY_CLICK_ON_SECTION_MSEC);
   }
 
-  function onClickSaveFormField(fieldName, value, e) {
+  function updateSegmentToChangeFormData(fieldName, value, e) {
+    if (e) {
+      e.preventDefault();
+    }
+
     setSegmentToChange((prevState) => {
       return {
         ...prevState,
@@ -442,7 +467,7 @@ function AnnotationTrack({
                 className={`btn btn-sm btn-outline-dark`}
                 type={"button"}
                 onClick={(e) =>
-                  onClickSaveFormField(
+                  updateSegmentToChangeFormData(
                     "start_sec",
                     player ? player.currentTime() : 0,
                     e
@@ -468,7 +493,7 @@ function AnnotationTrack({
                 className={`btn btn-sm btn-outline-dark`}
                 type={"button"}
                 onClick={(e) =>
-                  onClickSaveFormField(
+                  updateSegmentToChangeFormData(
                     "end_sec",
                     player ? player.currentTime() : 0,
                     e
@@ -539,7 +564,7 @@ function AnnotationTrack({
                       className={`form-control-sm`}
                       field={_field}
                       formData={segmentToChange}
-                      updateFormData={onClickSaveFormField}
+                      updateFormData={updateSegmentToChangeFormData}
                       disabled={inReviewState}
                       initialFormData={segmentToChange}
                       inReviewState={inReviewState}
@@ -555,7 +580,7 @@ function AnnotationTrack({
                       className={`form-control-sm`}
                       field={_field}
                       formData={segmentToChange}
-                      updateFormData={onClickSaveFormField}
+                      updateFormData={updateSegmentToChangeFormData}
                       disabled={inReviewState}
                       initialFormData={segmentToChange}
                       inReviewState={inReviewState}
@@ -571,7 +596,7 @@ function AnnotationTrack({
                     <FormComposerFields.CheckboxField
                       field={_field}
                       formData={segmentToChange}
-                      updateFormData={onClickSaveFormField}
+                      updateFormData={updateSegmentToChangeFormData}
                       disabled={inReviewState}
                       initialFormData={segmentToChange}
                       inReviewState={inReviewState}
@@ -586,7 +611,7 @@ function AnnotationTrack({
                     <FormComposerFields.RadioField
                       field={_field}
                       formData={segmentToChange}
-                      updateFormData={onClickSaveFormField}
+                      updateFormData={updateSegmentToChangeFormData}
                       disabled={inReviewState}
                       initialFormData={segmentToChange}
                       inReviewState={inReviewState}
@@ -601,7 +626,7 @@ function AnnotationTrack({
                     <FormComposerFields.SelectField
                       field={_field}
                       formData={segmentToChange}
-                      updateFormData={onClickSaveFormField}
+                      updateFormData={updateSegmentToChangeFormData}
                       disabled={inReviewState}
                       initialFormData={segmentToChange}
                       inReviewState={inReviewState}

packages/mephisto-addons/src/VideoAnnotator/AnnotationTracks.jsx

@@ -16,7 +16,7 @@ import {
 import {
   convertAnnotationTasksDataObjectsRoLists,
   convertInitialDataListsToObjects,
-} from "./helpers.jsx";
+} from "./helpers";
 
 function AnnotationTracks({
   className,

packages/mephisto-addons/src/VideoAnnotator/TrackSegment.jsx

@@ -7,7 +7,7 @@
 import { Popover } from "bootstrap";
 import React from "react";
 import { MIN_SEGMENT_WIDTH_PX } from "./constants";
-import { secontsToTime } from "./helpers.jsx";
+import { secontsToTime } from "./helpers";
 import "./TrackSegment.css";
 
 function TrackSegment({