const LongDescriptionDialog = ({ open, close, longDescription }) => {
const modalHeader = I18n.t('Criterion Long Description')
return (
<Modal
open={open}
onDismiss={close}
size="medium"
label={modalHeader}
shouldCloseOnDocumentClick
>
<ModalHeader>
<CloseButton
placement="end"
offset="medium"
variant="icon"
onClick={close}
>
Close
</CloseButton>
<Heading>{modalHeader}</Heading>
</ModalHeader>
<ModalBody>
<Text lineHeight="double">
<div dangerouslySetInnerHTML={{ __html: longDescription }} />
</Text>
</ModalBody>
</Modal>
)
/* eslint-enable react/no-danger */
}
const Threshold = ({ threshold }) => (
<Text size="x-small" weight="normal">
{
I18n.t('threshold: %{pts}', {
pts: I18n.toNumber(threshold, { precision: 2, strip_insignificant_zeros: true } )
})
}
</Text>
)
const FreeFormComments = (props) => {
const { savedComments, comments, saveLater, setComments, setSaveLater } = props
const first = <option key="first" value="first">{I18n.t('[ Select ]')}</option>
const options = savedComments.map((comment, ix) => (
// eslint-disable-next-line react/no-array-index-key
<option key={ix} value={ix.toString()}>{comment}</option>
))
const selector = [
(
<Select
key="select"
label={I18n.t('Saved Comments')}
assistiveText={I18n.t('Select from saved comments')}
onChange={(_unused, el) => { setComments(savedComments[el.value])} }
>
{[first, ...options]}
</Select>
),
<br key="br" />
]
return (
<div className="edit-freeform-comments">
{options.length > 0 ? selector : null}
<TextArea
label={I18n.t('Comments')}
maxHeight="50rem"
onChange={(e) => setComments(e.target.value)}
resize="vertical"
size="small"
value={comments}
/>
<br />
<Checkbox
checked={saveLater}
label={I18n.t('Save this comment for reuse')}
size="small"
onChange={(event) => setSaveLater(event.target.checked)}
/>
</div>
)
}
const Comments = (props) => {
const { assessing, assessment, footer, ...commentProps } = props
if (!assessing || assessment === null) {
return (
<div className="rubric-freeform">
<CommentText
assessment={assessment}
placeholder={I18n.t("This area will be used by the assessor to leave comments related to this criterion.")}
weight="normal"
/>
{footer}
</div>
)
}
else {
return (
<FreeFormComments
comments={assessment.comments}
saveLater={assessment.saveCommentsForLater}
{...commentProps}
/>
)
}
}
const LongDescription = ({ showLongDescription }) => (
<Button fluidWidth variant="link" onClick={() => showLongDescription()}>
<Text size="x-small">{I18n.t('view longer description')}</Text>
</Button>
)
const OutcomeIcon = () => (
<span>
<IconOutcomes />
<ScreenReaderContent>{I18n.t('This criterion is linked to a Learning Outcome')}</ScreenReaderContent>
</span>
)