Skip to content

Commit

Permalink
Merge pull request #365 from BIDMCDigitalPsychiatry/issue-798
Browse files Browse the repository at this point in the history 
Dependancy updates
  • Loading branch information
@sarithapillai8
sarithapillai8 authored Feb 27, 2024
2 parents af7d39c + f744859 commit add7fe1
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 30 deletions.
6 changes: 0 additions & 6 deletions Survey/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion Survey/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@
"react-scripts": "5.0.1",
"remark-emoji": "^2.2.0",
"remark-gfm": "^1.0.0",
"remark-sub-super": "^1.0.20",
"typescript": "^5.3.3",
"util": "^0.12.5",
"web-vitals": "^2.1.4",
Expand Down
80 changes: 57 additions & 23 deletions Survey/src/components/SurveyQuestions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ import ReactMarkdown from "react-markdown"
import emoji from "remark-emoji"
import gfm from "remark-gfm"
import { useSnackbar } from "notistack"
import remarkSubSuper from 'remark-sub-super'
import ConfirmationDialog from "./ConfirmationDialog"
const GreenCheckbox = withStyles({
root: {
Expand Down Expand Up @@ -305,6 +304,7 @@ const useStyles = makeStyles((theme) => ({
"& fieldset": { borderWidth: 0 },
},
required : {
"& span" : { color: "red"},
"& sup" : { color: "red"}
},
sliderResponse: {
Expand Down Expand Up @@ -448,7 +448,9 @@ function RateAnswer({ checked, onChange, value }) {
return (
<div onClick={() => onChange(value)} className={checked ? classes.checkedContainer : classes.uncheckContainer}>
{checked && <Typography className={classes.checkText}>
<ReactMarkdown source={value?.toString()} escapeHtml={false} plugins={[gfm, emoji, remarkSubSuper]} renderers={{ link: LinkRenderer, sub: 'sub', sup: (props) => {
<ReactMarkdown children={value?.toString()} skipHtml={false} plugins={[gfm, emoji]} renderers={{ link: LinkRenderer, sub: (props) => {
return <sub>{props?.children}</sub>;
}, sup: (props) => {
return <sup>{props.children}</sup>;
}}} />
</Typography>}
Expand Down Expand Up @@ -503,12 +505,16 @@ function RadioOption({ onChange, options, value, ...props }) {
variant="body2"
style={{ color: selectedValue === `${x.value}` ? "black" : "rgba(0, 0, 0, 0.7)" }}
>
<ReactMarkdown source={t(x.label?.toString())} escapeHtml={false} plugins={[gfm, emoji, remarkSubSuper]} renderers={{ link: LinkRenderer, sub: 'sub', sup: (props) => {
<ReactMarkdown children={t(x.label?.toString())} skipHtml={false} plugins={[gfm, emoji]} renderers={{ link: LinkRenderer, sub: (props) => {
return <sub>{props?.children}</sub>;
}, sup: (props) => {
return <sup>{props.children}</sup>;
}}} />
</Typography>
<Typography component="span" variant="caption" className={classes.lightGray}>
<ReactMarkdown source={!!x.description && ` ${x.description?.toString()}`} escapeHtml={false} plugins={[gfm, emoji, remarkSubSuper]} renderers={{ link: LinkRenderer, sub: 'sub', sup: (props) => {
<ReactMarkdown children={!!x.description && ` ${x.description?.toString()}`} skipHtml={false} plugins={[gfm, emoji]} renderers={{ link: LinkRenderer, sub: (props) => {
return <sub>{props?.children}</sub>;
}, sup: (props) => {
return <sup>{props.children}</sup>;
}}} />
</Typography>
Expand Down Expand Up @@ -785,7 +791,9 @@ function RadioRating({ onChange, options, value, mtValue, type, ...props }) {
/>
{type !== "matrix" && (
<Typography variant="caption" className={classes.checkP}>
<ReactMarkdown source={t(option.description?.toString())} escapeHtml={false} plugins={[gfm, emoji, remarkSubSuper]} renderers={{ link: LinkRenderer, sub: 'sub', sup: (props) => {
<ReactMarkdown children={t(option.description?.toString())} skipHtml={false} plugins={[gfm, emoji]} renderers={{ link: LinkRenderer, sub: (props) => {
return <sub>{props?.children}</sub>;
}, sup: (props) => {
return <sup>{props.children}</sup>;
}}}/>
</Typography>
Expand Down Expand Up @@ -876,30 +884,36 @@ function Rating({ onChange, options, value, ...props }) {
<Grid container className={classes.sliderValueLabel} direction="row" justify="space-between" alignItems="center">
<Grid item>
<Typography variant="caption" className={classes.textCaption} display="block" gutterBottom>
<ReactMarkdown source={!!options[0].description && options[0].description.trim().length === 0
<ReactMarkdown children={!!options[0].description && options[0].description.trim().length === 0
? options[0].value
: options[0].description} escapeHtml={false} plugins={[gfm, emoji, remarkSubSuper]} renderers={{ link: LinkRenderer, sub: 'sub', sup: (props) => {
return <sup>{props.children}</sup>;
: options[0].description} skipHtml={false} plugins={[gfm, emoji]} renderers={{ link: LinkRenderer, sub: (props) => {
return <sub>{props?.children}</sub>;
}, sup: (props) => {
return <sup>{props?.children}</sup>;
}}} />
</Typography>
</Grid>
<Grid item>
{options.length > 2 && (
<Typography variant="caption" className={classes.textCaption} display="block" gutterBottom>
<ReactMarkdown source={!!options[Math.ceil(options.length / 2) - 1].description &&
<ReactMarkdown children={!!options[Math.ceil(options.length / 2) - 1].description &&
options[Math.ceil(options.length / 2) - 1].description.trim().length === 0
? options[Math.ceil(options.length / 2) - 1].value
: options[Math.ceil(options.length / 2) - 1].description} escapeHtml={false} plugins={[gfm, emoji, remarkSubSuper]} renderers={{ link: LinkRenderer, sub: 'sub', sup: (props) => {
: options[Math.ceil(options.length / 2) - 1].description} skipHtml={false} plugins={[gfm, emoji]} renderers={{ link: LinkRenderer, sub: (props) => {
return <sub>{props?.children}</sub>;
}, sup: (props) => {
return <sup>{props.children}</sup>;
}}} />
</Typography>
)}
</Grid>
<Grid item>
<Typography variant="caption" className={classes.textCaption} display="block" gutterBottom>
<ReactMarkdown source={!!options[options.length - 1].description && options[options.length - 1].description.trim().length === 0
<ReactMarkdown children={!!options[options.length - 1].description && options[options.length - 1].description.trim().length === 0
? options[options.length - 1].value
: options[options.length - 1].description} escapeHtml={false} plugins={[gfm, emoji, remarkSubSuper]} renderers={{ link: LinkRenderer, sub: 'sub', sup: (props) => {
: options[options.length - 1].description} skipHtml={false} plugins={[gfm, emoji]} renderers={{ link: LinkRenderer, sub: (props) => {
return <sub>{props?.children}</sub>;
}, sup: (props) => {
return <sup>{props.children}</sup>;
}}} />

Expand All @@ -911,7 +925,9 @@ function Rating({ onChange, options, value, ...props }) {
{t("Your response")}<span>:</span>
</Typography>
<Typography variant="h4">
<ReactMarkdown source={t(valueText?.toString())} escapeHtml={false} plugins={[gfm, emoji, remarkSubSuper]} renderers={{ link: LinkRenderer, sub: 'sub', sup: (props) => {
<ReactMarkdown children={t(valueText?.toString())} skipHtml={false} plugins={[gfm, emoji]} renderers={{ link: LinkRenderer, sub: (props) => {
return <sub>{props?.children}</sub>;
}, sup: (props) => {
return <sup>{props.children}</sup>;
}}} />
</Typography>
Expand Down Expand Up @@ -957,7 +973,9 @@ function Matrix({ x, responses, onResponse, activityId, total,index, idx,startTi
<Grid item lg={4} sm={10} xs={12} className={classes.surveyQuestionAlign + " " + classes.surveyQuestionMatrixAlign}>
<Box className={classes.questionhead}>
<Typography variant="caption" className={classes.required}>
<ReactMarkdown source={`${t(x.description?.toString() ?? "" )}`} escapeHtml={false} plugins={[gfm, emoji, remarkSubSuper]} renderers={{ link: LinkRenderer, sub: 'sub', sup: (props) => {
<ReactMarkdown children={`${t(x.description?.toString() ?? "" )}`} skipHtml={false} plugins={[gfm, emoji]} renderers={{ link: LinkRenderer, sub: (props) => {
return <sub>{props?.children}</sub>;
}, sup: (props) => {
return <sup>{props.children}</sup>;
}}} />
</Typography>
Expand All @@ -970,7 +988,9 @@ function Matrix({ x, responses, onResponse, activityId, total,index, idx,startTi
<TableCell style={{minWidth:"30%"}}>{null}</TableCell>
{(x.options || []).map((x) => (
<TableCell className={classes.textCenter}>
{(x.description || "").length > 0 && <ReactMarkdown source={` ${t(x.description?.toString())}`} escapeHtml={false} plugins={[gfm, emoji, remarkSubSuper]} renderers={{ link: LinkRenderer, sub: 'sub', sup: (props) => {
{(x.description || "").length > 0 && <ReactMarkdown children={` ${t(x.description?.toString())}`} skipHtml={false} plugins={[gfm, emoji]} renderers={{ link: LinkRenderer, sub: (props) => {
return <sub>{props?.children}</sub>;
}, sup: (props) => {
return <sup>{props.children}</sup>;
}}} />}
</TableCell>
Expand All @@ -981,7 +1001,9 @@ function Matrix({ x, responses, onResponse, activityId, total,index, idx,startTi
<TableCell style={{minWidth:"30%"}}>{null}</TableCell>
{(x.options || []).map((x) => (
<TableCell className={classes.textCenter}>
<ReactMarkdown source={(x.description || "").length > 0 && (x.value || "").length > 0 ? `(${t(x.value?.toString())})` : `${t(x.value?.toString())}`} escapeHtml={false} plugins={[gfm, emoji, remarkSubSuper]} renderers={{ link: LinkRenderer, sub: 'sub', sup: (props) => {
<ReactMarkdown children={(x.description || "").length > 0 && (x.value || "").length > 0 ? `(${t(x.value?.toString())})` : `${t(x.value?.toString())}`} skipHtml={false} plugins={[gfm, emoji]} renderers={{ link: LinkRenderer, sub: (props) => {
return <sub>{props?.children}</sub>;
}, sup: (props) => {
return <sup>{props.children}</sup>;
}}} />
</TableCell>
Expand All @@ -990,7 +1012,9 @@ function Matrix({ x, responses, onResponse, activityId, total,index, idx,startTi
{(x.questions || []).map((question, qindex) => (
<TableRow style={{ borderBottom: "1px solid rgba(224, 224, 224, 1)"}}>
<TableCell className={classes.required} style={{minWidth:"30%", maxWidth:"150px"}}>
<ReactMarkdown source={t(question.text) + (!!question.required ? "`^*^`" : "")} escapeHtml={false} plugins={[gfm, emoji, remarkSubSuper]} renderers={{ link: LinkRenderer, sub: 'sub', sup: (props) => {
<ReactMarkdown children={t(question.text) + (!!question.required ? "<span> *</span>" : "")} allowDangerousHtml={true} plugins={[gfm, emoji]} renderers={{ link: LinkRenderer, span: (props) => {
return <sub>{props?.children}</sub>;
}, sup: (props) => {
return <sup>{props.children}</sup>;
}}} />
</TableCell>
Expand Down Expand Up @@ -1181,12 +1205,16 @@ function MultiSelectResponse({ onChange, options, value, ...props }) {
variant="body2"
style={{ color: selection.includes(`${x.value}`) ? "black" : "rgba(0, 0, 0, 0.7)" }}
>
<ReactMarkdown source={t(x.label?.toString())} escapeHtml={false} plugins={[gfm, emoji, remarkSubSuper]} renderers={{ link: LinkRenderer, sub: 'sub', sup: (props) => {
<ReactMarkdown children={t(x.label?.toString())} skipHtml={false} plugins={[gfm, emoji]} renderers={{ link: LinkRenderer, sub: (props) => {
return <sub>{props?.children}</sub>;
}, sup: (props) => {
return <sup>{props.children}</sup>;
}}} />
</Typography>
<Box className={classes.lightGray}>
<ReactMarkdown source={!!x.description && ` ${x.description?.toString()}`} escapeHtml={false} plugins={[gfm, emoji, remarkSubSuper]} renderers={{ link: LinkRenderer, sub: 'sub', sup: (props) => {
<ReactMarkdown children={!!x.description && ` ${x.description?.toString()}`} skipHtml={false} plugins={[gfm, emoji]} renderers={{ link: LinkRenderer, sub: (props) => {
return <sub>{props?.children}</sub>;
}, sup: (props) => {
return <sup>{props.children}</sup>;
}}} />
</Box>
Expand Down Expand Up @@ -1265,14 +1293,16 @@ function Question({ onResponse, text, desc, required, type, options, value, star
<Grid>
<Box className={classes.questionhead}>
<Typography variant="caption" className={classes.required}>
<ReactMarkdown source={t(text + (!!required ? "`^*^`" : ""))} escapeHtml={false} plugins={[gfm, emoji, remarkSubSuper]} renderers={{ link: LinkRenderer, sub: 'sub', sup: (props) => {
<ReactMarkdown children={t(text + (!!required ? "<span> *</span>" : ""))} allowDangerousHtml={true} plugins={[gfm, emoji]} renderers={{ link: LinkRenderer, span: (props) => {
return <sub>{props?.children}</sub>;
}, sup: (props) => {
return <sup>{props.children}</sup>;
}}} />
</Typography>
</Box>
<Box className={classes.questionhead}>
<Typography variant="caption" display="block" style={{ lineHeight: "0.66" }}>
<ReactMarkdown source={type === "slider"
<ReactMarkdown children={type === "slider"
? t(
`${options[0].value} being ${
!!options[0].description && options[0].description.trim().length > 0
Expand All @@ -1285,7 +1315,9 @@ function Question({ onResponse, text, desc, required, type, options, value, star
: options[options.length - 1].value
}`
)
: !!desc && t(`${desc}`) } escapeHtml={false} plugins={[gfm, emoji, remarkSubSuper]} renderers={{ link: LinkRenderer, sub: 'sub', sup: (props) => {
: !!desc && t(`${desc}`) } skipHtml={false} plugins={[gfm, emoji]} renderers={{ link: LinkRenderer, sub: (props) => {
return <sub>{props?.children}</sub>;
}, sup: (props) => {
return <sup>{props.children}</sup>;
}}} />
</Typography>
Expand Down Expand Up @@ -1541,7 +1573,9 @@ function Section({
<Icon>arrow_back</Icon>
</IconButton>}
<Typography variant="h5">
<ReactMarkdown source={t(value?.name?.toString().replace(/_/g, " "))} escapeHtml={false} plugins={[gfm, emoji, remarkSubSuper]} renderers={{ link: LinkRenderer, sub: 'sub', sup: (props) => {
<ReactMarkdown children={t(value?.name?.toString().replace(/_/g, " "))} skipHtml={false} plugins={[gfm, emoji]} renderers={{ link: LinkRenderer, sub: (props) => {
return <sub>{props?.children}</sub>;
}, sup: (props) => {
return <sup>{props.children}</sup>;
}}} />
</Typography>
Expand Down

0 comments on commit add7fe1

Please sign in to comment.