react-modal-sheet-cus - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

dist/react-modal-sheet-cus.cjs.development.js

@@ -441,3 +441,3 @@ 'use strict';
       transition: {
-        type: 'tween'
+        type: 'inertia'
       }
@@ -444,0 +444,0 @@ },

dist/react-modal-sheet-cus.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=require("react-dom"),r=require("framer-motion"),o=(e=require("react-merge-refs"))&&"object"==typeof e&&"default"in e?e.default:e;function a(){return(a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function i(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t.indexOf(n=a[r])>=0||(o[n]=e[n]);return o}var l="undefined"!=typeof window;function s(e){var t=document.querySelector("body"),n=document.getElementById(e),r=document.getElementById("react-modal-sheet-highlight");n&&r&&(n.style.removeProperty("border-top-right-radius"),n.style.removeProperty("border-top-left-radius"),n.style.removeProperty("transform"),r.style.opacity="0",n.addEventListener("transitionend",(function e(){var o;n.style.removeProperty("overflow"),n.style.removeProperty("will-change"),n.style.removeProperty("transition"),t.style.removeProperty("background-color"),n.removeEventListener("transitionend",e),null===(o=r.parentNode)||void 0===o||o.removeChild(r)})))}var c=t.createContext(void 0),d=function(){var e=t.useContext(c);if(!e)throw Error("Sheet context error");return e},u=function(e){var n=t.useRef();return t.useEffect((function(){n.current=e})),n.current},f={wrapper:{position:"fixed",top:0,bottom:0,left:0,right:0,zIndex:9999999,overflow:"hidden"},backdrop:{zIndex:1,position:"fixed",top:0,left:0,width:"100%",height:"100%",backgroundColor:"rgba(51, 51, 51, 0.5)",touchAction:"none"},container:{zIndex:2,position:"absolute",left:0,bottom:0,width:"100%",backgroundColor:"#fff",borderTopRightRadius:"8px",borderTopLeftRadius:"8px",boxShadow:"0px -2px 16px rgba(0, 0, 0, 0.3)",display:"flex",flexDirection:"column"},headerWrapper:{width:"100%"},header:{height:"40px",width:"100%",position:"relative",display:"flex",alignItems:"center",justifyContent:"center"},indicator:{width:"18px",height:"4px",borderRadius:"99px",backgroundColor:"#ddd"},content:{flex:1,overflow:"auto",position:"relative"}},p=t.forwardRef((function(e,o){var d=e.children,p=e.isOpen,m=e.onClose,y=e.onOpenStart,h=e.onOpenEnd,g=e.onCloseStart,v=e.onCloseEnd,b=e.onSnap,x=e.snapPoints,C=e.initialSnap,E=void 0===C?0:C,w=e.rootId,O=e.drag,S=e.springConfig,R=void 0===S?{stiffness:300,damping:30,mass:.2}:S,k=i(e,["children","isOpen","onClose","onOpenStart","onOpenEnd","onCloseStart","onCloseEnd","onSnap","snapPoints","initialSnap","rootId","drag","springConfig"]),P=t.useState(!1),j=P[0],I=P[1],M=t.useState(!1),q=M[0],T=M[1],A=t.useRef(null),N=t.useRef({onOpenStart:y,onOpenEnd:h,onCloseStart:g,onCloseEnd:v}),H=r.useMotionValue(0),B=r.useMotionValue(l?window.innerHeight:0),D=r.useSpring(B,R),L=q?B:D,z=p?"auto":"none",V=t.useCallback((function(e,t){var n=t.delta,r=B.getVelocity();r>0&&H.set(10),r<0&&H.set(-10),B.set(Math.max(B.get()+n.y,0))}),[]),W=t.useCallback((function(){B.set(D.get()),T(!0)}),[]),X=t.useCallback((function(e,t){var n,r;if(t.velocity.y>500)m();else{var o=A.current.getBoundingClientRect().height,a=x?(n=x.map((function(e){return o-e})),r=B.get(),n.reduce((function(e,t){return Math.abs(t-r)<Math.abs(e-r)?t:e}))):B.get()/o>.6?o:0;if(D.set(a),x&&b){var i=Math.abs(Math.round(x[0]-a)),l=x.indexOf(i);b(l)}a>=o&&m(),T(!1)}H.set(0)}),[m,b]);t.useEffect((function(){N.current={onOpenStart:y,onOpenEnd:h,onCloseStart:g,onCloseEnd:v}})),t.useEffect((function(){I(!0)}),[]),t.useEffect((function(){x&&b&&j&&b(p?E:x.length-1)}),[p]),t.useImperativeHandle(o,(function(){return{snapTo:function(e){if(x&&void 0!==x[e]){var t=A.current.getBoundingClientRect().height,n=t-x[e];D.set(n),b&&b(e),n>=t&&m()}}}})),function(e,n){var r=u(e);t.useEffect((function(){n&&!r&&e?function(e){var t=document.querySelector("body"),n=document.querySelector("#"+e);if(n){var r=window.innerHeight,o=(r-24)/r;t.style.backgroundColor="#000",n.style.overflow="hidden",n.style.willChange="transform",n.style.transition="transform 200ms linear",n.style.transform="translateY(calc(env(safe-area-inset-top) + 12px)) scale("+o+")",n.style.borderTopRightRadius="10px",n.style.borderTopLeftRadius="10px";var a=document.createElement("div");a.setAttribute("aria-hidden","true"),a.id="react-modal-sheet-highlight",a.style.position="absolute",a.style.top="0px",a.style.left="0px",a.style.bottom="0px",a.style.right="0px",a.style.opacity="0",a.style.transition="opacity 200ms linear",a.style.backgroundColor="rgba(150, 150, 150, 0.1)",n.appendChild(a),requestAnimationFrame((function(){return a.style.opacity="1"}))}}(n):n&&!e&&r&&s(n)}),[e,r]),t.useEffect((function(){return function(){n&&e&&s(n)}}),[e])}(p,w);var _={y:L,sheetRef:A,isOpen:p,isDragging:q,initialSnap:E,snapPoints:x,indicatorRotation:H,callbacks:N,dragProps:{drag:!!O&&"y",dragElastic:0,dragConstraints:{top:0,bottom:0},dragMomentum:!1,onDrag:V,onDragStart:W,onDragEnd:X}},F=a({},k,{ref:o,style:a({},f.wrapper,{pointerEvents:z})});return j?n.createPortal(t.createElement(c.Provider,{value:_},t.createElement("div",Object.assign({},F),t.createElement(r.AnimatePresence,null,p?t.Children.map(d,(function(e,n){return t.cloneElement(e,{key:"sheet-child-"+n})})):null))),document.body):t.createElement("div",Object.assign({},F))})),m="calc(100% - env(safe-area-inset-top) - 34px)",y=t.forwardRef((function(e,n){var l=e.children,s=e.style,c=void 0===s?{}:s,p=i(e,["children","style"]),y=d(),h=y.y,g=y.snapPoints,v=y.initialSnap,b=void 0===v?0:v,x=y.sheetRef,C=function(e,n){var r=u(e),o=t.useRef(!1),a=t.useCallback((function(){var e,t,r,a;o.current?(null===(e=(t=n.current).onCloseEnd)||void 0===e||e.call(t),o.current=!1):(null===(r=(a=n.current).onOpenEnd)||void 0===r||r.call(a),o.current=!0)}),[e,r]);return t.useEffect((function(){var t,o;if(!r&&e)null===(t=(o=n.current).onOpenStart)||void 0===t||t.call(o);else if(!e&&r){var a,i;null===(a=(i=n.current).onCloseStart)||void 0===a||a.call(i)}}),[e,r]),{handleAnimationComplete:a}}(y.isOpen,y.callbacks).handleAnimationComplete,E=g?g[0]-g[b]:0,w=g?g[0]:null,O=w?"min("+w+"px, "+m+")":m;return t.createElement(r.motion.div,Object.assign({},p,{ref:o([x,n]),className:"react-modal-sheet-container",style:a({},f.container,{height:O},c,{y:h}),initial:{y:window.innerHeight},animate:{y:E,transition:{type:"tween"}},exit:{y:window.innerHeight},onAnimationComplete:C}),l)})),h=t.forwardRef((function(e,n){var o=e.children,l=e.style,s=void 0===l?{}:l,c=i(e,["children","style"]),u=d().dragProps;return t.createElement(r.motion.div,Object.assign({},c,{ref:n,className:"react-modal-sheet-content",style:a({},f.content,s)},u),o)})),g=t.forwardRef((function(e,n){var o=e.children,l=e.style,s=void 0===l?{}:l,c=i(e,["children","style"]),u=d(),p=u.indicatorRotation,m=u.dragProps,y=r.useTransform(p,(function(e){return"translateX(2px) rotate("+e+"deg)"})),h=r.useTransform(p,(function(e){return"translateX(-2px) rotate("+-1*e+"deg)"}));return t.createElement(r.motion.div,Object.assign({},c,{ref:n,style:a({},f.headerWrapper,s)},m),o||t.createElement("div",{className:"react-modal-sheet-header",style:f.header},t.createElement(r.motion.span,{className:"react-modal-sheet-drag-indicator",style:a({},f.indicator,{transform:y})}),t.createElement(r.motion.span,{className:"react-modal-sheet-drag-indicator",style:a({},f.indicator,{transform:h})})))})),v=t.forwardRef((function(e,n){var o,l=e.style,s=void 0===l?{}:l,c=i(e,["style"]),d=(o=c).onClick||o.onTap?r.motion.button:r.motion.div;return t.createElement(d,Object.assign({},c,{ref:n,className:"react-modal-sheet-backdrop",style:a({},f.backdrop,s),initial:{opacity:0},animate:{opacity:1},exit:{opacity:0}}))})),b=p;b.Container=y,b.Header=g,b.Content=h,b.Backdrop=v,exports.default=b;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=require("react-dom"),r=require("framer-motion"),o=(e=require("react-merge-refs"))&&"object"==typeof e&&"default"in e?e.default:e;function a(){return(a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function i(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t.indexOf(n=a[r])>=0||(o[n]=e[n]);return o}var l="undefined"!=typeof window;function s(e){var t=document.querySelector("body"),n=document.getElementById(e),r=document.getElementById("react-modal-sheet-highlight");n&&r&&(n.style.removeProperty("border-top-right-radius"),n.style.removeProperty("border-top-left-radius"),n.style.removeProperty("transform"),r.style.opacity="0",n.addEventListener("transitionend",(function e(){var o;n.style.removeProperty("overflow"),n.style.removeProperty("will-change"),n.style.removeProperty("transition"),t.style.removeProperty("background-color"),n.removeEventListener("transitionend",e),null===(o=r.parentNode)||void 0===o||o.removeChild(r)})))}var c=t.createContext(void 0),d=function(){var e=t.useContext(c);if(!e)throw Error("Sheet context error");return e},u=function(e){var n=t.useRef();return t.useEffect((function(){n.current=e})),n.current},f={wrapper:{position:"fixed",top:0,bottom:0,left:0,right:0,zIndex:9999999,overflow:"hidden"},backdrop:{zIndex:1,position:"fixed",top:0,left:0,width:"100%",height:"100%",backgroundColor:"rgba(51, 51, 51, 0.5)",touchAction:"none"},container:{zIndex:2,position:"absolute",left:0,bottom:0,width:"100%",backgroundColor:"#fff",borderTopRightRadius:"8px",borderTopLeftRadius:"8px",boxShadow:"0px -2px 16px rgba(0, 0, 0, 0.3)",display:"flex",flexDirection:"column"},headerWrapper:{width:"100%"},header:{height:"40px",width:"100%",position:"relative",display:"flex",alignItems:"center",justifyContent:"center"},indicator:{width:"18px",height:"4px",borderRadius:"99px",backgroundColor:"#ddd"},content:{flex:1,overflow:"auto",position:"relative"}},p=t.forwardRef((function(e,o){var d=e.children,p=e.isOpen,m=e.onClose,y=e.onOpenStart,h=e.onOpenEnd,g=e.onCloseStart,v=e.onCloseEnd,b=e.onSnap,x=e.snapPoints,C=e.initialSnap,E=void 0===C?0:C,w=e.rootId,O=e.drag,S=e.springConfig,R=void 0===S?{stiffness:300,damping:30,mass:.2}:S,k=i(e,["children","isOpen","onClose","onOpenStart","onOpenEnd","onCloseStart","onCloseEnd","onSnap","snapPoints","initialSnap","rootId","drag","springConfig"]),P=t.useState(!1),j=P[0],I=P[1],M=t.useState(!1),q=M[0],T=M[1],A=t.useRef(null),N=t.useRef({onOpenStart:y,onOpenEnd:h,onCloseStart:g,onCloseEnd:v}),H=r.useMotionValue(0),B=r.useMotionValue(l?window.innerHeight:0),D=r.useSpring(B,R),L=q?B:D,z=p?"auto":"none",V=t.useCallback((function(e,t){var n=t.delta,r=B.getVelocity();r>0&&H.set(10),r<0&&H.set(-10),B.set(Math.max(B.get()+n.y,0))}),[]),W=t.useCallback((function(){B.set(D.get()),T(!0)}),[]),X=t.useCallback((function(e,t){var n,r;if(t.velocity.y>500)m();else{var o=A.current.getBoundingClientRect().height,a=x?(n=x.map((function(e){return o-e})),r=B.get(),n.reduce((function(e,t){return Math.abs(t-r)<Math.abs(e-r)?t:e}))):B.get()/o>.6?o:0;if(D.set(a),x&&b){var i=Math.abs(Math.round(x[0]-a)),l=x.indexOf(i);b(l)}a>=o&&m(),T(!1)}H.set(0)}),[m,b]);t.useEffect((function(){N.current={onOpenStart:y,onOpenEnd:h,onCloseStart:g,onCloseEnd:v}})),t.useEffect((function(){I(!0)}),[]),t.useEffect((function(){x&&b&&j&&b(p?E:x.length-1)}),[p]),t.useImperativeHandle(o,(function(){return{snapTo:function(e){if(x&&void 0!==x[e]){var t=A.current.getBoundingClientRect().height,n=t-x[e];D.set(n),b&&b(e),n>=t&&m()}}}})),function(e,n){var r=u(e);t.useEffect((function(){n&&!r&&e?function(e){var t=document.querySelector("body"),n=document.querySelector("#"+e);if(n){var r=window.innerHeight,o=(r-24)/r;t.style.backgroundColor="#000",n.style.overflow="hidden",n.style.willChange="transform",n.style.transition="transform 200ms linear",n.style.transform="translateY(calc(env(safe-area-inset-top) + 12px)) scale("+o+")",n.style.borderTopRightRadius="10px",n.style.borderTopLeftRadius="10px";var a=document.createElement("div");a.setAttribute("aria-hidden","true"),a.id="react-modal-sheet-highlight",a.style.position="absolute",a.style.top="0px",a.style.left="0px",a.style.bottom="0px",a.style.right="0px",a.style.opacity="0",a.style.transition="opacity 200ms linear",a.style.backgroundColor="rgba(150, 150, 150, 0.1)",n.appendChild(a),requestAnimationFrame((function(){return a.style.opacity="1"}))}}(n):n&&!e&&r&&s(n)}),[e,r]),t.useEffect((function(){return function(){n&&e&&s(n)}}),[e])}(p,w);var _={y:L,sheetRef:A,isOpen:p,isDragging:q,initialSnap:E,snapPoints:x,indicatorRotation:H,callbacks:N,dragProps:{drag:!!O&&"y",dragElastic:0,dragConstraints:{top:0,bottom:0},dragMomentum:!1,onDrag:V,onDragStart:W,onDragEnd:X}},F=a({},k,{ref:o,style:a({},f.wrapper,{pointerEvents:z})});return j?n.createPortal(t.createElement(c.Provider,{value:_},t.createElement("div",Object.assign({},F),t.createElement(r.AnimatePresence,null,p?t.Children.map(d,(function(e,n){return t.cloneElement(e,{key:"sheet-child-"+n})})):null))),document.body):t.createElement("div",Object.assign({},F))})),m="calc(100% - env(safe-area-inset-top) - 34px)",y=t.forwardRef((function(e,n){var l=e.children,s=e.style,c=void 0===s?{}:s,p=i(e,["children","style"]),y=d(),h=y.y,g=y.snapPoints,v=y.initialSnap,b=void 0===v?0:v,x=y.sheetRef,C=function(e,n){var r=u(e),o=t.useRef(!1),a=t.useCallback((function(){var e,t,r,a;o.current?(null===(e=(t=n.current).onCloseEnd)||void 0===e||e.call(t),o.current=!1):(null===(r=(a=n.current).onOpenEnd)||void 0===r||r.call(a),o.current=!0)}),[e,r]);return t.useEffect((function(){var t,o;if(!r&&e)null===(t=(o=n.current).onOpenStart)||void 0===t||t.call(o);else if(!e&&r){var a,i;null===(a=(i=n.current).onCloseStart)||void 0===a||a.call(i)}}),[e,r]),{handleAnimationComplete:a}}(y.isOpen,y.callbacks).handleAnimationComplete,E=g?g[0]-g[b]:0,w=g?g[0]:null,O=w?"min("+w+"px, "+m+")":m;return t.createElement(r.motion.div,Object.assign({},p,{ref:o([x,n]),className:"react-modal-sheet-container",style:a({},f.container,{height:O},c,{y:h}),initial:{y:window.innerHeight},animate:{y:E,transition:{type:"inertia"}},exit:{y:window.innerHeight},onAnimationComplete:C}),l)})),h=t.forwardRef((function(e,n){var o=e.children,l=e.style,s=void 0===l?{}:l,c=i(e,["children","style"]),u=d().dragProps;return t.createElement(r.motion.div,Object.assign({},c,{ref:n,className:"react-modal-sheet-content",style:a({},f.content,s)},u),o)})),g=t.forwardRef((function(e,n){var o=e.children,l=e.style,s=void 0===l?{}:l,c=i(e,["children","style"]),u=d(),p=u.indicatorRotation,m=u.dragProps,y=r.useTransform(p,(function(e){return"translateX(2px) rotate("+e+"deg)"})),h=r.useTransform(p,(function(e){return"translateX(-2px) rotate("+-1*e+"deg)"}));return t.createElement(r.motion.div,Object.assign({},c,{ref:n,style:a({},f.headerWrapper,s)},m),o||t.createElement("div",{className:"react-modal-sheet-header",style:f.header},t.createElement(r.motion.span,{className:"react-modal-sheet-drag-indicator",style:a({},f.indicator,{transform:y})}),t.createElement(r.motion.span,{className:"react-modal-sheet-drag-indicator",style:a({},f.indicator,{transform:h})})))})),v=t.forwardRef((function(e,n){var o,l=e.style,s=void 0===l?{}:l,c=i(e,["style"]),d=(o=c).onClick||o.onTap?r.motion.button:r.motion.div;return t.createElement(d,Object.assign({},c,{ref:n,className:"react-modal-sheet-backdrop",style:a({},f.backdrop,s),initial:{opacity:0},animate:{opacity:1},exit:{opacity:0}}))})),b=p;b.Container=y,b.Header=g,b.Content=h,b.Backdrop=v,exports.default=b;
 //# sourceMappingURL=react-modal-sheet-cus.cjs.production.min.js.map

dist/react-modal-sheet-cus.esm.js

@@ -435,3 +435,3 @@ import { useContext, createContext, useRef, useCallback, useEffect, forwardRef, useState, useImperativeHandle, createElement, Children, cloneElement } from 'react';
       transition: {
-        type: 'tween'
+        type: 'inertia'
       }
@@ -438,0 +438,0 @@ },

package.json

 {
-  "version": "1.2.0",
+  "version": "1.3.0",
   "license": "MIT",
@@ -4,0 +4,0 @@ "name": "react-modal-sheet-cus",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

177127

increased by0.01%

No dependency changes