@cleartrip/ct-design-segment 4.0.0-SNAPSHOT-native-main.21 → 4.0.0-SNAPSHOT-native-main.23

package/src/Segment.native.tsx

@@ -239,13 +239,20 @@ const Segment: React.FC<ISegmentProps> = ({
       <Container
         onLayout={handleTrackContentLayout}
         styleConfig={{
-          root: [
-            segmentStaticStyles.animatedContainer,
-            segmentStaticStyles.animatedContainerBlock,
-            ...animatedContainer,
-          ],
+          root: [segmentStaticStyles.animatedContainer, ...animatedContainer],
         }}
       >
+        <Animated.View
+          pointerEvents='none'
+          style={[
+            segmentStaticStyles.animatedBlock,
+            animatedStyle,
+            dynamicStyles.animatedBlock,
+            ...(variantStyles.animatedBlock?.style ? [variantStyles.animatedBlock.style] : []),
+            segmentThumbShadowNative,
+            ...animatedBlock,
+          ]}
+        />
         {!isEmptyOptions(sanitizedOptions) &&
           sanitizedOptions.map((option, index) => (
             <Container
@@ -270,17 +277,6 @@ const Segment: React.FC<ISegmentProps> = ({
             </Container>
           ))}
       </Container>
-      <Animated.View
-        pointerEvents='none'
-        style={[
-          segmentStaticStyles.animatedBlock,
-          animatedStyle,
-          dynamicStyles.animatedBlock,
-          ...(variantStyles.animatedBlock?.style ? [variantStyles.animatedBlock.style] : []),
-          { ...segmentThumbShadowNative },
-          ...animatedBlock,
-        ]}
-      />
     </Container>
   );
 };

package/src/Segment.tsx

@@ -244,11 +244,7 @@ const Segment: React.FC<ISegmentProps> = ({
     <div className={rootClassName} ref={rootRef}>
       <Container
         styleConfig={{
-          root: [
-            segmentStaticStyles.animatedContainer,
-            segmentStaticStyles.animatedContainerBlock,
-            ...animatedContainer,
-          ],
+          root: [segmentStaticStyles.animatedContainer, ...animatedContainer],
         }}
       >
         {!isEmptyOptions(sanitizedOptions) &&

package/src/style.ts

@@ -12,6 +12,7 @@ export const segmentThumbShadowNative = {
   shadowOffset: { width: 0, height: 0 },
   shadowOpacity: 0.12,
   shadowRadius: 4,
+  elevation: 3,
 } as const;
 
 export const segmentStaticStyles = makeStyles((theme) => {
@@ -19,7 +20,6 @@ export const segmentStaticStyles = makeStyles((theme) => {
   const borderWidth = theme.border.width.sm;
   const trackInnerHeight = Math.max(trackHeight - borderWidth * 2, 0);
   const thumbInset = Math.max(theme.spacing[0.25], 0);
-  const thumbHeight = Math.max(trackInnerHeight - thumbInset * 2, 0);
   const trackRadius = Math.max(0, trackHeight / 2);
   const trackInnerRadius = Math.max(0, trackInnerHeight / 2);
   const thumbRadius = Math.max(0, trackInnerRadius - thumbInset);
@@ -36,6 +36,7 @@ export const segmentStaticStyles = makeStyles((theme) => {
       position: 'relative',
       height: trackHeight,
       alignItems: 'stretch',
+      padding: theme.spacing[1],
     },
     button: {
       backgroundColor: 'transparent',
@@ -48,26 +49,20 @@ export const segmentStaticStyles = makeStyles((theme) => {
       justifyContent: 'center',
       alignItems: 'center',
     },
-    animatedContainerBlock: {
-      position: 'absolute',
-      height: trackHeight,
-      left: thumbInset,
-      right: thumbInset,
-      zIndex: theme.zIndex.modal,
-    },
     animatedBlock: {
       position: 'absolute',
-      height: thumbHeight,
+      top: 0,
+      height: '100%',
       borderRadius: thumbRadius,
       backgroundColor: theme.color.background.neutral,
-      top: thumbInset,
     },
     animatedContainer: {
       flexDirection: 'row',
       alignItems: 'stretch',
       justifyContent: 'flex-start',
-      width: theme.size['100P'],
-      height: trackHeight,
+      position: 'relative',
+      height: '100%',
+      width: '100%',
     },
     tabMeasureCell: {
       flexGrow: 1,