From 5e2505d30c25ec1c4bd1d68a1efb420f2d6df903 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Thu, 10 Mar 2022 18:50:03 +0200
Subject: [PATCH] Yes/No Switch
---
.../components/SwitchComponent.js | 79 ++----------------
.../components/SwitchComponent.js | 75 ++---------------
.../components/YesNoSwitch.js | 83 +++++++++++++++++++
3 files changed, 99 insertions(+), 138 deletions(-)
create mode 100644 wax-prosemirror-services/src/MultipleChoiceQuestionService/components/YesNoSwitch.js
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/SwitchComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/SwitchComponent.js
index a36386841..7259ea37b 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/SwitchComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/SwitchComponent.js
@@ -4,50 +4,8 @@
import React, { useState, useContext, useEffect } from 'react';
import { WaxContext } from 'wax-prosemirror-core';
import { DocumentHelpers } from 'wax-prosemirror-utilities';
-import { Icon } from 'wax-prosemirror-components';
import { NodeSelection } from 'prosemirror-state';
-import styled from 'styled-components';
-import Switch from '../../components/Switch';
-
-const StyledSwitch = styled(Switch)`
- display: flex;
- margin-left: auto;
-
- .ant-switch-checked {
- background-color: green;
- }
-`;
-
-const AnswerContainer = styled.span`
- margin-left: auto;
-`;
-
-const Correct = styled.span`
- margin-right: 10px;
- span {
- color: #008000;
-`;
-
-const Answer = styled.span`
- margin-right: 10px;
- span {
- color: ${props => (props.isCorrect ? ' #008000' : 'red')};
- }
-`;
-
-const StyledIconCorrect = styled(Icon)`
- fill: #008000;
- pointer-events: none;
- height: 24px;
- width: 24px;
-`;
-
-const StyledIconWrong = styled(Icon)`
- fill: red;
- pointer-events: none;
- height: 24px;
- width: 24px;
-`;
+import YesNoSwitch from '../../components/YesNoSwitch';
const CustomSwitch = ({ node, getPos }) => {
const context = useContext(WaxContext);
@@ -126,35 +84,14 @@ const CustomSwitch = ({ node, getPos }) => {
main.dispatch(tr);
};
- if (customProps.showFeedBack) {
- const correct = node.attrs.correct ? 'YES' : 'NO';
- const answer = node.attrs.answer ? 'YES' : 'NO';
- const isCorrect = node.attrs.correct === node.attrs.answer;
-
- return (
- <AnswerContainer>
- <Correct>
- Correct:
- <span>{correct}</span>
- </Correct>
-
- <Answer isCorrect={isCorrect}>
- Answer: <span>{answer}</span>
- </Answer>
- {isCorrect && <StyledIconCorrect name="done" />}
- {!isCorrect && <StyledIconWrong name="close" />}
- </AnswerContainer>
- );
- }
-
return (
- <StyledSwitch
- checked={isEditable ? checked : checkedAnswerMode}
- checkedChildren="YES"
- label="Correct?"
- labelPosition="left"
- onChange={handleChange}
- unCheckedChildren="NO"
+ <YesNoSwitch
+ checked={checked}
+ checkedAnswerMode={checkedAnswerMode}
+ customProps={customProps}
+ handleChange={handleChange}
+ isEditable={isEditable}
+ node={node}
/>
);
};
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/SwitchComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/SwitchComponent.js
index 76d2659ac..b0887514e 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/SwitchComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/SwitchComponent.js
@@ -4,46 +4,7 @@
import React, { useState, useContext, useEffect } from 'react';
import { WaxContext } from 'wax-prosemirror-core';
import { DocumentHelpers } from 'wax-prosemirror-utilities';
-import { Icon } from 'wax-prosemirror-components';
-import styled from 'styled-components';
-import Switch from './Switch';
-
-const StyledSwitch = styled(Switch)`
- display: flex;
- margin-left: auto;
-`;
-
-const AnswerContainer = styled.span`
- margin-left: auto;
-`;
-
-const Correct = styled.span`
- margin-right: 10px;
- span {
- color: #008000;
- }
-`;
-
-const Answer = styled.span`
- margin-right: 10px;
- span {
- color: ${props => (props.isCorrect ? ' #008000' : 'red')};
- }
-`;
-
-const StyledIconCorrect = styled(Icon)`
- fill: #008000;
- pointer-events: none;
- height: 24px;
- width: 24px;
-`;
-
-const StyledIconWrong = styled(Icon)`
- fill: red;
- pointer-events: none;
- height: 24px;
- width: 24px;
-`;
+import YesNoSwitch from './YesNoSwitch';
const CustomSwitch = ({ node, getPos }) => {
const context = useContext(WaxContext);
@@ -89,34 +50,14 @@ const CustomSwitch = ({ node, getPos }) => {
});
};
- if (customProps.showFeedBack) {
- const correct = node.attrs.correct ? 'YES' : 'NO';
- const answer = node.attrs.answer ? 'YES' : 'NO';
- const isCorrect = node.attrs.correct === node.attrs.answer;
-
- return (
- <AnswerContainer>
- <Correct>
- Correct:
- <span>{correct}</span>
- </Correct>
-
- <Answer isCorrect={isCorrect}>
- Answer: <span>{answer}</span>
- </Answer>
- {isCorrect && <StyledIconCorrect name="done" />}
- {!isCorrect && <StyledIconWrong name="close" />}
- </AnswerContainer>
- );
- }
return (
- <StyledSwitch
- checked={isEditable ? checked : checkedAnswerMode}
- checkedChildren="YES"
- label="Correct?"
- labelPosition="left"
- onChange={handleChange}
- unCheckedChildren="NO"
+ <YesNoSwitch
+ checked={checked}
+ checkedAnswerMode={checkedAnswerMode}
+ customProps={customProps}
+ handleChange={handleChange}
+ isEditable={isEditable}
+ node={node}
/>
);
};
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/YesNoSwitch.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/YesNoSwitch.js
new file mode 100644
index 000000000..020056983
--- /dev/null
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/YesNoSwitch.js
@@ -0,0 +1,83 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import styled from 'styled-components';
+import { Icon } from 'wax-prosemirror-components';
+import Switch from './Switch';
+
+const StyledSwitch = styled(Switch)`
+ display: flex;
+ margin-left: auto;
+`;
+
+const AnswerContainer = styled.span`
+ margin-left: auto;
+`;
+
+const Correct = styled.span`
+ margin-right: 10px;
+ span {
+ color: #008000;
+ }
+`;
+
+const Answer = styled.span`
+ margin-right: 10px;
+ span {
+ color: ${props => (props.isCorrect ? ' #008000' : 'red')};
+ }
+`;
+
+const StyledIconCorrect = styled(Icon)`
+ fill: #008000;
+ pointer-events: none;
+ height: 24px;
+ width: 24px;
+`;
+
+const StyledIconWrong = styled(Icon)`
+ fill: red;
+ pointer-events: none;
+ height: 24px;
+ width: 24px;
+`;
+const YesNoSwitch = ({
+ customProps,
+ node,
+ isEditable,
+ handleChange,
+ checked,
+ checkedAnswerMode,
+}) => {
+ if (customProps.showFeedBack) {
+ const correct = node.attrs.correct ? 'YES' : 'NO';
+ const answer = node.attrs.answer ? 'YES' : 'NO';
+ const isCorrect = node.attrs.correct === node.attrs.answer;
+
+ return (
+ <AnswerContainer>
+ <Correct>
+ Correct:
+ <span>{correct}</span>
+ </Correct>
+
+ <Answer isCorrect={isCorrect}>
+ Answer: <span>{answer}</span>
+ </Answer>
+ {isCorrect && <StyledIconCorrect name="done" />}
+ {!isCorrect && <StyledIconWrong name="close" />}
+ </AnswerContainer>
+ );
+ }
+ return (
+ <StyledSwitch
+ checked={isEditable ? checked : checkedAnswerMode}
+ checkedChildren="YES"
+ label="Correct?"
+ labelPosition="left"
+ onChange={handleChange}
+ unCheckedChildren="NO"
+ />
+ );
+};
+
+export default YesNoSwitch;
--
GitLab