fix(plasma-new-hope, plasma-core): fix types and refactoring

salute-developers · Oct 30, 2023 · 862f06d · 862f06d
1 parent 110d90e
commit 862f06d
Show file tree

Hide file tree

Showing 35 changed files with 128 additions and 194 deletions.
diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md
@@ -185,7 +185,6 @@ 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 { PopupBaseRoot } from '@salutejs/plasma-hope';
 import { popupBaseRootClass } from '@salutejs/plasma-hope';
 import { PopupContextType } from '@salutejs/plasma-hope';
 import { PopupInfo } from '@salutejs/plasma-hope';
@@ -276,8 +275,6 @@ import { useDebouncedFunction } from '@salutejs/plasma-core';
 import { useFocusTrap } from '@salutejs/plasma-hope';
 import { useForkRef } from '@salutejs/plasma-core';
 import { useIsomorphicLayoutEffect } from '@salutejs/plasma-core';
-import { useModal } from '@salutejs/plasma-hope';
-import { usePopup } from '@salutejs/plasma-hope';
 import { usePopupBaseContext } from '@salutejs/plasma-hope';
 import { useToast } from '@salutejs/plasma-hope';
 import { ValidationResult } from '@salutejs/plasma-hope';
@@ -688,8 +685,6 @@ export { PopupBaseProps }
 
 export { PopupBaseProvider }
 
-export { PopupBaseRoot }
-
 export { popupBaseRootClass }
 
 export { PopupContextType }
@@ -912,10 +907,6 @@ export { useForkRef }
 
 export { useIsomorphicLayoutEffect }
 
-export { useModal }
-
-export { usePopup }
-
 export { usePopupBaseContext }
 
 export { useToast }

diff --git a/packages/plasma-b2c/src/components/ModalBase/index.ts b/packages/plasma-b2c/src/components/ModalBase/index.ts
@@ -1,5 +1,2 @@
-export { ModalBase } from '@salutejs/plasma-hope';
-export { useModal } from '@salutejs/plasma-hope';
-export { ModalOverlay, modalBaseOverlayClass } from '@salutejs/plasma-hope';
-
+export { ModalBase, ModalOverlay, modalBaseOverlayClass } from '@salutejs/plasma-hope';
 export type { ModalBaseProps, ModalBaseRootProps, ModalOverlayProps } from '@salutejs/plasma-hope';
