archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

feat(popover): needless container removed

Browse Source
This commit is contained in:
Junior Garcia 2023-04-06 01:19:42 -03:00
parent 6d936e4899
commit 279cba96c8
2 changed files with 21 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/components/popover/src/popover-content.tsx
View File

@ -1,10 +1,10 @@
import {ReactNode, useMemo, useCallback} from "react";
import {OverlayContainer, DismissButton} from "@react-aria/overlays";
import {TRANSITION_VARIANTS} from "@nextui-org/framer-transitions";
import {forwardRef} from "@nextui-org/system";
import {DismissButton} from "@react-aria/overlays";
import {TRANSITION_VARIANTS} from "@nextui-org/framer-transitions";
import {FocusScope} from "@react-aria/focus";
import {AnimatePresence, motion} from "framer-motion";
import {getTransformOrigins} from "@nextui-org/aria-utils";
import {clsx} from "@nextui-org/shared-utils";
import {usePopoverContext} from "./popover-context";
@ -12,8 +12,8 @@ export interface PopoverContentProps {
children: ReactNode;
}
const PopoverContent = forwardRef<PopoverContentProps, "div">((props, ref) => {
const {children, as, className: classNameProp, ...otherProps} = props;
const PopoverContent = forwardRef<PopoverContentProps, "section">((props, _) => {
const {as, children} = props;
const {
Component: OverlayComponent,
@ -29,7 +29,7 @@ const PopoverContent = forwardRef<PopoverContentProps, "div">((props, ref) => {
const Component = as || OverlayComponent || "div";
const {className, ...otherPopoverProps} = getPopoverProps(otherProps, ref);
const {className, ...otherPopoverProps} = getPopoverProps();
const arrowContent = useMemo(() => {
if (!showArrow) return null;
@ -40,15 +40,17 @@ const PopoverContent = forwardRef<PopoverContentProps, "div">((props, ref) => {
const ContentWrapper = useCallback(
({children}: {children: ReactNode}) => {
return (
<Component className={clsx(className, classNameProp)}>
<DismissButton onDismiss={onClose} />
{children}
{arrowContent}
<DismissButton onDismiss={onClose} />
</Component>
<FocusScope restoreFocus>
<Component className={className}>
<DismissButton onDismiss={onClose} />
{children}
{arrowContent}
<DismissButton onDismiss={onClose} />
</Component>
</FocusScope>
);
},
[Component, className, classNameProp, arrowContent, onClose],
[Component, disableAnimation, className, arrowContent, onClose],
);
const animatedContent = useMemo(() => {
@ -73,13 +75,9 @@ const PopoverContent = forwardRef<PopoverContentProps, "div">((props, ref) => {
return (
<>
{disableAnimation && isOpen ? (
<OverlayContainer>
<ContentWrapper {...otherPopoverProps}>{children}</ContentWrapper>;
</OverlayContainer>
<ContentWrapper>{children}</ContentWrapper>
) : (
<AnimatePresence initial={false}>
{isOpen ? <OverlayContainer>{animatedContent}</OverlayContainer> : null}
</AnimatePresence>
<AnimatePresence initial={false}>{isOpen ? animatedContent : null}</AnimatePresence>
)}
</>
);

17
packages/components/popover/src/use-popover.ts
View File

@ -20,7 +20,7 @@ import {popover} from "@nextui-org/theme";
import {chain, mergeProps, mergeRefs} from "@react-aria/utils";
import {createDOMRef} from "@nextui-org/dom-utils";
import {ReactRef, clsx} from "@nextui-org/shared-utils";
import {useId, useMemo, useCallback, useImperativeHandle, useRef, useEffect} from "react";
import {useId, useMemo, useCallback, useImperativeHandle, useRef} from "react";
export interface Props extends HTMLNextUIProps<"div", PopoverVariantProps> {
/**
@ -160,15 +160,6 @@ export function usePopover(originalProps: UsePopoverProps) {
state.close();
}, [state, onClose]);
// control open state from outside
useEffect(() => {
if (isOpen === undefined) return;
if (isOpen !== state.isOpen) {
isOpen ? state.open() : handleClose();
}
}, [isOpen, handleClose]);
const slots = useMemo(
() =>
popover({
@ -180,8 +171,8 @@ export function usePopover(originalProps: UsePopoverProps) {
const baseStyles = clsx(styles?.base, className);
const getPopoverProps: PropGetter = (props = {}, _ref: Ref<any> | null | undefined = null) => ({
ref: mergeRefs(_ref, overlayRef),
const getPopoverProps: PropGetter = (props = {}) => ({
ref: overlayRef,
className: slots.base({class: baseStyles}),
...mergeProps(
overlayTriggerProps,
@ -223,7 +214,7 @@ export function usePopover(originalProps: UsePopoverProps) {
placement: placementProp,
isOpen: state.isOpen,
onClose: handleClose,
disableAnimation: originalProps.disableAnimation,
disableAnimation: originalProps.disableAnimation ?? false,
motionProps,
getPopoverProps,
getTriggerProps,