@newtonedev/components 0.1.10 → 0.1.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/composites/range-inputs/HueSlider/HueSlider.d.ts.map +1 -1
- package/dist/composites/range-inputs/Slider/Slider.d.ts.map +1 -1
- package/dist/index.cjs +15 -8
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +15 -8
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/composites/range-inputs/ColorScaleSlider/ColorScaleSlider.tsx +5 -5
- package/src/composites/range-inputs/HueSlider/HueSlider.tsx +5 -2
- package/src/composites/range-inputs/Slider/Slider.tsx +5 -2
package/dist/index.js
CHANGED
|
@@ -2493,6 +2493,7 @@ function Slider({
|
|
|
2493
2493
|
const trackRef = React14.useRef(null);
|
|
2494
2494
|
const trackWidth = React14.useRef(0);
|
|
2495
2495
|
const trackPageX = React14.useRef(0);
|
|
2496
|
+
const [layoutWidth, setLayoutWidth] = React14.useState(0);
|
|
2496
2497
|
const onValueChangeRef = React14.useRef(onValueChange);
|
|
2497
2498
|
const minRef = React14.useRef(min);
|
|
2498
2499
|
const maxRef = React14.useRef(max);
|
|
@@ -2533,7 +2534,7 @@ function Slider({
|
|
|
2533
2534
|
})
|
|
2534
2535
|
).current;
|
|
2535
2536
|
const ratio = max > min ? (value - min) / (max - min) : 0;
|
|
2536
|
-
const usableWidth = Math.max(0,
|
|
2537
|
+
const usableWidth = Math.max(0, layoutWidth - THUMB_SIZE2);
|
|
2537
2538
|
const thumbLeft = ratio * usableWidth;
|
|
2538
2539
|
const fillWidth = thumbLeft + THUMB_SIZE2 / 2;
|
|
2539
2540
|
const handleValueTextSubmit = React14.useCallback(
|
|
@@ -2568,7 +2569,9 @@ function Slider({
|
|
|
2568
2569
|
ref: trackRef,
|
|
2569
2570
|
style: styles.trackContainer,
|
|
2570
2571
|
onLayout: (e) => {
|
|
2571
|
-
|
|
2572
|
+
const w = e.nativeEvent.layout.width;
|
|
2573
|
+
trackWidth.current = w;
|
|
2574
|
+
setLayoutWidth(w);
|
|
2572
2575
|
trackRef.current?.measure((_x, _y, _w, _h, pageX) => {
|
|
2573
2576
|
if (pageX != null) trackPageX.current = pageX;
|
|
2574
2577
|
});
|
|
@@ -2711,6 +2714,7 @@ function HueSlider({
|
|
|
2711
2714
|
const trackRef = React14.useRef(null);
|
|
2712
2715
|
const trackWidth = React14.useRef(0);
|
|
2713
2716
|
const trackPageX = React14.useRef(0);
|
|
2717
|
+
const [layoutWidth, setLayoutWidth] = React14.useState(0);
|
|
2714
2718
|
const onValueChangeRef = React14.useRef(onValueChange);
|
|
2715
2719
|
const minRef = React14.useRef(min);
|
|
2716
2720
|
const maxRef = React14.useRef(max);
|
|
@@ -2748,7 +2752,7 @@ function HueSlider({
|
|
|
2748
2752
|
).current;
|
|
2749
2753
|
const sliderValue = max > 359 && value < min ? value + 360 : value;
|
|
2750
2754
|
const ratio = max > min ? (sliderValue - min) / (max - min) : 0;
|
|
2751
|
-
const usableWidth = Math.max(0,
|
|
2755
|
+
const usableWidth = Math.max(0, layoutWidth - THUMB_SIZE3);
|
|
2752
2756
|
const thumbLeft = ratio * usableWidth;
|
|
2753
2757
|
const handleValueTextSubmit = React14.useCallback(
|
|
2754
2758
|
(text) => {
|
|
@@ -2782,7 +2786,9 @@ function HueSlider({
|
|
|
2782
2786
|
ref: trackRef,
|
|
2783
2787
|
style: styles.trackContainer,
|
|
2784
2788
|
onLayout: (e) => {
|
|
2785
|
-
|
|
2789
|
+
const w = e.nativeEvent.layout.width;
|
|
2790
|
+
trackWidth.current = w;
|
|
2791
|
+
setLayoutWidth(w);
|
|
2786
2792
|
trackRef.current?.measure((_x, _y, _w, _h, pageX) => {
|
|
2787
2793
|
if (pageX != null) trackPageX.current = pageX;
|
|
2788
2794
|
});
|
|
@@ -2870,6 +2876,7 @@ function ColorScaleSlider({
|
|
|
2870
2876
|
const trackPageX = React14.useRef(0);
|
|
2871
2877
|
const isDragging = React14.useRef(false);
|
|
2872
2878
|
const thumbAnim = React14.useRef(new Animated.Value(0)).current;
|
|
2879
|
+
const [layoutWidth, setLayoutWidth] = React14.useState(0);
|
|
2873
2880
|
const onValueChangeRef = React14.useRef(onValueChange);
|
|
2874
2881
|
const disabledRef = React14.useRef(disabled);
|
|
2875
2882
|
const colorsLengthRef = React14.useRef(colors.length);
|
|
@@ -2931,7 +2938,7 @@ function ColorScaleSlider({
|
|
|
2931
2938
|
const range = maxNV - minNV;
|
|
2932
2939
|
const clampedValue = value !== void 0 ? Math.min(maxNV, Math.max(minNV, value)) : (maxNV + minNV) / 2;
|
|
2933
2940
|
const ratio = range > 0 ? (maxNV - clampedValue) / range : 0.5;
|
|
2934
|
-
const usableWidth = Math.max(0,
|
|
2941
|
+
const usableWidth = Math.max(0, layoutWidth - THUMB_SIZE4);
|
|
2935
2942
|
const thumbLeft = ratio * usableWidth;
|
|
2936
2943
|
React14.useEffect(() => {
|
|
2937
2944
|
if (isDragging.current || !animateValue) {
|
|
@@ -2950,9 +2957,9 @@ function ColorScaleSlider({
|
|
|
2950
2957
|
ref: trackRef,
|
|
2951
2958
|
style: styles.trackContainer,
|
|
2952
2959
|
onLayout: (e) => {
|
|
2953
|
-
|
|
2954
|
-
|
|
2955
|
-
|
|
2960
|
+
const w = e.nativeEvent.layout.width;
|
|
2961
|
+
trackWidth.current = w;
|
|
2962
|
+
setLayoutWidth(w);
|
|
2956
2963
|
trackRef.current?.measure((_x, _y, _w, _h, pageX) => {
|
|
2957
2964
|
if (pageX != null) trackPageX.current = pageX;
|
|
2958
2965
|
});
|