@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 17.1 kB
Source Map (JSON)
{"version":3,"file":"atoms.mjs","names":[],"sources":["../../../src/base-ui/Drawer/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog } from '@base-ui/react/dialog';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { cx } from 'antd-style';\nimport { X } from 'lucide-react';\nimport { AnimatePresence } from 'motion/react';\nimport type React from 'react';\nimport {\n cloneElement,\n createContext,\n isValidElement,\n use,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { mergeRefs, useMergeRefs } from 'react-merge-refs';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { useLayerZIndex } from '../zIndex';\nimport { drawerBackdropTransition, getDrawerMotionConfig, pushAxis } from './constants';\nimport { DrawerLayerProvider, useDrawerLayer } from './DrawerLayerContext';\nimport { styles } from './style';\nimport type { DrawerPlacement } from './type';\n\nconst mergeStateClassName = <TState,>(\n base: string,\n className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n if (typeof className === 'function') return (state: TState) => cx(base, className(state));\n return cx(base, className);\n};\n\nconst popupPlacementClass: Record<DrawerPlacement, string> = {\n bottom: styles.popupBottom,\n left: styles.popupLeft,\n right: styles.popupRight,\n top: styles.popupTop,\n};\n\nconst panelPlacementClass: Record<DrawerPlacement, string> = {\n bottom: styles.panelBottom,\n left: styles.panelLeft,\n right: styles.panelRight,\n top: styles.panelTop,\n};\n\nconst panelRoundedClass: Record<DrawerPlacement, string> = {\n bottom: styles.panelRoundedBottom,\n left: styles.panelRoundedLeft,\n right: styles.panelRoundedRight,\n top: styles.panelRoundedTop,\n};\n\nconst DrawerOpenContext = createContext<boolean | null>(null);\n\ninterface DrawerAnimationActions {\n onExitComplete: () => void;\n}\nconst DrawerActionsContext = createContext<DrawerAnimationActions | null>(null);\n\nexport const useDrawerOpen = () => use(DrawerOpenContext);\nexport const useDrawerActions = () => use(DrawerActionsContext);\n\nexport type DrawerRootProps = Dialog.Root.Props & {\n onExitComplete?: () => void;\n zIndex?: number;\n};\n\nconst AnimatedDrawerRoot = ({\n open,\n children,\n onExitComplete: onExitCompleteProp,\n zIndex: explicitZIndex,\n ...rest\n}: Omit<DrawerRootProps, 'open'> & { open: boolean }) => {\n const [isPresent, setIsPresent] = useState(!!open);\n\n useEffect(() => {\n if (open) setIsPresent(true);\n }, [open]);\n\n const handleExitComplete = useCallback(() => {\n setIsPresent(false);\n onExitCompleteProp?.();\n }, [onExitCompleteProp]);\n\n const actions = useMemo(() => ({ onExitComplete: handleExitComplete }), [handleExitComplete]);\n\n const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n const layer = useMemo(\n () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n [zIndex, popupRef],\n );\n\n if (!isPresent) return null;\n\n return (\n <DrawerOpenContext value={open}>\n <DrawerActionsContext value={actions}>\n <DrawerLayerProvider value={layer}>\n <Dialog.Root modal open {...rest}>\n {children}\n </Dialog.Root>\n </DrawerLayerProvider>\n </DrawerActionsContext>\n </DrawerOpenContext>\n );\n};\n\nconst NonAnimatedDrawerRoot = ({ zIndex: explicitZIndex, children, ...rest }: DrawerRootProps) => {\n const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n const layer = useMemo(\n () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n [zIndex, popupRef],\n );\n\n return (\n <DrawerLayerProvider value={layer}>\n <Dialog.Root modal {...rest}>\n {children}\n </Dialog.Root>\n </DrawerLayerProvider>\n );\n};\n\nexport const DrawerRoot = ({ open, onExitComplete, ...rest }: DrawerRootProps) => {\n if (open !== undefined) {\n return <AnimatedDrawerRoot open={open} onExitComplete={onExitComplete} {...rest} />;\n }\n return <NonAnimatedDrawerRoot {...rest} />;\n};\n\nexport type DrawerPortalProps = React.ComponentProps<typeof Dialog.Portal> & {\n container?: HTMLElement | null;\n};\nexport const DrawerPortal = ({ container, ...rest }: DrawerPortalProps) => {\n const appElement = useAppElement();\n return <Dialog.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\nexport type DrawerBackdropProps = React.ComponentProps<typeof Dialog.Backdrop>;\nexport const DrawerBackdrop = ({ className, style, ...rest }: DrawerBackdropProps) => {\n const open = useDrawerOpen();\n const layer = useDrawerLayer();\n const Motion = useMotionComponent();\n const layerStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex } : undefined;\n\n if (open !== null) {\n return (\n <Dialog.Backdrop\n {...rest}\n className={cx(styles.backdrop, className as string)}\n style={{ ...layerStyle, ...style, transition: 'none' }}\n render={\n <Motion.div\n animate={{ opacity: open ? 1 : 0 }}\n initial={{ opacity: 0 }}\n transition={drawerBackdropTransition}\n />\n }\n />\n );\n }\n\n return (\n <Dialog.Backdrop\n {...rest}\n className={mergeStateClassName(styles.backdrop, className as any) as any}\n style={{ ...layerStyle, ...style }}\n />\n );\n};\n\nexport type DrawerPopupProps = React.ComponentProps<typeof Dialog.Popup> & {\n flush?: boolean;\n height?: number | string;\n motionProps?: Record<string, any>;\n panelClassName?: string;\n panelStyle?: React.CSSProperties;\n placement?: DrawerPlacement;\n popupStyle?: React.CSSProperties;\n pushOffset?: number;\n width?: number | string;\n};\n\nexport const DrawerPopup = ({\n className,\n children,\n placement: placementProp = 'right',\n width: widthProp,\n height: heightProp,\n flush,\n pushOffset = 0,\n motionProps,\n panelClassName,\n panelStyle,\n popupStyle,\n ref: forwardedRef,\n ...rest\n}: DrawerPopupProps) => {\n const open = useDrawerOpen();\n const actions = useDrawerActions();\n const layer = useDrawerLayer();\n const Motion = useMotionComponent();\n const composedRef = useMergeRefs([forwardedRef, layer?.popupRef]);\n\n // The exiting panel lives inside AnimatePresence and keeps the props it had while open,\n // but this popup re-renders with whatever the consumer passes now. Freezing the geometry\n // during exit keeps the two in sync — otherwise a placement change on close teleports the\n // popup to the new edge while the panel animates out along the old axis.\n const openGeometryRef = useRef({\n height: heightProp,\n placement: placementProp,\n width: widthProp,\n });\n if (open !== false) {\n openGeometryRef.current = { height: heightProp, placement: placementProp, width: widthProp };\n }\n const { height, placement, width } = openGeometryRef.current;\n\n const isHorizontal = placement === 'left' || placement === 'right';\n const sizeStyle: React.CSSProperties = isHorizontal ? { width } : { height };\n const resolvedPopupStyle: React.CSSProperties = {\n ...(layer?.zIndex === undefined ? undefined : { zIndex: layer.zIndex + 1 }),\n ...sizeStyle,\n ...popupStyle,\n };\n const popupBaseClassName = cx(styles.popup, popupPlacementClass[placement]);\n const resolvedPanelClassName = cx(\n styles.panel,\n panelPlacementClass[placement],\n flush ? styles.panelFlush : panelRoundedClass[placement],\n panelClassName,\n );\n\n if (open !== null && actions) {\n const motionConfig = getDrawerMotionConfig(placement, pushOffset);\n return (\n <Dialog.Popup\n {...rest}\n className={cx(popupBaseClassName, className as string)}\n data-drawer-anchor={placement}\n ref={composedRef as any}\n style={resolvedPopupStyle}\n >\n <AnimatePresence onExitComplete={actions.onExitComplete}>\n {open ? (\n <Motion.div\n {...motionConfig}\n {...motionProps}\n className={resolvedPanelClassName}\n data-drawer-placement={placement}\n key=\"drawer-popup-panel\"\n style={{ transition: 'none', ...panelStyle }}\n >\n {children}\n </Motion.div>\n ) : null}\n </AnimatePresence>\n </Dialog.Popup>\n );\n }\n\n const { axis, sign } = pushAxis[placement];\n const pushVars = {\n [axis === 'x' ? '--drawer-push-x' : '--drawer-push-y']: `${pushOffset * sign}px`,\n } as React.CSSProperties;\n\n return (\n <Dialog.Popup\n {...rest}\n className={mergeStateClassName(popupBaseClassName, className as any) as any}\n data-drawer-anchor={placement}\n ref={composedRef as any}\n style={resolvedPopupStyle}\n >\n <div\n className={resolvedPanelClassName}\n data-drawer-placement={placement}\n style={{ ...pushVars, ...panelStyle }}\n >\n {children}\n </div>\n </Dialog.Popup>\n );\n};\n\nexport type DrawerHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n ref?: React.Ref<HTMLDivElement>;\n};\nexport const DrawerHeader = ({ className, ...rest }: DrawerHeaderProps) => (\n <div {...rest} className={cx(styles.header, className)} />\n);\n\nexport type DrawerTitleProps = React.ComponentProps<typeof Dialog.Title>;\nexport const DrawerTitle = ({ className, ...rest }: DrawerTitleProps) => (\n <Dialog.Title {...rest} className={mergeStateClassName(styles.title, className as any) as any} />\n);\n\nexport type DrawerDescriptionProps = React.ComponentProps<typeof Dialog.Description>;\nexport const DrawerDescription: React.FC<DrawerDescriptionProps> = Dialog.Description;\n\nexport type DrawerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n ref?: React.Ref<HTMLDivElement>;\n};\nexport const DrawerContent = ({ className, ...rest }: DrawerContentProps) => (\n <div {...rest} className={cx(styles.content, className)} />\n);\n\nexport type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement> & {\n ref?: React.Ref<HTMLDivElement>;\n};\nexport const DrawerFooter = ({ className, ...rest }: DrawerFooterProps) => (\n <div {...rest} className={cx(styles.footer, className)} />\n);\n\nexport type DrawerCloseProps = React.ComponentProps<typeof Dialog.Close>;\nexport const DrawerClose = ({ className, children, ...rest }: DrawerCloseProps) => (\n <Dialog.Close {...rest} className={mergeStateClassName(styles.close, className as any) as any}>\n {children ?? <X size={16} />}\n </Dialog.Close>\n);\n\nexport type DrawerTriggerProps = Omit<\n React.ComponentPropsWithRef<typeof Dialog.Trigger>,\n 'children' | 'render'\n> & {\n children?: React.ReactNode;\n nativeButton?: boolean;\n};\n\nexport const DrawerTrigger = ({\n children,\n className,\n nativeButton,\n ref: refProp,\n ...rest\n}: DrawerTriggerProps) => {\n const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n children,\n nativeButton,\n });\n\n const renderer = (props: any) => {\n const resolvedProps = (() => {\n if (isNativeButtonTriggerElement) return props as any;\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { type, ...restProps } = props as any;\n return restProps;\n })();\n\n const mergedProps = mergeProps((children as any).props, resolvedProps);\n return cloneElement(children as any, {\n ...mergedProps,\n ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n });\n };\n\n if (isValidElement(children)) {\n return (\n <Dialog.Trigger\n {...rest}\n className={className}\n nativeButton={resolvedNativeButton}\n render={renderer as any}\n />\n );\n }\n\n return (\n <Dialog.Trigger\n {...rest}\n className={className}\n nativeButton={resolvedNativeButton}\n ref={refProp as any}\n >\n {children}\n </Dialog.Trigger>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AA+BA,MAAM,uBACJ,MACA,cACG;CACH,IAAI,OAAO,cAAc,YAAY,QAAQ,UAAkB,GAAG,MAAM,UAAU,KAAK,CAAC;CACxF,OAAO,GAAG,MAAM,SAAS;AAC3B;AAEA,MAAM,sBAAuD;CAC3D,QAAQ,OAAO;CACf,MAAM,OAAO;CACb,OAAO,OAAO;CACd,KAAK,OAAO;AACd;AAEA,MAAM,sBAAuD;CAC3D,QAAQ,OAAO;CACf,MAAM,OAAO;CACb,OAAO,OAAO;CACd,KAAK,OAAO;AACd;AAEA,MAAM,oBAAqD;CACzD,QAAQ,OAAO;CACf,MAAM,OAAO;CACb,OAAO,OAAO;CACd,KAAK,OAAO;AACd;AAEA,MAAM,oBAAoB,cAA8B,IAAI;AAK5D,MAAM,uBAAuB,cAA6C,IAAI;AAE9E,MAAa,sBAAsB,IAAI,iBAAiB;AACxD,MAAa,yBAAyB,IAAI,oBAAoB;AAO9D,MAAM,sBAAsB,EAC1B,MACA,UACA,gBAAgB,oBAChB,QAAQ,gBACR,GAAG,WACoD;CACvD,MAAM,CAAC,WAAW,gBAAgB,SAAS,CAAC,CAAC,IAAI;CAEjD,gBAAgB;EACd,IAAI,MAAM,aAAa,IAAI;CAC7B,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,qBAAqB,kBAAkB;EAC3C,aAAa,KAAK;EAClB,qBAAqB;CACvB,GAAG,CAAC,kBAAkB,CAAC;CAEvB,MAAM,UAAU,eAAe,EAAE,gBAAgB,mBAAmB,IAAI,CAAC,kBAAkB,CAAC;CAE5F,MAAM,EAAE,QAAQ,KAAK,aAAa,eAA+B,SAAS,cAAc;CACxF,MAAM,QAAQ,eACL;EAAY;EAAgD;CAAO,IAC1E,CAAC,QAAQ,QAAQ,CACnB;CAEA,IAAI,CAAC,WAAW,OAAO;CAEvB,OACE,oBAAC,mBAAD;EAAmB,OAAO;EACxB,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,qBAAD;IAAqB,OAAO;IAC1B,UAAA,oBAAC,OAAO,MAAR;KAAa,OAAA;KAAM,MAAA;KAAK,GAAI;KACzB;IACU,CAAA;GACM,CAAA;EACD,CAAA;CACL,CAAA;AAEvB;AAEA,MAAM,yBAAyB,EAAE,QAAQ,gBAAgB,UAAU,GAAG,WAA4B;CAChG,MAAM,EAAE,QAAQ,KAAK,aAAa,eAA+B,SAAS,cAAc;CACxF,MAAM,QAAQ,eACL;EAAY;EAAgD;CAAO,IAC1E,CAAC,QAAQ,QAAQ,CACnB;CAEA,OACE,oBAAC,qBAAD;EAAqB,OAAO;EAC1B,UAAA,oBAAC,OAAO,MAAR;GAAa,OAAA;GAAM,GAAI;GACpB;EACU,CAAA;CACM,CAAA;AAEzB;AAEA,MAAa,cAAc,EAAE,MAAM,gBAAgB,GAAG,WAA4B;CAChF,IAAI,SAAS,KAAA,GACX,OAAO,oBAAC,oBAAD;EAA0B;EAAsB;EAAgB,GAAI;CAAO,CAAA;CAEpF,OAAO,oBAAC,uBAAD,EAAuB,GAAI,KAAO,CAAA;AAC3C;AAKA,MAAa,gBAAgB,EAAE,WAAW,GAAG,WAA8B;CACzE,MAAM,aAAa,cAAc;CACjC,OAAO,oBAAC,OAAO,QAAR;EAAe,WAAW,aAAa,cAAc,KAAA;EAAW,GAAI;CAAO,CAAA;AACpF;AAGA,MAAa,kBAAkB,EAAE,WAAW,OAAO,GAAG,WAAgC;CACpF,MAAM,OAAO,cAAc;CAC3B,MAAM,QAAQ,eAAe;CAC7B,MAAM,SAAS,mBAAmB;CAClC,MAAM,aAAa,OAAO,WAAW,KAAA,IAAY,EAAE,QAAQ,MAAM,OAAO,IAAI,KAAA;CAE5E,IAAI,SAAS,MACX,OACE,oBAAC,OAAO,UAAR;EACE,GAAI;EACJ,WAAW,GAAG,OAAO,UAAU,SAAmB;EAClD,OAAO;GAAE,GAAG;GAAY,GAAG;GAAO,YAAY;EAAO;EACrD,QACE,oBAAC,OAAO,KAAR;GACE,SAAS,EAAE,SAAS,OAAO,IAAI,EAAE;GACjC,SAAS,EAAE,SAAS,EAAE;GACtB,YAAY;EACb,CAAA;CAEJ,CAAA;CAIL,OACE,oBAAC,OAAO,UAAR;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,UAAU,SAAgB;EAChE,OAAO;GAAE,GAAG;GAAY,GAAG;EAAM;CAClC,CAAA;AAEL;AAcA,MAAa,eAAe,EAC1B,WACA,UACA,WAAW,gBAAgB,SAC3B,OAAO,WACP,QAAQ,YACR,OACA,aAAa,GACb,aACA,gBACA,YACA,YACA,KAAK,cACL,GAAG,WACmB;CACtB,MAAM,OAAO,cAAc;CAC3B,MAAM,UAAU,iBAAiB;CACjC,MAAM,QAAQ,eAAe;CAC7B,MAAM,SAAS,mBAAmB;CAClC,MAAM,cAAc,aAAa,CAAC,cAAc,OAAO,QAAQ,CAAC;CAMhE,MAAM,kBAAkB,OAAO;EAC7B,QAAQ;EACR,WAAW;EACX,OAAO;CACT,CAAC;CACD,IAAI,SAAS,OACX,gBAAgB,UAAU;EAAE,QAAQ;EAAY,WAAW;EAAe,OAAO;CAAU;CAE7F,MAAM,EAAE,QAAQ,WAAW,UAAU,gBAAgB;CAGrD,MAAM,YADe,cAAc,UAAU,cAAc,UACL,EAAE,MAAM,IAAI,EAAE,OAAO;CAC3E,MAAM,qBAA0C;EAC9C,GAAI,OAAO,WAAW,KAAA,IAAY,KAAA,IAAY,EAAE,QAAQ,MAAM,SAAS,EAAE;EACzE,GAAG;EACH,GAAG;CACL;CACA,MAAM,qBAAqB,GAAG,OAAO,OAAO,oBAAoB,UAAU;CAC1E,MAAM,yBAAyB,GAC7B,OAAO,OACP,oBAAoB,YACpB,QAAQ,OAAO,aAAa,kBAAkB,YAC9C,cACF;CAEA,IAAI,SAAS,QAAQ,SAAS;EAC5B,MAAM,eAAe,sBAAsB,WAAW,UAAU;EAChE,OACE,oBAAC,OAAO,OAAR;GACE,GAAI;GACJ,WAAW,GAAG,oBAAoB,SAAmB;GACrD,sBAAoB;GACpB,KAAK;GACL,OAAO;GAEP,UAAA,oBAAC,iBAAD;IAAiB,gBAAgB,QAAQ;IACtC,UAAA,OACC,8BAAC,OAAO,KAAR;KACE,GAAI;KACJ,GAAI;KACJ,WAAW;KACX,yBAAuB;KACvB,KAAI;KACJ,OAAO;MAAE,YAAY;MAAQ,GAAG;KAAW;IAGjC,GADT,QACS,IACV;GACW,CAAA;EACL,CAAA;CAElB;CAEA,MAAM,EAAE,MAAM,SAAS,SAAS;CAChC,MAAM,WAAW,GACd,SAAS,MAAM,oBAAoB,oBAAoB,GAAG,aAAa,KAAK,IAC/E;CAEA,OACE,oBAAC,OAAO,OAAR;EACE,GAAI;EACJ,WAAW,oBAAoB,oBAAoB,SAAgB;EACnE,sBAAoB;EACpB,KAAK;EACL,OAAO;EAEP,UAAA,oBAAC,OAAD;GACE,WAAW;GACX,yBAAuB;GACvB,OAAO;IAAE,GAAG;IAAU,GAAG;GAAW;GAEnC;EACE,CAAA;CACO,CAAA;AAElB;AAKA,MAAa,gBAAgB,EAAE,WAAW,GAAG,WAC3C,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,GAAG,OAAO,QAAQ,SAAS;AAAI,CAAA;AAI3D,MAAa,eAAe,EAAE,WAAW,GAAG,WAC1C,oBAAC,OAAO,OAAR;CAAc,GAAI;CAAM,WAAW,oBAAoB,OAAO,OAAO,SAAgB;AAAW,CAAA;AAIlG,MAAa,oBAAsD,OAAO;AAK1E,MAAa,iBAAiB,EAAE,WAAW,GAAG,WAC5C,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,GAAG,OAAO,SAAS,SAAS;AAAI,CAAA;AAM5D,MAAa,gBAAgB,EAAE,WAAW,GAAG,WAC3C,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,GAAG,OAAO,QAAQ,SAAS;AAAI,CAAA;AAI3D,MAAa,eAAe,EAAE,WAAW,UAAU,GAAG,WACpD,oBAAC,OAAO,OAAR;CAAc,GAAI;CAAM,WAAW,oBAAoB,OAAO,OAAO,SAAgB;CAClF,UAAA,YAAY,oBAAC,GAAD,EAAG,MAAM,GAAK,CAAA;AACf,CAAA;AAWhB,MAAa,iBAAiB,EAC5B,UACA,WACA,cACA,KAAK,SACL,GAAG,WACqB;CACxB,MAAM,EAAE,8BAA8B,yBAAyB,gBAAgB;EAC7E;EACA;CACF,CAAC;CAED,MAAM,YAAY,UAAe;EAC/B,MAAM,uBAAuB;GAC3B,IAAI,8BAA8B,OAAO;GAEzC,MAAM,EAAE,MAAM,GAAG,cAAc;GAC/B,OAAO;EACT,EAAA,CAAG;EAEH,MAAM,cAAc,WAAY,SAAiB,OAAO,aAAa;EACrE,OAAO,aAAa,UAAiB;GACnC,GAAG;GACH,KAAK,UAAU;IAAE,SAAiB;IAAM,MAAc;IAAK;GAAO,CAAC;EACrE,CAAC;CACH;CAEA,IAAI,eAAe,QAAQ,GACzB,OACE,oBAAC,OAAO,SAAR;EACE,GAAI;EACO;EACX,cAAc;EACd,QAAQ;CACT,CAAA;CAIL,OACE,oBAAC,OAAO,SAAR;EACE,GAAI;EACO;EACX,cAAc;EACd,KAAK;EAEJ;CACa,CAAA;AAEpB"}