diff --git a/packages/plasma-b2c/src/components/PopupBase/index.ts b/packages/plasma-b2c/src/components/PopupBase/index.ts
@@ -1,8 +1,11 @@
-export { PopupBaseProvider, usePopupBaseContext } from '@salutejs/plasma-hope';
-export { PopupBase } from '@salutejs/plasma-hope';
-export { usePopup } from '@salutejs/plasma-hope';
-export { PopupBaseRoot } from '@salutejs/plasma-hope';
-export { popupBaseRootClass, endAnimationClass, endTransitionClass } from '@salutejs/plasma-hope';
+export {
+    PopupBaseProvider,
+    usePopupBaseContext,
+    PopupBase,
+    popupBaseRootClass,
+    endAnimationClass,
+    endTransitionClass,
+} from '@salutejs/plasma-hope';
 
 export type {
     PopupBasePlacement,

diff --git a/packages/plasma-core/api/plasma-core.api.md b/packages/plasma-core/api/plasma-core.api.md
@@ -14,7 +14,6 @@ import { Context } from 'react';
 import { CSSObject } from 'styled-components';
 import { CSSProperties } from 'react';
 import { DefaultTheme } from 'styled-components';
-import { Dispatch } from 'react';
 import { DraggableData } from 'react-draggable';
 import { FC } from 'react';
 import { FlattenInterpolation } from 'styled-components';
@@ -23,10 +22,10 @@ import { FunctionComponent } from 'react';
 import { HTMLAttributes } from 'react';
 import { InterpolationFunction } from 'styled-components';
 import { MutableRefObject } from 'react';
+import { PropsWithChildren } from 'react';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
 import { RefObject } from 'react';
-import { SetStateAction } from 'react';
 import { spacing } from '@salutejs/plasma-typo';
 import { SpacingProps } from '@salutejs/plasma-typo';
 import { SpacingProps as SpacingProps_2 } from '@salutejs/plasma-typo/lib/cjs/mixins/applySpacing';
@@ -855,18 +854,6 @@ export interface PinProps {
 // @public @deprecated
 export const Popup: React_2.NamedExoticComponent<PopupProps & React_2.RefAttributes<HTMLDivElement>>;
 
-// @public (undocumented)
-export interface PopupAnimationInfo {
-    // (undocumented)
-    endAnimation: boolean;
-    // (undocumented)
-    endTransition: boolean;
-    // (undocumented)
-    setEndAnimation: React.Dispatch<React.SetStateAction<boolean>>;
-    // (undocumented)
-    setEndTransition: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
 // @public
 export const PopupBase: React_2.ForwardRefExoticComponent<PopupBaseProps & React_2.RefAttributes<HTMLDivElement>>;
 
@@ -879,7 +866,7 @@ export type PopupBasePlacement = BasicPopupBasePlacement | MixedPopupBasePlaceme
 // @public (undocumented)
 export interface PopupBaseProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
-    frame?: 'document' | React.RefObject<HTMLElement>;
+    frame?: 'document' | string | React.RefObject<HTMLElement>;
     isOpen: boolean;
     // (undocumented)
     offset?: [number, number] | [string, string];
@@ -892,12 +879,7 @@ export interface PopupBaseProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 // @public (undocumented)
-export const PopupBaseProvider: React_2.FC<{
-    children: ReactNode;
-}>;
-
-// @public
-export const PopupBaseRoot: React_2.ForwardRefExoticComponent<PopupRootProps & React_2.RefAttributes<HTMLDivElement>>;
+export const PopupBaseProvider: FC<PropsWithChildren>;
 
 // @public (undocumented)
 export const popupBaseRootClass = "popup-base-root";
@@ -917,7 +899,7 @@ export interface PopupInfo {
     // (undocumented)
     id: string;
     // (undocumented)
-    info?: Object;
+    info?: Record<string, any>;
 }
 
 // @public (undocumented)
@@ -934,6 +916,7 @@ export interface PopupProps extends HTMLAttributes<HTMLDivElement> {
 
 // @public (undocumented)
 export interface PopupRootProps extends Omit<PopupBaseProps, 'isOpen' | 'overlay'> {
+    // Warning: (ae-forgotten-export) The symbol "PopupAnimationInfo" needs to be exported by the entry point index.d.ts
     animationInfo: PopupAnimationInfo;
     // (undocumented)
     id: string;
@@ -1366,13 +1349,6 @@ export const useForkRef: UseForkRefHook;
 // @public
 export const useIsomorphicLayoutEffect: typeof useEffect;
 
-// Warning: (ae-forgotten-export) The symbol "ModalHookArgs" needs to be exported by the entry point index.d.ts
-//
-// @public (undocumented)
-export const useModal: ({ id, popupInfo, onEscKeyDown, onClose, closeOnEsc }: ModalHookArgs) => {
-    modalInfo: ModalInfo;
-};
-
 // @public (undocumented)
 export const usePaginationDots: ({ items, index, visibleItems }: SmartPaginationDotsProps) => {
     sliced: {
@@ -1381,15 +1357,6 @@ export const usePaginationDots: ({ items, index, visibleItems }: SmartPagination
     activeId: string | number;
 };
 
-// Warning: (ae-forgotten-export) The symbol "PopupHookArgs" needs to be exported by the entry point index.d.ts
-//
-// @public (undocumented)
-export const usePopup: ({ isOpen, id, popupInfo, withAnimation }: PopupHookArgs) => {
-    isVisible: boolean;
-    setVisible: Dispatch<SetStateAction<boolean>>;
-    animationInfo: PopupAnimationInfo;
-};
-
 // @public (undocumented)
 export const usePopupBaseContext: () => PopupContextType;
 
@@ -1494,7 +1461,6 @@ export interface WithSkeletonProps {
 
 // Warnings were encountered during analysis:
 //
-// components/ModalBase/hooks.d.ts:4:5 - (ae-forgotten-export) The symbol "ModalInfo" needs to be exported by the entry point index.d.ts
 // components/Toast/Toast.d.ts:4:5 - (ae-forgotten-export) The symbol "ToastRole" needs to be exported by the entry point index.d.ts
 // components/Toast/useToast.d.ts:2:5 - (ae-forgotten-export) The symbol "ShowToast" needs to be exported by the entry point index.d.ts
 

diff --git a/packages/plasma-core/src/components/ModalBase/index.ts b/packages/plasma-core/src/components/ModalBase/index.ts
@@ -1,5 +1,4 @@
 export { ModalBase } from './ModalBase';
-export { useModal } from './hooks';
 export { ModalOverlay, modalBaseOverlayClass } from './ModalOverlay';
 
 export type { ModalBaseProps, ModalBaseRootProps, ModalOverlayProps } from './types';
diff --git a/packages/plasma-core/src/components/PopupBase/PopupBase.tsx b/packages/plasma-core/src/components/PopupBase/PopupBase.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, forwardRef } from 'react';
 import ReactDOM from 'react-dom';
 import styled from 'styled-components';
 
@@ -15,13 +15,13 @@ const StyledPortal = styled.div``;
 export const getClassName = (animationInfo: PopupAnimationInfo, className?: string) => {
     const endAnimation = animationInfo?.endAnimation ? endAnimationClass : '';
     const endTransition = animationInfo?.endTransition ? endTransitionClass : '';
-    return [className, endAnimation, endTransition].filter((item) => !!item).join(' ');
+    return [className, endAnimation, endTransition].filter(Boolean).join(' ');
 };
 
 /**
  * Базовый копмонент PopupBase.
  */
-export const PopupBase = React.forwardRef<HTMLDivElement, PopupBaseProps>(
+export const PopupBase = forwardRef<HTMLDivElement, PopupBaseProps>(
     (
         {
             id,
@@ -55,20 +55,25 @@ export const PopupBase = React.forwardRef<HTMLDivElement, PopupBaseProps>(
         useEffect(() => {
             let portal = document.getElementById(POPOVER_PORTAL_ID);
 
-            if (frame !== 'document' && frame && frame.current) {
+            if (typeof frame !== 'string' && frame && frame.current) {
                 portal = frame.current;
             }
 
             if (!portal) {
                 portal = document.createElement('div');
                 portal.setAttribute('id', POPOVER_PORTAL_ID);
-                document.body.appendChild(portal);
+
+                if (typeof frame === 'string' && frame !== 'document') {
+                    document.getElementById(frame)?.appendChild(portal);
+                } else {
+                    document.body.appendChild(portal);
+                }
             }
 
             portalRef.current = portal;
 
             /**
-             * Изменение стейта нужно для того, чтобы PopupBase
+             * Изменение стейта нужно для того, чтобы Popup
              * отобразился после записи DOM элемента в portalRef.current
              */
             forceRender(true);

diff --git a/packages/plasma-core/src/components/PopupBase/PopupBaseContext.tsx b/packages/plasma-core/src/components/PopupBase/PopupBaseContext.tsx
@@ -1,12 +1,12 @@
-import React, { ReactNode, useEffect } from 'react';
+import React, { useEffect, useState, createContext, useContext, FC, PropsWithChildren } from 'react';
 
 import { PopupContextType, PopupInfo } from './types';
 
 export const POPOVER_PORTAL_ID = 'plasma-popup-root';
 
 const items: PopupInfo[] = [];
 
-const PopupBaseContext = React.createContext<PopupContextType>({
+const PopupBaseContext = createContext<PopupContextType>({
     items,
     register(_info: PopupInfo): void {
         throw new Error('Function not implemented. Add PopupBaseProvider');
@@ -16,15 +16,13 @@ const PopupBaseContext = React.createContext<PopupContextType>({
     },
 });
 
-export const usePopupBaseContext = () => React.useContext(PopupBaseContext);
+export const usePopupBaseContext = () => useContext(PopupBaseContext);
 
-export const PopupBaseProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
-    const [items, setItems] = React.useState<PopupInfo[]>([]);
+export const PopupBaseProvider: FC<PropsWithChildren> = ({ children }) => {
+    const [items, setItems] = useState<PopupInfo[]>([]);
 
     const register = (info: PopupInfo) => {
-        const updatedItems = [...items];
-        updatedItems.push(info);
-        setItems(updatedItems);
+        setItems([...items, info]);
     };
 
     const unregister = (id: string) => {

diff --git a/packages/plasma-core/src/components/PopupBase/PopupBaseRoot.tsx b/packages/plasma-core/src/components/PopupBase/PopupBaseRoot.tsx
@@ -50,7 +50,7 @@ export const PopupBaseRoot = React.forwardRef<HTMLDivElement, PopupRootProps>(
                     animationInfo.setEndAnimation(false);
                 }
             },
-            [popupController.unregister, animationInfo, setVisible],
+            [popupController.unregister, animationInfo?.endAnimation, setVisible],
         );
 
         return (

diff --git a/packages/plasma-core/src/components/PopupBase/hooks.ts b/packages/plasma-core/src/components/PopupBase/hooks.ts
@@ -19,18 +19,18 @@ export const usePopup = ({ isOpen, id, popupInfo, withAnimation }: PopupHookArgs
 
     // для использования transition в качестве анимации
     useEffect(() => {
-        if (withAnimation) {
-            animationInfo?.setEndTransition(animationInfo && (!isVisible || animationInfo?.endAnimation));
+        if (withAnimation && animationInfo) {
+            animationInfo.setEndTransition(!isVisible || animationInfo?.endAnimation);
         }
-    }, [animationInfo?.endAnimation, isVisible]);
+    }, [animationInfo, withAnimation, isVisible]);
 
     // сначала добавление/удаление из контекста, и только после этого отображение/скрытие
     useEffect(() => {
         // при первом открытии
         if (isOpen && !isVisible) {
             popupController.register({ id, ...popupInfo });
             setVisible(true);
-            animationInfo?.setEndAnimation(false);
+            animationInfo.setEndAnimation(false);
             return;
         }
 
@@ -40,14 +40,14 @@ export const usePopup = ({ isOpen, id, popupInfo, withAnimation }: PopupHookArgs
 
         // если есть анимация - закрытие по окончании анимации
         if (withAnimation) {
-            animationInfo?.setEndAnimation(true);
+            animationInfo.setEndAnimation(true);
             return;
         }
 
         // иначе обычное закрытие
         popupController.unregister(id);
         setVisible(false);
-    }, [isOpen, isVisible, animationInfo]);
+    }, [isOpen, isVisible, animationInfo, withAnimation]);
 
     return { isVisible, setVisible, animationInfo };
 };
diff --git a/packages/plasma-core/src/components/PopupBase/index.ts b/packages/plasma-core/src/components/PopupBase/index.ts
@@ -1,14 +1,5 @@
 export { PopupBaseProvider, usePopupBaseContext } from './PopupBaseContext';
 export { PopupBase } from './PopupBase';
-export { usePopup } from './hooks';
-export { PopupBaseRoot } from './PopupBaseRoot';
 export { popupBaseRootClass, endAnimationClass, endTransitionClass } from './utils';
 
-export type {
-    PopupBasePlacement,
-    PopupInfo,
-    PopupContextType,
-    PopupBaseProps,
-    PopupAnimationInfo,
-    PopupRootProps,
-} from './types';
+export type { PopupBasePlacement, PopupInfo, PopupContextType, PopupBaseProps, PopupRootProps } from './types';
diff --git a/packages/plasma-core/src/components/PopupBase/types.ts b/packages/plasma-core/src/components/PopupBase/types.ts
@@ -4,7 +4,7 @@ export type PopupBasePlacement = BasicPopupBasePlacement | MixedPopupBasePlaceme
 
 export interface PopupInfo {
     id: string;
-    info?: Object;
+    info?: Record<string, any>;
 }
 
 export interface PopupContextType {
@@ -29,9 +29,9 @@ export interface PopupBaseProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     offset?: [number, number] | [string, string];
     /**
-     * В каком контейнере позиционируется(по умолчанию document).
+     * В каком контейнере позиционируется(по умолчанию document), можно также указать id элемента или ref для него.
      */
-    frame?: 'document' | React.RefObject<HTMLElement>;
+    frame?: 'document' | string | React.RefObject<HTMLElement>;
     /**
      * Содержимое PopupBase.
      */

diff --git a/packages/plasma-hope/api/plasma-hope.api.md b/packages/plasma-hope/api/plasma-hope.api.md
@@ -122,7 +122,6 @@ import { PopupBase } from '@salutejs/plasma-core';
 import { PopupBasePlacement } from '@salutejs/plasma-core';
 import { PopupBaseProps } from '@salutejs/plasma-core';
 import { PopupBaseProvider } from '@salutejs/plasma-core';
-import { PopupBaseRoot } from '@salutejs/plasma-core';
 import { popupBaseRootClass } from '@salutejs/plasma-core';
 import { PopupContextType } from '@salutejs/plasma-core';
 import { PopupInfo } from '@salutejs/plasma-core';
@@ -182,8 +181,6 @@ import { useDebouncedFunction } from '@salutejs/plasma-core';
 import { useFocusTrap } from '@salutejs/plasma-core';
 import { useForkRef } from '@salutejs/plasma-core';
 import { useIsomorphicLayoutEffect } from '@salutejs/plasma-core';
-import { useModal } from '@salutejs/plasma-core';
-import { usePopup } from '@salutejs/plasma-core';
 import { usePopupBaseContext } from '@salutejs/plasma-core';
 import { useResizeObserver } from '@salutejs/plasma-core';
 import { useToast } from '@salutejs/plasma-core';
@@ -1026,8 +1023,6 @@ export { PopupBaseProps }
 
 export { PopupBaseProvider }
 
-export { PopupBaseRoot }
-
 export { popupBaseRootClass }
 
 export { PopupContextType }
@@ -1375,10 +1370,6 @@ export { useForkRef }
 
 export { useIsomorphicLayoutEffect }
 
-export { useModal }
-
-export { usePopup }
-
 export { usePopupBaseContext }
 
 export { useResizeObserver }

diff --git a/packages/plasma-hope/src/components/ModalBase/index.ts b/packages/plasma-hope/src/components/ModalBase/index.ts
@@ -1,5 +1,2 @@
-export { ModalBase } from '@salutejs/plasma-core';
-export { useModal } from '@salutejs/plasma-core';
-export { ModalOverlay, modalBaseOverlayClass } from '@salutejs/plasma-core';
-
+export { ModalBase, ModalOverlay, modalBaseOverlayClass } from '@salutejs/plasma-core';
 export type { ModalBaseProps, ModalBaseRootProps, ModalOverlayProps } from '@salutejs/plasma-core';