@newtonedev/components 0.1.10 → 0.1.12

package/dist/index.js

@@ -2493,6 +2493,7 @@ function Slider({
   const trackRef = React14.useRef(null);
   const trackWidth = React14.useRef(0);
   const trackPageX = React14.useRef(0);
+  const [layoutWidth, setLayoutWidth] = React14.useState(0);
   const onValueChangeRef = React14.useRef(onValueChange);
   const minRef = React14.useRef(min);
   const maxRef = React14.useRef(max);
@@ -2533,9 +2534,21 @@ function Slider({
     })
   ).current;
   const ratio = max > min ? (value - min) / (max - min) : 0;
-  const usableWidth = Math.max(0, trackWidth.current - THUMB_SIZE2);
+  const usableWidth = Math.max(0, layoutWidth - THUMB_SIZE2);
   const thumbLeft = ratio * usableWidth;
-  const fillWidth = thumbLeft + THUMB_SIZE2 / 2;
+  const isCenterOrigin = min < 0 && max > 0;
+  let fillLeft;
+  let fillWidth;
+  if (isCenterOrigin) {
+    const centerRatio = (0 - min) / (max - min);
+    const centerX = centerRatio * usableWidth + THUMB_SIZE2 / 2;
+    const thumbCenterX = thumbLeft + THUMB_SIZE2 / 2;
+    fillLeft = Math.min(centerX, thumbCenterX);
+    fillWidth = Math.abs(thumbCenterX - centerX);
+  } else {
+    fillLeft = 0;
+    fillWidth = thumbLeft + THUMB_SIZE2 / 2;
+  }
   const handleValueTextSubmit = React14.useCallback(
     (text) => {
       const raw = Number(text);
@@ -2568,7 +2581,9 @@ function Slider({
       ref: trackRef,
       style: styles.trackContainer,
       onLayout: (e) => {
-        trackWidth.current = e.nativeEvent.layout.width;
+        const w = e.nativeEvent.layout.width;
+        trackWidth.current = w;
+        setLayoutWidth(w);
         trackRef.current?.measure((_x, _y, _w, _h, pageX) => {
           if (pageX != null) trackPageX.current = pageX;
         });
@@ -2576,7 +2591,7 @@ function Slider({
       ...panResponder.panHandlers
     },
     /* @__PURE__ */ React14.createElement(View, { style: styles.trackRail }),
-    /* @__PURE__ */ React14.createElement(View, { style: [styles.trackFill, { width: fillWidth }] }),
+    /* @__PURE__ */ React14.createElement(View, { style: [styles.trackFill, { left: fillLeft, width: fillWidth }] }),
     /* @__PURE__ */ React14.createElement(View, { style: [styles.thumb, { left: thumbLeft }] })
   ));
 }
@@ -2711,6 +2726,7 @@ function HueSlider({
   const trackRef = React14.useRef(null);
   const trackWidth = React14.useRef(0);
   const trackPageX = React14.useRef(0);
+  const [layoutWidth, setLayoutWidth] = React14.useState(0);
   const onValueChangeRef = React14.useRef(onValueChange);
   const minRef = React14.useRef(min);
   const maxRef = React14.useRef(max);
@@ -2748,7 +2764,7 @@ function HueSlider({
   ).current;
   const sliderValue = max > 359 && value < min ? value + 360 : value;
   const ratio = max > min ? (sliderValue - min) / (max - min) : 0;
-  const usableWidth = Math.max(0, trackWidth.current - THUMB_SIZE3);
+  const usableWidth = Math.max(0, layoutWidth - THUMB_SIZE3);
   const thumbLeft = ratio * usableWidth;
   const handleValueTextSubmit = React14.useCallback(
     (text) => {
@@ -2782,7 +2798,9 @@ function HueSlider({
       ref: trackRef,
       style: styles.trackContainer,
       onLayout: (e) => {
-        trackWidth.current = e.nativeEvent.layout.width;
+        const w = e.nativeEvent.layout.width;
+        trackWidth.current = w;
+        setLayoutWidth(w);
         trackRef.current?.measure((_x, _y, _w, _h, pageX) => {
           if (pageX != null) trackPageX.current = pageX;
         });
@@ -2870,6 +2888,7 @@ function ColorScaleSlider({
   const trackPageX = React14.useRef(0);
   const isDragging = React14.useRef(false);
   const thumbAnim = React14.useRef(new Animated.Value(0)).current;
+  const [layoutWidth, setLayoutWidth] = React14.useState(0);
   const onValueChangeRef = React14.useRef(onValueChange);
   const disabledRef = React14.useRef(disabled);
   const colorsLengthRef = React14.useRef(colors.length);
@@ -2931,7 +2950,7 @@ function ColorScaleSlider({
   const range = maxNV - minNV;
   const clampedValue = value !== void 0 ? Math.min(maxNV, Math.max(minNV, value)) : (maxNV + minNV) / 2;
   const ratio = range > 0 ? (maxNV - clampedValue) / range : 0.5;
-  const usableWidth = Math.max(0, trackWidth.current - THUMB_SIZE4);
+  const usableWidth = Math.max(0, layoutWidth - THUMB_SIZE4);
   const thumbLeft = ratio * usableWidth;
   React14.useEffect(() => {
     if (isDragging.current || !animateValue) {
@@ -2950,9 +2969,9 @@ function ColorScaleSlider({
       ref: trackRef,
       style: styles.trackContainer,
       onLayout: (e) => {
-        trackWidth.current = e.nativeEvent.layout.width;
-        const newUsableWidth = Math.max(0, e.nativeEvent.layout.width - THUMB_SIZE4);
-        thumbAnim.setValue(ratio * newUsableWidth);
+        const w = e.nativeEvent.layout.width;
+        trackWidth.current = w;
+        setLayoutWidth(w);
         trackRef.current?.measure((_x, _y, _w, _h, pageX) => {
           if (pageX != null) trackPageX.current = pageX;
         });