@true-engineering/true-react-common-ui-kit 2.1.1 → 2.3.0

package/src/components/Modal/Modal.tsx

@@ -1,181 +1,200 @@
-import { FC, ReactNode, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';
-import { RemoveScroll } from 'react-remove-scroll';
-import { CSSTransition } from 'react-transition-group';
-import clsx from 'clsx';
-import { isNotEmpty, getTestId, addDataAttributes, addDataTestId } from '../../helpers';
-import { useTheme, useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { CloseButton } from '../CloseButton';
-import { ModalStyles, styles } from './Modal.styles';
-
-export type IModalPosition = 'center' | 'left' | 'right' | 'static';
-
-export interface IModalProps extends ICommonProps {
-  tweakStyles?: ModalStyles;
-  title?: ReactNode;
-  size?: 'l' | 'm' | 's';
-  isFooterSticky?: boolean;
-  buttons?: ReactNode[];
-  buttonsAlign?: 'left' | 'center' | 'right';
-  children?: ReactNode | ReactNode[];
-  position?: IModalPosition;
-  hasCloseButton?: boolean;
-  hasOverlay?: boolean;
-  shouldCloseOnOverlayClick?: boolean;
-  shouldCloseOnEsc?: boolean;
-  shouldBlockScroll?: boolean;
-  isOpen?: boolean;
-  zIndex?: number;
-  testId?: string;
-  onEnter?(): void;
-  onClose?(): void;
-  onCompletelyHidden?(): void;
-}
-
-export const Modal: FC<IModalProps> = ({
-  data,
-  tweakStyles,
-  title,
-  size = 'l',
-  isFooterSticky,
-  buttons,
-  buttonsAlign = 'right',
-  hasCloseButton = true,
-  hasOverlay = true,
-  isOpen = false,
-  position = 'center',
-  children,
-  zIndex,
-  testId,
-  shouldCloseOnOverlayClick = true,
-  shouldCloseOnEsc = true,
-  shouldBlockScroll = true,
-  onClose,
-  onCompletelyHidden,
-  onEnter,
-}) => {
-  const { classes, componentStyles } = useTheme('Modal', styles, tweakStyles);
-
-  const tweakCloseButtonStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakCloseButton');
-
-  const [isClickOnOverlay, setIsClickOnOverlay] = useState(false);
-
-  const hasFooter = buttons !== undefined && buttons.length > 0;
-  const overlay = useRef<HTMLDivElement>(null);
-
-  // Клик на оверлее обрабатываем через связку onMouseDown и onMouseUp, т.к. клик
-  // создает ложные срабатывания (баг при старте клика на модалке и отпусканием мышки уже на оверлее)
-  const handleOutsideMouseDown = (event: MouseEvent) => {
-    if (onClose !== undefined && event.target === overlay.current) {
-      setIsClickOnOverlay(true);
-    }
-  };
-
-  const handleOutsideMouseUp = (event: MouseEvent) => {
-    if (onClose === undefined) {
-      return;
-    }
-    if (event.target === overlay.current && isClickOnOverlay) {
-      onClose();
-    }
-    setIsClickOnOverlay(false);
-  };
-
-  const handleEscClose = useCallback(
-    (event: KeyboardEvent) => {
-      if (event.code === 'Escape' && onClose !== undefined) {
-        onClose();
-      }
-    },
-    [onClose],
-  );
-
-  useEffect(() => {
-    if (!shouldCloseOnEsc || onClose === undefined || !isOpen) {
-      return () => null;
-    }
-
-    document.addEventListener('keydown', handleEscClose);
-    return () => document.removeEventListener('keydown', handleEscClose);
-  }, [shouldCloseOnEsc, onClose, isOpen, handleEscClose]);
-
-  return (
-    <CSSTransition
-      in={isOpen}
-      timeout={150}
-      unmountOnExit
-      classNames={{
-        enter: classes['modal-enter'],
-        enterActive: classes['modal-enter-active'],
-        exit: classes['modal-exit'],
-        exitActive: classes['modal-exit-active'],
-      }}
-      onEnter={onEnter}
-      onExited={onCompletelyHidden}
-    >
-      <div className={classes.modalWrapper}>
-        <RemoveScroll enabled={shouldBlockScroll} forwardProps>
-          <div
-            className={clsx(classes.root, classes[size], {
-              [classes.overlay]: position !== 'static' && hasOverlay,
-              [classes.sideBar]: position === 'left' || position === 'right',
-              [classes.fixedPosition]: position !== 'static',
-            })}
-            style={{ zIndex }}
-            {...addDataTestId(testId)}
-            {...addDataAttributes(data)}
-          >
-            <div
-              ref={overlay}
-              className={clsx(classes.innerOverlay, classes[`position-${position}`])}
-              onMouseDown={shouldCloseOnOverlayClick ? handleOutsideMouseDown : undefined}
-              onMouseUp={shouldCloseOnOverlayClick ? handleOutsideMouseUp : undefined}
-            >
-              <div
-                className={clsx(classes.modal, {
-                  [classes.withoutFooter]: !hasFooter,
-                  [classes.withStickyFooter]: isFooterSticky,
-                })}
-              >
-                {hasCloseButton && (
-                  <div className={classes.close}>
-                    <CloseButton
-                      testId={getTestId(testId, 'close-button')}
-                      tweakStyles={tweakCloseButtonStyles}
-                      onClose={onClose}
-                    />
-                  </div>
-                )}
-                {isNotEmpty(title) && (
-                  <h3
-                    className={clsx(classes.title, {
-                      [classes.titleWithCloseButton]: hasCloseButton,
-                    })}
-                  >
-                    {title}
-                  </h3>
-                )}
-                {isNotEmpty(children) && <div className={classes.content}>{children}</div>}
-                {hasFooter && (
-                  <div
-                    className={clsx(classes.footerWrapper, {
-                      [classes.stickyFooterWrapper]: isFooterSticky,
-                    })}
-                  >
-                    <div
-                      className={clsx(classes.footer, classes[`buttons-${buttonsAlign}`], {
-                        [classes.stickyFooter]: isFooterSticky,
-                      })}
-                    >
-                      {buttons.map((button) => button)}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        </RemoveScroll>
-      </div>
-    </CSSTransition>
-  );
-};
+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,
+  getTestId,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { useTheme, useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { CloseButton } from '../CloseButton';
+import { ModalStyles, styles } from './Modal.styles';
+
+export type IModalPosition = 'center' | 'left' | 'right' | 'static';
+
+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';
+  isFooterSticky?: boolean;
+  buttons?: ReactNode[];
+  buttonsAlign?: 'left' | 'center' | 'right';
+  children?: ReactNode | ReactNode[];
+  position?: IModalPosition;
+  hasCloseButton?: boolean;
+  hasOverlay?: boolean;
+  shouldCloseOnOverlayClick?: boolean;
+  shouldCloseOnEsc?: boolean;
+  shouldBlockScroll?: boolean;
+  isOpen?: boolean;
+  zIndex?: number;
+  testId?: string;
+  onClose?(): void;
+}
+
+export const Modal: FC<IModalProps> = ({
+  data,
+  tweakStyles,
+  title,
+  size = 'l',
+  isFooterSticky,
+  buttons,
+  buttonsAlign = 'right',
+  hasCloseButton = true,
+  hasOverlay = true,
+  isOpen = false,
+  position = 'center',
+  children,
+  zIndex,
+  testId,
+  shouldCloseOnOverlayClick = true,
+  shouldCloseOnEsc = true,
+  shouldBlockScroll = true,
+  timeout = 150,
+  unmountOnExit = true,
+  onClose,
+  ...restProps
+}) => {
+  const isModalOpen = isOpen ?? restProps.in ?? false;
+  const { classes, componentStyles } = useTheme('Modal', styles, tweakStyles);
+
+  const tweakCloseButtonStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakCloseButton');
+
+  const [isClickOnOverlay, setIsClickOnOverlay] = useState(false);
+
+  const hasFooter = buttons !== undefined && buttons.length > 0;
+  const overlay = useRef<HTMLDivElement>(null);
+
+  // Клик на оверлее обрабатываем через связку onMouseDown и onMouseUp, т.к. клик
+  // создает ложные срабатывания (баг при старте клика на модалке и отпусканием мышки уже на оверлее)
+  const handleOutsideMouseDown = (event: MouseEvent) => {
+    if (onClose !== undefined && event.target === overlay.current) {
+      setIsClickOnOverlay(true);
+    }
+  };
+
+  const handleOutsideMouseUp = (event: MouseEvent) => {
+    if (onClose === undefined) {
+      return;
+    }
+    if (event.target === overlay.current && isClickOnOverlay) {
+      onClose();
+    }
+    setIsClickOnOverlay(false);
+  };
+
+  const handleEscClose = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.code === 'Escape' && onClose !== undefined) {
+        onClose();
+      }
+    },
+    [onClose],
+  );
+
+  useEffect(() => {
+    if (!shouldCloseOnEsc || onClose === undefined || !isModalOpen) {
+      return () => null;
+    }
+
+    document.addEventListener('keydown', handleEscClose);
+    return () => document.removeEventListener('keydown', handleEscClose);
+  }, [shouldCloseOnEsc, onClose, isModalOpen, handleEscClose]);
+
+  return (
+    <CSSTransition
+      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'],
+      }}
+      {...restProps}
+    >
+      <div className={classes.modalWrapper}>
+        <RemoveScroll enabled={shouldBlockScroll} forwardProps>
+          <div
+            className={clsx(classes.root, classes[size], {
+              [classes.overlay]: position !== 'static' && hasOverlay,
+              [classes.sideBar]: position === 'left' || position === 'right',
+              [classes.fixedPosition]: position !== 'static',
+            })}
+            style={{ zIndex }}
+            {...addDataTestId(testId)}
+            {...addDataAttributes(data)}
+          >
+            <div
+              ref={overlay}
+              className={clsx(classes.innerOverlay, classes[`position-${position}`])}
+              onMouseDown={shouldCloseOnOverlayClick ? handleOutsideMouseDown : undefined}
+              onMouseUp={shouldCloseOnOverlayClick ? handleOutsideMouseUp : undefined}
+            >
+              <div
+                className={clsx(classes.modal, {
+                  [classes.withoutFooter]: !hasFooter,
+                  [classes.withStickyFooter]: isFooterSticky,
+                })}
+              >
+                {hasCloseButton && (
+                  <div className={classes.close}>
+                    <CloseButton
+                      testId={getTestId(testId, 'close-button')}
+                      tweakStyles={tweakCloseButtonStyles}
+                      onClose={onClose}
+                    />
+                  </div>
+                )}
+                {isReactNodeNotEmpty(title) && (
+                  <h3
+                    className={clsx(classes.title, {
+                      [classes.titleWithCloseButton]: hasCloseButton,
+                    })}
+                  >
+                    {title}
+                  </h3>
+                )}
+                {isReactNodeNotEmpty(children) && <div className={classes.content}>{children}</div>}
+                {hasFooter && (
+                  <div
+                    className={clsx(classes.footerWrapper, {
+                      [classes.stickyFooterWrapper]: isFooterSticky,
+                    })}
+                  >
+                    <div
+                      className={clsx(classes.footer, classes[`buttons-${buttonsAlign}`], {
+                        [classes.stickyFooter]: isFooterSticky,
+                      })}
+                    >
+                      {buttons.map((button) => button)}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </RemoveScroll>
+      </div>
+    </CSSTransition>
+  );
+};

package/src/components/Modal/index.ts

@@ -1,2 +1,2 @@
-export * from './Modal';
-export type { ModalStyles } from './Modal.styles';
+export * from './Modal';
+export type { ModalStyles } from './Modal.styles';

package/src/components/MoreMenu/MoreMenu.stories.tsx

@@ -1,46 +1,46 @@
-import { ComponentStory } from '@storybook/react';
-import { colors } from '../../theme';
-import { MoreMenu } from './MoreMenu';
-
-const menuItems = [
-  { item: 'Печатать билет', onClick: console.log },
-  { item: 'Выписать', onClick: console.log },
-  { item: 'Аннулировать', onClick: console.log, shouldDrawSpacerBelow: true },
-  {
-    item: (() => <div style={{ color: colors.RED_ACTIVE }}>Удалить</div>)(),
-    onClick: console.log,
-  },
-  {
-    item: (() => <div style={{ color: colors.RED_ACTIVE }}>Удалить</div>)(),
-    onClick: console.log,
-  },
-];
-
-export default {
-  title: 'MoreMenu',
-  component: MoreMenu,
-};
-
-const Template: ComponentStory<typeof MoreMenu> = (args) => (
-  <div
-    style={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: 600,
-      height: 400,
-    }}
-  >
-    <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
-      <div style={{ flexShrink: 0 }}>Test subject</div>
-      <MoreMenu {...args} items={menuItems} />
-    </div>
-  </div>
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  isDisabled: false,
-  hasDefaultStateBackground: true,
-};
+import { ComponentStory } from '@storybook/react';
+import { colors } from '../../theme';
+import { MoreMenu } from './MoreMenu';
+
+const menuItems = [
+  { item: 'Печатать билет', onClick: console.log },
+  { item: 'Выписать', onClick: console.log },
+  { item: 'Аннулировать', onClick: console.log, shouldDrawSpacerBelow: true },
+  {
+    item: (() => <div style={{ color: colors.RED_ACTIVE }}>Удалить</div>)(),
+    onClick: console.log,
+  },
+  {
+    item: (() => <div style={{ color: colors.RED_ACTIVE }}>Удалить</div>)(),
+    onClick: console.log,
+  },
+];
+
+export default {
+  title: 'MoreMenu',
+  component: MoreMenu,
+};
+
+const Template: ComponentStory<typeof MoreMenu> = (args) => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 600,
+      height: 400,
+    }}
+  >
+    <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
+      <div style={{ flexShrink: 0 }}>Test subject</div>
+      <MoreMenu {...args} items={menuItems} />
+    </div>
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  isDisabled: false,
+  hasDefaultStateBackground: true,
+};

