%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/emergentqj/actioncivile/pre-auth/.f81b4c9eb38fd76cdf20462cf2027aa3/static/js/common/components/Modal/
Upload File :
Create Path :
Current File : /home/emergentqj/actioncivile/pre-auth/.f81b4c9eb38fd76cdf20462cf2027aa3/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,
};

Zerion Mini Shell 1.0