diff --git a/demo/App.tsx b/demo/App.tsx index 90af798..3119b84 100644 --- a/demo/App.tsx +++ b/demo/App.tsx @@ -1,6 +1,6 @@ import React, { useRef, useState, useReducer } from 'react'; -import { Popover, Tooltip } from '../src'; -// import Popover from '../dist/index.esm'; +// import { Popover, Tooltip } from '../src'; +import { Popover, Tooltip } from '../dist/index.esm'; import DemoBlock from './DemoBlock'; const placements = [ diff --git a/dist/index.esm.js b/dist/index.esm.js index c17e37d..a513a16 100644 --- a/dist/index.esm.js +++ b/dist/index.esm.js @@ -1 +1 @@ -import t,{useRef as e,useEffect as n,useLayoutEffect as r,useState as o,useImperativeHandle as i,useCallback as c,useMemo as l}from"react";import u from"react-dom";function a(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function f(t){for(var e=1;arguments.length>e;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?a(Object(n),!0).forEach((function(e){d(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function s(t){var e=function(t,e){if("object"!=typeof t||!t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var r=n.call(t,e||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==typeof e?e:e+""}function p(t){return p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},p(t)}function d(t,e,n){return(e=s(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function m(){return m=Object.assign?Object.assign.bind():function(t){for(var e=1;arguments.length>e;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},m.apply(this,arguments)}function v(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},i=Object.keys(t);for(r=0;i.length>r;r++)0>e.indexOf(n=i[r])&&(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(r=0;i.length>r;r++)0>e.indexOf(n=i[r])&&Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}function y(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=n){var r,o,i,c,l=[],u=!0,a=!1;try{if(i=(n=n.call(t)).next,0===e){if(Object(n)!==n)return;u=!1}else for(;!(u=(r=i.call(n)).done)&&(l.push(r.value),l.length!==e);u=!0);}catch(t){a=!0,o=t}finally{try{if(!u&&null!=n.return&&(c=n.return(),Object(c)!==c))return}finally{if(a)throw o}}return l}}(t,e)||function(t,e){if(!t)return;if("string"==typeof t)return g(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return g(t,e)}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function g(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=Array(e);e>n;n++)r[n]=t[n];return r}var b=t.createElement("svg",m({viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},{width:"1em",height:"1em",fill:"currentColor"}),t.createElement("path",{d:"M240.512 180.181333l271.530667 271.488 271.530666-271.488a42.666667 42.666667 0 0 1 56.32-3.541333l4.010667 3.541333a42.666667 42.666667 0 0 1 0 60.330667l-271.530667 271.530667 271.530667 271.530666a42.666667 42.666667 0 0 1-56.32 63.872l-4.010667-3.541333-271.530666-271.530667-271.530667 271.530667-4.010667 3.541333a42.666667 42.666667 0 0 1-56.32-63.872l271.488-271.530666-271.488-271.530667a42.666667 42.666667 0 0 1 60.330667-60.330667z","p-id":"2884"})),h=function(e){return t.createElement("div",e,b)};function w(t){var n=e(t);return n.current=t,n}h.displayName="Close";var O=function(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],o=e(!1);n((function(){if(o.current)return t();o.current=!0}),r)},x=function(t){var e,n=t.current;return n instanceof HTMLElement?e=n:n.current?e=n.current:"function"==typeof n&&(e=n()),e},E=function(t,e,n){if("object"===p(e)&&e)for(var r=0,o=Object.keys(e);o.length>r;r++){var i=o[r];t.style[i]=e[i]}else"string"==typeof e&&(t.classList.add(e),"string"==typeof n&&n&&t.classList.contains(n)&&t.classList.remove(n))},j=!("undefined"==typeof window||!window),C=!1;try{window&&window.addEventListener("test",null,Object.defineProperty({},"passive",{get:function(){C={passive:!0}}}))}catch(t){}var k=j?r:n,S=k;function T(t,r,i,c){var l=arguments.length>4&&void 0!==arguments[4]?arguments[4]:220,u=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,a=o(r),f=y(a,2),s=f[0],p=f[1],d=w(t),m=e(0),v=w(i),g=w(c);return S((function(){var t=x(d);r&&t instanceof Element&&(E(t,v.current,g.current),p(!0),m.current=window.setTimeout((function(){E(t,g.current,v.current)}),u))}),[r,s,v,g,d,u]),O((function(){if(!r&&s){var t=x(d);m.current=window.setTimeout((function(){E(t,v.current,g.current),m.current=window.setTimeout((function(){p(!1)}),l)}),u)}}),[r]),n((function(){return function(){m.current&&clearTimeout(m.current)}}),[]),s||r}var P=["children","visible","style","duration","hideOverflow"],N=t.forwardRef((function(r,o){var c=r.children,l=r.visible,u=r.style,a=r.duration,s=void 0===a?220:a,p=r.hideOverflow,d=void 0===p||p,y=v(r,P),g=e(null),b=e("");i(o,(function(){return g.current}));var h=T((function(){return g.current}),l,{opacity:0},{opacity:.5},s);return n((function(){return b.current=document.body.style.overflow,document.body.style.overflow=l&&d?"hidden":b.current,function(){document.body.style.overflow=b.current}}),[l,d]),h?t.createElement("div",m({ref:g},y,{style:f(f({},u),{},{opacity:0,background:"rgba(0, 0, 0)",zIndex:1e3,position:"fixed",left:0,top:0,bottom:0,right:0,width:"100%",touchAction:"none",display:h?"":"none",transition:"opacity ".concat(s,"ms ease-in-out")})}),c):null}));N.displayName="W-Mask";var L={bottom:"top",top:"bottom",left:"right",right:"left"},D=function(t){return L[t]};function _(t,e,r,o){var i=w(r),c=w(e),l=w(t),u=w(o);n((function(){var t=function(t,e){return t?"function"==typeof t?t():t&&"current"in t?t.current:t:e}(l.current,window);if(null==t?void 0:t.addEventListener){var e=function(t){var e;return null===(e=i.current)||void 0===e?void 0:e.call(i,t)},n=c.current,r=u.current;return t.addEventListener(n,e,r),function(){t.removeEventListener(n,e,r)}}}),[])}var M=function(t){if(""+t!="[object Window]"){var e=t.ownerDocument;return e&&e.defaultView||window}return t},I=function(t){return function(t){return(F(t)?t.ownerDocument:t.document)||window.document}(t).documentElement},A=function(t){return M(t).getComputedStyle(t)},z=function(t){return t?(t.nodeName||"").toLowerCase():""},B=function(t){return t&&"html"!==z(t)?t.assignedSlot||t.parentNode||I(t):t},F=function(t){return t instanceof M(t).Element||t instanceof Element},R=function(t){return t instanceof M(t).HTMLElement||t instanceof HTMLElement},H=function(t){return["table","td","th"].indexOf(z(t))>=0},V=function(t){return R(t)&&"fixed"!==A(t).position?t.offsetParent:null},W=function(t,e){var n=M(t);null==e||e(t);for(var r=V(t);r&&H(r)&&"static"===A(r).position;)null==e||e(r),r=V(r);return r||function(t,e){null==e||e(t);for(var n=B(t);R(n)&&0>["html","body"].indexOf(z(n));){null==e||e(n);var r=A(n);if("none"!==r.transform||"none"!==r.perspective||r.willChange&&"auto"!==r.willChange)return n;n=B(n)}return n}(t,e)||n},Y=function(t){var e=0;return W(t,(function(t){e+=t.offsetTop})),e},U=/scroll|auto|overlay/i;function $(t){return"HTML"!==t.tagName&&"BODY"!==t.tagName&&1===t.nodeType}function q(t){for(var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:window,n=t;n&&n!==e&&$(n);){var r=window.getComputedStyle(n),o=r.overflowY;if(U.test(o))return n;n=n.parentNode}return e}var G=["placement","content","arrow","visible","closable","onVisibleChange","onClose","className","style","children","mask","maskStyle","maskClass","closeOnClickOutside","closeOnMaskClick","transition","transitionDuration","transitionTimingFunction","offset"],J=k,K={opacity:0,transform:"scale(0)"},Q={opacity:1,transform:"scale(1)"},X=function(n){var r=n.placement,i=void 0===r?"bottom":r,a=n.content,s=n.arrow,p=void 0===s||s,g=n.visible,b=n.closable,x=n.onVisibleChange,k=n.onClose,S=n.className,P=n.style,L=n.children,M=n.mask,I=n.maskStyle,B=n.maskClass,F=n.closeOnClickOutside,R=void 0===F||F,H=n.closeOnMaskClick,V=void 0===H||H,W=n.transition,U=void 0===W||W,$=n.transitionDuration,X=void 0===$?220:$,Z=n.transitionTimingFunction,tt=void 0===Z?"ease-in-out":Z,et=n.offset,nt=void 0===et?{}:et,rt=v(n,G),ot=e(),it=e(null),ct=w(nt),lt=w(k),ut=y(o({}),2),at=ut[0],ft=ut[1],st=e(!1),pt=t.useCallback((function(t,e){var n=it.current;E(n,{transitionProperty:"none",transform:"none"});var r=function(t,e,n,r){var o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"bottom",i=arguments.length>5?arguments[5]:void 0,c=t.getBoundingClientRect(),l=e.getBoundingClientRect(),u=n.getBoundingClientRect(),a="body"===z(n),f=A(e).position,s="fixed"===f,p=r instanceof Element?r.scrollTop:r.pageYOffset,d="fixed"===f||r instanceof Element,m=d?l.top:a?l.top+p:Y(e),v=l.height+m,y=l.left-(d?0:u.left),g=l.width,b=l.height,h={x:i.x||0,y:i.y||0},w={top:{top:m-c.height-12,left:y+g/2-c.width/2},bottom:{top:v+12,left:y+g/2-c.width/2},left:{top:m+b/2-c.height/2,left:y-c.width-12},right:{top:m+b/2-c.height/2,left:y+g+12},"top-right":{top:m-c.height-12,left:y+g-c.width},"top-left":{top:m-c.height-12,left:y},"bottom-right":{top:v+12,left:y+g-c.width},"bottom-left":{top:v+12,left:y},"right-top":{top:m,left:y+g+12},"left-top":{top:m,left:y-c.width-12},"right-bottom":{top:v-c.height,left:y+g+12},"left-bottom":{top:v-c.height,left:y-c.width-12}}[o];return{position:s?"fixed":"absolute",top:w.top+h.y,left:w.left+h.x}}(n,t,document.body,e,i,ct.current),o=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"bottom",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:12,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:6,o=t.getBoundingClientRect(),i=y(e.split("-"),2),c=i[0],l=i[1],u=d({boxShadow:{top:"1px 1px 1px 0px rgba(0, 0, 0, 0.05)",right:"-1px 1px 1px 0px rgba(0, 0, 0, 0.05)",bottom:"-1px -1px 1px 0px rgba(0, 0, 0, 0.05)",left:"1px -1px 1px 0px rgba(0, 0, 0, 0.05)"}[c]},D(c),-r/2);if(l)return f(d({},l,2*n),u);var a={};return["bottom","top"].includes(c)&&(a.right=(o.width-r)/2),["left","right"].includes(c)&&(a.top=(o.height-r)/2),f(f({},a),u)}(n,i,12);E(n,{top:r.top+"px",left:r.left+"px",position:r.position}),U&&!st.current&&(st.current=!0,E(n,K),n.__prevent__minify__removed__=n.scrollTop,E(n,{transitionProperty:"transform, opacity"})),ft(o)}),[U,i,ct]),dt=function(){var t=ot.current,e=q(t);pt(t,e)},mt=c((function(t){var e,n=it.current,r=ot.current;!n||n.contains(t.target)||r.contains(t.target)||(null===(e=lt.current)||void 0===e||e.call(lt))}),[lt]);_((function(){return window}),"resize",g?dt:void 0,C),_((function(){return q(ot.current)}),"scroll",g?dt:void 0,C),_((function(){return document}),"click",R?mt:void 0),J((function(){var t=ot.current,e=q(t);g&&pt(t,e)}),[pt,g]);var vt=l((function(){return function(t){var e=t.split("-"),n="";return e[0]&&(n+=D(e[0])),e[1]&&(n+=" "+e[1]),n}(i)}),[i]),yt=T((function(){return U?it.current:null}),g,K,Q,X);return O((function(){null==x||x(g),g||(st.current=!1)}),[g]),t.createElement(t.Fragment,null,t.createElement(N,{visible:M&&g,className:B,style:I,duration:X,onClick:function(){V&&(null==k||k())}}),t.cloneElement(L,{ref:ot}),j&&u.createPortal(t.createElement(t.Fragment,null,(U&&yt||!U&&g)&&t.createElement("div",m({},rt,{ref:it,className:"w-popover ".concat(S||""),style:f({position:"absolute",background:"#fff",zIndex:1e3,transformOrigin:vt,transitionTimingFunction:tt,transitionDuration:"".concat(X,"ms"),willChange:U?"transform, opacity":"unset"},P)}),p&&t.createElement("div",{className:"w-popover__arrow",style:f({position:"absolute",width:6,height:6,zIndex:-1,background:"inherit",transform:"rotate(45deg)"},at)}),b&&t.createElement(h,{className:"w-popover__close",onClick:k,style:{position:"absolute",zIndex:10,top:6,right:6,cursor:"pointer",color:"rgb(0,0,0)",opacity:.35,display:"flex",alignItems:"center",justifyContent:"center"}}),a)),document.body))};X.displayName="W-Popover";var Z=["hoverDelay","placement","arrow","offset","className","style","children"],tt=function(n){var r=n.hoverDelay,i=void 0===r?100:r,c=n.placement,l=void 0===c?"top":c,u=n.arrow,a=void 0===u||u,s=n.offset,p=n.className,d=n.style,g=n.children,b=v(n,Z),h=e(0),w=y(o(!1),2),O=w[0],x=w[1],E={onMouseEnter:function(){h.current&&clearTimeout(h.current),x(!0)},onMouseLeave:function(){h.current=window.setTimeout((function(){x(!1)}),i)},onFocus:function(){h.current&&clearTimeout(h.current),x(!0)}};return t.createElement(X,m({},b,{className:"w-tooltip ".concat(p),style:f({background:"#333",color:"#fff",padding:"6px 12px"},d),visible:O,arrow:a,placement:l,offset:s},E),t.isValidElement(g)?t.cloneElement(g,f({},E)):t.createElement("span",E,g))};tt.displayName="W-Tooltip";export default X;export{X as Popover,tt as Tooltip}; +import t,{useRef as e,useEffect as n,useLayoutEffect as r,useState as o,useImperativeHandle as i,useCallback as c,useMemo as l}from"react";import u from"react-dom";function a(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function f(t){for(var e=1;e=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}function y(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=n){var r,o,i,c,l=[],u=!0,a=!1;try{if(i=(n=n.call(t)).next,0===e){if(Object(n)!==n)return;u=!1}else for(;!(u=(r=i.call(n)).done)&&(l.push(r.value),l.length!==e);u=!0);}catch(t){a=!0,o=t}finally{try{if(!u&&null!=n.return&&(c=n.return(),Object(c)!==c))return}finally{if(a)throw o}}return l}}(t,e)||function(t,e){if(!t)return;if("string"==typeof t)return g(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return g(t,e)}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function g(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n1&&void 0!==arguments[1]?arguments[1]:[],o=e(!1);n((function(){if(o.current)return t();o.current=!0}),r)},x=function(t){var e,n=t.current;return n instanceof HTMLElement?e=n:n.current?e=n.current:"function"==typeof n&&(e=n()),e},E=function(t,e,n){if("object"===p(e)&&e)for(var r=0,o=Object.keys(e);r4&&void 0!==arguments[4]?arguments[4]:220,u=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,a=o(r),f=y(a,2),s=f[0],p=f[1],d=w(t),m=e(0),v=w(i),g=w(c);return S((function(){var t=x(d);r&&t instanceof Element&&(E(t,v.current,g.current),p(!0),m.current=window.setTimeout((function(){E(t,g.current,v.current)}),u))}),[r,s,v,g,d,u]),O((function(){if(!r&&s){var t=x(d);m.current=window.setTimeout((function(){E(t,v.current,g.current),m.current=window.setTimeout((function(){p(!1)}),l)}),u)}}),[r]),n((function(){return function(){m.current&&clearTimeout(m.current)}}),[]),s||r}var P=["children","visible","style","duration","hideOverflow"],N=t.forwardRef((function(r,o){var c=r.children,l=r.visible,u=r.style,a=r.duration,s=void 0===a?220:a,p=r.hideOverflow,d=void 0===p||p,y=v(r,P),g=e(null),b=e("");i(o,(function(){return g.current}));var h=T((function(){return g.current}),l,{opacity:0},{opacity:.5},s);return n((function(){return b.current=document.body.style.overflow,document.body.style.overflow=l&&d?"hidden":b.current,function(){document.body.style.overflow=b.current}}),[l,d]),h?t.createElement("div",m({ref:g},y,{style:f(f({},u),{},{opacity:0,background:"rgba(0, 0, 0)",zIndex:1e3,position:"fixed",left:0,top:0,bottom:0,right:0,width:"100%",touchAction:"none",display:h?"":"none",transition:"opacity ".concat(s,"ms ease-in-out")})}),c):null}));N.displayName="W-Mask";var L={bottom:"top",top:"bottom",left:"right",right:"left"},D=function(t){return L[t]};function M(t,e,r,o){var i=w(r),c=w(e),l=w(t),u=w(o);n((function(){var t=function(t,e){return t?"function"==typeof t?t():t&&"current"in t?t.current:t:e}(l.current,window);if(null==t?void 0:t.addEventListener){var e=function(t){var e;return null===(e=i.current)||void 0===e?void 0:e.call(i,t)},n=c.current,r=u.current;return t.addEventListener(n,e,r),function(){t.removeEventListener(n,e,r)}}}),[])}var I=function(t){if("[object Window]"!==t.toString()){var e=t.ownerDocument;return e&&e.defaultView||window}return t},A=function(t){return function(t){return(R(t)?t.ownerDocument:t.document)||window.document}(t).documentElement},z=function(t){return I(t).getComputedStyle(t)},B=function(t){return t?(t.nodeName||"").toLowerCase():""},F=function(t){return t&&"html"!==B(t)?t.assignedSlot||t.parentNode||A(t):t},R=function(t){return t instanceof I(t).Element||t instanceof Element},H=function(t){return t instanceof I(t).HTMLElement||t instanceof HTMLElement},V=function(t){return["table","td","th"].indexOf(B(t))>=0},W=function(t){return H(t)&&"fixed"!==z(t).position?t.offsetParent:null},_=function(t,e){var n=I(t);null==e||e(t);for(var r=W(t);r&&V(r)&&"static"===z(r).position;)null==e||e(r),r=W(r);return r||function(t,e){null==e||e(t);for(var n=F(t);H(n)&&["html","body"].indexOf(B(n))<0;){null==e||e(n);var r=z(n);if("none"!==r.transform||"none"!==r.perspective||r.willChange&&"auto"!==r.willChange)return n;n=F(n)}return n}(t,e)||n},Y=function(t){var e=0;return _(t,(function(t){e+=t.offsetTop})),e},U=/scroll|auto|overlay/i;function $(t){return"HTML"!==t.tagName&&"BODY"!==t.tagName&&1===t.nodeType}function q(t){for(var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:window,n=t;n&&n!==e&&$(n);){var r=window.getComputedStyle(n),o=r.overflowY;if(U.test(o))return n;n=n.parentNode}return e}var G=["placement","content","arrow","visible","closable","onVisibleChange","onClose","className","style","children","mask","maskStyle","maskClass","closeOnClickOutside","closeOnMaskClick","transition","transitionDuration","transitionTimingFunction","offset"],J=k,K={opacity:0,transform:"scale(0)"},Q={opacity:1,transform:"scale(1)"},X=function(n){var r=n.placement,i=void 0===r?"bottom":r,a=n.content,s=n.arrow,p=void 0===s||s,g=n.visible,b=n.closable,x=n.onVisibleChange,k=n.onClose,S=n.className,P=n.style,L=n.children,I=n.mask,A=n.maskStyle,F=n.maskClass,R=n.closeOnClickOutside,H=void 0===R||R,V=n.closeOnMaskClick,W=void 0===V||V,_=n.transition,U=void 0===_||_,$=n.transitionDuration,X=void 0===$?220:$,Z=n.transitionTimingFunction,tt=void 0===Z?"ease-in-out":Z,et=n.offset,nt=void 0===et?{}:et,rt=v(n,G),ot=e(),it=e(null),ct=w(nt),lt=w(k),ut=y(o({}),2),at=ut[0],ft=ut[1],st=e(!1),pt=t.useCallback((function(t,e){var n=it.current;E(n,{transitionProperty:"none",transform:"none"});var r=function(t,e,n,r){var o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"bottom",i=arguments.length>5?arguments[5]:void 0,c=t.getBoundingClientRect(),l=e.getBoundingClientRect(),u=n.getBoundingClientRect(),a="body"===B(n),f=z(e).position,s="fixed"===f,p=r instanceof Element?r.scrollTop:r.pageYOffset,d="fixed"===f||r instanceof Element,m=d?l.top:a?l.top+p:Y(e),v=m,y=l.height+m,g=l.left-(d?0:u.left),b=l.width,h=l.height,w={top:{top:v-c.height-12,left:g+b/2-c.width/2},bottom:{top:y+12,left:g+b/2-c.width/2},left:{top:v+h/2-c.height/2,left:g-c.width-12},right:{top:v+h/2-c.height/2,left:g+b+12},"top-right":{top:v-c.height-12,left:g+b-c.width},"top-left":{top:v-c.height-12,left:g},"bottom-right":{top:y+12,left:g+b-c.width},"bottom-left":{top:y+12,left:g},"right-top":{top:v,left:g+b+12},"left-top":{top:v,left:g-c.width-12},"right-bottom":{top:y-c.height,left:g+b+12},"left-bottom":{top:y-c.height,left:g-c.width-12}},O={x:i.x||0,y:i.y||0},x=w[o];return{position:s?"fixed":"absolute",top:x.top+O.y,left:x.left+O.x}}(n,t,document.body,e,i,ct.current),o=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"bottom",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:12,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:6,o=t.getBoundingClientRect(),i=y(e.split("-"),2),c=i[0],l=i[1],u=d({boxShadow:{top:"1px 1px 1px 0px rgba(0, 0, 0, 0.05)",right:"-1px 1px 1px 0px rgba(0, 0, 0, 0.05)",bottom:"-1px -1px 1px 0px rgba(0, 0, 0, 0.05)",left:"1px -1px 1px 0px rgba(0, 0, 0, 0.05)"}[c]},D(c),-r/2);if(l)return f(d({},l,2*n),u);var a={};return["bottom","top"].includes(c)&&(a.right=(o.width-r)/2),["left","right"].includes(c)&&(a.top=(o.height-r)/2),f(f({},a),u)}(n,i,12);E(n,{top:r.top+"px",left:r.left+"px",position:r.position}),U&&!st.current&&(st.current=!0,E(n,K),n.scrollTop,E(n,{transitionProperty:"transform, opacity"})),ft(o)}),[U,i,ct]),dt=function(){var t=ot.current,e=q(t);pt(t,e)},mt=c((function(t){var e,n=it.current,r=ot.current;!n||n.contains(t.target)||r.contains(t.target)||(null===(e=lt.current)||void 0===e||e.call(lt))}),[lt]);M((function(){return window}),"resize",g?dt:void 0,C),M((function(){return q(ot.current)}),"scroll",g?dt:void 0,C),M((function(){return document}),"click",H?mt:void 0),J((function(){var t=ot.current,e=q(t);g&&pt(t,e)}),[pt,g]);var vt=l((function(){return function(t){var e=t.split("-"),n="";return e[0]&&(n+=D(e[0])),e[1]&&(n+=" "+e[1]),n}(i)}),[i]),yt=T((function(){return U?it.current:null}),g,K,Q,X);return O((function(){null==x||x(g),g||(st.current=!1)}),[g]),t.createElement(t.Fragment,null,t.createElement(N,{visible:I&&g,className:F,style:A,duration:X,onClick:function(){W&&(null==k||k())}}),t.cloneElement(L,{ref:ot}),j&&u.createPortal(t.createElement(t.Fragment,null,(U&&yt||!U&&g)&&t.createElement("div",m({},rt,{ref:it,className:"w-popover ".concat(S||""),style:f({position:"absolute",background:"#fff",zIndex:1e3,transformOrigin:vt,transitionTimingFunction:tt,transitionDuration:"".concat(X,"ms"),willChange:U?"transform, opacity":"unset"},P)}),p&&t.createElement("div",{className:"w-popover__arrow",style:f({position:"absolute",width:6,height:6,zIndex:-1,background:"inherit",transform:"rotate(45deg)"},at)}),b&&t.createElement(h,{className:"w-popover__close",onClick:k,style:{position:"absolute",zIndex:10,top:6,right:6,cursor:"pointer",color:"rgb(0,0,0)",opacity:.35,display:"flex",alignItems:"center",justifyContent:"center"}}),a)),document.body))};X.displayName="W-Popover";var Z=["hoverDelay","placement","arrow","offset","className","style","children"],tt=function(n){var r=n.hoverDelay,i=void 0===r?100:r,c=n.placement,l=void 0===c?"top":c,u=n.arrow,a=void 0===u||u,s=n.offset,p=n.className,d=n.style,g=n.children,b=v(n,Z),h=e(0),w=y(o(!1),2),O=w[0],x=w[1],E={onMouseEnter:function(){h.current&&clearTimeout(h.current),x(!0)},onMouseLeave:function(){h.current=window.setTimeout((function(){x(!1)}),i)},onFocus:function(){h.current&&clearTimeout(h.current),x(!0)}};return t.createElement(X,m({},b,{className:"w-tooltip ".concat(p),style:f({background:"#333",color:"#fff",padding:"6px 12px"},d),visible:O,arrow:a,placement:l,offset:s},E),t.isValidElement(g)?t.cloneElement(g,f({},E)):t.createElement("span",E,g))};tt.displayName="W-Tooltip";export default X;export{X as Popover,tt as Tooltip}; diff --git a/dist/index.js b/dist/index.js index 0b9841b..a0bd3ad 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1 +1 @@ -"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),e=require("react-dom");function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var r=n(t),o=n(e);function i(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function u(t){for(var e=1;arguments.length>e;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?i(Object(n),!0).forEach((function(e){c(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function l(t){var e=function(t,e){if("object"!=typeof t||!t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var r=n.call(t,e||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==typeof e?e:e+""}function a(t){return a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},a(t)}function c(t,e,n){return(e=l(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function f(){return f=Object.assign?Object.assign.bind():function(t){for(var e=1;arguments.length>e;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},f.apply(this,arguments)}function s(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},i=Object.keys(t);for(r=0;i.length>r;r++)0>e.indexOf(n=i[r])&&(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(r=0;i.length>r;r++)0>e.indexOf(n=i[r])&&Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}function d(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=n){var r,o,i,u,l=[],a=!0,c=!1;try{if(i=(n=n.call(t)).next,0===e){if(Object(n)!==n)return;a=!1}else for(;!(a=(r=i.call(n)).done)&&(l.push(r.value),l.length!==e);a=!0);}catch(t){c=!0,o=t}finally{try{if(!a&&null!=n.return&&(u=n.return(),Object(u)!==u))return}finally{if(c)throw o}}return l}}(t,e)||function(t,e){if(!t)return;if("string"==typeof t)return p(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return p(t,e)}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function p(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=Array(e);e>n;n++)r[n]=t[n];return r}var m=r.default.createElement("svg",f({viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},{width:"1em",height:"1em",fill:"currentColor"}),r.default.createElement("path",{d:"M240.512 180.181333l271.530667 271.488 271.530666-271.488a42.666667 42.666667 0 0 1 56.32-3.541333l4.010667 3.541333a42.666667 42.666667 0 0 1 0 60.330667l-271.530667 271.530667 271.530667 271.530666a42.666667 42.666667 0 0 1-56.32 63.872l-4.010667-3.541333-271.530666-271.530667-271.530667 271.530667-4.010667 3.541333a42.666667 42.666667 0 0 1-56.32-63.872l271.488-271.530666-271.488-271.530667a42.666667 42.666667 0 0 1 60.330667-60.330667z","p-id":"2884"})),v=function(t){return r.default.createElement("div",t,m)};function y(e){var n=t.useRef(e);return n.current=e,n}v.displayName="Close";var b=function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],r=t.useRef(!1);t.useEffect((function(){if(r.current)return e();r.current=!0}),n)},g=function(t){var e,n=t.current;return n instanceof HTMLElement?e=n:n.current?e=n.current:"function"==typeof n&&(e=n()),e},h=function(t,e,n){if("object"===a(e)&&e)for(var r=0,o=Object.keys(e);o.length>r;r++){var i=o[r];t.style[i]=e[i]}else"string"==typeof e&&(t.classList.add(e),"string"==typeof n&&n&&t.classList.contains(n)&&t.classList.remove(n))},w=!("undefined"==typeof window||!window),O=!1;try{window&&window.addEventListener("test",null,Object.defineProperty({},"passive",{get:function(){O={passive:!0}}}))}catch(t){}var x=w?t.useLayoutEffect:t.useEffect,E=x;function j(e,n,r,o){var i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:220,u=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,l=t.useState(n),a=d(l,2),c=a[0],f=a[1],s=y(e),p=t.useRef(0),m=y(r),v=y(o);return E((function(){var t=g(s);n&&t instanceof Element&&(h(t,m.current,v.current),f(!0),p.current=window.setTimeout((function(){h(t,v.current,m.current)}),u))}),[n,c,m,v,s,u]),b((function(){if(!n&&c){var t=g(s);p.current=window.setTimeout((function(){h(t,m.current,v.current),p.current=window.setTimeout((function(){f(!1)}),i)}),u)}}),[n]),t.useEffect((function(){return function(){p.current&&clearTimeout(p.current)}}),[]),c||n}var C=["children","visible","style","duration","hideOverflow"],k=r.default.forwardRef((function(e,n){var o=e.children,i=e.visible,l=e.style,a=e.duration,c=void 0===a?220:a,d=e.hideOverflow,p=void 0===d||d,m=s(e,C),v=t.useRef(null),y=t.useRef("");t.useImperativeHandle(n,(function(){return v.current}));var b=j((function(){return v.current}),i,{opacity:0},{opacity:.5},c);return t.useEffect((function(){return y.current=document.body.style.overflow,document.body.style.overflow=i&&p?"hidden":y.current,function(){document.body.style.overflow=y.current}}),[i,p]),b?r.default.createElement("div",f({ref:v},m,{style:u(u({},l),{},{opacity:0,background:"rgba(0, 0, 0)",zIndex:1e3,position:"fixed",left:0,top:0,bottom:0,right:0,width:"100%",touchAction:"none",display:b?"":"none",transition:"opacity ".concat(c,"ms ease-in-out")})}),o):null}));k.displayName="W-Mask";var S={bottom:"top",top:"bottom",left:"right",right:"left"},P=function(t){return S[t]};function T(e,n,r,o){var i=y(r),u=y(n),l=y(e),a=y(o);t.useEffect((function(){var t=function(t,e){return t?"function"==typeof t?t():t&&"current"in t?t.current:t:e}(l.current,window);if(null==t?void 0:t.addEventListener){var e=function(t){var e;return null===(e=i.current)||void 0===e?void 0:e.call(i,t)},n=u.current,r=a.current;return t.addEventListener(n,e,r),function(){t.removeEventListener(n,e,r)}}}),[])}var N=function(t){if(""+t!="[object Window]"){var e=t.ownerDocument;return e&&e.defaultView||window}return t},L=function(t){return function(t){return(D(t)?t.ownerDocument:t.document)||window.document}(t).documentElement},R=function(t){return N(t).getComputedStyle(t)},_=function(t){return t?(t.nodeName||"").toLowerCase():""},M=function(t){return t&&"html"!==_(t)?t.assignedSlot||t.parentNode||L(t):t},D=function(t){return t instanceof N(t).Element||t instanceof Element},I=function(t){return t instanceof N(t).HTMLElement||t instanceof HTMLElement},A=function(t){return["table","td","th"].indexOf(_(t))>=0},z=function(t){return I(t)&&"fixed"!==R(t).position?t.offsetParent:null},B=function(t,e){var n=N(t);null==e||e(t);for(var r=z(t);r&&A(r)&&"static"===R(r).position;)null==e||e(r),r=z(r);return r||function(t,e){null==e||e(t);for(var n=M(t);I(n)&&0>["html","body"].indexOf(_(n));){null==e||e(n);var r=R(n);if("none"!==r.transform||"none"!==r.perspective||r.willChange&&"auto"!==r.willChange)return n;n=M(n)}return n}(t,e)||n},F=function(t){var e=0;return B(t,(function(t){e+=t.offsetTop})),e},H=/scroll|auto|overlay/i;function V(t){return"HTML"!==t.tagName&&"BODY"!==t.tagName&&1===t.nodeType}function W(t){for(var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:window,n=t;n&&n!==e&&V(n);){var r=window.getComputedStyle(n),o=r.overflowY;if(H.test(o))return n;n=n.parentNode}return e}var Y=["placement","content","arrow","visible","closable","onVisibleChange","onClose","className","style","children","mask","maskStyle","maskClass","closeOnClickOutside","closeOnMaskClick","transition","transitionDuration","transitionTimingFunction","offset"],q=x,U={opacity:0,transform:"scale(0)"},$={opacity:1,transform:"scale(1)"},G=function(e){var n=e.placement,i=void 0===n?"bottom":n,l=e.content,a=e.arrow,p=void 0===a||a,m=e.visible,g=e.closable,x=e.onVisibleChange,E=e.onClose,C=e.className,S=e.style,N=e.children,L=e.mask,M=e.maskStyle,D=e.maskClass,I=e.closeOnClickOutside,A=void 0===I||I,z=e.closeOnMaskClick,B=void 0===z||z,H=e.transition,V=void 0===H||H,G=e.transitionDuration,J=void 0===G?220:G,K=e.transitionTimingFunction,Q=void 0===K?"ease-in-out":K,X=e.offset,Z=void 0===X?{}:X,tt=s(e,Y),et=t.useRef(),nt=t.useRef(null),rt=y(Z),ot=y(E),it=d(t.useState({}),2),ut=it[0],lt=it[1],at=t.useRef(!1),ct=r.default.useCallback((function(t,e){var n=nt.current;h(n,{transitionProperty:"none",transform:"none"});var r=function(t,e,n,r){var o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"bottom",i=arguments.length>5?arguments[5]:void 0,u=t.getBoundingClientRect(),l=e.getBoundingClientRect(),a=n.getBoundingClientRect(),c="body"===_(n),f=R(e).position,s="fixed"===f,d=r instanceof Element?r.scrollTop:r.pageYOffset,p="fixed"===f||r instanceof Element,m=p?l.top:c?l.top+d:F(e),v=l.height+m,y=l.left-(p?0:a.left),b=l.width,g=l.height,h={x:i.x||0,y:i.y||0},w={top:{top:m-u.height-12,left:y+b/2-u.width/2},bottom:{top:v+12,left:y+b/2-u.width/2},left:{top:m+g/2-u.height/2,left:y-u.width-12},right:{top:m+g/2-u.height/2,left:y+b+12},"top-right":{top:m-u.height-12,left:y+b-u.width},"top-left":{top:m-u.height-12,left:y},"bottom-right":{top:v+12,left:y+b-u.width},"bottom-left":{top:v+12,left:y},"right-top":{top:m,left:y+b+12},"left-top":{top:m,left:y-u.width-12},"right-bottom":{top:v-u.height,left:y+b+12},"left-bottom":{top:v-u.height,left:y-u.width-12}}[o];return{position:s?"fixed":"absolute",top:w.top+h.y,left:w.left+h.x}}(n,t,document.body,e,i,rt.current),o=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"bottom",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:12,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:6,o=t.getBoundingClientRect(),i=d(e.split("-"),2),l=i[0],a=i[1],f=c({boxShadow:{top:"1px 1px 1px 0px rgba(0, 0, 0, 0.05)",right:"-1px 1px 1px 0px rgba(0, 0, 0, 0.05)",bottom:"-1px -1px 1px 0px rgba(0, 0, 0, 0.05)",left:"1px -1px 1px 0px rgba(0, 0, 0, 0.05)"}[l]},P(l),-r/2);if(a)return u(c({},a,2*n),f);var s={};return["bottom","top"].includes(l)&&(s.right=(o.width-r)/2),["left","right"].includes(l)&&(s.top=(o.height-r)/2),u(u({},s),f)}(n,i,12);h(n,{top:r.top+"px",left:r.left+"px",position:r.position}),V&&!at.current&&(at.current=!0,h(n,U),n.__prevent__minify__removed__=n.scrollTop,h(n,{transitionProperty:"transform, opacity"})),lt(o)}),[V,i,rt]),ft=function(){var t=et.current,e=W(t);ct(t,e)},st=t.useCallback((function(t){var e,n=nt.current,r=et.current;!n||n.contains(t.target)||r.contains(t.target)||(null===(e=ot.current)||void 0===e||e.call(ot))}),[ot]);T((function(){return window}),"resize",m?ft:void 0,O),T((function(){return W(et.current)}),"scroll",m?ft:void 0,O),T((function(){return document}),"click",A?st:void 0),q((function(){var t=et.current,e=W(t);m&&ct(t,e)}),[ct,m]);var dt=t.useMemo((function(){return function(t){var e=t.split("-"),n="";return e[0]&&(n+=P(e[0])),e[1]&&(n+=" "+e[1]),n}(i)}),[i]),pt=j((function(){return V?nt.current:null}),m,U,$,J);return b((function(){null==x||x(m),m||(at.current=!1)}),[m]),r.default.createElement(r.default.Fragment,null,r.default.createElement(k,{visible:L&&m,className:D,style:M,duration:J,onClick:function(){B&&(null==E||E())}}),r.default.cloneElement(N,{ref:et}),w&&o.default.createPortal(r.default.createElement(r.default.Fragment,null,(V&&pt||!V&&m)&&r.default.createElement("div",f({},tt,{ref:nt,className:"w-popover ".concat(C||""),style:u({position:"absolute",background:"#fff",zIndex:1e3,transformOrigin:dt,transitionTimingFunction:Q,transitionDuration:"".concat(J,"ms"),willChange:V?"transform, opacity":"unset"},S)}),p&&r.default.createElement("div",{className:"w-popover__arrow",style:u({position:"absolute",width:6,height:6,zIndex:-1,background:"inherit",transform:"rotate(45deg)"},ut)}),g&&r.default.createElement(v,{className:"w-popover__close",onClick:E,style:{position:"absolute",zIndex:10,top:6,right:6,cursor:"pointer",color:"rgb(0,0,0)",opacity:.35,display:"flex",alignItems:"center",justifyContent:"center"}}),l)),document.body))};G.displayName="W-Popover";var J=["hoverDelay","placement","arrow","offset","className","style","children"],K=function(e){var n=e.hoverDelay,o=void 0===n?100:n,i=e.placement,l=void 0===i?"top":i,a=e.arrow,c=void 0===a||a,p=e.offset,m=e.className,v=e.style,y=e.children,b=s(e,J),g=t.useRef(0),h=d(t.useState(!1),2),w=h[0],O=h[1],x={onMouseEnter:function(){g.current&&clearTimeout(g.current),O(!0)},onMouseLeave:function(){g.current=window.setTimeout((function(){O(!1)}),o)},onFocus:function(){g.current&&clearTimeout(g.current),O(!0)}};return r.default.createElement(G,f({},b,{className:"w-tooltip ".concat(m),style:u({background:"#333",color:"#fff",padding:"6px 12px"},v),visible:w,arrow:c,placement:l,offset:p},x),r.default.isValidElement(y)?r.default.cloneElement(y,u({},x)):r.default.createElement("span",x,y))};K.displayName="W-Tooltip",exports.Popover=G,exports.Tooltip=K,exports.default=G; +"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),e=require("react-dom");function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var r=n(t),o=n(e);function i(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function u(t){for(var e=1;e=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}function d(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=n){var r,o,i,u,l=[],a=!0,c=!1;try{if(i=(n=n.call(t)).next,0===e){if(Object(n)!==n)return;a=!1}else for(;!(a=(r=i.call(n)).done)&&(l.push(r.value),l.length!==e);a=!0);}catch(t){c=!0,o=t}finally{try{if(!a&&null!=n.return&&(u=n.return(),Object(u)!==u))return}finally{if(c)throw o}}return l}}(t,e)||function(t,e){if(!t)return;if("string"==typeof t)return p(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return p(t,e)}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function p(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n1&&void 0!==arguments[1]?arguments[1]:[],r=t.useRef(!1);t.useEffect((function(){if(r.current)return e();r.current=!0}),n)},g=function(t){var e,n=t.current;return n instanceof HTMLElement?e=n:n.current?e=n.current:"function"==typeof n&&(e=n()),e},h=function(t,e,n){if("object"===a(e)&&e)for(var r=0,o=Object.keys(e);r4&&void 0!==arguments[4]?arguments[4]:220,u=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,l=t.useState(n),a=d(l,2),c=a[0],f=a[1],s=y(e),p=t.useRef(0),m=y(r),v=y(o);return E((function(){var t=g(s);n&&t instanceof Element&&(h(t,m.current,v.current),f(!0),p.current=window.setTimeout((function(){h(t,v.current,m.current)}),u))}),[n,c,m,v,s,u]),b((function(){if(!n&&c){var t=g(s);p.current=window.setTimeout((function(){h(t,m.current,v.current),p.current=window.setTimeout((function(){f(!1)}),i)}),u)}}),[n]),t.useEffect((function(){return function(){p.current&&clearTimeout(p.current)}}),[]),c||n}var C=["children","visible","style","duration","hideOverflow"],S=r.default.forwardRef((function(e,n){var o=e.children,i=e.visible,l=e.style,a=e.duration,c=void 0===a?220:a,d=e.hideOverflow,p=void 0===d||d,m=s(e,C),v=t.useRef(null),y=t.useRef("");t.useImperativeHandle(n,(function(){return v.current}));var b=j((function(){return v.current}),i,{opacity:0},{opacity:.5},c);return t.useEffect((function(){return y.current=document.body.style.overflow,document.body.style.overflow=i&&p?"hidden":y.current,function(){document.body.style.overflow=y.current}}),[i,p]),b?r.default.createElement("div",f({ref:v},m,{style:u(u({},l),{},{opacity:0,background:"rgba(0, 0, 0)",zIndex:1e3,position:"fixed",left:0,top:0,bottom:0,right:0,width:"100%",touchAction:"none",display:b?"":"none",transition:"opacity ".concat(c,"ms ease-in-out")})}),o):null}));S.displayName="W-Mask";var k={bottom:"top",top:"bottom",left:"right",right:"left"},P=function(t){return k[t]};function T(e,n,r,o){var i=y(r),u=y(n),l=y(e),a=y(o);t.useEffect((function(){var t=function(t,e){return t?"function"==typeof t?t():t&&"current"in t?t.current:t:e}(l.current,window);if(null==t?void 0:t.addEventListener){var e=function(t){var e;return null===(e=i.current)||void 0===e?void 0:e.call(i,t)},n=u.current,r=a.current;return t.addEventListener(n,e,r),function(){t.removeEventListener(n,e,r)}}}),[])}var N=function(t){if("[object Window]"!==t.toString()){var e=t.ownerDocument;return e&&e.defaultView||window}return t},L=function(t){return function(t){return(I(t)?t.ownerDocument:t.document)||window.document}(t).documentElement},R=function(t){return N(t).getComputedStyle(t)},M=function(t){return t?(t.nodeName||"").toLowerCase():""},D=function(t){return t&&"html"!==M(t)?t.assignedSlot||t.parentNode||L(t):t},I=function(t){return t instanceof N(t).Element||t instanceof Element},A=function(t){return t instanceof N(t).HTMLElement||t instanceof HTMLElement},z=function(t){return["table","td","th"].indexOf(M(t))>=0},B=function(t){return A(t)&&"fixed"!==R(t).position?t.offsetParent:null},F=function(t,e){var n=N(t);null==e||e(t);for(var r=B(t);r&&z(r)&&"static"===R(r).position;)null==e||e(r),r=B(r);return r||function(t,e){null==e||e(t);for(var n=D(t);A(n)&&["html","body"].indexOf(M(n))<0;){null==e||e(n);var r=R(n);if("none"!==r.transform||"none"!==r.perspective||r.willChange&&"auto"!==r.willChange)return n;n=D(n)}return n}(t,e)||n},_=function(t){var e=0;return F(t,(function(t){e+=t.offsetTop})),e},H=/scroll|auto|overlay/i;function V(t){return"HTML"!==t.tagName&&"BODY"!==t.tagName&&1===t.nodeType}function W(t){for(var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:window,n=t;n&&n!==e&&V(n);){var r=window.getComputedStyle(n),o=r.overflowY;if(H.test(o))return n;n=n.parentNode}return e}var Y=["placement","content","arrow","visible","closable","onVisibleChange","onClose","className","style","children","mask","maskStyle","maskClass","closeOnClickOutside","closeOnMaskClick","transition","transitionDuration","transitionTimingFunction","offset"],q=x,U={opacity:0,transform:"scale(0)"},$={opacity:1,transform:"scale(1)"},G=function(e){var n=e.placement,i=void 0===n?"bottom":n,l=e.content,a=e.arrow,p=void 0===a||a,m=e.visible,g=e.closable,x=e.onVisibleChange,E=e.onClose,C=e.className,k=e.style,N=e.children,L=e.mask,D=e.maskStyle,I=e.maskClass,A=e.closeOnClickOutside,z=void 0===A||A,B=e.closeOnMaskClick,F=void 0===B||B,H=e.transition,V=void 0===H||H,G=e.transitionDuration,J=void 0===G?220:G,K=e.transitionTimingFunction,Q=void 0===K?"ease-in-out":K,X=e.offset,Z=void 0===X?{}:X,tt=s(e,Y),et=t.useRef(),nt=t.useRef(null),rt=y(Z),ot=y(E),it=d(t.useState({}),2),ut=it[0],lt=it[1],at=t.useRef(!1),ct=r.default.useCallback((function(t,e){var n=nt.current;h(n,{transitionProperty:"none",transform:"none"});var r=function(t,e,n,r){var o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"bottom",i=arguments.length>5?arguments[5]:void 0,u=t.getBoundingClientRect(),l=e.getBoundingClientRect(),a=n.getBoundingClientRect(),c="body"===M(n),f=R(e).position,s="fixed"===f,d=r instanceof Element?r.scrollTop:r.pageYOffset,p="fixed"===f||r instanceof Element,m=p?l.top:c?l.top+d:_(e),v=m,y=l.height+m,b=l.left-(p?0:a.left),g=l.width,h=l.height,w={top:{top:v-u.height-12,left:b+g/2-u.width/2},bottom:{top:y+12,left:b+g/2-u.width/2},left:{top:v+h/2-u.height/2,left:b-u.width-12},right:{top:v+h/2-u.height/2,left:b+g+12},"top-right":{top:v-u.height-12,left:b+g-u.width},"top-left":{top:v-u.height-12,left:b},"bottom-right":{top:y+12,left:b+g-u.width},"bottom-left":{top:y+12,left:b},"right-top":{top:v,left:b+g+12},"left-top":{top:v,left:b-u.width-12},"right-bottom":{top:y-u.height,left:b+g+12},"left-bottom":{top:y-u.height,left:b-u.width-12}},O={x:i.x||0,y:i.y||0},x=w[o];return{position:s?"fixed":"absolute",top:x.top+O.y,left:x.left+O.x}}(n,t,document.body,e,i,rt.current),o=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"bottom",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:12,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:6,o=t.getBoundingClientRect(),i=d(e.split("-"),2),l=i[0],a=i[1],f=c({boxShadow:{top:"1px 1px 1px 0px rgba(0, 0, 0, 0.05)",right:"-1px 1px 1px 0px rgba(0, 0, 0, 0.05)",bottom:"-1px -1px 1px 0px rgba(0, 0, 0, 0.05)",left:"1px -1px 1px 0px rgba(0, 0, 0, 0.05)"}[l]},P(l),-r/2);if(a)return u(c({},a,2*n),f);var s={};return["bottom","top"].includes(l)&&(s.right=(o.width-r)/2),["left","right"].includes(l)&&(s.top=(o.height-r)/2),u(u({},s),f)}(n,i,12);h(n,{top:r.top+"px",left:r.left+"px",position:r.position}),V&&!at.current&&(at.current=!0,h(n,U),n.scrollTop,h(n,{transitionProperty:"transform, opacity"})),lt(o)}),[V,i,rt]),ft=function(){var t=et.current,e=W(t);ct(t,e)},st=t.useCallback((function(t){var e,n=nt.current,r=et.current;!n||n.contains(t.target)||r.contains(t.target)||(null===(e=ot.current)||void 0===e||e.call(ot))}),[ot]);T((function(){return window}),"resize",m?ft:void 0,O),T((function(){return W(et.current)}),"scroll",m?ft:void 0,O),T((function(){return document}),"click",z?st:void 0),q((function(){var t=et.current,e=W(t);m&&ct(t,e)}),[ct,m]);var dt=t.useMemo((function(){return function(t){var e=t.split("-"),n="";return e[0]&&(n+=P(e[0])),e[1]&&(n+=" "+e[1]),n}(i)}),[i]),pt=j((function(){return V?nt.current:null}),m,U,$,J);return b((function(){null==x||x(m),m||(at.current=!1)}),[m]),r.default.createElement(r.default.Fragment,null,r.default.createElement(S,{visible:L&&m,className:I,style:D,duration:J,onClick:function(){F&&(null==E||E())}}),r.default.cloneElement(N,{ref:et}),w&&o.default.createPortal(r.default.createElement(r.default.Fragment,null,(V&&pt||!V&&m)&&r.default.createElement("div",f({},tt,{ref:nt,className:"w-popover ".concat(C||""),style:u({position:"absolute",background:"#fff",zIndex:1e3,transformOrigin:dt,transitionTimingFunction:Q,transitionDuration:"".concat(J,"ms"),willChange:V?"transform, opacity":"unset"},k)}),p&&r.default.createElement("div",{className:"w-popover__arrow",style:u({position:"absolute",width:6,height:6,zIndex:-1,background:"inherit",transform:"rotate(45deg)"},ut)}),g&&r.default.createElement(v,{className:"w-popover__close",onClick:E,style:{position:"absolute",zIndex:10,top:6,right:6,cursor:"pointer",color:"rgb(0,0,0)",opacity:.35,display:"flex",alignItems:"center",justifyContent:"center"}}),l)),document.body))};G.displayName="W-Popover";var J=["hoverDelay","placement","arrow","offset","className","style","children"],K=function(e){var n=e.hoverDelay,o=void 0===n?100:n,i=e.placement,l=void 0===i?"top":i,a=e.arrow,c=void 0===a||a,p=e.offset,m=e.className,v=e.style,y=e.children,b=s(e,J),g=t.useRef(0),h=d(t.useState(!1),2),w=h[0],O=h[1],x={onMouseEnter:function(){g.current&&clearTimeout(g.current),O(!0)},onMouseLeave:function(){g.current=window.setTimeout((function(){O(!1)}),o)},onFocus:function(){g.current&&clearTimeout(g.current),O(!0)}};return r.default.createElement(G,f({},b,{className:"w-tooltip ".concat(m),style:u({background:"#333",color:"#fff",padding:"6px 12px"},v),visible:w,arrow:c,placement:l,offset:p},x),r.default.isValidElement(y)?r.default.cloneElement(y,u({},x)):r.default.createElement("span",x,y))};K.displayName="W-Tooltip",exports.Popover=G,exports.Tooltip=K,exports.default=G; diff --git a/docs/index.09e64e.js b/docs/index.09e64e.js new file mode 100644 index 0000000..43fb6c9 --- /dev/null +++ b/docs/index.09e64e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkw_popover=self.webpackChunkw_popover||[]).push([[57],{620:(t,e,n)=>{var r=n(540),o=n(961),i=n(75),l=n(284);function c(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function a(t){for(var e=1;e=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}function p(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=n){var r,o,i,l,c=[],a=!0,u=!1;try{if(i=(n=n.call(t)).next,0===e){if(Object(n)!==n)return;a=!1}else for(;!(a=(r=i.call(n)).done)&&(c.push(r.value),c.length!==e);a=!0);}catch(t){u=!0,o=t}finally{try{if(!a&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(u)throw o}}return c}}(t,e)||function(t,e){if(t){if("string"==typeof t)return m(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?m(t,e):void 0}}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function m(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n1&&void 0!==arguments[1]?arguments[1]:[],n=(0,r.useRef)(!1);(0,r.useEffect)((function(){if(n.current)return t();n.current=!0}),e)},y=function(t){var e,n=t.current;return n instanceof HTMLElement?e=n:n.current?e=n.current:"function"==typeof n&&(e=n()),e},w=function(t,e,n){if("object"===u(e)&&e)for(var r=0,o=Object.keys(e);r4&&void 0!==arguments[4]?arguments[4]:220,l=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,c=p((0,r.useState)(e),2),a=c[0],u=c[1],s=h(t),f=(0,r.useRef)(0),d=h(n),m=h(o);return k((function(){var t=y(s);e&&t instanceof Element&&(w(t,d.current,m.current),u(!0),f.current=window.setTimeout((function(){w(t,m.current,d.current)}),l))}),[e,a,d,m,s,l]),g((function(){if(!e&&a){var t=y(s);f.current=window.setTimeout((function(){w(t,d.current,m.current),f.current=window.setTimeout((function(){u(!1)}),i)}),l)}}),[e]),(0,r.useEffect)((function(){return function(){f.current&&clearTimeout(f.current)}}),[]),a||e}var j=["children","visible","style","duration","hideOverflow"],N=r.forwardRef((function(t,e){var n=t.children,o=t.visible,i=t.style,l=t.duration,c=void 0===l?220:l,u=t.hideOverflow,s=void 0===u||u,p=d(t,j),m=(0,r.useRef)(null),v=(0,r.useRef)("");(0,r.useImperativeHandle)(e,(function(){return m.current}));var b=C((function(){return m.current}),o,{opacity:0},{opacity:.5},c);return(0,r.useEffect)((function(){return v.current=document.body.style.overflow,document.body.style.overflow=o&&s?"hidden":v.current,function(){document.body.style.overflow=v.current}}),[o,s]),b?r.createElement("div",f({ref:m},p,{style:a(a({},i),{},{opacity:0,background:"rgba(0, 0, 0)",zIndex:1e3,position:"fixed",left:0,top:0,bottom:0,right:0,width:"100%",touchAction:"none",display:b?"":"none",transition:"opacity ".concat(c,"ms ease-in-out")})}),n):null}));N.displayName="W-Mask";var S={bottom:"top",top:"bottom",left:"right",right:"left"},T=function(t){return S[t]};function P(t,e,n,o){var i=h(n),l=h(e),c=h(t),a=h(o);(0,r.useEffect)((function(){var t=function(t,e){return t?"function"==typeof t?t():t&&"current"in t?t.current:t:e}(c.current,window);if(null==t?void 0:t.addEventListener){var e=function(t){var e;return null===(e=i.current)||void 0===e?void 0:e.call(i,t)},n=l.current,r=a.current;return t.addEventListener(n,e,r),function(){t.removeEventListener(n,e,r)}}}),[])}var A=function(t){if("[object Window]"!==t.toString()){var e=t.ownerDocument;return e&&e.defaultView||window}return t},R=function(t){return A(t).getComputedStyle(t)},L=function(t){return t?(t.nodeName||"").toLowerCase():""},I=function(t){return t&&"html"!==L(t)?t.assignedSlot||t.parentNode||function(t){return function(t){return(D(t)?t.ownerDocument:t.document)||window.document}(t).documentElement}(t):t},D=function(t){return t instanceof A(t).Element||t instanceof Element},M=function(t){return t instanceof A(t).HTMLElement||t instanceof HTMLElement},_=function(t){return["table","td","th"].indexOf(L(t))>=0},z=function(t){return M(t)&&"fixed"!==R(t).position?t.offsetParent:null},B=function(t){var e=0;return function(t,e){A(t);null==e||e(t);for(var n=z(t);n&&_(n)&&"static"===R(n).position;)null==e||e(n),n=z(n);n||function(t,e){null==e||e(t);for(var n=I(t);M(n)&&["html","body"].indexOf(L(n))<0;){null==e||e(n);var r=R(n);if("none"!==r.transform||"none"!==r.perspective||r.willChange&&"auto"!==r.willChange)return n;n=I(n)}}(t,e)}(t,(function(t){e+=t.offsetTop})),e},F=/scroll|auto|overlay/i;function H(t){return"HTML"!==t.tagName&&"BODY"!==t.tagName&&1===t.nodeType}function V(t){for(var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:window,n=t;n&&n!==e&&H(n);){var r=window.getComputedStyle(n).overflowY;if(F.test(r))return n;n=n.parentNode}return e}var W=["placement","content","arrow","visible","closable","onVisibleChange","onClose","className","style","children","mask","maskStyle","maskClass","closeOnClickOutside","closeOnMaskClick","transition","transitionDuration","transitionTimingFunction","offset"],Y=x,q={opacity:0,transform:"scale(0)"},U={opacity:1,transform:"scale(1)"},$=function(t){var e=t.placement,n=void 0===e?"bottom":e,i=t.content,l=t.arrow,c=void 0===l||l,u=t.visible,m=t.closable,v=t.onVisibleChange,y=t.onClose,x=t.className,k=t.style,j=t.children,S=t.mask,A=t.maskStyle,I=t.maskClass,D=t.closeOnClickOutside,M=void 0===D||D,_=t.closeOnMaskClick,z=void 0===_||_,F=t.transition,H=void 0===F||F,$=t.transitionDuration,G=void 0===$?220:$,J=t.transitionTimingFunction,K=void 0===J?"ease-in-out":J,Q=t.offset,X=void 0===Q?{}:Q,Z=d(t,W),tt=(0,r.useRef)(),et=(0,r.useRef)(null),nt=h(X),rt=h(y),ot=p((0,r.useState)({}),2),it=ot[0],lt=ot[1],ct=(0,r.useRef)(!1),at=r.useCallback((function(t,e){var r=et.current;w(r,{transitionProperty:"none",transform:"none"});var o=function(t,e,n,r){var o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"bottom",i=arguments.length>5?arguments[5]:void 0,l=t.getBoundingClientRect(),c=e.getBoundingClientRect(),a=n.getBoundingClientRect(),u="body"===L(n),s=R(e).position,f="fixed"===s,d=r instanceof Element?r.scrollTop:r.pageYOffset,p="fixed"===s||r instanceof Element,m=p?c.top:u?c.top+d:B(e),v=m,b=c.height+m,h=c.left-(p?0:a.left),g=c.width,y=c.height,w={top:{top:v-l.height-12,left:h+g/2-l.width/2},bottom:{top:b+12,left:h+g/2-l.width/2},left:{top:v+y/2-l.height/2,left:h-l.width-12},right:{top:v+y/2-l.height/2,left:h+g+12},"top-right":{top:v-l.height-12,left:h+g-l.width},"top-left":{top:v-l.height-12,left:h},"bottom-right":{top:b+12,left:h+g-l.width},"bottom-left":{top:b+12,left:h},"right-top":{top:v,left:h+g+12},"left-top":{top:v,left:h-l.width-12},"right-bottom":{top:b-l.height,left:h+g+12},"left-bottom":{top:b-l.height,left:h-l.width-12}},E=i.x||0,O=i.y||0,x=w[o];return{position:f?"fixed":"absolute",top:x.top+O,left:x.left+E}}(r,t,document.body,e,n,nt.current),i=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"bottom",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:12,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:6,o=t.getBoundingClientRect(),i=p(e.split("-"),2),l=i[0],c=i[1],u=s({boxShadow:{top:"1px 1px 1px 0px rgba(0, 0, 0, 0.05)",right:"-1px 1px 1px 0px rgba(0, 0, 0, 0.05)",bottom:"-1px -1px 1px 0px rgba(0, 0, 0, 0.05)",left:"1px -1px 1px 0px rgba(0, 0, 0, 0.05)"}[l]},T(l),-r/2);if(c)return a(s({},c,2*n),u);var f={};return["bottom","top"].includes(l)&&(f.right=(o.width-r)/2),["left","right"].includes(l)&&(f.top=(o.height-r)/2),a(a({},f),u)}(r,n,12);w(r,{top:o.top+"px",left:o.left+"px",position:o.position}),H&&!ct.current&&(ct.current=!0,w(r,q),r.scrollTop,w(r,{transitionProperty:"transform, opacity"})),lt(i)}),[H,n,nt]),ut=function(){var t=tt.current,e=V(t);at(t,e)},st=(0,r.useCallback)((function(t){var e,n=et.current,r=tt.current;!n||n.contains(t.target)||r.contains(t.target)||null===(e=rt.current)||void 0===e||e.call(rt)}),[rt]);P((function(){return window}),"resize",u?ut:void 0,O),P((function(){return V(tt.current)}),"scroll",u?ut:void 0,O),P((function(){return document}),"click",M?st:void 0),Y((function(){var t=tt.current,e=V(t);u&&at(t,e)}),[at,u]);var ft=(0,r.useMemo)((function(){return function(t){var e=t.split("-"),n="";return e[0]&&(n+=T(e[0])),e[1]&&(n+=" "+e[1]),n}(n)}),[n]),dt=C((function(){return H?et.current:null}),u,q,U,G);return g((function(){null==v||v(u),u||(ct.current=!1)}),[u]),r.createElement(r.Fragment,null,r.createElement(N,{visible:S&&u,className:I,style:A,duration:G,onClick:function(){z&&(null==y||y())}}),r.cloneElement(j,{ref:tt}),E&&o.createPortal(r.createElement(r.Fragment,null,(H&&dt||!H&&u)&&r.createElement("div",f({},Z,{ref:et,className:"w-popover ".concat(x||""),style:a({position:"absolute",background:"#fff",zIndex:1e3,transformOrigin:ft,transitionTimingFunction:K,transitionDuration:"".concat(G,"ms"),willChange:H?"transform, opacity":"unset"},k)}),c&&r.createElement("div",{className:"w-popover__arrow",style:a({position:"absolute",width:6,height:6,zIndex:-1,background:"inherit",transform:"rotate(45deg)"},it)}),m&&r.createElement(b,{className:"w-popover__close",onClick:y,style:{position:"absolute",zIndex:10,top:6,right:6,cursor:"pointer",color:"rgb(0,0,0)",opacity:.35,display:"flex",alignItems:"center",justifyContent:"center"}}),i)),document.body))};$.displayName="W-Popover";var G=["hoverDelay","placement","arrow","offset","className","style","children"],J=function(t){var e=t.hoverDelay,n=void 0===e?100:e,o=t.placement,i=void 0===o?"top":o,l=t.arrow,c=void 0===l||l,u=t.offset,s=t.className,m=t.style,v=t.children,b=d(t,G),h=(0,r.useRef)(0),g=p((0,r.useState)(!1),2),y=g[0],w=g[1],E={onMouseEnter:function(){h.current&&clearTimeout(h.current),w(!0)},onMouseLeave:function(){h.current=window.setTimeout((function(){w(!1)}),n)},onFocus:function(){h.current&&clearTimeout(h.current),w(!0)}};return r.createElement($,f({},b,{className:"w-tooltip ".concat(s),style:a({background:"#333",color:"#fff",padding:"6px 12px"},m),visible:y,arrow:c,placement:i,offset:u},E),r.isValidElement(v)?r.cloneElement(v,a({},E)):r.createElement("span",E,v))};J.displayName="W-Tooltip";var K=n(168),Q=n(986),X=["title","padding","background","border","height","children"];function Z(t){var e=t.title,n=void 0===e?"":e,o=t.padding,i=void 0===o?"12px":o,l=t.background,c=void 0===l?"#fff":l,a=t.border,u=t.height,s=t.children,f=(0,Q.A)(t,X);return r.createElement("div",(0,K.A)({className:"demo-block"},f),r.createElement("div",{className:"demo-block__title"},n),r.createElement("div",{className:"demo-block__content",style:{padding:i,background:c,border:a,height:u}},s))}var tt=["top","top-left","top-right","left","left-top","left-bottom","bottom","bottom-left","bottom-right","right","right-top","right-bottom"];function et(){var t=(0,r.useState)(!0),e=(0,i.A)(t,2),n=e[0],o=e[1],l=(0,r.useReducer)((function(t){return t+1}),0),c=(0,i.A)(l,2)[1],a=(0,r.useRef)(0);return r.createElement("div",null,r.createElement(Z,{title:"Popover",padding:40},r.createElement($,{style:{background:"#666",color:"#fff",padding:"12px 24px"},placement:tt[a.current],visible:n,onClose:function(){return o(!1)},content:tt[a.current]},r.createElement("button",{className:"w-button",style:{height:60,width:120},onClick:function(){o(!0),a.current++,a.current>11&&(a.current=0),c()}},"Try to click me"))),r.createElement(Z,{title:"Tooltip"},r.createElement("div",{style:{display:"flex",gap:8}},r.createElement(J,{content:"This's a tooltip ",placement:"top"},r.createElement("button",{className:"w-button"},"Tooltip at top")),r.createElement(J,{content:"This's a tooltip ",placement:"bottom"},r.createElement("button",{className:"w-button"},"Tooltip at bottom")),r.createElement(J,{content:"This's a tooltip ",placement:"right"},r.createElement("button",{className:"w-button"},"Tooltip at right")))),r.createElement(Z,{title:"Scroll (the green block is scrollable)"},r.createElement("div",{style:{height:200,width:"100%",border:"1px solid #ccc",textAlign:"center",overflowY:"scroll",position:"relative"}},r.createElement("div",{style:{height:"120vh",background:"#ccc"}},r.createElement($,{placement:"bottom",visible:!0,content:"I'm here ",style:{padding:6}},r.createElement("button",{className:"w-button",onClick:function(){return o(!0)}},"hi, there~")),r.createElement($,{placement:"bottom",visible:!0,content:"I'm here abs",style:{padding:6}},r.createElement("button",{className:"w-button",onClick:function(){return o(!0)},style:{position:"absolute",left:50,top:50}},"hi, here~")),r.createElement($,{placement:"right",visible:!0,content:"I'm here fixed",style:{padding:6,background:"#666",color:"#fff"}},r.createElement("button",{className:"w-button",style:{position:"fixed",bottom:100,left:150}},"hi, there~"))))),r.createElement("div",{style:{height:"110vh"}}))}var nt=document.querySelector("#root");(nt.hasChildNodes()?o.hydrate:o.render)(r.createElement(et,null),nt)}},t=>{t.O(0,[502],(()=>(620,t(t.s=620)))),t.O()}]); \ No newline at end of file diff --git a/docs/index.99107c.js b/docs/index.99107c.js deleted file mode 100644 index 7163761..0000000 --- a/docs/index.99107c.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkw_popover=self.webpackChunkw_popover||[]).push([[57],{156:(t,e,n)=>{var r=n(540),o=n(961),i=n(75),c=n(168),l=n(467),a=n(986),u=r.createElement("svg",(0,c.A)({viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},{width:"1em",height:"1em",fill:"currentColor"}),r.createElement("path",{d:"M240.512 180.181333l271.530667 271.488 271.530666-271.488a42.666667 42.666667 0 0 1 56.32-3.541333l4.010667 3.541333a42.666667 42.666667 0 0 1 0 60.330667l-271.530667 271.530667 271.530667 271.530666a42.666667 42.666667 0 0 1-56.32 63.872l-4.010667-3.541333-271.530666-271.530667-271.530667 271.530667-4.010667 3.541333a42.666667 42.666667 0 0 1-56.32-63.872l271.488-271.530666-271.488-271.530667a42.666667 42.666667 0 0 1 60.330667-60.330667z","p-id":"2884"})),s=function(t){return r.createElement("div",t,u)};s.displayName="Close";const f=s;function p(t){var e=(0,r.useRef)(t);return e.current=t,e}const d=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=(0,r.useRef)(!1);(0,r.useEffect)((function(){if(n.current)return t();n.current=!0}),e)};var m=n(284),b=function(t){var e,n=t.current;return n instanceof HTMLElement?e=n:n.current?e=n.current:"function"==typeof n&&(e=n()),e},v=function(t,e,n){if("object"===(0,m.A)(e)&&e)for(var r=0,o=Object.keys(e);r4&&void 0!==arguments[4]?arguments[4]:220,l=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,a=(0,r.useState)(e),u=(0,i.A)(a,2),s=u[0],f=u[1],m=p(t),h=(0,r.useRef)(0),g=p(n),y=p(o);return w((function(){var t=b(m);e&&t instanceof Element&&(v(t,g.current,y.current),f(!0),h.current=window.setTimeout((function(){v(t,y.current,g.current)}),l))}),[e,s,g,y,m,l]),d((function(){if(!e&&s){var t=b(m);h.current=window.setTimeout((function(){v(t,g.current,y.current),h.current=window.setTimeout((function(){f(!1)}),c)}),l)}}),[e]),(0,r.useEffect)((function(){return function(){h.current&&clearTimeout(h.current)}}),[]),s||e}var E=["children","visible","style","duration","hideOverflow"];function j(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function k(t){for(var e=1;e=0},z=function(t){return _(t)&&"fixed"!==S(t).position?t.offsetParent:null},B=12,F=function(t,e,n,r){var o,i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"bottom",c=arguments.length>5?arguments[5]:void 0,l=t.getBoundingClientRect(),a=e.getBoundingClientRect(),u=n.getBoundingClientRect(),s="body"===R(n),f=S(e).position,p="fixed"===f,d=r instanceof Element?r.scrollTop:r.pageYOffset,m="fixed"===f||r instanceof Element,b=m?a.top:s?a.top+d:(o=0,function(t,e){var n=D(t);null==e||e(t);for(var r=z(t);r&&I(r)&&"static"===S(r).position;)null==e||e(r),r=z(r);r||function(t,e){null==e||e(t);for(var n=L(t);_(n)&&["html","body"].indexOf(R(n))<0;){null==e||e(n);var r=S(n);if("none"!==r.transform||"none"!==r.perspective||r.willChange&&"auto"!==r.willChange)return n;n=L(n)}}(t,e)}(e,(function(t){o+=t.offsetTop})),o),v=b,h=a.height+b,g=a.left-(m?0:u.left),y=a.width,w=a.height,O={top:{top:v-l.height-B,left:g+y/2-l.width/2},bottom:{top:h+B,left:g+y/2-l.width/2},left:{top:v+w/2-l.height/2,left:g-l.width-B},right:{top:v+w/2-l.height/2,left:g+y+B},"top-right":{top:v-l.height-B,left:g+y-l.width},"top-left":{top:v-l.height-B,left:g},"bottom-right":{top:h+B,left:g+y-l.width},"bottom-left":{top:h+B,left:g},"right-top":{top:v,left:g+y+B},"left-top":{top:v,left:g-l.width-B},"right-bottom":{top:h-l.height,left:g+y+B},"left-bottom":{top:h-l.height,left:g-l.width-B}},E=c.x||0,j=c.y||0,k=O[i];return{position:p?"fixed":"absolute",top:k.top+j,left:k.left+E}};function H(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function V(t){for(var e=1;e1&&void 0!==arguments[1]?arguments[1]:window,n=t;n&&n!==e&&q(n);){var r=window.getComputedStyle(n).overflowY;if(W.test(r))return n;n=n.parentNode}return e}var J=["placement","content","arrow","visible","closable","onVisibleChange","onClose","className","style","children","mask","maskStyle","maskClass","closeOnClickOutside","closeOnMaskClick","transition","transitionDuration","transitionTimingFunction","offset"];function K(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function Q(t){for(var e=1;e1&&void 0!==arguments[1]?arguments[1]:"bottom",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:12,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:6,o=t.getBoundingClientRect(),c=e.split("-"),a=(0,i.A)(c,2),u=a[0],s=a[1],f=(0,l.A)({boxShadow:{top:"1px 1px 1px 0px rgba(0, 0, 0, 0.05)",right:"-1px 1px 1px 0px rgba(0, 0, 0, 0.05)",bottom:"-1px -1px 1px 0px rgba(0, 0, 0, 0.05)",left:"1px -1px 1px 0px rgba(0, 0, 0, 0.05)"}[u]},N(u),-r/2);if(s)return V((0,l.A)({},s,2*n),f);var p={};return["bottom","top"].includes(u)&&(p.right=(o.width-r)/2),["left","right"].includes(u)&&(p.top=(o.height-r)/2),V(V({},p),f)}(r,n,B);v(r,{top:o.top+"px",left:o.left+"px",position:o.position}),z&&!st.current&&(st.current=!0,v(r,X),r.scrollTop,v(r,{transitionProperty:$})),ut(c)}),[z,n,ot]),pt=function(){var t=nt.current,e=G(t);ft(t,e)},dt=(0,r.useCallback)((function(t){var e,n=rt.current,r=nt.current;!n||n.contains(t.target)||r.contains(t.target)||null===(e=it.current)||void 0===e||e.call(it)}),[it]);A((function(){return window}),"resize",b?pt:void 0,g),A((function(){return G(nt.current)}),"scroll",b?pt:void 0,g),A((function(){return document}),"click",L?dt:void 0),U((function(){var t=nt.current,e=G(t);b&&ft(t,e)}),[ft,b]);var mt=(0,r.useMemo)((function(){return function(t){var e=t.split("-"),n="";return e[0]&&(n+=T(e[0])),e[1]&&(n+=" "+e[1]),n}(n)}),[n]),bt=O((function(){return z?rt.current:null}),b,X,Z,W);return d((function(){null==w||w(b),b||(st.current=!1)}),[b]),r.createElement(r.Fragment,null,r.createElement(P,{visible:C&&b,className:S,style:D,duration:W,onClick:function(){_&&(null==E||E())}}),r.cloneElement(x,{ref:nt}),h&&o.createPortal(r.createElement(r.Fragment,null,(z&&bt||!z&&b)&&r.createElement("div",(0,c.A)({},et,{ref:rt,className:"w-popover ".concat(j||""),style:Q({position:"absolute",background:"#fff",zIndex:1e3,transformOrigin:mt,transitionTimingFunction:q,transitionDuration:"".concat(W,"ms"),willChange:z?$:"unset"},k)}),m&&r.createElement("div",{className:"w-popover__arrow",style:Q({position:"absolute",width:6,height:6,zIndex:-1,background:"inherit",transform:"rotate(45deg)"},at)}),y&&r.createElement(f,{className:"w-popover__close",onClick:E,style:{position:"absolute",zIndex:10,top:6,right:6,cursor:"pointer",color:"rgb(0,0,0)",opacity:.35,display:"flex",alignItems:"center",justifyContent:"center"}}),u)),document.body))};tt.displayName="W-Popover";const et=tt;var nt=["hoverDelay","placement","arrow","offset","className","style","children"];function rt(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function ot(t){for(var e=1;e11&&(a.current=0),l()}},"Try to click me"))),r.createElement(at,{title:"Tooltip"},r.createElement("div",{style:{display:"flex",gap:8}},r.createElement(ct,{content:"This's a tooltip ",placement:"top"},r.createElement("button",{className:"w-button"},"Tooltip at top")),r.createElement(ct,{content:"This's a tooltip ",placement:"bottom"},r.createElement("button",{className:"w-button"},"Tooltip at bottom")),r.createElement(ct,{content:"This's a tooltip ",placement:"right"},r.createElement("button",{className:"w-button"},"Tooltip at right")))),r.createElement(at,{title:"Scroll (the green block is scrollable)"},r.createElement("div",{style:{height:200,width:"100%",border:"1px solid #ccc",textAlign:"center",overflowY:"scroll",position:"relative"}},r.createElement("div",{style:{height:"120vh",background:"#ccc"}},r.createElement(et,{placement:"bottom",visible:!0,content:"I'm here ",style:{padding:6}},r.createElement("button",{className:"w-button",onClick:function(){return o(!0)}},"hi, there~")),r.createElement(et,{placement:"bottom",visible:!0,content:"I'm here abs",style:{padding:6}},r.createElement("button",{className:"w-button",onClick:function(){return o(!0)},style:{position:"absolute",left:50,top:50}},"hi, here~")),r.createElement(et,{placement:"right",visible:!0,content:"I'm here fixed",style:{padding:6,background:"#666",color:"#fff"}},r.createElement("button",{className:"w-button",style:{position:"fixed",bottom:100,left:150}},"hi, there~"))))),r.createElement("div",{style:{height:"110vh"}}))}var ft=document.querySelector("#root");(ft.hasChildNodes()?o.hydrate:o.render)(r.createElement(st,null),ft)}},t=>{t.O(0,[502],(()=>(156,t(t.s=156)))),t.O()}]); \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index e89ba27..d788083 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1 +1 @@ -w-popover demo
Popover
Tooltip
Scroll (the green block is scrollable)
\ No newline at end of file +w-popover demo
Popover
Tooltip
Scroll (the green block is scrollable)
\ No newline at end of file diff --git a/docs/vendor.c71c33.js b/docs/vendor.142324.js similarity index 98% rename from docs/vendor.c71c33.js rename to docs/vendor.142324.js index 9bfbaee..c49b402 100644 --- a/docs/vendor.c71c33.js +++ b/docs/vendor.142324.js @@ -1,2 +1,2 @@ -/*! For license information please see vendor.c71c33.js.LICENSE.txt */ -"use strict";(self.webpackChunkw_popover=self.webpackChunkw_popover||[]).push([[502],{228:e=>{var t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(e){r[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,l){for(var i,a,o=function(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(e),u=1;u{var r=n(540),l=n(228),i=n(982);function a(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n