Skip to content
Snippets Groups Projects
Commit 5e2505d3 authored by chris's avatar chris
Browse files

Yes/No Switch

parent eaa91980
No related branches found
No related tags found
1 merge request!380Remove antd dependency
Hide whitespace changes
Inline Side-by-side
wax-prosemirror-services/src/MultipleChoiceQuestionService/MultipleChoiceSingleCorrectQuestionService/components/SwitchComponent.js
+ 8
− 71
View file @ 5e2505d3
...@@ -4,50 +4,8 @@ ...@@ -4,50 +4,8 @@
import React, { useState, useContext, useEffect } from 'react'; import React, { useState, useContext, useEffect } from 'react';
import { WaxContext } from 'wax-prosemirror-core'; import { WaxContext } from 'wax-prosemirror-core';
import { DocumentHelpers } from 'wax-prosemirror-utilities'; import { DocumentHelpers } from 'wax-prosemirror-utilities';
import { Icon } from 'wax-prosemirror-components';
import { NodeSelection } from 'prosemirror-state'; import { NodeSelection } from 'prosemirror-state';
import styled from 'styled-components'; import YesNoSwitch from '../../components/YesNoSwitch';
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;
`;
const CustomSwitch = ({ node, getPos }) => { const CustomSwitch = ({ node, getPos }) => {
const context = useContext(WaxContext); const context = useContext(WaxContext);
...@@ -126,35 +84,14 @@ const CustomSwitch = ({ node, getPos }) => { ...@@ -126,35 +84,14 @@ const CustomSwitch = ({ node, getPos }) => {
main.dispatch(tr); 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 ( return (
<StyledSwitch <YesNoSwitch
checked={isEditable ? checked : checkedAnswerMode} checked={checked}
checkedChildren="YES" checkedAnswerMode={checkedAnswerMode}
label="Correct?" customProps={customProps}
labelPosition="left" handleChange={handleChange}
onChange={handleChange} isEditable={isEditable}
unCheckedChildren="NO" node={node}
/> />
); );
}; };
......
wax-prosemirror-services/src/MultipleChoiceQuestionService/components/SwitchComponent.js
+ 8
− 67
View file @ 5e2505d3
...@@ -4,46 +4,7 @@ ...@@ -4,46 +4,7 @@
import React, { useState, useContext, useEffect } from 'react'; import React, { useState, useContext, useEffect } from 'react';
import { WaxContext } from 'wax-prosemirror-core'; import { WaxContext } from 'wax-prosemirror-core';
import { DocumentHelpers } from 'wax-prosemirror-utilities'; import { DocumentHelpers } from 'wax-prosemirror-utilities';
import { Icon } from 'wax-prosemirror-components'; import YesNoSwitch from './YesNoSwitch';
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;
`;
const CustomSwitch = ({ node, getPos }) => { const CustomSwitch = ({ node, getPos }) => {
const context = useContext(WaxContext); const context = useContext(WaxContext);
...@@ -89,34 +50,14 @@ const CustomSwitch = ({ node, getPos }) => { ...@@ -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 ( return (
<StyledSwitch <YesNoSwitch
checked={isEditable ? checked : checkedAnswerMode} checked={checked}
checkedChildren="YES" checkedAnswerMode={checkedAnswerMode}
label="Correct?" customProps={customProps}
labelPosition="left" handleChange={handleChange}
onChange={handleChange} isEditable={isEditable}
unCheckedChildren="NO" node={node}
/> />
); );
}; };
......
wax-prosemirror-services/src/MultipleChoiceQuestionService/components/YesNoSwitch.js 0 → 100644
+ 83
− 0
View file @ 5e2505d3
/* 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;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment