@ncdai/react-wheel-picker 1.0.19 → 1.1.0
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/README.md +1 -1
- package/dist/index.css +1 -1
- package/dist/index.d.mts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -22,6 +22,6 @@ Licensed under the [MIT license](./LICENSE).
|
|
|
22
22
|
|
|
23
23
|
This project is proudly supported by:
|
|
24
24
|
|
|
25
|
-
[](https://vercel.com/blog/summer-2025-oss-program) [](https://shadcnstudio.com)
|
|
26
26
|
|
|
27
27
|
> Using this package at work? [Sponsor me](https://github.com/sponsors/ncdai) to help with support and maintenance.
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-rwp-wrapper] ul{margin:0;padding:0;list-style:none}[data-rwp-wrapper] li{margin:0;padding:0}[data-rwp-wrapper]{position:relative;overflow:hidden;display:flex;width:100%;align-items:stretch;justify-content:space-between;perspective:2000px;-webkit-user-select:none;-moz-user-select:none;user-select:none}[data-rwp]{position:relative;overflow:hidden;flex:1;cursor:default;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 20%,black 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,black 20%,black 80%,transparent 100%)}[data-rwp-highlight-wrapper]{position:absolute;overflow:hidden;top:50%;width:100%;transform:translateY(-50%);font-size:1rem;font-weight:500}[data-rwp-highlight-list]{position:absolute;width:100%}[data-rwp-options]{position:absolute;top:50%;left:0;display:block;width:100%;height:0;margin:0 auto;-webkit-font-smoothing:subpixel-antialiased;will-change:transform;backface-visibility:hidden;transform-style:preserve-3d}[data-rwp-option]{position:absolute;top:0;left:0;width:100%;-webkit-font-smoothing:subpixel-antialiased;will-change:visibility;font-size:.875rem}[data-rwp-option],[data-rwp-highlight-item]{display:flex;align-items:center;justify-content:center}
|
|
1
|
+
[data-rwp-wrapper] ul{margin:0;padding:0;list-style:none}[data-rwp-wrapper] li{margin:0;padding:0}[data-rwp-wrapper]{position:relative;overflow:hidden;display:flex;width:100%;align-items:stretch;justify-content:space-between;perspective:2000px;-webkit-user-select:none;-moz-user-select:none;user-select:none}[data-rwp]{position:relative;overflow:hidden;flex:1;cursor:default;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 20%,black 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,black 20%,black 80%,transparent 100%)}[data-rwp]:focus-visible{outline:none}[data-rwp-highlight-wrapper]{position:absolute;overflow:hidden;top:50%;width:100%;transform:translateY(-50%);font-size:1rem;font-weight:500}[data-rwp-highlight-list]{position:absolute;width:100%}[data-rwp-options]{position:absolute;top:50%;left:0;display:block;width:100%;height:0;margin:0 auto;-webkit-font-smoothing:subpixel-antialiased;will-change:transform;backface-visibility:hidden;transform-style:preserve-3d}[data-rwp-option]{position:absolute;top:0;left:0;width:100%;-webkit-font-smoothing:subpixel-antialiased;will-change:visibility;font-size:.875rem}[data-rwp-option],[data-rwp-highlight-item]{display:flex;align-items:center;justify-content:center}
|
package/dist/index.d.mts
CHANGED
|
@@ -12,6 +12,8 @@ type WheelPickerOption<T extends WheelPickerValue = string> = {
|
|
|
12
12
|
value: T;
|
|
13
13
|
/** The content displayed for this option */
|
|
14
14
|
label: ReactNode;
|
|
15
|
+
/** Optional text for type-ahead search (useful when label is a ReactNode). Defaults to label if string, otherwise value. */
|
|
16
|
+
textValue?: string;
|
|
15
17
|
};
|
|
16
18
|
/**
|
|
17
19
|
* Custom class names for styling different parts of the wheel picker
|
package/dist/index.d.ts
CHANGED
|
@@ -12,6 +12,8 @@ type WheelPickerOption<T extends WheelPickerValue = string> = {
|
|
|
12
12
|
value: T;
|
|
13
13
|
/** The content displayed for this option */
|
|
14
14
|
label: ReactNode;
|
|
15
|
+
/** Optional text for type-ahead search (useful when label is a ReactNode). Defaults to label if string, otherwise value. */
|
|
16
|
+
textValue?: string;
|
|
15
17
|
};
|
|
16
18
|
/**
|
|
17
19
|
* Custom class names for styling different parts of the wheel picker
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"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});
|
|
1
|
+
"use strict";"use client";var Ve=Object.create;var K=Object.defineProperty;var Ke=Object.getOwnPropertyDescriptor;var $e=Object.getOwnPropertyNames;var qe=Object.getPrototypeOf,je=Object.prototype.hasOwnProperty;var Xe=(s,a)=>{for(var h in a)K(s,h,{get:a[h],enumerable:!0})},be=(s,a,h,p)=>{if(a&&typeof a=="object"||typeof a=="function")for(let c of $e(a))!je.call(s,c)&&c!==h&&K(s,c,{get:()=>a[c],enumerable:!(p=Ke(a,c))||p.enumerable});return s};var Q=(s,a,h)=>(h=s!=null?Ve(qe(s)):{},be(a||!s||!s.__esModule?K(h,"default",{value:s,enumerable:!0}):h,s)),_e=s=>be(K({},"__esModule",{value:!0}),s);var rt={};Xe(rt,{WheelPicker:()=>nt,WheelPickerWrapper:()=>tt});module.exports=_e(rt);var M=Q(require("react")),u=require("react");var T=Q(require("react")),ve=(0,T.createContext)(null);function Te(){return(0,T.useContext)(ve)}function ke({children:s}){let[a,h]=(0,T.useState)(-1),p=(0,T.useRef)(0),c=(0,T.useRef)(new Map),g=(0,T.useCallback)((l,I)=>{let w=l!==null?l:p.current++;return c.current.set(w,I),h(i=>i===-1?w:i),w},[]),D=(0,T.useCallback)(l=>{var I;return(I=c.current.get(l))!=null?I:null},[]),S=(0,T.useCallback)(()=>Array.from(c.current.keys()).sort((l,I)=>l-I),[]),L=(0,T.useMemo)(()=>({activeIndex:a,setActiveIndex:h,register:g,getPickerRef:D,getPickerIndices:S}),[a,h,g,D,S]);return T.default.createElement(ve.Provider,{value:L},s)}var W=Q(require("react"));function xe(s){let a=W.default.useRef(s);return W.default.useEffect(()=>{a.current=s}),W.default.useMemo(()=>(...h)=>{var p;return(p=a.current)==null?void 0:p.call(a,...h)},[])}function Ze({defaultProp:s,onChange:a}){let h=W.default.useState(s),[p]=h,c=W.default.useRef(p),g=xe(a);return W.default.useEffect(()=>{c.current!==p&&(g(p),c.current=p)},[p,c,g]),h}function ye({prop:s,defaultProp:a,onChange:h=()=>{}}){let[p,c]=Ze({defaultProp:a,onChange:h}),g=s!==void 0,D=g?s:p,S=xe(h),L=W.default.useCallback(l=>{if(g){let w=typeof l=="function"?l(s):l;w!==s&&S(w)}else c(l)},[g,s,c,S]);return[D,L]}var O=require("react"),Je=500;function we(s,{getTextValue:a,getCurrentIndex:h,onMatch:p}){let c=(0,O.useRef)(""),g=(0,O.useRef)(null),D=(0,O.useCallback)(()=>{c.current="",g.current&&(clearTimeout(g.current),g.current=null)},[]);return{handleTypeaheadSearch:(0,O.useCallback)(L=>{g.current&&clearTimeout(g.current),c.current+=L.toLowerCase();let l=c.current,w=l.length>1&&Array.from(l).every(k=>k===l[0])?l[0]:l,i=h(),m=w.length===1,P=-1;if(m)for(let k=1;k<=s.length;k++){let C=(i+k)%s.length;if(a(s[C]).toLowerCase().startsWith(w)){P=C;break}}else P=s.findIndex(k=>a(k).toLowerCase().startsWith(w));P!==-1&&p(P),g.current=setTimeout(()=>{c.current="",g.current=null},Je)},[s,a,h,p]),resetTypeahead:D}}var Ie=.3,Qe=30,Ne=s=>Math.pow(s-1,3)+1,N=(s,a,h)=>Math.max(a,Math.min(s,h)),et=s=>{var a;return(a=s.textValue)!=null?a:typeof s.label=="string"?s.label:String(s.value)},tt=({className:s,children:a})=>M.default.createElement(ke,null,M.default.createElement("div",{className:s,"data-rwp-wrapper":!0},a));function nt({defaultValue:s,value:a,onValueChange:h,options:p,infinite:c=!1,visibleCount:g=20,dragSensitivity:D=3,scrollSensitivity:S=5,optionItemHeight:L=30,classNames:l}){var fe,pe;let[I=(fe=p[0])==null?void 0:fe.value,w]=ye({defaultProp:s,prop:a,onChange:h}),i=(0,u.useMemo)(()=>{if(!c)return p;let e=[],t=Math.ceil(g/2);if(p.length===0)return e;for(;e.length<t;)e.push(...p);return e},[g,p,c]),m=L,P=m*.5,k=360/g,C=m/Math.tan(k*Math.PI/180),ee=Math.round(C*2+m*.25),R=g>>2,te=D*10,Ee=10,y=(0,u.useRef)(null),z=(0,u.useRef)(null),$=(0,u.useRef)(null),b=(0,u.useRef)(0),ne=(0,u.useRef)(0),H=(0,u.useRef)(!1),re=(0,u.useRef)(0),[Me,oe]=(0,u.useState)(!1),Y=(0,u.useRef)(-1),x=Te(),De=(0,u.useCallback)(e=>{if(y.current=e,e&&x){let t=Y.current===-1?null:Y.current;Y.current=x.register(t,e)}},[x]),q=(0,u.useRef)({startY:0,yList:[],touchScroll:0,isClick:!0}),j=(0,u.useRef)(null),Se=(0,u.useMemo)(()=>{let e=(n,r,o)=>M.default.createElement("li",{key:r,className:l==null?void 0:l.optionItem,"data-slot":"option-item","data-rwp-option":!0,"data-index":r,style:{top:-P,height:m,lineHeight:`${m}px`,transform:`rotateX(${o}deg) translateZ(${C}px)`,visibility:"hidden"}},n.label),t=i.map((n,r)=>e(n,r,-k*r));if(c)for(let n=0;n<R;++n){let r=-n-1,o=n+i.length;t.unshift(e(i[i.length-n-1],r,k*(n+1))),t.push(e(i[n],o,-k*o))}return t},[m,P,c,k,i,R,C,l==null?void 0:l.optionItem]),Ce=(0,u.useMemo)(()=>{let e=(n,r)=>M.default.createElement("li",{key:r,className:l==null?void 0:l.highlightItem,"data-slot":"highlight-item","data-rwp-highlight-item":!0,style:{height:m}},n.label),t=i.map((n,r)=>e(n,r));if(c){let n=i[0],r=i[i.length-1];t.unshift(e(r,"infinite-start")),t.push(e(n,"infinite-end"))}return t},[l==null?void 0:l.highlightItem,m,c,i]),We=(0,u.useMemo)(()=>{let e=0,t=Math.PI/180,n=[];for(let r=R-1;r>=-R+1;--r){let o=r*k,f=m*Math.cos(o*t),d=e;e+=f,n.push([d,e])}return n},[k,m,R]),X=e=>(e%i.length+i.length)%i.length,G=e=>{let t=c?X(e):e;if(z.current){let n=`translateZ(${-C}px) rotateX(${k*t}deg)`;z.current.style.transform=n,z.current.childNodes.forEach(r=>{let o=r,f=Math.abs(Number(o.dataset.index)-t);o.style.visibility=f>R?"hidden":"visible"})}return $.current&&($.current.style.transform=`translateY(${-t*m}px)`),t},B=()=>{cancelAnimationFrame(ne.current)},se=(e,t,n,r)=>{if(e===t||n===0){G(e);return}let o=performance.now(),f=t-e,d=v=>{let E=(v-o)/1e3;if(E<n){let J=Ne(E/n);b.current=G(e+J*f),ne.current=requestAnimationFrame(d)}else B(),b.current=G(t),r==null||r()};requestAnimationFrame(d)},V=e=>{let t=X(e)|0,n=c?t:Math.min(Math.max(t,0),i.length-1);if(!c&&n!==e)return;b.current=G(n);let r=i[b.current];w(r.value)},Le=e=>{let t=i.findIndex(n=>n.value===e);if(t===-1){console.error("Invalid value selected:",e);return}B(),V(t)},A=e=>{let t=b.current,n=t+e;c?n=Math.round(n):n=N(Math.round(n),0,i.length-1);let r=Math.abs(n-t);if(r===0)return;let o=Math.sqrt(r/S);B(),se(t,n,o,()=>{V(b.current)})},Pe=e=>{let t=y.current;if(!t){console.error("Container reference is not set.");return}let{top:n}=t.getBoundingClientRect(),r=e-n,o=We.findIndex(([d,v])=>r>=d&&r<=v);if(o===-1){console.error("No item found for click position:",r);return}let f=(R-o-1)*-1;A(f)},Re=e=>{var t,n;try{let r=(e instanceof MouseEvent?e.clientY:(n=(t=e.touches)==null?void 0:t[0])==null?void 0:n.clientY)||0,o=q.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 f=(o.startY-r)/m,d=b.current+f;if(c)d=X(d);else{let v=i.length;d<0?d*=Ie:d>v&&(d=v+(d-v)*Ie)}o.touchScroll=G(d)}catch(r){console.error("Error in updateScrollDuringDrag:",r)}},ce=e=>{var t;!H.current&&!((t=y.current)!=null&&t.contains(e.target))&&e.target!==y.current||(e.cancelable&&e.preventDefault(),i.length&&Re(e))},ae=e=>{var t,n,r;try{H.current=!0;let o=new AbortController,{signal:f}=o;j.current=o;let d={signal:f,passive:!1};(t=y.current)==null||t.addEventListener("touchmove",ce,d),document.addEventListener("mousemove",ce,d);let v=(e instanceof MouseEvent?e.clientY:(r=(n=e.touches)==null?void 0:n[0])==null?void 0:r.clientY)||0,E=q.current;E.startY=v,E.yList=[[v,Date.now()]],E.touchScroll=b.current,E.isClick=!0,B()}catch(o){console.error("Error in initiateDragGesture:",o)}},U=(0,u.useCallback)(e=>{var r;let t=H.current,n=!!((r=y.current)!=null&&r.contains(e.target))||e.target===y.current;(t||n)&&e.cancelable&&(e.preventDefault(),i.length&&ae(e))},[ae]),Ae=e=>{let t=b.current,n=t,r=e>0?-te:te,o=0;if(c){o=Math.abs(e/r);let f=e*o+.5*r*o*o;n=Math.round(t+f)}else if(t<0||t>i.length-1){let f=N(t,0,i.length-1),d=t-f;r=Ee,o=Math.sqrt(Math.abs(d/r)),e=r*o,e=t>0?-e:e,n=f}else{o=Math.abs(e/r);let f=e*o+.5*r*o*o;n=Math.round(t+f),n=N(n,0,i.length-1);let d=n-t;o=Math.sqrt(Math.abs(d/r))}se(t,n,o,()=>{V(b.current)}),V(b.current)},ie=()=>{var e,t,n,r;try{(e=j.current)==null||e.abort(),j.current=null;let o=q.current;if(o.isClick){Pe(o.startY);return}let f=o.yList,d=0;if(f.length>1){let v=f.length,[E,J]=(t=f[v-2])!=null?t:[0,0],[Ue,Fe]=(n=f[v-1])!=null?n:[0,0],ge=Fe-J;if(ge>0){let me=(E-Ue)/m*1e3/ge,ze=Qe,Be=me>0?1:-1;d=Math.min(Math.abs(me),ze)*Be}}b.current=(r=o.touchScroll)!=null?r:b.current,Ae(d)}catch(o){console.error("Error in finalizeDragAndStartInertiaScroll:",o)}finally{H.current=!1}},F=(0,u.useCallback)(e=>{var r;if(!i.length)return;let t=H.current,n=!!((r=y.current)!=null&&r.contains(e.target))||e.target===y.current;(t||n)&&e.cancelable&&(e.preventDefault(),ie())},[ie]),le=e=>{e.preventDefault();let t=Date.now();if(t-re.current<100)return;let n=Math.sign(e.deltaY);n&&(re.current=t,A(n))},_=(0,u.useCallback)(e=>{if(!i.length||!y.current)return;let t=H.current,n=y.current.contains(e.target)||e.target===y.current;(t||n)&&e.cancelable&&(e.preventDefault(),le(e))},[le]),Z=(0,u.useCallback)(e=>{let t=Y.current;if(!x||t===-1)return;let n=x.getPickerIndices(),r=n.indexOf(t);if(r===-1)return;let o;e==="prev"?o=r>0?r-1:n.length-1:o=r<n.length-1?r+1:0;let f=n[o],d=x.getPickerRef(f);if(d){let v=y.current;v&&(v.tabIndex=-1),d.tabIndex=0,x.setActiveIndex(f),d.focus()}},[x]),{handleTypeaheadSearch:ue,resetTypeahead:de}=we(i,{getTextValue:et,getCurrentIndex:(0,u.useCallback)(()=>Math.round(b.current),[]),onMatch:(0,u.useCallback)(e=>{let t=e-Math.round(b.current);A(t)},[])}),He=(0,u.useCallback)(e=>{if(i.length)switch(e.key){case"ArrowUp":e.preventDefault(),A(-1);break;case"ArrowDown":e.preventDefault(),A(1);break;case"ArrowLeft":e.preventDefault(),Z("prev");break;case"ArrowRight":e.preventDefault(),Z("next");break;case"Home":c||(e.preventDefault(),A(-b.current));break;case"End":c||(e.preventDefault(),A(i.length-1-b.current));break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),ue(e.key));break}},[i.length,c,Z,ue]),Ye=(0,u.useCallback)(()=>{oe(!0);let e=Y.current;x&&e!==-1&&x.setActiveIndex(e)},[x]),Oe=(0,u.useCallback)(()=>{oe(!1),de()},[de]);(0,u.useEffect)(()=>{let e=y.current;if(!e)return;let t={passive:!1};return e.addEventListener("touchstart",U,t),e.addEventListener("touchend",F,t),e.addEventListener("wheel",_,t),document.addEventListener("mousedown",U,t),document.addEventListener("mouseup",F,t),()=>{e.removeEventListener("touchstart",U),e.removeEventListener("touchend",F),e.removeEventListener("wheel",_),document.removeEventListener("mousedown",U),document.removeEventListener("mouseup",F)}},[F,U,_]),(0,u.useEffect)(()=>{Le(I)},[I,a,i]);let he=Y.current,Ge=(pe=x==null?void 0:x.activeIndex)!=null?pe:-1;return M.default.createElement("div",{ref:De,"data-rwp":!0,tabIndex:x&&he!==-1?Ge===he?0:-1:0,onKeyDown:He,onFocus:Ye,onBlur:Oe,style:{height:ee}},M.default.createElement("ul",{ref:z,"data-rwp-options":!0},Se),M.default.createElement("div",{className:l==null?void 0:l.highlightWrapper,"data-rwp-highlight-wrapper":!0,"data-rwp-focused":Me||void 0,"data-slot":"highlight-wrapper",style:{height:m,lineHeight:`${m}px`}},M.default.createElement("ul",{ref:$,"data-rwp-highlight-list":!0,style:{top:c?-m:void 0}},Ce)))}0&&(module.exports={WheelPicker,WheelPickerWrapper});
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import
|
|
1
|
+
"use client";import C from"react";import{useCallback as w,useEffect as Ee,useMemo as V,useRef as I,useState as Qe}from"react";import $e,{createContext as qe,useCallback as J,useContext as je,useMemo as Xe,useRef as me,useState as _e}from"react";var be=qe(null);function ve(){return je(be)}function Te({children:i}){let[d,p]=_e(-1),f=me(0),a=me(new Map),h=J((c,y)=>{let x=c!==null?c:f.current++;return a.current.set(x,y),p(s=>s===-1?x:s),x},[]),M=J(c=>{var y;return(y=a.current.get(c))!=null?y:null},[]),D=J(()=>Array.from(a.current.keys()).sort((c,y)=>c-y),[]),W=Xe(()=>({activeIndex:d,setActiveIndex:p,register:h,getPickerRef:M,getPickerIndices:D}),[d,p,h,M,D]);return $e.createElement(be.Provider,{value:W},i)}import A from"react";function ke(i){let d=A.useRef(i);return A.useEffect(()=>{d.current=i}),A.useMemo(()=>(...p)=>{var f;return(f=d.current)==null?void 0:f.call(d,...p)},[])}function Ze({defaultProp:i,onChange:d}){let p=A.useState(i),[f]=p,a=A.useRef(f),h=ke(d);return A.useEffect(()=>{a.current!==f&&(h(f),a.current=f)},[f,a,h]),p}function xe({prop:i,defaultProp:d,onChange:p=()=>{}}){let[f,a]=Ze({defaultProp:d,onChange:p}),h=i!==void 0,M=h?i:f,D=ke(p),W=A.useCallback(c=>{if(h){let x=typeof c=="function"?c(i):c;x!==i&&D(x)}else a(c)},[h,i,a,D]);return[M,W]}import{useCallback as ye,useRef as we}from"react";var Je=500;function Ie(i,{getTextValue:d,getCurrentIndex:p,onMatch:f}){let a=we(""),h=we(null),M=ye(()=>{a.current="",h.current&&(clearTimeout(h.current),h.current=null)},[]);return{handleTypeaheadSearch:ye(W=>{h.current&&clearTimeout(h.current),a.current+=W.toLowerCase();let c=a.current,x=c.length>1&&Array.from(c).every(v=>v===c[0])?c[0]:c,s=p(),g=x.length===1,L=-1;if(g)for(let v=1;v<=i.length;v++){let S=(s+v)%i.length;if(d(i[S]).toLowerCase().startsWith(x)){L=S;break}}else L=i.findIndex(v=>d(v).toLowerCase().startsWith(x));L!==-1&&f(L),h.current=setTimeout(()=>{a.current="",h.current=null},Je)},[i,d,p,f]),resetTypeahead:M}}var Me=.3,Ne=30,et=i=>Math.pow(i-1,3)+1,Q=(i,d,p)=>Math.max(d,Math.min(i,p)),tt=i=>{var d;return(d=i.textValue)!=null?d:typeof i.label=="string"?i.label:String(i.value)},Tt=({className:i,children:d})=>C.createElement(Te,null,C.createElement("div",{className:i,"data-rwp-wrapper":!0},d));function kt({defaultValue:i,value:d,onValueChange:p,options:f,infinite:a=!1,visibleCount:h=20,dragSensitivity:M=3,scrollSensitivity:D=5,optionItemHeight:W=30,classNames:c}){var he,fe;let[y=(he=f[0])==null?void 0:he.value,x]=xe({defaultProp:i,prop:d,onChange:p}),s=V(()=>{if(!a)return f;let e=[],t=Math.ceil(h/2);if(f.length===0)return e;for(;e.length<t;)e.push(...f);return e},[h,f,a]),g=W,L=g*.5,v=360/h,S=g/Math.tan(v*Math.PI/180),N=Math.round(S*2+g*.25),P=h>>2,ee=M*10,De=10,k=I(null),F=I(null),K=I(null),m=I(0),te=I(0),H=I(!1),ne=I(0),[Se,re]=Qe(!1),Y=I(-1),T=ve(),Ce=w(e=>{if(k.current=e,e&&T){let t=Y.current===-1?null:Y.current;Y.current=T.register(t,e)}},[T]),$=I({startY:0,yList:[],touchScroll:0,isClick:!0}),q=I(null),We=V(()=>{let e=(n,r,o)=>C.createElement("li",{key:r,className:c==null?void 0:c.optionItem,"data-slot":"option-item","data-rwp-option":!0,"data-index":r,style:{top:-L,height:g,lineHeight:`${g}px`,transform:`rotateX(${o}deg) translateZ(${S}px)`,visibility:"hidden"}},n.label),t=s.map((n,r)=>e(n,r,-v*r));if(a)for(let n=0;n<P;++n){let r=-n-1,o=n+s.length;t.unshift(e(s[s.length-n-1],r,v*(n+1))),t.push(e(s[n],o,-v*o))}return t},[g,L,a,v,s,P,S,c==null?void 0:c.optionItem]),Le=V(()=>{let e=(n,r)=>C.createElement("li",{key:r,className:c==null?void 0:c.highlightItem,"data-slot":"highlight-item","data-rwp-highlight-item":!0,style:{height:g}},n.label),t=s.map((n,r)=>e(n,r));if(a){let n=s[0],r=s[s.length-1];t.unshift(e(r,"infinite-start")),t.push(e(n,"infinite-end"))}return t},[c==null?void 0:c.highlightItem,g,a,s]),Pe=V(()=>{let e=0,t=Math.PI/180,n=[];for(let r=P-1;r>=-P+1;--r){let o=r*v,u=g*Math.cos(o*t),l=e;e+=u,n.push([l,e])}return n},[v,g,P]),j=e=>(e%s.length+s.length)%s.length,O=e=>{let t=a?j(e):e;if(F.current){let n=`translateZ(${-S}px) rotateX(${v*t}deg)`;F.current.style.transform=n,F.current.childNodes.forEach(r=>{let o=r,u=Math.abs(Number(o.dataset.index)-t);o.style.visibility=u>P?"hidden":"visible"})}return K.current&&(K.current.style.transform=`translateY(${-t*g}px)`),t},z=()=>{cancelAnimationFrame(te.current)},oe=(e,t,n,r)=>{if(e===t||n===0){O(e);return}let o=performance.now(),u=t-e,l=b=>{let E=(b-o)/1e3;if(E<n){let Z=et(E/n);m.current=O(e+Z*u),te.current=requestAnimationFrame(l)}else z(),m.current=O(t),r==null||r()};requestAnimationFrame(l)},B=e=>{let t=j(e)|0,n=a?t:Math.min(Math.max(t,0),s.length-1);if(!a&&n!==e)return;m.current=O(n);let r=s[m.current];x(r.value)},Re=e=>{let t=s.findIndex(n=>n.value===e);if(t===-1){console.error("Invalid value selected:",e);return}z(),B(t)},R=e=>{let t=m.current,n=t+e;a?n=Math.round(n):n=Q(Math.round(n),0,s.length-1);let r=Math.abs(n-t);if(r===0)return;let o=Math.sqrt(r/D);z(),oe(t,n,o,()=>{B(m.current)})},Ae=e=>{let t=k.current;if(!t){console.error("Container reference is not set.");return}let{top:n}=t.getBoundingClientRect(),r=e-n,o=Pe.findIndex(([l,b])=>r>=l&&r<=b);if(o===-1){console.error("No item found for click position:",r);return}let u=(P-o-1)*-1;R(u)},He=e=>{var t,n;try{let r=(e instanceof MouseEvent?e.clientY:(n=(t=e.touches)==null?void 0:t[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)/g,l=m.current+u;if(a)l=j(l);else{let b=s.length;l<0?l*=Me:l>b&&(l=b+(l-b)*Me)}o.touchScroll=O(l)}catch(r){console.error("Error in updateScrollDuringDrag:",r)}},se=e=>{var t;!H.current&&!((t=k.current)!=null&&t.contains(e.target))&&e.target!==k.current||(e.cancelable&&e.preventDefault(),s.length&&He(e))},ce=e=>{var t,n,r;try{H.current=!0;let o=new AbortController,{signal:u}=o;q.current=o;let l={signal:u,passive:!1};(t=k.current)==null||t.addEventListener("touchmove",se,l),document.addEventListener("mousemove",se,l);let b=(e instanceof MouseEvent?e.clientY:(r=(n=e.touches)==null?void 0:n[0])==null?void 0:r.clientY)||0,E=$.current;E.startY=b,E.yList=[[b,Date.now()]],E.touchScroll=m.current,E.isClick=!0,z()}catch(o){console.error("Error in initiateDragGesture:",o)}},G=w(e=>{var r;let t=H.current,n=!!((r=k.current)!=null&&r.contains(e.target))||e.target===k.current;(t||n)&&e.cancelable&&(e.preventDefault(),s.length&&ce(e))},[ce]),Ye=e=>{let t=m.current,n=t,r=e>0?-ee:ee,o=0;if(a){o=Math.abs(e/r);let u=e*o+.5*r*o*o;n=Math.round(t+u)}else if(t<0||t>s.length-1){let u=Q(t,0,s.length-1),l=t-u;r=De,o=Math.sqrt(Math.abs(l/r)),e=r*o,e=t>0?-e:e,n=u}else{o=Math.abs(e/r);let u=e*o+.5*r*o*o;n=Math.round(t+u),n=Q(n,0,s.length-1);let l=n-t;o=Math.sqrt(Math.abs(l/r))}oe(t,n,o,()=>{B(m.current)}),B(m.current)},ae=()=>{var e,t,n,r;try{(e=q.current)==null||e.abort(),q.current=null;let o=$.current;if(o.isClick){Ae(o.startY);return}let u=o.yList,l=0;if(u.length>1){let b=u.length,[E,Z]=(t=u[b-2])!=null?t:[0,0],[ze,Be]=(n=u[b-1])!=null?n:[0,0],pe=Be-Z;if(pe>0){let ge=(E-ze)/g*1e3/pe,Ve=Ne,Ke=ge>0?1:-1;l=Math.min(Math.abs(ge),Ve)*Ke}}m.current=(r=o.touchScroll)!=null?r:m.current,Ye(l)}catch(o){console.error("Error in finalizeDragAndStartInertiaScroll:",o)}finally{H.current=!1}},U=w(e=>{var r;if(!s.length)return;let t=H.current,n=!!((r=k.current)!=null&&r.contains(e.target))||e.target===k.current;(t||n)&&e.cancelable&&(e.preventDefault(),ae())},[ae]),ie=e=>{e.preventDefault();let t=Date.now();if(t-ne.current<100)return;let n=Math.sign(e.deltaY);n&&(ne.current=t,R(n))},X=w(e=>{if(!s.length||!k.current)return;let t=H.current,n=k.current.contains(e.target)||e.target===k.current;(t||n)&&e.cancelable&&(e.preventDefault(),ie(e))},[ie]),_=w(e=>{let t=Y.current;if(!T||t===-1)return;let n=T.getPickerIndices(),r=n.indexOf(t);if(r===-1)return;let o;e==="prev"?o=r>0?r-1:n.length-1:o=r<n.length-1?r+1:0;let u=n[o],l=T.getPickerRef(u);if(l){let b=k.current;b&&(b.tabIndex=-1),l.tabIndex=0,T.setActiveIndex(u),l.focus()}},[T]),{handleTypeaheadSearch:le,resetTypeahead:ue}=Ie(s,{getTextValue:tt,getCurrentIndex:w(()=>Math.round(m.current),[]),onMatch:w(e=>{let t=e-Math.round(m.current);R(t)},[])}),Oe=w(e=>{if(s.length)switch(e.key){case"ArrowUp":e.preventDefault(),R(-1);break;case"ArrowDown":e.preventDefault(),R(1);break;case"ArrowLeft":e.preventDefault(),_("prev");break;case"ArrowRight":e.preventDefault(),_("next");break;case"Home":a||(e.preventDefault(),R(-m.current));break;case"End":a||(e.preventDefault(),R(s.length-1-m.current));break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),le(e.key));break}},[s.length,a,_,le]),Ge=w(()=>{re(!0);let e=Y.current;T&&e!==-1&&T.setActiveIndex(e)},[T]),Ue=w(()=>{re(!1),ue()},[ue]);Ee(()=>{let e=k.current;if(!e)return;let t={passive:!1};return e.addEventListener("touchstart",G,t),e.addEventListener("touchend",U,t),e.addEventListener("wheel",X,t),document.addEventListener("mousedown",G,t),document.addEventListener("mouseup",U,t),()=>{e.removeEventListener("touchstart",G),e.removeEventListener("touchend",U),e.removeEventListener("wheel",X),document.removeEventListener("mousedown",G),document.removeEventListener("mouseup",U)}},[U,G,X]),Ee(()=>{Re(y)},[y,d,s]);let de=Y.current,Fe=(fe=T==null?void 0:T.activeIndex)!=null?fe:-1;return C.createElement("div",{ref:Ce,"data-rwp":!0,tabIndex:T&&de!==-1?Fe===de?0:-1:0,onKeyDown:Oe,onFocus:Ge,onBlur:Ue,style:{height:N}},C.createElement("ul",{ref:F,"data-rwp-options":!0},We),C.createElement("div",{className:c==null?void 0:c.highlightWrapper,"data-rwp-highlight-wrapper":!0,"data-rwp-focused":Se||void 0,"data-slot":"highlight-wrapper",style:{height:g,lineHeight:`${g}px`}},C.createElement("ul",{ref:K,"data-rwp-highlight-list":!0,style:{top:a?-g:void 0}},Le)))}export{kt as WheelPicker,Tt as WheelPickerWrapper};
|