p-sw/pswui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: use useAnimatedMount in Drawer

Browse Source
This commit is contained in:
p-sw 2024-08-07 22:08:22 +09:00
parent 57f9a9b118
commit 81854841ce
1 changed files with 45 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
packages/react/components/Drawer.tsx
View File

@ -2,6 +2,7 @@ import {
type AsChild, type AsChild,
Slot, Slot,
type VariantProps, type VariantProps,
useAnimatedMount,
useDocument, useDocument,
vcn, vcn,
} from "@pswui-lib"; } from "@pswui-lib";
@ -21,6 +22,8 @@ interface IDrawerContext {
closeThreshold: number; closeThreshold: number;
movePercentage: number; movePercentage: number;
isDragging: boolean; isDragging: boolean;
isMounted: boolean;
isRendered: boolean;
leaveWhileDragging: boolean; leaveWhileDragging: boolean;
} }
const DrawerContextInitial: IDrawerContext = { const DrawerContextInitial: IDrawerContext = {
@ -28,6 +31,8 @@ const DrawerContextInitial: IDrawerContext = {
closeThreshold: 0.3, closeThreshold: 0.3,
movePercentage: 0, movePercentage: 0,
isDragging: false, isDragging: false,
isMounted: false,
isRendered: false,
leaveWhileDragging: false, leaveWhileDragging: false,
}; };
const DrawerContext = React.createContext< const DrawerContext = React.createContext<
@ -102,8 +107,14 @@ interface DrawerOverlayProps
const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>( const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
(props, ref) => { (props, ref) => {
const internalRef = useRef<HTMLDivElement | null>(null);
const [state, setState] = useContext(DrawerContext); const [state, setState] = useContext(DrawerContext);
const { isMounted, isRendered } = useAnimatedMount(
state.isDragging ? true : state.opened,
internalRef,
);
const [variantProps, restPropsCompressed] = const [variantProps, restPropsCompressed] =
resolveDrawerOverlayVariantProps(props); resolveDrawerOverlayVariantProps(props);
const { asChild, ...restPropsExtracted } = restPropsCompressed; const { asChild, ...restPropsExtracted } = restPropsCompressed;
@ -128,22 +139,39 @@ const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
const document = useDocument(); const document = useDocument();
if (!document) return null; if (!document) return null;
return createPortal( return (
<Comp <>
{...restPropsExtracted} <DrawerContext.Provider
className={drawerOverlayVariant({ value={[{ ...state, isMounted, isRendered }, setState]}
...variantProps, >
opened: state.isDragging ? true : state.opened, {isMounted
})} ? createPortal(
onClick={onOutsideClick} <Comp
style={{ {...restPropsExtracted}
backdropFilter, className={drawerOverlayVariant({
WebkitBackdropFilter: backdropFilter, ...variantProps,
transitionDuration: state.isDragging ? "0s" : undefined, opened: isRendered,
}} })}
ref={ref} onClick={onOutsideClick}
/>, style={{
document.body, backdropFilter,
WebkitBackdropFilter: backdropFilter,
transitionDuration: state.isDragging ? "0s" : undefined,
}}
ref={(el: HTMLDivElement) => {
internalRef.current = el;
if (typeof ref === "function") {
ref(el);
} else if (ref) {
ref.current = el;
}
}}
/>,
document.body,
)
: null}
</DrawerContext.Provider>
</>
); );
}, },
); );
@ -353,7 +381,7 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
{...restPropsExtracted} {...restPropsExtracted}
className={drawerContentVariant({ className={drawerContentVariant({
...variantProps, ...variantProps,
opened: state.opened, opened: state.isRendered,
})} })}
style={{ style={{
transform: dragState.isDragging transform: dragState.isDragging