From 02fa72efaa5cb1b9de57243f9fcfdbcbd8a581fc Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Fri, 1 Apr 2022 01:03:23 +0300
Subject: [PATCH] keep selected value
---
editors/demo/src/Editors.js | 2 +-
editors/demo/src/HHMI/HHMI.js | 2 +-
.../components/DropDownComponent.js | 26 ++++++++++++-------
.../components/MatchingContainerComponent.js | 10 +++----
4 files changed, 24 insertions(+), 16 deletions(-)
diff --git a/editors/demo/src/Editors.js b/editors/demo/src/Editors.js
index 166168897..1e839e3d3 100644
--- a/editors/demo/src/Editors.js
+++ b/editors/demo/src/Editors.js
@@ -70,7 +70,7 @@ const Editors = () => {
case 'ncbi':
return <NCBI />;
default:
- return <Editoria />;
+ return <HHMI />;
}
};
diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index 01e244d5e..134f28ba6 100644
--- a/editors/demo/src/HHMI/HHMI.js
+++ b/editors/demo/src/HHMI/HHMI.js
@@ -28,7 +28,7 @@ const SubmitButton = styled.button`
top: 16px;
`;
-const t = `<p class="paragraph"></p><div id="1c3b3bc9-8a82-4fae-9f00-5f3a2605d891" class="matching-container" options="[{"label":"option 1","key":"d916e258-be52-4bd3-a40f-779beb4f2cf5"},{"label":"option 2","key":"58ed31b1-dc66-46d8-8049-c0e0c582e63e"}]" feedback=""><p class="paragraph"></p><p class="paragraph"><div class="matching-option" id="5677a6df-7211-481f-b0d7-94565c87bdbd" isfirst="true" correct="false" answer="false"></div></p><p class="paragraph"></p></div><p class="paragraph">s</p><div id="d4fa43fc-3a92-4591-a8a4-e6271e42fc323" class="multiple-choice"><div class="multiple-choice-question" id="38de8538-647a-489d-8474-f92d0d256c32"><p class="paragraph">question</p></div><div class="multiple-choice-option" id="debb868e-bbfe-4ba2-bf93-c963153ff791" correct="false" answer="false" feedback="feedback 1"><p class="paragraph">answer 1</p></div><div class="multiple-choice-option" id="810bcf10-4fcb-4d1e-9dab-ce35cbd28527" correct="true" answer="true" feedback="feedback 2"><p class="paragraph">answer 2</p></div></div><div id="d4fa43fc-3a92-4591-a8a4-e6271e42fc02" class="fill-the-gap" feedback="some feedback"><p class="paragraph">first <span id="16ec8f33-db5b-4839-9567-8aa73b776bcf" class="fill-the-gap" answer="">answer1; answer2; answer3</span> second <span id="72f23a71-e774-4834-acba-f357afb6a243" class="fill-the-gap" answer="">answer 4; answer5;</span></p></div>`;
+const t = `<p class="paragraph"></p><div id="f57acbf9-6602-4206-a026-f868329a89ec" class="matching-container" options="[{"label":"value 1","value":"965e9b8a-2311-43f5-a3c9-099f5a2c2d50"},{"label":"value 2","value":"6a03e0a0-3a84-425d-a258-dcd7ed96a01a"}]" feedback=""><p class="paragraph"><div class="matching-option" id="6d946105-fce7-4313-8da1-b0b065cfa2d8" isfirst="true" correct="false" answer="false" options="[object Object],[object Object]"></div></p><p class="paragraph"></p></div><div id="d4fa43fc-3a92-4591-a8a4-e6271e42fc323" class="multiple-choice"><div class="multiple-choice-question" id="38de8538-647a-489d-8474-f92d0d256c32"><p class="paragraph">question</p></div><div class="multiple-choice-option" id="debb868e-bbfe-4ba2-bf93-c963153ff791" correct="false" answer="false" feedback="feedback 1"><p class="paragraph">answer 1</p></div><div class="multiple-choice-option" id="810bcf10-4fcb-4d1e-9dab-ce35cbd28527" correct="true" answer="true" feedback="feedback 2"><p class="paragraph">answer 2</p></div></div><div id="d4fa43fc-3a92-4591-a8a4-e6271e42fc02" class="fill-the-gap" feedback="some feedback"><p class="paragraph">first <span id="16ec8f33-db5b-4839-9567-8aa73b776bcf" class="fill-the-gap" answer="">answer1; answer2; answer3</span> second <span id="72f23a71-e774-4834-acba-f357afb6a243" class="fill-the-gap" answer="">answer 4; answer5;</span></p></div>`;
const Hhmi = () => {
const [submited, isSubmited] = useState(false);
const [readOnly, isReadOnly] = useState(false);
diff --git a/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js b/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
index 2548d9710..dd65a1a09 100644
--- a/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
+++ b/wax-prosemirror-services/src/MatchingService/components/DropDownComponent.js
@@ -1,7 +1,7 @@
/* eslint-disable no-underscore-dangle */
-import React, { useContext, useMemo, useEffect, useState } from 'react';
+import React, { useMemo, useEffect, useState } from 'react';
import styled from 'styled-components';
-import { WaxContext } from 'wax-prosemirror-core';
+import { find } from 'lodash';
import { ReactDropDownStyles } from 'wax-prosemirror-components';
import Dropdown from 'react-dropdown';
import { v4 as uuidv4 } from 'uuid';
@@ -40,12 +40,18 @@ const DropdownStyled = styled(Dropdown)`
`;
const DropComponent = ({ getPos, node, view }) => {
- const context = useContext(WaxContext);
- const {
- pmViews: { main },
- } = context;
+ const [selectedOption, setSelectedOption] = useState(undefined);
- const onChange = option => {};
+ const onChange = option => {
+ setSelectedOption(option);
+ };
+
+ useEffect(() => {
+ const value = selectedOption ? selectedOption.value : '';
+ const found = find(node.attrs.options, { value });
+
+ if (!found) setSelectedOption(undefined);
+ }, [node.attrs.options]);
const MultipleDropDown = useMemo(
() => (
@@ -56,11 +62,13 @@ const DropComponent = ({ getPos, node, view }) => {
options={node.attrs.options}
placeholder="Select option"
select
- value="Select option"
+ value={
+ selectedOption === 'undedfined' ? 'Select Option' : selectedOption
+ }
/>
</Wrapper>
),
- [node.attrs.options],
+ [node.attrs.options, selectedOption],
);
return MultipleDropDown;
diff --git a/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js b/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js
index e2dc16247..31b7dcd63 100644
--- a/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js
+++ b/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js
@@ -156,7 +156,7 @@ export default ({ node, view, getPos }) => {
const addOption = () => {
if (addOptionRef.current.value.trim() === '') return;
- const obj = { label: addOptionRef.current.value, key: uuidv4() };
+ const obj = { label: addOptionRef.current.value, value: uuidv4() };
setOptions(prevOptions => [...prevOptions, obj]);
setAddingOption(true);
setTimeout(() => {
@@ -176,8 +176,8 @@ export default ({ node, view, getPos }) => {
}
};
- const removeOption = key => {
- setOptions(options.filter(option => option.key !== key));
+ const removeOption = value => {
+ setOptions(options.filter(option => option.value !== value));
setAddingOption(true);
setTimeout(() => {
setAddingOption(false);
@@ -212,11 +212,11 @@ export default ({ node, view, getPos }) => {
<li>Options: </li>
{options.map((option, index) => {
return (
- <li key={option.key}>
+ <li key={option.value}>
<span>
{option.label}
<ActionButton
- onClick={() => removeOption(option.key)}
+ onClick={() => removeOption(option.value)}
type="button"
>
<StyledIconAction name="deleteOutlined" />
--
GitLab