From 644f194090712618b8c4182b4e2e2008f907179e Mon Sep 17 00:00:00 2001 From: Ivan Kudryavtsev Date: Fri, 27 Oct 2023 14:07:31 +0300 Subject: [PATCH] fix(plasma-new-hope, plasma-core): fix types and refactoring --- packages/plasma-b2c/api/plasma-b2c.api.md | 3 --- .../src/components/PopupBase/index.ts | 1 - packages/plasma-core/api/plasma-core.api.md | 12 ++++-------- .../src/components/PopupBase/PopupBase.tsx | 17 +++++++++++------ .../components/PopupBase/PopupBaseContext.tsx | 14 ++++++-------- .../src/components/PopupBase/hooks.ts | 12 ++++++------ .../src/components/PopupBase/index.ts | 1 - .../src/components/PopupBase/types.ts | 6 +++--- packages/plasma-hope/api/plasma-hope.api.md | 3 --- .../src/components/PopupBase/index.ts | 1 - .../src/components/Popup/Popup.styles.ts | 18 +++++++++--------- .../Popup/{Popup.utils.ts => Popup.tokens.ts} | 2 -- .../src/components/Popup/Popup.tsx | 18 ++++++++++-------- .../src/components/Popup/Popup.types.ts | 10 +++++----- .../src/components/Popup/PopupContext.tsx | 18 +++++++++--------- .../src/components/Popup/PopupRoot.tsx | 10 +++++----- .../src/components/Popup/hooks/index.ts | 1 + .../{Popup.hooks.ts => hooks/usePopup.ts} | 18 +++++++++--------- .../src/components/Popup/index.ts | 5 ++--- .../src/components/Popup/utils/index.ts | 1 + ...PopupBase.stories.tsx => Popup.stories.tsx} | 0 ...PopupBase.stories.tsx => Popup.stories.tsx} | 0 ...PopupBase.stories.tsx => Popup.stories.tsx} | 0 packages/plasma-new-hope/src/utils/index.ts | 1 + packages/plasma-web/api/plasma-web.api.md | 3 --- .../src/components/PopupBase/index.ts | 1 - .../docs/components/PopupBase.mdx | 6 +++--- .../docs/components/PopupBase.mdx | 6 +++--- 28 files changed, 88 insertions(+), 100 deletions(-) rename packages/plasma-new-hope/src/components/Popup/{Popup.utils.ts => Popup.tokens.ts} (86%) create mode 100644 packages/plasma-new-hope/src/components/Popup/hooks/index.ts rename packages/plasma-new-hope/src/components/Popup/{Popup.hooks.ts => hooks/usePopup.ts} (76%) create mode 100644 packages/plasma-new-hope/src/components/Popup/utils/index.ts rename packages/plasma-new-hope/src/examples/plasma_b2c/components/Popup/{PopupBase.stories.tsx => Popup.stories.tsx} (100%) rename packages/plasma-new-hope/src/examples/plasma_web/components/Popup/{PopupBase.stories.tsx => Popup.stories.tsx} (100%) rename packages/plasma-new-hope/src/examples/sds_engineer/components/Popup/{PopupBase.stories.tsx => Popup.stories.tsx} (100%) create mode 100644 packages/plasma-new-hope/src/utils/index.ts diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md index 69e3f395e6..4dc686e681 100644 --- 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 index bb0803d77f..00edfb0773 100644 --- 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 index d29c067bed..8955ee3787 100644 --- 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 { children?: React.ReactNode; - frame?: 'document' | React.RefObject; + frame?: 'document' | string | React.RefObject; isOpen: boolean; // (undocumented) offset?: [number, number] | [string, string]; @@ -892,12 +893,7 @@ export interface PopupBaseProps extends React.HTMLAttributes { } // @public (undocumented) -export const PopupBaseProvider: React_2.FC<{ - children: ReactNode; -}>; - -// @public -export const PopupBaseRoot: React_2.ForwardRefExoticComponent>; +export const PopupBaseProvider: FC; // @public (undocumented) export const popupBaseRootClass = "popup-base-root"; @@ -917,7 +913,7 @@ export interface PopupInfo { // (undocumented) id: string; // (undocumented) - info?: Object; + info?: Record; } // @public (undocumented) diff --git a/packages/plasma-core/src/components/PopupBase/PopupBase.tsx b/packages/plasma-core/src/components/PopupBase/PopupBase.tsx index 16c471c24d..1daee57a66 100644 --- 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( +export const PopupBase = forwardRef( ( { id, @@ -55,20 +55,25 @@ export const PopupBase = React.forwardRef( 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 index f8cc5fcdbf..8002845360 100644 --- a/packages/plasma-core/src/components/PopupBase/PopupBaseContext.tsx +++ b/packages/plasma-core/src/components/PopupBase/PopupBaseContext.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode, useEffect } from 'react'; +import React, { useEffect, useState, createContext, useContext, FC, PropsWithChildren } from 'react'; import { PopupContextType, PopupInfo } from './types'; @@ -6,7 +6,7 @@ export const POPOVER_PORTAL_ID = 'plasma-popup-root'; const items: PopupInfo[] = []; -const PopupBaseContext = React.createContext({ +const PopupBaseContext = createContext({ items, register(_info: PopupInfo): void { throw new Error('Function not implemented. Add PopupBaseProvider'); @@ -16,15 +16,13 @@ const PopupBaseContext = React.createContext({ }, }); -export const usePopupBaseContext = () => React.useContext(PopupBaseContext); +export const usePopupBaseContext = () => useContext(PopupBaseContext); -export const PopupBaseProvider: React.FC<{ children: ReactNode }> = ({ children }) => { - const [items, setItems] = React.useState([]); +export const PopupBaseProvider: FC = ({ children }) => { + const [items, setItems] = useState([]); 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 index 601d2bc049..eda0478b01 100644 --- a/packages/plasma-core/src/components/PopupBase/hooks.ts +++ b/packages/plasma-core/src/components/PopupBase/hooks.ts @@ -19,10 +19,10 @@ 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(() => { @@ -30,7 +30,7 @@ export const usePopup = ({ isOpen, id, popupInfo, withAnimation }: PopupHookArgs 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 index 5bf8c0512c..8d66915e85 100644 --- 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 index 51fb1fb780..2fd4131d98 100644 --- 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; } export interface PopupContextType { @@ -29,9 +29,9 @@ export interface PopupBaseProps extends React.HTMLAttributes { */ offset?: [number, number] | [string, string]; /** - * В каком контейнере позиционируется(по умолчанию document). + * В каком контейнере позиционируется(по умолчанию document), можно также указать id элемента или ref для него. */ - frame?: 'document' | React.RefObject; + frame?: 'document' | string | React.RefObject; /** * Содержимое PopupBase. */ diff --git a/packages/plasma-hope/api/plasma-hope.api.md b/packages/plasma-hope/api/plasma-hope.api.md index ba682bab94..bd4925aaf9 100644 --- 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 index b1debad02b..ccf6451892 100644 --- 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 index 836ddde759..260c96d79c 100644 --- 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` - 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/packages/plasma-new-hope/src/components/Popup/Popup.utils.ts b/packages/plasma-new-hope/src/components/Popup/Popup.tokens.ts similarity index 86% rename from packages/plasma-new-hope/src/components/Popup/Popup.utils.ts rename to packages/plasma-new-hope/src/components/Popup/Popup.tokens.ts index a190b4d015..eeaef54e35 100644 --- a/packages/plasma-new-hope/src/components/Popup/Popup.utils.ts +++ b/packages/plasma-new-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 index a3cea07662..0b8cb4d6c8 100644 --- a/packages/plasma-new-hope/src/components/Popup/Popup.tsx +++ b/packages/plasma-new-hope/src/components/Popup/Popup.tsx @@ -1,15 +1,15 @@ 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, @@ -17,6 +17,7 @@ export const handlePosition = ( ): 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) => 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) => 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 index 7c1e9d57ff..08436d8959 100644 --- 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; } export interface PopupContextType { @@ -29,7 +29,7 @@ export interface PopupProps extends React.HTMLAttributes { */ offset?: [number, number] | [string, string]; /** - * В каком контейнере позиционируется(по умолчанию document). + * В каком контейнере позиционируется(по умолчанию document), можно также указать id элемента или ref для него. */ frame?: 'document' | string | React.RefObject; /** diff --git a/packages/plasma-new-hope/src/components/Popup/PopupContext.tsx b/packages/plasma-new-hope/src/components/Popup/PopupContext.tsx index 6c17464c49..23c86e5554 100644 --- a/packages/plasma-new-hope/src/components/Popup/PopupContext.tsx +++ b/packages/plasma-new-hope/src/components/Popup/PopupContext.tsx @@ -1,12 +1,12 @@ -import React, { ReactNode, useEffect } from 'react'; +import React, { createContext, useEffect, useState, useContext, FC, PropsWithChildren } from 'react'; -import { PopupContextType, PopupInfo } from './Popup.types'; +import type { PopupContextType, PopupInfo } from './Popup.types'; export const POPUP_PORTAL_ID = 'plasma-popup-root'; const items: PopupInfo[] = []; -const PopupContext = React.createContext({ +const PopupContext = createContext({ items, register(_info: PopupInfo): void { throw new Error('Function not implemented. Add PopupProvider'); @@ -16,22 +16,22 @@ const PopupContext = React.createContext({ }, }); -export const usePopupContext = () => React.useContext(PopupContext); +export const usePopupContext = () => useContext(PopupContext); -export const PopupProvider: React.FC<{ children: ReactNode }> = ({ children }) => { - const [items, setItems] = React.useState([]); +export const PopupProvider: FC = ({ children }) => { + const [items, setItems] = useState([]); const register = (info: PopupInfo) => { - const updatedItems = [...items]; - updatedItems.push(info); - setItems(updatedItems); + setItems([...items, info]); }; const unregister = (id: string) => { const index = items.findIndex((item: PopupInfo) => id === item.id); + if (index === -1) { return; } + items.splice(index, 1); setItems([...items]); }; diff --git a/packages/plasma-new-hope/src/components/Popup/PopupRoot.tsx b/packages/plasma-new-hope/src/components/Popup/PopupRoot.tsx index 5c7ca635c8..061394d770 100644 --- a/packages/plasma-new-hope/src/components/Popup/PopupRoot.tsx +++ b/packages/plasma-new-hope/src/components/Popup/PopupRoot.tsx @@ -1,16 +1,16 @@ -import React, { useCallback, useRef } from 'react'; +import React, { useCallback, forwardRef, useRef, AnimationEvent, TransitionEvent } from 'react'; import { useForkRef } from '@salutejs/plasma-core'; import { usePopupContext } from './PopupContext'; -import { PopupRootProps } from './Popup.types'; +import type { PopupRootProps } from './Popup.types'; import { PopupRootContainer, PopupView } from './Popup.styles'; -import { popupRootClass } from './Popup.utils'; +import { popupRootClass } from './Popup.tokens'; /** * Корень Popup. * Управляет показом/скрытием и анимацией всплывающего окна. */ -export const PopupRoot = React.forwardRef( +export const PopupRoot = forwardRef( ({ id, placement, offset, frame, setVisible, children, role, zIndex, animationInfo, className, ...rest }, ref) => { const contentRef = useRef(null); const innerRef = useForkRef(contentRef, ref); @@ -18,7 +18,7 @@ export const PopupRoot = React.forwardRef( const popupController = usePopupContext(); const handleAnimationEnd = useCallback( - (e: React.AnimationEvent | React.TransitionEvent) => { + (e: AnimationEvent | TransitionEvent) => { if (!contentRef || e.target !== contentRef.current) { return; } diff --git a/packages/plasma-new-hope/src/components/Popup/hooks/index.ts b/packages/plasma-new-hope/src/components/Popup/hooks/index.ts new file mode 100644 index 0000000000..8880a77f6c --- /dev/null +++ b/packages/plasma-new-hope/src/components/Popup/hooks/index.ts @@ -0,0 +1 @@ +export { usePopup } from './usePopup'; diff --git a/packages/plasma-new-hope/src/components/Popup/Popup.hooks.ts b/packages/plasma-new-hope/src/components/Popup/hooks/usePopup.ts similarity index 76% rename from packages/plasma-new-hope/src/components/Popup/Popup.hooks.ts rename to packages/plasma-new-hope/src/components/Popup/hooks/usePopup.ts index 0400640e21..e4e853ce92 100644 --- a/packages/plasma-new-hope/src/components/Popup/Popup.hooks.ts +++ b/packages/plasma-new-hope/src/components/Popup/hooks/usePopup.ts @@ -1,10 +1,10 @@ import { useEffect, useState } from 'react'; -import { PopupAnimationInfo, PopupHookArgs } from './Popup.types'; -import { usePopupContext } from './PopupContext'; +import type { PopupAnimationInfo, PopupHookArgs } from '../Popup.types'; +import { usePopupContext } from '../PopupContext'; // Хук для поключения анимации -export const usePopupAnimation = (): PopupAnimationInfo => { +const usePopupAnimation = (): PopupAnimationInfo => { const [endAnimation, setEndAnimation] = useState(false); const [endTransition, setEndTransition] = useState(false); @@ -19,10 +19,10 @@ 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(() => { @@ -30,7 +30,7 @@ export const usePopup = ({ isOpen, id, popupInfo, withAnimation }: PopupHookArgs if (isOpen && !isVisible) { popupController.register({ id, ...popupInfo }); setVisible(true); - animationInfo?.setEndAnimation(false); + animationInfo.setEndAnimation(false); return; } @@ -40,7 +40,7 @@ export const usePopup = ({ isOpen, id, popupInfo, withAnimation }: PopupHookArgs // если есть анимация - закрытие по окончании анимации if (withAnimation) { - animationInfo?.setEndAnimation(true); + animationInfo.setEndAnimation(true); return; } @@ -49,5 +49,5 @@ export const usePopup = ({ isOpen, id, popupInfo, withAnimation }: PopupHookArgs setVisible(false); }, [isOpen, isVisible, animationInfo]); - return { isVisible, setVisible, animationInfo }; + return { isVisible, setVisible, animationInfo, withAnimation }; }; diff --git a/packages/plasma-new-hope/src/components/Popup/index.ts b/packages/plasma-new-hope/src/components/Popup/index.ts index acefffeb9a..8dbb5473c3 100644 --- a/packages/plasma-new-hope/src/components/Popup/index.ts +++ b/packages/plasma-new-hope/src/components/Popup/index.ts @@ -1,5 +1,4 @@ export { PopupProvider, usePopupContext } from './PopupContext'; export { popupRoot, popupConfig } from './Popup'; -export { usePopupAnimation, usePopup } from './Popup.hooks'; -export { PopupRoot } from './PopupRoot'; -export { popupRootClass, endAnimationClass, endTransitionClass } from './Popup.utils'; +export { usePopup } from './hooks'; +export { popupRootClass, endAnimationClass, endTransitionClass } from './Popup.tokens'; diff --git a/packages/plasma-new-hope/src/components/Popup/utils/index.ts b/packages/plasma-new-hope/src/components/Popup/utils/index.ts new file mode 100644 index 0000000000..ea3529995d --- /dev/null +++ b/packages/plasma-new-hope/src/components/Popup/utils/index.ts @@ -0,0 +1 @@ +export const DEFAULT_Z_INDEX = 9000; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Popup/PopupBase.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Popup/Popup.stories.tsx similarity index 100% rename from packages/plasma-new-hope/src/examples/plasma_b2c/components/Popup/PopupBase.stories.tsx rename to packages/plasma-new-hope/src/examples/plasma_b2c/components/Popup/Popup.stories.tsx diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Popup/PopupBase.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_web/components/Popup/Popup.stories.tsx similarity index 100% rename from packages/plasma-new-hope/src/examples/plasma_web/components/Popup/PopupBase.stories.tsx rename to packages/plasma-new-hope/src/examples/plasma_web/components/Popup/Popup.stories.tsx diff --git a/packages/plasma-new-hope/src/examples/sds_engineer/components/Popup/PopupBase.stories.tsx b/packages/plasma-new-hope/src/examples/sds_engineer/components/Popup/Popup.stories.tsx similarity index 100% rename from packages/plasma-new-hope/src/examples/sds_engineer/components/Popup/PopupBase.stories.tsx rename to packages/plasma-new-hope/src/examples/sds_engineer/components/Popup/Popup.stories.tsx diff --git a/packages/plasma-new-hope/src/utils/index.ts b/packages/plasma-new-hope/src/utils/index.ts new file mode 100644 index 0000000000..e2ee86cb91 --- /dev/null +++ b/packages/plasma-new-hope/src/utils/index.ts @@ -0,0 +1 @@ +export const cx = (...classes: (string | undefined)[]) => classes.filter((classItem) => classItem).join(' '); diff --git a/packages/plasma-web/api/plasma-web.api.md b/packages/plasma-web/api/plasma-web.api.md index fcca2df717..8ccad895e3 100644 --- a/packages/plasma-web/api/plasma-web.api.md +++ b/packages/plasma-web/api/plasma-web.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-web/src/components/PopupBase/index.ts b/packages/plasma-web/src/components/PopupBase/index.ts index bb0803d77f..00edfb0773 100644 --- a/packages/plasma-web/src/components/PopupBase/index.ts +++ b/packages/plasma-web/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/website/plasma-ui-docs/docs/components/PopupBase.mdx b/website/plasma-ui-docs/docs/components/PopupBase.mdx index b925617ad0..e5b3db315a 100644 --- a/website/plasma-ui-docs/docs/components/PopupBase.mdx +++ b/website/plasma-ui-docs/docs/components/PopupBase.mdx @@ -31,7 +31,7 @@ ReactDOM.render( ### Использование PopupBase можно использовать как и на всем окне, так и в отдельном фрейме - свойство `frame`. -Само позиционирование можно указать с помощью свойста `placement`(center - по умолчанию; left, right, top, bottom и их комбинации), +Само позиционирование можно указать с помощью свойства `placement`(center - по умолчанию; left, right, top, bottom и их комбинации), а также определить отступы от точки с помощью `offset`. ```tsx live @@ -121,7 +121,7 @@ export function App() { ## Подключение анимации Для подключения анимации нужно добавить параметр `withAnimation`. -Само управление происходит с помощью классов через перменные `endAnimationClass`, `endTransitionClass` для `PopupBase`. +Само управление происходит с помощью классов через переменные `endAnimationClass`, `endTransitionClass` для `PopupBase`. Для добавления анимации необходимо использовать класс `.popup-base-root` через переменную `popupBaseRootClass` из пакета. Пример: @@ -174,7 +174,7 @@ const StyledPopupAnimation = styled(PopupBase)` `; ``` -И в самом комопненте: +И в самом компоненте: ```tsx const [isOpen, setIsOpen] = React.useState(false); diff --git a/website/plasma-web-docs/docs/components/PopupBase.mdx b/website/plasma-web-docs/docs/components/PopupBase.mdx index 3722aa9170..fb4e2431fd 100644 --- a/website/plasma-web-docs/docs/components/PopupBase.mdx +++ b/website/plasma-web-docs/docs/components/PopupBase.mdx @@ -31,7 +31,7 @@ ReactDOM.render( ### Использование PopupBase можно использовать как и на всем окне, так и в отдельном фрейме - свойство `frame`. -Само позиционирование можно указать с помощью свойста `placement`(center - по умолчанию; left, right, top, bottom и их комбинации), +Само позиционирование можно указать с помощью свойства `placement`(center - по умолчанию; left, right, top, bottom и их комбинации), а также определить отступы от точки с помощью `offset`. ```tsx live @@ -122,7 +122,7 @@ export function App() { ## Подключение анимации Для подключения анимации нужно добавить параметр `withAnimation`. -Само управление происходит с помощью классов через перменные `endAnimationClass`, `endTransitionClass` для `PopupBase`. +Само управление происходит с помощью классов через переменные `endAnimationClass`, `endTransitionClass` для `PopupBase`. Для добавления анимации необходимо использовать класс `.popup-base-root` через переменную `popupBaseRootClass` из пакета. Пример: @@ -175,7 +175,7 @@ const StyledPopupAnimation = styled(PopupBase)` `; ``` -И в самом комопненте: +И в самом компоненте: ```tsx const [isOpen, setIsOpen] = React.useState(false);