dropdown files

wax-questions-service/src/NumericalAnswerService/NumericalAnswerDropDownService/NumericalAnswerDropDown.js

+import React from 'react';
 import { injectable } from 'inversify';
-import { Fragment } from 'prosemirror-model';
-import { v4 as uuidv4 } from 'uuid';
+import { isEmpty } from 'lodash';
 import { Tools } from 'wax-prosemirror-core';
+import NumericalAnswerDropDownCompontent from '../components/NumericalAnswerDropDownCompontent';
 
 @injectable()
 class NumericalAnswerDropDown extends Tools {
@@ -10,7 +11,9 @@ class NumericalAnswerDropDown extends Tools {
   name = 'Select Numerical Answer';
   label = 'Select Numerical Answer';
 
-  get run() {}
+  get run() {
+    return (state, dispatch) => {};
+  }
 
   select = (state, activeViewId, activeView) => {
     if (activeView.props.type && activeView.props.type === 'filltheGapContaier')
@@ -18,6 +21,17 @@ class NumericalAnswerDropDown extends Tools {
 
     return false;
   };
+
+  renderTool(view) {
+    if (isEmpty(view)) return null;
+    return this.isDisplayed() ? (
+      <NumericalAnswerDropDownCompontent
+        item={this.toJSON()}
+        key="numerical-answer-options"
+        view={view}
+      />
+    ) : null;
+  }
 }
 
 export default NumericalAnswerDropDown;

wax-questions-service/src/NumericalAnswerService/components/NumericalAnswerDropDownCompontent.js

+/* eslint-disable react/prop-types */
+import React, {
+  useMemo,
+  useContext,
+  useState,
+  useEffect,
+  useRef,
+  createRef,
+} from 'react';
+import styled from 'styled-components';
+import {
+  WaxContext,
+  DocumentHelpers,
+  Icon,
+  useOnClickOutside,
+} from 'wax-prosemirror-core';
+
+const Wrapper = styled.div`
+  opacity: ${props => (props.disabled ? '0.4' : '1')};
+`;
+
+const DropDownButton = styled.button`
+  background: #fff;
+  border: none;
+  color: #000;
+  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
+  display: flex;
+  position: relative;
+  width: 160px;
+
+  span {
+    position: relative;
+    top: 2px;
+  }
+`;
+
+const NumericalAnswerDropDownCompontent = ({ view = {}, item }) => {
+  const dropDownOptions = [
+    {
+      label: 'Exact answer with margin of error',
+      value: 'exactAnswer',
+    },
+    {
+      label: 'Answer within a range',
+      value: 'rangeAnswer',
+    },
+    {
+      label: 'Precise answer',
+      value: 'preciseAnswer',
+    },
+  ];
+
+  const { activeView } = useContext(WaxContext);
+  const itemRefs = useRef([]);
+  const wrapperRef = useRef();
+  const [isOpen, setIsOpen] = useState(false);
+  const isDisabled = false;
+
+  useOnClickOutside(wrapperRef, () => setIsOpen(false));
+
+  useEffect(() => {
+    if (isDisabled) setIsOpen(false);
+  }, [isDisabled]);
+
+  return <>dropDown</>;
+};
+
+export default NumericalAnswerDropDownCompontent;

wax-questions-service/src/QuestionsDropDownToolGroupService/DropDownComponent.js

@@ -68,22 +68,22 @@ const StyledIcon = styled(Icon)`
 const DropDownComponent = ({ view, tools }) => {
   const dropDownOptions = [
     {
-      label: 'Multiple Answers',
+      label: 'Multiple Choice',
       value: '0',
       item: tools[0],
     },
     {
-      label: 'Multiple Choice',
+      label: 'Multiple Choice Single Correct',
       value: '1',
       item: tools[1],
     },
     {
-      label: 'Multiple True/False',
+      label: 'True/False',
       value: '2',
       item: tools[2],
     },
     {
-      label: 'True/False',
+      label: 'True/False Single Correct',
       value: '3',
       item: tools[3],
     },
@@ -127,13 +127,13 @@ const DropDownComponent = ({ view, tools }) => {
   const [isOpen, setIsOpen] = useState(false);
   useOnClickOutside(wrapperRef, () => setIsOpen(false));
 
-  const [label, setLabel] = useState('Item Type');
+  const [label, setLabel] = useState('Question Type');
   const isEditable = main.props.editable(editable => {
     return editable;
   });
 
   useEffect(() => {
-    setLabel('Item Type');
+    setLabel('Question Type');
     dropDownOptions.forEach(option => {
       if (option.item.active(main.state)) {
         setLabel(option.label);

wax-table-service/src/components/TableDropDown.js

@@ -71,6 +71,7 @@ const TableDropDown = ({ item }) => {
       <>{!isEmpty(i18n) && i18n.exists(label) ? t(label) : defaultTrans}</>
     );
   };
+
   const dropDownOptions = [
     {
       label: (