diff --git a/wax-questions-service/src/NumericalAnswerService/NumericalAnswerDropDownService/NumericalAnswerDropDown.js b/wax-questions-service/src/NumericalAnswerService/NumericalAnswerDropDownService/NumericalAnswerDropDown.js index bb77410dddeefe507a902da27eca800220372fc4..380c11457720094ca049cfad92d58380ca6c6f8f 100644 --- a/wax-questions-service/src/NumericalAnswerService/NumericalAnswerDropDownService/NumericalAnswerDropDown.js +++ b/wax-questions-service/src/NumericalAnswerService/NumericalAnswerDropDownService/NumericalAnswerDropDown.js @@ -1,7 +1,8 @@ +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; diff --git a/wax-questions-service/src/NumericalAnswerService/components/NumericalAnswerDropDownCompontent.js b/wax-questions-service/src/NumericalAnswerService/components/NumericalAnswerDropDownCompontent.js new file mode 100644 index 0000000000000000000000000000000000000000..b9901a6c875853d660e4780ed99f91758d807ccf --- /dev/null +++ b/wax-questions-service/src/NumericalAnswerService/components/NumericalAnswerDropDownCompontent.js @@ -0,0 +1,68 @@ +/* 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; diff --git a/wax-questions-service/src/QuestionsDropDownToolGroupService/DropDownComponent.js b/wax-questions-service/src/QuestionsDropDownToolGroupService/DropDownComponent.js index e67b0a92c2bbd11ae4d1b1cae27488d6b2cfb1ff..44cc98c072fd4410f12397a868bc5daa6eff3bbe 100644 --- a/wax-questions-service/src/QuestionsDropDownToolGroupService/DropDownComponent.js +++ b/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); diff --git a/wax-table-service/src/components/TableDropDown.js b/wax-table-service/src/components/TableDropDown.js index 7b5cdf4a04e13acccebde81a0772c1c7141b20d3..98766692ea9c4f5eb595d645eaf812ff89e0f044 100644 --- a/wax-table-service/src/components/TableDropDown.js +++ b/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: (