added support for questions order with drag & drop (#4)

* added support for questions order with drag & drop

* fixed lib compile problems

* readme update

* readme update

Author: hugobarragon

README.md

@@ -20,6 +20,7 @@ Advantages:
 - Internationalization on questions and answers
 - Internationalization on Builder
 - Centralized form builder and from delivery
+- Drag & Drop to order/sort questions on `<QuizzBuilder/>`
 
 ## Installation
 
@@ -48,13 +49,13 @@ import { QuizzBuilder } from "react-quizzes" <QuizzBuilder onChange={(QuizzData)
 
 QuizzBuilder component objective is to provide the user a nice and smooth interface to build quizzes
 
-| Props          | Type            | Default                                                                        | Description                                                                      |
-| -------------- | --------------- | ------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- |
-| `onChange`     | `Function`      | ``                                                                             | will returns builded quizz in QuizzData type                                     |
-| `initialValue` | `QuizzData`     | `` | initial value to QuizzBuilder, useful if user wants to edit a saved quizz |
-| `toolBox`      | `QuizzToolBox`  | `default QuizzToolBox`                                                         | list of inputs to use, defaults to react-quizz but custom inputs can be supplied |
-| `language`     | `string`        | `en`                                                                           | Language that QuizzBuilder will show                                             |
-| `messages`     | `QuizzMessages` | `default QuizzMessages`                                                        | Object with each language and each language with each text translation           |
+| Props          | Type            | Default                 | Description                                                                      |
+| -------------- | --------------- | ----------------------- | -------------------------------------------------------------------------------- |
+| `onChange`     | `Function`      | ``                      | will returns builded quizz in QuizzData type                                     |
+| `initialValue` | `QuizzData`     | ``                      | initial value to QuizzBuilder, useful if user wants to edit a saved quizz        |
+| `toolBox`      | `QuizzToolBox`  | `default QuizzToolBox`  | list of inputs to use, defaults to react-quizz but custom inputs can be supplied |
+| `language`     | `string`        | `en`                    | Language that QuizzBuilder will show                                             |
+| `messages`     | `QuizzMessages` | `default QuizzMessages` | Object with each language and each language with each text translation           |
 
 # Quiz
 
@@ -87,7 +88,7 @@ There is a prop `wrappedComponentRef` that gives you access to make basically an
 ```jsx
 import { Quiz } from "react-quizzes";
 
-saveQuizRef = quizRef => {
+saveQuizRef = (quizRef) => {
   // saves Quizz component ref
   this.quizRef = quizRef;
 };
@@ -117,7 +118,6 @@ handleCustomSubmit = () => {
 New languages support can be added or replace the existing ones  
 [Existing translations](./src/translations/TranslatedText.tsx#defaultMessages)
 
-
 [![Edit react-quizzesExample RU locale](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-quizzesexample-ru-locale-wx50m?fontsize=14&hidenavigation=1&theme=dark)
 
 ```javascript
@@ -199,3 +199,21 @@ but if you need a custom one follow antd-design guidelines and probably you will
 # License
 
 MIT License
+
+# DEV
+
+Start project
+
+```
+  npm i
+  npm start
+```
+
+# Build lib
+
+Start project
+
+```
+  npm i
+  npm build
+```

package-lock.json

@@ -3,7 +3,7 @@
   "version": "0.2.0",
   "private": false,
   "description": "React quizz/form builder and delivery solution",
-  "main": "lib/index.js",
+  "main": "lib/App.js",
   "types": "lib",
   "repository": {
     "type": "git",
@@ -25,34 +25,37 @@
   },
   "homepage": "https://github.com/hugobarragon/react-quizzes",
   "dependencies": {
+    "@types/hoist-non-react-statics": "^3.3.1",
     "@types/lodash.clonedeep": "^4.5.6",
     "@types/lodash.isequal": "^4.5.5",
     "@types/node": "12.12.3",
-    "@types/uuid": "^3.4.6",
-    "antd": "^3.24.3",
-    "iso-639-1": "^2.1.0",
+    "@types/uuid": "^3.4.9",
+    "antd": "^3.26.20",
+    "iso-639-1": "^2.1.9",
     "lodash.clonedeep": "^4.5.0",
     "lodash.isequal": "^4.5.0",
-    "react-quill": "^1.3.3",
-    "uuid": "^3.3.3"
+    "react-dnd": "^14.0.2",
+    "react-dnd-html5-backend": "^14.0.0",
+    "react-quill": "^1.3.5",
+    "uuid": "^3.4.0"
   },
   "devDependencies": {
-    "@types/jest": "^24.0.21",
-    "@types/react": "^16.9.11",
-    "@types/react-dom": "^16.9.3",
-    "copyfiles": "^2.1.1",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-scripts": "^3.2.0",
-    "typescript": "^3.7.4"
+    "@types/jest": "^24.9.1",
+    "@types/react": "^16.14.8",
+    "@types/react-dom": "^16.9.13",
+    "copyfiles": "^2.4.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-scripts": "^3.4.4",
+    "typescript": "^3.9.9"
   },
   "peerDependencies": {
     "react": ">=16.8",
     "react-dom": ">=16.8"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "tsc -p .",
+    "build": "tsc -p ./tsconfig.compile.json",
     "postbuild": "copyfiles  -u 1 src/**/*.css lib/",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

package.json

@@ -0,0 +1,98 @@
+import React, { PropsWithChildren, useRef } from "react";
+import { useDrag, useDrop, DropTargetMonitor } from "react-dnd";
+import { XYCoord } from "dnd-core";
+
+const ItemTypes = {
+  CARD: "card",
+};
+
+export interface CardProps {
+  id: string;
+  index: number;
+  moveCard: (dragIndex: number, hoverIndex: number) => void;
+}
+
+interface DragItem {
+  index: number;
+  id: string;
+  type: string;
+}
+
+export default (props: PropsWithChildren<CardProps>) => {
+  const { id, index, moveCard, children } = props;
+  const ref = useRef<HTMLDivElement>(null);
+  const [{ handlerId }, drop] = useDrop({
+    accept: ItemTypes.CARD,
+    collect(monitor) {
+      return {
+        handlerId: monitor.getHandlerId(),
+      };
+    },
+    hover(item: DragItem, monitor: DropTargetMonitor) {
+      if (!ref.current) {
+        return;
+      }
+      const dragIndex = item.index;
+      const hoverIndex = index;
+
+      // Don't replace items with themselves
+      if (dragIndex === hoverIndex) {
+        return;
+      }
+
+      // Determine rectangle on screen
+      const hoverBoundingRect = ref.current?.getBoundingClientRect();
+
+      // Get vertical middle
+      const hoverMiddleY =
+        (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+
+      // Determine mouse position
+      const clientOffset = monitor.getClientOffset();
+
+      // Get pixels to the top
+      const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top;
+
+      // Only perform the move when the mouse has crossed half of the items height
+      // When dragging downwards, only move when the cursor is below 50%
+      // When dragging upwards, only move when the cursor is above 50%
+
+      // Dragging downwards
+      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+        return;
+      }
+
+      // Dragging upwards
+      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+        return;
+      }
+
+      // Time to actually perform the action
+      moveCard(dragIndex, hoverIndex);
+
+      // Note: we're mutating the monitor item here!
+      // Generally it's better to avoid mutations,
+      // but it's good here for the sake of performance
+      // to avoid expensive index searches.
+      item.index = hoverIndex;
+    },
+  });
+
+  const [{ isDragging }, drag] = useDrag({
+    type: ItemTypes.CARD,
+    item: () => {
+      return { id, index };
+    },
+    collect: (monitor: any) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+
+  const opacity = isDragging ? 0 : 1;
+  drag(drop(ref));
+  return (
+    <div ref={ref} style={{ opacity }} data-handler-id={handlerId}>
+      {children}
+    </div>
+  );
+};

src/index.ts renamed to src/App.ts

@@ -41,7 +41,7 @@ const text_size = [
   "72px",
   "80px",
   "88px",
-  "96px"
+  "96px",
 ];
 Size.whitelist = text_size;
 Quill.register(Size, true);
@@ -56,12 +56,12 @@ const modules = {
         { list: "ordered" },
         { list: "bullet" },
         { indent: "-1" },
-        { indent: "+1" }
+        { indent: "+1" },
       ],
       ["link" /* 'image', 'video' */],
-      ["clean"]
-    ]
-  }
+      ["clean"],
+    ],
+  },
 };
 
 export default forwardRef((props: any, ref) => {
@@ -72,7 +72,7 @@ export default forwardRef((props: any, ref) => {
     currentLanguage,
     setLanguage,
     onNewLanguage,
-    onRemoveLanguage
+    onRemoveLanguage,
   } = props;
   const questionLanguages: Array<string> = Object.keys(value);
 
@@ -100,7 +100,7 @@ export default forwardRef((props: any, ref) => {
         <AddDropdown disabled={questionLanguages} onChange={onNewLanguage} />
       }
     >
-      {questionLanguages.map(lang => (
+      {questionLanguages.map((lang) => (
         <TabPane
           // native language name
           tab={
@@ -112,7 +112,7 @@ export default forwardRef((props: any, ref) => {
                   title={<TranslatedText id="confirm.action" />}
                   okText={<TranslatedText id="btn.yes" />}
                   cancelText={<TranslatedText id="btn.no" />}
-                  onConfirm={e => {
+                  onConfirm={(e) => {
                     preventPropagation(e);
                     onRemoveLanguage(lang);
                   }}

src/QuizzBuilder/FormPreview/DnDWrapper/index.tsx

@@ -0,0 +1,4 @@
+.ql-container.ql-snow {
+  max-height: 150px;
+  overflow: auto;
+}

src/QuizzBuilder/FormPreview/ElementWrapper/EditElement/SideDrawer/SettingsForm/CustomFormInput/QuillFormInput/index.tsx

@@ -1,47 +1,64 @@
+import DnDWrapper from "./DnDWrapper";
 import React, { useContext } from "react";
 import Empty from "antd/es/empty/index";
 import Form from "antd/es/form/index";
 import QuizzContext, { IQuizzBuilderContext } from "../../QuizzContext";
 import ElementWrapper from "./ElementWrapper/ElementWrapper";
+import { moveElement } from "../reducer/actions";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
 
 function PreviewForm(props: any) {
-  const { state, toolBox, language } = useContext(
-      QuizzContext
-    ) as IQuizzBuilderContext,
-    { form } = props,
-    form_data = state.get("data");
+  const { state, toolBox, language, dispatch } = useContext(
+    QuizzContext
+  ) as IQuizzBuilderContext;
+  const { form } = props;
+  const form_data = state.get("data");
+
+  function moveCard(dragIndex: number, hoverIndex: number) {
+    dispatch(moveElement(dragIndex, hoverIndex));
+  }
 
   // shows the inputs from the toolbox that are added to the current builder state
   return (
     <Form>
-      {form_data.map((item: any) => {
-        const current_key = item.element;
-        // searchs for the current input on the toolbox to get the component
-        const found_toolbox_input = toolBox.find(
-          (toolBoxInput: any) => current_key === toolBoxInput.key
-        ) as any;
-        // finds input and wrapps it with delete and edit button
-        const Component = found_toolbox_input
-          ? found_toolbox_input.Component
-          : Empty;
+      <DndProvider backend={HTML5Backend}>
+        {form_data.map((item: any, i: number) => {
+          const current_key = item.element;
+          // searchs for the current input on the toolbox to get the component
+          const found_toolbox_input = toolBox.find(
+            (toolBoxInput: any) => current_key === toolBoxInput.key
+          ) as any;
+          // finds input and wrapps it with delete and edit button
+          const Component = found_toolbox_input
+            ? found_toolbox_input.Component
+            : Empty;
 
-        return (
-          <ElementWrapper
-            // render the input wrapper with delete and edit button
-            toolboxData={found_toolbox_input}
-            inputData={item}
-            key={item.id}
-          >
-            <Component
-              // render the toolbox component
-              form={form}
-              toolboxData={found_toolbox_input}
-              inputData={item}
-              language={language}
-            />
-          </ElementWrapper>
-        );
-      })}
+          return (
+            <DnDWrapper
+              key={item.id}
+              index={i}
+              id={item.id}
+              moveCard={moveCard}
+            >
+              <ElementWrapper
+                // render the input wrapper with delete and edit button
+                toolboxData={found_toolbox_input}
+                inputData={item}
+                key={item.id}
+              >
+                <Component
+                  // render the toolbox component
+                  form={form}
+                  toolboxData={found_toolbox_input}
+                  inputData={item}
+                  language={language}
+                />
+              </ElementWrapper>
+            </DnDWrapper>
+          );
+        })}
+      </DndProvider>
     </Form>
   );
 }