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

salute-developers · Oct 27, 2023 · 644f194 · 644f194
1 parent 110d90e
commit 644f194
Show file tree

Hide file tree

Showing 28 changed files with 88 additions and 100 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';
@@ -688,8 +687,6 @@ export { PopupBaseProps }
 
 export { PopupBaseProvider }
 
-export { PopupBaseRoot }
-
 export { popupBaseRootClass }
 
 export { PopupContextType }

diff --git a/packages/plasma-b2c/src/components/PopupBase/index.ts b/packages/plasma-b2c/src/components/PopupBase/index.ts
@@ -1,7 +1,6 @@
 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 type {

diff --git a/packages/plasma-core/api/plasma-core.api.md b/packages/plasma-core/api/plasma-core.api.md
@@ -23,6 +23,7 @@ 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';
@@ -879,7 +880,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 +893,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 +913,7 @@ export interface PopupInfo {
     // (undocumented)
     id: string;
     // (undocumented)
-    info?: Object;
+    info?: Record<string, any>;
 }
 
 // @public (undocumented)

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/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,7 +1,6 @@
 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 {

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';
@@ -1026,8 +1025,6 @@ export { PopupBaseProps }
 
 export { PopupBaseProvider }
 
-export { PopupBaseRoot }
-
 export { popupBaseRootClass }
 
 export { PopupContextType }

diff --git a/packages/plasma-hope/src/components/PopupBase/index.ts b/packages/plasma-hope/src/components/PopupBase/index.ts
@@ -1,7 +1,6 @@
 export { PopupBaseProvider, usePopupBaseContext } from '@salutejs/plasma-core';
 export { PopupBase } from '@salutejs/plasma-core';
 export { usePopup } from '@salutejs/plasma-core';
-export { PopupBaseRoot } from '@salutejs/plasma-core';
 export { popupBaseRootClass, endAnimationClass, endTransitionClass } from '@salutejs/plasma-core';
 
 export type {

diff --git a/packages/plasma-new-hope/src/components/Popup/Popup.styles.ts b/packages/plasma-new-hope/src/components/Popup/Popup.styles.ts
@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 
-import { PopupRootContainerProps } from './Popup.types';
-import { DEFAULT_Z_INDEX } from './Popup.utils';
+import type { PopupRootContainerProps } from './Popup.types';
+import { DEFAULT_Z_INDEX } from './utils';
 
 export const StyledPortal = styled.div``;
 
@@ -12,11 +12,11 @@ export const PopupView = styled.div`
 `;
 
 export const PopupRootContainer = styled.div<PopupRootContainerProps>`
-    position: ${(props) => (props?.frame === 'document' ? 'fixed' : 'absolute')};
-    z-index: ${(props) => props?.zIndex || DEFAULT_Z_INDEX};
-    left: ${(props) => props?.position.left || ''};
-    right: ${(props) => props?.position.right || ''};
-    top: ${(props) => props?.position.top || ''};
-    bottom: ${(props) => props?.position.bottom || ''};
-    transform: ${(props) => props?.position.transform || ''};
+    position: ${({ frame }) => (frame === 'document' ? 'fixed' : 'absolute')};
+    z-index: ${({ zIndex }) => zIndex || DEFAULT_Z_INDEX};
+    left: ${({ position }) => position.left || ''};
+    right: ${({ position }) => position.right || ''};
+    top: ${({ position }) => position.top || ''};
+    bottom: ${({ position }) => position.bottom || ''};
+    transform: ${({ position }) => position.transform || ''};
 `;
diff --git a/...-hope/src/components/Popup/Popup.utils.ts → ...hope/src/components/Popup/Popup.tokens.ts b/...-hope/src/components/Popup/Popup.utils.ts → ...hope/src/components/Popup/Popup.tokens.ts
@@ -4,5 +4,3 @@
 export const popupRootClass = 'popup-base-root';
 export const endAnimationClass = 'popup-end-animation';
 export const endTransitionClass = 'popup-end-transition';
-
-export const DEFAULT_Z_INDEX = 9000;
diff --git a/packages/plasma-new-hope/src/components/Popup/Popup.tsx b/packages/plasma-new-hope/src/components/Popup/Popup.tsx
@@ -1,22 +1,23 @@
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { useForkRef, useUniqId } from '@salutejs/plasma-core';
-import { cx } from '@linaria/core';
 
 import { RootProps } from '../../engines/types';
+import { cx } from '../../utils';
 
-import { BasicPopupPlacement, PopupPlacement, PopupPositionType, PopupProps } from './Popup.types';
+import type { PopupPlacementBasic, PopupPlacement, PopupPositionType, PopupProps } from './Popup.types';
 import { POPUP_PORTAL_ID } from './PopupContext';
 import { PopupRoot } from './PopupRoot';
-import { usePopup } from './Popup.hooks';
-import { endAnimationClass, endTransitionClass } from './Popup.utils';
+import { usePopup } from './hooks';
+import { endAnimationClass, endTransitionClass } from './Popup.tokens';
 
 export const handlePosition = (
     placement: PopupPlacement,
     offset: [number, number] | [string, string],
 ): PopupPositionType => {
     let x = '0rem';
     let y = '0rem';
+
     if (offset) {
         const [_x, _y] = offset;
         x = typeof _x === 'number' ? `${_x}rem` : _x;
@@ -36,9 +37,9 @@ export const handlePosition = (
     let top;
     let bottom;
     let transform;
-    const placements = placement.split('-') as BasicPopupPlacement[];
+    const placements = placement.split('-') as PopupPlacementBasic[];
 
-    placements.forEach((placement: BasicPopupPlacement) => {
+    placements.forEach((placement: PopupPlacementBasic) => {
         switch (placement) {
             case 'left':
                 left = x;
@@ -127,6 +128,7 @@ export const popupRoot = (Root: RootProps<HTMLDivElement, PopupProps>) =>
                 if (!portal) {
                     portal = document.createElement('div');
                     portal.setAttribute('id', POPUP_PORTAL_ID);
+
                     if (typeof frame === 'string' && frame !== 'document') {
                         document.getElementById(frame)?.appendChild(portal);
                     } else {
@@ -149,8 +151,8 @@ export const popupRoot = (Root: RootProps<HTMLDivElement, PopupProps>) =>
 
             const cls = cx(
                 className,
-                animationInfo?.endAnimation && endAnimationClass,
-                animationInfo?.endTransition && endTransitionClass,
+                animationInfo?.endAnimation ? endAnimationClass : '',
+                animationInfo?.endTransition ? endTransitionClass : '',
             );
 
             return (

diff --git a/packages/plasma-new-hope/src/components/Popup/Popup.types.ts b/packages/plasma-new-hope/src/components/Popup/Popup.types.ts
@@ -1,10 +1,10 @@
-export type BasicPopupPlacement = 'center' | 'top' | 'bottom' | 'right' | 'left';
-export type MixedPopupPlacement = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
-export type PopupPlacement = BasicPopupPlacement | MixedPopupPlacement;
+export type PopupPlacementBasic = 'center' | 'top' | 'bottom' | 'right' | 'left';
+export type PopupPlacementMixed = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+export type PopupPlacement = PopupPlacementBasic | PopupPlacementMixed;
 
 export interface PopupInfo {
     id: string;
-    info?: Object;
+    info?: Record<string, any>;
 }
 
 export interface PopupContextType {
@@ -29,7 +29,7 @@ export interface PopupProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     offset?: [number, number] | [string, string];
     /**
-     * В каком контейнере позиционируется(по умолчанию document).
+     * В каком контейнере позиционируется(по умолчанию document), можно также указать id элемента или ref для него.
      */
     frame?: 'document' | string | React.RefObject<HTMLElement>;
     /**