@modul/mbui 0.0.1-beta-pv-50528-f9e8be2e → 0.0.1-beta-pv-50528-277b7dcf

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modul/mbui",
-  "version": "0.0.1-beta-pv-50528-f9e8be2e",
+  "version": "0.0.1-beta-pv-50528-277b7dcf",
   "packageManager": "yarn@3.5.1",
   "main": "src/index.ts",
   "scripts": {

package/src/Popup/BaseModal.tsx

@@ -1,18 +1,9 @@
-import React, { FC, ReactNode } from 'react'
+import classNames from 'classnames'
+import React, { FC } from 'react'
 import Modal from 'react-modal'
+import { IBaseModal } from './types'
 
-//Заменить на interface
-type BaseModalProps = {
-	shouldCloseOnOverlayClick?: boolean
-	children: ReactNode
-	isOpen: boolean
-	appElement?: object
-	onAfterOpen?: () => void
-	onRequestClose?: () => void
-	overlayClassName?: string
-}
-
-const BaseModal: FC<BaseModalProps> = ({
+const BaseModal: FC<IBaseModal> = ({
 	shouldCloseOnOverlayClick = true,
 	children,
 	isOpen,
@@ -21,27 +12,29 @@ const BaseModal: FC<BaseModalProps> = ({
 	onRequestClose,
 	overlayClassName,
 }) => {
-	const handleOverlayOnClick = (event: React.MouseEvent) => {
+	const handleOverlayOnClick = () => {
 		if (shouldCloseOnOverlayClick) {
 			onRequestClose?.()
 		}
 	}
 
+	//FIXME: из-за portalCreate у нас события клика всплывают с модального окна в компонент где он был замуонтин
 	const preventEvents = (e: React.MouseEvent) => {
 		e.stopPropagation()
 	}
 
-	//TODO: для чего нужен AppElement
+	const overlayClasses = classNames('popup_overlay', overlayClassName)
+
 	return (
 		<Modal
 			isOpen={isOpen}
 			contentLabel=""
-			appElement={appElement ?? undefined}
+			appElement={appElement}
 			onRequestClose={onRequestClose}
 			shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
 			onAfterOpen={onAfterOpen}
 			className="popup_table"
-			overlayClassName={`popup_overlay ${overlayClassName ?? ''}`}
+			overlayClassName={overlayClasses}
 		>
 			<div
 				className="popup_cell"

package/src/Popup/Popup.tsx

@@ -1,19 +1,8 @@
-import React, { FC, ReactNode, useState, useEffect } from 'react'
+import React, { FC } from 'react'
 import BaseModal from './BaseModal'
+import { IPopup } from './types'
 
-type BaseModalProps = {
-	shouldCloseOnOverlayClick?: boolean
-	children: ReactNode
-	isOpen: boolean
-	appElement?: object
-	onAfterOpen?: () => void
-	onRequestClose?: () => void
-	overlayClassName?: string
-	layerClassName: string
-	disableClose?: boolean
-}
-
-const Popup: FC<BaseModalProps> = ({
+const Popup: FC<IPopup> = ({
 	shouldCloseOnOverlayClick = true,
 	children,
 	isOpen,

package/src/Popup/types.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react'
+
+export interface IBaseModal {
+	isOpen: boolean //modal state
+	shouldCloseOnOverlayClick?: boolean // When shouldCloseOnOverlayClick is true. it requires the onRequestClose to be defined in order to close.
+	children?: ReactNode
+	appElement?: object
+	onAfterOpen?: () => void // This event helps to trigger a function just after the modal opens
+	onRequestClose?: () => void
+	overlayClassName?: string
+}
+
+export interface IPopup extends IBaseModal {
+	layerClassName?: string
+	disableClose?: boolean
+}