fix(plasma-core, plasma-ui): minor refactoring and types fix

salute-developers · Oct 18, 2023 · c6368e6 · c6368e6
1 parent d7856fb
commit c6368e6
Show file tree

Hide file tree

Showing 41 changed files with 141 additions and 241 deletions.
diff --git a/...rm -- placement bottom + stretch.snap.png → ...- _placement -- bottom + stretch.snap.png b/...rm -- placement bottom + stretch.snap.png → ...- _placement -- bottom + stretch.snap.png
diff --git a/...nfirm -- placement bottom + left.snap.png → ...irm -- _placement -- bottom-left.snap.png b/...nfirm -- placement bottom + left.snap.png → ...irm -- _placement -- bottom-left.snap.png
diff --git a/....tsx/Confirm -- placement center.snap.png → .../Confirm -- _placement -- center.snap.png b/....tsx/Confirm -- placement center.snap.png → .../Confirm -- _placement -- center.snap.png
diff --git a/... -- placement top-right + offset.snap.png → ..._placement -- top-right + offset.snap.png b/... -- placement top-right + offset.snap.png → ..._placement -- top-right + offset.snap.png
diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md
@@ -150,6 +150,7 @@ import { MediaQueryFunction } from '@salutejs/plasma-hope';
 import { Modal } from '@salutejs/plasma-hope';
 import { ModalAnimationInfo } from '@salutejs/plasma-hope';
 import { ModalBase } from '@salutejs/plasma-hope';
+import { modalBaseOverlayClass } from '@salutejs/plasma-hope';
 import { ModalBaseProps } from '@salutejs/plasma-hope';
 import { ModalBaseRootProps } from '@salutejs/plasma-hope';
 import { ModalOverlay } from '@salutejs/plasma-hope';
@@ -183,6 +184,7 @@ import { PopupBase } from '@salutejs/plasma-hope';
 import { PopupBasePlacement } from '@salutejs/plasma-hope';
 import { PopupBaseProps } from '@salutejs/plasma-hope';
 import { PopupBaseProvider } from '@salutejs/plasma-hope';
+import { popupBaseRootClass } from '@salutejs/plasma-hope';
 import { PopupContextType } from '@salutejs/plasma-hope';
 import { PopupInfo } from '@salutejs/plasma-hope';
 import { PopupProps } from '@salutejs/plasma-hope';
@@ -614,6 +616,8 @@ export { ModalAnimationInfo }
 
 export { ModalBase }
 
+export { modalBaseOverlayClass }
+
 export { ModalBaseProps }
 
 export { ModalBaseRootProps }
@@ -683,6 +687,8 @@ export { PopupBaseProps }
 
 export { PopupBaseProvider }
 
+export { popupBaseRootClass }
+
 export { PopupContextType }
 
 export { PopupInfo }

diff --git a/packages/plasma-b2c/src/components/ModalBase/ModalBase.stories.tsx b/packages/plasma-b2c/src/components/ModalBase/ModalBase.stories.tsx
@@ -6,9 +6,9 @@ import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
 
 import { SSRProvider } from '../SSRProvider';
 import { Button } from '../Button';
-import { PopupBaseProvider } from '../PopupBase';
+import { PopupBaseProvider, popupBaseRootClass } from '../PopupBase';
 
