100 lines
2.9 KiB
JavaScript
100 lines
2.9 KiB
JavaScript
import React, { useEffect, useRef, useState } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { useSelector } from 'react-redux';
|
|
|
|
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
|
import {
|
|
ActionRow,
|
|
Button,
|
|
Form,
|
|
ModalDialog,
|
|
} from '@edx/paragon';
|
|
|
|
import { selectModerationSettings } from '../../data/selectors';
|
|
import messages from './messages';
|
|
|
|
function ClosePostReasonModal({
|
|
intl,
|
|
isOpen,
|
|
onCancel,
|
|
onConfirm,
|
|
}) {
|
|
const scrollTo = useRef(null);
|
|
const [reasonCode, setReasonCode] = useState(null);
|
|
|
|
const { postCloseReasons } = useSelector(selectModerationSettings);
|
|
|
|
const onChange = event => {
|
|
if (event.target.value) {
|
|
setReasonCode(event.target.value);
|
|
} else {
|
|
setReasonCode(null);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
/* istanbul ignore if: This API is not available in the test environment. */
|
|
if (scrollTo.current && scrollTo.current.scrollIntoView) {
|
|
// Use a timeout since the component is first given focus, which scrolls
|
|
// it into view but doesn't centrally align it. This should run after that.
|
|
setTimeout(() => {
|
|
scrollTo.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
}, 0);
|
|
}
|
|
}, [scrollTo, isOpen]);
|
|
|
|
return (
|
|
<ModalDialog
|
|
title={intl.formatMessage(messages.closePostModalTitle)}
|
|
isOpen={isOpen}
|
|
onClose={onCancel}
|
|
hasCloseButton={false}
|
|
zIndex={5000}
|
|
>
|
|
<ModalDialog.Header>
|
|
<ModalDialog.Title>
|
|
{intl.formatMessage(messages.closePostModalTitle)}
|
|
</ModalDialog.Title>
|
|
</ModalDialog.Header>
|
|
<ModalDialog.Body>
|
|
<p ref={scrollTo}>{intl.formatMessage(messages.closePostModalText)}</p>
|
|
<Form.Group>
|
|
<Form.Control
|
|
name="reasonCode"
|
|
as="select"
|
|
value={reasonCode || ''}
|
|
onChange={onChange}
|
|
aria-describedby="closeReasonCodeInput"
|
|
floatingLabel={intl.formatMessage(messages.closePostModalReasonCodeInput)}
|
|
>
|
|
<option key="empty" value="">---</option>
|
|
{postCloseReasons.map(({ code, label }) => (
|
|
<option key={code} value={code}>{label}</option>
|
|
))}
|
|
</Form.Control>
|
|
</Form.Group>
|
|
</ModalDialog.Body>
|
|
<ModalDialog.Footer>
|
|
<ActionRow>
|
|
<ModalDialog.CloseButton variant="tertiary">
|
|
{intl.formatMessage(messages.closePostModalButtonCancel)}
|
|
</ModalDialog.CloseButton>
|
|
<Button variant="primary" onClick={() => onConfirm(reasonCode)}>
|
|
{intl.formatMessage(messages.closePostModalButtonConfirm)}
|
|
</Button>
|
|
</ActionRow>
|
|
</ModalDialog.Footer>
|
|
</ModalDialog>
|
|
);
|
|
}
|
|
|
|
ClosePostReasonModal.propTypes = {
|
|
intl: intlShape.isRequired,
|
|
isOpen: PropTypes.bool.isRequired,
|
|
onCancel: PropTypes.func.isRequired,
|
|
onConfirm: PropTypes.func.isRequired,
|
|
};
|
|
|
|
export default injectIntl(ClosePostReasonModal);
|