Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-interactive-guide
Advanced tools
react-interactive-guide - npm Package Compare versions
Comparing version 2.3.1 to 3.0.0
@@ -0,1 +1,13 @@ | ||
| # [3.0.0](https://github.com/dominictwlee/react-interactive-guide/compare/v2.3.1...v3.0.0) (2020-05-06) | ||
| ### Bug Fixes | ||
| * reverse offset to match css positioning system ([9ea5291](https://github.com/dominictwlee/react-interactive-guide/commit/9ea529162b60d7ea4ace7250ce11ec1a079e75b1)) | ||
| ### BREAKING CHANGES | ||
| * This reverses the direction that elements will move according to offsetY | ||
| ## [2.3.1](https://github.com/dominictwlee/react-interactive-guide/compare/v2.3.0...v2.3.1) (2020-05-05) | ||
@@ -2,0 +14,0 @@ |
@@ -1,2 +0,2 @@ | ||
| function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var t=e(require("react-dom")),n=e(require("lodash.throttle")),o=require("@popperjs/core"),r=e(require("styled-components")),i=require("react-spring"),s=require("react"),l=e(s),u=s.createContext(null);function a(){var e=s.useContext(u);if(!e)throw new Error("useGuide must be used within TourguideProvider");return e}var c=i.animated(r.div(function(e){return{position:"fixed",bottom:0,left:0,right:0,top:0,overflow:"hidden",zIndex:2300,visibility:e.isIdle&&!e.show?"hidden":"visible",backgroundColor:"rgba(26, 29, 52, 0.5)",mixBlendMode:"hard-light"}}));function d(e,t){"function"==typeof e?e(t):e&&(e.current=t)}function f(e){var t,n,r=e.anchorEl,i=e.popperOptions,l=e.ref,u=e.show,a=e.animated,c=s.useRef(null),f=s.useMemo(function(){return null==t&&null==n?null:function(e){d(t,e),d(n,e)}},[t=c,n=l]),h=s.useRef(null),p=s.useCallback(function(){r&&i&&c.current&&u&&(h.current=o.createPopper(r,c.current,i))},[r,i,u]),m=s.useCallback(function(){null!=h.current&&(h.current.destroy(),h.current=null)},[]);return s.useEffect(function(){return p(),function(){a||m()}},[p,m,a]),s.useEffect(function(){return function(){m()}},[m]),{selfRef:f,tooltipRef:c,destroy:m}}function h(e){var t=e.show,n=e.curPos,o=e.pos,r=e.destroy,i=s.useState("idle"),l=i[1];return{handleAnimStart:function(){t&&n===o&&l("active")},handleAnimRest:function(){t?n!==o&&l("standby"):(r(),l("idle"))},animLifecycle:i[0]}}var p=i.animated(function(e){var t=e.dimensions,n=e.style;return void 0===n&&(n={}),l.createElement("div",{style:Object.assign({},n,{borderRadius:4,backgroundColor:"gray",width:t[0],height:t[1]})})}),m=s.forwardRef(function(e,t){var n,o,r=e.anchorEl,u=e.show,a=e.curPos,c=e.pos,d=e.animated,m=e.positionStyles,g=e.styles,y=s.useState(null),v=y[0],b=y[1],E=m&&m[c]?m[c]:{},w=E.width,P=E.height,S=E.offsetX,k=E.offsetY,C=g||{},R=C.width,x=C.height,A=C.offsetX,j=C.offsetY,I=s.useMemo(function(){if(!v)return v;var e=v[0],t=v[1];return[null!=w?"function"==typeof w?w(e):w:null!=R?"function"==typeof R?R(e):R:e,null!=P?"function"==typeof P?P(t):P:null!=x?"function"==typeof x?x(t):x:t]},[v,w,R,P,x]),L=v&&I?{modifiers:[{name:"offset",options:{offset:[0+(S||A||0),(n=v,o=I,(o[1]<n[1]?-(Math.abs(o[1]-n[1])/2+o[1]):-(Math.abs(o[1]-n[1])/2+n[1]))-(k||j||0))]}}]}:null,q=f({anchorEl:r,show:u,popperOptions:L,ref:t,animated:d}),M=q.selfRef,O=h({show:u,curPos:a,pos:c,destroy:q.destroy}),z=O.handleAnimStart,Y=O.handleAnimRest,B=O.animLifecycle;s.useEffect(function(){if(r){var e=r.getBoundingClientRect();b([e.width,e.height])}},[r]);var F=i.useSpring({opacity:u&&a===c?1:0,onStart:z,onRest:Y,config:g&&g.spring});return I&&(u||d&&"idle"!==B)?l.createElement("div",{ref:M,style:{visibility:"standby"===B?"hidden":"visible"}},l.createElement(p,{style:d?F:void 0,dimensions:I})):null}),g={modifiers:[{name:"offset",options:{offset:[0,24]}}]},y=s.forwardRef(function(e,t){var n=e.show,o=e.children,r=e.curPos,s=e.pos,u=e.animated,a=e.styles,c=f({anchorEl:e.anchorEl,show:n,popperOptions:g,ref:t,animated:u}),d=c.selfRef,p=h({show:n,curPos:r,pos:s,destroy:c.destroy}),m=p.animLifecycle,y=i.useSpring({to:{opacity:n&&r===s?1:0,transform:n&&r===s?"scaleY(1)":"scaleY(0)"},onStart:p.handleAnimStart,onRest:p.handleAnimRest,config:a&&a.spring});return n||u&&"idle"!==m?l.createElement("div",{ref:d,style:{visibility:"standby"===m?"hidden":"visible"}},o?l.createElement(i.animated.div,{style:u?y:void 0},o):null):null}),v=i.animated(r.div(function(e){return Object.assign({},{position:"absolute",zIndex:2600,visibility:e.isIdle&&!e.show?"hidden":"visible"},function(e,t,n){var o={};return"center"===t?o.top="50vh":"top"===t?o.top="2vw":"bottom"===t&&(o.bottom="7vh"),"left"===e?o.left="2vw":"right"===e?o.right="2vw":"center"===e&&(o.left=n?"calc(50vw - "+n/2+"px)":"50vw"),o}(e.justify,e.align,e.measuredWidth))})),b=i.animated(r.div({width:24,height:24,border:"1.5px solid white",borderRadius:666})),E=function(e){var t=i.useSpring({backgroundColor:e.focused?"rgba(255, 255, 255, 1)":"rgba(255, 255, 255, 0)"});return l.createElement(b,Object.assign({},e,{style:t}))},w=r.div({display:"flex","& div:not(:first-child)":{marginLeft:24}}),P=function(e){var t=e.curPos;return l.createElement(w,null,Array(e.steps).fill(null).map(function(e,n){return l.createElement(E,{key:"dot-"+n,focused:t===n})}))},S=r.div({zIndex:2400,position:"absolute"});exports.useGuide=a,exports.Tourguide=function(e){var o=e.tooltip,r=e.animated;void 0===r&&(r=!0);var u=e.precondition;void 0===u&&(u=!0);var d=e.content,f=e.node,h=e.leftControl,p=e.rightControl,g=e.closeControl,b=e.positionStyles,E=e.styles,w=s.useState(0),k=w[0],C=w[1],R=s.useState(!0),x=R[0],A=R[1],j=a(),I=j.anchorEls,L=j.curPos,q=j.show,M=j.close,O=j.setStatus,z=j.prev,Y=j.next,B=s.useCallback(function(e){null!==e&&C(e.getBoundingClientRect().width)},[]),F=I[L],N=s.useCallback(n(function(e){switch(e.key){case"Escape":M();break;case"ArrowLeft":z();break;case"ArrowRight":Y()}},400),[M,Y,z]);s.useEffect(function(){return q&&document.addEventListener("keydown",N),function(){document.removeEventListener("keydown",N)}},[N,q]),s.useEffect(function(){u&&I.length&&O("ready")},[I.length,u,O]);var T=i.useSpring({opacity:q?1:0,onStart:function(){q&&A(!1)},onRest:function(){q||A(!0)}});return null==f?null:t.createPortal(r?l.createElement(l.Fragment,null,h&&l.createElement(v,{align:"center",justify:"left",style:T,isIdle:x,show:q},h),p&&l.createElement(v,{align:"center",justify:"right",style:T,isIdle:x,show:q},p),g&&l.createElement(v,{align:"top",justify:"right",style:T,isIdle:x,show:q},g),l.createElement(v,{align:"bottom",justify:"center",ref:B,measuredWidth:k,style:T,isIdle:x,show:q},l.createElement(P,{steps:I.length,curPos:L})),"}",l.createElement(c,{style:T,isIdle:x,show:q},I.map(function(e){return l.createElement(m,{key:"spotlight-"+e.dataset.tourguidePosition,anchorEl:e,pos:Number(e.dataset.tourguidePosition),animated:!0,show:q,curPos:L,positionStyles:b&&b.spotlight,styles:E&&E.spotlight})})),l.createElement(S,null,I.map(function(e,t){return l.createElement(s.Fragment,{key:"tourguideEl-"+t},o&&l.createElement(y,{show:q,anchorEl:e,pos:Number(e.dataset.tourguidePosition),curPos:L,animated:!0,index:t,styles:E&&E.tooltip},Array.isArray(o)?o[t]:s.isValidElement(o)?o:l.createElement(o,null,d&&d[t])))}))):l.createElement(l.Fragment,null,l.createElement(m,{anchorEl:F,show:q,pos:L,curPos:L,positionStyles:b&&b.spotlight,styles:E&&E.spotlight}),o&&l.createElement(y,{anchorEl:F,show:q,pos:L,curPos:L},o)),f)},exports.TourguideProvider=function(e){var t=e.children,n=function(){var e=s.useState([]),t=e[0],n=e[1],o=s.useState(!1),r=o[0],i=o[1],l=s.useState(0),u=l[0],a=l[1],c=s.useState("idle"),d=c[0],f=c[1],h=s.useCallback(function(e){null!==e&&e.dataset.tourguidePosition&&(n(function(t){var n=[].concat(t);return n[Number(e.dataset.tourguidePosition)]=e,n}),"idle"===d&&f("initializing"))},[d]),p=s.useCallback(function(e){return{ref:h,"data-tourguide-position":e}},[h]),m=s.useCallback(function(){i(function(e){return!e})},[]),g=s.useCallback(function(){i(!1),a(0)},[]),y=s.useCallback(function(){a(function(e){return e>=t.length-1?e:e+1})},[t.length]),v=s.useCallback(function(){a(function(e){return 0===e?e:e-1})},[]),b=s.useCallback(function(){i(!1),n([]),a(0),f("idle")},[]);return s.useMemo(function(){return{show:r,next:y,prev:v,anchorEls:t,curPos:u,getAnchorElProps:p,setShow:i,setCurPos:a,toggle:m,handleRef:h,reset:b,close:g,setStatus:f,status:d}},[t,u,p,h,y,v,b,r,m,g,d])}();return l.createElement(u.Provider,{value:n},t)}; | ||
| function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var t=e(require("react-dom")),n=e(require("lodash.throttle")),o=require("@popperjs/core"),r=e(require("styled-components")),i=require("react-spring"),s=require("react"),l=e(s),u=s.createContext(null);function a(){var e=s.useContext(u);if(!e)throw new Error("useGuide must be used within TourguideProvider");return e}var c=i.animated(r.div(function(e){return{position:"fixed",bottom:0,left:0,right:0,top:0,overflow:"hidden",zIndex:2300,visibility:e.isIdle&&!e.show?"hidden":"visible",backgroundColor:"rgba(26, 29, 52, 0.5)",mixBlendMode:"hard-light"}}));function d(e,t){"function"==typeof e?e(t):e&&(e.current=t)}function f(e){var t,n,r=e.anchorEl,i=e.popperOptions,l=e.ref,u=e.show,a=e.animated,c=s.useRef(null),f=s.useMemo(function(){return null==t&&null==n?null:function(e){d(t,e),d(n,e)}},[t=c,n=l]),h=s.useRef(null),p=s.useCallback(function(){r&&i&&c.current&&u&&(h.current=o.createPopper(r,c.current,i))},[r,i,u]),m=s.useCallback(function(){null!=h.current&&(h.current.destroy(),h.current=null)},[]);return s.useEffect(function(){return p(),function(){a||m()}},[p,m,a]),s.useEffect(function(){return function(){m()}},[m]),{selfRef:f,tooltipRef:c,destroy:m}}function h(e){var t=e.show,n=e.curPos,o=e.pos,r=e.destroy,i=s.useState("idle"),l=i[1];return{handleAnimStart:function(){t&&n===o&&l("active")},handleAnimRest:function(){t?n!==o&&l("standby"):(r(),l("idle"))},animLifecycle:i[0]}}var p=i.animated(function(e){var t=e.dimensions,n=e.style;return void 0===n&&(n={}),l.createElement("div",{style:Object.assign({},n,{borderRadius:4,backgroundColor:"gray",width:t[0],height:t[1]})})}),m=s.forwardRef(function(e,t){var n,o,r=e.anchorEl,u=e.show,a=e.curPos,c=e.pos,d=e.animated,m=e.positionStyles,g=e.styles,y=s.useState(null),v=y[0],b=y[1],E=m&&m[c]?m[c]:{},w=E.width,P=E.height,S=E.offsetX,k=E.offsetY,C=g||{},R=C.width,x=C.height,A=C.offsetX,j=C.offsetY,I=s.useMemo(function(){if(!v)return v;var e=v[0],t=v[1];return[null!=w?"function"==typeof w?w(e):w:null!=R?"function"==typeof R?R(e):R:e,null!=P?"function"==typeof P?P(t):P:null!=x?"function"==typeof x?x(t):x:t]},[v,w,R,P,x]),L=v&&I?{modifiers:[{name:"offset",options:{offset:[0+(S||A||0),(n=v,o=I,(o[1]<n[1]?-(Math.abs(o[1]-n[1])/2+o[1]):-(Math.abs(o[1]-n[1])/2+n[1]))+(k||j||0))]}}]}:null,q=f({anchorEl:r,show:u,popperOptions:L,ref:t,animated:d}),M=q.selfRef,O=h({show:u,curPos:a,pos:c,destroy:q.destroy}),z=O.handleAnimStart,Y=O.handleAnimRest,B=O.animLifecycle;s.useEffect(function(){if(r){var e=r.getBoundingClientRect();b([e.width,e.height])}},[r]);var F=i.useSpring({opacity:u&&a===c?1:0,onStart:z,onRest:Y,config:g&&g.spring});return I&&(u||d&&"idle"!==B)?l.createElement("div",{ref:M,style:{visibility:"standby"===B?"hidden":"visible"}},l.createElement(p,{style:d?F:void 0,dimensions:I})):null}),g={modifiers:[{name:"offset",options:{offset:[0,24]}}]},y=s.forwardRef(function(e,t){var n=e.show,o=e.children,r=e.curPos,s=e.pos,u=e.animated,a=e.styles,c=f({anchorEl:e.anchorEl,show:n,popperOptions:g,ref:t,animated:u}),d=c.selfRef,p=h({show:n,curPos:r,pos:s,destroy:c.destroy}),m=p.animLifecycle,y=i.useSpring({to:{opacity:n&&r===s?1:0,transform:n&&r===s?"scaleY(1)":"scaleY(0)"},onStart:p.handleAnimStart,onRest:p.handleAnimRest,config:a&&a.spring});return n||u&&"idle"!==m?l.createElement("div",{ref:d,style:{visibility:"standby"===m?"hidden":"visible"}},o?l.createElement(i.animated.div,{style:u?y:void 0},o):null):null}),v=i.animated(r.div(function(e){return Object.assign({},{position:"absolute",zIndex:2600,visibility:e.isIdle&&!e.show?"hidden":"visible"},function(e,t,n){var o={};return"center"===t?o.top="50vh":"top"===t?o.top="2vw":"bottom"===t&&(o.bottom="7vh"),"left"===e?o.left="2vw":"right"===e?o.right="2vw":"center"===e&&(o.left=n?"calc(50vw - "+n/2+"px)":"50vw"),o}(e.justify,e.align,e.measuredWidth))})),b=i.animated(r.div({width:24,height:24,border:"1.5px solid white",borderRadius:666})),E=function(e){var t=i.useSpring({backgroundColor:e.focused?"rgba(255, 255, 255, 1)":"rgba(255, 255, 255, 0)"});return l.createElement(b,Object.assign({},e,{style:t}))},w=r.div({display:"flex","& div:not(:first-child)":{marginLeft:24}}),P=function(e){var t=e.curPos;return l.createElement(w,null,Array(e.steps).fill(null).map(function(e,n){return l.createElement(E,{key:"dot-"+n,focused:t===n})}))},S=r.div({zIndex:2400,position:"absolute"});exports.useGuide=a,exports.Tourguide=function(e){var o=e.tooltip,r=e.animated;void 0===r&&(r=!0);var u=e.precondition;void 0===u&&(u=!0);var d=e.content,f=e.node,h=e.leftControl,p=e.rightControl,g=e.closeControl,b=e.positionStyles,E=e.styles,w=s.useState(0),k=w[0],C=w[1],R=s.useState(!0),x=R[0],A=R[1],j=a(),I=j.anchorEls,L=j.curPos,q=j.show,M=j.close,O=j.setStatus,z=j.prev,Y=j.next,B=s.useCallback(function(e){null!==e&&C(e.getBoundingClientRect().width)},[]),F=I[L],N=s.useCallback(n(function(e){switch(e.key){case"Escape":M();break;case"ArrowLeft":z();break;case"ArrowRight":Y()}},400),[M,Y,z]);s.useEffect(function(){return q&&document.addEventListener("keydown",N),function(){document.removeEventListener("keydown",N)}},[N,q]),s.useEffect(function(){u&&I.length&&O("ready")},[I.length,u,O]);var T=i.useSpring({opacity:q?1:0,onStart:function(){q&&A(!1)},onRest:function(){q||A(!0)}});return null==f?null:t.createPortal(r?l.createElement(l.Fragment,null,h&&l.createElement(v,{align:"center",justify:"left",style:T,isIdle:x,show:q},h),p&&l.createElement(v,{align:"center",justify:"right",style:T,isIdle:x,show:q},p),g&&l.createElement(v,{align:"top",justify:"right",style:T,isIdle:x,show:q},g),l.createElement(v,{align:"bottom",justify:"center",ref:B,measuredWidth:k,style:T,isIdle:x,show:q},l.createElement(P,{steps:I.length,curPos:L})),"}",l.createElement(c,{style:T,isIdle:x,show:q},I.map(function(e){return l.createElement(m,{key:"spotlight-"+e.dataset.tourguidePosition,anchorEl:e,pos:Number(e.dataset.tourguidePosition),animated:!0,show:q,curPos:L,positionStyles:b&&b.spotlight,styles:E&&E.spotlight})})),l.createElement(S,null,I.map(function(e,t){return l.createElement(s.Fragment,{key:"tourguideEl-"+t},o&&l.createElement(y,{show:q,anchorEl:e,pos:Number(e.dataset.tourguidePosition),curPos:L,animated:!0,index:t,styles:E&&E.tooltip},Array.isArray(o)?o[t]:s.isValidElement(o)?o:l.createElement(o,null,d&&d[t])))}))):l.createElement(l.Fragment,null,l.createElement(m,{anchorEl:F,show:q,pos:L,curPos:L,positionStyles:b&&b.spotlight,styles:E&&E.spotlight}),o&&l.createElement(y,{anchorEl:F,show:q,pos:L,curPos:L},o)),f)},exports.TourguideProvider=function(e){var t=e.children,n=function(){var e=s.useState([]),t=e[0],n=e[1],o=s.useState(!1),r=o[0],i=o[1],l=s.useState(0),u=l[0],a=l[1],c=s.useState("idle"),d=c[0],f=c[1],h=s.useCallback(function(e){null!==e&&e.dataset.tourguidePosition&&(n(function(t){var n=[].concat(t);return n[Number(e.dataset.tourguidePosition)]=e,n}),"idle"===d&&f("initializing"))},[d]),p=s.useCallback(function(e){return{ref:h,"data-tourguide-position":e}},[h]),m=s.useCallback(function(){i(function(e){return!e})},[]),g=s.useCallback(function(){i(!1),a(0)},[]),y=s.useCallback(function(){a(function(e){return e>=t.length-1?e:e+1})},[t.length]),v=s.useCallback(function(){a(function(e){return 0===e?e:e-1})},[]),b=s.useCallback(function(){i(!1),n([]),a(0),f("idle")},[]);return s.useMemo(function(){return{show:r,next:y,prev:v,anchorEls:t,curPos:u,getAnchorElProps:p,setShow:i,setCurPos:a,toggle:m,handleRef:h,reset:b,close:g,setStatus:f,status:d}},[t,u,p,h,y,v,b,r,m,g,d])}();return l.createElement(u.Provider,{value:n},t)}; | ||
| //# sourceMappingURL=index.js.map |
@@ -1,2 +0,2 @@ | ||
| import t from"react-dom";import e from"lodash.throttle";import{createPopper as n}from"@popperjs/core";import o from"styled-components";import{animated as r,useSpring as i}from"react-spring";import s,{createContext as l,useContext as u,useMemo as a,useRef as c,useCallback as d,useEffect as f,useState as h,forwardRef as m,isValidElement as p,Fragment as y}from"react";var g=l(null);function v(){var t=u(g);if(!t)throw new Error("useGuide must be used within TourguideProvider");return t}var w=r(o.div(function(t){return{position:"fixed",bottom:0,left:0,right:0,top:0,overflow:"hidden",zIndex:2300,visibility:t.isIdle&&!t.show?"hidden":"visible",backgroundColor:"rgba(26, 29, 52, 0.5)",mixBlendMode:"hard-light"}}));function E(t,e){"function"==typeof t?t(e):t&&(t.current=e)}function b(t){var e,o,r=t.anchorEl,i=t.popperOptions,s=t.ref,l=t.show,u=t.animated,h=c(null),m=a(function(){return null==e&&null==o?null:function(t){E(e,t),E(o,t)}},[e=h,o=s]),p=c(null),y=d(function(){r&&i&&h.current&&l&&(p.current=n(r,h.current,i))},[r,i,l]),g=d(function(){null!=p.current&&(p.current.destroy(),p.current=null)},[]);return f(function(){return y(),function(){u||g()}},[y,g,u]),f(function(){return function(){g()}},[g]),{selfRef:m,tooltipRef:h,destroy:g}}function P(t){var e=t.show,n=t.curPos,o=t.pos,r=t.destroy,i=h("idle"),s=i[1];return{handleAnimStart:function(){e&&n===o&&s("active")},handleAnimRest:function(){e?n!==o&&s("standby"):(r(),s("idle"))},animLifecycle:i[0]}}var R=r(function(t){var e=t.dimensions,n=t.style;return void 0===n&&(n={}),s.createElement("div",{style:Object.assign({},n,{borderRadius:4,backgroundColor:"gray",width:e[0],height:e[1]})})}),S=m(function(t,e){var n,o,r=t.anchorEl,l=t.show,u=t.curPos,c=t.pos,d=t.animated,m=t.positionStyles,p=t.styles,y=h(null),g=y[0],v=y[1],w=m&&m[c]?m[c]:{},E=w.width,S=w.height,x=w.offsetX,A=w.offsetY,k=p||{},I=k.width,j=k.height,C=k.offsetX,L=k.offsetY,O=a(function(){if(!g)return g;var t=g[0],e=g[1];return[null!=E?"function"==typeof E?E(t):E:null!=I?"function"==typeof I?I(t):I:t,null!=S?"function"==typeof S?S(e):S:null!=j?"function"==typeof j?j(e):j:e]},[g,E,I,S,j]),z=g&&O?{modifiers:[{name:"offset",options:{offset:[0+(x||C||0),(n=g,o=O,(o[1]<n[1]?-(Math.abs(o[1]-n[1])/2+o[1]):-(Math.abs(o[1]-n[1])/2+n[1]))-(A||L||0))]}}]}:null,Y=b({anchorEl:r,show:l,popperOptions:z,ref:e,animated:d}),B=Y.selfRef,M=P({show:l,curPos:u,pos:c,destroy:Y.destroy}),N=M.handleAnimStart,F=M.handleAnimRest,W=M.animLifecycle;f(function(){if(r){var t=r.getBoundingClientRect();v([t.width,t.height])}},[r]);var X=i({opacity:l&&u===c?1:0,onStart:N,onRest:F,config:p&&p.spring});return O&&(l||d&&"idle"!==W)?s.createElement("div",{ref:B,style:{visibility:"standby"===W?"hidden":"visible"}},s.createElement(R,{style:d?X:void 0,dimensions:O})):null}),x={modifiers:[{name:"offset",options:{offset:[0,24]}}]},A=m(function(t,e){var n=t.show,o=t.children,l=t.curPos,u=t.pos,a=t.animated,c=t.styles,d=b({anchorEl:t.anchorEl,show:n,popperOptions:x,ref:e,animated:a}),f=d.selfRef,h=P({show:n,curPos:l,pos:u,destroy:d.destroy}),m=h.animLifecycle,p=i({to:{opacity:n&&l===u?1:0,transform:n&&l===u?"scaleY(1)":"scaleY(0)"},onStart:h.handleAnimStart,onRest:h.handleAnimRest,config:c&&c.spring});return n||a&&"idle"!==m?s.createElement("div",{ref:f,style:{visibility:"standby"===m?"hidden":"visible"}},o?s.createElement(r.div,{style:a?p:void 0},o):null):null}),k=r(o.div(function(t){return Object.assign({},{position:"absolute",zIndex:2600,visibility:t.isIdle&&!t.show?"hidden":"visible"},function(t,e,n){var o={};return"center"===e?o.top="50vh":"top"===e?o.top="2vw":"bottom"===e&&(o.bottom="7vh"),"left"===t?o.left="2vw":"right"===t?o.right="2vw":"center"===t&&(o.left=n?"calc(50vw - "+n/2+"px)":"50vw"),o}(t.justify,t.align,t.measuredWidth))})),I=r(o.div({width:24,height:24,border:"1.5px solid white",borderRadius:666})),j=function(t){var e=i({backgroundColor:t.focused?"rgba(255, 255, 255, 1)":"rgba(255, 255, 255, 0)"});return s.createElement(I,Object.assign({},t,{style:e}))},C=o.div({display:"flex","& div:not(:first-child)":{marginLeft:24}}),L=function(t){var e=t.curPos;return s.createElement(C,null,Array(t.steps).fill(null).map(function(t,n){return s.createElement(j,{key:"dot-"+n,focused:e===n})}))},O=o.div({zIndex:2400,position:"absolute"}),z=function(n){var o=n.tooltip,r=n.animated;void 0===r&&(r=!0);var l=n.precondition;void 0===l&&(l=!0);var u=n.content,a=n.node,c=n.leftControl,m=n.rightControl,g=n.closeControl,E=n.positionStyles,b=n.styles,P=h(0),R=P[0],x=P[1],I=h(!0),j=I[0],C=I[1],z=v(),Y=z.anchorEls,B=z.curPos,M=z.show,N=z.close,F=z.setStatus,W=z.prev,X=z.next,G=d(function(t){null!==t&&x(t.getBoundingClientRect().width)},[]),T=Y[B],q=d(e(function(t){switch(t.key){case"Escape":N();break;case"ArrowLeft":W();break;case"ArrowRight":X()}},400),[N,X,W]);f(function(){return M&&document.addEventListener("keydown",q),function(){document.removeEventListener("keydown",q)}},[q,M]),f(function(){l&&Y.length&&F("ready")},[Y.length,l,F]);var D=i({opacity:M?1:0,onStart:function(){M&&C(!1)},onRest:function(){M||C(!0)}});return null==a?null:t.createPortal(r?s.createElement(s.Fragment,null,c&&s.createElement(k,{align:"center",justify:"left",style:D,isIdle:j,show:M},c),m&&s.createElement(k,{align:"center",justify:"right",style:D,isIdle:j,show:M},m),g&&s.createElement(k,{align:"top",justify:"right",style:D,isIdle:j,show:M},g),s.createElement(k,{align:"bottom",justify:"center",ref:G,measuredWidth:R,style:D,isIdle:j,show:M},s.createElement(L,{steps:Y.length,curPos:B})),"}",s.createElement(w,{style:D,isIdle:j,show:M},Y.map(function(t){return s.createElement(S,{key:"spotlight-"+t.dataset.tourguidePosition,anchorEl:t,pos:Number(t.dataset.tourguidePosition),animated:!0,show:M,curPos:B,positionStyles:E&&E.spotlight,styles:b&&b.spotlight})})),s.createElement(O,null,Y.map(function(t,e){return s.createElement(y,{key:"tourguideEl-"+e},o&&s.createElement(A,{show:M,anchorEl:t,pos:Number(t.dataset.tourguidePosition),curPos:B,animated:!0,index:e,styles:b&&b.tooltip},Array.isArray(o)?o[e]:p(o)?o:s.createElement(o,null,u&&u[e])))}))):s.createElement(s.Fragment,null,s.createElement(S,{anchorEl:T,show:M,pos:B,curPos:B,positionStyles:E&&E.spotlight,styles:b&&b.spotlight}),o&&s.createElement(A,{anchorEl:T,show:M,pos:B,curPos:B},o)),a)},Y=function(t){var e=t.children,n=function(){var t=h([]),e=t[0],n=t[1],o=h(!1),r=o[0],i=o[1],s=h(0),l=s[0],u=s[1],c=h("idle"),f=c[0],m=c[1],p=d(function(t){null!==t&&t.dataset.tourguidePosition&&(n(function(e){var n=[].concat(e);return n[Number(t.dataset.tourguidePosition)]=t,n}),"idle"===f&&m("initializing"))},[f]),y=d(function(t){return{ref:p,"data-tourguide-position":t}},[p]),g=d(function(){i(function(t){return!t})},[]),v=d(function(){i(!1),u(0)},[]),w=d(function(){u(function(t){return t>=e.length-1?t:t+1})},[e.length]),E=d(function(){u(function(t){return 0===t?t:t-1})},[]),b=d(function(){i(!1),n([]),u(0),m("idle")},[]);return a(function(){return{show:r,next:w,prev:E,anchorEls:e,curPos:l,getAnchorElProps:y,setShow:i,setCurPos:u,toggle:g,handleRef:p,reset:b,close:v,setStatus:m,status:f}},[e,l,y,p,w,E,b,r,g,v,f])}();return s.createElement(g.Provider,{value:n},e)};export{v as useGuide,z as Tourguide,Y as TourguideProvider}; | ||
| import t from"react-dom";import e from"lodash.throttle";import{createPopper as n}from"@popperjs/core";import o from"styled-components";import{animated as r,useSpring as i}from"react-spring";import s,{createContext as l,useContext as u,useMemo as a,useRef as c,useCallback as d,useEffect as f,useState as h,forwardRef as m,isValidElement as p,Fragment as y}from"react";var g=l(null);function v(){var t=u(g);if(!t)throw new Error("useGuide must be used within TourguideProvider");return t}var w=r(o.div(function(t){return{position:"fixed",bottom:0,left:0,right:0,top:0,overflow:"hidden",zIndex:2300,visibility:t.isIdle&&!t.show?"hidden":"visible",backgroundColor:"rgba(26, 29, 52, 0.5)",mixBlendMode:"hard-light"}}));function E(t,e){"function"==typeof t?t(e):t&&(t.current=e)}function b(t){var e,o,r=t.anchorEl,i=t.popperOptions,s=t.ref,l=t.show,u=t.animated,h=c(null),m=a(function(){return null==e&&null==o?null:function(t){E(e,t),E(o,t)}},[e=h,o=s]),p=c(null),y=d(function(){r&&i&&h.current&&l&&(p.current=n(r,h.current,i))},[r,i,l]),g=d(function(){null!=p.current&&(p.current.destroy(),p.current=null)},[]);return f(function(){return y(),function(){u||g()}},[y,g,u]),f(function(){return function(){g()}},[g]),{selfRef:m,tooltipRef:h,destroy:g}}function P(t){var e=t.show,n=t.curPos,o=t.pos,r=t.destroy,i=h("idle"),s=i[1];return{handleAnimStart:function(){e&&n===o&&s("active")},handleAnimRest:function(){e?n!==o&&s("standby"):(r(),s("idle"))},animLifecycle:i[0]}}var R=r(function(t){var e=t.dimensions,n=t.style;return void 0===n&&(n={}),s.createElement("div",{style:Object.assign({},n,{borderRadius:4,backgroundColor:"gray",width:e[0],height:e[1]})})}),S=m(function(t,e){var n,o,r=t.anchorEl,l=t.show,u=t.curPos,c=t.pos,d=t.animated,m=t.positionStyles,p=t.styles,y=h(null),g=y[0],v=y[1],w=m&&m[c]?m[c]:{},E=w.width,S=w.height,x=w.offsetX,A=w.offsetY,k=p||{},I=k.width,j=k.height,C=k.offsetX,L=k.offsetY,O=a(function(){if(!g)return g;var t=g[0],e=g[1];return[null!=E?"function"==typeof E?E(t):E:null!=I?"function"==typeof I?I(t):I:t,null!=S?"function"==typeof S?S(e):S:null!=j?"function"==typeof j?j(e):j:e]},[g,E,I,S,j]),z=g&&O?{modifiers:[{name:"offset",options:{offset:[0+(x||C||0),(n=g,o=O,(o[1]<n[1]?-(Math.abs(o[1]-n[1])/2+o[1]):-(Math.abs(o[1]-n[1])/2+n[1]))+(A||L||0))]}}]}:null,Y=b({anchorEl:r,show:l,popperOptions:z,ref:e,animated:d}),B=Y.selfRef,M=P({show:l,curPos:u,pos:c,destroy:Y.destroy}),N=M.handleAnimStart,F=M.handleAnimRest,W=M.animLifecycle;f(function(){if(r){var t=r.getBoundingClientRect();v([t.width,t.height])}},[r]);var X=i({opacity:l&&u===c?1:0,onStart:N,onRest:F,config:p&&p.spring});return O&&(l||d&&"idle"!==W)?s.createElement("div",{ref:B,style:{visibility:"standby"===W?"hidden":"visible"}},s.createElement(R,{style:d?X:void 0,dimensions:O})):null}),x={modifiers:[{name:"offset",options:{offset:[0,24]}}]},A=m(function(t,e){var n=t.show,o=t.children,l=t.curPos,u=t.pos,a=t.animated,c=t.styles,d=b({anchorEl:t.anchorEl,show:n,popperOptions:x,ref:e,animated:a}),f=d.selfRef,h=P({show:n,curPos:l,pos:u,destroy:d.destroy}),m=h.animLifecycle,p=i({to:{opacity:n&&l===u?1:0,transform:n&&l===u?"scaleY(1)":"scaleY(0)"},onStart:h.handleAnimStart,onRest:h.handleAnimRest,config:c&&c.spring});return n||a&&"idle"!==m?s.createElement("div",{ref:f,style:{visibility:"standby"===m?"hidden":"visible"}},o?s.createElement(r.div,{style:a?p:void 0},o):null):null}),k=r(o.div(function(t){return Object.assign({},{position:"absolute",zIndex:2600,visibility:t.isIdle&&!t.show?"hidden":"visible"},function(t,e,n){var o={};return"center"===e?o.top="50vh":"top"===e?o.top="2vw":"bottom"===e&&(o.bottom="7vh"),"left"===t?o.left="2vw":"right"===t?o.right="2vw":"center"===t&&(o.left=n?"calc(50vw - "+n/2+"px)":"50vw"),o}(t.justify,t.align,t.measuredWidth))})),I=r(o.div({width:24,height:24,border:"1.5px solid white",borderRadius:666})),j=function(t){var e=i({backgroundColor:t.focused?"rgba(255, 255, 255, 1)":"rgba(255, 255, 255, 0)"});return s.createElement(I,Object.assign({},t,{style:e}))},C=o.div({display:"flex","& div:not(:first-child)":{marginLeft:24}}),L=function(t){var e=t.curPos;return s.createElement(C,null,Array(t.steps).fill(null).map(function(t,n){return s.createElement(j,{key:"dot-"+n,focused:e===n})}))},O=o.div({zIndex:2400,position:"absolute"}),z=function(n){var o=n.tooltip,r=n.animated;void 0===r&&(r=!0);var l=n.precondition;void 0===l&&(l=!0);var u=n.content,a=n.node,c=n.leftControl,m=n.rightControl,g=n.closeControl,E=n.positionStyles,b=n.styles,P=h(0),R=P[0],x=P[1],I=h(!0),j=I[0],C=I[1],z=v(),Y=z.anchorEls,B=z.curPos,M=z.show,N=z.close,F=z.setStatus,W=z.prev,X=z.next,G=d(function(t){null!==t&&x(t.getBoundingClientRect().width)},[]),T=Y[B],q=d(e(function(t){switch(t.key){case"Escape":N();break;case"ArrowLeft":W();break;case"ArrowRight":X()}},400),[N,X,W]);f(function(){return M&&document.addEventListener("keydown",q),function(){document.removeEventListener("keydown",q)}},[q,M]),f(function(){l&&Y.length&&F("ready")},[Y.length,l,F]);var D=i({opacity:M?1:0,onStart:function(){M&&C(!1)},onRest:function(){M||C(!0)}});return null==a?null:t.createPortal(r?s.createElement(s.Fragment,null,c&&s.createElement(k,{align:"center",justify:"left",style:D,isIdle:j,show:M},c),m&&s.createElement(k,{align:"center",justify:"right",style:D,isIdle:j,show:M},m),g&&s.createElement(k,{align:"top",justify:"right",style:D,isIdle:j,show:M},g),s.createElement(k,{align:"bottom",justify:"center",ref:G,measuredWidth:R,style:D,isIdle:j,show:M},s.createElement(L,{steps:Y.length,curPos:B})),"}",s.createElement(w,{style:D,isIdle:j,show:M},Y.map(function(t){return s.createElement(S,{key:"spotlight-"+t.dataset.tourguidePosition,anchorEl:t,pos:Number(t.dataset.tourguidePosition),animated:!0,show:M,curPos:B,positionStyles:E&&E.spotlight,styles:b&&b.spotlight})})),s.createElement(O,null,Y.map(function(t,e){return s.createElement(y,{key:"tourguideEl-"+e},o&&s.createElement(A,{show:M,anchorEl:t,pos:Number(t.dataset.tourguidePosition),curPos:B,animated:!0,index:e,styles:b&&b.tooltip},Array.isArray(o)?o[e]:p(o)?o:s.createElement(o,null,u&&u[e])))}))):s.createElement(s.Fragment,null,s.createElement(S,{anchorEl:T,show:M,pos:B,curPos:B,positionStyles:E&&E.spotlight,styles:b&&b.spotlight}),o&&s.createElement(A,{anchorEl:T,show:M,pos:B,curPos:B},o)),a)},Y=function(t){var e=t.children,n=function(){var t=h([]),e=t[0],n=t[1],o=h(!1),r=o[0],i=o[1],s=h(0),l=s[0],u=s[1],c=h("idle"),f=c[0],m=c[1],p=d(function(t){null!==t&&t.dataset.tourguidePosition&&(n(function(e){var n=[].concat(e);return n[Number(t.dataset.tourguidePosition)]=t,n}),"idle"===f&&m("initializing"))},[f]),y=d(function(t){return{ref:p,"data-tourguide-position":t}},[p]),g=d(function(){i(function(t){return!t})},[]),v=d(function(){i(!1),u(0)},[]),w=d(function(){u(function(t){return t>=e.length-1?t:t+1})},[e.length]),E=d(function(){u(function(t){return 0===t?t:t-1})},[]),b=d(function(){i(!1),n([]),u(0),m("idle")},[]);return a(function(){return{show:r,next:w,prev:E,anchorEls:e,curPos:l,getAnchorElProps:y,setShow:i,setCurPos:u,toggle:g,handleRef:p,reset:b,close:v,setStatus:m,status:f}},[e,l,y,p,w,E,b,r,g,v,f])}();return s.createElement(g.Provider,{value:n},e)};export{v as useGuide,z as Tourguide,Y as TourguideProvider}; | ||
| //# sourceMappingURL=index.module.js.map |
| { | ||
| "name": "react-interactive-guide", | ||
| "version": "2.3.1", | ||
| "version": "3.0.0", | ||
| "description": "Interactive tour guide for your react app", | ||
@@ -5,0 +5,0 @@ "source": "src/index.ts", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by0.35%
109134
No dependency changes