react-skillbars
Version:
React NPM library containing skill bars with full color customizations and responsive layout.
3 lines (2 loc) • 5.08 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),n=require("react"),r=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,e){var i=function(n){return t.isNumber(n)?n:n.minimum+r*(n.maximum-n.minimum)/e},o=i(n.hue),a=i(n.saturation),l=i(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 e=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===r&&e.firstChild?e.insertBefore(i,e.firstChild):e.appendChild(i),i.styleSheet?i.styleSheet.cssText=t:i.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 e=function(e){var i,o=e.skills,a=e.colors,l=e.barBackground,s=void 0===l?"transparent":l,c=e.offset,d=void 0===c?"25px":c,u=e.height,b=void 0===u?35:u,p=e.symbol,f=void 0===p?"%":p,h=e.symbolColor,g=void 0===h?"white":h,k=e.animationDuration,x=void 0===k?3e3:k,m=e.animationDelay,v=void 0===m?1e3:m,y=e.animationThreshold,w=void 0===y?.8:y,B=n.useRef(null),S=n.useState(!0),C=S[0],j=S[1],T=function(){var t=n.useState(!0),r=t[0],e=t[1];return n.useEffect((function(){e(!1)}),[]),r}();i=function(t,r,e){var i=n.useState(null),o=i[0],a=i[1];return n.useEffect((function(){if(!e&&t.current&&"function"==typeof IntersectionObserver){var n=new IntersectionObserver((function(t){a(t[0])}),r);return n.observe(t.current),function(){a(null),n.disconnect()}}return function(){}}),[t.current,r.threshold,r.root,r.rootMargin]),o}(B,{root:null,rootMargin:d,threshold:w},T),n.useEffect((function(){if(i&&i.isIntersecting){var t=setTimeout((function(){return j(!1)}),v);return function(){return clearTimeout(t)}}}),[i]);var z=n.useCallback((function(t,n){return t.color&&t.color.bar&&r.isString(t.color.bar)?t.color.bar:a&&a.bar?r.isString(a.bar)?a.bar:r.getHSL(a.bar,n,o.length):""}),[]),N=n.useCallback((function(t,n,e){return t.color&&t.color.title&&t.color.title[e]&&r.isString(t.color.title[e])?t.color.title[e]:a&&a.title&&a.title[e]?r.isString(a.title[e])?a.title[e]:r.getHSL(a.title[e],n,o.length):""}),[]);return t.jsx("div",{"data-testid":"skillbar/root",ref:B,children:o.map((function(n,e){return t.jsxs("div",{className:"skillbar","data-testid":"skillbar/container",style:{height:"".concat(r.getHeight(b)),lineHeight:"".concat(r.getHeight(b)),background:s},children:[t.jsx("div",{className:"skillbar-title","data-testid":"skillbar/title",style:{color:"".concat(N(n,e,"text")),background:"".concat(N(n,e,"background"))},children:t.jsx("span",{children:n.type})}),t.jsx("div",{"data-testid":"skillbar/bar",className:"skillbar-bar ".concat(C?"collapsed":""),style:{background:"".concat(z(n,e)),width:"calc((100% - 110px) * (".concat(n.level," * 0.01))"),transition:"width ".concat(x,"ms ease-in-out")}}),t.jsxs("div",{className:"skillbar-percent","data-testid":"skillbar/percent",style:{color:g},children:[n.level,f]})]},n.type)}))})};exports.SkillBar=e,exports.default=e;
//# sourceMappingURL=index.js.map