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.2.1 to 2.2.2
@@ -0,1 +1,8 @@ | ||
| ## [2.2.2](https://github.com/dominictwlee/react-interactive-guide/compare/v2.2.1...v2.2.2) (2020-04-30) | ||
| ### Bug Fixes | ||
| * handle offset if custom dimen height is smaller than base ([5083d3f](https://github.com/dominictwlee/react-interactive-guide/commit/5083d3fc31a5c899054096148563d43ffcf3355d)) | ||
| ## [2.2.1](https://github.com/dominictwlee/react-interactive-guide/compare/v2.2.0...v2.2.1) (2020-04-30) | ||
@@ -2,0 +9,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")),r=require("@popperjs/core"),o=e(require("styled-components")),i=require("react-spring"),s=require("react"),u=e(s),l=s.createContext(null);function a(){var e=s.useContext(l);if(!e)throw new Error("useGuide must be used within TourguideProvider");return e}var c=i.animated(o.div(function(e){var t=e.isIdle;return{position:"fixed",bottom:0,left:0,right:0,top:0,overflow:"hidden",visibility:t?"hidden":"visible",zIndex:t?-1:2300,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,o=e.anchorEl,i=e.popperOptions,u=e.ref,l=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=u]),h=s.useRef(null),m=s.useCallback(function(){o&&i&&c.current&&l&&(h.current=r.createPopper(o,c.current,i))},[o,i,l]),p=s.useCallback(function(){null!=h.current&&(h.current.destroy(),h.current=null)},[]);return s.useEffect(function(){return m(),function(){a||p()}},[m,p,a]),s.useEffect(function(){return function(){p()}},[p]),{selfRef:f,tooltipRef:c,destroy:p}}function h(e){var t=e.show,n=e.curPos,r=e.pos,o=e.destroy,i=s.useState("idle"),u=i[1];return{handleAnimStart:function(){t&&n===r&&u("active")},handleAnimRest:function(){t?n!==r&&u("standby"):(o(),u("idle"))},animLifecycle:i[0]}}var m=i.animated(function(e){var t=e.dimensions,n=e.style;return void 0===n&&(n={}),u.createElement("div",{style:Object.assign({},n,{borderRadius:4,backgroundColor:"gray",width:t[0],height:t[1]})})}),p=s.forwardRef(function(e,t){var n=e.anchorEl,r=e.show,o=e.curPos,l=e.pos,a=e.animated,c=e.positionStyles,d=e.styles,p=s.useState(null),g=p[0],y=p[1],v=c&&c[l]?c[l]:{},E=v.width,b=v.height,w=v.offsetX,P=v.offsetY,S=d||{},k=S.width,C=S.height,R=S.offsetX,x=S.offsetY,A=s.useMemo(function(){if(!g)return g;var e=g[0],t=g[1];return[null!=E?"function"==typeof E?E(e):E:null!=k?"function"==typeof k?k(e):k:e,null!=b?"function"==typeof b?b(t):b:null!=C?"function"==typeof C?C(t):C:t]},[g,E,k,b,C]),j=g&&A?{modifiers:[{name:"offset",options:{offset:[0+(w||R||0),-(Math.abs(A[1]-g[1])/2+g[1])-(P||x||0)]}}]}:null,L=f({anchorEl:n,show:r,popperOptions:j,ref:t,animated:a}),q=L.selfRef,O=h({show:r,curPos:o,pos:l,destroy:L.destroy}),I=O.handleAnimStart,M=O.handleAnimRest,z=O.animLifecycle;s.useEffect(function(){if(n){var e=n.getBoundingClientRect();y([e.width,e.height])}},[n]);var Y=i.useSpring({opacity:r&&o===l?1:0,onStart:I,onRest:M,config:d&&d.spring});return A&&(r||a&&"idle"!==z)?u.createElement("div",{ref:q,style:{visibility:"standby"===z?"hidden":"visible"}},u.createElement(m,{style:a?Y:void 0,dimensions:A})):null}),g={modifiers:[{name:"offset",options:{offset:[0,24]}}]},y=s.forwardRef(function(e,t){var n=e.show,r=e.children,o=e.curPos,s=e.pos,l=e.animated,a=f({anchorEl:e.anchorEl,show:n,popperOptions:g,ref:t,animated:l}),c=a.selfRef,d=h({show:n,curPos:o,pos:s,destroy:a.destroy}),m=d.animLifecycle,p=i.useSpring({to:{opacity:n&&o===s?1:0,transform:n&&o===s?"scaleY(1)":"scaleY(0)"},onStart:d.handleAnimStart,onRest:d.handleAnimRest});return n||l&&"idle"!==m?u.createElement("div",{ref:c,style:{visibility:"standby"===m?"hidden":"visible"}},r?u.createElement(i.animated.div,{style:l?p:void 0},r):null):null}),v=i.animated(o.div(function(e){return Object.assign({},{position:"absolute",zIndex:2600},function(e,t,n){var r={};return"center"===t?r.top="50vh":"top"===t?r.top="2vw":"bottom"===t&&(r.bottom="7vh"),"left"===e?r.left="2vw":"right"===e?r.right="2vw":"center"===e&&(r.left=n?"calc(50vw - "+n/2+"px)":"50vw"),r}(e.justify,e.align,e.measuredWidth))})),E=i.animated(o.div({width:24,height:24,border:"1.5px solid white",borderRadius:666})),b=function(e){var t=i.useSpring({backgroundColor:e.focused?"rgba(255, 255, 255, 1)":"rgba(255, 255, 255, 0)"});return u.createElement(E,Object.assign({},e,{style:t}))},w=o.div({display:"flex","& div:not(:first-child)":{marginLeft:24}}),P=function(e){var t=e.curPos;return u.createElement(w,null,Array(e.steps).fill(null).map(function(e,n){return u.createElement(b,{key:"dot-"+n,focused:t===n})}))},S=o.div({zIndex:2400,position:"absolute"});exports.useGuide=a,exports.Tourguide=function(e){var r=e.tooltip,o=e.animated;void 0===o&&(o=!0);var l=e.precondition;void 0===l&&(l=!0);var d=e.content,f=e.node,h=e.leftControl,m=e.rightControl,g=e.closeControl,E=e.positionStyles,b=e.styles,w=s.useState(0),k=w[0],C=w[1],R=s.useState(!0),x=R[0],A=R[1],j=a(),L=j.anchorEls,q=j.curPos,O=j.show,I=j.close,M=j.setStatus,z=j.prev,Y=j.next,B=s.useCallback(function(e){null!==e&&C(e.getBoundingClientRect().width)},[]),F=L[q],N=s.useCallback(n(function(e){switch(e.key){case"Escape":I();break;case"ArrowLeft":z();break;case"ArrowRight":Y()}},400),[I,Y,z]);s.useEffect(function(){return O&&document.addEventListener("keydown",N),function(){document.removeEventListener("keydown",N)}},[N,O]),s.useEffect(function(){l&&L.length&&M("ready")},[L.length,l,M]);var T=i.useSpring({opacity:O?1:0,onStart:function(){O&&A(!1)},onRest:function(){O||A(!0)}});return t.createPortal(o?u.createElement(u.Fragment,null,h&&u.createElement(v,{align:"center",justify:"left",style:T},h),m&&u.createElement(v,{align:"center",justify:"right",style:T},m),g&&u.createElement(v,{align:"top",justify:"right",style:T},g),u.createElement(v,{align:"bottom",justify:"center",ref:B,measuredWidth:k,style:T},u.createElement(P,{steps:L.length,curPos:q})),u.createElement(c,{style:T,isIdle:x},L.map(function(e){return u.createElement(p,{key:"spotlight-"+e.dataset.tourguidePosition,anchorEl:e,pos:Number(e.dataset.tourguidePosition),animated:!0,show:O,curPos:q,positionStyles:E&&E.spotlight,styles:b&&b.spotlight})})),u.createElement(S,null,L.map(function(e,t){return u.createElement(s.Fragment,{key:"tourguideEl-"+t},r&&u.createElement(y,{show:O,anchorEl:e,pos:Number(e.dataset.tourguidePosition),curPos:q,animated:!0,index:t},Array.isArray(r)?r[t]:s.isValidElement(r)?r:u.createElement(r,null,d&&d[t])))}))):u.createElement(u.Fragment,null,u.createElement(p,{anchorEl:F,show:O,pos:q,curPos:q,positionStyles:E&&E.spotlight,styles:b&&b.spotlight}),r&&u.createElement(y,{anchorEl:F,show:O,pos:q,curPos:q},r)),f)},exports.TourguideProvider=function(e){var t=e.children,n=function(){var e=s.useState([]),t=e[0],n=e[1],r=s.useState(!1),o=r[0],i=r[1],u=s.useState(0),l=u[0],a=u[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]),m=s.useCallback(function(e){return{ref:h,"data-tourguide-position":e}},[h]),p=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})},[]),E=s.useCallback(function(){i(!1),n([]),a(0),f("idle")},[]);return s.useMemo(function(){return{show:o,next:y,prev:v,anchorEls:t,curPos:l,getAnchorElProps:m,setShow:i,setCurPos:a,toggle:p,handleRef:h,reset:E,close:g,setStatus:f,status:d}},[t,l,m,h,y,v,E,o,p,g,d])}();return u.createElement(l.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")),r=require("@popperjs/core"),o=e(require("styled-components")),i=require("react-spring"),s=require("react"),u=e(s),a=s.createContext(null);function l(){var e=s.useContext(a);if(!e)throw new Error("useGuide must be used within TourguideProvider");return e}var c=i.animated(o.div(function(e){var t=e.isIdle;return{position:"fixed",bottom:0,left:0,right:0,top:0,overflow:"hidden",visibility:t?"hidden":"visible",zIndex:t?-1:2300,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,o=e.anchorEl,i=e.popperOptions,u=e.ref,a=e.show,l=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=u]),h=s.useRef(null),m=s.useCallback(function(){o&&i&&c.current&&a&&(h.current=r.createPopper(o,c.current,i))},[o,i,a]),p=s.useCallback(function(){null!=h.current&&(h.current.destroy(),h.current=null)},[]);return s.useEffect(function(){return m(),function(){l||p()}},[m,p,l]),s.useEffect(function(){return function(){p()}},[p]),{selfRef:f,tooltipRef:c,destroy:p}}function h(e){var t=e.show,n=e.curPos,r=e.pos,o=e.destroy,i=s.useState("idle"),u=i[1];return{handleAnimStart:function(){t&&n===r&&u("active")},handleAnimRest:function(){t?n!==r&&u("standby"):(o(),u("idle"))},animLifecycle:i[0]}}var m=i.animated(function(e){var t=e.dimensions,n=e.style;return void 0===n&&(n={}),u.createElement("div",{style:Object.assign({},n,{borderRadius:4,backgroundColor:"gray",width:t[0],height:t[1]})})}),p=s.forwardRef(function(e,t){var n,r,o=e.anchorEl,a=e.show,l=e.curPos,c=e.pos,d=e.animated,p=e.positionStyles,g=e.styles,y=s.useState(null),v=y[0],b=y[1],E=p&&p[c]?p[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,L=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]),q=v&&L?{modifiers:[{name:"offset",options:{offset:[0+(S||A||0),(n=v,r=L,(r[1]<n[1]?-(Math.abs(r[1]-n[1])/2+r[1]):-(Math.abs(r[1]-n[1])/2+n[1]))-(k||j||0))]}}]}:null,M=f({anchorEl:o,show:a,popperOptions:q,ref:t,animated:d}),O=M.selfRef,I=h({show:a,curPos:l,pos:c,destroy:M.destroy}),z=I.handleAnimStart,Y=I.handleAnimRest,B=I.animLifecycle;s.useEffect(function(){if(o){var e=o.getBoundingClientRect();b([e.width,e.height])}},[o]);var F=i.useSpring({opacity:a&&l===c?1:0,onStart:z,onRest:Y,config:g&&g.spring});return L&&(a||d&&"idle"!==B)?u.createElement("div",{ref:O,style:{visibility:"standby"===B?"hidden":"visible"}},u.createElement(m,{style:d?F:void 0,dimensions:L})):null}),g={modifiers:[{name:"offset",options:{offset:[0,24]}}]},y=s.forwardRef(function(e,t){var n=e.show,r=e.children,o=e.curPos,s=e.pos,a=e.animated,l=f({anchorEl:e.anchorEl,show:n,popperOptions:g,ref:t,animated:a}),c=l.selfRef,d=h({show:n,curPos:o,pos:s,destroy:l.destroy}),m=d.animLifecycle,p=i.useSpring({to:{opacity:n&&o===s?1:0,transform:n&&o===s?"scaleY(1)":"scaleY(0)"},onStart:d.handleAnimStart,onRest:d.handleAnimRest});return n||a&&"idle"!==m?u.createElement("div",{ref:c,style:{visibility:"standby"===m?"hidden":"visible"}},r?u.createElement(i.animated.div,{style:a?p:void 0},r):null):null}),v=i.animated(o.div(function(e){return Object.assign({},{position:"absolute",zIndex:2600},function(e,t,n){var r={};return"center"===t?r.top="50vh":"top"===t?r.top="2vw":"bottom"===t&&(r.bottom="7vh"),"left"===e?r.left="2vw":"right"===e?r.right="2vw":"center"===e&&(r.left=n?"calc(50vw - "+n/2+"px)":"50vw"),r}(e.justify,e.align,e.measuredWidth))})),b=i.animated(o.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 u.createElement(b,Object.assign({},e,{style:t}))},w=o.div({display:"flex","& div:not(:first-child)":{marginLeft:24}}),P=function(e){var t=e.curPos;return u.createElement(w,null,Array(e.steps).fill(null).map(function(e,n){return u.createElement(E,{key:"dot-"+n,focused:t===n})}))},S=o.div({zIndex:2400,position:"absolute"});exports.useGuide=l,exports.Tourguide=function(e){var r=e.tooltip,o=e.animated;void 0===o&&(o=!0);var a=e.precondition;void 0===a&&(a=!0);var d=e.content,f=e.node,h=e.leftControl,m=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=l(),L=j.anchorEls,q=j.curPos,M=j.show,O=j.close,I=j.setStatus,z=j.prev,Y=j.next,B=s.useCallback(function(e){null!==e&&C(e.getBoundingClientRect().width)},[]),F=L[q],N=s.useCallback(n(function(e){switch(e.key){case"Escape":O();break;case"ArrowLeft":z();break;case"ArrowRight":Y()}},400),[O,Y,z]);s.useEffect(function(){return M&&document.addEventListener("keydown",N),function(){document.removeEventListener("keydown",N)}},[N,M]),s.useEffect(function(){a&&L.length&&I("ready")},[L.length,a,I]);var T=i.useSpring({opacity:M?1:0,onStart:function(){M&&A(!1)},onRest:function(){M||A(!0)}});return t.createPortal(o?u.createElement(u.Fragment,null,h&&u.createElement(v,{align:"center",justify:"left",style:T},h),m&&u.createElement(v,{align:"center",justify:"right",style:T},m),g&&u.createElement(v,{align:"top",justify:"right",style:T},g),u.createElement(v,{align:"bottom",justify:"center",ref:B,measuredWidth:k,style:T},u.createElement(P,{steps:L.length,curPos:q})),u.createElement(c,{style:T,isIdle:x},L.map(function(e){return u.createElement(p,{key:"spotlight-"+e.dataset.tourguidePosition,anchorEl:e,pos:Number(e.dataset.tourguidePosition),animated:!0,show:M,curPos:q,positionStyles:b&&b.spotlight,styles:E&&E.spotlight})})),u.createElement(S,null,L.map(function(e,t){return u.createElement(s.Fragment,{key:"tourguideEl-"+t},r&&u.createElement(y,{show:M,anchorEl:e,pos:Number(e.dataset.tourguidePosition),curPos:q,animated:!0,index:t},Array.isArray(r)?r[t]:s.isValidElement(r)?r:u.createElement(r,null,d&&d[t])))}))):u.createElement(u.Fragment,null,u.createElement(p,{anchorEl:F,show:M,pos:q,curPos:q,positionStyles:b&&b.spotlight,styles:E&&E.spotlight}),r&&u.createElement(y,{anchorEl:F,show:M,pos:q,curPos:q},r)),f)},exports.TourguideProvider=function(e){var t=e.children,n=function(){var e=s.useState([]),t=e[0],n=e[1],r=s.useState(!1),o=r[0],i=r[1],u=s.useState(0),a=u[0],l=u[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]),m=s.useCallback(function(e){return{ref:h,"data-tourguide-position":e}},[h]),p=s.useCallback(function(){i(function(e){return!e})},[]),g=s.useCallback(function(){i(!1),l(0)},[]),y=s.useCallback(function(){l(function(e){return e>=t.length-1?e:e+1})},[t.length]),v=s.useCallback(function(){l(function(e){return 0===e?e:e-1})},[]),b=s.useCallback(function(){i(!1),n([]),l(0),f("idle")},[]);return s.useMemo(function(){return{show:o,next:y,prev:v,anchorEls:t,curPos:a,getAnchorElProps:m,setShow:i,setCurPos:l,toggle:p,handleRef:h,reset:b,close:g,setStatus:f,status:d}},[t,a,m,h,y,v,b,o,p,g,d])}();return u.createElement(a.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 l,{createContext as s,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 v=s(null);function g(){var t=u(v);if(!t)throw new Error("useGuide must be used within TourguideProvider");return t}var E=r(o.div(function(t){var e=t.isIdle;return{position:"fixed",bottom:0,left:0,right:0,top:0,overflow:"hidden",visibility:e?"hidden":"visible",zIndex:e?-1:2300,backgroundColor:"rgba(26, 29, 52, 0.5)",mixBlendMode:"hard-light"}}));function w(t,e){"function"==typeof t?t(e):t&&(t.current=e)}function b(t){var e,o,r=t.anchorEl,i=t.popperOptions,l=t.ref,s=t.show,u=t.animated,h=c(null),m=a(function(){return null==e&&null==o?null:function(t){w(e,t),w(o,t)}},[e=h,o=l]),p=c(null),y=d(function(){r&&i&&h.current&&s&&(p.current=n(r,h.current,i))},[r,i,s]),v=d(function(){null!=p.current&&(p.current.destroy(),p.current=null)},[]);return f(function(){return y(),function(){u||v()}},[y,v,u]),f(function(){return function(){v()}},[v]),{selfRef:m,tooltipRef:h,destroy:v}}function P(t){var e=t.show,n=t.curPos,o=t.pos,r=t.destroy,i=h("idle"),l=i[1];return{handleAnimStart:function(){e&&n===o&&l("active")},handleAnimRest:function(){e?n!==o&&l("standby"):(r(),l("idle"))},animLifecycle:i[0]}}var R=r(function(t){var e=t.dimensions,n=t.style;return void 0===n&&(n={}),l.createElement("div",{style:Object.assign({},n,{borderRadius:4,backgroundColor:"gray",width:e[0],height:e[1]})})}),S=m(function(t,e){var n=t.anchorEl,o=t.show,r=t.curPos,s=t.pos,u=t.animated,c=t.positionStyles,d=t.styles,m=h(null),p=m[0],y=m[1],v=c&&c[s]?c[s]:{},g=v.width,E=v.height,w=v.offsetX,S=v.offsetY,x=d||{},A=x.width,k=x.height,j=x.offsetX,C=x.offsetY,L=a(function(){if(!p)return p;var t=p[0],e=p[1];return[null!=g?"function"==typeof g?g(t):g:null!=A?"function"==typeof A?A(t):A:t,null!=E?"function"==typeof E?E(e):E:null!=k?"function"==typeof k?k(e):k:e]},[p,g,A,E,k]),O=p&&L?{modifiers:[{name:"offset",options:{offset:[0+(w||j||0),-(Math.abs(L[1]-p[1])/2+p[1])-(S||C||0)]}}]}:null,I=b({anchorEl:n,show:o,popperOptions:O,ref:e,animated:u}),z=I.selfRef,Y=P({show:o,curPos:r,pos:s,destroy:I.destroy}),B=Y.handleAnimStart,N=Y.handleAnimRest,F=Y.animLifecycle;f(function(){if(n){var t=n.getBoundingClientRect();y([t.width,t.height])}},[n]);var M=i({opacity:o&&r===s?1:0,onStart:B,onRest:N,config:d&&d.spring});return L&&(o||u&&"idle"!==F)?l.createElement("div",{ref:z,style:{visibility:"standby"===F?"hidden":"visible"}},l.createElement(R,{style:u?M:void 0,dimensions:L})):null}),x={modifiers:[{name:"offset",options:{offset:[0,24]}}]},A=m(function(t,e){var n=t.show,o=t.children,s=t.curPos,u=t.pos,a=t.animated,c=b({anchorEl:t.anchorEl,show:n,popperOptions:x,ref:e,animated:a}),d=c.selfRef,f=P({show:n,curPos:s,pos:u,destroy:c.destroy}),h=f.animLifecycle,m=i({to:{opacity:n&&s===u?1:0,transform:n&&s===u?"scaleY(1)":"scaleY(0)"},onStart:f.handleAnimStart,onRest:f.handleAnimRest});return n||a&&"idle"!==h?l.createElement("div",{ref:d,style:{visibility:"standby"===h?"hidden":"visible"}},o?l.createElement(r.div,{style:a?m:void 0},o):null):null}),k=r(o.div(function(t){return Object.assign({},{position:"absolute",zIndex:2600},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))})),j=r(o.div({width:24,height:24,border:"1.5px solid white",borderRadius:666})),C=function(t){var e=i({backgroundColor:t.focused?"rgba(255, 255, 255, 1)":"rgba(255, 255, 255, 0)"});return l.createElement(j,Object.assign({},t,{style:e}))},L=o.div({display:"flex","& div:not(:first-child)":{marginLeft:24}}),O=function(t){var e=t.curPos;return l.createElement(L,null,Array(t.steps).fill(null).map(function(t,n){return l.createElement(C,{key:"dot-"+n,focused:e===n})}))},I=o.div({zIndex:2400,position:"absolute"}),z=function(n){var o=n.tooltip,r=n.animated;void 0===r&&(r=!0);var s=n.precondition;void 0===s&&(s=!0);var u=n.content,a=n.node,c=n.leftControl,m=n.rightControl,v=n.closeControl,w=n.positionStyles,b=n.styles,P=h(0),R=P[0],x=P[1],j=h(!0),C=j[0],L=j[1],z=g(),Y=z.anchorEls,B=z.curPos,N=z.show,F=z.close,M=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":F();break;case"ArrowLeft":W();break;case"ArrowRight":X()}},400),[F,X,W]);f(function(){return N&&document.addEventListener("keydown",q),function(){document.removeEventListener("keydown",q)}},[q,N]),f(function(){s&&Y.length&&M("ready")},[Y.length,s,M]);var D=i({opacity:N?1:0,onStart:function(){N&&L(!1)},onRest:function(){N||L(!0)}});return t.createPortal(r?l.createElement(l.Fragment,null,c&&l.createElement(k,{align:"center",justify:"left",style:D},c),m&&l.createElement(k,{align:"center",justify:"right",style:D},m),v&&l.createElement(k,{align:"top",justify:"right",style:D},v),l.createElement(k,{align:"bottom",justify:"center",ref:G,measuredWidth:R,style:D},l.createElement(O,{steps:Y.length,curPos:B})),l.createElement(E,{style:D,isIdle:C},Y.map(function(t){return l.createElement(S,{key:"spotlight-"+t.dataset.tourguidePosition,anchorEl:t,pos:Number(t.dataset.tourguidePosition),animated:!0,show:N,curPos:B,positionStyles:w&&w.spotlight,styles:b&&b.spotlight})})),l.createElement(I,null,Y.map(function(t,e){return l.createElement(y,{key:"tourguideEl-"+e},o&&l.createElement(A,{show:N,anchorEl:t,pos:Number(t.dataset.tourguidePosition),curPos:B,animated:!0,index:e},Array.isArray(o)?o[e]:p(o)?o:l.createElement(o,null,u&&u[e])))}))):l.createElement(l.Fragment,null,l.createElement(S,{anchorEl:T,show:N,pos:B,curPos:B,positionStyles:w&&w.spotlight,styles:b&&b.spotlight}),o&&l.createElement(A,{anchorEl:T,show:N,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],l=h(0),s=l[0],u=l[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]),v=d(function(){i(function(t){return!t})},[]),g=d(function(){i(!1),u(0)},[]),E=d(function(){u(function(t){return t>=e.length-1?t:t+1})},[e.length]),w=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:E,prev:w,anchorEls:e,curPos:s,getAnchorElProps:y,setShow:i,setCurPos:u,toggle:v,handleRef:p,reset:b,close:g,setStatus:m,status:f}},[e,s,y,p,E,w,b,r,v,g,f])}();return l.createElement(v.Provider,{value:n},e)};export{g 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 v=l(null);function g(){var t=u(v);if(!t)throw new Error("useGuide must be used within TourguideProvider");return t}var E=r(o.div(function(t){var e=t.isIdle;return{position:"fixed",bottom:0,left:0,right:0,top:0,overflow:"hidden",visibility:e?"hidden":"visible",zIndex:e?-1:2300,backgroundColor:"rgba(26, 29, 52, 0.5)",mixBlendMode:"hard-light"}}));function w(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){w(e,t),w(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]),v=d(function(){null!=p.current&&(p.current.destroy(),p.current=null)},[]);return f(function(){return y(),function(){u||v()}},[y,v,u]),f(function(){return function(){v()}},[v]),{selfRef:m,tooltipRef:h,destroy:v}}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),v=y[0],g=y[1],E=m&&m[c]?m[c]:{},w=E.width,S=E.height,x=E.offsetX,A=E.offsetY,k=p||{},j=k.width,C=k.height,L=k.offsetX,O=k.offsetY,I=a(function(){if(!v)return v;var t=v[0],e=v[1];return[null!=w?"function"==typeof w?w(t):w:null!=j?"function"==typeof j?j(t):j:t,null!=S?"function"==typeof S?S(e):S:null!=C?"function"==typeof C?C(e):C:e]},[v,w,j,S,C]),z=v&&I?{modifiers:[{name:"offset",options:{offset:[0+(x||L||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]))-(A||O||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();g([t.width,t.height])}},[r]);var X=i({opacity:l&&u===c?1:0,onStart:N,onRest:F,config:p&&p.spring});return I&&(l||d&&"idle"!==W)?s.createElement("div",{ref:B,style:{visibility:"standby"===W?"hidden":"visible"}},s.createElement(R,{style:d?X:void 0,dimensions:I})):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=b({anchorEl:t.anchorEl,show:n,popperOptions:x,ref:e,animated:a}),d=c.selfRef,f=P({show:n,curPos:l,pos:u,destroy:c.destroy}),h=f.animLifecycle,m=i({to:{opacity:n&&l===u?1:0,transform:n&&l===u?"scaleY(1)":"scaleY(0)"},onStart:f.handleAnimStart,onRest:f.handleAnimRest});return n||a&&"idle"!==h?s.createElement("div",{ref:d,style:{visibility:"standby"===h?"hidden":"visible"}},o?s.createElement(r.div,{style:a?m:void 0},o):null):null}),k=r(o.div(function(t){return Object.assign({},{position:"absolute",zIndex:2600},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))})),j=r(o.div({width:24,height:24,border:"1.5px solid white",borderRadius:666})),C=function(t){var e=i({backgroundColor:t.focused?"rgba(255, 255, 255, 1)":"rgba(255, 255, 255, 0)"});return s.createElement(j,Object.assign({},t,{style:e}))},L=o.div({display:"flex","& div:not(:first-child)":{marginLeft:24}}),O=function(t){var e=t.curPos;return s.createElement(L,null,Array(t.steps).fill(null).map(function(t,n){return s.createElement(C,{key:"dot-"+n,focused:e===n})}))},I=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,v=n.closeControl,w=n.positionStyles,b=n.styles,P=h(0),R=P[0],x=P[1],j=h(!0),C=j[0],L=j[1],z=g(),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&&L(!1)},onRest:function(){M||L(!0)}});return t.createPortal(r?s.createElement(s.Fragment,null,c&&s.createElement(k,{align:"center",justify:"left",style:D},c),m&&s.createElement(k,{align:"center",justify:"right",style:D},m),v&&s.createElement(k,{align:"top",justify:"right",style:D},v),s.createElement(k,{align:"bottom",justify:"center",ref:G,measuredWidth:R,style:D},s.createElement(O,{steps:Y.length,curPos:B})),s.createElement(E,{style:D,isIdle:C},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:w&&w.spotlight,styles:b&&b.spotlight})})),s.createElement(I,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},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:w&&w.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]),v=d(function(){i(function(t){return!t})},[]),g=d(function(){i(!1),u(0)},[]),E=d(function(){u(function(t){return t>=e.length-1?t:t+1})},[e.length]),w=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:E,prev:w,anchorEls:e,curPos:l,getAnchorElProps:y,setShow:i,setCurPos:u,toggle:v,handleRef:p,reset:b,close:g,setStatus:m,status:f}},[e,l,y,p,E,w,b,r,v,g,f])}();return s.createElement(v.Provider,{value:n},e)};export{g as useGuide,z as Tourguide,Y as TourguideProvider}; | ||
| //# sourceMappingURL=index.module.js.map |
| { | ||
| "name": "react-interactive-guide", | ||
| "version": "2.2.1", | ||
| "version": "2.2.2", | ||
| "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 by1.11%
105289
No dependency changes