primereact
Version:
PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime
2 lines (1 loc) • 15.4 kB
JavaScript
this.primereact=this.primereact||{},this.primereact.speeddial=function(e,n,t,r,i,a,o,l,c,s){"use strict";function u(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var d=u(n);function p(){return p=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},p.apply(null,arguments)}function f(e){return f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},f(e)}function m(e,n){if("object"!=f(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!=f(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}function b(e){var n=m(e,"string");return"symbol"==f(n)?n:n+""}function y(e,n,t){return(n=b(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function v(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=Array(n);t<n;t++)r[t]=e[t];return r}function h(e){if(Array.isArray(e))return v(e)}function g(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function w(e,n){if(e){if("string"==typeof e)return v(e,n);var t={}.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?v(e,n):void 0}}function S(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function D(e){return h(e)||g(e)||w(e)||S()}function I(e){if(Array.isArray(e))return e}function O(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,i,a,o,l=[],c=!0,s=!1;try{if(a=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;c=!1}else for(;!(c=(r=a.call(t)).done)&&(l.push(r.value),l.length!==n);c=!0);}catch(e){s=!0,i=e}finally{try{if(!c&&null!=t.return&&(o=t.return(),Object(o)!==o))return}finally{if(s)throw i}}return l}}function N(){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 k(e,n){return I(e)||O(e,n)||w(e,n)||N()}var x=i.ComponentBase.extend({defaultProps:{__TYPE:"SpeedDial",id:null,model:null,visible:!1,style:null,className:null,direction:"up",transitionDelay:30,type:"linear",radius:0,mask:!1,disabled:!1,hideOnClickOutside:!0,buttonStyle:null,buttonClassName:null,buttonTemplate:null,"aria-label":null,ariaLabelledby:null,maskStyle:null,maskClassName:null,showIcon:null,hideIcon:null,rotateAnimation:!0,onVisibleChange:null,onClick:null,onShow:null,onHide:null,children:void 0},css:{classes:{root:function(e){var n=e.props,t=e.visible;return s.classNames("p-speeddial p-component p-speeddial-".concat(n.type),y(y(y({},"p-speeddial-direction-".concat(n.direction),"circle"!==n.type),"p-speeddial-opened",t),"p-disabled",n.disabled))},button:function(e){var n=e.props;return s.classNames("p-speeddial-button p-button-rounded",{"p-speeddial-rotate":n.rotateAnimation&&!n.hideIcon})},mask:function(e){return s.classNames("p-speeddial-mask",{"p-speeddial-mask-visible":e.visible})},action:function(e){return s.classNames("p-speeddial-action",{"p-disabled":e.disabled})},actionIcon:function(e){return s.classNames("p-speeddial-action-icon",e._icon)},menu:"p-speeddial-list",menuitem:function(e){return s.classNames("p-speeddial-item",{"p-focus":e.active})}},styles:"\n@layer primereact {\n .p-speeddial {\n position: absolute;\n display: flex;\n z-index: 1;\n }\n\n .p-speeddial-list {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: top 0s linear 0.2s;\n pointer-events: none;\n }\n\n .p-speeddial-item {\n transform: scale(0);\n opacity: 0;\n transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;\n will-change: transform;\n }\n\n .p-speeddial-action {\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n position: relative;\n overflow: hidden;\n text-decoration: none;\n }\n\n .p-speeddial-action-icon {\n pointer-events: none;\n }\n\n .p-speeddial-circle .p-speeddial-item,\n .p-speeddial-semi-circle .p-speeddial-item,\n .p-speeddial-quarter-circle .p-speeddial-item {\n position: absolute;\n }\n\n .p-speeddial-rotate {\n transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n will-change: transform;\n }\n\n .p-speeddial-mask {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);\n }\n\n .p-speeddial-mask-visible {\n pointer-events: none;\n opacity: 1;\n transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n }\n\n .p-speeddial-opened .p-speeddial-list {\n pointer-events: auto;\n }\n\n .p-speeddial-opened .p-speeddial-item {\n transform: scale(1);\n opacity: 1;\n }\n\n .p-speeddial-opened .p-speeddial-rotate {\n transform: rotate(45deg);\n }\n}\n",inlineStyles:{root:function(e){var n=e.props;return{alignItems:"up"===n.direction||"down"===n.direction?"center":"",justifyContent:"left"===n.direction||"right"===n.direction?"center":"",flexDirection:"up"===n.direction?"column-reverse":"down"===n.direction?"column":"left"===n.direction?"row-reverse":"right"===n.direction?"row":null}},menu:function(e){var n=e.props;return{flexDirection:"up"===n.direction?"column-reverse":"down"===n.direction?"column":"left"===n.direction?"row-reverse":"right"===n.direction?"row":null}}}}});function E(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function C(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?E(Object(t),!0).forEach((function(n){y(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):E(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}var j=d.memo(d.forwardRef((function(e,n){var u=k(d.useState(!1),2),f=u[0],m=u[1],b=k(d.useState(null),2),v=b[0],h=b[1],g=k(d.useState(!1),2),w=g[0],S=g[1],I=k(d.useState(-1),2),O=I[0],N=I[1],E=d.useRef(!1),j=d.useRef(null),P=d.useRef(null),H=a.useMergeProps(),A=d.useContext(t.PrimeReactContext),M=x.getProps(e,A),_=M.onVisibleChange?M.visible:f,R=a.useDisplayOrder("speed-dial",_),U={props:M,state:{visible:_}},T=x.setMetaData(U),L=T.ptm,z=T.cx,V=T.sx;i.useHandleStyle(x.css.styles,T.isUnstyled,{name:"speeddial"}),a.useGlobalOnEscapeKey({callback:function(){G()},when:_&&R,priority:[a.ESC_KEY_HANDLING_PRIORITIES.SPEED_DIAL,R]});var J=k(a.useEventListener({type:"click",listener:function(e){!E.current&&me(e)&&G(),E.current=!1},when:f}),2),K=J[0],X=J[1],q=function(){M.onVisibleChange?M.onVisibleChange(!0):m(!0),M.onShow&&M.onShow()},B=function(){S(!0)},F=function(){S(!1),N(-1)},G=function(){M.onVisibleChange?M.onVisibleChange(!1):m(!1),M.onHide&&M.onHide()},W=function(e){_?G():q(),M.onClick&&M.onClick(e),E.current=!0},Y=function(e,n){n.command&&n.command({originalEvent:e,item:n}),G(),E.current=!0,e.preventDefault()},$=function(e){switch(e.code){case"ArrowDown":ie(e);break;case"ArrowUp":re(e);break;case"ArrowLeft":ae(e);break;case"ArrowRight":oe(e);break;case"Enter":case"NumpadEnter":case"Space":ne(e);break;case"Escape":te();break;case"Home":ce(e);break;case"End":le(e)}},Q=function(e){switch(e.code){case"ArrowDown":case"ArrowLeft":ee(e);break;case"ArrowUp":case"ArrowRight":Z(e);break;case"Escape":te()}},Z=function(e){S(!0),s.DomHandler.focus(P.current),q(),ue(e),e.preventDefault()},ee=function(e){S(!0),s.DomHandler.focus(P.current),q(),se(e),e.preventDefault()},ne=function(e){var n=D(s.DomHandler.find(j.current,'[data-pc-section="menuitem"]')).findIndex((function(e){return e.id===O}));Y(e,M.model[n]),F();var t=s.DomHandler.findSingle(j.current,"button");t&&s.DomHandler.focus(t)},te=function(){G();var e=s.DomHandler.findSingle(j.current,"button");e&&s.DomHandler.focus(e)},re=function(e){var n=M.direction;"up"===n?se(e):"down"===n?ue(e):se(e)},ie=function(e){var n=M.direction;"up"===n?ue(e):"down"===n?se(e):ue(e)},ae=function(e){var n=M.direction;["left","up-right","down-left"].includes(n)?se(e):(["right","up-left","down-right"].includes(n),ue(e))},oe=function(e){var n=M.direction;["left","up-right","down-left"].includes(n)?ue(e):(["right","up-left","down-right"].includes(n),se(e))},le=function(e){e.preventDefault(),N(-1),ue(e,-1)},ce=function(e){e.preventDefault(),N(-1),se(e,-1)},se=function(e){var n=fe((arguments.length>1&&void 0!==arguments[1]?arguments[1]:null)||O);de(n),e.preventDefault()},ue=function(e){var n=pe((arguments.length>1&&void 0!==arguments[1]?arguments[1]:null)||O);de(n),e.preventDefault()},de=function(e){var n=D(s.DomHandler.find(j.current,'[data-pc-section="menuitem"]')).filter((function(e){return!s.DomHandler.hasClass(s.DomHandler.findSingle(e,"a"),"p-disabled")}));n[e]&&N(n[e].getAttribute("id"))},pe=function(e){var n=D(s.DomHandler.find(j.current,'[data-pc-section="menuitem"]')).filter((function(e){return!s.DomHandler.hasClass(s.DomHandler.findSingle(e,"a"),"p-disabled")})),t=-1===e?n[n.length-1].id:e,r=n.findIndex((function(e){return e.getAttribute("id")===t}));return r=-1===e?n.length-1:r-1},fe=function(e){var n=D(s.DomHandler.find(j.current,'[data-pc-section="menuitem"]')).filter((function(e){return!s.DomHandler.hasClass(s.DomHandler.findSingle(e,"a"),"p-disabled")})),t=-1===e?n[0].id:e,r=n.findIndex((function(e){return e.getAttribute("id")===t}));return r=-1===e?0:r+1},me=function(e){return j.current&&!(j.current.isSameNode(e.target)||j.current.contains(e.target))},be=function(e){return(_?e:M.model.length-e-1)*M.transitionDelay},ye=function(e){var n=M.type;if("linear"!==n){var t=M.model.length,r=M.radius||20*t;if("circle"===n){var i=2*Math.PI/t;return{left:"calc(".concat(r*Math.cos(i*e),"px + var(--item-diff-x, 0px))"),top:"calc(".concat(r*Math.sin(i*e),"px + var(--item-diff-y, 0px))")}}if("semi-circle"===n){var a=M.direction,o=Math.PI/(t-1),l="calc(".concat(r*Math.cos(o*e),"px + var(--item-diff-x, 0px))"),c="calc(".concat(r*Math.sin(o*e),"px + var(--item-diff-y, 0px))");if("up"===a)return{left:l,bottom:c};if("down"===a)return{left:l,top:c};if("left"===a)return{right:c,top:l};if("right"===a)return{left:c,top:l}}else if("quarter-circle"===n){var s=M.direction,u=Math.PI/(2*(t-1)),d="calc(".concat(r*Math.cos(u*e),"px + var(--item-diff-x, 0px))"),p="calc(".concat(r*Math.sin(u*e),"px + var(--item-diff-y, 0px))");if("up-left"===s)return{right:d,bottom:p};if("up-right"===s)return{left:d,bottom:p};if("down-left"===s)return{right:p,top:d};if("down-right"===s)return{left:p,top:d}}}return{}},ve=function(e){var n=be(e),t=ye(e);return C({transitionDelay:"".concat(n,"ms")},t)};a.useMountEffect((function(){if("linear"!==M.type){var e=s.DomHandler.findSingle(j.current,".p-speeddial-button"),n=s.DomHandler.findSingle(P.current,".p-speeddial-item");if(e&&n){var t=Math.abs(e.offsetWidth-n.offsetWidth),r=Math.abs(e.offsetHeight-n.offsetHeight);P.current.style.setProperty("--item-diff-x","".concat(t/2,"px")),P.current.style.setProperty("--item-diff-y","".concat(r/2,"px"))}}})),a.useUpdateEffect((function(){return f&&M.hideOnClickOutside&&K(),function(){M.hideOnClickOutside&&X()}}),[f]),d.useImperativeHandle(n,(function(){return{props:M,show:q,hide:G,getElement:function(){return j.current}}}));var he=function(e,n){if(!1===e.visible)return null;var t=e.disabled,r=e.icon,i=e.label,a=e.template,o=e.url,l=e.target,u=e.className,f=e.style,m=s.classNames("p-speeddial-action",{"p-disabled":t}),b=s.classNames("p-speeddial-action-icon",r),y=H({className:z("actionIcon")},L("actionIcon")),h=H({href:o||"#",role:"menuitem",className:s.classNames(u,z("action",{disabled:t})),"aria-label":e.label,style:f,target:l,tabIndex:"-1","data-pr-tooltip":i,onClick:function(n){return Y(n,e)}},L("action")),g=s.IconUtils.getJSXIcon(r,C({},y),{props:M}),w=d.createElement("a",h,g,d.createElement(c.Ripple,null));a&&(w=s.ObjectUtils.getJSXElement(a,e,{onClick:function(n){return Y(n,e)},className:m,iconClassName:b,element:w,props:M,visible:_}));var S,D=H({id:"".concat(v,"_").concat(n),className:z("menuitem",{active:(S="".concat(v,"_").concat(n),O===S)}),style:ve(n),role:"menuitem"},L("menuitem"));return d.createElement("li",p({},D,{key:"".concat(v,"_").concat(n)}),w)},ge=function(){for(var e="",n=0;n<M.model.length;n++)e+="".concat(v,"_").concat(n," ");return e.trim()};d.useEffect((function(){h(M.id||s.UniqueComponentId())}),[M.id]);var we,Se,De,Ie,Oe,Ne,ke,xe,Ee,Ce=(we=!_&&!!M.showIcon||!M.hideIcon,Se=_&&!!M.hideIcon,De=s.classNames("p-speeddial-button p-button-rounded",{"p-speeddial-rotate":M.rotateAnimation&&!M.hideIcon},M.buttonClassName),Ie=s.classNames(y(y({},"".concat(M.showIcon),!_&&!!M.showIcon||!M.hideIcon),"".concat(M.hideIcon),_&&!!M.hideIcon)),Oe=s.IconUtils.getJSXIcon(we?M.showIcon||d.createElement(l.PlusIcon,null):Se?M.hideIcon||d.createElement(o.MinusIcon,null):null,void 0,{props:M,visible:_}),Ne=H({type:"button",style:M.buttonStyle,className:s.classNames(M.buttonClassName,z("button")),icon:Oe,onClick:function(e){return W(e)},disabled:M.disabled,onKeyDown:Q,"aria-label":M["aria-label"],"aria-expanded":_,"aria-haspopup":!0,"aria-controls":ge,"aria-labelledby":M.ariaLabelledby,pt:L("button"),unstyled:M.unstyled,__parentMetadata:{parent:U}}),ke=d.createElement(r.Button,Ne),M.buttonTemplate?s.ObjectUtils.getJSXElement(M.buttonTemplate,{onClick:W,className:De,iconClassName:Ie,element:ke,props:M,visible:_}):ke),je=(xe=M.model?M.model.map(he):null,Ee=H({ref:P,className:z("menu"),style:V("menu"),role:"menu",tabIndex:"-1",onFocus:B,onKeyDown:$,onBlur:F,"aria-activedescendant":w?-1!==O?O:null:void 0},L("menu")),d.createElement("ul",Ee,xe)),Pe=function(){if(M.mask){var e=H({className:s.classNames(M.maskClassName,z("mask",{visible:_})),style:M.maskStyle},L("mask"));return d.createElement("div",e)}return null}(),He=H({className:s.classNames(M.className,z("root",{visible:_})),style:C(C({},M.style),V("root")),id:v},x.getOtherProps(M),L("root"));return d.createElement(d.Fragment,null,d.createElement("div",p({ref:j},He),Ce,je),Pe)})));return j.displayName="SpeedDial",e.SpeedDial=j,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.button,primereact.componentbase,primereact.hooks,primereact.icons.minus,primereact.icons.plus,primereact.ripple,primereact.utils);