@ncdai/react-wheel-picker 1.0.11 → 1.0.13

package/dist/index.css

@@ -1 +1 @@
-[data-rwp-wrapper]{display:flex;position:relative;width:100%;align-items:stretch;justify-content:space-between;overflow:hidden;perspective:2000px;-webkit-user-select:none;-moz-user-select:none;user-select:none}[data-rwp]{position:relative;flex:1;overflow:hidden;cursor:ns-resize;text-align:center;-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;top:50%;width:100%;font-size:1rem;font-weight:500;overflow:hidden;transform:translateY(-50%)}[data-rwp-highlight-list]{position:absolute;width:100%;list-style:none}[data-rwp-options]{display:block;position:absolute;top:50%;left:0;width:100%;height:0;margin-left:auto;margin-right:auto;-webkit-font-smoothing:subpixel-antialiased;will-change:transform;backface-visibility:hidden;transform-style:preserve-3d;list-style:none}[data-rwp-option]{position:absolute;top:0;left:0;width:100%;-webkit-font-smoothing:subpixel-antialiased;will-change:visibility;font-size:.875rem}
+[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%;list-style:none}[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;list-style:none}[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

@@ -1,4 +1,4 @@
-import React$1 from 'react';
+import React, { ReactNode } from 'react';
 
 /**
  * Represents a single option in the wheel picker
@@ -6,8 +6,8 @@ import React$1 from 'react';
 type WheelPickerOption = {
     /** The value that will be returned when this option is selected */
     value: string;
-    /** The text label displayed for this option */
-    label: string;
+    /** The content displayed for this option */
+    label: ReactNode;
 };
 /**
  * Custom class names for styling different parts of the wheel picker
@@ -38,6 +38,8 @@ type WheelPickerProps = {
     visibleCount?: number;
     /** Sensitivity of the drag interaction (higher = more sensitive) */
     dragSensitivity?: number;
+    /** Height (in pixels) of each item in the picker list */
+    optionItemHeight?: number;
     /** Custom class names for styling different parts of the wheel */
     classNames?: WheelPickerClassNames;
 };
@@ -48,10 +50,10 @@ type WheelPickerWrapperProps = {
     /** Additional CSS class name for the wrapper */
     className?: string;
     /** Child elements to be rendered inside the wrapper */
-    children: React.ReactNode;
+    children: ReactNode;
 };
 
-declare const WheelPickerWrapper: React$1.FC<WheelPickerWrapperProps>;
-declare const WheelPicker: React$1.FC<WheelPickerProps>;
+declare const WheelPickerWrapper: React.FC<WheelPickerWrapperProps>;
+declare const WheelPicker: React.FC<WheelPickerProps>;
 
 export { WheelPicker, type WheelPickerClassNames, type WheelPickerOption, WheelPickerWrapper };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React$1 from 'react';
+import React, { ReactNode } from 'react';
 
 /**
  * Represents a single option in the wheel picker
@@ -6,8 +6,8 @@ import React$1 from 'react';
 type WheelPickerOption = {
     /** The value that will be returned when this option is selected */
     value: string;
-    /** The text label displayed for this option */
-    label: string;
+    /** The content displayed for this option */
+    label: ReactNode;
 };
 /**
  * Custom class names for styling different parts of the wheel picker
@@ -38,6 +38,8 @@ type WheelPickerProps = {
     visibleCount?: number;
     /** Sensitivity of the drag interaction (higher = more sensitive) */
     dragSensitivity?: number;
+    /** Height (in pixels) of each item in the picker list */
+    optionItemHeight?: number;
     /** Custom class names for styling different parts of the wheel */
     classNames?: WheelPickerClassNames;
 };
@@ -48,10 +50,10 @@ type WheelPickerWrapperProps = {
     /** Additional CSS class name for the wrapper */
     className?: string;
     /** Child elements to be rendered inside the wrapper */
-    children: React.ReactNode;
+    children: ReactNode;
 };
 
-declare const WheelPickerWrapper: React$1.FC<WheelPickerWrapperProps>;
-declare const WheelPicker: React$1.FC<WheelPickerProps>;
+declare const WheelPickerWrapper: React.FC<WheelPickerWrapperProps>;
+declare const WheelPicker: React.FC<WheelPickerProps>;
 
 export { WheelPicker, type WheelPickerClassNames, type WheelPickerOption, WheelPickerWrapper };

package/dist/index.js

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

package/dist/index.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncdai/react-wheel-picker",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.",
   "publishConfig": {
     "access": "public",