@ncdai/react-wheel-picker 1.0.11 → 1.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -1 +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}
1
+ [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:ns-resize;-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 CHANGED
@@ -1,4 +1,4 @@
1
- import React$1 from 'react';
1
+ import React, { ReactNode } from 'react';
2
2
 
3
3
  /**
4
4
  * Represents a single option in the wheel picker
@@ -6,8 +6,8 @@ import React$1 from 'react';
6
6
  type WheelPickerOption = {
7
7
  /** The value that will be returned when this option is selected */
8
8
  value: string;
9
- /** The text label displayed for this option */
10
- label: string;
9
+ /** The content displayed for this option */
10
+ label: ReactNode;
11
11
  };
12
12
  /**
13
13
  * Custom class names for styling different parts of the wheel picker
@@ -38,6 +38,8 @@ type WheelPickerProps = {
38
38
  visibleCount?: number;
39
39
  /** Sensitivity of the drag interaction (higher = more sensitive) */
40
40
  dragSensitivity?: number;
41
+ /** Height (in pixels) of each item in the picker list */
42
+ optionItemHeight?: number;
41
43
  /** Custom class names for styling different parts of the wheel */
42
44
  classNames?: WheelPickerClassNames;
43
45
  };
@@ -48,10 +50,10 @@ type WheelPickerWrapperProps = {
48
50
  /** Additional CSS class name for the wrapper */
49
51
  className?: string;
50
52
  /** Child elements to be rendered inside the wrapper */
51
- children: React.ReactNode;
53
+ children: ReactNode;
52
54
  };
53
55
 
54
- declare const WheelPickerWrapper: React$1.FC<WheelPickerWrapperProps>;
55
- declare const WheelPicker: React$1.FC<WheelPickerProps>;
56
+ declare const WheelPickerWrapper: React.FC<WheelPickerWrapperProps>;
57
+ declare const WheelPicker: React.FC<WheelPickerProps>;
56
58
 
57
59
  export { WheelPicker, type WheelPickerClassNames, type WheelPickerOption, WheelPickerWrapper };
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React$1 from 'react';
1
+ import React, { ReactNode } from 'react';
2
2
 
3
3
  /**
4
4
  * Represents a single option in the wheel picker
@@ -6,8 +6,8 @@ import React$1 from 'react';
6
6
  type WheelPickerOption = {
7
7
  /** The value that will be returned when this option is selected */
8
8
  value: string;
9
- /** The text label displayed for this option */
10
- label: string;
9
+ /** The content displayed for this option */
10
+ label: ReactNode;
11
11
  };
12
12
  /**
13
13
  * Custom class names for styling different parts of the wheel picker
@@ -38,6 +38,8 @@ type WheelPickerProps = {
38
38
  visibleCount?: number;
39
39
  /** Sensitivity of the drag interaction (higher = more sensitive) */
40
40
  dragSensitivity?: number;
41
+ /** Height (in pixels) of each item in the picker list */
42
+ optionItemHeight?: number;
41
43
  /** Custom class names for styling different parts of the wheel */
42
44
  classNames?: WheelPickerClassNames;
43
45
  };
@@ -48,10 +50,10 @@ type WheelPickerWrapperProps = {
48
50
  /** Additional CSS class name for the wrapper */
49
51
  className?: string;
50
52
  /** Child elements to be rendered inside the wrapper */
51
- children: React.ReactNode;
53
+ children: ReactNode;
52
54
  };
53
55
 
54
- declare const WheelPickerWrapper: React$1.FC<WheelPickerWrapperProps>;
55
- declare const WheelPicker: React$1.FC<WheelPickerProps>;
56
+ declare const WheelPickerWrapper: React.FC<WheelPickerWrapperProps>;
57
+ declare const WheelPicker: React.FC<WheelPickerProps>;
56
58
 
57
59
  export { WheelPicker, type WheelPickerClassNames, type WheelPickerOption, WheelPickerWrapper };
