@swan-io/lake 12.2.16 → 12.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "12.2.16",
+  "version": "12.4.0",
   "engines": {
     "node": "^22.12.0"
   },

package/src/components/VirtualizedList.d.ts

@@ -44,8 +44,12 @@ export type VirtualizedListProps<T, ExtraInfo> = {
         isLoading: boolean;
         count: number;
     };
+    onColumnResize?: (values: {
+        id: string;
+        width: number;
+    }) => void;
 };
-export declare const VirtualizedList: <T, ExtraInfo>({ variant, data, stickedToStartColumns, columns, stickedToEndColumns, headerHeight, rowHeight, renderThreshold, onEndReached, onEndReachedThreshold, loading, extraInfo, keyExtractor, marginHorizontal, renderEmptyList, getRowLink, }: VirtualizedListProps<T, ExtraInfo>) => import("react/jsx-runtime").JSX.Element;
+export declare const VirtualizedList: <T, ExtraInfo>({ variant, data, stickedToStartColumns, columns, stickedToEndColumns, headerHeight, rowHeight, renderThreshold, onEndReached, onEndReachedThreshold, loading, extraInfo, keyExtractor, marginHorizontal, renderEmptyList, onColumnResize, getRowLink, }: VirtualizedListProps<T, ExtraInfo>) => import("react/jsx-runtime").JSX.Element;
 type VirtualizedListPlaceholderProps = {
     count: number;
     rowHeight: number;

package/src/components/VirtualizedList.js

@@ -5,6 +5,7 @@ import { StyleSheet, View } from "react-native";
 import { commonStyles } from "../constants/commonStyles";
 import { backgroundColor as backgroundColorVariants, colors, spacings } from "../constants/design";
 import { useHover } from "../hooks/useHover";
+import { Pressable } from "./Pressable";
 import { ScrollView } from "./ScrollView";
 import { Space } from "./Space";
 const HORIZONTAL_ROW_PADDING = 16;
@@ -164,8 +165,108 @@ const styles = StyleSheet.create({
     smallPlaceholderRow: {
         width: "10%",
     },
+    resizeHandleZone: {
+        position: "absolute",
+        cursor: "ew-resize",
+        top: 0,
+        bottom: 0,
+        width: spacings[24],
+    },
+    resizeHandleZoneStart: {
+        right: 0,
+        alignItems: "flex-end",
+    },
+    resizeHandleZoneEnd: {
+        right: "auto",
+        left: 0,
+        alignItems: "flex-start",
+    },
+    resizeHandleLeft: {
+        right: "auto",
+        left: 0,
+    },
+    resizeHandle: {
+        backgroundColor: colors.gray[200],
+        height: "100%",
+        opacity: 0,
+        transitionDuration: "200ms",
+        transitionProperty: "opacity",
+        width: 3,
+    },
+    resizeHandleActive: {
+        opacity: 1,
+    },
 });
-export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns, stickedToEndColumns, headerHeight, rowHeight, renderThreshold = 1000, onEndReached, onEndReachedThreshold = 200, loading, extraInfo, keyExtractor, marginHorizontal, renderEmptyList, getRowLink, }) => {
+const ResizeHandle = ({ id, end = false, width, onResize, scrollViewRef }) => {
+    const ref = useRef(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const widthRef = useRef(width);
+    const onResizeRef = useRef(onResize);
+    useLayoutEffect(() => {
+        widthRef.current = width;
+        onResizeRef.current = onResize;
+    }, [width, onResize]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies(scrollViewRef.current.element.style): _
+    // biome-ignore lint/correctness/useExhaustiveDependencies(scrollViewRef.current?.element): _
+    useEffect(() => {
+        const element = ref.current;
+        if (element != null) {
+            let startX = null;
+            let startWidth = null;
+            const onMouseMove = (event) => {
+                var _a;
+                if (startX != null && startWidth != null) {
+                    (_a = onResizeRef.current) === null || _a === void 0 ? void 0 : _a.call(onResizeRef, {
+                        id,
+                        width: Math.max(24, startWidth + (event.clientX - startX) * (end ? -1 : 1)),
+                    });
+                }
+            };
+            const onMouseUp = (event) => {
+                var _a, _b;
+                if (((_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.element) != null) {
+                    scrollViewRef.current.element.style.webkitUserSelect = "";
+                }
+                if (startX != null && startWidth != null) {
+                    (_b = onResizeRef.current) === null || _b === void 0 ? void 0 : _b.call(onResizeRef, {
+                        id,
+                        width: Math.max(24, startWidth + (event.clientX - startX) * (end ? -1 : 1)),
+                    });
+                }
+                startX = null;
+                document.documentElement.removeEventListener("mousemove", onMouseMove);
+                setIsDragging(false);
+            };
+            const onMouseDown = (event) => {
+                var _a;
+                if (((_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.element) != null) {
+                    scrollViewRef.current.element.style.webkitUserSelect = "none";
+                }
+                startX = event.clientX;
+                startWidth = widthRef.current;
+                document.documentElement.addEventListener("mousemove", onMouseMove);
+                document.documentElement.addEventListener("mouseup", onMouseUp);
+                setIsDragging(true);
+            };
+            element.addEventListener("mousedown", onMouseDown);
+            return () => {
+                var _a;
+                if (((_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.element) != null) {
+                    scrollViewRef.current.element.style.webkitUserSelect = "";
+                }
+                setIsDragging(false);
+                element.removeEventListener("mousedown", onMouseDown);
+                document.documentElement.removeEventListener("mousemove", onMouseMove);
+                document.documentElement.removeEventListener("mouseup", onMouseUp);
+            };
+        }
+    }, [id, end]);
+    return (_jsx(Pressable, { ref: ref, role: "none", style: [
+            styles.resizeHandleZone,
+            end ? styles.resizeHandleZoneEnd : styles.resizeHandleZoneStart,
+        ], children: ({ hovered }) => (_jsx(View, { style: [styles.resizeHandle, (hovered || isDragging) && styles.resizeHandleActive] })) }));
+};
+export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns, stickedToEndColumns, headerHeight, rowHeight, renderThreshold = 1000, onEndReached, onEndReachedThreshold = 200, loading, extraInfo, keyExtractor, marginHorizontal, renderEmptyList, onColumnResize, getRowLink, }) => {
     // Used for unique IDs generation (usefull for header IDs and cells aria-describedBy pointing to them)
     const viewId = useId();
     const scrollViewRef = useRef(null);
@@ -301,7 +402,7 @@ export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns,
                     ], children: columns.map(({ id, width, title, renderTitle }, index) => {
                         const columnId = `${viewId}_${id}`;
                         const paddingLeft = index === 0 ? stickedToStartFirstCellLeftPadding : 0;
-                        return (_jsx(View, { style: [styles.headerCell, { width: width + paddingLeft, paddingLeft }], id: columnId, children: renderTitle({ title, extraInfo, id }) }, columnId));
+                        return (_jsxs(View, { style: [styles.headerCell, { width: width + paddingLeft, paddingLeft }], id: columnId, children: [renderTitle({ title, extraInfo, id }), _jsx(ResizeHandle, { width: width, id: id, onResize: onColumnResize, scrollViewRef: scrollViewRef })] }, columnId));
                     }) })))
                     .toNull(), _jsx(View, { style: [
                         styles.cellsContainer,
@@ -311,11 +412,11 @@ export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns,
                         const columnId = `${viewId}_${id}`;
                         const paddingLeft = index === 0 ? centerFirstCellLeftPadding : 0;
                         const paddingRight = index === columns.length - 1 ? centerLastCellLeftPadding : 0;
-                        return (_jsx(View, { style: [
+                        return (_jsxs(View, { style: [
                                 styles.headerCell,
                                 grow && styles.grow,
                                 { width: width + paddingLeft + paddingRight, paddingLeft, paddingRight },
-                            ], id: columnId, children: renderTitle({ title, extraInfo, id }) }, columnId));
+                            ], id: columnId, children: [renderTitle({ title, extraInfo, id }), _jsx(ResizeHandle, { width: width, id: id, onResize: onColumnResize, scrollViewRef: scrollViewRef })] }, columnId));
                     }) }), Option.fromNullable(stickedToEndColumns)
                     .map(columns => (_jsx(View, { style: [
                         styles.cellsContainer,
@@ -325,7 +426,7 @@ export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns,
                     ], children: columns.map(({ id, width, title, renderTitle }, index) => {
                         const columnId = `${viewId}_${id}`;
                         const paddingRight = index === columns.length - 1 ? stickedToEndLastCellRightPadding : 0;
-                        return (_jsx(View, { style: [styles.headerCell, { width: width + paddingRight, paddingRight }], id: columnId, children: renderTitle({ title, extraInfo, id }) }, columnId));
+                        return (_jsxs(View, { style: [styles.headerCell, { width: width + paddingRight, paddingRight }], id: columnId, children: [renderTitle({ title, extraInfo, id }), _jsx(ResizeHandle, { end: true, width: width, id: id, onResize: onColumnResize, scrollViewRef: scrollViewRef })] }, columnId));
                     }) })))
                     .toNull()] }));
     }, [
@@ -344,6 +445,7 @@ export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns,
         centerFirstCellLeftPadding,
         centerLastCellLeftPadding,
         stickedToEndLastCellRightPadding,
+        onColumnResize,
     ]);
     const startColumnShadow = useMemo(() => {
         if (stickedToStartColumnsWidth === 0) {