feat: support border-radius on cursor

OneKeyHQ · Oct 11, 2024 · 5cc676c · 5cc676c
1 parent 750a406
commit 5cc676c
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 19 deletions.
diff --git a/src/PageContentView.tsx b/src/PageContentView.tsx
@@ -64,7 +64,7 @@ export default class PageContentView extends Component<PageContentViewProps> {
       },
     ],
     {
-      useNativeDriver: true,
+      useNativeDriver: false,
     }
   );
   private scrollView: RefObject<ContentFlatList> | null = React.createRef();
@@ -91,7 +91,11 @@ export default class PageContentView extends Component<PageContentViewProps> {
       },
     } = event;
     const reloadWidth = PixelRatio.roundToNearestPixel(width);
-    if (reloadWidth !== this.state.scrollViewWidth && reloadWidth > 0) {
+    if (
+      reloadWidth !== this.state.scrollViewWidth &&
+      reloadWidth > 0 &&
+      (this?.props?.data?.length ?? 0) > 0
+    ) {
       this._scrollViewWidthValue.setValue(reloadWidth);
       this.setState({ scrollViewWidth: reloadWidth }, () => {
         this?.scrollView?.current?.reloadScrollContainerWidth?.(reloadWidth);

diff --git a/src/PageHeaderCursor.tsx b/src/PageHeaderCursor.tsx
@@ -78,7 +78,7 @@ export default class PageHeaderCursor extends Component<PageHeaderCursorProps> {
                 const width = item.width - left - right;
                 return isWidth
                   ? (width * Number(percentWidth ?? 100)) / 100
-                  : item.x + width / 2.0 + left;
+                  : item.x + left;
               }
             } else {
               return 0;
@@ -113,11 +113,11 @@ export default class PageHeaderCursor extends Component<PageHeaderCursorProps> {
   override render() {
     const fixCursorWidth = this._findFixCursorWidth();
     const translateX = this._reloadPageIndexValue(false);
-    const scaleX = this._reloadPageIndexValue(true);
+    const widthX = this._reloadPageIndexValue(true);
 
     const containerStyle: Animated.WithAnimatedObject<any> = {
-      transform: [{ translateX }, fixCursorWidth ? { scale: 1 } : { scaleX }],
-      width: fixCursorWidth ?? 1,
+      transform: [{ translateX }],
+      width: fixCursorWidth ?? widthX,
       position: 'absolute',
       top: 0,
       bottom: 0,
@@ -127,7 +127,7 @@ export default class PageHeaderCursor extends Component<PageHeaderCursorProps> {
 
     const contentStyle = [
       this.props.cursorStyle,
-      { left: null, right: null, width: fixCursorWidth ?? 1 },
+      { left: null, right: null, width: fixCursorWidth ?? widthX },
     ];
 
     return (
@@ -149,7 +149,7 @@ export default class PageHeaderCursor extends Component<PageHeaderCursorProps> {
           {this.props.renderCursor ? (
             this.props.renderCursor()
           ) : (
-            <View style={contentStyle}></View>
+            <Animated.View style={contentStyle}></Animated.View>
           )}
         </Animated.View>
       </View>

diff --git a/src/PageHeaderView.tsx b/src/PageHeaderView.tsx
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import type { RefObject } from 'react';
 import {
   View,
-  StyleSheet,
   Pressable,
   ScrollView,
   Animated,
@@ -34,24 +33,28 @@ interface PageHeaderViewProps extends ScrollViewProps {
   scrollContainerStyle?: object;
   contentContainerStyle?: object;
   containerStyle?: object;
+  itemContainerSelectedStyle?: object;
 }
 
 export default class PageHeaderView extends Component<PageHeaderViewProps> {
   private scrollPageIndex = this.props.initialScrollIndex ?? 0;
-  private scrollPageIndexValue = new Animated.Value(this.scrollPageIndex);
+  private scrollPageIndexValue = new Animated.Value(this.scrollPageIndex, {
+    useNativeDriver: false,
+  });
   private nextScrollPageIndex = -1;
   private shouldHandlerAnimationValue = true;
   private itemConfigList = this.props.data.map((_: any) => ({
     _animtedEnabledValue: new Animated.Value(1),
     _containerRef: React.createRef<View>(),
   }));
-  private itemContainerStyle = () =>
+  private itemContainerStyle = (index?: number) =>
     ({
       height: '100%',
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'center',
       ...this.props.itemContainerStyle,
+      ...(this.props.itemContainerSelectedStyle)
     } as { flex?: number } & object);
   private itemTitleNormalStyle: () => {
     fontSize: number;
@@ -80,6 +83,7 @@ export default class PageHeaderView extends Component<PageHeaderViewProps> {
   });
   private scrollView: RefObject<ScrollView> = React.createRef();
   private cursor: RefObject<PageHeaderCursor> = React.createRef();
+  private scrollViewWidth = 0;
 
   static defaultProps: PageHeaderViewProps = {
     data: [],
@@ -128,7 +132,7 @@ export default class PageHeaderView extends Component<PageHeaderViewProps> {
         const itemLayout = this?.cursor?.current?.state
           ?.itemContainerLayoutList?.[newPageIndex] ?? { x: 0, width: 0 };
         this?.scrollView?.current?.scrollTo({
-          x: itemLayout.x - itemLayout.width,
+          x: itemLayout.x + itemLayout.width / 2.0 - this.scrollViewWidth / 2.0,
         });
         this.scrollPageIndex = newPageIndex;
       }
@@ -217,7 +221,7 @@ export default class PageHeaderView extends Component<PageHeaderViewProps> {
         this.scrollPageIndexValue,
         index,
         this.props.selectedPageIndexDuration,
-        true
+        false
       );
     }
     this.props.onSelectedPageIndex?.(index);
@@ -232,7 +236,7 @@ export default class PageHeaderView extends Component<PageHeaderViewProps> {
       <Pressable
         key={index}
         ref={this?.itemConfigList?.[index]?._containerRef}
-        style={this.itemContainerStyle()}
+        style={this.itemContainerStyle(index)}
         onPress={() => this._itemDidTouch(item, index)}
       >
         {content}
@@ -265,8 +269,9 @@ export default class PageHeaderView extends Component<PageHeaderViewProps> {
   }
 
   override render() {
+    const { style, ...restProps } = this.props;
     return (
-      <View style={this.props.style}>
+      <View style={style}>
         <ScrollView
           onContentSizeChange={(width, height) => {
             this?.cursor?.current?.reloadItemListContainerLayout(
@@ -275,16 +280,18 @@ export default class PageHeaderView extends Component<PageHeaderViewProps> {
             );
             this?.props?.onContentSizeChange?.(width, height);
           }}
-          {...this.props}
+          onLayout={(event) => {
+            this.scrollViewWidth = event.nativeEvent.layout.width;
+            this?.props?.onLayout?.(event);
+          }}
+          style={this.props.containerStyle}
+          {...restProps}
           contentContainerStyle={[
             { width: this.itemContainerStyle()?.flex ? '100%' : null },
             this.props.scrollContainerStyle,
           ]}
           ref={this.scrollView}
         >
-          <View
-            style={[StyleSheet.absoluteFill, this.props.containerStyle]}
-          ></View>
           <View
             style={[
               { minWidth: '100%', flexDirection: 'row', alignItems: 'center' },