@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 18 kB
Source Map (JSON)
{"version":3,"file":"FloatingPanel.mjs","names":[],"sources":["../../../src/base-ui/FloatingPanel/FloatingPanel.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { X } from 'lucide-react';\nimport type { MotionProps } from 'motion/react';\nimport type { CSSProperties, PointerEvent as ReactPointerEvent } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport type { ModalRootProps } from '../Modal';\nimport {\n ModalBackdrop,\n ModalClose,\n ModalContent,\n ModalFooter,\n ModalHeader,\n ModalPopup,\n ModalPortal,\n ModalRoot,\n ModalTitle,\n} from '../Modal';\nimport { styles } from './style';\nimport type {\n FloatingPanelOffset,\n FloatingPanelPlacement,\n FloatingPanelProps,\n FloatingPanelResizeHandle,\n FloatingPanelSize,\n} from './type';\n\nconst DEFAULT_MIN_HEIGHT = 180;\nconst DEFAULT_MIN_WIDTH = 320;\n\ninterface InternalFloatingPanelSize extends FloatingPanelSize {\n sourceHeight?: number | string;\n sourceWidth?: number | string;\n}\n\nconst defaultMotionProps: MotionProps = {\n animate: { opacity: 1, scale: 1, x: 0, y: 0 },\n exit: {\n opacity: 0,\n scale: 0.98,\n transition: { duration: 0.14, ease: [0.4, 0, 1, 1] },\n y: 12,\n },\n initial: { opacity: 0, scale: 0.98, y: 12 },\n transition: { duration: 0.2, ease: [0.32, 0.72, 0, 1] },\n};\n\nconst topMotionProps: MotionProps = {\n animate: { opacity: 1, scale: 1, x: 0, y: 0 },\n exit: {\n opacity: 0,\n scale: 0.98,\n transition: { duration: 0.14, ease: [0.4, 0, 1, 1] },\n y: -12,\n },\n initial: { opacity: 0, scale: 0.98, y: -12 },\n transition: { duration: 0.2, ease: [0.32, 0.72, 0, 1] },\n};\n\nconst resolveOffset = (offset: FloatingPanelOffset) => {\n if (typeof offset === 'object') {\n return {\n x: offset.x ?? 8,\n y: offset.y ?? 8,\n };\n }\n\n return { x: offset, y: offset };\n};\n\nconst getPlacementStyle = (\n placement: FloatingPanelPlacement,\n offset: FloatingPanelOffset,\n): CSSProperties => {\n const { x, y } = resolveOffset(offset);\n const isTop = placement.startsWith('top');\n const isLeft = placement.endsWith('Left');\n\n return {\n alignItems: isTop ? 'flex-start' : 'flex-end',\n justifyContent: isLeft ? 'flex-start' : 'flex-end',\n paddingBlockEnd: isTop ? undefined : y,\n paddingBlockStart: isTop ? y : undefined,\n paddingInlineEnd: isLeft ? undefined : x,\n paddingInlineStart: isLeft ? x : undefined,\n };\n};\n\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\n\nconst getViewportMaxSize = () => ({\n height: Math.max(DEFAULT_MIN_HEIGHT, window.innerHeight - 16),\n width: Math.max(DEFAULT_MIN_WIDTH, window.innerWidth - 16),\n});\n\nconst getResizeHandles = (placement: FloatingPanelPlacement): FloatingPanelResizeHandle[] => {\n switch (placement) {\n case 'bottomLeft': {\n return ['top', 'right', 'topRight'];\n }\n case 'topLeft': {\n return ['bottom', 'right', 'bottomRight'];\n }\n case 'topRight': {\n return ['bottom', 'left', 'bottomLeft'];\n }\n default: {\n return ['top', 'left', 'topLeft'];\n }\n }\n};\n\nconst getResizeHandleClassName = (s: typeof styles, handle: FloatingPanelResizeHandle) => {\n const handleClassMap: Record<FloatingPanelResizeHandle, string> = {\n bottom: s.resizeHandleBottom,\n bottomLeft: s.resizeHandleBottomLeft,\n bottomRight: s.resizeHandleBottomRight,\n left: s.resizeHandleLeft,\n right: s.resizeHandleRight,\n top: s.resizeHandleTop,\n topLeft: s.resizeHandleTopLeft,\n topRight: s.resizeHandleTopRight,\n };\n\n return handleClassMap[handle];\n};\n\nconst resolveResizeSize = ({\n handle,\n maxHeight,\n maxWidth,\n minHeight,\n minWidth,\n startHeight,\n startWidth,\n startX,\n startY,\n x,\n y,\n}: {\n handle: FloatingPanelResizeHandle;\n maxHeight: number;\n maxWidth: number;\n minHeight: number;\n minWidth: number;\n startHeight: number;\n startWidth: number;\n startX: number;\n startY: number;\n x: number;\n y: number;\n}): FloatingPanelSize => {\n const deltaX = x - startX;\n const deltaY = y - startY;\n const growsLeft = handle.includes('Left') || handle === 'left';\n const growsRight = handle.includes('Right') || handle === 'right';\n const growsTop = handle.includes('top') || handle === 'top';\n const growsBottom = handle.includes('bottom') || handle === 'bottom';\n\n const nextWidth = growsLeft ? startWidth - deltaX : growsRight ? startWidth + deltaX : startWidth;\n const nextHeight = growsTop\n ? startHeight - deltaY\n : growsBottom\n ? startHeight + deltaY\n : startHeight;\n\n return {\n height: clamp(nextHeight, minHeight, maxHeight),\n width: clamp(nextWidth, minWidth, maxWidth),\n };\n};\n\nconst FloatingPanel = memo<FloatingPanelProps>(\n ({\n afterClose,\n ariaLabel,\n children,\n className,\n classNames,\n closable = true,\n closeIcon,\n closeLabel = 'Close',\n defaultOpen,\n actions,\n footer,\n getContainer,\n height,\n keyboard = true,\n mask = false,\n maskClosable = true,\n maxHeight,\n maxWidth,\n minHeight = DEFAULT_MIN_HEIGHT,\n minWidth = DEFAULT_MIN_WIDTH,\n modal = false,\n motionProps,\n offset = 8,\n onClose,\n onOpenChange,\n onResize,\n onResizeEnd,\n open,\n placement = 'bottomRight',\n resizable = true,\n styles: semanticStyles,\n title,\n width = 640,\n zIndex,\n }) => {\n const s = styles;\n const isTop = placement.startsWith('top');\n const container = getContainer === false ? undefined : getContainer;\n const [resizeSize, setResizeSize] = useState<InternalFloatingPanelSize>();\n const latestResizeSizeRef = useRef<FloatingPanelSize | undefined>(undefined);\n const resizeCleanupRef = useRef<(() => void) | undefined>(undefined);\n const activeResizeSize =\n resizeSize?.sourceWidth === width && resizeSize.sourceHeight === height\n ? resizeSize\n : undefined;\n\n useEffect(\n () => () => {\n resizeCleanupRef.current?.();\n },\n [],\n );\n\n const popupStyle = useMemo(\n () => ({\n ...getPlacementStyle(placement, offset),\n ...semanticStyles?.wrapper,\n }),\n [offset, placement, semanticStyles?.wrapper],\n );\n\n const handleOpenChange = useCallback<NonNullable<ModalRootProps['onOpenChange']>>(\n (nextOpen, eventDetails) => {\n if (!nextOpen) {\n if (keyboard === false && eventDetails.reason === 'escape-key') return;\n if (maskClosable === false && eventDetails.reason === 'outside-press') return;\n onClose?.();\n }\n\n onOpenChange?.(nextOpen, eventDetails);\n },\n [keyboard, maskClosable, onClose, onOpenChange],\n );\n\n const showHeader = title !== undefined || actions !== undefined || closable;\n const resolvedMotionProps = motionProps ?? (isTop ? topMotionProps : defaultMotionProps);\n const resizeHandles = useMemo(() => getResizeHandles(placement), [placement]);\n\n const handleResizeStart = useCallback(\n (handle: FloatingPanelResizeHandle) => (event: ReactPointerEvent<HTMLDivElement>) => {\n event.preventDefault();\n event.stopPropagation();\n\n const panel = event.currentTarget.parentElement;\n if (!panel) return;\n\n const rect = panel.getBoundingClientRect();\n const viewportMaxSize = getViewportMaxSize();\n const resolvedMaxWidth = Math.max(minWidth, maxWidth ?? viewportMaxSize.width);\n const resolvedMaxHeight = Math.max(minHeight, maxHeight ?? viewportMaxSize.height);\n const startX = event.clientX;\n const startY = event.clientY;\n\n const handleResizeMove = (moveEvent: PointerEvent) => {\n const nextSize = resolveResizeSize({\n handle,\n maxHeight: resolvedMaxHeight,\n maxWidth: resolvedMaxWidth,\n minHeight,\n minWidth,\n startHeight: rect.height,\n startWidth: rect.width,\n startX,\n startY,\n x: moveEvent.clientX,\n y: moveEvent.clientY,\n });\n\n const nextState = { ...nextSize, sourceHeight: height, sourceWidth: width };\n latestResizeSizeRef.current = nextSize;\n setResizeSize(nextState);\n onResize?.(nextSize);\n };\n\n const handleResizeEnd = () => {\n resizeCleanupRef.current?.();\n resizeCleanupRef.current = undefined;\n\n if (latestResizeSizeRef.current) onResizeEnd?.(latestResizeSizeRef.current);\n };\n\n resizeCleanupRef.current?.();\n window.addEventListener('pointermove', handleResizeMove);\n window.addEventListener('pointerup', handleResizeEnd);\n resizeCleanupRef.current = () => {\n window.removeEventListener('pointermove', handleResizeMove);\n window.removeEventListener('pointerup', handleResizeEnd);\n };\n },\n [height, maxHeight, maxWidth, minHeight, minWidth, onResize, onResizeEnd, width],\n );\n\n return (\n <ModalRoot\n defaultOpen={defaultOpen}\n modal={modal}\n open={open}\n zIndex={zIndex}\n onExitComplete={afterClose}\n onOpenChange={handleOpenChange}\n >\n <ModalPortal container={container}>\n {mask && (\n <ModalBackdrop className={classNames?.backdrop} style={semanticStyles?.backdrop} />\n )}\n <ModalPopup\n aria-label={ariaLabel}\n className={cx(s.wrapper, classNames?.wrapper)}\n motionProps={resolvedMotionProps}\n panelClassName={cx(s.panel, isTop && s.panelTop, className, classNames?.panel)}\n popupStyle={popupStyle}\n width={activeResizeSize?.width ?? width}\n style={{\n height: activeResizeSize?.height ?? height,\n minHeight,\n minWidth,\n width: activeResizeSize?.width,\n ...semanticStyles?.panel,\n }}\n >\n {resizable &&\n resizeHandles.map((handle) => (\n <div\n aria-hidden\n data-floating-panel-resize-handle={handle}\n key={handle}\n style={semanticStyles?.resizeHandle}\n className={cx(\n s.resizeHandle,\n getResizeHandleClassName(s, handle),\n classNames?.resizeHandle,\n )}\n onPointerDown={handleResizeStart(handle)}\n />\n ))}\n {showHeader && (\n <ModalHeader\n className={cx(s.header, classNames?.header)}\n style={semanticStyles?.header}\n >\n {title !== undefined ? (\n <ModalTitle\n className={cx(s.title, classNames?.title)}\n style={semanticStyles?.title}\n >\n {title}\n </ModalTitle>\n ) : (\n <span />\n )}\n <div className={s.headerActions}>\n {actions && (\n <div\n className={cx(s.actions, classNames?.actions)}\n style={semanticStyles?.actions}\n >\n {actions}\n </div>\n )}\n {closable && (\n <ModalClose\n aria-label={closeLabel}\n className={cx(s.close, classNames?.close)}\n style={semanticStyles?.close}\n >\n {closeIcon ?? <X size={16} />}\n </ModalClose>\n )}\n </div>\n </ModalHeader>\n )}\n <ModalContent className={cx(s.body, classNames?.body)} style={semanticStyles?.body}>\n {children}\n </ModalContent>\n {footer && (\n <ModalFooter\n className={cx(s.footer, classNames?.footer)}\n style={semanticStyles?.footer}\n >\n {footer}\n </ModalFooter>\n )}\n </ModalPopup>\n </ModalPortal>\n </ModalRoot>\n );\n },\n);\n\nFloatingPanel.displayName = 'FloatingPanel';\n\nexport { FloatingPanel };\n"],"mappings":"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"}