react-tiny-fab/dist/react-tiny-fab.cjs.production.min.js

A tiny Floating Action Button for React.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,n=require("react"),r=(t=n)&&"object"==typeof t&&"default"in t?t.default:t;function a(){return(a=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(t[a]=r[a])}return t}).apply(this,arguments)}function e(t,n){if(null==t)return{};var r,a,e={},o=Object.keys(t);for(a=0;a<o.length;a++)n.indexOf(r=o[a])>=0||(e[r]=t[r]);return e}!function(t,n){void 0===n&&(n={});var r=n.insertAt;if("undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],e=document.createElement("style");e.type="text/css","top"===r&&a.firstChild?a.insertBefore(e,a.firstChild):a.appendChild(e),e.styleSheet?e.styleSheet.cssText=t:e.appendChild(document.createTextNode(t))}}(".rtf{box-sizing:border-box;margin:25px;position:fixed;white-space:nowrap;z-index:9998;padding-left:0;list-style:none}.rtf.open .rtf--mb>*{transform-origin:center center;transform:rotate(315deg);transition:transform .2s ease-in-out}.rtf.open .rtf--mb>ul{list-style:none;margin:0;padding:0}.rtf.open .rtf--ab__c:hover>span,.rtf.open .rtf--ab__c>span.always-show{transition:opacity .2s ease-in-out;opacity:.9}.rtf.open .rtf--ab__c:first-child{transform:translateY(-60px) scale(1);transition-delay:.03s}.rtf.open .rtf--ab__c:first-child.top{transform:translateY(60px) scale(1)}.rtf.open .rtf--ab__c:nth-child(2){transform:translateY(-120px) scale(1);transition-delay:.09s}.rtf.open .rtf--ab__c:nth-child(2).top{transform:translateY(120px) scale(1)}.rtf.open .rtf--ab__c:nth-child(3){transform:translateY(-180px) scale(1);transition-delay:.12s}.rtf.open .rtf--ab__c:nth-child(3).top{transform:translateY(180px) scale(1)}.rtf.open .rtf--ab__c:nth-child(4){transform:translateY(-240px) scale(1);transition-delay:.15s}.rtf.open .rtf--ab__c:nth-child(4).top{transform:translateY(240px) scale(1)}.rtf.open .rtf--ab__c:nth-child(5){transform:translateY(-300px) scale(1);transition-delay:.18s}.rtf.open .rtf--ab__c:nth-child(5).top{transform:translateY(300px) scale(1)}.rtf.open .rtf--ab__c:nth-child(6){transform:translateY(-360px) scale(1);transition-delay:.21s}.rtf.open .rtf--ab__c:nth-child(6).top{transform:translateY(360px) scale(1)}.rtf--mb__c{padding:25px;margin:-25px}.rtf--mb__c :last-child{margin-bottom:0}.rtf--mb__c:hover>span,.rtf--mb__c>span.always-show{transition:opacity .2s ease-in-out;opacity:.9}.rtf--mb__c>span{opacity:0;transition:opacity .2s ease-in-out;position:absolute;top:50%;transform:translateY(-50%);margin-right:6px;margin-left:4px;background:rgba(0,0,0,.75);padding:2px 4px;border-radius:2px;color:#fff;font-size:13px;box-shadow:0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28)}.rtf--mb__c>span.right{right:100%}.rtf--mb{height:56px;width:56px;z-index:9999;background-color:#666;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:700;color:#f1f1f1;font-size:18px}.rtf--ab__c,.rtf--mb>*{transition:transform .2s ease-in-out}.rtf--ab__c{display:block;position:absolute;top:0;right:1px;padding:10px 0;margin:-10px 0}.rtf--ab__c>span{opacity:0;transition:opacity .2s ease-in-out;position:absolute;top:50%;transform:translateY(-50%);margin-right:6px;background:rgba(0,0,0,.75);padding:2px 4px;border-radius:2px;color:#fff;font-size:13px;box-shadow:0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28)}.rtf--ab__c>span.right{right:100%}.rtf--ab__c:first-child{transform:translateY(-60px) scale(0);transition-delay:.21s}.rtf--ab__c:first-child.top{transform:translateY(60px) scale(0)}.rtf--ab__c:nth-child(2){transform:translateY(-120px) scale(0);transition-delay:.18s}.rtf--ab__c:nth-child(2).top{transform:translateY(120px) scale(0)}.rtf--ab__c:nth-child(3){transform:translateY(-180px) scale(0);transition-delay:.15s}.rtf--ab__c:nth-child(3).top{transform:translateY(180px) scale(0)}.rtf--ab__c:nth-child(4){transform:translateY(-240px) scale(0);transition-delay:.12s}.rtf--ab__c:nth-child(4).top{transform:translateY(240px) scale(0)}.rtf--ab__c:nth-child(5){transform:translateY(-300px) scale(0);transition-delay:.09s}.rtf--ab__c:nth-child(5).top{transform:translateY(300px) scale(0)}.rtf--ab__c:nth-child(6){transform:translateY(-360px) scale(0);transition-delay:.03s}.rtf--ab__c:nth-child(6).top{transform:translateY(360px) scale(0)}.rtf--ab{height:48px;width:48px;background-color:#aaa;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:700;color:#f1f1f1;margin-right:4px;font-size:16px;z-index:10000}");var o=function(t){var n=t.children,a=e(t,["children"]);return r.createElement("button",Object.assign({type:"button",className:"rtf--mb"},a),n)},i={bottom:24,right:24};exports.Action=function(t){var n=t.children,a=e(t,["children"]);return r.createElement("button",Object.assign({type:"button"},a,{className:"rtf--ab"}),n)},exports.Fab=function(t){var s=t.event,l=void 0===s?"hover":s,c=t.style,p=void 0===c?i:c,f=t.alwaysShowTitle,d=void 0!==f&&f,h=t.children,b=t.icon,u=t.mainButtonStyles,m=t.onClick,x=t.text,_=e(t,["event","style","alwaysShowTitle","children","icon","mainButtonStyles","onClick","text"]),g=n.useState(!1),y=g[0],w=g[1],v=d||!y,Y="ontouchstart"in window?"click":l,k=function(){return w(!0)},E=function(){return w(!1)};return r.createElement("ul",Object.assign({onMouseEnter:function(){return"hover"===Y&&k()},onMouseLeave:function(){return"hover"===Y&&E()},className:"rtf "+(y?"open":"closed"),"data-testid":"fab",style:p},_),r.createElement("li",{className:"rtf--mb__c"},r.createElement(o,{onClick:function(t){return m?m(t):(t.persist(),"click"===Y?y?E():k():null)},style:u,"data-testid":"main-button",role:"button","aria-label":"Floating menu",tabIndex:0},b),x&&r.createElement("span",{className:("right"in p?"right":"")+" "+(d?"always-show":""),"aria-hidden":v},x),r.createElement("ul",null,r.Children.map(h,(function(t,n){return r.isValidElement(t)?r.createElement("li",{className:"rtf--ab__c "+("top"in p?"top":"")},r.cloneElement(t,a({"data-testid":"action-button-"+n,"aria-label":t.props.text||"Menu button "+(n+1),"aria-hidden":v,tabIndex:y?0:-1},t.props,{onClick:function(n){t.props.onClick&&function(t,n){t.persist(),w(!1),setTimeout((function(){n(t)}),1)}(n,t.props.onClick)}})),t.props.text&&r.createElement("span",{className:("right"in p?"right":"")+" "+(d?"always-show":""),"aria-hidden":v},t.props.text)):null})))))},exports.MB=o;
//# sourceMappingURL=react-tiny-fab.cjs.production.min.js.map