From b3a1210ebdb7f46fc25c67d46c3d827d50ff714d Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Wed, 18 May 2022 16:34:38 +0300
Subject: [PATCH] fix: update correct and answer
---
.../components/DropDownComponent.js | 2 +-
.../components/EditorComponent.js | 1 +
.../components/ReadOnlyDropDownComponent.js | 104 ++++++++++++++++++
3 files changed, 106 insertions(+), 1 deletion(-)
create mode 100644 wax-prosemirror-services/src/MatchingService/components/ReadOnlyDropDownComponent.js
diff --git a/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js b/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
index 09ca74eb8..951a12109 100644
--- a/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
+++ b/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
@@ -58,7 +58,7 @@ const DropComponent = ({ getPos, node, view }) => {
main.state.tr
.setMeta('addToHistory', false)
.setNodeMarkup(singleNode.pos, undefined, {
- ...singleNode.attrs,
+ ...singleNode.node.attrs,
correct: option.value,
}),
);
diff --git a/wax-prosemirror-services/src/MatchingService/components/EditorComponent.js b/wax-prosemirror-services/src/MatchingService/components/EditorComponent.js
index c66af0e13..9278ffd3a 100644
--- a/wax-prosemirror-services/src/MatchingService/components/EditorComponent.js
+++ b/wax-prosemirror-services/src/MatchingService/components/EditorComponent.js
@@ -58,6 +58,7 @@ const EditorWrapper = styled.div`
const EditorComponent = ({ node, view, getPos }) => {
const editorRef = useRef();
+ console.log(node);
const context = useContext(WaxContext);
const {
diff --git a/wax-prosemirror-services/src/MatchingService/components/ReadOnlyDropDownComponent.js b/wax-prosemirror-services/src/MatchingService/components/ReadOnlyDropDownComponent.js
new file mode 100644
index 000000000..e5121aca8
--- /dev/null
+++ b/wax-prosemirror-services/src/MatchingService/components/ReadOnlyDropDownComponent.js
@@ -0,0 +1,104 @@
+/* eslint-disable no-underscore-dangle */
+import React, { useContext, useMemo, useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { find } from 'lodash';
+import { ReactDropDownStyles } from 'wax-prosemirror-components';
+import { WaxContext } from 'wax-prosemirror-core';
+import { DocumentHelpers } from 'wax-prosemirror-utilities';
+import Dropdown from 'react-dropdown';
+import { v4 as uuidv4 } from 'uuid';
+
+const Wrapper = styled.div`
+ ${ReactDropDownStyles};
+`;
+const DropdownStyled = styled(Dropdown)`
+ display: inline-flex;
+ cursor: not-allowed;
+ margin-left: auto;
+ opacity: ${props => (props.select ? 1 : 0.4)};
+ pointer-events: ${props => (props.select ? 'default' : 'none')};
+ .Dropdown-control {
+ border: none;
+ padding: 8px 30px 8px 10px;
+
+ &:hover {
+ box-shadow: none;
+ }
+ }
+
+ .Dropdown-arrow {
+ top: 17px;
+ }
+
+ .Dropdown-menu {
+ width: 102%;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ .Dropdown-option {
+ width: 100%;
+ }
+ }
+`;
+
+const ReadOnlyDropDownComponent = ({ getPos, node, view }) => {
+ const [selectedOption, setSelectedOption] = useState(undefined);
+
+ const context = useContext(WaxContext);
+ const {
+ pmViews: { main },
+ } = context;
+
+ const onChange = option => {
+ setSelectedOption(option);
+
+ const allNodes = getNodes(main);
+ allNodes.forEach(singleNode => {
+ if (singleNode.node.attrs.id === node.attrs.id) {
+ main.dispatch(
+ main.state.tr
+ .setMeta('addToHistory', false)
+ .setNodeMarkup(singleNode.pos, undefined, {
+ ...singleNode.node.attrs,
+ answer: option.value,
+ }),
+ );
+ }
+ });
+ };
+
+ useEffect(() => {
+ const value = selectedOption ? selectedOption.value : '';
+ const found = find(node.attrs.options, { value });
+
+ if (!found) {
+ setSelectedOption(undefined);
+ }
+ }, [node.attrs.options]);
+
+ const ReadOnlyMultipleDropDown = useMemo(
+ () => (
+ <Wrapper key={uuidv4()}>
+ <DropdownStyled
+ key={uuidv4()}
+ onChange={option => onChange(option)}
+ options={node.attrs.options}
+ placeholder="Select option"
+ select
+ value={
+ selectedOption === 'undedfined' ? 'Select Option' : selectedOption
+ }
+ />
+ </Wrapper>
+ ),
+ [node.attrs.options, selectedOption],
+ );
+
+ return ReadOnlyMultipleDropDown;
+};
+
+export default ReadOnlyDropDownComponent;
+
+const getNodes = view => {
+ return DocumentHelpers.findInlineNodes(view.state.doc);
+};
--
GitLab