@doubao-apps/taro-runtime 0.0.27 → 0.0.28

package/dist/components/ScrollView/index.d.ts

@@ -1,7 +1,9 @@
-import type { ReactNode } from '@byted-doubao-apps/framework';
-type ScrollViewProps = {
-    children?: ReactNode;
-} & Record<string, unknown>;
-export declare function ScrollView({ children, ...rest }: ScrollViewProps): any;
+import type { NodesRef } from '@lynx-js/types';
+import type { ScrollViewProps as TaroScrollViewProps } from '@tarojs/components';
+import { type ScrollViewEvent } from './map.js';
+type NativeScrollViewEventProps = {
+    onContentSizeChanged?: (event: ScrollViewEvent) => void;
+};
+export declare const ScrollView: import("react").ForwardRefExoticComponent<Omit<TaroScrollViewProps & NativeScrollViewEventProps, "ref"> & import("react").RefAttributes<NodesRef>>;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ScrollView/index.jsx

@@ -1,4 +1,67 @@
-export function ScrollView({ children, ...rest }) {
-    return <scroll-view {...rest}>{children}</scroll-view>;
+import { forwardRef, useCallback, useEffect, useRef } from '@byted-doubao-apps/framework';
+import { Text } from '../Text/index.jsx';
+import { mapScrollViewProps, toScrollViewEvent } from './map.js';
+export const ScrollView = forwardRef(ScrollViewImpl);
+function ScrollViewImpl(props, ref) {
+    const { children, onScrollToUpper, onScrollToLower, onScroll, onScrollEnd, onContentSizeChanged, ...nonEventProps } = props;
+    const { mapped, scrollViewId, scrollOffset, scrollWithAnimation } = mapScrollViewProps(nonEventProps);
+    const scrollViewRef = useRef(null);
+    const previousScrollOffsetRef = useRef(scrollOffset);
+    const assignRef = useCallback((instance) => {
+        scrollViewRef.current = instance;
+        assignForwardedRef(ref, instance);
+    }, [ref]);
+    useEffect(() => {
+        if (scrollOffset === undefined || previousScrollOffsetRef.current === scrollOffset) {
+            previousScrollOffsetRef.current = scrollOffset;
+            return;
+        }
+        previousScrollOffsetRef.current = scrollOffset;
+        scrollViewRef.current
+            ?.invoke({
+            method: 'scrollTo',
+            params: {
+                offset: scrollOffset,
+                smooth: scrollWithAnimation
+            }
+        })
+            .exec();
+    }, [scrollOffset, scrollWithAnimation]);
+    const handleScrollToUpper = useCallback((event) => {
+        onScrollToUpper?.(toScrollViewEvent(event, 'scrolltoupper', scrollViewId));
+    }, [onScrollToUpper, scrollViewId]);
+    const handleScrollToLower = useCallback((event) => {
+        onScrollToLower?.(toScrollViewEvent(event, 'scrolltolower', scrollViewId));
+    }, [onScrollToLower, scrollViewId]);
+    const handleScroll = useCallback((event) => {
+        onScroll?.(toScrollViewEvent(event, 'scroll', scrollViewId));
+    }, [onScroll, scrollViewId]);
+    const handleScrollEnd = useCallback((event) => {
+        onScrollEnd?.(toScrollViewEvent(event, 'scrollend', scrollViewId));
+    }, [onScrollEnd, scrollViewId]);
+    const handleContentSizeChanged = useCallback((event) => {
+        onContentSizeChanged?.(toScrollViewEvent(event, 'contentsizechanged', scrollViewId));
+    }, [onContentSizeChanged, scrollViewId]);
+    return (<scroll-view {...mapped} ref={assignRef} {...(onScrollToUpper ? { onScrollToUpper: handleScrollToUpper } : {})} {...(onScrollToLower ? { onScrollToLower: handleScrollToLower } : {})} {...(onScroll ? { onScroll: handleScroll } : {})} {...(onScrollEnd ? { onScrollEnd: handleScrollEnd } : {})} {...(onContentSizeChanged ? { onContentSizeChanged: handleContentSizeChanged } : {})}>
+      {wrapTextNode(children)}
+    </scroll-view>);
+}
+function wrapTextNode(child) {
+    if (typeof child === 'string' || typeof child === 'number') {
+        return <Text>{child}</Text>;
+    }
+    if (Array.isArray(child)) {
+        return child.map((item) => wrapTextNode(item));
+    }
+    return child;
+}
+function assignForwardedRef(ref, value) {
+    if (typeof ref === 'function') {
+        ref(value);
+        return;
+    }
+    if (ref) {
+        ref.current = value;
+    }
 }
 //# sourceMappingURL=index.jsx.map

package/dist/components/ScrollView/map.d.ts

@@ -0,0 +1,41 @@
+import type { ContentSizeChangedEvent as LynxContentSizeChangedEvent, ScrollEndEvent as LynxScrollEndEvent, ScrollEvent as LynxScrollEvent, ScrollToLowerEvent as LynxScrollToLowerEvent, ScrollToUpperEvent as LynxScrollToUpperEvent } from '@lynx-js/types';
+import type { ScrollViewProps as TaroScrollViewProps } from '@tarojs/components';
+type ScrollOrientation = 'vertical' | 'horizontal';
+type LynxScrollViewEvent = LynxScrollToUpperEvent | LynxScrollToLowerEvent | LynxScrollEvent | LynxScrollEndEvent | LynxContentSizeChangedEvent;
+export type MappableTaroScrollViewProps = Omit<TaroScrollViewProps, 'children' | 'onScrollToUpper' | 'onScrollToLower' | 'onScroll' | 'onScrollEnd'> & {
+    enableScroll?: boolean;
+    scrollOrientation?: ScrollOrientation;
+    scrollBarEnable?: boolean;
+    initialScrollOffset?: number;
+    initialScrollToIndex?: number;
+    onContentSizeChanged?: (event: ScrollViewEvent) => void;
+};
+export type ScrollViewEventDetail = TaroScrollViewProps.onScrollDetail;
+export type ScrollViewEvent = {
+    type: string;
+    timeStamp: number;
+    target: {
+        id: string;
+        tagName: string;
+        dataset: Record<string, unknown>;
+    };
+    currentTarget: {
+        id: string;
+        tagName: string;
+        dataset: Record<string, unknown>;
+    };
+    detail: ScrollViewEventDetail;
+    preventDefault: () => void;
+    stopPropagation: () => void;
+};
+type MapScrollViewPropsResult = {
+    mapped: Record<string, unknown>;
+    scrollViewId: string;
+    scrollOffset: number | undefined;
+    scrollWithAnimation: boolean;
+};
+export declare function mapScrollViewProps(props: MappableTaroScrollViewProps): MapScrollViewPropsResult;
+export declare function toScrollViewEvent(event: LynxScrollViewEvent, type: string, scrollViewId: string): ScrollViewEvent;
+export declare function toScrollViewEventDetail(event: LynxScrollViewEvent): ScrollViewEventDetail;
+export {};
+//# sourceMappingURL=map.d.ts.map

package/dist/components/ScrollView/map.js

@@ -0,0 +1,59 @@
+export function mapScrollViewProps(props) {
+    const { id, className, style, scrollX, scrollY, scrollTop, scrollLeft, scrollWithAnimation, scrollOrientation, enableScroll, scrollBarEnable, showScrollbar, upperThreshold, lowerThreshold, bounces, initialScrollOffset, initialScrollToIndex } = props;
+    const orientation = scrollOrientation ?? (scrollX ? 'horizontal' : 'vertical');
+    const scrollOffset = orientation === 'horizontal' ? scrollLeft : scrollTop;
+    const resolvedInitialScrollOffset = initialScrollOffset ?? scrollOffset;
+    const mapped = {
+        id,
+        className,
+        style,
+        bounces,
+        upperThreshold,
+        lowerThreshold,
+        scrollBarEnable: scrollBarEnable ?? showScrollbar,
+        initialScrollToIndex,
+        scrollOrientation: orientation,
+        enableScroll: enableScroll ?? Boolean(scrollX || scrollY),
+        initialScrollOffset: resolvedInitialScrollOffset
+    };
+    return {
+        mapped,
+        scrollViewId: String(mapped.id ?? ''),
+        scrollOffset,
+        scrollWithAnimation: scrollWithAnimation === true
+    };
+}
+export function toScrollViewEvent(event, type, scrollViewId) {
+    const eventLike = event;
+    return {
+        type,
+        timeStamp: eventLike.timeStamp ?? event.timestamp ?? Date.now(),
+        target: toEventTarget(event.target, scrollViewId),
+        currentTarget: toEventTarget(event.currentTarget, scrollViewId),
+        detail: toScrollViewEventDetail(event),
+        preventDefault: eventLike.preventDefault ?? noop,
+        stopPropagation: eventLike.stopPropagation ?? noop
+    };
+}
+export function toScrollViewEventDetail(event) {
+    const detail = event.detail ?? {};
+    const isDrag = detail.isDrag;
+    return {
+        scrollLeft: detail.scrollLeft ?? 0,
+        scrollTop: detail.scrollTop ?? 0,
+        scrollHeight: detail.scrollHeight ?? 0,
+        scrollWidth: detail.scrollWidth ?? 0,
+        deltaX: detail.deltaX ?? 0,
+        deltaY: detail.deltaY ?? 0,
+        ...(typeof isDrag === 'boolean' ? { isDrag } : {})
+    };
+}
+function toEventTarget(target, fallbackId) {
+    return {
+        id: target.id || fallbackId,
+        tagName: 'scroll-view',
+        dataset: target.dataset ?? {}
+    };
+}
+function noop() { }
+//# sourceMappingURL=map.js.map

package/package.json

@@ -37,7 +37,7 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "version": "0.0.27",
+  "version": "0.0.28",
   "scripts": {
     "dev": "npm run build -- -w",
     "build": "rimraf dist bundle && tsc -p tsconfig.build.json",