@lobehub/ui 5.42.0 → 5.42.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -66,18 +66,17 @@ const DraggablePanelRoot = memo(({ backgroundColor, children, className, collaps
|
|
|
66
66
|
});
|
|
67
67
|
const [innerSize, setInnerSize] = useState(resolvedDefaultSize);
|
|
68
68
|
const currentSize = size ?? innerSize;
|
|
69
|
-
const commitSize = useCallback((next, delta) => {
|
|
70
|
-
if (size === void 0) setInnerSize(next);
|
|
71
|
-
onSizeChange?.(next, delta);
|
|
72
|
-
}, [onSizeChange, size]);
|
|
73
69
|
const options = {
|
|
74
|
-
collapseThreshold
|
|
70
|
+
collapseThreshold,
|
|
75
71
|
defaultSize: resolvedDefaultSize,
|
|
76
72
|
expand: isExpand,
|
|
77
73
|
max,
|
|
78
74
|
min,
|
|
79
|
-
onExpandChange:
|
|
80
|
-
onSizeChange:
|
|
75
|
+
onExpandChange: setIsExpand,
|
|
76
|
+
onSizeChange: useCallback((next, delta) => {
|
|
77
|
+
if (size === void 0) setInnerSize(next);
|
|
78
|
+
onSizeChange?.(next, delta);
|
|
79
|
+
}, [onSizeChange, size]),
|
|
81
80
|
onSizeDragging,
|
|
82
81
|
placement,
|
|
83
82
|
size: currentSize
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atoms.mjs","names":["useControlledState","getHandleSize"],"sources":["../../../src/base-ui/DraggablePanel/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronLeft } from 'lucide-react';\nimport type { HTMLMotionProps, MotionStyle } from 'motion/react';\nimport { motion, useTransform } from 'motion/react';\nimport {\n type CSSProperties,\n memo,\n type ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport type { DivProps } from '@/types';\n\nimport { DraggablePanelContext, useDraggablePanelContext } from './context';\nimport type { Placement } from './core/axes';\nimport { AXES } from './core/axes';\nimport type { PanelControllerOptions } from './core/controller';\nimport { createPanelController } from './core/controller';\nimport { coarsePointer, handleSize as getHandleSize } from './core/env';\nimport { useIsomorphicLayoutEffect, useStore } from './core/internal';\nimport { timing } from './core/transition';\nimport { BOW, handleVariants, rootVariants, styles, toggleVariants } from './style';\n\nconst PAN_THRESHOLD = 3;\n\nconst BOW_CX = 15;\nconst BOW_CY = BOW.half + 8;\nconst BOW_W = BOW_CX * 2;\nconst BOW_H = BOW_CY * 2;\n\nconst bowPath = (direction: 1 | -1, verticalSeam: boolean) => {\n const k = BOW.half * BOW.curve;\n const b = BOW_CX + BOW.bulge * direction;\n const a0 = BOW_CY - BOW.half;\n const a1 = BOW_CY + BOW.half;\n // `a` runs along the seam, `b` across it; a horizontal seam swaps the two.\n const pt = (along: number, across: number) =>\n verticalSeam ? `${along} ${across}` : `${across} ${along}`;\n return [\n `M${pt(BOW_CX, a0)}`,\n `C${pt(BOW_CX, a0 + k)} ${pt(b, BOW_CY - k)} ${pt(b, BOW_CY)}`,\n `C${pt(b, BOW_CY + k)} ${pt(BOW_CX, a1 - k)} ${pt(BOW_CX, a1)}`,\n ].join(' ');\n};\n\nconst BOW_PATHS = {\n horizontalSeam: [bowPath(-1, false), bowPath(1, false)],\n verticalSeam: [bowPath(-1, true), bowPath(1, true)],\n};\n\n/** The chevron points the way a click moves the panel. */\nconst CHEVRON_TURN = { bottom: 270, left: 0, right: 180, top: 90 } as const;\n\nconst chevronPath = (cx: number, cy: number) =>\n `M${cx + 2.4} ${cy - 4.8} L${cx - 2.4} ${cy} L${cx + 2.4} ${cy + 4.8}`;\n\nconst ORIGIN_MAP = {\n bottom: 'center bottom',\n left: 'left center',\n right: 'right center',\n top: 'center top',\n} as const;\n\nconst COLLAPSED_SCALE = 0.97;\n\nconst EDGE_INSET = {\n bottom: 'insetBlockEnd',\n left: 'insetInlineStart',\n right: 'insetInlineEnd',\n top: 'insetBlockStart',\n} as const;\n\nexport interface DraggablePanelRootProps extends Omit<DivProps, 'onDrag'> {\n backgroundColor?: string;\n collapseThreshold?: number;\n defaultExpand?: boolean;\n defaultSize?: number;\n expand?: boolean;\n expandable?: boolean;\n max?: number;\n min?: number;\n mode?: 'fixed' | 'float';\n onExpandChange?: (expand: boolean) => void;\n onSizeChange?: (size: number, delta: number) => void;\n onSizeDragging?: (size: number, delta: number) => void;\n placement?: Placement;\n showBorder?: boolean;\n size?: number;\n}\n\nexport const DraggablePanelRoot = memo<DraggablePanelRootProps>(\n ({\n backgroundColor,\n children,\n className,\n collapseThreshold,\n defaultExpand = true,\n defaultSize,\n expand,\n expandable = true,\n max,\n min = 0,\n mode = 'fixed',\n onExpandChange,\n onSizeChange,\n onSizeDragging,\n placement = 'right',\n showBorder = true,\n size,\n style,\n ...rest\n }) => {\n const axis = AXES[placement];\n const fallbackSize = axis.vertical ? 180 : 280;\n const resolvedDefaultSize = defaultSize ?? fallbackSize;\n\n const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n onChange: onExpandChange,\n value: expand,\n });\n const [innerSize, setInnerSize] = useState(resolvedDefaultSize);\n const currentSize = size ?? innerSize;\n\n const commitSize = useCallback(\n (next: number, delta: number) => {\n if (size === undefined) setInnerSize(next);\n onSizeChange?.(next, delta);\n },\n [onSizeChange, size],\n );\n\n const options: PanelControllerOptions = {\n collapseThreshold: expandable ? collapseThreshold : undefined,\n defaultSize: resolvedDefaultSize,\n expand: isExpand,\n max,\n min,\n onExpandChange: expandable ? setIsExpand : undefined,\n onSizeChange: commitSize,\n onSizeDragging,\n placement,\n size: currentSize,\n };\n\n const [controller] = useState(() => createPanelController(options));\n const state = useStore(controller.subscribe, () => controller.state);\n const elementRef = useRef<HTMLElement>(null);\n\n useIsomorphicLayoutEffect(() => {\n controller.sync(options);\n });\n\n useIsomorphicLayoutEffect(() => {\n const node = elementRef.current;\n return node ? controller.attach(node) : undefined;\n }, [controller]);\n\n const toggleExpand = useCallback(() => {\n if (expandable) setIsExpand(!isExpand);\n }, [expandable, isExpand, setIsExpand]);\n\n const context = useMemo(\n () => ({\n axis,\n controller,\n expand: isExpand,\n expandable,\n placement,\n showBorder,\n state,\n toggleExpand,\n }),\n [axis, controller, isExpand, expandable, placement, showBorder, state, toggleExpand],\n );\n\n return (\n <DraggablePanelContext value={context}>\n <aside\n className={cx(rootVariants({ mode, placement }), className)}\n data-expand={isExpand}\n data-expandable={expandable}\n data-resizing={state.dragging}\n ref={elementRef}\n style={\n {\n '--draggable-panel-bg': backgroundColor || '',\n 'flexDirection': axis.vertical ? 'column' : 'row',\n ...style,\n } as CSSProperties\n }\n {...rest}\n >\n {children}\n </aside>\n </DraggablePanelContext>\n );\n },\n);\n\nDraggablePanelRoot.displayName = 'DraggablePanelRoot';\n\nexport interface DraggablePanelContentProps extends Omit<DivProps, 'onDrag'> {}\n\nexport const DraggablePanelContent = memo<DraggablePanelContentProps>(\n ({ children, className, style, ...rest }) => {\n const { axis, controller, expand, placement, state } = useDraggablePanelContext();\n const extent = useTransform(controller.motion.size, (value) => Math.max(0, value));\n const clipping = state.dragging || state.folding || controller.target === 0;\n const shrunk = state.collapsing || !expand;\n\n return (\n <motion.div\n inert={!expand}\n style={\n {\n display: 'flex',\n flexDirection: axis.vertical ? 'column' : 'row',\n flexShrink: 0,\n justifyContent: axis.anchorEnd ? 'flex-end' : 'flex-start',\n overflow: clipping ? 'clip' : 'visible',\n [axis.cross]: '100%',\n [axis.extent]: extent,\n } as MotionStyle\n }\n >\n <motion.div\n animate={{ scale: shrunk ? COLLAPSED_SCALE : 1 }}\n className={cx(styles.content, className)}\n transition={timing()}\n style={\n {\n transformOrigin: ORIGIN_MAP[placement],\n [axis.cross]: '100%',\n [axis.extent]: controller.motion.content,\n ...style,\n } as MotionStyle\n }\n {...(rest as HTMLMotionProps<'div'>)}\n >\n {children}\n </motion.div>\n </motion.div>\n );\n },\n);\n\nDraggablePanelContent.displayName = 'DraggablePanelContent';\n\nexport interface DraggablePanelHandleProps extends Omit<DivProps, 'onDrag'> {\n wideArea?: boolean;\n}\n\nexport const DraggablePanelHandle = memo<DraggablePanelHandleProps>(\n ({ className, style, wideArea = true, ...rest }) => {\n const { axis, controller, expand, showBorder, state } = useDraggablePanelContext();\n const size = useStore(coarsePointer.subscribe, () => getHandleSize(wideArea));\n const target = useStore(controller.subscribe, () => controller.target);\n useEffect(() => () => controller.drag.cancel(), [controller]);\n\n const pressedRef = useRef<{ x: number; y: number } | null>(null);\n const draggingRef = useRef(false);\n const draggedRef = useRef(false);\n const { max, min } = controller.bounds();\n\n if (!expand) return null;\n\n return (\n <div\n aria-orientation={axis.ariaOrientation}\n aria-valuemax={Number.isFinite(max) ? max : undefined}\n aria-valuemin={min}\n aria-valuenow={target}\n aria-valuetext={`${target} pixels`}\n className={cx(handleVariants({ edge: axis.edge }), className)}\n data-border={showBorder}\n data-resizing={state.dragging || undefined}\n role=\"separator\"\n tabIndex={0}\n style={\n {\n '--draggable-panel-handle-size': `${size}px`,\n [EDGE_INSET[axis.edge]]: -size / 2,\n ...style,\n } as CSSProperties\n }\n onKeyDown={(event) => controller.resizeByKey(event)}\n onDoubleClick={() => {\n if (!draggedRef.current) controller.reset();\n }}\n onLostPointerCapture={() => {\n if (draggingRef.current) controller.drag.cancel();\n pressedRef.current = null;\n draggingRef.current = false;\n }}\n onPointerCancel={() => {\n controller.drag.cancel();\n pressedRef.current = null;\n draggingRef.current = false;\n }}\n onPointerDown={(event) => {\n draggedRef.current = false;\n pressedRef.current = { x: event.clientX, y: event.clientY };\n // A synthetic pointerdown carries no active pointer, and capturing throws.\n try {\n event.currentTarget.setPointerCapture(event.pointerId);\n } catch {\n /* empty */\n }\n }}\n onPointerMove={(event) => {\n if (!pressedRef.current) return;\n const offset = {\n x: event.clientX - pressedRef.current.x,\n y: event.clientY - pressedRef.current.y,\n };\n if (!draggingRef.current) {\n if (Math.hypot(offset.x, offset.y) < PAN_THRESHOLD) return;\n draggingRef.current = true;\n draggedRef.current = true;\n controller.drag.start();\n }\n controller.drag.move(offset);\n }}\n onPointerUp={() => {\n if (draggingRef.current) controller.drag.end();\n pressedRef.current = null;\n draggingRef.current = false;\n }}\n {...rest}\n />\n );\n },\n);\n\nDraggablePanelHandle.displayName = 'DraggablePanelHandle';\n\nexport interface DraggablePanelToggleProps extends Omit<DivProps, 'onDrag'> {\n showHandleWhenCollapsed?: boolean;\n}\n\nexport const DraggablePanelToggle = memo<DraggablePanelToggleProps>(\n ({ className, showHandleWhenCollapsed, style, ...rest }) => {\n const { axis, expand, expandable, placement, toggleExpand } = useDraggablePanelContext();\n\n if (!expandable) return null;\n\n const turn = CHEVRON_TURN[placement] + (expand ? 0 : 180);\n const chevX = axis.vertical ? BOW_CY : BOW_CX;\n const chevY = axis.vertical ? BOW_CX : BOW_CY;\n\n return (\n <div\n className={cx(toggleVariants({ placement }), className)}\n style={{ opacity: expand ? undefined : showHandleWhenCollapsed ? 1 : 0, ...style }}\n {...rest}\n >\n <button\n aria-label={expand ? 'Collapse panel' : 'Expand panel'}\n type=\"button\"\n onClick={toggleExpand}\n >\n <svg\n fill=\"none\"\n height={axis.vertical ? BOW_W : BOW_H}\n viewBox={`0 0 ${axis.vertical ? BOW_H : BOW_W} ${axis.vertical ? BOW_W : BOW_H}`}\n width={axis.vertical ? BOW_H : BOW_W}\n >\n {BOW_PATHS[axis.vertical ? 'horizontalSeam' : 'verticalSeam'].map((d) => (\n <path d={d} data-bow=\"\" key={d} strokeLinecap=\"round\" strokeWidth={BOW.stroke} />\n ))}\n <g\n style={{\n rotate: `${turn}deg`,\n transformOrigin: `${chevX}px ${chevY}px`,\n transition: 'rotate 0.25s var(--ant-motion-ease-out, ease)',\n }}\n >\n <path\n d={chevronPath(chevX, chevY)}\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.6}\n />\n </g>\n </svg>\n </button>\n </div>\n );\n },\n);\n\nDraggablePanelToggle.displayName = 'DraggablePanelToggle';\n\nexport type DraggablePanelContainerProps = DivProps;\n\nexport const DraggablePanelContainer = memo<DraggablePanelContainerProps>(\n ({ className, ...rest }) => <div className={cx(styles.container, className)} {...rest} />,\n);\n\nDraggablePanelContainer.displayName = 'DraggablePanelContainer';\n\nexport type DraggablePanelBodyProps = DivProps;\n\nexport const DraggablePanelBody = memo<DraggablePanelBodyProps>(({ className, style, ...rest }) => (\n <div className={cx(styles.body, className)} style={{ flex: 1, ...style }} {...rest} />\n));\n\nDraggablePanelBody.displayName = 'DraggablePanelBody';\n\nexport type DraggablePanelFooterProps = DivProps;\n\nexport const DraggablePanelFooter = memo<DraggablePanelFooterProps>(({ className, ...rest }) => (\n <div className={cx(styles.footer, className)} {...rest} />\n));\n\nDraggablePanelFooter.displayName = 'DraggablePanelFooter';\n\nexport interface DraggablePanelHeaderProps extends Omit<DivProps, 'children' | 'title'> {\n extra?: ReactNode;\n onCollapse?: () => void;\n title?: ReactNode;\n}\n\nexport const DraggablePanelHeader = memo<DraggablePanelHeaderProps>(\n ({ className, extra, onCollapse, title, ...rest }) => {\n const { toggleExpand } = useDraggablePanelContext();\n\n return (\n <div className={cx(styles.header, className)} {...rest}>\n <ActionIcon icon={ChevronLeft} size={'small'} onClick={onCollapse ?? toggleExpand} />\n {title}\n {extra}\n </div>\n );\n },\n);\n\nDraggablePanelHeader.displayName = 'DraggablePanelHeader';\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"atoms.mjs","names":["useControlledState","getHandleSize"],"sources":["../../../src/base-ui/DraggablePanel/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronLeft } from 'lucide-react';\nimport type { HTMLMotionProps, MotionStyle } from 'motion/react';\nimport { motion, useTransform } from 'motion/react';\nimport {\n type CSSProperties,\n memo,\n type ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport type { DivProps } from '@/types';\n\nimport { DraggablePanelContext, useDraggablePanelContext } from './context';\nimport type { Placement } from './core/axes';\nimport { AXES } from './core/axes';\nimport type { PanelControllerOptions } from './core/controller';\nimport { createPanelController } from './core/controller';\nimport { coarsePointer, handleSize as getHandleSize } from './core/env';\nimport { useIsomorphicLayoutEffect, useStore } from './core/internal';\nimport { timing } from './core/transition';\nimport { BOW, handleVariants, rootVariants, styles, toggleVariants } from './style';\n\nconst PAN_THRESHOLD = 3;\n\nconst BOW_CX = 15;\nconst BOW_CY = BOW.half + 8;\nconst BOW_W = BOW_CX * 2;\nconst BOW_H = BOW_CY * 2;\n\nconst bowPath = (direction: 1 | -1, verticalSeam: boolean) => {\n const k = BOW.half * BOW.curve;\n const b = BOW_CX + BOW.bulge * direction;\n const a0 = BOW_CY - BOW.half;\n const a1 = BOW_CY + BOW.half;\n // `a` runs along the seam, `b` across it; a horizontal seam swaps the two.\n const pt = (along: number, across: number) =>\n verticalSeam ? `${along} ${across}` : `${across} ${along}`;\n return [\n `M${pt(BOW_CX, a0)}`,\n `C${pt(BOW_CX, a0 + k)} ${pt(b, BOW_CY - k)} ${pt(b, BOW_CY)}`,\n `C${pt(b, BOW_CY + k)} ${pt(BOW_CX, a1 - k)} ${pt(BOW_CX, a1)}`,\n ].join(' ');\n};\n\nconst BOW_PATHS = {\n horizontalSeam: [bowPath(-1, false), bowPath(1, false)],\n verticalSeam: [bowPath(-1, true), bowPath(1, true)],\n};\n\n/** The chevron points the way a click moves the panel. */\nconst CHEVRON_TURN = { bottom: 270, left: 0, right: 180, top: 90 } as const;\n\nconst chevronPath = (cx: number, cy: number) =>\n `M${cx + 2.4} ${cy - 4.8} L${cx - 2.4} ${cy} L${cx + 2.4} ${cy + 4.8}`;\n\nconst ORIGIN_MAP = {\n bottom: 'center bottom',\n left: 'left center',\n right: 'right center',\n top: 'center top',\n} as const;\n\nconst COLLAPSED_SCALE = 0.97;\n\nconst EDGE_INSET = {\n bottom: 'insetBlockEnd',\n left: 'insetInlineStart',\n right: 'insetInlineEnd',\n top: 'insetBlockStart',\n} as const;\n\nexport interface DraggablePanelRootProps extends Omit<DivProps, 'onDrag'> {\n backgroundColor?: string;\n collapseThreshold?: number;\n defaultExpand?: boolean;\n defaultSize?: number;\n expand?: boolean;\n expandable?: boolean;\n max?: number;\n min?: number;\n mode?: 'fixed' | 'float';\n onExpandChange?: (expand: boolean) => void;\n onSizeChange?: (size: number, delta: number) => void;\n onSizeDragging?: (size: number, delta: number) => void;\n placement?: Placement;\n showBorder?: boolean;\n size?: number;\n}\n\nexport const DraggablePanelRoot = memo<DraggablePanelRootProps>(\n ({\n backgroundColor,\n children,\n className,\n collapseThreshold,\n defaultExpand = true,\n defaultSize,\n expand,\n expandable = true,\n max,\n min = 0,\n mode = 'fixed',\n onExpandChange,\n onSizeChange,\n onSizeDragging,\n placement = 'right',\n showBorder = true,\n size,\n style,\n ...rest\n }) => {\n const axis = AXES[placement];\n const fallbackSize = axis.vertical ? 180 : 280;\n const resolvedDefaultSize = defaultSize ?? fallbackSize;\n\n const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n onChange: onExpandChange,\n value: expand,\n });\n const [innerSize, setInnerSize] = useState(resolvedDefaultSize);\n const currentSize = size ?? innerSize;\n\n const commitSize = useCallback(\n (next: number, delta: number) => {\n if (size === undefined) setInnerSize(next);\n onSizeChange?.(next, delta);\n },\n [onSizeChange, size],\n );\n\n const options: PanelControllerOptions = {\n collapseThreshold,\n defaultSize: resolvedDefaultSize,\n expand: isExpand,\n max,\n min,\n onExpandChange: setIsExpand,\n onSizeChange: commitSize,\n onSizeDragging,\n placement,\n size: currentSize,\n };\n\n const [controller] = useState(() => createPanelController(options));\n const state = useStore(controller.subscribe, () => controller.state);\n const elementRef = useRef<HTMLElement>(null);\n\n useIsomorphicLayoutEffect(() => {\n controller.sync(options);\n });\n\n useIsomorphicLayoutEffect(() => {\n const node = elementRef.current;\n return node ? controller.attach(node) : undefined;\n }, [controller]);\n\n const toggleExpand = useCallback(() => {\n if (expandable) setIsExpand(!isExpand);\n }, [expandable, isExpand, setIsExpand]);\n\n const context = useMemo(\n () => ({\n axis,\n controller,\n expand: isExpand,\n expandable,\n placement,\n showBorder,\n state,\n toggleExpand,\n }),\n [axis, controller, isExpand, expandable, placement, showBorder, state, toggleExpand],\n );\n\n return (\n <DraggablePanelContext value={context}>\n <aside\n className={cx(rootVariants({ mode, placement }), className)}\n data-expand={isExpand}\n data-expandable={expandable}\n data-resizing={state.dragging}\n ref={elementRef}\n style={\n {\n '--draggable-panel-bg': backgroundColor || '',\n 'flexDirection': axis.vertical ? 'column' : 'row',\n ...style,\n } as CSSProperties\n }\n {...rest}\n >\n {children}\n </aside>\n </DraggablePanelContext>\n );\n },\n);\n\nDraggablePanelRoot.displayName = 'DraggablePanelRoot';\n\nexport interface DraggablePanelContentProps extends Omit<DivProps, 'onDrag'> {}\n\nexport const DraggablePanelContent = memo<DraggablePanelContentProps>(\n ({ children, className, style, ...rest }) => {\n const { axis, controller, expand, placement, state } = useDraggablePanelContext();\n const extent = useTransform(controller.motion.size, (value) => Math.max(0, value));\n const clipping = state.dragging || state.folding || controller.target === 0;\n const shrunk = state.collapsing || !expand;\n\n return (\n <motion.div\n inert={!expand}\n style={\n {\n display: 'flex',\n flexDirection: axis.vertical ? 'column' : 'row',\n flexShrink: 0,\n justifyContent: axis.anchorEnd ? 'flex-end' : 'flex-start',\n overflow: clipping ? 'clip' : 'visible',\n [axis.cross]: '100%',\n [axis.extent]: extent,\n } as MotionStyle\n }\n >\n <motion.div\n animate={{ scale: shrunk ? COLLAPSED_SCALE : 1 }}\n className={cx(styles.content, className)}\n transition={timing()}\n style={\n {\n transformOrigin: ORIGIN_MAP[placement],\n [axis.cross]: '100%',\n [axis.extent]: controller.motion.content,\n ...style,\n } as MotionStyle\n }\n {...(rest as HTMLMotionProps<'div'>)}\n >\n {children}\n </motion.div>\n </motion.div>\n );\n },\n);\n\nDraggablePanelContent.displayName = 'DraggablePanelContent';\n\nexport interface DraggablePanelHandleProps extends Omit<DivProps, 'onDrag'> {\n wideArea?: boolean;\n}\n\nexport const DraggablePanelHandle = memo<DraggablePanelHandleProps>(\n ({ className, style, wideArea = true, ...rest }) => {\n const { axis, controller, expand, showBorder, state } = useDraggablePanelContext();\n const size = useStore(coarsePointer.subscribe, () => getHandleSize(wideArea));\n const target = useStore(controller.subscribe, () => controller.target);\n useEffect(() => () => controller.drag.cancel(), [controller]);\n\n const pressedRef = useRef<{ x: number; y: number } | null>(null);\n const draggingRef = useRef(false);\n const draggedRef = useRef(false);\n const { max, min } = controller.bounds();\n\n if (!expand) return null;\n\n return (\n <div\n aria-orientation={axis.ariaOrientation}\n aria-valuemax={Number.isFinite(max) ? max : undefined}\n aria-valuemin={min}\n aria-valuenow={target}\n aria-valuetext={`${target} pixels`}\n className={cx(handleVariants({ edge: axis.edge }), className)}\n data-border={showBorder}\n data-resizing={state.dragging || undefined}\n role=\"separator\"\n tabIndex={0}\n style={\n {\n '--draggable-panel-handle-size': `${size}px`,\n [EDGE_INSET[axis.edge]]: -size / 2,\n ...style,\n } as CSSProperties\n }\n onKeyDown={(event) => controller.resizeByKey(event)}\n onDoubleClick={() => {\n if (!draggedRef.current) controller.reset();\n }}\n onLostPointerCapture={() => {\n if (draggingRef.current) controller.drag.cancel();\n pressedRef.current = null;\n draggingRef.current = false;\n }}\n onPointerCancel={() => {\n controller.drag.cancel();\n pressedRef.current = null;\n draggingRef.current = false;\n }}\n onPointerDown={(event) => {\n draggedRef.current = false;\n pressedRef.current = { x: event.clientX, y: event.clientY };\n // A synthetic pointerdown carries no active pointer, and capturing throws.\n try {\n event.currentTarget.setPointerCapture(event.pointerId);\n } catch {\n /* empty */\n }\n }}\n onPointerMove={(event) => {\n if (!pressedRef.current) return;\n const offset = {\n x: event.clientX - pressedRef.current.x,\n y: event.clientY - pressedRef.current.y,\n };\n if (!draggingRef.current) {\n if (Math.hypot(offset.x, offset.y) < PAN_THRESHOLD) return;\n draggingRef.current = true;\n draggedRef.current = true;\n controller.drag.start();\n }\n controller.drag.move(offset);\n }}\n onPointerUp={() => {\n if (draggingRef.current) controller.drag.end();\n pressedRef.current = null;\n draggingRef.current = false;\n }}\n {...rest}\n />\n );\n },\n);\n\nDraggablePanelHandle.displayName = 'DraggablePanelHandle';\n\nexport interface DraggablePanelToggleProps extends Omit<DivProps, 'onDrag'> {\n showHandleWhenCollapsed?: boolean;\n}\n\nexport const DraggablePanelToggle = memo<DraggablePanelToggleProps>(\n ({ className, showHandleWhenCollapsed, style, ...rest }) => {\n const { axis, expand, expandable, placement, toggleExpand } = useDraggablePanelContext();\n\n if (!expandable) return null;\n\n const turn = CHEVRON_TURN[placement] + (expand ? 0 : 180);\n const chevX = axis.vertical ? BOW_CY : BOW_CX;\n const chevY = axis.vertical ? BOW_CX : BOW_CY;\n\n return (\n <div\n className={cx(toggleVariants({ placement }), className)}\n style={{ opacity: expand ? undefined : showHandleWhenCollapsed ? 1 : 0, ...style }}\n {...rest}\n >\n <button\n aria-label={expand ? 'Collapse panel' : 'Expand panel'}\n type=\"button\"\n onClick={toggleExpand}\n >\n <svg\n fill=\"none\"\n height={axis.vertical ? BOW_W : BOW_H}\n viewBox={`0 0 ${axis.vertical ? BOW_H : BOW_W} ${axis.vertical ? BOW_W : BOW_H}`}\n width={axis.vertical ? BOW_H : BOW_W}\n >\n {BOW_PATHS[axis.vertical ? 'horizontalSeam' : 'verticalSeam'].map((d) => (\n <path d={d} data-bow=\"\" key={d} strokeLinecap=\"round\" strokeWidth={BOW.stroke} />\n ))}\n <g\n style={{\n rotate: `${turn}deg`,\n transformOrigin: `${chevX}px ${chevY}px`,\n transition: 'rotate 0.25s var(--ant-motion-ease-out, ease)',\n }}\n >\n <path\n d={chevronPath(chevX, chevY)}\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.6}\n />\n </g>\n </svg>\n </button>\n </div>\n );\n },\n);\n\nDraggablePanelToggle.displayName = 'DraggablePanelToggle';\n\nexport type DraggablePanelContainerProps = DivProps;\n\nexport const DraggablePanelContainer = memo<DraggablePanelContainerProps>(\n ({ className, ...rest }) => <div className={cx(styles.container, className)} {...rest} />,\n);\n\nDraggablePanelContainer.displayName = 'DraggablePanelContainer';\n\nexport type DraggablePanelBodyProps = DivProps;\n\nexport const DraggablePanelBody = memo<DraggablePanelBodyProps>(({ className, style, ...rest }) => (\n <div className={cx(styles.body, className)} style={{ flex: 1, ...style }} {...rest} />\n));\n\nDraggablePanelBody.displayName = 'DraggablePanelBody';\n\nexport type DraggablePanelFooterProps = DivProps;\n\nexport const DraggablePanelFooter = memo<DraggablePanelFooterProps>(({ className, ...rest }) => (\n <div className={cx(styles.footer, className)} {...rest} />\n));\n\nDraggablePanelFooter.displayName = 'DraggablePanelFooter';\n\nexport interface DraggablePanelHeaderProps extends Omit<DivProps, 'children' | 'title'> {\n extra?: ReactNode;\n onCollapse?: () => void;\n title?: ReactNode;\n}\n\nexport const DraggablePanelHeader = memo<DraggablePanelHeaderProps>(\n ({ className, extra, onCollapse, title, ...rest }) => {\n const { toggleExpand } = useDraggablePanelContext();\n\n return (\n <div className={cx(styles.header, className)} {...rest}>\n <ActionIcon icon={ChevronLeft} size={'small'} onClick={onCollapse ?? toggleExpand} />\n {title}\n {extra}\n </div>\n );\n },\n);\n\nDraggablePanelHeader.displayName = 'DraggablePanelHeader';\n"],"mappings":"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"}
|
|
@@ -24,7 +24,7 @@ declare const styles: {
|
|
|
24
24
|
declare const rootVariants: (props?: ({
|
|
25
25
|
shadow?: boolean | null | undefined;
|
|
26
26
|
size?: "large" | "middle" | "small" | null | undefined;
|
|
27
|
-
variant?: "
|
|
27
|
+
variant?: "borderless" | "filled" | "outlined" | null | undefined;
|
|
28
28
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
29
29
|
//#endregion
|
|
30
30
|
export { rootVariants, styles };
|
|
@@ -42,7 +42,7 @@ declare const variants: (props?: ({
|
|
|
42
42
|
mark?: boolean | null | undefined;
|
|
43
43
|
shiny?: boolean | null | undefined;
|
|
44
44
|
strong?: boolean | null | undefined;
|
|
45
|
-
type?: "danger" | "
|
|
45
|
+
type?: "danger" | "warning" | "success" | "info" | "secondary" | null | undefined;
|
|
46
46
|
underline?: boolean | null | undefined;
|
|
47
47
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
48
48
|
//#endregion
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lobehub/ui",
|
|
3
|
-
"version": "5.42.
|
|
3
|
+
"version": "5.42.1",
|
|
4
4
|
"description": "Lobe UI is an open-source UI component library for building AIGC web apps",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lobehub",
|
|
@@ -148,7 +148,7 @@
|
|
|
148
148
|
"@emotion/is-prop-valid": "^1.4.0",
|
|
149
149
|
"@floating-ui/react": "^0.27.19",
|
|
150
150
|
"@giscus/react": "^3.1.0",
|
|
151
|
-
"@lobehub/streamdown": "^1.
|
|
151
|
+
"@lobehub/streamdown": "^1.3.0",
|
|
152
152
|
"@mdx-js/mdx": "^3.1.1",
|
|
153
153
|
"@mdx-js/react": "^3.1.1",
|
|
154
154
|
"@pierre/diffs": "1.2.12",
|