react-skillbars
Version:
React NPM library containing skill bars with full color customizations and responsive layout.
3 lines (2 loc) • 4.97 kB
JavaScript
import{jsx as t,jsxs as n}from"react/jsx-runtime";import{useState as r,useEffect as i,useRef as e,useCallback as o}from"react";var a=function(){function t(){}return t.isString=function(t){return"[object String]"===Object.prototype.toString.call(t)},t.isNumber=function(t){return"[object Number]"===Object.prototype.toString.call(t)},t.getHSL=function(n,r,i){var e=function(n){return t.isNumber(n)?n:n.minimum+r*(n.maximum-n.minimum)/i},o=e(n.hue),a=e(n.saturation),l=e(n.level);return"hsl(".concat(o,", ").concat(a,"%, ").concat(l,"%)")},t.getHeight=function(n){return t.isString(n)?n:"".concat(n,"px")},t}();!function(t,n){void 0===n&&(n={});var r=n.insertAt;if(t&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],e=document.createElement("style");e.type="text/css","top"===r&&i.firstChild?i.insertBefore(e,i.firstChild):i.appendChild(e),e.styleSheet?e.styleSheet.cssText=t:e.appendChild(document.createTextNode(t))}}(":root {\n --skillBarTextColor: #ffffff;\n --skillBarBgColor: #eee;\n --skillBarTitleBgColor: #d35400;\n --skillBarBg: #e67e22;\n}\n\n.skillbar {\n position:relative;\n display:block;\n margin-bottom:15px;\n width:100%;\n background: var(--skillBarBgColor);\n border-radius: 3px;\n -moz-border-radius:3px;\n -webkit-border-radius:3px;\n -webkit-transition:0.4s linear;\n -moz-transition:0.4s linear;\n -ms-transition:0.4s linear;\n -o-transition:0.4s linear;\n transition:0.4s linear;\n -webkit-transition-property:width, background-color;\n -moz-transition-property:width, background-color;\n -o-transition-property:width, background-color;\n transition-property:width, background-color;\n}\n\n.skillbar-title {\n position:absolute;\n top:0;\n left:0;\n width:110px;\n font-weight:bold;\n font-size:13px;\n color: var(--skillBarTextColor);\n background: var(--skillBarTitleBgColor);\n -webkit-border-radius:3px 0 0 4px;\n -moz-border-radius:3px 0 0 3px;\n border-radius:3px 0 0 3px;\n height:inherit;\n}\n\n.skillbar-title span {\n display:block;\n background:rgba(0, 0, 0, 0.1);\n padding:0 20px;\n height:inherit;\n line-height:inherit;\n -webkit-border-top-left-radius:3px;\n -webkit-border-bottom-left-radius:3px;\n -moz-border-radius-topleft:3px;\n -moz-border-radius-bottomleft:3px;\n border-top-left-radius:3px;\n border-bottom-left-radius:3px;\n}\n\n.skillbar-bar {\n height:inherit;\n position:absolute;\n left:110px;\n background: var(--skillBarBg);\n border-radius: 0 3px 3px 0;\n -moz-border-radius: 0 3px 3px 0;\n -webkit-border-radius: 0 3px 3px 0;\n}\n\n.skillbar-percent {\n position:absolute;\n right:10px;\n top:0;\n font-size:11px;\n line-height:inherit;\n color: var(--skillBarTextColor);\n}\n\n.collapsed {\n width: 0% !important;\n}\n");var l=function(l){var s,c=l.skills,d=l.colors,u=l.barBackground,b=void 0===u?"transparent":u,p=l.offset,h=void 0===p?"25px":p,g=l.height,f=void 0===g?35:g,m=l.symbol,k=void 0===m?"%":m,x=l.symbolColor,v=void 0===x?"white":x,y=l.animationDuration,w=void 0===y?3e3:y,B=l.animationDelay,S=void 0===B?1e3:B,C=l.animationThreshold,T=void 0===C?.8:C,z=e(null),N=r(!0),H=N[0],j=N[1],O=function(){var t=r(!0),n=t[0],e=t[1];return i((function(){e(!1)}),[]),n}();s=function(t,n,e){var o=r(null),a=o[0],l=o[1];return i((function(){if(!e&&t.current&&"function"==typeof IntersectionObserver){var r=new IntersectionObserver((function(t){l(t[0])}),n);return r.observe(t.current),function(){l(null),r.disconnect()}}return function(){}}),[t.current,n.threshold,n.root,n.rootMargin]),a}(z,{root:null,rootMargin:h,threshold:T},O),i((function(){if(s&&s.isIntersecting){var t=setTimeout((function(){return j(!1)}),S);return function(){return clearTimeout(t)}}}),[s]);var I=o((function(t,n){return t.color&&t.color.bar&&a.isString(t.color.bar)?t.color.bar:d&&d.bar?a.isString(d.bar)?d.bar:a.getHSL(d.bar,n,c.length):""}),[]),L=o((function(t,n,r){return t.color&&t.color.title&&t.color.title[r]&&a.isString(t.color.title[r])?t.color.title[r]:d&&d.title&&d.title[r]?a.isString(d.title[r])?d.title[r]:a.getHSL(d.title[r],n,c.length):""}),[]);return t("div",{"data-testid":"skillbar/root",ref:z,children:c.map((function(r,i){return n("div",{className:"skillbar","data-testid":"skillbar/container",style:{height:"".concat(a.getHeight(f)),lineHeight:"".concat(a.getHeight(f)),background:b},children:[t("div",{className:"skillbar-title","data-testid":"skillbar/title",style:{color:"".concat(L(r,i,"text")),background:"".concat(L(r,i,"background"))},children:t("span",{children:r.type})}),t("div",{"data-testid":"skillbar/bar",className:"skillbar-bar ".concat(H?"collapsed":""),style:{background:"".concat(I(r,i)),width:"calc((100% - 110px) * (".concat(r.level," * 0.01))"),transition:"width ".concat(w,"ms ease-in-out")}}),n("div",{className:"skillbar-percent","data-testid":"skillbar/percent",style:{color:v},children:[r.level,k]})]},r.type)}))})};export{l as SkillBar,l as default};
//# sourceMappingURL=index.js.map