@modul/mbui 0.0.1-beta-pv-50520-797e2860 → 0.0.1-beta-pv-50528-277b7dcf

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modul/mbui",
-  "version": "0.0.1-beta-pv-50520-797e2860",
+  "version": "0.0.1-beta-pv-50528-277b7dcf",
   "packageManager": "yarn@3.5.1",
   "main": "src/index.ts",
   "scripts": {
@@ -14,7 +14,8 @@
   ],
   "dependencies": {
     "react-datepicker": "4.16.0",
-    "react-imask": "7.1.3"
+    "react-imask": "7.1.3",
+    "react-modal": "3.16.1"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",

package/src/Popup/BaseModal.tsx

@@ -0,0 +1,53 @@
+import classNames from 'classnames'
+import React, { FC } from 'react'
+import Modal from 'react-modal'
+import { IBaseModal } from './types'
+
+const BaseModal: FC<IBaseModal> = ({
+	shouldCloseOnOverlayClick = true,
+	children,
+	isOpen,
+	appElement,
+	onAfterOpen,
+	onRequestClose,
+	overlayClassName,
+}) => {
+	const handleOverlayOnClick = () => {
+		if (shouldCloseOnOverlayClick) {
+			onRequestClose?.()
+		}
+	}
+
+	//FIXME: из-за portalCreate у нас события клика всплывают с модального окна в компонент где он был замуонтин
+	const preventEvents = (e: React.MouseEvent) => {
+		e.stopPropagation()
+	}
+
+	const overlayClasses = classNames('popup_overlay', overlayClassName)
+
+	return (
+		<Modal
+			isOpen={isOpen}
+			contentLabel=""
+			appElement={appElement}
+			onRequestClose={onRequestClose}
+			shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
+			onAfterOpen={onAfterOpen}
+			className="popup_table"
+			overlayClassName={overlayClasses}
+		>
+			<div
+				className="popup_cell"
+				onClick={preventEvents}
+			>
+				{children}
+				<div
+					className="popup_backdrop"
+					onClick={handleOverlayOnClick}
+				/>
+			</div>
+		</Modal>
+	)
+}
+
+export default BaseModal

package/src/Popup/Popup.tsx

@@ -0,0 +1,45 @@
+import React, { FC } from 'react'
+import BaseModal from './BaseModal'
+import { IPopup } from './types'
+
+const Popup: FC<IPopup> = ({
+	shouldCloseOnOverlayClick = true,
+	children,
+	isOpen,
+	appElement = document.getElementsByTagName('body')[0],
+	onAfterOpen,
+	onRequestClose,
+	overlayClassName,
+	layerClassName,
+	disableClose,
+	...props
+}) => {
+	const handleRequestClose = () => {
+		onRequestClose()
+	}
+
+	const classNames = ['popup_layer', layerClassName || ''].join(' ')
+
+	return (
+		<BaseModal
+			{...props}
+			isOpen={isOpen}
+			appElement={appElement}
+			onAfterOpen={onAfterOpen}
+			shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
+			onRequestClose={handleRequestClose}
+		>
+			<div className={classNames}>
+				{!disableClose && (
+					<button
+						className="popup_close icon-close"
+						onClick={handleRequestClose}
+					/>
+				)}
+				{children}
+			</div>
+		</BaseModal>
+	)
+}
+
+export default Popup

package/src/Popup/index.ts

@@ -0,0 +1,3 @@
+import Popup from './Popup'
+
+export { Popup }

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
+}

package/src/index.ts

@@ -2,6 +2,7 @@ import { Button } from './Base/Buttons'
 import { TextLink } from './Base/Links'
 import { DatePicker } from './DatePicker'
 import { Input } from './Base/Input'
-import { Checkbox } from './Base/Checkbox'
+//
+import { Popup } from './Popup'
 
-export { Button, TextLink, DatePicker, Input, Checkbox }
+export { Button, TextLink, DatePicker, Input, Popup }

package/src/Base/Checkbox/Checkbox.tsx

@@ -1,66 +0,0 @@
-import React, { FC, InputHTMLAttributes, ReactNode } from 'react'
-import classnames from 'classnames'
-interface ICheckbox extends InputHTMLAttributes<HTMLInputElement> {
-	switcher?: boolean
-	children?: ReactNode
-	childrenWrapperClassName?: string
-	labelClassName?: string
-	iconId?: string
-	onClick?: () => void
-	disabled?: boolean
-}
-
-const Checkbox: FC<ICheckbox> = ({
-	id,
-	name,
-	checked,
-	onChange,
-	onClick,
-	value = 'on',
-	switcher,
-	onBlur,
-	onFocus,
-	iconId,
-	children,
-	childrenWrapperClassName,
-	labelClassName,
-	disabled,
-}) => {
-	const labelClasses = classnames('label-check', labelClassName, { _switcher: switcher })
-
-	const renderIcon = (
-		<i
-			className="icon"
-			id={iconId}
-		/>
-	)
-
-	const renderChildren = children && <span className={childrenWrapperClassName}>{children}</span>
-
-	return (
-		<span onClick={onClick}>
-			<input
-				type="checkbox"
-				checked={checked}
-				name={name}
-				id={id}
-				onChange={onChange}
-				value={value}
-				onBlur={onBlur}
-				onFocus={onFocus}
-				disabled={disabled}
-			/>
-
-			<label
-				htmlFor={id}
-				className={labelClasses}
-				data-checked={checked}
-			>
-				{renderIcon}
-				{renderChildren}
-			</label>
-		</span>
-	)
-}
-
-export default Checkbox

package/src/Base/Checkbox/index.ts

@@ -1,3 +0,0 @@
-import Checkbox from './Checkbox'
-
-export { Checkbox }