@openmrs/esm-form-builder-app 2.5.0 → 2.5.1-pre.1001

package/src/components/interactive-builder/{delete-section-modal.component.tsx → delete-section.modal.tsx}

@@ -1,27 +1,23 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, ComposedModal, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
 import { showSnackbar } from '@openmrs/esm-framework';
 import type { Schema } from '../../types';
 
 interface DeleteSectionModal {
-  onModalChange: (showModal: boolean) => void;
+  closeModal: () => void;
   onSchemaChange: (schema: Schema) => void;
-  resetIndices: () => void;
   pageIndex: number;
   sectionIndex: number;
   schema: Schema;
-  showModal: boolean;
 }
 
 const DeleteSectionModal: React.FC<DeleteSectionModal> = ({
-  onModalChange,
+  closeModal,
   onSchemaChange,
-  resetIndices,
   pageIndex,
   sectionIndex,
   schema,
-  showModal,
 }) => {
   const { t } = useTranslation();
 
@@ -30,7 +26,6 @@ const DeleteSectionModal: React.FC<DeleteSectionModal> = ({
       schema.pages[pageIndex].sections.splice(sectionIndex, 1);
 
       onSchemaChange({ ...schema });
-      resetIndices();
 
       showSnackbar({
         title: t('success', 'Success!'),
@@ -50,8 +45,11 @@ const DeleteSectionModal: React.FC<DeleteSectionModal> = ({
   };
 
   return (
-    <ComposedModal open={showModal} onClose={() => onModalChange(false)} preventCloseOnClickOutside>
-      <ModalHeader title={t('deleteSectionConfirmation', 'Are you sure you want to delete this section?')} />
+    <>
+      <ModalHeader
+        title={t('deleteSectionConfirmation', 'Are you sure you want to delete this section?')}
+        closeModal={closeModal}
+      />
       <ModalBody>
         <p>
           {t(
@@ -61,20 +59,20 @@ const DeleteSectionModal: React.FC<DeleteSectionModal> = ({
         </p>
       </ModalBody>
       <ModalFooter>
-        <Button kind="secondary" onClick={() => onModalChange(false)}>
+        <Button kind="secondary" onClick={closeModal}>
           {t('cancel', 'Cancel')}
         </Button>
         <Button
           kind="danger"
           onClick={() => {
             deleteSection(pageIndex, sectionIndex);
-            onModalChange(false);
+            closeModal();
           }}
         >
           <span>{t('deleteSection', 'Delete section')}</span>
         </Button>
       </ModalFooter>
-    </ComposedModal>
+    </>
   );
 };
 

package/src/components/interactive-builder/draggable-question.component.tsx

@@ -1,36 +1,61 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useDraggable } from '@dnd-kit/core';
 import { CSS } from '@dnd-kit/utilities';
 import { useTranslation } from 'react-i18next';
 import { Button, CopyButton } from '@carbon/react';
 import { Draggable, Edit, TrashCan } from '@carbon/react/icons';
-import type { Question } from '../../types';
+import { showModal } from '@openmrs/esm-framework';
+import type { Question, Schema } from '../../types';
 import styles from './draggable-question.scss';
 
 interface DraggableQuestionProps {
-  question: Question;
-  pageIndex: number;
-  sectionIndex: number;
-  questionIndex: number;
   handleDuplicateQuestion: (question: Question, pageId: number, sectionId: number) => void;
-  handleEditButtonClick: (question: Question) => void;
-  handleDeleteButtonClick: (question: Question) => void;
+  onSchemaChange: (schema: Schema) => void;
+  pageIndex: number;
+  question: Question;
   questionCount: number;
+  questionIndex: number;
+  schema: Schema;
+  sectionIndex: number;
 }
 
-export const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
-  question,
-  pageIndex,
-  sectionIndex,
-  questionIndex,
+const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
   handleDuplicateQuestion,
-  handleDeleteButtonClick,
-  handleEditButtonClick,
+  onSchemaChange,
+  pageIndex,
+  question,
   questionCount,
+  questionIndex,
+  schema,
+  sectionIndex,
 }) => {
   const { t } = useTranslation();
   const draggableId = `question-${pageIndex}-${sectionIndex}-${questionIndex}`;
 
+  const launchEditQuestionModal = useCallback(() => {
+    const dispose = showModal('edit-question-modal', {
+      closeModal: () => dispose(),
+      questionToEdit: question,
+      pageIndex,
+      sectionIndex,
+      questionIndex,
+      onSchemaChange,
+      schema,
+    });
+  }, [onSchemaChange, pageIndex, question, questionIndex, schema, sectionIndex]);
+
+  const launchDeleteQuestionModal = useCallback(() => {
+    const dispose = showModal('delete-question-modal', {
+      closeModal: () => dispose(),
+      pageIndex,
+      sectionIndex,
+      question,
+      questionIndex,
+      onSchemaChange,
+      schema,
+    });
+  }, [onSchemaChange, pageIndex, question, questionIndex, schema, sectionIndex]);
+
   const { attributes, listeners, transform, isDragging, setNodeRef } = useDraggable({
     id: draggableId,
     disabled: questionCount <= 1,
@@ -72,11 +97,7 @@ export const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
           hasIconOnly
           iconDescription={t('editQuestion', 'Edit question')}
           kind="ghost"
-          onClick={() => {
-            if (!isDragging) {
-              handleEditButtonClick(question);
-            }
-          }}
+          onClick={launchEditQuestionModal}
           renderIcon={(props) => <Edit size={16} {...props} />}
           size="md"
         />
@@ -85,7 +106,7 @@ export const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
           hasIconOnly
           iconDescription={t('deleteQuestion', 'Delete question')}
           kind="ghost"
-          onClick={handleDeleteButtonClick}
+          onClick={launchDeleteQuestionModal}
           renderIcon={(props) => <TrashCan size={16} {...props} />}
           size="md"
         />
@@ -93,3 +114,5 @@ export const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
     </div>
   );
 };
+
+export default DraggableQuestion;

package/src/components/interactive-builder/droppable-container.component.tsx

@@ -1,23 +1,23 @@
 import React from 'react';
+import classNames from 'classnames';
 import { useDroppable } from '@dnd-kit/core';
+import styles from './droppable-container.scss';
 
 interface DroppableProps {
   id: string;
   children: React.ReactNode;
 }
 
-export function Droppable({ id, children }: DroppableProps) {
+function Droppable({ id, children }: DroppableProps) {
   const { isOver, setNodeRef } = useDroppable({
     id: id,
   });
 
-  const style = {
-    border: `1px solid ${isOver ? '#005d5d' : 'transparent'}`,
-  };
-
   return (
-    <div ref={setNodeRef} style={style}>
+    <div className={classNames(styles.droppable as string, { [styles.isOver]: isOver })} ref={setNodeRef}>
       {children}
     </div>
   );
 }
+
+export default Droppable;

package/src/components/interactive-builder/droppable-container.scss

@@ -0,0 +1,9 @@
+@use '@carbon/colors';
+
+.droppable {
+  border: 1px solid transparent;
+}
+
+.isOver {
+  border-color: colors.$teal-70;
+}