@parkassist/pa-ui-library/dist/components/Modal/index.js

INX Platform elements

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React, { useEffect } from "react";
import { Column, Row } from "../Layout/Flex";
import Button from "../Button";
import { StyledModal, ContentRow, ChildrenContainer, TitleRow, Title, ButtonsRow, StyledSeparator, LeftContent } from "./styled";
import "rodal/lib/rodal.css";
import { IconButton } from "../../index";
import * as Icons from "../Icons";
import FontStyles from "../../constants/FontStyles";
export const CloseButton = ({
  onClick,
  display = true,
  inline = false
}) => display ? _jsx(IconButton, {
  placement: "center",
  onClick: onClick,
  inline: inline,
  icon: _jsx(Icons.CloseIcon, {})
}) : null;
const ModalComponent = ({
  children,
  modalTitle,
  okButton = "Save",
  cancelButton = "Cancel",
  onConfirm,
  visible,
  onClose,
  height,
  hideButtons = true,
  hideCancel = false,
  width = 350,
  touchingend = "false",
  showClose = true,
  cancelAction = null,
  alternativeButton = null,
  alternativeAction = null,
  cancelDanger = false,
  okDisabled = false,
  noPadding = false,
  centeredTitle = false,
  titleSize = null,
  FooterLeftContent = null,
  FooterRightContent = null
}) => {
  useEffect(() => {
    let isMounted = true;
    if (isMounted) {
      window.onkeydown = visible ? function (e) {
        e.code === "Enter" && onConfirm && onConfirm();
      } : null;
    }
    return () => {
      isMounted = false;
    };
  }, [visible, children, onConfirm]);
  return _jsxs(StyledModal, {
    id: `${modalTitle}-modal`,
    width: width,
    height: height,
    closeOnEsc: true,
    visible: visible,
    onClose: onClose,
    padding: 0,
    showCloseButton: false,
    children: [_jsx(TitleRow, {
      children: _jsxs(Title, {
        titleSize: titleSize,
        children: [_jsx("div", {
          "data-testid": 'modal-title',
          style: {
            display: "flex",
            flex: 1,
            font: FontStyles.SUBHEADER,
            justifyContent: centeredTitle && "center",
            lineHeight: "32px"
          },
          children: modalTitle
        }), showClose && _jsx(CloseButton, {
          onClick: onClose
        })]
      })
    }), _jsx(ContentRow, {
      children: _jsx(ChildrenContainer, {
        noPadding: noPadding,
        touchingend: touchingend,
        children: children
      })
    }), !hideButtons && _jsxs(Column, {
      children: [_jsx(Row, {
        children: _jsx(StyledSeparator, {
          height: height,
          width: width + 20,
          touchingend: touchingend
        })
      }), _jsxs(ButtonsRow, {
        children: [FooterLeftContent && _jsx(LeftContent, {
          children: _jsx(FooterLeftContent, {})
        }), FooterRightContent ? _jsx(FooterRightContent, {}) : _jsxs(_Fragment, {
          children: [!hideCancel && _jsx(Button, {
            "data-testid": "cancel-button",
            style: {
              marginRight: "13px"
            },
            noMarginTop: true,
            dangerous: cancelDanger,
            onClick: cancelAction || onClose,
            children: cancelButton
          }), _jsx(Button, {
            "data-testid": "ok-button",
            dark: true,
            disabled: okDisabled,
            onClick: onConfirm,
            noMarginTop: true,
            children: okButton
          })]
        }), alternativeAction && _jsx(Button, {
          onClick: alternativeAction,
          noMarginTop: true,
          dark: true,
          style: {
            marginLeft: "13px"
          },
          children: alternativeButton
        })]
      })]
    })]
  });
};
export default ModalComponent;