@component-hook/picker 1.4.3 → 1.5.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/dist/react/index.css +1 -1
- package/dist/react/picker.es.d.ts +10286 -0
- package/dist/react/picker.es.js +600 -720
- package/dist/react/picker.umd.js +3 -3
- package/dist/vue/index.css +1 -1
- package/dist/vue/picker.es.d.ts +10356 -59
- package/dist/vue/picker.es.js +428 -424
- package/dist/vue/picker.umd.js +2 -2
- package/package.json +7 -6
package/dist/react/picker.umd.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
(function(
|
|
2
|
-
/*$vite$:1*/`,document.head.appendChild(
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react")):typeof define==`function`&&define.amd?define([`exports`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.picker={},e.React))})(this,function(e,t){var n=document.createElement(`style`);n.textContent=`:root{--chook-picker-background:#fff;--chook-picker-columns-margin:0 1rem;--chook-picker-columns-backdrop:linear-gradient(to bottom, #f2f2f2 0px, #f2f2f2 .0625rem, transparent .0625rem, transparent calc(100% - .0625rem), #f2f2f2 calc(100% - .0625rem), #f2f2f2 100%);--chook-picker-mask-backdrop:linear-gradient(180deg, #ffffffe6, #fff6), linear-gradient(0deg, #ffffffe6, #fff6);--chook-picker-column-label-color:#323233;--chook-picker-column-label-padding:0 .25rem;--chook-picker-column-font-size:1rem;--chook-picker-column-font-weight:500}.chook-picker-container{background:var(--chook-picker-background)}.chook-picker-columns{width:calc(100% - var(--chook-picker-columns-margin) * 2);height:13.5rem;margin:var(--chook-picker-columns-margin);display:flex;position:relative;overflow:hidden}.chook-picker-columns-backdrop{background-image:var(--chook-picker-columns-backdrop);background-position:50%;background-repeat:no-repeat;background-size:100% 3rem}.chook-picker-mask-backdrop{pointer-events:none;background-image:var(--chook-picker-mask-backdrop);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 5.25rem;width:100%;height:100%;position:absolute;top:0;left:0}.chook-picker-loading{width:100%;height:100%;position:absolute;top:0;left:0}.chook-picker-column{cursor:grab;flex:1;padding:5.375rem 0;overflow:hidden}.chook-picker-column ul{margin:0;padding:0;list-style:none}.chook-picker-column-item{cursor:grab;justify-content:center;align-items:center;height:3rem;display:flex}.chook-picker-column-label{color:var(--chook-picker-column-label-color);font-size:var(--chook-picker-column-font-size);font-weight:var(--chook-picker-column-font-weight);padding:var(--chook-picker-column-label-padding);text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none;overflow:hidden}
|
|
2
|
+
/*$vite$:1*/`,document.head.appendChild(n),Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var r=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports),i=.52,a=.008,o=[`year`,`month`,`day`],s=[`hour`,`minute`,`second`],c=Array.isArray;function l(e,t){if(m(e))return`multiple`;let[n]=e;return n?.[t.children]?`cascade`:`single`}function u(e){return{children:e?.children||`children`,label:e?.label||`label`,value:e?.value||`value`}}function d(e,t,n){if(m(e))return[];let r=[],i=e,a=0;for(;i;){let e=t[a],o=p(i,e,n);o===-1&&(o=0),r.push(i),a+=1,i=i[o]?.[n.children]}return r}function f(e,t,n,r){let i=[...n],a=e,o=t+1;for(;a?.[r.children];){let e=a[r.children][0];i[o]=e.value,a=e,o+=1}return i}function p(e,t,n){return e.findIndex(e=>e?.[n.value]===t)}function m(e){let[t]=e;return c(t)}function h(e,t){return e>t?`horizontal`:t>e?`vertical`:``}function g(){let{fontSize:e}=getComputedStyle(document.documentElement);return Number(e.replace(`px`,``))||16}function _(e,t,n){let r=[];for(let i=e;i<=t;i++){let e=n(String(i));r.push({label:e,value:i})}return r}function v(e,t){return e===t.getFullYear()}function y(e,t){return e===t.getFullYear()}function b(e,t){return e===t.getMonth()+1}function x(e,t){return e===t.getMonth()+1}function S(e,t){return new Date(e,t,0).getDate()}function C(e,t,n){let r=new Date,i=Date.now(),a=e.getTime(),o=t.getTime(),s=i>=a&&i<=o;return n===`year`?s?r.getFullYear():e.getFullYear():n===`month`?(s?r.getMonth():e.getMonth())+1:s?r.getDate():e.getDate()}function w(e){return e}function T(e){return/^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/.test(e)}function E(e){if(!T(e))return null;let[t,n,r]=e.split(`:`);return{hour:Number(t),minute:Number(n),second:Number(r)}}function D(e){return e.padStart(2,`0`)}function O(e,t,n){let r=Date.now(),{hour:i,minute:a,second:o}=e,{hour:s,minute:c,second:l}=t,u=new Date().setHours(i,a,o),d=new Date().setHours(s,c,l),f=r>=u&&r<=d;return n===`hour`?f?new Date().getHours():i:n===`minute`?f?new Date().getMinutes():a:f?new Date().getSeconds():o}function k(e){return(0,t.forwardRef)(e)}function A(){let e={startX:0,startY:0,deltaX:0,deltaY:0,offsetX:0,offsetY:0},t=``,n=!0,r=()=>t===`vertical`,i=()=>t===`horizontal`;function a(){e.deltaX=0,e.deltaY=0,e.offsetX=0,e.offsetY=0,t=``,n=!0}function o(t){let n=`touches`in t?t.touches[0]:t;a(),e.startX=n.clientX,e.startY=n.clientY}function s(r){if(!e.startX||!e.startY)return!0;let i=`touches`in r?r.touches[0]:r;e.deltaX=Math.max(i.clientX,0)-e.startX,e.deltaY=i.clientY-e.startY,e.offsetX=Math.abs(e.deltaX),e.offsetY=Math.abs(e.deltaY),(!t||e.offsetX<10&&e.offsetY<10)&&(t=h(e.offsetX,e.offsetY)),n&&(e.offsetX>5||e.offsetY>5)&&(n=!1)}function c(){e.startX=0,e.startY=0}return{pointer:e,move:s,start:o,stop:c,reset:a,isVertical:r,isHorizontal:i}}function j({column:e,onChange:n}){let r=g()/16,[i,o]=(0,t.useState)(0),s=(0,t.useRef)(null),c=(0,t.useRef)(0),l=(0,t.useRef)(0),u=(0,t.useRef)(0),d=(0,t.useRef)(0),f=(0,t.useRef)(!1),p=(0,t.useRef)(null),{pointer:m,start:h,move:_,stop:v}=(0,t.useMemo)(()=>A(),[]);function y(e){return e*r}function b(t){let n=e.length,r=Math.round(-t/y(48));return r<0?0:r>=n?n-1:r}function x(e){let t=-e*y(48),r=()=>n?.(e);f.current&&t!==c.current?p.current=r:r(),w(t)}function S(e){h(e),f.current=!0,o(0),u.current=Date.now(),l.current=c.current,d.current=l.current,p.current=null}function C(t){if(_(t))return;let n=e.length,r=l.current+m.deltaY,i=y((n-1)*-48),a=Math.min(Math.max(r,i),0),o=Date.now();w(a),!(o-u.current<=300)&&(u.current=o,d.current=a)}function w(e){c.current=e,s.current&&s.current.style.setProperty(`--offset-y`,String(e))}function T(){v();let e=c.current-d.current,t=Date.now()-u.current;if(t<300&&Math.abs(e)>15){E(e,t);return}let n=b(c.current);o(150),x(n),f.current=!1}function E(e,t){let n=Math.abs(e/t),r=b(c.current+n/a*(e<0?-1:1));o(300),x(r)}function D(){o(0),f.current=!1,p.current&&=(p.current(),null)}function O(e,t=`auto`){f.current&&t===`smooth`||(p.current=null,f.current=t===`smooth`,o(t===`smooth`?150:0),x(e))}return{columnRef:s,transitionDuration:i,onPointerDown:S,onPointerMove:C,onPointerUp:T,stopInertialSliding:D,scrollToIndex:O}}var M=r((e=>{var t=Symbol.for(`react.transitional.element`),n=Symbol.for(`react.fragment`);function r(e,n,r){var i=null;if(r!==void 0&&(i=``+r),n.key!==void 0&&(i=``+n.key),`key`in n)for(var a in r={},n)a!==`key`&&(r[a]=n[a]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:i,ref:n===void 0?null:n,props:r}}e.Fragment=n,e.jsx=r,e.jsxs=r})),N=r((e=>{process.env.NODE_ENV!==`production`&&(function(){function t(e){if(e==null)return null;if(typeof e==`function`)return e.$$typeof===O?null:e.displayName||e.name||null;if(typeof e==`string`)return e;switch(e){case _:return`Fragment`;case y:return`Profiler`;case v:return`StrictMode`;case C:return`Suspense`;case w:return`SuspenseList`;case D:return`Activity`}if(typeof e==`object`)switch(typeof e.tag==`number`&&console.error(`Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue.`),e.$$typeof){case g:return`Portal`;case x:return e.displayName||`Context`;case b:return(e._context.displayName||`Context`)+`.Consumer`;case S:var n=e.render;return e=e.displayName,e||=(e=n.displayName||n.name||``,e===``?`ForwardRef`:`ForwardRef(`+e+`)`),e;case T:return n=e.displayName||null,n===null?t(e.type)||`Memo`:n;case E:n=e._payload,e=e._init;try{return t(e(n))}catch{}}return null}function n(e){return``+e}function r(e){try{n(e);var t=!1}catch{t=!0}if(t){t=console;var r=t.error,i=typeof Symbol==`function`&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||`Object`;return r.call(t,`The provided key is an unsupported type %s. This value must be coerced to a string before using it here.`,i),n(e)}}function i(e){if(e===_)return`<>`;if(typeof e==`object`&&e&&e.$$typeof===E)return`<...>`;try{var n=t(e);return n?`<`+n+`>`:`<...>`}catch{return`<...>`}}function a(){var e=k.A;return e===null?null:e.getOwner()}function o(){return Error(`react-stack-top-frame`)}function s(e){if(A.call(e,`key`)){var t=Object.getOwnPropertyDescriptor(e,`key`).get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function c(e,t){function n(){N||(N=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function l(){var e=t(this.type);return P[e]||(P[e]=!0,console.error(`Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.`)),e=this.props.ref,e===void 0?null:e}function u(e,t,n,r,i,a){var o=n.ref;return e={$$typeof:h,type:e,key:t,props:n,_owner:r},(o===void 0?null:o)===null?Object.defineProperty(e,"ref",{enumerable:!1,value:null}):Object.defineProperty(e,"ref",{enumerable:!1,get:l}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:i}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:a}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function d(e,n,i,o,l,d){var p=n.children;if(p!==void 0)if(o)if(j(p)){for(o=0;o<p.length;o++)f(p[o]);Object.freeze&&Object.freeze(p)}else console.error(`React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.`);else f(p);if(A.call(n,`key`)){p=t(e);var m=Object.keys(n).filter(function(e){return e!==`key`});o=0<m.length?`{key: someKey, `+m.join(`: ..., `)+`: ...}`:`{key: someKey}`,L[p+o]||(m=0<m.length?`{`+m.join(`: ..., `)+`: ...}`:`{}`,console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
3
3
|
let props = %s;
|
|
4
4
|
<%s {...props} />
|
|
5
5
|
React keys must be passed directly to JSX without using spread:
|
|
6
6
|
let props = %s;
|
|
7
|
-
<%s key={someKey} {...props} />`,y,C,X,C),Ee[C+y]=!0)}if(C=null,R!==void 0&&(r(R),C=""+R),d(u)&&(r(u.key),C=""+u.key),"key"in u){R={};for(var te in u)te!=="key"&&(R[te]=u[te])}else R=u;return C&&s(R,typeof t=="function"?t.displayName||t.name||"Unknown":t),m(t,C,R,c(),Z,ee)}function k(t){i(t)?t._store&&(t._store.validated=1):typeof t=="object"&&t!==null&&t.$$typeof===I&&(t._payload.status==="fulfilled"?i(t._payload.value)&&t._payload.value._store&&(t._payload.value._store.validated=1):t._store&&(t._store.validated=1))}function i(t){return typeof t=="object"&&t!==null&&t.$$typeof===x}var h=f,x=Symbol.for("react.transitional.element"),O=Symbol.for("react.portal"),w=Symbol.for("react.fragment"),_=Symbol.for("react.strict_mode"),M=Symbol.for("react.profiler"),l=Symbol.for("react.consumer"),b=Symbol.for("react.context"),g=Symbol.for("react.forward_ref"),p=Symbol.for("react.suspense"),P=Symbol.for("react.suspense_list"),A=Symbol.for("react.memo"),I=Symbol.for("react.lazy"),j=Symbol.for("react.activity"),T=Symbol.for("react.client.reference"),S=h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,N=Object.prototype.hasOwnProperty,H=Array.isArray,F=console.createTask?console.createTask:function(){return null};h={react_stack_bottom_frame:function(t){return t()}};var z,W={},Te=h.react_stack_bottom_frame.bind(h,a)(),ve=F(o(a)),Ee={};L.Fragment=w,L.jsx=function(t,u,R){var y=1e4>S.recentlyCreatedOwnerStacks++;return v(t,u,R,!1,y?Error("react-stack-top-frame"):Te,y?F(o(t)):ve)},L.jsxs=function(t,u,R){var y=1e4>S.recentlyCreatedOwnerStacks++;return v(t,u,R,!0,y?Error("react-stack-top-frame"):Te,y?F(o(t)):ve)}})()),L}var ce;function Re(){return ce||(ce=1,process.env.NODE_ENV==="production"?B.exports=_e():B.exports=Se()),B.exports}var Y=Re();const xe=Array.isArray;function Oe(e,n){if(ae(e))return"multiple";const[r]=e;return r?.[n.children]?"cascade":"single"}function Me(e){return{children:e?.children||"children",label:e?.label||"label",value:e?.value||"value"}}function we(e,n,r){if(ae(e))return[];const o=[];let c=e,a=0;for(;c;){const d=n[a];let s=se(c,d,r);s===-1&&(s=0),o.push(c),a+=1,c=c[s]?.[r.children]}return o}function ye(e,n,r,o){const c=[...r];let a=e,d=n+1;for(;a?.[o.children];){const s=a[o.children][0];c[d]=s.value,a=s,d+=1}return c}function se(e,n,r){return e.findIndex(o=>o?.[r.value]===n)}function ae(e){const[n]=e;return xe(n)}function Ce(e,n){return e>n?"horizontal":n>e?"vertical":""}function V(e,n,r){const o=[];for(let c=e;c<=n;c++){const a=r(`${c}`);o.push({label:a,value:c})}return o}function ie(e,n){return e===n.getFullYear()}function ue(e,n){return e===n.getFullYear()}function Pe(e,n){return e===n.getMonth()+1}function Ae(e,n){return e===n.getMonth()+1}function Ne(e,n){return new Date(e,n,0).getDate()}function le(e,n,r){const o=new Date,c=Date.now(),a=e.getTime(),d=n.getTime(),s=c>=a&&c<=d;return r==="year"?s?o.getFullYear():e.getFullYear():r==="month"?s?o.getMonth()+1:e.getMonth()+1:s?o.getDate():e.getDate()}function Q(e){return e}function Ye(e){return/^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/.test(e)}function fe(e){if(!Ye(e))return null;const[n,r,o]=e.split(":");return{hour:Number(n),minute:Number(r),second:Number(o)}}function K(e){return e.padStart(2,"0")}function de(e,n,r){const o=Date.now(),{hour:c,minute:a,second:d}=e,{hour:s,minute:E,second:m}=n,v=new Date().setHours(c,a,d),k=new Date().setHours(s,E,m),i=o>=v&&o<=k;return r==="hour"?i?new Date().getHours():c:r==="minute"?i?new Date().getMinutes():a:i?new Date().getSeconds():d}function J(e){return f.forwardRef(e)}const Ie=16,G=48,je=.52,me=150,q=300,De=15,Fe=.008,pe=5,Ve=["year","month","day"],He=["hour","minute","second"];function Xe(){const e={startX:0,startY:0,deltaX:0,deltaY:0,offsetX:0,offsetY:0};let n="",r=!0;const o=()=>n==="vertical",c=()=>n==="horizontal";function a(){e.deltaX=0,e.deltaY=0,e.offsetX=0,e.offsetY=0,n="",r=!0}function d(m){const v="touches"in m?m.touches[0]:m;a(),e.startX=v.clientX,e.startY=v.clientY}function s(m){if(!e.startX||!e.startY)return!0;const v="touches"in m?m.touches[0]:m;e.deltaX=Math.max(v.clientX,0)-e.startX,e.deltaY=v.clientY-e.startY,e.offsetX=Math.abs(e.deltaX),e.offsetY=Math.abs(e.deltaY);const k=10;(!n||e.offsetX<k&&e.offsetY<k)&&(n=Ce(e.offsetX,e.offsetY)),r&&(e.offsetX>pe||e.offsetY>pe)&&(r=!1)}function E(){e.startX=0,e.startY=0}return{pointer:e,move:s,start:d,stop:E,reset:a,isVertical:o,isHorizontal:c}}function Ue({column:e,onChange:n}){const o=Number.parseFloat(getComputedStyle(document.documentElement).fontSize)/Ie,[c,a]=f.useState(0),d=f.useRef(null),s=f.useRef(0),E=f.useRef(0),m=f.useRef(0),v=f.useRef(0),k=f.useRef(!1),i=f.useRef(null),{pointer:h,start:x,move:O,stop:w}=f.useMemo(()=>Xe(),[]);function _(T){return T*o}function M(T){const S=e.length,N=Math.round(-T/_(G));return N<0?0:N>=S?S-1:N}function l(T){const S=-T*_(G),N=()=>n?.(T);k.current&&S!==s.current?i.current=N:N(),p(S)}function b(T){x(T),k.current=!0,a(0),m.current=Date.now(),E.current=s.current,v.current=E.current,i.current=null}function g(T){if(O(T))return;const N=e.length,H=E.current+h.deltaY,F=_((N-1)*-G),z=Math.min(Math.max(H,F),0),W=Date.now();p(z),!(W-m.current<=q)&&(m.current=W,v.current=z)}function p(T){s.current=T,d.current&&d.current.style.setProperty("--offset-y",`${T}`)}function P(){w();const T=s.current-v.current,S=Date.now()-m.current;if(S<q&&Math.abs(T)>De){A(T,S);return}const N=M(s.current);a(me),l(N),k.current=!1}function A(T,S){const N=Math.abs(T/S),H=s.current+N/Fe*(T<0?-1:1),F=M(H);a(q),l(F)}function I(){a(0),k.current=!1,i.current&&(i.current(),i.current=null)}function j(T,S="auto"){k.current&&S==="smooth"||(i.current=null,k.current=S==="smooth",a(S==="smooth"?me:0),l(T))}return{columnRef:d,transitionDuration:c,onPointerDown:b,onPointerMove:g,onPointerUp:P,stopInertialSliding:I,scrollToIndex:j}}function Le({column:e,fields:n,selectedIndex:r=0,onChange:o},c){const{columnRef:a,transitionDuration:d,onPointerDown:s,onPointerMove:E,onPointerUp:m,stopInertialSliding:v,scrollToIndex:k}=Ue({column:e,onChange:i});function i(O){O!==r&&o(O)}function h(O=r,w){k(O,w)}function x(O){O!==r&&h(O,"smooth")}return f.useImperativeHandle(c,()=>({scrollToSelected:h})),Y.jsx("div",{role:"presentation","aria-label":"Picker column",className:"chook-picker-column",onTouchStart:s,onTouchMove:E,onTouchEnd:m,onTouchCancel:m,onMouseDown:s,onMouseMove:E,onMouseUp:m,onMouseLeave:m,style:{overflowY:"hidden",touchAction:"none"},children:Y.jsx("ul",{ref:a,style:{overflowY:"hidden",transform:"translate3d(0, calc(var(--offset-y) * 1px), 0)",transitionDuration:`${d}ms`,transitionProperty:d?"all":"none",touchAction:"none"},onTransitionEnd:v,children:e.map((O,w)=>Y.jsx("div",{tabIndex:0,role:"button","aria-label":"Select option",className:"chook-picker-column-item",onClick:()=>x(w),onKeyDown:_=>{(_.key==="Enter"||_.key===" ")&&x(w)},children:Y.jsx("p",{className:"chook-picker-column-label",style:{transform:`rotate3d(1, 0, 0, calc((${w*G} + var(--offset-y)) * ${je}deg)`},children:O?.[n.label]})},O?.[n.value]))})})}const he=J(Le);he.displayName="Column";function ze(e,n){const{loading:r,loadingSlot:o,columns:c,emptySlot:a,currentColumns:d,fields:s,selectedIndices:E,updateSelectedValueByIndex:m}=e,v=f.useRef([]);function k(i,h){v.current[i]?.scrollToSelected(h)}return f.useImperativeHandle(n,()=>({scrollColumnToSelected:k})),r?Y.jsxs(Y.Fragment,{children:[Y.jsx("div",{className:"chook-picker-loading",children:o}),Y.jsx("div",{className:"chook-picker-columns"})]}):c.length?Y.jsxs("div",{className:"chook-picker-columns chook-picker-columns-backdrop",onTouchMove:i=>i.stopPropagation(),children:[d.map((i,h)=>Y.jsx(he,{ref:x=>{v.current[h]=x},column:i,fields:s,selectedIndex:E[h],onChange:x=>m(h,x)},h)),Y.jsx("div",{className:"chook-picker-mask-backdrop"})]}):Y.jsx("div",{className:"chook-picker-columns",children:a})}const ke=J(ze);ke.displayName="Columns";function $({values:e,columns:n,loading:r=!1,loadingSlot:o,emptySlot:c,columnsFieldNames:a,onChange:d}){const[s,E]=f.useState(e??[]),[m,v]=f.useState([]),k=f.useRef(null),i=Me(a),h=Oe(n,i),x=f.useMemo(()=>h==="single"?[n]:h==="multiple"?n:we(n,s,i),[n,h,s,i]);function O(_,M){const l=x[_],b=l[M]?.[i.value],g=s[_];if(b===g)return;const p=[...s];if(p[_]=b,h==="cascade"){const P=l[M],A=ye(P,_,p,i);E(A),d?.(A)}else E(p),d?.(p)}function w(_){return _.some((M,l)=>M!==s[l])}return f.useEffect(()=>{!e||!w(e)||E([...e])},[e]),f.useEffect(()=>{const _=x.length,M=[],l=[...s];let b=!1;for(let g=0;g<_;g++){const p=x[g],P=s[g],A=se(p,P,i);if(A===-1){const j=(m[g]??0)>=p.length?Math.max(p.length-1,0):0;l[g]=p[j]?.[i.value],M[g]=j}else M[g]=A;M[g]!==m[g]&&(k.current?.scrollColumnToSelected(g,M[g]),b=!0)}b&&(E(l),v(M))},[s,x,i]),Y.jsx("div",{className:"chook-picker-container","aria-label":"Picker",children:Y.jsx(ke,{ref:k,loading:r,loadingSlot:o,columns:n,emptySlot:c,currentColumns:x,fields:i,selectedIndices:m,updateSelectedValueByIndex:O})})}function We({values:e,columnsType:n=Ve,minDate:r=new Date(new Date().getFullYear()-10,0,1),maxDate:o=new Date(new Date().getFullYear()+10,11,31),formatYearLabel:c=Q,formatMonthLabel:a=Q,formatDayLabel:d=Q,onChange:s},E){const[m,v]=f.useState([]),k=f.useMemo(()=>e??m,[e,m]),i=f.useMemo(()=>{const l={year:h,month:x,day:O};return n.map(b=>l[b]())},[n,r,o,k,c,a,d]);function h(){const l=r.getFullYear(),b=o.getFullYear();return V(l,b,c)}function x(){const l=w("year"),b=ie(l,r)?r.getMonth()+1:1,g=ue(l,o)?o.getMonth()+1:12;return V(b,g,a)}function O(){const l=w("year"),b=w("month"),g=ie(l,r)&&Pe(b,r),p=ue(l,o)&&Ae(b,o),P=g?r.getDate():1,A=p?o.getDate():Ne(l,b);return V(P,A,d)}function w(l){const b=n.indexOf(l),g=k?.[b];return g?Number(g):le(r,o,l)}function _(l){e||v(l),s?.(l)}function M(){const l=n.map(b=>le(r,o,b));_(l)}return f.useEffect(()=>{(!e||!e.length)&&M()},[]),f.useImperativeHandle(E,()=>({setCurrentDate:M})),Y.jsx($,{values:k,columns:i,onChange:_})}const ge=J(We);ge.displayName="DatePicker";function Be({values:e,columnsType:n=He,minTime:r,maxTime:o,formatHourLabel:c=K,formatMinuteLabel:a=K,formatSecondLabel:d=K,onChange:s},E){const[m,v]=f.useState([]),k=f.useMemo(()=>e??m,[e,m]),i=f.useMemo(()=>fe(r??"")??{hour:0,minute:0,second:0},[r]),h=f.useMemo(()=>fe(o??"")??{hour:23,minute:59,second:59},[o]),x={hour:w,minute:_,second:M},O=n.map(p=>x[p]());function w(){return V(i.hour,h.hour,c)}function _(){const p=l("hour"),{hour:P,minute:A}=i,{hour:I,minute:j}=h;return V(p===P?A:0,p===I?j:59,a)}function M(){const p=l("hour"),P=l("minute"),{hour:A,minute:I,second:j}=i,{hour:T,minute:S,second:N}=h;return V(p===A&&P===I?j:0,p===T&&P===S?N:59,d)}function l(p){const P=n.indexOf(p),A=k?.[P];return A!==void 0?Number(A):de(i,h,p)}function b(p){e||v(p),s?.(p)}function g(){const p=n.map(P=>de(i,h,P));b(p)}return f.useEffect(()=>{(!e||!e.length)&&g()},[]),f.useImperativeHandle(E,()=>({setCurrentTime:g})),Y.jsx($,{values:k,columns:O,onChange:b})}const be=J(Be);be.displayName="TimePicker",D.DatePicker=ge,D.Picker=$,D.TimePicker=be,Object.defineProperty(D,Symbol.toStringTag,{value:"Module"})}));
|
|
7
|
+
<%s key={someKey} {...props} />`,o,p,m,p),L[p+o]=!0)}if(p=null,i!==void 0&&(r(i),p=``+i),s(n)&&(r(n.key),p=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return p&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,p,i,a(),l,d)}function f(e){p(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===E&&(e._payload.status===`fulfilled`?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e==`object`&&!!e&&e.$$typeof===h}var m=require("react"),h=Symbol.for(`react.transitional.element`),g=Symbol.for(`react.portal`),_=Symbol.for(`react.fragment`),v=Symbol.for(`react.strict_mode`),y=Symbol.for(`react.profiler`),b=Symbol.for(`react.consumer`),x=Symbol.for(`react.context`),S=Symbol.for(`react.forward_ref`),C=Symbol.for(`react.suspense`),w=Symbol.for(`react.suspense_list`),T=Symbol.for(`react.memo`),E=Symbol.for(`react.lazy`),D=Symbol.for(`react.activity`),O=Symbol.for(`react.client.reference`),k=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,A=Object.prototype.hasOwnProperty,j=Array.isArray,M=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var N,P={},F=m.react_stack_bottom_frame.bind(m,o)(),I=M(i(o)),L={};e.Fragment=_,e.jsx=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!1,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)},e.jsxs=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!0,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)}})()})),P=r(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=M():t.exports=N()}))();function F({column:e,fields:n,selectedIndex:r=0,onChange:a},o){let{columnRef:s,transitionDuration:c,onPointerDown:l,onPointerMove:u,onPointerUp:d,stopInertialSliding:f,scrollToIndex:p}=j({column:e,onChange:m});function m(e){e!==r&&a(e)}function h(e=r,t){p(e,t)}function g(e){e!==r&&h(e,`smooth`)}return(0,t.useImperativeHandle)(o,()=>({scrollToSelected:h})),(0,P.jsx)(`div`,{role:`presentation`,"aria-label":`Picker column`,className:`chook-picker-column`,onTouchStart:l,onTouchMove:u,onTouchEnd:d,onTouchCancel:d,onMouseDown:l,onMouseMove:u,onMouseUp:d,onMouseLeave:d,style:{overflowY:`hidden`,touchAction:`none`},children:(0,P.jsx)(`ul`,{ref:s,style:{overflowY:`hidden`,transform:`translate3d(0, calc(var(--offset-y) * 1px), 0)`,transitionDuration:`${c}ms`,transitionProperty:c?`all`:`none`,touchAction:`none`},onTransitionEnd:f,children:e.map((e,t)=>(0,P.jsx)(`div`,{tabIndex:0,role:`button`,"aria-label":`Select option`,className:`chook-picker-column-item`,onClick:()=>g(t),onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&g(t)},children:(0,P.jsx)(`p`,{className:`chook-picker-column-label`,style:{transform:`rotate3d(1, 0, 0, calc((${t*48} + var(--offset-y)) * ${i}deg)`},children:e?.[n.label]})},e?.[n.value]))})})}var I=k(F);I.displayName=`Column`;function L(e,n){let{loading:r,loadingSlot:i,columns:a,emptySlot:o,currentColumns:s,fields:c,selectedIndices:l,updateSelectedValueByIndex:u}=e,d=(0,t.useRef)([]);function f(e,t){d.current[e]?.scrollToSelected(t)}return(0,t.useImperativeHandle)(n,()=>({scrollColumnToSelected:f})),r?(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(`div`,{className:`chook-picker-loading`,children:i}),(0,P.jsx)(`div`,{className:`chook-picker-columns`})]}):a.length?(0,P.jsxs)(`div`,{className:`chook-picker-columns chook-picker-columns-backdrop`,onTouchMove:e=>e.stopPropagation(),children:[s.map((e,t)=>(0,P.jsx)(I,{ref:e=>{d.current[t]=e},column:e,fields:c,selectedIndex:l[t],onChange:e=>u(t,e)},t)),(0,P.jsx)(`div`,{className:`chook-picker-mask-backdrop`})]}):(0,P.jsx)(`div`,{className:`chook-picker-columns`,children:o})}var R=k(L);R.displayName=`Columns`;function z({values:e,columns:n,loading:r=!1,loadingSlot:i,emptySlot:a,columnsFieldNames:o,onChange:s}){let[c,m]=(0,t.useState)(e??[]),[h,g]=(0,t.useState)([]),_=(0,t.useRef)(null),v=u(o),y=l(n,v),b=(0,t.useMemo)(()=>y===`single`?[n]:y===`multiple`?n:d(n,c,v),[n,y,c,v]);function x(e,t){let n=b[e],r=n[t]?.[v.value];if(r===c[e])return;let i=[...c];if(i[e]=r,y===`cascade`){let r=n[t],a=f(r,e,i,v);m(a),s?.(a)}else m(i),s?.(i)}function S(e){return e.some((e,t)=>e!==c[t])}return(0,t.useEffect)(()=>{!e||!S(e)||m([...e])},[e]),(0,t.useEffect)(()=>{let e=b.length,t=[],n=[...c],r=!1;for(let i=0;i<e;i++){let e=b[i],a=c[i],o=p(e,a,v);if(o===-1){let r=(h[i]??0)>=e.length?Math.max(e.length-1,0):0;n[i]=e[r]?.[v.value],t[i]=r}else t[i]=o;t[i]!==h[i]&&(_.current?.scrollColumnToSelected(i,t[i]),r=!0)}r&&(m(n),g(t))},[c,b,v]),(0,P.jsx)(`div`,{className:`chook-picker-container`,"aria-label":`Picker`,children:(0,P.jsx)(R,{ref:_,loading:r,loadingSlot:i,columns:n,emptySlot:a,currentColumns:b,fields:v,selectedIndices:h,updateSelectedValueByIndex:x})})}function B({values:e,columnsType:n=o,minDate:r=new Date(new Date().getFullYear()-10,0,1),maxDate:i=new Date(new Date().getFullYear()+10,11,31),formatYearLabel:a=w,formatMonthLabel:s=w,formatDayLabel:c=w,onChange:l},u){let[d,f]=(0,t.useState)([]),p=(0,t.useMemo)(()=>e??d,[e,d]),m=(0,t.useMemo)(()=>{let e={year:h,month:g,day:T};return n.map(t=>e[t]())},[n,r,i,p,a,s,c]);function h(){return _(r.getFullYear(),i.getFullYear(),a)}function g(){let e=E(`year`);return _(v(e,r)?r.getMonth()+1:1,y(e,i)?i.getMonth()+1:12,s)}function T(){let e=E(`year`),t=E(`month`),n=v(e,r)&&b(t,r),a=y(e,i)&&x(t,i);return _(n?r.getDate():1,a?i.getDate():S(e,t),c)}function E(e){let t=n.indexOf(e),a=p?.[t];return a?Number(a):C(r,i,e)}function D(t){e||f(t),l?.(t)}function O(){D(n.map(e=>C(r,i,e)))}return(0,t.useEffect)(()=>{(!e||!e.length)&&O()},[]),(0,t.useImperativeHandle)(u,()=>({setCurrentDate:O})),(0,P.jsx)(z,{values:p,columns:m,onChange:D})}var V=k(B);V.displayName=`DatePicker`;function H({values:e,columnsType:n=s,minTime:r,maxTime:i,formatHourLabel:a=D,formatMinuteLabel:o=D,formatSecondLabel:c=D,onChange:l},u){let[d,f]=(0,t.useState)([]),p=(0,t.useMemo)(()=>e??d,[e,d]),m=(0,t.useMemo)(()=>E(r??``)??{hour:0,minute:0,second:0},[r]),h=(0,t.useMemo)(()=>E(i??``)??{hour:23,minute:59,second:59},[i]),g={hour:y,minute:b,second:x},v=n.map(e=>g[e]());function y(){return _(m.hour,h.hour,a)}function b(){let e=S(`hour`),{hour:t,minute:n}=m,{hour:r,minute:i}=h;return _(e===t?n:0,e===r?i:59,o)}function x(){let e=S(`hour`),t=S(`minute`),{hour:n,minute:r,second:i}=m,{hour:a,minute:o,second:s}=h;return _(e===n&&t===r?i:0,e===a&&t===o?s:59,c)}function S(e){let t=n.indexOf(e),r=p?.[t];return r===void 0?O(m,h,e):Number(r)}function C(t){e||f(t),l?.(t)}function w(){C(n.map(e=>O(m,h,e)))}return(0,t.useEffect)(()=>{(!e||!e.length)&&w()},[]),(0,t.useImperativeHandle)(u,()=>({setCurrentTime:w})),(0,P.jsx)(z,{values:p,columns:v,onChange:C})}var U=k(H);U.displayName=`TimePicker`,e.DatePicker=V,e.Picker=z,e.TimePicker=U});
|
package/dist/vue/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--chook-picker-background
|
|
1
|
+
:root{--chook-picker-background:#fff;--chook-picker-columns-margin:0 1rem;--chook-picker-columns-backdrop:linear-gradient(to bottom, #f2f2f2 0px, #f2f2f2 .0625rem, transparent .0625rem, transparent calc(100% - .0625rem), #f2f2f2 calc(100% - .0625rem), #f2f2f2 100%);--chook-picker-mask-backdrop:linear-gradient(180deg, #ffffffe6, #fff6), linear-gradient(0deg, #ffffffe6, #fff6);--chook-picker-column-label-color:#323233;--chook-picker-column-label-padding:0 .25rem;--chook-picker-column-font-size:1rem;--chook-picker-column-font-weight:500}.chook-picker-container{background:var(--chook-picker-background)}.chook-picker-columns{width:calc(100% - var(--chook-picker-columns-margin) * 2);height:13.5rem;margin:var(--chook-picker-columns-margin);display:flex;position:relative;overflow:hidden}.chook-picker-columns-backdrop{background-image:var(--chook-picker-columns-backdrop);background-position:50%;background-repeat:no-repeat;background-size:100% 3rem}.chook-picker-mask-backdrop{pointer-events:none;background-image:var(--chook-picker-mask-backdrop);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 5.25rem;width:100%;height:100%;position:absolute;top:0;left:0}.chook-picker-loading{width:100%;height:100%;position:absolute;top:0;left:0}.chook-picker-column{cursor:grab;flex:1;padding:5.375rem 0;overflow:hidden}.chook-picker-column ul{margin:0;padding:0;list-style:none}.chook-picker-column-item{cursor:grab;justify-content:center;align-items:center;height:3rem;display:flex}.chook-picker-column-label{color:var(--chook-picker-column-label-color);font-size:var(--chook-picker-column-font-size);font-weight:var(--chook-picker-column-font-weight);padding:var(--chook-picker-column-label-padding);text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none;overflow:hidden}
|