package/src/components/MoreMenu/MoreMenu.styles.ts

@@ -1,70 +1,70 @@
-import { rgba } from '../../helpers';
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {
-    position: 'relative',
-  },
-
-  hasCircle: {},
-
-  button: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 32,
-    height: 32,
-    backgroundColor: 'transparent',
-    color: colors.FONT_MEDIUM,
-    padding: 0,
-    borderRadius: '50%',
-    border: 'none',
-    cursor: 'pointer',
-    transition: 'background-color 0.25s ease-in-out',
-
-    '&$hasCircle': {
-      backgroundColor: rgba(colors.GREY_HOVER, 0.5),
-    },
-
-    '&:hover': {
-      backgroundColor: rgba(colors.BORDER_MAIN, 0.5),
-    },
-
-    '&:focus': {
-      backgroundColor: rgba(colors.FONT_DISABLED, 0.2),
-    },
-
-    '&:active, &$active': {
-      backgroundColor: rgba(colors.FONT_DISABLED, 0.5),
-    },
-
-    '&$disabled': {
-      backgroundColor: rgba(colors.GREY_FOCUS, 0.5),
-      color: colors.BORDER_MAIN,
-    },
-  },
-
-  icon: {
-    width: 30,
-    height: 30,
-  },
-
-  active: {},
-
-  disabled: {
-    cursor: 'default',
-  },
-
-  menu: {
-    position: 'absolute',
-    zIndex: 5,
-    top: '100%',
-    right: 0,
-    marginTop: 6,
-  },
-
-  tweakList: {},
-};
-
-export type MoreMenuStyles = ComponentStyles<typeof styles>;
+import { rgba } from '../../helpers';
+import { colors } from '../../theme';
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {
+    position: 'relative',
+  },
+
+  hasCircle: {},
+
+  button: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 32,
+    height: 32,
+    backgroundColor: 'transparent',
+    color: colors.FONT_MEDIUM,
+    padding: 0,
+    borderRadius: '50%',
+    border: 'none',
+    cursor: 'pointer',
+    transition: 'background-color 0.25s ease-in-out',
+
+    '&$hasCircle': {
+      backgroundColor: rgba(colors.GREY_HOVER, 0.5),
+    },
+
+    '&:hover': {
+      backgroundColor: rgba(colors.BORDER_MAIN, 0.5),
+    },
+
+    '&:focus': {
+      backgroundColor: rgba(colors.FONT_DISABLED, 0.2),
+    },
+
+    '&:active, &$active': {
+      backgroundColor: rgba(colors.FONT_DISABLED, 0.5),
+    },
+
+    '&$disabled': {
+      backgroundColor: rgba(colors.GREY_FOCUS, 0.5),
+      color: colors.BORDER_MAIN,
+    },
+  },
+
+  icon: {
+    width: 30,
+    height: 30,
+  },
+
+  active: {},
+
+  disabled: {
+    cursor: 'default',
+  },
+
+  menu: {
+    position: 'absolute',
+    zIndex: 5,
+    top: '100%',
+    right: 0,
+    marginTop: 6,
+  },
+
+  tweakList: {},
+};
+
+export type MoreMenuStyles = ComponentStyles<typeof styles>;