@onekeyfe/react-native-segment-slider 6.7.0-alpha.396 → 6.7.0-alpha.397

package/README.md

@@ -2,6 +2,8 @@
 
 SegmentSlider view for React Native
 
+See [the behavioral contract](docs/SPEC.md) for platform behavior and acceptance.
+
 ## Installation
 
 ```sh

package/android/src/main/java/com/margelo/nitro/segmentslider/HybridSegmentSlider.kt

@@ -13,18 +13,20 @@ import com.facebook.react.uimanager.ThemedReactContext
 /**
  * Native segmented slider. Draws the track, fill bar, segment marks, thumb and
  * value bubble in [View.onDraw] and handles the drag in [View.onTouchEvent], so
- * a drag never crosses the JS bridge per frame. Mirrors the web variant
- * (`composite/SegmentSlider/index.tsx`) pixel-for-pixel.
+ * a drag never crosses the JS bridge per frame. Follows the web variant's
+ * semantics, with extra endpoint space for the enlarged drag thumb.
  */
 @DoNotStrip
 class HybridSegmentSlider(val context: ThemedReactContext) : HybridSegmentSliderSpec() {
 
   private val density = context.resources.displayMetrics.density
 
-  // Geometry (dp), identical to the web constants.
+  // Geometry (dp).
   private val thumbSizePx = 16f * density
+  private val activeThumbScale = 1.15f
   private val markSizePx = 10f * density
-  private val insetPx = thumbSizePx / 2f
+  // Keep the enlarged thumb and node halo inside the horizontal view bounds.
+  private val insetPx = 12f * density
   private val haloRingPx = 4f * density // translucent halo width beyond each mark
 
   // Paints.
@@ -95,7 +97,7 @@ class HybridSegmentSlider(val context: ThemedReactContext) : HybridSegmentSlider
           touchStartX = event.x
           lastTouchX = event.x
           onSlideStart?.invoke()
-          animateThumbScale(1.15f)
+          animateThumbScale(activeThumbScale)
           // Tap-snap mode: defer the value commit until we know this is a tap or
           // a drag, so a tap never jumps to the raw touch point first.
           if (!snapTapsActive) commitDragValue(valueFromX(event.x))
@@ -255,7 +257,7 @@ class HybridSegmentSlider(val context: ThemedReactContext) : HybridSegmentSlider
   }
 
   // MARK: - Geometry helpers
-  private val trackWidth: Float get() = (view.width - thumbSizePx).coerceAtLeast(0f)
+  private val trackWidth: Float get() = (view.width - insetPx * 2f).coerceAtLeast(0f)
   private val rangeSafe: Double get() = (max - min).let { if (it == 0.0) 1.0 else it }
   private val markCount: Int get() = if (segments >= 1) segments.toInt() + 1 else 0
 
@@ -418,12 +420,12 @@ class HybridSegmentSlider(val context: ThemedReactContext) : HybridSegmentSlider
       val padH = 8f * density
       val bw = textW + padH * 2
       val bh = 20f * density
-      val left = thumbX - bw / 2f
+      val left = (thumbX - bw / 2f).coerceIn(0f, (w - bw).coerceAtLeast(0f))
       val top = trackTop - 8f * density - bh
       rect.set(left, top, left + bw, top + bh)
       canvas.drawRoundRect(rect, 4f * density, 4f * density, bubblePaint)
       val baseline = top + bh / 2f - (bubbleTextPaint.descent() + bubbleTextPaint.ascent()) / 2f
-      canvas.drawText(text, thumbX, baseline, bubbleTextPaint)
+      canvas.drawText(text, left + bw / 2f, baseline, bubbleTextPaint)
     }
   }
 

package/ios/HybridSegmentSlider.swift

@@ -3,15 +3,17 @@ import UIKit
 
 /// Native segmented slider. Renders the track, fill bar, segment marks, thumb
 /// and value bubble as CALayers and handles the drag gesture itself, so a drag
-/// never crosses the JS bridge per frame. Mirrors the web variant
-/// (`composite/SegmentSlider/index.tsx`) pixel-for-pixel.
+/// never crosses the JS bridge per frame. Follows the web variant's semantics,
+/// with extra endpoint space for the enlarged iOS drag thumb.
 final class HybridSegmentSlider: HybridSegmentSliderSpec {
 
-  // MARK: - Geometry (points), identical to the web constants
+  // MARK: - Geometry (points)
   private let thumbSize: CGFloat = 16
+  private let activeThumbScale: CGFloat = 1.15
   private let markSize: CGFloat = 10
   private let haloRing: CGFloat = 4 // translucent halo width beyond each mark
-  private var inset: CGFloat { thumbSize / 2 }
+  // Include the enlarged thumb radius and room for its shadow at either end.
+  private var inset: CGFloat { ceil(thumbSize * activeThumbScale / 2) + 2 }
 
   // MARK: - HybridView
   var view: UIView = SegmentSliderUIView()
@@ -173,7 +175,7 @@ final class HybridSegmentSlider: HybridSegmentSliderSpec {
   }
 
   // MARK: - Geometry helpers
-  private var trackWidth: CGFloat { Swift.max(view.bounds.width - thumbSize, 0) }
+  private var trackWidth: CGFloat { Swift.max(view.bounds.width - inset * 2, 0) }
   private var trackLeft: CGFloat { inset }
   private var range: Double { let r = max - min; return r == 0 ? 1 : r }
   private var markCount: Int { segments >= 1 ? Int(segments) + 1 : 0 }
@@ -317,7 +319,9 @@ final class HybridSegmentSlider: HybridSegmentSliderSpec {
       let bw = ceil(textW) + padH * 2
       let bh: CGFloat = 20
       let by = trackTop - 8 - bh
-      bubbleLayer.frame = CGRect(x: thumbX - bw / 2, y: by, width: bw, height: bh)
+      // Keep endpoint bubbles inside horizontally clipping ancestors.
+      let bx = Swift.max(bounds.minX, Swift.min(thumbX - bw / 2, bounds.maxX - bw))
+      bubbleLayer.frame = CGRect(x: bx, y: by, width: bw, height: bh)
       bubbleTextLayer.frame = CGRect(x: 0, y: 2, width: bw, height: 16)
     }
 
@@ -385,7 +389,7 @@ final class HybridSegmentSlider: HybridSegmentSliderSpec {
     touchStartTime = CACurrentMediaTime()
     haptic.prepare()
     onSlideStart?()
-    animateThumbScale(1.15)
+    animateThumbScale(activeThumbScale)
     setBubbleVisible(true)
     // Tap-snap mode: defer any value change until we know this is a tap or a
     // drag, so a tap never jumps to the raw touch point first.

package/lib/typescript/src/SegmentSlider.nitro.d.ts

@@ -8,12 +8,13 @@ import type { HybridView, HybridViewMethods, HybridViewProps } from 'react-nativ
  * (`packages/components/src/composite/SegmentSlider/index.tsx`) which avoids
  * React state per frame by mutating the DOM imperatively.
  *
- * Geometry contract (points), matching the web layout 1:1:
+ * Geometry contract (points):
  *   THUMB_SIZE = 16, MARK_SIZE = 10, hit/container height = 24
- *   track is inset by THUMB_SIZE/2 on each end → usable width W' = W - 16
+ *   END_INSET = 12 on iOS and Android (room for the enlarged thumb and halo)
+ *   usable track width W' = max(W - 2 * END_INSET, 0)
  *   pct        = (clamp(value,min,max) - min) / (max - min)
- *   thumb x    = 8 + pct * W'
- *   mark i x   = 8 + (i / segments) * W'   (i in 0..segments)
+ *   thumb x    = END_INSET + pct * W'
+ *   mark i x   = END_INSET + (i / segments) * W'   (i in 0..segments)
  *
  * Colors are resolved from the Tamagui theme in the JS wrapper and passed in as
  * hex / rgba() strings so the native side never depends on the theme system.

package/lib/typescript/src/SegmentSlider.nitro.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentSlider.nitro.d.ts","sourceRoot":"","sources":["../../../src/SegmentSlider.nitro.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,UAAU,EACV,iBAAiB,EACjB,eAAe,EAChB,MAAM,4BAA4B,CAAC;AAEpC;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACzD;;;;;;;;OAQG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,GAAG,EAAE,MAAM,CAAC;IACZ,qBAAqB;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,4EAA4E;IAC5E,QAAQ,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,YAAY,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,QAAQ,EAAE,OAAO,CAAC;IAClB,6EAA6E;IAC7E,UAAU,EAAE,OAAO,CAAC;IACpB,4EAA4E;IAC5E,YAAY,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,gBAAgB,EAAE,OAAO,CAAC;IAG1B,mDAAmD;IACnD,SAAS,EAAE,MAAM,CAAC;IAClB,iDAAiD;IACjD,UAAU,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,gBAAgB,EAAE,MAAM,CAAC;IACzB,6DAA6D;IAC7D,eAAe,EAAE,MAAM,CAAC;IACxB,+CAA+C;IAC/C,iBAAiB,EAAE,MAAM,CAAC;IAC1B,uDAAuD;IACvD,eAAe,EAAE,MAAM,CAAC;IACxB,qDAAqD;IACrD,WAAW,EAAE,MAAM,CAAC;IACpB,wCAAwC;IACxC,eAAe,EAAE,MAAM,CAAC;IAExB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,uCAAuC;IACvC,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,MAAM,WAAW,oBAAqB,SAAQ,iBAAiB;IAC7D;;;;;;OAMG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;AAED,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,kBAAkB,EAAE,oBAAoB,CAAC,CAAC"}
+{"version":3,"file":"SegmentSlider.nitro.d.ts","sourceRoot":"","sources":["../../../src/SegmentSlider.nitro.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,UAAU,EACV,iBAAiB,EACjB,eAAe,EAChB,MAAM,4BAA4B,CAAC;AAEpC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACzD;;;;;;;;OAQG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,GAAG,EAAE,MAAM,CAAC;IACZ,qBAAqB;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,4EAA4E;IAC5E,QAAQ,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,YAAY,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,QAAQ,EAAE,OAAO,CAAC;IAClB,6EAA6E;IAC7E,UAAU,EAAE,OAAO,CAAC;IACpB,4EAA4E;IAC5E,YAAY,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,gBAAgB,EAAE,OAAO,CAAC;IAG1B,mDAAmD;IACnD,SAAS,EAAE,MAAM,CAAC;IAClB,iDAAiD;IACjD,UAAU,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,gBAAgB,EAAE,MAAM,CAAC;IACzB,6DAA6D;IAC7D,eAAe,EAAE,MAAM,CAAC;IACxB,+CAA+C;IAC/C,iBAAiB,EAAE,MAAM,CAAC;IAC1B,uDAAuD;IACvD,eAAe,EAAE,MAAM,CAAC;IACxB,qDAAqD;IACrD,WAAW,EAAE,MAAM,CAAC;IACpB,wCAAwC;IACxC,eAAe,EAAE,MAAM,CAAC;IAExB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,uCAAuC;IACvC,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,MAAM,WAAW,oBAAqB,SAAQ,iBAAiB;IAC7D;;;;;;OAMG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;AAED,MAAM,MAAM,aAAa,GAAG,UAAU,CACpC,kBAAkB,EAClB,oBAAoB,CACrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-segment-slider",
-  "version": "6.7.0-alpha.396",
+  "version": "6.7.0-alpha.397",
   "description": "react-native-segment-slider",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/SegmentSlider.nitro.ts

@@ -13,12 +13,13 @@ import type {
  * (`packages/components/src/composite/SegmentSlider/index.tsx`) which avoids
  * React state per frame by mutating the DOM imperatively.
  *
- * Geometry contract (points), matching the web layout 1:1:
+ * Geometry contract (points):
  *   THUMB_SIZE = 16, MARK_SIZE = 10, hit/container height = 24
- *   track is inset by THUMB_SIZE/2 on each end → usable width W' = W - 16
+ *   END_INSET = 12 on iOS and Android (room for the enlarged thumb and halo)
+ *   usable track width W' = max(W - 2 * END_INSET, 0)
  *   pct        = (clamp(value,min,max) - min) / (max - min)
- *   thumb x    = 8 + pct * W'
- *   mark i x   = 8 + (i / segments) * W'   (i in 0..segments)
+ *   thumb x    = END_INSET + pct * W'
+ *   mark i x   = END_INSET + (i / segments) * W'   (i in 0..segments)
  *
  * Colors are resolved from the Tamagui theme in the JS wrapper and passed in as
  * hex / rgba() strings so the native side never depends on the theme system.
@@ -95,4 +96,7 @@ export interface SegmentSliderMethods extends HybridViewMethods {
   setValue(value: number): void;
 }
 
-export type SegmentSlider = HybridView<SegmentSliderProps, SegmentSliderMethods>;
+export type SegmentSlider = HybridView<
+  SegmentSliderProps,
+  SegmentSliderMethods
+>;