-import { ModalBase, useModalAnimation } from '.';
+import { ModalBase, modalBaseOverlayClass, useModalAnimation } from '.';
 
 export default {
     title: 'Controls/ModalBase',
@@ -65,8 +65,7 @@ const Content = styled.div`
 `;
 
 const StyledModal = styled(ModalBase)`
-    & > .popup-base-root,
-    .modal-base-overlay {
+    & > .${popupBaseRootClass}, .${modalBaseOverlayClass} {
         animation: ${({ theme, withAnimation, animationInfo }) =>
             /* eslint-disable-next-line no-nested-ternary */
             theme.lowPerformance || !withAnimation

diff --git a/packages/plasma-b2c/src/components/ModalBase/index.ts b/packages/plasma-b2c/src/components/ModalBase/index.ts
@@ -1,6 +1,6 @@
 export { ModalBase } from '@salutejs/plasma-hope';
 export { useModal, useModalAnimation } from '@salutejs/plasma-hope';
-export { ModalOverlay } from '@salutejs/plasma-hope';
+export { ModalOverlay, modalBaseOverlayClass } from '@salutejs/plasma-hope';
 
 export type {
     ModalBaseProps,

diff --git a/packages/plasma-b2c/src/components/PopupBase/PopupBase.stories.tsx b/packages/plasma-b2c/src/components/PopupBase/PopupBase.stories.tsx
@@ -7,7 +7,7 @@ import { surfaceSolid03, surfaceSolid02 } from '@salutejs/plasma-tokens-web';
 import { SSRProvider } from '../SSRProvider';
 import { Button } from '../Button';
 
-import { PopupBase, PopupBaseProvider, usePopupAnimation } from '.';
+import { PopupBase, PopupBaseProvider, popupBaseRootClass, usePopupAnimation } from '.';
 
 export default {
     title: 'Controls/PopupBase',
@@ -65,7 +65,7 @@ const Content = styled.div`
 `;
 
 const StyledPopupAnimation = styled(PopupBase)`
-    & > .popup-base-root {
+    & > .${popupBaseRootClass} {
         /* stylelint-disable */
         animation: ${({ theme, withAnimation, animationInfo }) =>
             /* eslint-disable-next-line no-nested-ternary */
@@ -98,7 +98,7 @@ const StyledPopupAnimation = styled(PopupBase)`
 `;
 
 const StyledPopupTransition = styled(PopupBase)`
-    & > .popup-base-root {
+    & > .${popupBaseRootClass} {
         ${({ animationInfo }) =>
             animationInfo.endTransition
                 ? css`

diff --git a/packages/plasma-b2c/src/components/PopupBase/index.ts b/packages/plasma-b2c/src/components/PopupBase/index.ts
@@ -1,5 +1,5 @@
 export { PopupBaseProvider, usePopupBaseContext } from '@salutejs/plasma-hope';
-export { PopupBase } from '@salutejs/plasma-hope';
+export { PopupBase, popupBaseRootClass } from '@salutejs/plasma-hope';
 export { usePopup, usePopupAnimation } from '@salutejs/plasma-hope';
 
 export type {

diff --git a/packages/plasma-core/api/plasma-core.api.md b/packages/plasma-core/api/plasma-core.api.md
@@ -757,12 +757,14 @@ export interface MaxLinesProps {
 }
 
 // @public (undocumented)
-export interface ModalAnimationInfo extends PopupAnimationInfo {
-}
+export type ModalAnimationInfo = PopupAnimationInfo;
 
 // @public
 export const ModalBase: FC<ModalBaseProps>;
 
+// @public (undocumented)
+export const modalBaseOverlayClass = "modal-base-overlay";
+
 // @public (undocumented)
 export interface ModalBaseProps extends PopupBaseProps {
     closeOnEsc?: boolean;
@@ -776,15 +778,13 @@ export interface ModalBaseProps extends PopupBaseProps {
 }
 
 // @public (undocumented)
-export interface ModalBaseRootProps extends PopupRootProps, Pick<ModalBaseProps, 'initialFocusRef' | 'focusAfterRef' | 'onClose'> {
-}
+export type ModalBaseRootProps = PopupRootProps & Pick<ModalBaseProps, 'initialFocusRef' | 'focusAfterRef' | 'onClose'>;
 
 // @public
 export const ModalOverlay: FC<ModalOverlayProps>;
 
 // @public (undocumented)
-export interface ModalOverlayProps extends Pick<PopupRootProps, 'id' | 'animationInfo' | 'zIndex'>, Pick<ModalBaseProps, 'withBlur' | 'closeOnOverlayClick' | 'onOverlayClick' | 'onClose'> {
-}
+export type ModalOverlayProps = Pick<PopupRootProps, 'id' | 'animationInfo' | 'zIndex'> & Pick<ModalBaseProps, 'withBlur' | 'closeOnOverlayClick' | 'onOverlayClick' | 'onClose'>;
 
 // @public (undocumented)
 export const monthLongName: (val: number) => string;
@@ -897,6 +897,9 @@ export const PopupBaseProvider: React_2.FC<{
 // @public
 export const PopupBaseRoot: React_2.ForwardRefExoticComponent<PopupRootProps & React_2.RefAttributes<HTMLDivElement>>;
 
+// @public (undocumented)
+export const popupBaseRootClass = "popup-base-root";
+
 // @public (undocumented)
 export interface PopupContextType {
     // (undocumented)
@@ -1361,15 +1364,14 @@ export const useForkRef: UseForkRefHook;
 export const useIsomorphicLayoutEffect: typeof useEffect;
 
 // @public (undocumented)
-export const useModal: ({ id, popupInfo, closeOnEsc, onEscKeyDown, onClose }: UseModalArgs) => {
+export const useModal: ({ id, popupInfo, onEscKeyDown, onClose, closeOnEsc }: UseModalArgs) => {
     modalInfo: ModalInfo;
 };
 
 // Warning: (ae-forgotten-export) The symbol "UsePopupArgs" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
-export interface UseModalArgs extends Pick<UsePopupArgs, 'id' | 'popupInfo'>, Pick<ModalBaseProps, 'closeOnEsc' | 'onEscKeyDown' | 'onClose'> {
-}
+export type UseModalArgs = Pick<UsePopupArgs, 'id' | 'popupInfo'> & Pick<ModalBaseProps, 'closeOnEsc' | 'onEscKeyDown' | 'onClose'>;
 
 // @public (undocumented)
 export const usePaginationDots: ({ items, index, visibleItems }: SmartPaginationDotsProps) => {

diff --git a/packages/plasma-core/src/components/ModalBase/ModalBaseContext.tsx b/packages/plasma-core/src/components/ModalBase/ModalBaseContext.tsx
@@ -10,22 +10,22 @@ export interface ModalInfo extends PopupInfo {
 /**
  * Взаимодействие с модальными оконами.
  */
-const getLastModal = (items: ModalInfo[]) => {
-    const modals = items.filter((item: ModalInfo) => item?.info?.isModal);
-    const lastModal = modals && (modals[modals.length - 1] as ModalInfo);
-    return lastModal;
-};
-
-const getFirstModal = (items: ModalInfo[]) => {
-    const modals = items.filter((item: ModalInfo) => item?.info?.isModal);
-    const firstModal = modals && (modals[0] as ModalInfo);
-    return firstModal;
+const getModals = (items: ModalInfo[]) => {
+    return items.filter((item: ModalInfo) => item?.info?.isModal);
 };
 
 export const getIdLastModal = (items: ModalInfo[]) => {
-    return getLastModal(items)?.id;
+    const modals = getModals(items);
+    if (!modals.length) {
+        return;
+    }
+    return modals[modals.length - 1].id;
 };
 
 export const getIdFirstModal = (items: ModalInfo[]) => {
-    return getFirstModal(items)?.id;
+    const modals = getModals(items);
+    if (!modals.length) {
+        return;
+    }
+    return modals[0].id;
 };
diff --git a/packages/plasma-core/src/components/ModalBase/ModalOverlay.tsx b/packages/plasma-core/src/components/ModalBase/ModalOverlay.tsx
@@ -7,6 +7,11 @@ import { usePopupBaseContext } from '../PopupBase';
 import { getIdFirstModal, getIdLastModal } from './ModalBaseContext';
 import { ModalOverlayProps } from './types';
 
+/*
+ * Класс компонента ModalBaseOverlay: `modal-base-overlay`
+ */
+export const modalBaseOverlayClass = 'modal-base-overlay';
+
 // TODO: новый отдельный оверлей #778
 export const Overlay = styled.div<{
     transparent?: boolean;
@@ -76,7 +81,7 @@ export const ModalOverlay: FC<ModalOverlayProps> = ({
 
     return (
         <Overlay
-            className="modal-base-overlay"
+            className={modalBaseOverlayClass}
             transparent={getIdLastModal(popupController.items) !== id}
             clickable={closeOnOverlayClick}
             endAnimation={getIdFirstModal(popupController.items) === id && animationInfo?.endAnimation}

diff --git a/packages/plasma-core/src/components/ModalBase/hooks.ts b/packages/plasma-core/src/components/ModalBase/hooks.ts
@@ -9,7 +9,7 @@ export { useModalAnimation };
 
 const ESCAPE_KEYCODE = 27;
 
-export const useModal = ({ id, popupInfo, closeOnEsc = true, onEscKeyDown, onClose }: UseModalArgs) => {
+export const useModal = ({ id, popupInfo, onEscKeyDown, onClose, closeOnEsc = true }: UseModalArgs) => {
     const popupController = usePopupBaseContext();
 
     // При ESC закрывает текущее окно, если это возможно

diff --git a/packages/plasma-core/src/components/ModalBase/index.ts b/packages/plasma-core/src/components/ModalBase/index.ts
@@ -1,5 +1,5 @@
 export { ModalBase } from './ModalBase';
 export { useModal, useModalAnimation } from './hooks';
-export { ModalOverlay } from './ModalOverlay';
+export { ModalOverlay, modalBaseOverlayClass } from './ModalOverlay';
 
 export type { ModalBaseProps, ModalAnimationInfo, ModalBaseRootProps, ModalOverlayProps, UseModalArgs } from './types';
diff --git a/packages/plasma-core/src/components/ModalBase/types.ts b/packages/plasma-core/src/components/ModalBase/types.ts
@@ -36,15 +36,12 @@ export interface ModalBaseProps extends PopupBaseProps {
      */
     onClose?: () => void;
 }
-export interface ModalAnimationInfo extends PopupAnimationInfo {}
-export interface ModalBaseRootProps
-    extends PopupRootProps,
-        Pick<ModalBaseProps, 'initialFocusRef' | 'focusAfterRef' | 'onClose'> {}
+export type ModalAnimationInfo = PopupAnimationInfo;
 
-export interface ModalOverlayProps
-    extends Pick<PopupRootProps, 'id' | 'animationInfo' | 'zIndex'>,
-        Pick<ModalBaseProps, 'withBlur' | 'closeOnOverlayClick' | 'onOverlayClick' | 'onClose'> {}
+export type ModalBaseRootProps = PopupRootProps & Pick<ModalBaseProps, 'initialFocusRef' | 'focusAfterRef' | 'onClose'>;
 
-export interface UseModalArgs
-    extends Pick<UsePopupArgs, 'id' | 'popupInfo'>,
-        Pick<ModalBaseProps, 'closeOnEsc' | 'onEscKeyDown' | 'onClose'> {}
+export type ModalOverlayProps = Pick<PopupRootProps, 'id' | 'animationInfo' | 'zIndex'> &
+    Pick<ModalBaseProps, 'withBlur' | 'closeOnOverlayClick' | 'onOverlayClick' | 'onClose'>;
+
+export type UseModalArgs = Pick<UsePopupArgs, 'id' | 'popupInfo'> &
+    Pick<ModalBaseProps, 'closeOnEsc' | 'onEscKeyDown' | 'onClose'>;
diff --git a/packages/plasma-core/src/components/PopupBase/PopupBase.tsx b/packages/plasma-core/src/components/PopupBase/PopupBase.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
+import styled from 'styled-components';
 
 import { useForkRef, useUniqId } from '../../hooks';
 
@@ -8,7 +9,7 @@ import { POPOVER_PORTAL_ID } from './PopupBaseContext';
 import { PopupBaseRoot } from './PopupBaseRoot';
 import { usePopup } from './hooks';
 
-export const DEFAULT_Z_INDEX = 9000;
+const StyledPortal = styled.div``;
 
 /**
  * Базовый копмонент PopupBase.
@@ -74,11 +75,10 @@ export const PopupBase = React.forwardRef<HTMLDivElement, PopupBaseProps>(
             <>
                 {portalRef.current &&
                     ReactDOM.createPortal(
-                        <div {...rest}>
+                        <StyledPortal {...rest}>
                             {overlay}
                             <PopupBaseRoot
                                 id={innerId}
-                                className="popup-base-root"
                                 ref={innerRef}
                                 placement={placement}
                                 frame={frame}
@@ -89,7 +89,7 @@ export const PopupBase = React.forwardRef<HTMLDivElement, PopupBaseProps>(
                             >
                                 {children}
                             </PopupBaseRoot>
-                        </div>,
+                        </StyledPortal>,
                         portalRef.current,
                     )}
             </>

diff --git a/packages/plasma-core/src/components/PopupBase/PopupBaseRoot.tsx b/packages/plasma-core/src/components/PopupBase/PopupBaseRoot.tsx
@@ -5,29 +5,22 @@ import { useForkRef } from '../../hooks';
 
 import { usePopupBaseContext } from './PopupBaseContext';
 import { handlePosition } from './utils';
-import { PopupBasePlacement, PopupInfo, PopupRootProps } from './types';
-
-interface VisibleProps {
-    endTransition?: boolean;
-    endAnimation?: boolean;
-    placement?: PopupBasePlacement;
-    offset?: [number | string, number | string];
-    frame?: 'document' | React.RefObject<HTMLElement>;
-    id?: string;
-    withAnimation?: boolean;
-    popupInfo?: PopupInfo;
-    zIndex?: string;
-}
+import { PopupRootContainerProps, PopupRootProps } from './types';
 
 export const DEFAULT_Z_INDEX = 9000;
 
+/*
+ * Класс корневого компонента PopupBaseRoot: `popup-base-root`
+ */
+export const popupBaseRootClass = 'popup-base-root';
+
 const PopupBaseView = styled.div`
     position: relative;
     max-width: 100%;
     pointer-events: all;
 `;
 
-const Container = styled.div<VisibleProps>`
+const PopupRootContainer = styled.div<PopupRootContainerProps>`
     ${({ frame }) => css`
         position: ${frame === 'document' ? 'fixed' : 'absolute'};
     `}
@@ -41,33 +34,17 @@ const Container = styled.div<VisibleProps>`
 
 /**
  * Корень PopupBase.
- * Управляет показом/скрытием и анимацией высплывающего окна.
+ * Управляет показом/скрытием и анимацией всплывающего окна.
  */
 export const PopupBaseRoot = React.forwardRef<HTMLDivElement, PopupRootProps>(
     ({ id, placement, offset, frame, setVisible, children, role, zIndex, animationInfo, ...rest }, ref) => {
-        // Внутренее состояние, необходимое для правильного отображения вложенных окон, а также для анимации
         const contentRef = useRef<HTMLDivElement | null>(null);
         const innerRef = useForkRef<HTMLDivElement>(contentRef, ref);
 
         const popupController = usePopupBaseContext();
 
         const handleAnimationEnd = useCallback(
-            (e: React.AnimationEvent<HTMLDivElement>) => {
-                if (!contentRef || e.target !== contentRef.current) {
-                    return;
-                }
-                e.stopPropagation();
-                if (animationInfo?.endAnimation) {
-                    popupController.unregister(id);
-                    setVisible(false);
-                    animationInfo.setEndAnimation(false);
-                }
-            },
-            [popupController.unregister, animationInfo, setVisible],
-        );
-
-        const handleTransitionEnd = useCallback(
-            (e: React.TransitionEvent<HTMLDivElement>) => {
+            (e: React.AnimationEvent<HTMLDivElement> | React.TransitionEvent<HTMLDivElement>) => {
                 if (!contentRef || e.target !== contentRef.current) {
                     return;
                 }
@@ -82,19 +59,19 @@ export const PopupBaseRoot = React.forwardRef<HTMLDivElement, PopupRootProps>(
         );
 
         return (
-            <Container
-                className="popup-base-root"
+            <PopupRootContainer
+                className={popupBaseRootClass}
                 ref={innerRef}
                 placement={placement}
                 frame={frame}
                 offset={offset}
                 zIndex={zIndex}
                 onAnimationEnd={handleAnimationEnd}
-                onTransitionEnd={handleTransitionEnd}
+                onTransitionEnd={handleAnimationEnd}
                 {...rest}
             >
                 <PopupBaseView role={role}>{children}</PopupBaseView>
-            </Container>
+            </PopupRootContainer>
         );
     },
 );
diff --git a/packages/plasma-core/src/components/PopupBase/index.ts b/packages/plasma-core/src/components/PopupBase/index.ts
@@ -1,7 +1,7 @@
 export { PopupBaseProvider, usePopupBaseContext } from './PopupBaseContext';
 export { PopupBase } from './PopupBase';
 export { usePopupAnimation, usePopup } from './hooks';
-export { PopupBaseRoot } from './PopupBaseRoot';
+export { PopupBaseRoot, popupBaseRootClass } from './PopupBaseRoot';
 
 export type {
     PopupBasePlacement,