package/dist/index.js CHANGED
@@ -1 +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});
1
+ "use strict";"use client";var yt=Object.create;var Y=Object.defineProperty;var Et=Object.getOwnPropertyDescriptor;var Mt=Object.getOwnPropertyNames;var Tt=Object.getPrototypeOf,Dt=Object.prototype.hasOwnProperty;var St=(s,i)=>{for(var d in i)Y(s,d,{get:i[d],enumerable:!0})},ot=(s,i,d,g)=>{if(i&&typeof i=="object"||typeof i=="function")for(let c of Mt(i))!Dt.call(s,c)&&c!==d&&Y(s,c,{get:()=>i[c],enumerable:!(g=Et(i,c))||g.enumerable});return s};var st=(s,i,d)=>(d=s!=null?yt(Tt(s)):{},ot(i||!s||!s.__esModule?Y(d,"default",{value:s,enumerable:!0}):d,s)),kt=s=>ot(Y({},"__esModule",{value:!0}),s);var Yt={};St(Yt,{WheelPicker:()=>Ct,WheelPickerWrapper:()=>xt});module.exports=kt(Yt);var M=st(require("react")),h=require("react");var E=st(require("react"));function at(s){let i=E.default.useRef(s);return E.default.useEffect(()=>{i.current=s}),E.default.useMemo(()=>(...d)=>{var g;return(g=i.current)==null?void 0:g.call(i,...d)},[])}function It({defaultProp:s,onChange:i}){let d=E.default.useState(s),[g]=d,c=E.default.useRef(g),v=at(i);return E.default.useEffect(()=>{c.current!==g&&(v(g),c.current=g)},[g,c,v]),d}function it({prop:s,defaultProp:i,onChange:d=()=>{}}){let[g,c]=It({defaultProp:i,onChange:d}),v=s!==void 0,A=v?s:g,I=at(d),f=E.default.useCallback(T=>{if(v){let a=typeof T=="function"?T(s):T;a!==s&&I(a)}else c(T)},[v,s,c,I]);return[A,f]}var ct=.3,Lt=30,Wt=s=>Math.pow(s-1,3)+1,P=(s,i,d)=>Math.max(i,Math.min(s,d)),xt=({className:s,children:i})=>M.default.createElement("div",{className:s,"data-rwp-wrapper":!0},i),Ct=({defaultValue:s,value:i,onValueChange:d,options:g,infinite:c=!1,visibleCount:v=20,dragSensitivity:A=3,optionItemHeight:I=30,classNames:f})=>{var tt,et;let[T=(et=(tt=g[0])==null?void 0:tt.value)!=null?et:"",B]=it({defaultProp:s,prop:i,onChange:d}),a=(0,h.useMemo)(()=>{if(!c)return g;let t=[],e=Math.ceil(v/2);if(g.length===0)return t;for(;t.length<e;)t.push(...g);return t},[v,g,c]),p=I,j=p*.5,D=360/v,L=p/Math.tan(D*Math.PI/180),lt=Math.round(L*2+p*.25),R=v>>2,X=A*10,ut=10,b=(0,h.useRef)(null),W=(0,h.useRef)(null),H=(0,h.useRef)(null),m=(0,h.useRef)(0),G=(0,h.useRef)(0),S=(0,h.useRef)(!1),Z=(0,h.useRef)(0),O=(0,h.useRef)({startY:0,yList:[]}),z=(0,h.useRef)(null),ht=(0,h.useMemo)(()=>{let t=(n,r,o)=>M.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"}},n.label),e=a.map((n,r)=>t(n,r,-D*r));if(c)for(let n=0;n<R;++n){let r=-n-1,o=n+a.length;e.unshift(t(a[a.length-n-1],r,D*(n+1))),e.push(t(a[n],o,-D*o))}return e},[p,j,c,D,a,R,L,f==null?void 0:f.optionItem]),dt=(0,h.useMemo)(()=>{let t=(n,r)=>M.default.createElement("li",{key:r,className:f==null?void 0:f.highlightItem,"data-slot":"highlight-item","data-rwp-highlight-item":!0,style:{height:p}},n.label),e=a.map((n,r)=>t(n,r));if(c){let n=a[0],r=a[a.length-1];e.unshift(t(r,"infinite-start")),e.push(t(n,"infinite-end"))}return e},[f==null?void 0:f.highlightItem,p,c,a]),F=t=>(t%a.length+a.length)%a.length,k=t=>{let e=c?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(G.current)},K=(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 q=Wt(y/n);m.current=k(t+q*u),G.current=requestAnimationFrame(l)}else x(),m.current=k(e),r==null||r()};requestAnimationFrame(l)},C=t=>{let e=F(t)|0,n=c?e:Math.min(Math.max(e,0),a.length-1);if(!c&&n!==t)return;m.current=k(n);let r=a[m.current];B(r.value)},gt=t=>{let e=a.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(c)l=F(l);else{let w=a.length;l<0?l*=ct:l>w&&(l=w+(l-w)*ct)}o.touchScroll=k(l)}catch(r){console.error("Error in updateScrollDuringDrag:",r)}},_=t=>{!S.current&&!b.current.contains(t.target)&&t.target!==b.current||(t.cancelable&&t.preventDefault(),a.length&&ft(t))},J=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",_,l),document.addEventListener("mousemove",_,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(),a.length&&J(t))},[J]),pt=t=>{let e=m.current,n=e,r=t>0?-X:X,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>a.length-1){let u=P(e,0,a.length-1),l=e-u;r=ut,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=P(n,0,a.length-1);let l=n-e;o=Math.sqrt(Math.abs(l/r))}K(e,n,o,()=>{C(m.current)}),C(m.current)},Q=()=>{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,q]=(e=u[w-2])!=null?e:[0,0],[mt,bt]=(n=u[w-1])!=null?n:[0,0],nt=bt-q;if(nt>0){let rt=(y-mt)/p*1e3/nt,vt=Lt,wt=rt>0?1:-1;l=Math.min(Math.abs(rt),vt)*wt}}m.current=(r=o.touchScroll)!=null?r:m.current,pt(l)}catch(o){console.error("Error in finalizeDragAndStartInertiaScroll:",o)}finally{S.current=!1}},$=(0,h.useCallback)(t=>{if(!a.length)return;let e=S.current,n=b.current.contains(t.target)||t.target===b.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=m.current,o=r+n;c?o=Math.round(o):o=P(Math.round(o),0,a.length-1);let u=Math.abs(o-r);if(u===0)return;let l=Math.sqrt(u/5);x(),K(r,o,l,()=>{C(m.current)})},N=(0,h.useCallback)(t=>{if(!a.length||!b.current)return;let e=S.current,n=b.current.contains(t.target)||t.target===b.current;(e||n)&&t.cancelable&&(t.preventDefault(),V(t))},[V]);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",$,r),t.addEventListener("wheel",N,r),document.addEventListener("mousedown",U,r),document.addEventListener("mouseup",$,r),()=>e.abort()},[$,U,N]),(0,h.useEffect)(()=>{gt(T)},[T,i]),M.default.createElement("div",{ref:b,"data-rwp":!0,style:{height:lt}},M.default.createElement("ul",{ref:W,"data-rwp-options":!0},ht),M.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`}},M.default.createElement("ul",{ref:H,"data-rwp-highlight-list":!0,style:{top:c?-p:void 0}},dt)))};0&&(module.exports={WheelPicker,WheelPickerWrapper});
package/dist/index.mjs CHANGED
@@ -1 +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};
1
+ "use client";import T from"react";import{useCallback as q,useEffect as it,useMemo as P,useRef as w}from"react";import M from"react";function st(l){let d=M.useRef(l);return M.useEffect(()=>{d.current=l}),M.useMemo(()=>(...m)=>{var h;return(h=d.current)==null?void 0:h.call(d,...m)},[])}function yt({defaultProp:l,onChange:d}){let m=M.useState(l),[h]=m,c=M.useRef(h),b=st(d);return M.useEffect(()=>{c.current!==h&&(b(h),c.current=h)},[h,c,b]),m}function at({prop:l,defaultProp:d,onChange:m=()=>{}}){let[h,c]=yt({defaultProp:d,onChange:m}),b=l!==void 0,Y=b?l:h,I=st(m),u=M.useCallback(E=>{if(b){let s=typeof E=="function"?E(l):E;s!==l&&I(s)}else c(E)},[b,l,c,I]);return[Y,u]}var ct=.3,Et=30,Mt=l=>Math.pow(l-1,3)+1,B=(l,d,m)=>Math.max(d,Math.min(l,m)),At=({className:l,children:d})=>T.createElement("div",{className:l,"data-rwp-wrapper":!0},d),Rt=({defaultValue:l,value:d,onValueChange:m,options:h,infinite:c=!1,visibleCount:b=20,dragSensitivity:Y=3,optionItemHeight:I=30,classNames:u})=>{var et,nt;let[E=(nt=(et=h[0])==null?void 0:et.value)!=null?nt:"",j]=at({defaultProp:l,prop:d,onChange:m}),s=P(()=>{if(!c)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,c]),g=I,X=g*.5,D=360/b,L=g/Math.tan(D*Math.PI/180),lt=Math.round(L*2+g*.25),A=b>>2,G=Y*10,ut=10,p=w(null),W=w(null),R=w(null),f=w(0),Z=w(0),S=w(!1),K=w(0),H=w({startY:0,yList:[]}),O=w(null),ht=P(()=>{let t=(n,r,o)=>T.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:g,lineHeight:`${g}px`,transform:`rotateX(${o}deg) translateZ(${L}px)`,visibility:"hidden"}},n.label),e=s.map((n,r)=>t(n,r,-D*r));if(c)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},[g,X,c,D,s,A,L,u==null?void 0:u.optionItem]),dt=P(()=>{let t=(n,r)=>T.createElement("li",{key:r,className:u==null?void 0:u.highlightItem,"data-slot":"highlight-item","data-rwp-highlight-item":!0,style:{height:g}},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},[u==null?void 0:u.highlightItem,g,c,s]),z=t=>(t%s.length+s.length)%s.length,k=t=>{let e=c?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,i=Math.abs(Number(o.dataset.index)-e);o.style.visibility=i>A?"hidden":"visible"})}return R.current&&(R.current.style.transform=`translateY(${-e*g}px)`),e},x=()=>{cancelAnimationFrame(Z.current)},_=(t,e,n,r)=>{if(t===e||n===0){k(t);return}let o=performance.now(),i=e-t,a=v=>{let y=(v-o)/1e3;if(y<n){let $=Mt(y/n);f.current=k(t+$*i),Z.current=requestAnimationFrame(a)}else x(),f.current=k(e),r==null||r()};requestAnimationFrame(a)},C=t=>{let e=z(t)|0,n=c?e:Math.min(Math.max(e,0),s.length-1);if(!c&&n!==t)return;f.current=k(n);let r=s[f.current];j(r.value)},gt=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 i=(o.startY-r)/g,a=f.current+i;if(c)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)}},J=t=>{!S.current&&!p.current.contains(t.target)&&t.target!==p.current||(t.cancelable&&t.preventDefault(),s.length&&ft(t))},Q=t=>{var e,n,r;try{S.current=!0;let o=new AbortController,{signal:i}=o;O.current=o;let a={signal:i,passive:!1};(e=p.current)==null||e.addEventListener("touchmove",J,a),document.addEventListener("mousemove",J,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=f.current,x()}catch(o){console.error("Error in initiateDragGesture:",o)}},F=q(t=>{let e=S.current,n=p.current.contains(t.target)||t.target===p.current;(e||n)&&t.cancelable&&(t.preventDefault(),s.length&&Q(t))},[Q]),pt=t=>{let e=f.current,n=e,r=t>0?-G:G,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=B(e,0,s.length-1),a=e-i;r=ut,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=B(n,0,s.length-1);let a=n-e;o=Math.sqrt(Math.abs(a/r))}_(e,n,o,()=>{C(f.current)}),C(f.current)},V=()=>{var t,e,n,r;try{(t=O.current)==null||t.abort(),O.current=null;let o=H.current,i=o.yList,a=0;if(i.length>1){let v=i.length,[y,$]=(e=i[v-2])!=null?e:[0,0],[mt,bt]=(n=i[v-1])!=null?n:[0,0],rt=bt-$;if(rt>0){let ot=(y-mt)/g*1e3/rt,vt=Et,wt=ot>0?1:-1;a=Math.min(Math.abs(ot),vt)*wt}}f.current=(r=o.touchScroll)!=null?r:f.current,pt(a)}catch(o){console.error("Error in finalizeDragAndStartInertiaScroll:",o)}finally{S.current=!1}},U=q(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(),V())},[V]),N=t=>{t.preventDefault();let e=Date.now();if(e-K.current<100)return;let n=Math.sign(t.deltaY);if(!n)return;K.current=e;let r=f.current,o=r+n;c?o=Math.round(o):o=B(Math.round(o),0,s.length-1);let i=Math.abs(o-r);if(i===0)return;let a=Math.sqrt(i/5);x(),_(r,o,a,()=>{C(f.current)})},tt=q(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(),N(t))},[N]);return it(()=>{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",tt,r),document.addEventListener("mousedown",F,r),document.addEventListener("mouseup",U,r),()=>e.abort()},[U,F,tt]),it(()=>{gt(E)},[E,d]),T.createElement("div",{ref:p,"data-rwp":!0,style:{height:lt}},T.createElement("ul",{ref:W,"data-rwp-options":!0},ht),T.createElement("div",{className:u==null?void 0:u.highlightWrapper,"data-rwp-highlight-wrapper":!0,"data-slot":"highlight-wrapper",style:{height:g,lineHeight:`${g}px`}},T.createElement("ul",{ref:R,"data-rwp-highlight-list":!0,style:{top:c?-g:void 0}},dt)))};export{Rt as WheelPicker,At as WheelPickerWrapper};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ncdai/react-wheel-picker",
3
- "version": "1.0.11",
3
+ "version": "1.0.12",
4
4
  "description": "iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.",
5
5
  "publishConfig": {
6
6
  "access": "public",