%PDF- %PDF-
Direktori : /home/emergentqj/actioncivile/pre-auth/.8352c036a19b0051d0217d27d25e3f4a/static/js/common/components/Modal/ |
Current File : /home/emergentqj/actioncivile/pre-auth/.8352c036a19b0051d0217d27d25e3f4a/static/js/common/components/Modal/Modal.jsx |
import React, { useState } from "react"; import PropTypes from "prop-types"; import CloseIcon from "./images/close.svg"; import { Text, TEXT_KINDS, TEXT_SIZES } from "../Text"; import { Button } from "../Button/Button"; import { StyledModal, Title, Header, Footer, BackButtonContainer, } from "./Modal.styles"; import { Body } from "./components"; export function Modal({ isOpen, title, message, confirmLabel, cancelLabel, backLabel, onConfirm, onClose, onBack, Component, componentDefaultValue, maxBodyHeight, }) { const [componentValue, setComponentValue] = useState(); const [bodyHeight, setBodyHeight] = useState(); const isBodyMaxHeight = bodyHeight >= maxBodyHeight; const showFooter = backLabel || cancelLabel || confirmLabel; return ( <StyledModal isOpen={isOpen} onRequestClose={onClose} appElement={document.getElementById("root")} style={{ overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)", zIndex: 1000, overflow: "auto", }, }} > <Header isBodyMaxHeight={isBodyMaxHeight}> {title && ( <Title kind={TEXT_KINDS.TITLE} size={TEXT_SIZES.LARGE}> {title} </Title> )} <Button onClick={onClose} icon={CloseIcon} /> </Header> <Body isBodyMaxHeight={isBodyMaxHeight} maxBodyHeight={maxBodyHeight} onHeightChange={setBodyHeight} > {message && ( <Text kind={TEXT_KINDS.BODY} size={TEXT_SIZES.MEDIUM}> {message} </Text> )} {Component && ( <Component defaultValue={componentDefaultValue} onChange={setComponentValue} onClose={onClose} onBack={onBack} onConfirm={onConfirm} /> )} </Body> {showFooter && ( <Footer isBodyMaxHeight={isBodyMaxHeight}> {backLabel && ( <BackButtonContainer> <Button onClick={onBack}>{backLabel}</Button> </BackButtonContainer> )} {cancelLabel && <Button onClick={onClose}>{cancelLabel}</Button>} {confirmLabel && ( <Button filled onClick={() => onConfirm(componentValue)}> {confirmLabel} </Button> )} </Footer> )} </StyledModal> ); } Modal.defaultProps = { title: null, message: null, confirmLabel: null, cancelLabel: null, backLabel: null, onConfirm: () => {}, onClose: () => {}, onBack: null, Component: null, maxBodyHeight: 560, componentDefaultValue: null, }; Modal.propTypes = { isOpen: PropTypes.bool.isRequired, title: PropTypes.string, message: PropTypes.string, confirmLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), cancelLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), backLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), onConfirm: PropTypes.func, onClose: PropTypes.func, onBack: PropTypes.func, Component: PropTypes.func, maxBodyHeight: PropTypes.number, // eslint-disable-next-line react/forbid-prop-types componentDefaultValue: PropTypes.any, };