@ncdai/react-wheel-picker 1.0.17 → 1.0.18

package/README.md

@@ -17,3 +17,11 @@ Please read the [documentation](https://react-wheel-picker.chanhdai.com/docs/get
 ## License
 
 Licensed under the [MIT license](./LICENSE).
+
+## Sponsors
+
+This project is proudly supported by:
+
+[![Vercel OSS Program](https://vercel.com/oss/program-badge.svg)](https://vercel.com/blog/summer-2025-oss-program#react-wheel-picker)
+
+> Using this package at work? [Sponsor me](https://github.com/sponsors/ncdai) to help with support and maintenance.

package/dist/index.d.mts

@@ -1,11 +1,15 @@
 import React, { ReactNode } from 'react';
 
+/**
+ * Represents the value of a single option in the wheel picker
+ */
+type WheelPickerValue = string | number;
 /**
  * Represents a single option in the wheel picker
  */
-type WheelPickerOption = {
+type WheelPickerOption<T extends WheelPickerValue = string> = {
     /** The value that will be returned when this option is selected */
-    value: string;
+    value: T;
     /** The content displayed for this option */
     label: ReactNode;
 };
@@ -23,15 +27,15 @@ type WheelPickerClassNames = {
 /**
  * Props for the WheelPicker component
  */
-type WheelPickerProps = {
+type WheelPickerProps<T extends WheelPickerValue = string> = {
     /** Initial value of the picker when uncontrolled */
-    defaultValue?: string;
+    defaultValue?: T;
     /** Current value of the picker when controlled */
-    value?: string;
+    value?: T;
     /** Callback fired when the selected value changes */
-    onValueChange?: (value: string) => void;
+    onValueChange?: (value: T) => void;
     /** Array of options to display in the wheel */
-    options: WheelPickerOption[];
+    options: WheelPickerOption<T>[];
     /** Whether the wheel should loop infinitely */
     infinite?: boolean;
     /** The number of options visible on the circular ring, must be a multiple of 4 */
@@ -56,6 +60,6 @@ type WheelPickerWrapperProps = {
 };
 
 declare const WheelPickerWrapper: React.FC<WheelPickerWrapperProps>;
-declare const WheelPicker: React.FC<WheelPickerProps>;
+declare function WheelPicker<T extends WheelPickerValue>({ defaultValue, value: valueProp, onValueChange, options: optionsProp, infinite: infiniteProp, visibleCount: countProp, dragSensitivity: dragSensitivityProp, scrollSensitivity: scrollSensitivityProp, optionItemHeight: optionHeightProp, classNames, }: WheelPickerProps<T>): React.JSX.Element;
 
-export { WheelPicker, type WheelPickerClassNames, type WheelPickerOption, WheelPickerWrapper };
+export { WheelPicker, type WheelPickerClassNames, type WheelPickerOption, type WheelPickerProps, type WheelPickerValue, WheelPickerWrapper };

package/dist/index.d.ts

@@ -1,11 +1,15 @@
 import React, { ReactNode } from 'react';
 
+/**
+ * Represents the value of a single option in the wheel picker
+ */
+type WheelPickerValue = string | number;
 /**
  * Represents a single option in the wheel picker
  */
-type WheelPickerOption = {
+type WheelPickerOption<T extends WheelPickerValue = string> = {
     /** The value that will be returned when this option is selected */
-    value: string;
+    value: T;
     /** The content displayed for this option */
     label: ReactNode;
 };
@@ -23,15 +27,15 @@ type WheelPickerClassNames = {
 /**
  * Props for the WheelPicker component
  */
-type WheelPickerProps = {
+type WheelPickerProps<T extends WheelPickerValue = string> = {
     /** Initial value of the picker when uncontrolled */
-    defaultValue?: string;
+    defaultValue?: T;
     /** Current value of the picker when controlled */
-    value?: string;
+    value?: T;
     /** Callback fired when the selected value changes */
-    onValueChange?: (value: string) => void;
+    onValueChange?: (value: T) => void;
     /** Array of options to display in the wheel */
-    options: WheelPickerOption[];
+    options: WheelPickerOption<T>[];
     /** Whether the wheel should loop infinitely */
     infinite?: boolean;
     /** The number of options visible on the circular ring, must be a multiple of 4 */
@@ -56,6 +60,6 @@ type WheelPickerWrapperProps = {
 };
 
 declare const WheelPickerWrapper: React.FC<WheelPickerWrapperProps>;
-declare const WheelPicker: React.FC<WheelPickerProps>;
+declare function WheelPicker<T extends WheelPickerValue>({ defaultValue, value: valueProp, onValueChange, options: optionsProp, infinite: infiniteProp, visibleCount: countProp, dragSensitivity: dragSensitivityProp, scrollSensitivity: scrollSensitivityProp, optionItemHeight: optionHeightProp, classNames, }: WheelPickerProps<T>): React.JSX.Element;
 
-export { WheelPicker, type WheelPickerClassNames, type WheelPickerOption, WheelPickerWrapper };
+export { WheelPicker, type WheelPickerClassNames, type WheelPickerOption, type WheelPickerProps, type WheelPickerValue, WheelPickerWrapper };

package/dist/index.js

@@ -1 +1 @@
-"use strict";"use client";var St=Object.create;var H=Object.defineProperty;var kt=Object.getOwnPropertyDescriptor;var Dt=Object.getOwnPropertyNames;var Lt=Object.getPrototypeOf,Ct=Object.prototype.hasOwnProperty;var It=(s,a)=>{for(var d in a)H(s,d,{get:a[d],enumerable:!0})},at=(s,a,d,f)=>{if(a&&typeof a=="object"||typeof a=="function")for(let c of Dt(a))!Ct.call(s,c)&&c!==d&&H(s,c,{get:()=>a[c],enumerable:!(f=kt(a,c))||f.enumerable});return s};var it=(s,a,d)=>(d=s!=null?St(Lt(s)):{},at(a||!s||!s.__esModule?H(d,"default",{value:s,enumerable:!0}):d,s)),Wt=s=>at(H({},"__esModule",{value:!0}),s);var Ot={};It(Ot,{WheelPicker:()=>Ht,WheelPickerWrapper:()=>At});module.exports=Wt(Ot);var T=it(require("react")),h=require("react");var M=it(require("react"));function ct(s){let a=M.default.useRef(s);return M.default.useEffect(()=>{a.current=s}),M.default.useMemo(()=>(...d)=>{var f;return(f=a.current)==null?void 0:f.call(a,...d)},[])}function xt({defaultProp:s,onChange:a}){let d=M.default.useState(s),[f]=d,c=M.default.useRef(f),w=ct(a);return M.default.useEffect(()=>{c.current!==f&&(w(f),c.current=f)},[f,c,w]),d}function lt({prop:s,defaultProp:a,onChange:d=()=>{}}){let[f,c]=xt({defaultProp:a,onChange:d}),w=s!==void 0,O=w?s:f,I=ct(d),z=M.default.useCallback(g=>{if(w){let W=typeof g=="function"?g(s):g;W!==s&&I(W)}else c(g)},[w,s,c,I]);return[O,z]}var ut=.3,Yt=30,Rt=s=>Math.pow(s-1,3)+1,X=(s,a,d)=>Math.max(a,Math.min(s,d)),At=({className:s,children:a})=>T.default.createElement("div",{className:s,"data-rwp-wrapper":!0},a),Ht=({defaultValue:s,value:a,onValueChange:d,options:f,infinite:c=!1,visibleCount:w=20,dragSensitivity:O=3,scrollSensitivity:I=5,optionItemHeight:z=30,classNames:g})=>{var nt,rt;let[P=(rt=(nt=f[0])==null?void 0:nt.value)!=null?rt:"",W]=lt({defaultProp:s,prop:a,onChange:d}),i=(0,h.useMemo)(()=>{if(!c)return f;let t=[],e=Math.ceil(w/2);if(f.length===0)return t;for(;t.length<e;)t.push(...f);return t},[w,f,c]),p=z,G=p*.5,E=360/w,x=p/Math.tan(E*Math.PI/180),ht=Math.round(x*2+p*.25),S=w>>2,Z=O*10,dt=10,b=(0,h.useRef)(null),Y=(0,h.useRef)(null),F=(0,h.useRef)(null),v=(0,h.useRef)(0),K=(0,h.useRef)(0),k=(0,h.useRef)(!1),_=(0,h.useRef)(0),U=(0,h.useRef)({startY:0,yList:[],touchScroll:0,isClick:!0}),$=(0,h.useRef)(null),gt=(0,h.useMemo)(()=>{let t=(n,r,o)=>T.default.createElement("li",{key:r,className:g==null?void 0:g.optionItem,"data-slot":"option-item","data-rwp-option":!0,"data-index":r,style:{top:-G,height:p,lineHeight:`${p}px`,transform:`rotateX(${o}deg) translateZ(${x}px)`,visibility:"hidden"}},n.label),e=i.map((n,r)=>t(n,r,-E*r));if(c)for(let n=0;n<S;++n){let r=-n-1,o=n+i.length;e.unshift(t(i[i.length-n-1],r,E*(n+1))),e.push(t(i[n],o,-E*o))}return e},[p,G,c,E,i,S,x,g==null?void 0:g.optionItem]),ft=(0,h.useMemo)(()=>{let t=(n,r)=>T.default.createElement("li",{key:r,className:g==null?void 0:g.highlightItem,"data-slot":"highlight-item","data-rwp-highlight-item":!0,style:{height:p}},n.label),e=i.map((n,r)=>t(n,r));if(c){let n=i[0],r=i[i.length-1];e.unshift(t(r,"infinite-start")),e.push(t(n,"infinite-end"))}return e},[g==null?void 0:g.highlightItem,p,c,i]),pt=(0,h.useMemo)(()=>{let t=0,e=Math.PI/180,n=[];for(let r=S-1;r>=-S+1;--r){let o=r*E,u=p*Math.cos(o*e),l=t;t+=u,n.push([l,t])}return n},[E,p,S]),q=t=>(t%i.length+i.length)%i.length,D=t=>{let e=c?q(t):t;if(Y.current){let n=`translateZ(${-x}px) rotateX(${E*e}deg)`;Y.current.style.transform=n,Y.current.childNodes.forEach(r=>{let o=r,u=Math.abs(Number(o.dataset.index)-e);o.style.visibility=u>S?"hidden":"visible"})}return F.current&&(F.current.style.transform=`translateY(${-e*p}px)`),e},R=()=>{cancelAnimationFrame(K.current)},J=(t,e,n,r)=>{if(t===e||n===0){D(t);return}let o=performance.now(),u=e-t,l=m=>{let y=(m-o)/1e3;if(y<n){let j=Rt(y/n);v.current=D(t+j*u),K.current=requestAnimationFrame(l)}else R(),v.current=D(e),r==null||r()};requestAnimationFrame(l)},A=t=>{let e=q(t)|0,n=c?e:Math.min(Math.max(e,0),i.length-1);if(!c&&n!==t)return;v.current=D(n);let r=i[v.current];W(r.value)},mt=t=>{let e=i.findIndex(n=>n.value===t);if(e===-1){console.error("Invalid value selected:",t);return}R(),A(e)},Q=t=>{let e=v.current,n=e+t;c?n=Math.round(n):n=X(Math.round(n),0,i.length-1);let r=Math.abs(n-e);if(r===0)return;let o=Math.sqrt(r/I);R(),J(e,n,o,()=>{A(v.current)})},bt=t=>{let e=b.current;if(!e){console.error("Container reference is not set.");return}let{top:n}=e.getBoundingClientRect(),r=t-n,o=pt.findIndex(([l,m])=>r>=l&&r<=m);if(o===-1){console.error("No item found for click position:",r);return}let u=(S-o-1)*-1;Q(u)},vt=t=>{var e,n;try{let r=(t instanceof MouseEvent?t.clientY:(n=(e=t.touches)==null?void 0:e[0])==null?void 0:n.clientY)||0,o=U.current;o.isClick&&Math.abs(r-o.startY)>5&&(o.isClick=!1),o.yList.push([r,Date.now()]),o.yList.length>5&&o.yList.shift();let u=(o.startY-r)/p,l=v.current+u;if(c)l=q(l);else{let m=i.length;l<0?l*=ut:l>m&&(l=m+(l-m)*ut)}o.touchScroll=D(l)}catch(r){console.error("Error in updateScrollDuringDrag:",r)}},V=t=>{var e;!k.current&&!((e=b.current)!=null&&e.contains(t.target))&&t.target!==b.current||(t.cancelable&&t.preventDefault(),i.length&&vt(t))},N=t=>{var e,n,r;try{k.current=!0;let o=new AbortController,{signal:u}=o;$.current=o;let l={signal:u,passive:!1};(e=b.current)==null||e.addEventListener("touchmove",V,l),document.addEventListener("mousemove",V,l);let m=(t instanceof MouseEvent?t.clientY:(r=(n=t.touches)==null?void 0:n[0])==null?void 0:r.clientY)||0,y=U.current;y.startY=m,y.yList=[[m,Date.now()]],y.touchScroll=v.current,y.isClick=!0,R()}catch(o){console.error("Error in initiateDragGesture:",o)}},L=(0,h.useCallback)(t=>{var r;let e=k.current,n=!!((r=b.current)!=null&&r.contains(t.target))||t.target===b.current;(e||n)&&t.cancelable&&(t.preventDefault(),i.length&&N(t))},[N]),wt=t=>{let e=v.current,n=e,r=t>0?-Z:Z,o=0;if(c){o=Math.abs(t/r);let u=t*o+.5*r*o*o;n=Math.round(e+u)}else if(e<0||e>i.length-1){let u=X(e,0,i.length-1),l=e-u;r=dt,o=Math.sqrt(Math.abs(l/r)),t=r*o,t=e>0?-t:t,n=u}else{o=Math.abs(t/r);let u=t*o+.5*r*o*o;n=Math.round(e+u),n=X(n,0,i.length-1);let l=n-e;o=Math.sqrt(Math.abs(l/r))}J(e,n,o,()=>{A(v.current)}),A(v.current)},tt=()=>{var t,e,n,r;try{(t=$.current)==null||t.abort(),$.current=null;let o=U.current;if(o.isClick){bt(o.startY);return}let u=o.yList,l=0;if(u.length>1){let m=u.length,[y,j]=(e=u[m-2])!=null?e:[0,0],[yt,Et]=(n=u[m-1])!=null?n:[0,0],ot=Et-j;if(ot>0){let st=(y-yt)/p*1e3/ot,Mt=Yt,Tt=st>0?1:-1;l=Math.min(Math.abs(st),Mt)*Tt}}v.current=(r=o.touchScroll)!=null?r:v.current,wt(l)}catch(o){console.error("Error in finalizeDragAndStartInertiaScroll:",o)}finally{k.current=!1}},C=(0,h.useCallback)(t=>{var r;if(!i.length)return;let e=k.current,n=!!((r=b.current)!=null&&r.contains(t.target))||t.target===b.current;(e||n)&&t.cancelable&&(t.preventDefault(),tt())},[tt]),et=t=>{t.preventDefault();let e=Date.now();if(e-_.current<100)return;let n=Math.sign(t.deltaY);n&&(_.current=e,Q(n))},B=(0,h.useCallback)(t=>{if(!i.length||!b.current)return;let e=k.current,n=b.current.contains(t.target)||t.target===b.current;(e||n)&&t.cancelable&&(t.preventDefault(),et(t))},[et]);return(0,h.useEffect)(()=>{let t=b.current;if(!t)return;let e={passive:!1};return t.addEventListener("touchstart",L,e),t.addEventListener("touchend",C,e),t.addEventListener("wheel",B,e),document.addEventListener("mousedown",L,e),document.addEventListener("mouseup",C,e),()=>{t.removeEventListener("touchstart",L),t.removeEventListener("touchend",C),t.removeEventListener("wheel",B),document.removeEventListener("mousedown",L),document.removeEventListener("mouseup",C)}},[C,L,B]),(0,h.useEffect)(()=>{mt(P)},[P,a,i]),T.default.createElement("div",{ref:b,"data-rwp":!0,style:{height:ht}},T.default.createElement("ul",{ref:Y,"data-rwp-options":!0},gt),T.default.createElement("div",{className:g==null?void 0:g.highlightWrapper,"data-rwp-highlight-wrapper":!0,"data-slot":"highlight-wrapper",style:{height:p,lineHeight:`${p}px`}},T.default.createElement("ul",{ref:F,"data-rwp-highlight-list":!0,style:{top:c?-p:void 0}},ft)))};0&&(module.exports={WheelPicker,WheelPickerWrapper});
+"use strict";"use client";var kt=Object.create;var P=Object.defineProperty;var Mt=Object.getOwnPropertyDescriptor;var St=Object.getOwnPropertyNames;var Dt=Object.getPrototypeOf,Lt=Object.prototype.hasOwnProperty;var It=(s,a)=>{for(var d in a)P(s,d,{get:a[d],enumerable:!0})},st=(s,a,d,f)=>{if(a&&typeof a=="object"||typeof a=="function")for(let c of St(a))!Lt.call(s,c)&&c!==d&&P(s,c,{get:()=>a[c],enumerable:!(f=Mt(a,c))||f.enumerable});return s};var at=(s,a,d)=>(d=s!=null?kt(Dt(s)):{},st(a||!s||!s.__esModule?P(d,"default",{value:s,enumerable:!0}):d,s)),Wt=s=>st(P({},"__esModule",{value:!0}),s);var Pt={};It(Pt,{WheelPicker:()=>Rt,WheelPickerWrapper:()=>At});module.exports=Wt(Pt);var k=at(require("react")),h=require("react");var E=at(require("react"));function it(s){let a=E.default.useRef(s);return E.default.useEffect(()=>{a.current=s}),E.default.useMemo(()=>(...d)=>{var f;return(f=a.current)==null?void 0:f.call(a,...d)},[])}function Ct({defaultProp:s,onChange:a}){let d=E.default.useState(s),[f]=d,c=E.default.useRef(f),w=it(a);return E.default.useEffect(()=>{c.current!==f&&(w(f),c.current=f)},[f,c,w]),d}function ct({prop:s,defaultProp:a,onChange:d=()=>{}}){let[f,c]=Ct({defaultProp:a,onChange:d}),w=s!==void 0,H=w?s:f,W=it(d),O=E.default.useCallback(g=>{if(w){let C=typeof g=="function"?g(s):g;C!==s&&W(C)}else c(g)},[w,s,c,W]);return[H,O]}var lt=.3,xt=30,Yt=s=>Math.pow(s-1,3)+1,V=(s,a,d)=>Math.max(a,Math.min(s,d)),At=({className:s,children:a})=>k.default.createElement("div",{className:s,"data-rwp-wrapper":!0},a);function Rt({defaultValue:s,value:a,onValueChange:d,options:f,infinite:c=!1,visibleCount:w=20,dragSensitivity:H=3,scrollSensitivity:W=5,optionItemHeight:O=30,classNames:g}){var nt;let[z=(nt=f[0])==null?void 0:nt.value,C]=ct({defaultProp:s,prop:a,onChange:d}),i=(0,h.useMemo)(()=>{if(!c)return f;let t=[],e=Math.ceil(w/2);if(f.length===0)return t;for(;t.length<e;)t.push(...f);return t},[w,f,c]),p=O,X=p*.5,y=360/w,x=p/Math.tan(y*Math.PI/180),ut=Math.round(x*2+p*.25),M=w>>2,G=H*10,ht=10,b=(0,h.useRef)(null),Y=(0,h.useRef)(null),U=(0,h.useRef)(null),v=(0,h.useRef)(0),Z=(0,h.useRef)(0),S=(0,h.useRef)(!1),K=(0,h.useRef)(0),$=(0,h.useRef)({startY:0,yList:[],touchScroll:0,isClick:!0}),q=(0,h.useRef)(null),dt=(0,h.useMemo)(()=>{let t=(n,r,o)=>k.default.createElement("li",{key:r,className:g==null?void 0:g.optionItem,"data-slot":"option-item","data-rwp-option":!0,"data-index":r,style:{top:-X,height:p,lineHeight:`${p}px`,transform:`rotateX(${o}deg) translateZ(${x}px)`,visibility:"hidden"}},n.label),e=i.map((n,r)=>t(n,r,-y*r));if(c)for(let n=0;n<M;++n){let r=-n-1,o=n+i.length;e.unshift(t(i[i.length-n-1],r,y*(n+1))),e.push(t(i[n],o,-y*o))}return e},[p,X,c,y,i,M,x,g==null?void 0:g.optionItem]),gt=(0,h.useMemo)(()=>{let t=(n,r)=>k.default.createElement("li",{key:r,className:g==null?void 0:g.highlightItem,"data-slot":"highlight-item","data-rwp-highlight-item":!0,style:{height:p}},n.label),e=i.map((n,r)=>t(n,r));if(c){let n=i[0],r=i[i.length-1];e.unshift(t(r,"infinite-start")),e.push(t(n,"infinite-end"))}return e},[g==null?void 0:g.highlightItem,p,c,i]),ft=(0,h.useMemo)(()=>{let t=0,e=Math.PI/180,n=[];for(let r=M-1;r>=-M+1;--r){let o=r*y,u=p*Math.cos(o*e),l=t;t+=u,n.push([l,t])}return n},[y,p,M]),B=t=>(t%i.length+i.length)%i.length,D=t=>{let e=c?B(t):t;if(Y.current){let n=`translateZ(${-x}px) rotateX(${y*e}deg)`;Y.current.style.transform=n,Y.current.childNodes.forEach(r=>{let o=r,u=Math.abs(Number(o.dataset.index)-e);o.style.visibility=u>M?"hidden":"visible"})}return U.current&&(U.current.style.transform=`translateY(${-e*p}px)`),e},A=()=>{cancelAnimationFrame(Z.current)},_=(t,e,n,r)=>{if(t===e||n===0){D(t);return}let o=performance.now(),u=e-t,l=m=>{let T=(m-o)/1e3;if(T<n){let j=Yt(T/n);v.current=D(t+j*u),Z.current=requestAnimationFrame(l)}else A(),v.current=D(e),r==null||r()};requestAnimationFrame(l)},R=t=>{let e=B(t)|0,n=c?e:Math.min(Math.max(e,0),i.length-1);if(!c&&n!==t)return;v.current=D(n);let r=i[v.current];C(r.value)},pt=t=>{let e=i.findIndex(n=>n.value===t);if(e===-1){console.error("Invalid value selected:",t);return}A(),R(e)},J=t=>{let e=v.current,n=e+t;c?n=Math.round(n):n=V(Math.round(n),0,i.length-1);let r=Math.abs(n-e);if(r===0)return;let o=Math.sqrt(r/W);A(),_(e,n,o,()=>{R(v.current)})},mt=t=>{let e=b.current;if(!e){console.error("Container reference is not set.");return}let{top:n}=e.getBoundingClientRect(),r=t-n,o=ft.findIndex(([l,m])=>r>=l&&r<=m);if(o===-1){console.error("No item found for click position:",r);return}let u=(M-o-1)*-1;J(u)},bt=t=>{var e,n;try{let r=(t instanceof MouseEvent?t.clientY:(n=(e=t.touches)==null?void 0:e[0])==null?void 0:n.clientY)||0,o=$.current;o.isClick&&Math.abs(r-o.startY)>5&&(o.isClick=!1),o.yList.push([r,Date.now()]),o.yList.length>5&&o.yList.shift();let u=(o.startY-r)/p,l=v.current+u;if(c)l=B(l);else{let m=i.length;l<0?l*=lt:l>m&&(l=m+(l-m)*lt)}o.touchScroll=D(l)}catch(r){console.error("Error in updateScrollDuringDrag:",r)}},Q=t=>{var e;!S.current&&!((e=b.current)!=null&&e.contains(t.target))&&t.target!==b.current||(t.cancelable&&t.preventDefault(),i.length&&bt(t))},N=t=>{var e,n,r;try{S.current=!0;let o=new AbortController,{signal:u}=o;q.current=o;let l={signal:u,passive:!1};(e=b.current)==null||e.addEventListener("touchmove",Q,l),document.addEventListener("mousemove",Q,l);let m=(t instanceof MouseEvent?t.clientY:(r=(n=t.touches)==null?void 0:n[0])==null?void 0:r.clientY)||0,T=$.current;T.startY=m,T.yList=[[m,Date.now()]],T.touchScroll=v.current,T.isClick=!0,A()}catch(o){console.error("Error in initiateDragGesture:",o)}},L=(0,h.useCallback)(t=>{var r;let e=S.current,n=!!((r=b.current)!=null&&r.contains(t.target))||t.target===b.current;(e||n)&&t.cancelable&&(t.preventDefault(),i.length&&N(t))},[N]),vt=t=>{let e=v.current,n=e,r=t>0?-G:G,o=0;if(c){o=Math.abs(t/r);let u=t*o+.5*r*o*o;n=Math.round(e+u)}else if(e<0||e>i.length-1){let u=V(e,0,i.length-1),l=e-u;r=ht,o=Math.sqrt(Math.abs(l/r)),t=r*o,t=e>0?-t:t,n=u}else{o=Math.abs(t/r);let u=t*o+.5*r*o*o;n=Math.round(e+u),n=V(n,0,i.length-1);let l=n-e;o=Math.sqrt(Math.abs(l/r))}_(e,n,o,()=>{R(v.current)}),R(v.current)},tt=()=>{var t,e,n,r;try{(t=q.current)==null||t.abort(),q.current=null;let o=$.current;if(o.isClick){mt(o.startY);return}let u=o.yList,l=0;if(u.length>1){let m=u.length,[T,j]=(e=u[m-2])!=null?e:[0,0],[wt,Tt]=(n=u[m-1])!=null?n:[0,0],rt=Tt-j;if(rt>0){let ot=(T-wt)/p*1e3/rt,yt=xt,Et=ot>0?1:-1;l=Math.min(Math.abs(ot),yt)*Et}}v.current=(r=o.touchScroll)!=null?r:v.current,vt(l)}catch(o){console.error("Error in finalizeDragAndStartInertiaScroll:",o)}finally{S.current=!1}},I=(0,h.useCallback)(t=>{var r;if(!i.length)return;let e=S.current,n=!!((r=b.current)!=null&&r.contains(t.target))||t.target===b.current;(e||n)&&t.cancelable&&(t.preventDefault(),tt())},[tt]),et=t=>{t.preventDefault();let e=Date.now();if(e-K.current<100)return;let n=Math.sign(t.deltaY);n&&(K.current=e,J(n))},F=(0,h.useCallback)(t=>{if(!i.length||!b.current)return;let e=S.current,n=b.current.contains(t.target)||t.target===b.current;(e||n)&&t.cancelable&&(t.preventDefault(),et(t))},[et]);return(0,h.useEffect)(()=>{let t=b.current;if(!t)return;let e={passive:!1};return t.addEventListener("touchstart",L,e),t.addEventListener("touchend",I,e),t.addEventListener("wheel",F,e),document.addEventListener("mousedown",L,e),document.addEventListener("mouseup",I,e),()=>{t.removeEventListener("touchstart",L),t.removeEventListener("touchend",I),t.removeEventListener("wheel",F),document.removeEventListener("mousedown",L),document.removeEventListener("mouseup",I)}},[I,L,F]),(0,h.useEffect)(()=>{pt(z)},[z,a,i]),k.default.createElement("div",{ref:b,"data-rwp":!0,style:{height:ut}},k.default.createElement("ul",{ref:Y,"data-rwp-options":!0},dt),k.default.createElement("div",{className:g==null?void 0:g.highlightWrapper,"data-rwp-highlight-wrapper":!0,"data-slot":"highlight-wrapper",style:{height:p,lineHeight:`${p}px`}},k.default.createElement("ul",{ref:U,"data-rwp-highlight-list":!0,style:{top:c?-p:void 0}},gt)))}0&&(module.exports={WheelPicker,WheelPickerWrapper});

package/dist/index.mjs

@@ -1 +1 @@
-"use client";import S from"react";import{useCallback as X,useEffect as lt,useMemo as H,useRef as y}from"react";import T from"react";function it(u){let g=T.useRef(u);return T.useEffect(()=>{g.current=u}),T.useMemo(()=>(...b)=>{var h;return(h=g.current)==null?void 0:h.call(g,...b)},[])}function St({defaultProp:u,onChange:g}){let b=T.useState(u),[h]=b,c=T.useRef(h),v=it(g);return T.useEffect(()=>{c.current!==h&&(v(h),c.current=h)},[h,c,v]),b}function ct({prop:u,defaultProp:g,onChange:b=()=>{}}){let[h,c]=St({defaultProp:g,onChange:b}),v=u!==void 0,O=v?u:h,I=it(b),z=T.useCallback(l=>{if(v){let W=typeof l=="function"?l(u):l;W!==u&&I(W)}else c(l)},[v,u,c,I]);return[O,z]}var ut=.3,kt=30,Dt=u=>Math.pow(u-1,3)+1,G=(u,g,b)=>Math.max(g,Math.min(u,b)),zt=({className:u,children:g})=>S.createElement("div",{className:u,"data-rwp-wrapper":!0},g),Pt=({defaultValue:u,value:g,onValueChange:b,options:h,infinite:c=!1,visibleCount:v=20,dragSensitivity:O=3,scrollSensitivity:I=5,optionItemHeight:z=30,classNames:l})=>{var rt,ot;let[P=(ot=(rt=h[0])==null?void 0:rt.value)!=null?ot:"",W]=ct({defaultProp:u,prop:g,onChange:b}),s=H(()=>{if(!c)return h;let t=[],e=Math.ceil(v/2);if(h.length===0)return t;for(;t.length<e;)t.push(...h);return t},[v,h,c]),d=z,Z=d*.5,E=360/v,x=d/Math.tan(E*Math.PI/180),ht=Math.round(x*2+d*.25),M=v>>2,K=O*10,dt=10,p=y(null),Y=y(null),F=y(null),m=y(0),_=y(0),k=y(!1),J=y(0),U=y({startY:0,yList:[],touchScroll:0,isClick:!0}),$=y(null),gt=H(()=>{let t=(n,r,o)=>S.createElement("li",{key:r,className:l==null?void 0:l.optionItem,"data-slot":"option-item","data-rwp-option":!0,"data-index":r,style:{top:-Z,height:d,lineHeight:`${d}px`,transform:`rotateX(${o}deg) translateZ(${x}px)`,visibility:"hidden"}},n.label),e=s.map((n,r)=>t(n,r,-E*r));if(c)for(let n=0;n<M;++n){let r=-n-1,o=n+s.length;e.unshift(t(s[s.length-n-1],r,E*(n+1))),e.push(t(s[n],o,-E*o))}return e},[d,Z,c,E,s,M,x,l==null?void 0:l.optionItem]),ft=H(()=>{let t=(n,r)=>S.createElement("li",{key:r,className:l==null?void 0:l.highlightItem,"data-slot":"highlight-item","data-rwp-highlight-item":!0,style:{height:d}},n.label),e=s.map((n,r)=>t(n,r));if(c){let n=s[0],r=s[s.length-1];e.unshift(t(r,"infinite-start")),e.push(t(n,"infinite-end"))}return e},[l==null?void 0:l.highlightItem,d,c,s]),pt=H(()=>{let t=0,e=Math.PI/180,n=[];for(let r=M-1;r>=-M+1;--r){let o=r*E,i=d*Math.cos(o*e),a=t;t+=i,n.push([a,t])}return n},[E,d,M]),q=t=>(t%s.length+s.length)%s.length,D=t=>{let e=c?q(t):t;if(Y.current){let n=`translateZ(${-x}px) rotateX(${E*e}deg)`;Y.current.style.transform=n,Y.current.childNodes.forEach(r=>{let o=r,i=Math.abs(Number(o.dataset.index)-e);o.style.visibility=i>M?"hidden":"visible"})}return F.current&&(F.current.style.transform=`translateY(${-e*d}px)`),e},R=()=>{cancelAnimationFrame(_.current)},Q=(t,e,n,r)=>{if(t===e||n===0){D(t);return}let o=performance.now(),i=e-t,a=f=>{let w=(f-o)/1e3;if(w<n){let j=Dt(w/n);m.current=D(t+j*i),_.current=requestAnimationFrame(a)}else R(),m.current=D(e),r==null||r()};requestAnimationFrame(a)},A=t=>{let e=q(t)|0,n=c?e:Math.min(Math.max(e,0),s.length-1);if(!c&&n!==t)return;m.current=D(n);let r=s[m.current];W(r.value)},mt=t=>{let e=s.findIndex(n=>n.value===t);if(e===-1){console.error("Invalid value selected:",t);return}R(),A(e)},V=t=>{let e=m.current,n=e+t;c?n=Math.round(n):n=G(Math.round(n),0,s.length-1);let r=Math.abs(n-e);if(r===0)return;let o=Math.sqrt(r/I);R(),Q(e,n,o,()=>{A(m.current)})},bt=t=>{let e=p.current;if(!e){console.error("Container reference is not set.");return}let{top:n}=e.getBoundingClientRect(),r=t-n,o=pt.findIndex(([a,f])=>r>=a&&r<=f);if(o===-1){console.error("No item found for click position:",r);return}let i=(M-o-1)*-1;V(i)},vt=t=>{var e,n;try{let r=(t instanceof MouseEvent?t.clientY:(n=(e=t.touches)==null?void 0:e[0])==null?void 0:n.clientY)||0,o=U.current;o.isClick&&Math.abs(r-o.startY)>5&&(o.isClick=!1),o.yList.push([r,Date.now()]),o.yList.length>5&&o.yList.shift();let i=(o.startY-r)/d,a=m.current+i;if(c)a=q(a);else{let f=s.length;a<0?a*=ut:a>f&&(a=f+(a-f)*ut)}o.touchScroll=D(a)}catch(r){console.error("Error in updateScrollDuringDrag:",r)}},N=t=>{var e;!k.current&&!((e=p.current)!=null&&e.contains(t.target))&&t.target!==p.current||(t.cancelable&&t.preventDefault(),s.length&&vt(t))},tt=t=>{var e,n,r;try{k.current=!0;let o=new AbortController,{signal:i}=o;$.current=o;let a={signal:i,passive:!1};(e=p.current)==null||e.addEventListener("touchmove",N,a),document.addEventListener("mousemove",N,a);let f=(t instanceof MouseEvent?t.clientY:(r=(n=t.touches)==null?void 0:n[0])==null?void 0:r.clientY)||0,w=U.current;w.startY=f,w.yList=[[f,Date.now()]],w.touchScroll=m.current,w.isClick=!0,R()}catch(o){console.error("Error in initiateDragGesture:",o)}},L=X(t=>{var r;let e=k.current,n=!!((r=p.current)!=null&&r.contains(t.target))||t.target===p.current;(e||n)&&t.cancelable&&(t.preventDefault(),s.length&&tt(t))},[tt]),wt=t=>{let e=m.current,n=e,r=t>0?-K:K,o=0;if(c){o=Math.abs(t/r);let i=t*o+.5*r*o*o;n=Math.round(e+i)}else if(e<0||e>s.length-1){let i=G(e,0,s.length-1),a=e-i;r=dt,o=Math.sqrt(Math.abs(a/r)),t=r*o,t=e>0?-t:t,n=i}else{o=Math.abs(t/r);let i=t*o+.5*r*o*o;n=Math.round(e+i),n=G(n,0,s.length-1);let a=n-e;o=Math.sqrt(Math.abs(a/r))}Q(e,n,o,()=>{A(m.current)}),A(m.current)},et=()=>{var t,e,n,r;try{(t=$.current)==null||t.abort(),$.current=null;let o=U.current;if(o.isClick){bt(o.startY);return}let i=o.yList,a=0;if(i.length>1){let f=i.length,[w,j]=(e=i[f-2])!=null?e:[0,0],[yt,Et]=(n=i[f-1])!=null?n:[0,0],st=Et-j;if(st>0){let at=(w-yt)/d*1e3/st,Mt=kt,Tt=at>0?1:-1;a=Math.min(Math.abs(at),Mt)*Tt}}m.current=(r=o.touchScroll)!=null?r:m.current,wt(a)}catch(o){console.error("Error in finalizeDragAndStartInertiaScroll:",o)}finally{k.current=!1}},C=X(t=>{var r;if(!s.length)return;let e=k.current,n=!!((r=p.current)!=null&&r.contains(t.target))||t.target===p.current;(e||n)&&t.cancelable&&(t.preventDefault(),et())},[et]),nt=t=>{t.preventDefault();let e=Date.now();if(e-J.current<100)return;let n=Math.sign(t.deltaY);n&&(J.current=e,V(n))},B=X(t=>{if(!s.length||!p.current)return;let e=k.current,n=p.current.contains(t.target)||t.target===p.current;(e||n)&&t.cancelable&&(t.preventDefault(),nt(t))},[nt]);return lt(()=>{let t=p.current;if(!t)return;let e={passive:!1};return t.addEventListener("touchstart",L,e),t.addEventListener("touchend",C,e),t.addEventListener("wheel",B,e),document.addEventListener("mousedown",L,e),document.addEventListener("mouseup",C,e),()=>{t.removeEventListener("touchstart",L),t.removeEventListener("touchend",C),t.removeEventListener("wheel",B),document.removeEventListener("mousedown",L),document.removeEventListener("mouseup",C)}},[C,L,B]),lt(()=>{mt(P)},[P,g,s]),S.createElement("div",{ref:p,"data-rwp":!0,style:{height:ht}},S.createElement("ul",{ref:Y,"data-rwp-options":!0},gt),S.createElement("div",{className:l==null?void 0:l.highlightWrapper,"data-rwp-highlight-wrapper":!0,"data-slot":"highlight-wrapper",style:{height:d,lineHeight:`${d}px`}},S.createElement("ul",{ref:F,"data-rwp-highlight-list":!0,style:{top:c?-d:void 0}},ft)))};export{Pt as WheelPicker,zt as WheelPickerWrapper};
+"use client";import M from"react";import{useCallback as V,useEffect as ct,useMemo as P,useRef as T}from"react";import k from"react";function at(u){let g=k.useRef(u);return k.useEffect(()=>{g.current=u}),k.useMemo(()=>(...b)=>{var h;return(h=g.current)==null?void 0:h.call(g,...b)},[])}function kt({defaultProp:u,onChange:g}){let b=k.useState(u),[h]=b,c=k.useRef(h),v=at(g);return k.useEffect(()=>{c.current!==h&&(v(h),c.current=h)},[h,c,v]),b}function it({prop:u,defaultProp:g,onChange:b=()=>{}}){let[h,c]=kt({defaultProp:g,onChange:b}),v=u!==void 0,H=v?u:h,W=at(b),O=k.useCallback(l=>{if(v){let C=typeof l=="function"?l(u):l;C!==u&&W(C)}else c(l)},[v,u,c,W]);return[H,O]}var lt=.3,Mt=30,St=u=>Math.pow(u-1,3)+1,X=(u,g,b)=>Math.max(g,Math.min(u,b)),Ht=({className:u,children:g})=>M.createElement("div",{className:u,"data-rwp-wrapper":!0},g);function Ot({defaultValue:u,value:g,onValueChange:b,options:h,infinite:c=!1,visibleCount:v=20,dragSensitivity:H=3,scrollSensitivity:W=5,optionItemHeight:O=30,classNames:l}){var rt;let[z=(rt=h[0])==null?void 0:rt.value,C]=it({defaultProp:u,prop:g,onChange:b}),s=P(()=>{if(!c)return h;let t=[],e=Math.ceil(v/2);if(h.length===0)return t;for(;t.length<e;)t.push(...h);return t},[v,h,c]),d=O,G=d*.5,y=360/v,x=d/Math.tan(y*Math.PI/180),ut=Math.round(x*2+d*.25),E=v>>2,Z=H*10,ht=10,p=T(null),Y=T(null),U=T(null),m=T(0),K=T(0),S=T(!1),_=T(0),$=T({startY:0,yList:[],touchScroll:0,isClick:!0}),q=T(null),dt=P(()=>{let t=(n,r,o)=>M.createElement("li",{key:r,className:l==null?void 0:l.optionItem,"data-slot":"option-item","data-rwp-option":!0,"data-index":r,style:{top:-G,height:d,lineHeight:`${d}px`,transform:`rotateX(${o}deg) translateZ(${x}px)`,visibility:"hidden"}},n.label),e=s.map((n,r)=>t(n,r,-y*r));if(c)for(let n=0;n<E;++n){let r=-n-1,o=n+s.length;e.unshift(t(s[s.length-n-1],r,y*(n+1))),e.push(t(s[n],o,-y*o))}return e},[d,G,c,y,s,E,x,l==null?void 0:l.optionItem]),gt=P(()=>{let t=(n,r)=>M.createElement("li",{key:r,className:l==null?void 0:l.highlightItem,"data-slot":"highlight-item","data-rwp-highlight-item":!0,style:{height:d}},n.label),e=s.map((n,r)=>t(n,r));if(c){let n=s[0],r=s[s.length-1];e.unshift(t(r,"infinite-start")),e.push(t(n,"infinite-end"))}return e},[l==null?void 0:l.highlightItem,d,c,s]),ft=P(()=>{let t=0,e=Math.PI/180,n=[];for(let r=E-1;r>=-E+1;--r){let o=r*y,i=d*Math.cos(o*e),a=t;t+=i,n.push([a,t])}return n},[y,d,E]),B=t=>(t%s.length+s.length)%s.length,D=t=>{let e=c?B(t):t;if(Y.current){let n=`translateZ(${-x}px) rotateX(${y*e}deg)`;Y.current.style.transform=n,Y.current.childNodes.forEach(r=>{let o=r,i=Math.abs(Number(o.dataset.index)-e);o.style.visibility=i>E?"hidden":"visible"})}return U.current&&(U.current.style.transform=`translateY(${-e*d}px)`),e},A=()=>{cancelAnimationFrame(K.current)},J=(t,e,n,r)=>{if(t===e||n===0){D(t);return}let o=performance.now(),i=e-t,a=f=>{let w=(f-o)/1e3;if(w<n){let j=St(w/n);m.current=D(t+j*i),K.current=requestAnimationFrame(a)}else A(),m.current=D(e),r==null||r()};requestAnimationFrame(a)},R=t=>{let e=B(t)|0,n=c?e:Math.min(Math.max(e,0),s.length-1);if(!c&&n!==t)return;m.current=D(n);let r=s[m.current];C(r.value)},pt=t=>{let e=s.findIndex(n=>n.value===t);if(e===-1){console.error("Invalid value selected:",t);return}A(),R(e)},Q=t=>{let e=m.current,n=e+t;c?n=Math.round(n):n=X(Math.round(n),0,s.length-1);let r=Math.abs(n-e);if(r===0)return;let o=Math.sqrt(r/W);A(),J(e,n,o,()=>{R(m.current)})},mt=t=>{let e=p.current;if(!e){console.error("Container reference is not set.");return}let{top:n}=e.getBoundingClientRect(),r=t-n,o=ft.findIndex(([a,f])=>r>=a&&r<=f);if(o===-1){console.error("No item found for click position:",r);return}let i=(E-o-1)*-1;Q(i)},bt=t=>{var e,n;try{let r=(t instanceof MouseEvent?t.clientY:(n=(e=t.touches)==null?void 0:e[0])==null?void 0:n.clientY)||0,o=$.current;o.isClick&&Math.abs(r-o.startY)>5&&(o.isClick=!1),o.yList.push([r,Date.now()]),o.yList.length>5&&o.yList.shift();let i=(o.startY-r)/d,a=m.current+i;if(c)a=B(a);else{let f=s.length;a<0?a*=lt:a>f&&(a=f+(a-f)*lt)}o.touchScroll=D(a)}catch(r){console.error("Error in updateScrollDuringDrag:",r)}},N=t=>{var e;!S.current&&!((e=p.current)!=null&&e.contains(t.target))&&t.target!==p.current||(t.cancelable&&t.preventDefault(),s.length&&bt(t))},tt=t=>{var e,n,r;try{S.current=!0;let o=new AbortController,{signal:i}=o;q.current=o;let a={signal:i,passive:!1};(e=p.current)==null||e.addEventListener("touchmove",N,a),document.addEventListener("mousemove",N,a);let f=(t instanceof MouseEvent?t.clientY:(r=(n=t.touches)==null?void 0:n[0])==null?void 0:r.clientY)||0,w=$.current;w.startY=f,w.yList=[[f,Date.now()]],w.touchScroll=m.current,w.isClick=!0,A()}catch(o){console.error("Error in initiateDragGesture:",o)}},L=V(t=>{var r;let e=S.current,n=!!((r=p.current)!=null&&r.contains(t.target))||t.target===p.current;(e||n)&&t.cancelable&&(t.preventDefault(),s.length&&tt(t))},[tt]),vt=t=>{let e=m.current,n=e,r=t>0?-Z:Z,o=0;if(c){o=Math.abs(t/r);let i=t*o+.5*r*o*o;n=Math.round(e+i)}else if(e<0||e>s.length-1){let i=X(e,0,s.length-1),a=e-i;r=ht,o=Math.sqrt(Math.abs(a/r)),t=r*o,t=e>0?-t:t,n=i}else{o=Math.abs(t/r);let i=t*o+.5*r*o*o;n=Math.round(e+i),n=X(n,0,s.length-1);let a=n-e;o=Math.sqrt(Math.abs(a/r))}J(e,n,o,()=>{R(m.current)}),R(m.current)},et=()=>{var t,e,n,r;try{(t=q.current)==null||t.abort(),q.current=null;let o=$.current;if(o.isClick){mt(o.startY);return}let i=o.yList,a=0;if(i.length>1){let f=i.length,[w,j]=(e=i[f-2])!=null?e:[0,0],[wt,Tt]=(n=i[f-1])!=null?n:[0,0],ot=Tt-j;if(ot>0){let st=(w-wt)/d*1e3/ot,yt=Mt,Et=st>0?1:-1;a=Math.min(Math.abs(st),yt)*Et}}m.current=(r=o.touchScroll)!=null?r:m.current,vt(a)}catch(o){console.error("Error in finalizeDragAndStartInertiaScroll:",o)}finally{S.current=!1}},I=V(t=>{var r;if(!s.length)return;let e=S.current,n=!!((r=p.current)!=null&&r.contains(t.target))||t.target===p.current;(e||n)&&t.cancelable&&(t.preventDefault(),et())},[et]),nt=t=>{t.preventDefault();let e=Date.now();if(e-_.current<100)return;let n=Math.sign(t.deltaY);n&&(_.current=e,Q(n))},F=V(t=>{if(!s.length||!p.current)return;let e=S.current,n=p.current.contains(t.target)||t.target===p.current;(e||n)&&t.cancelable&&(t.preventDefault(),nt(t))},[nt]);return ct(()=>{let t=p.current;if(!t)return;let e={passive:!1};return t.addEventListener("touchstart",L,e),t.addEventListener("touchend",I,e),t.addEventListener("wheel",F,e),document.addEventListener("mousedown",L,e),document.addEventListener("mouseup",I,e),()=>{t.removeEventListener("touchstart",L),t.removeEventListener("touchend",I),t.removeEventListener("wheel",F),document.removeEventListener("mousedown",L),document.removeEventListener("mouseup",I)}},[I,L,F]),ct(()=>{pt(z)},[z,g,s]),M.createElement("div",{ref:p,"data-rwp":!0,style:{height:ut}},M.createElement("ul",{ref:Y,"data-rwp-options":!0},dt),M.createElement("div",{className:l==null?void 0:l.highlightWrapper,"data-rwp-highlight-wrapper":!0,"data-slot":"highlight-wrapper",style:{height:d,lineHeight:`${d}px`}},M.createElement("ul",{ref:U,"data-rwp-highlight-list":!0,style:{top:c?-d:void 0}},gt)))}export{Ot as WheelPicker,Ht as WheelPickerWrapper};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncdai/react-wheel-picker",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.",
   "publishConfig": {
     "access": "public",
@@ -55,6 +55,7 @@
     "url": "git+https://github.com/ncdai/react-wheel-picker.git",
     "directory": "packages/react-wheel-picker"
   },
+  "funding": "https://github.com/sponsors/ncdai",
   "bugs": {
     "url": "https://github.com/ncdai/react-wheel-picker/issues"
   },