react-tinder-swipe
Version:
Its a swipe game like tinder or other dating aplication.wher by swiping it right or left you can accept or reject the user
12 lines (11 loc) • 8.01 kB
JavaScript
import e,{useState as r,useEffect as t}from"react";import{motion as n,useAnimation as o,AnimatePresence as a}from"framer-motion";var i,s={exports:{}},l={};var c,u,f={};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/function p(){return c||(c=1,"production"!==process.env.NODE_ENV&&function(){function r(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===_?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case y:return"Fragment";case b:return"Profiler";case m:return"StrictMode";case S:return"Suspense";case x:return"SuspenseList";case j:return"Activity"}if("object"==typeof e)switch("number"==typeof e.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case d:return"Portal";case h:return(e.displayName||"Context")+".Provider";case g:return(e._context.displayName||"Context")+".Consumer";case v:var t=e.render;return(e=e.displayName)||(e=""!==(e=t.displayName||t.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case k:return null!==(t=e.displayName||null)?t:r(e.type)||"Memo";case w:t=e._payload,e=e._init;try{return r(e(t))}catch(e){}}return null}function t(e){return""+e}function n(e){try{t(e);var r=!1}catch(e){r=!0}if(r){var n=(r=console).error,o="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),t(e)}}function o(e){if(e===y)return"<>";if("object"==typeof e&&null!==e&&e.$$typeof===w)return"<...>";try{var t=r(e);return t?"<"+t+">":"<...>"}catch(e){return"<...>"}}function a(){return Error("react-stack-top-frame")}function i(){var e=r(this.type);return R[e]||(R[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.")),void 0!==(e=this.props.ref)?e:null}function s(e,t,o,a,s,u,f,d){var y,m=t.children;if(void 0!==m)if(a)if(E(m)){for(a=0;a<m.length;a++)l(m[a]);Object.freeze&&Object.freeze(m)}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 l(m);if(N.call(t,"key")){m=r(e);var b=Object.keys(t).filter(function(e){return"key"!==e});a=0<b.length?"{key: someKey, "+b.join(": ..., ")+": ...}":"{key: someKey}",A[m+a]||(b=0<b.length?"{"+b.join(": ..., ")+": ...}":"{}",console.error('A props object containing a "key" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />',a,m,b,m),A[m+a]=!0)}if(m=null,void 0!==o&&(n(o),m=""+o),function(e){if(N.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return void 0!==e.key}(t)&&(n(t.key),m=""+t.key),"key"in t)for(var g in o={},t)"key"!==g&&(o[g]=t[g]);else o=t;return m&&function(e,r){function t(){c||(c=!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)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(o,"function"==typeof e?e.displayName||e.name||"Unknown":e),function(e,r,t,n,o,a,s,l){return t=a.ref,e={$$typeof:p,type:e,key:r,props:a,_owner:o},null!==(void 0!==t?t:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:i}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),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:s}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:l}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,m,u,0,null===(y=O.A)?null:y.getOwner(),o,f,d)}function l(e){"object"==typeof e&&null!==e&&e.$$typeof===p&&e._store&&(e._store.validated=1)}var c,u=e,p=Symbol.for("react.transitional.element"),d=Symbol.for("react.portal"),y=Symbol.for("react.fragment"),m=Symbol.for("react.strict_mode"),b=Symbol.for("react.profiler"),g=Symbol.for("react.consumer"),h=Symbol.for("react.context"),v=Symbol.for("react.forward_ref"),S=Symbol.for("react.suspense"),x=Symbol.for("react.suspense_list"),k=Symbol.for("react.memo"),w=Symbol.for("react.lazy"),j=Symbol.for("react.activity"),_=Symbol.for("react.client.reference"),O=u.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,N=Object.prototype.hasOwnProperty,E=Array.isArray,T=console.createTask?console.createTask:function(){return null},R={},P=(u={"react-stack-bottom-frame":function(e){return e()}})["react-stack-bottom-frame"].bind(u,a)(),$=T(o(a)),A={};f.Fragment=y,f.jsx=function(e,r,t,n,a){var i=1e4>O.recentlyCreatedOwnerStacks++;return s(e,r,t,!1,0,a,i?Error("react-stack-top-frame"):P,i?T(o(e)):$)},f.jsxs=function(e,r,t,n,a){var i=1e4>O.recentlyCreatedOwnerStacks++;return s(e,r,t,!0,0,a,i?Error("react-stack-top-frame"):P,i?T(o(e)):$)}}()),f}var d=(u||(u=1,"production"===process.env.NODE_ENV?s.exports=function(){if(i)return l;i=1;var e=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function t(r,t,n){var o=null;if(void 0!==n&&(o=""+n),void 0!==t.key&&(o=""+t.key),"key"in t)for(var a in n={},t)"key"!==a&&(n[a]=t[a]);else n=t;return t=n.ref,{$$typeof:e,type:r,key:o,ref:void 0!==t?t:null,props:n}}return l.Fragment=r,l.jsx=t,l.jsxs=t,l}():s.exports=p()),s.exports);const y=e=>{const[n,o]=r(!1);return t(()=>{if("undefined"==typeof window)return;const r=window.matchMedia(e),t=()=>{o(r.matches)};return t(),r.addEventListener("change",t),()=>{r.removeEventListener("change",t)}},[e]),n},m=({children:e,isTop:t,onSwipe:o,exitX:a,controls:i,disableSwiping:s,onDragUpdate:l,rotateValue:c})=>{const[u,f]=r(!1),p=y("(max-width:599px)");return d.jsx(n.div,{drag:!(u||!t||s)&&"x",dragMomentum:!1,onDragEnd:(e,r)=>{const t=r.offset.x;l(null),Math.abs(t)>100?(f(!0),o(t)):null==i||i.start({x:0,rotate:0,transition:{duration:.2}})},onDrag:(e,r)=>{const t=r.offset.x,n=c,o=Math.max(-n,Math.min(n,t/10));null==i||i.start({rotate:o,x:t,transition:{duration:0}}),l(t>c?"right":t<-c?"left":null)},initial:{scale:p?1:.85,y:0},animate:t&&i?i:{scale:t||p?1:.85,y:0,transition:{duration:.2}},exit:{x:t&&null!=a?a:0,rotate:t?(null!=a?a:0)>0?c:-c:0,opacity:0,transition:{duration:.2}},style:{position:"absolute",width:"100%",height:"100%",zIndex:t?2:1,cursor:"grab",...s?{filter:"blur(4px)",cursor:"not-allowed",animation:"blurPulse 3s ease-in-out infinite"}:{}},children:e})},b=({cards:e,renderCard:t,onSwipe:n,renderButtons:i})=>{const[s,l]=r(e),c=o(),[u,f]=r(0),[p,b]=r(null),g=y("(max-width:599px)"),h=e=>{if(0===s.length)return;const r=s[s.length-1],t="right"===e?600:-600,o="right"===e?20:-20;f(t),(e=>{new Audio("right"===e?"/assets/audio/swipeSound.mp3":"/assets/audio/demiceSound.mp3").play().catch(()=>{})})(e),c.start({x:t,rotate:o,transition:{duration:.2}}).then(()=>{var t;t=r.id,l(e=>e.filter(e=>e.id!==t)),null==n||n(r.id,e)})};return d.jsxs("div",{style:{position:"relative",width:g?"100%":400,height:600,margin:"0 auto"},children:[d.jsx(a,{children:s.map((e,r)=>{const n=r===s.length-1;return d.jsx(m,{isTop:n,controls:n?c:void 0,onSwipe:e=>{f(e);h(e>0?"right":"left")},onDragUpdate:b,exitX:u,rotateValue:0,children:t(e)},e.id)})}),d.jsx("div",{style:{marginTop:20},children:null==i?void 0:i(h,p)})]})};export{m as SwipeCard,b as TinderCardStack};
//# sourceMappingURL=index.mjs.map