@true-engineering/true-react-common-ui-kit 2.2.0 → 2.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "2.2.0",
+  "version": "2.3.1",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [
@@ -42,7 +42,7 @@
     "types-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@true-engineering/true-react-platform-helpers": "0.0.4",
+    "@true-engineering/true-react-platform-helpers": "0.0.5",
     "clsx": "1.2.1",
     "country-flag-icons": "1.5.5",
     "date-fns": "2.29.3",

package/src/components/Modal/Modal.tsx

@@ -1,6 +1,7 @@
 import { FC, ReactNode, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { RemoveScroll } from 'react-remove-scroll';
 import { CSSTransition } from 'react-transition-group';
+import { TransitionProps } from 'react-transition-group/Transition';
 import clsx from 'clsx';
 import {
   addDataTestId,
@@ -15,7 +16,21 @@ import { ModalStyles, styles } from './Modal.styles';
 
 export type IModalPosition = 'center' | 'left' | 'right' | 'static';
 
-export interface IModalProps extends ICommonProps {
+export type IModalTransitionProps = Pick<
+  TransitionProps<HTMLDivElement>,
+  | 'in' // Аналог isOpen, но это свойство нужно для корректной отрисовки Modal внутри TransitionGroup
+  | 'mountOnEnter'
+  | 'unmountOnExit'
+  | 'timeout'
+  | 'onEnter'
+  | 'onEntering'
+  | 'onEntered'
+  | 'onExit'
+  | 'onExiting'
+  | 'onExited'
+>;
+
+export interface IModalProps extends ICommonProps, IModalTransitionProps {
   tweakStyles?: ModalStyles;
   title?: ReactNode;
   size?: 'l' | 'm' | 's';
@@ -32,9 +47,7 @@ export interface IModalProps extends ICommonProps {
   isOpen?: boolean;
   zIndex?: number;
   testId?: string;
-  onEnter?(): void;
   onClose?(): void;
-  onCompletelyHidden?(): void;
 }
 
 export const Modal: FC<IModalProps> = ({
@@ -55,10 +68,12 @@ export const Modal: FC<IModalProps> = ({
   shouldCloseOnOverlayClick = true,
   shouldCloseOnEsc = true,
   shouldBlockScroll = true,
+  timeout = 150,
+  unmountOnExit = true,
   onClose,
-  onCompletelyHidden,
-  onEnter,
+  ...restProps
 }) => {
+  const isModalOpen = isOpen ?? restProps.in ?? false;
   const { classes, componentStyles } = useTheme('Modal', styles, tweakStyles);
 
   const tweakCloseButtonStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakCloseButton');
@@ -96,27 +111,26 @@ export const Modal: FC<IModalProps> = ({
   );
 
   useEffect(() => {
-    if (!shouldCloseOnEsc || onClose === undefined || !isOpen) {
+    if (!shouldCloseOnEsc || onClose === undefined || !isModalOpen) {
       return () => null;
     }
 
     document.addEventListener('keydown', handleEscClose);
     return () => document.removeEventListener('keydown', handleEscClose);
-  }, [shouldCloseOnEsc, onClose, isOpen, handleEscClose]);
+  }, [shouldCloseOnEsc, onClose, isModalOpen, handleEscClose]);
 
   return (
     <CSSTransition
-      in={isOpen}
-      timeout={150}
-      unmountOnExit
+      in={isModalOpen}
+      timeout={timeout}
+      unmountOnExit={unmountOnExit}
       classNames={{
         enter: classes['modal-enter'],
         enterActive: classes['modal-enter-active'],
         exit: classes['modal-exit'],
         exitActive: classes['modal-exit-active'],
       }}
-      onEnter={onEnter}
-      onExited={onCompletelyHidden}
+      {...restProps}
     >
       <div className={classes.modalWrapper}>
         <RemoveScroll enabled={shouldBlockScroll} forwardProps>

package/src/helpers/deprecated.ts

@@ -5,6 +5,7 @@ import {
   getSelectKeyHandler as getSelectKeyHandlerHelper,
   getTestId as getTestIdHelper,
   isEmpty as isEmptyHelper,
+  isNotEmpty as isNotEmptyHelper,
   isNumberInteger,
   isString,
   isStringNotEmpty as isStringNotEmptyHelper,
@@ -19,4 +20,4 @@ export const getTestId = getTestIdHelper;
 export const isStringNotEmpty = isStringNotEmptyHelper;
 export const isEmpty = isEmptyHelper;
 export const isNotEmpty = <T>(val: T | null | undefined): val is T =>
-  (isString(val) && isStringNotEmpty(val)) || isNotEmpty(val);
+  (isString(val) && isStringNotEmptyHelper(val)) || isNotEmptyHelper(val);