From fc0232735fcc4ff460075275aa16394873c4bab7 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Wed, 3 Nov 2021 12:40:51 +0200
Subject: [PATCH] add new tool

---
 editors/demo/src/HHMI/config/config.js        |  3 +
 wax-prosemirror-services/index.js             |  1 +
 .../MultipleDropDown.js                       | 78 ++++++++++++++++++-
 3 files changed, 80 insertions(+), 2 deletions(-)

diff --git a/editors/demo/src/HHMI/config/config.js b/editors/demo/src/HHMI/config/config.js
index 930b1815f..2ccf3aba4 100644
--- a/editors/demo/src/HHMI/config/config.js
+++ b/editors/demo/src/HHMI/config/config.js
@@ -24,6 +24,7 @@ import {
   MultipleChoiceToolGroupService,
   FillTheGapQuestionService,
   FillTheGapToolGroupService,
+  MultipleDropDownToolGroupService,
 } from 'wax-prosemirror-services';
 
 import { DefaultSchema } from 'wax-prosemirror-utilities';
@@ -49,6 +50,7 @@ export default {
         'Lists',
         'Images',
         'Tables',
+        'MultipleDropDown',
         'MultipleChoice',
         'FillTheGap',
         'FullScreen',
@@ -71,6 +73,7 @@ export default {
     new FillTheGapToolGroupService(),
     new MultipleChoiceQuestionService(),
     new MultipleChoiceToolGroupService(),
+    new MultipleDropDownToolGroupService(),
     new ListsService(),
     new LinkService(),
     new InlineAnnotationsService(),
diff --git a/wax-prosemirror-services/index.js b/wax-prosemirror-services/index.js
index 6c7521803..3023e4f4d 100644
--- a/wax-prosemirror-services/index.js
+++ b/wax-prosemirror-services/index.js
@@ -73,3 +73,4 @@ export { default as CustomTagInlineToolGroupService } from './src/WaxToolGroups/
 export { default as CustomTagBlockToolGroupService } from './src/WaxToolGroups/CustomTagToolGroupService/CustomTagBlockToolGroupService/CustomTagBlockToolGroupService';
 export { default as MultipleChoiceToolGroupService } from './src/WaxToolGroups/MultipleChoiceToolGroupService/MultipleChoiceToolGroupService';
 export { default as FillTheGapToolGroupService } from './src/WaxToolGroups/FillTheGapToolGroupService/FillTheGapToolGroupService';
+export { default as MultipleDropDownToolGroupService } from './src/WaxToolGroups/MultipleDropDownToolGroupService/MultipleDropDownToolGroupService';
diff --git a/wax-prosemirror-services/src/WaxToolGroups/MultipleDropDownToolGroupService/MultipleDropDown.js b/wax-prosemirror-services/src/WaxToolGroups/MultipleDropDownToolGroupService/MultipleDropDown.js
index 2db340e45..c45cd76f0 100644
--- a/wax-prosemirror-services/src/WaxToolGroups/MultipleDropDownToolGroupService/MultipleDropDown.js
+++ b/wax-prosemirror-services/src/WaxToolGroups/MultipleDropDownToolGroupService/MultipleDropDown.js
@@ -1,12 +1,86 @@
+import React, { useContext } from 'react';
 import { injectable, inject } from 'inversify';
+import { isEmpty } from 'lodash';
+import { v4 as uuidv4 } from 'uuid';
+import styled from 'styled-components';
+import { WaxContext } from 'wax-prosemirror-core';
+import { ReactDropDownStyles } from 'wax-prosemirror-components';
+import Dropdown from 'react-dropdown';
 import ToolGroup from '../../lib/ToolGroup';
 
 @injectable()
 class MultipleDropDown extends ToolGroup {
   tools = [];
-  constructor() {
+  constructor(@inject('MultipleChoiceQuestion') multipleChoiceQuestion) {
     super();
-    this.tools = [];
+    this.tools = [multipleChoiceQuestion];
+  }
+
+  renderTools(view) {
+    if (isEmpty(view)) return null;
+
+    const { activeViewId } = useContext(WaxContext);
+
+    const Wrapper = styled.span`
+      ${ReactDropDownStyles};
+    `;
+    const DropdownStyled = styled(Dropdown)`
+      display: inline-flex;
+      cursor: not-allowed;
+      opacity: ${props => (props.select ? 1 : 0.4)};
+      pointer-events: ${props => (props.select ? 'default' : 'none')};
+      .Dropdown-control {
+        border: none;
+      }
+      .Dropdown-arrow {
+        right: 25px;
+        top: 10px;
+      }
+      .Dropdown-menu {
+        width: 120%;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        .Dropdown-option {
+          width: 100%;
+        }
+      }
+    `;
+
+    const { dispatch, state } = view;
+
+    const dropDownOptions = [
+      { label: 'Multiple choice ', value: '0', item: this._tools[0] },
+      {
+        label: 'Multiple choice (single correct)  ',
+        value: '1',
+        item: this._tools[0],
+      },
+      { label: 'True/False ', value: '2', item: this._tools[0] },
+      {
+        label: 'True/False (single correct) ',
+        value: '3',
+        item: this._tools[0],
+      },
+    ];
+
+    const isDisabled = true;
+    let found = '';
+
+    return (
+      <Wrapper key={uuidv4()}>
+        <DropdownStyled
+          value={found}
+          key={uuidv4()}
+          options={dropDownOptions}
+          onChange={option => {
+            this._tools[option.value].run(state, dispatch);
+          }}
+          placeholder="Multiple Question Types"
+          select={isDisabled}
+        />
+      </Wrapper>
+    );
   }
 }
 
-- 
GitLab