@xcritical/popover
Version:
3 lines (2 loc) • 7.84 kB
JavaScript
;function n(n){return n&&"object"==typeof n&&"default"in n?n.default:n}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),t=n(r),e=n(require("resize-observer-polyfill")),o=n(require("@xcritical/popper")),i=n(require("styled-components")),u=require("@xcritical/theme");function c(){return(c=Object.assign||function(n){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var e in t)Object.prototype.hasOwnProperty.call(t,e)&&(n[e]=t[e])}return n}).apply(this,arguments)}function a(n,r){return r||(r=n.slice(0)),n.raw=r,n}var f,s,d,l={content:{offset:"5px",background:"#fff",padding:"5px",border:"1px solid #ddd",borderRadius:"2px"},arrow:{offset:"10px",size:"5px",background:"#fff",border:{width:"1px",color:"#ddd"}},wrapper:{cursor:"pointer"}},p=["offset"],b=function(n){var r=n.theme,t=n.appearance,e=n.baseAppearance,o=u.getAppearanceTheme("@xcritical\\xc-popover",l);return function(n){return o(r,t,n,e)}},w=function(n,r){var t=b(n)(["arrow","size"]);switch(r){case"top":case"bottom":return{width:"calc("+t+" * 2)",height:t};case"right":case"left":return{width:t,height:"calc("+t+" * 2)"};default:return{width:"0",height:"0"}}},h=function(n,r){var t=b(n)(["arrow","size"]);switch(r){case"top":return t+" "+t+" 0 "+t;case"right":return t+" "+t+" "+t+" 0";case"bottom":return"0 "+t+" "+t+" "+t;case"left":return t+" 0 "+t+" "+t;default:return""}},m=i.div(f||(f=a(["\n box-sizing: border-box;\n\n &[data-content-position^='top'] {\n margin-bottom: ",";\n }\n\n &[data-content-position^='right'] {\n margin-left: ",";\n }\n\n &[data-content-position^='bottom'] {\n margin-top: ",";\n }\n\n &[data-content-position^='left'] {\n margin-right: ",";\n }\n\n width: ",";\n\n ","\n"])),(function(n){return b(n)(["content","offset"])}),(function(n){return b(n)(["content","offset"])}),(function(n){return b(n)(["content","offset"])}),(function(n){return b(n)(["content","offset"])}),(function(n){return n.shouldFitContainer?"100%":"auto"}),(function(n){return function(n){return function(n,r){if(null==n)return{};var t,e,o={},i=Object.keys(n);for(e=0;e<i.length;e++)r.indexOf(t=i[e])>=0||(o[t]=n[t]);return o}(b(n)(["content"]),p)}(n)})),v=i.div(s||(s=a(["\n position: absolute;\n display: block;\n\n &:before,\n &:after {\n content: '';\n display: block;\n position: absolute;\n border-color: transparent;\n border-style: solid;\n }\n\n &[data-arrow-position^='top'] {\n ",";\n margin: 0 ",";\n bottom: ",";\n\n &:before {\n border-width: ",";\n border-top-color: ",";\n }\n\n &:after {\n bottom: ",";\n border-width: ",";\n border-top-color: ",";\n }\n }\n\n &[data-arrow-position^='right'] {\n ",";\n margin: "," 0;\n left: ",";\n\n &:before {\n border-width: ",";\n border-right-color: ",";\n }\n\n &:after {\n left: ",";\n border-width: ",";\n border-right-color: ",";\n }\n }\n\n &[data-arrow-position^='bottom'] {\n ",";\n margin: 0 ",";\n top: ",";\n\n &:before {\n border-width: ",";\n border-bottom-color: ",";\n }\n\n &:after {\n top: ",";\n border-width: ",";\n border-bottom-color: ",";\n }\n }\n\n &[data-arrow-position^='left'] {\n ",";\n margin: "," 0;\n right: ",";\n\n &:before {\n border-width: ",";\n border-left-color: ",";\n }\n\n &:after {\n right: ",";\n border-width: ",";\n border-left-color: ",";\n }\n }\n"])),(function(n){return w(n,"top")}),(function(n){return b(n)(["arrow","offset"])}),(function(n){return"-"+b(n)(["arrow","size"])}),(function(n){return h(n,"top")}),(function(n){return b(n)(["arrow","border","color"])}),(function(n){return b(n)(["arrow","border","width"])}),(function(n){return h(n,"top")}),(function(n){return b(n)(["arrow","background"])}),(function(n){return w(n,"right")}),(function(n){return b(n)(["arrow","offset"])}),(function(n){return"-"+b(n)(["arrow","size"])}),(function(n){return h(n,"right")}),(function(n){return b(n)(["arrow","border","color"])}),(function(n){return b(n)(["arrow","border","width"])}),(function(n){return h(n,"right")}),(function(n){return b(n)(["arrow","background"])}),(function(n){return w(n,"bottom")}),(function(n){return b(n)(["arrow","offset"])}),(function(n){return"-"+b(n)(["arrow","size"])}),(function(n){return h(n,"bottom")}),(function(n){return b(n)(["arrow","border","color"])}),(function(n){return b(n)(["arrow","border","width"])}),(function(n){return h(n,"bottom")}),(function(n){return b(n)(["arrow","background"])}),(function(n){return w(n,"left")}),(function(n){return b(n)(["arrow","offset"])}),(function(n){return"-"+b(n)(["arrow","size"])}),(function(n){return h(n,"left")}),(function(n){return b(n)(["arrow","border","color"])}),(function(n){return b(n)(["arrow","border","width"])}),(function(n){return h(n,"left")}),(function(n){return b(n)(["arrow","background"])})),g=i.div(d||(d=a(["\n position: relative;\n ","\n"])),(function(n){return b(n)(["wrapper"])}));exports.Popover=r.memo((function(n){var i=n.position,u=n.content,a=n.autoFlip,f=n.positionFixed,s=n.children,d=n.visible,l=n.onVisibleChange,p=n.withArrow,b=void 0===p||p,w=n.convertStyles,h=n.shouldFitContainer,x=void 0!==h&&h,k=n.autoContentSize,y=void 0!==k&&k,C=n.preventOverflowViewport,E=void 0!==C&&C,O=n.hoverOutTimeout,z=void 0===O?150:O,_=n.trigger,A=void 0===_?"hover":_,F=n.theme,R=n.appearance,S=void 0===R?"default":R,N=n.baseAppearance,j=void 0===N?"default":N,q=n.className,T=n.classNamePrefix,L=n.onOutsideClick,M=r.useRef(),P=r.useRef(),V=r.useRef(),U=r.useRef(),B=r.useState(!1),D=B[0],G=B[1],H=r.useState(null),I=H[0],J=H[1],K=r.useMemo((function(){return E?{preventOverflow:{boundariesElement:"viewport"}}:{}}),[E]),Q=r.useCallback((function(n){l&&l(n)}),[l]),W=r.useCallback((function(n){if(!P.current||!P.current.contains(n.target)){if(n.target===M.current)return G(!1),void Q(!1);if(M.current&&M.current.contains(n.target))return G(!D),void Q(!D);G(!1),Q(!1)}}),[D,Q]),X=r.useCallback((function(n){P.current&&!P.current.contains(n.target)&&L&&L(n)}),[L]),Y=r.useCallback((function(n){n.target!==M.current&&(I&&clearTimeout(I),G(!0),Q(!0))}),[I,Q]),Z=r.useCallback((function(){var n=window.setTimeout((function(){G(!1),Q(!1)}),z);J(n)}),[Q,z]),$=r.useCallback((function(){if(P.current){var n=new e((function(){V.current&&V.current()}));U.current=n,n.observe(P.current)}}),[]),nn=r.useCallback((function(){U.current&&U.current.disconnect()}),[]),rn=void 0===d?D:d,tn={};return"hover"===A&&(tn.onMouseOver=Y,tn.onMouseOut=Z),r.useEffect((function(){y&&(rn?$():nn())}),[y,rn,$,nn]),r.useEffect((function(){return function(){y&&nn()}}),[y,nn]),r.useEffect((function(){return"click"===A?(document.addEventListener("click",W),function(){document.removeEventListener("click",W)}):function(){}}),[A,W]),r.useEffect((function(){return L?(document.addEventListener("mousedown",X),function(){return document.removeEventListener("mousedown",X)}):function(){}}),[X,L]),t.createElement(o,{position:i,autoFlip:a,positionFixed:f,visible:rn,modifiers:K},(function(n){return V.current=n.scheduleUpdate,t.createElement(g,c({className:q&&q+"__wrapper",theme:F,appearance:S,baseAppearance:j,ref:function(r){n.targetRef.current=null==r?void 0:r.firstChild,M.current=r}},tn),s,n.visible&&t.createElement(m,{className:T&&T+"__content",ref:function(r){n.contentRef.current=r,P.current=r},"data-content-position":n.position,shouldFitContainer:x,theme:F,appearance:S,baseAppearance:j,style:w?w(n.popperStyles):n.popperStyles},u,b&&t.createElement(v,{className:T&&T+"__arrow","x-arrow":"",style:n.arrowStyles,"data-arrow-position":n.position,theme:F,appearance:S,baseAppearance:j})))}))})),exports.popoverThemeNamespace="@xcritical\\xc-popover";
//# sourceMappingURL=popover.cjs.production.min.js.map