react-win7-progressbar
Version:
A Windows 7 styled ProgressBar component for React with auto-fill.
2 lines (1 loc) • 5.89 kB
JavaScript
import n,{useState as t,useEffect as e}from"react";import r,{keyframes as a}from"styled-components";function o(n,t){return Object.defineProperty?Object.defineProperty(n,"raw",{value:t}):n.raw=t,n}"function"==typeof SuppressedError&&SuppressedError;var i,f,p,d,l,s,c=a(i||(i=o(["\n 0% { left: -40%; }\n 100% { left: 100%; }\n"],["\n 0% { left: -40%; }\n 100% { left: 100%; }\n"]))),u=r.div(f||(f=o(["\n width: ",";\n height: ","px;\n border: 1px solid #8e8f8f;\n border-radius: 3px;\n box-shadow:\n inset 1px 1px 0 #fff8,\n inset -1px -1px 0 #0002;\n background:\n radial-gradient(circle at 0 50%, #0000001f 10px, transparent 30px),\n radial-gradient(circle at 100% 50%, #0000001f 10px, transparent 30px),\n linear-gradient(\n to bottom,\n #f3f3f3af,\n #fcfcfcaf 3px,\n #dbdbdbaf 6px,\n #cacacaaf 6px,\n #d5d5d5af\n ),\n #ddd;\n overflow: hidden;\n position: relative;\n"],["\n width: ",";\n height: ","px;\n border: 1px solid #8e8f8f;\n border-radius: 3px;\n box-shadow:\n inset 1px 1px 0 #fff8,\n inset -1px -1px 0 #0002;\n background:\n radial-gradient(circle at 0 50%, #0000001f 10px, transparent 30px),\n radial-gradient(circle at 100% 50%, #0000001f 10px, transparent 30px),\n linear-gradient(\n to bottom,\n #f3f3f3af,\n #fcfcfcaf 3px,\n #dbdbdbaf 6px,\n #cacacaaf 6px,\n #d5d5d5af\n ),\n #ddd;\n overflow: hidden;\n position: relative;\n"])),function(n){var t=n.width;return"number"==typeof t?"".concat(t,"px"):null!=t?t:"300px"},function(n){var t=n.height;return null!=t?t:15}),x=r.div(p||(p=o(["\n height: 100%;\n width: ","%;\n background-color: ",";\n box-shadow: inset 0 0 0 1px #fff4;\n position: relative;\n transition: width 0.3s linear;\n background-image:\n linear-gradient(\n to bottom,\n #f3f3f3af,\n #fcfcfcaf 3px,\n #dbdbdbaf 6px,\n transparent 6px\n ),\n radial-gradient(circle at 0 50%, #0000002f 10px, transparent 30px),\n radial-gradient(circle at 100% 50%, #0000002f 10px, transparent 30px),\n linear-gradient(to bottom, transparent 65%, #ffffff55),\n linear-gradient(to bottom, transparent 6px, #cacaca33 6px, #d5d5d533);\n"],["\n height: 100%;\n width: ","%;\n background-color: ",";\n box-shadow: inset 0 0 0 1px #fff4;\n position: relative;\n transition: width 0.3s linear;\n background-image:\n linear-gradient(\n to bottom,\n #f3f3f3af,\n #fcfcfcaf 3px,\n #dbdbdbaf 6px,\n transparent 6px\n ),\n radial-gradient(circle at 0 50%, #0000002f 10px, transparent 30px),\n radial-gradient(circle at 100% 50%, #0000002f 10px, transparent 30px),\n linear-gradient(to bottom, transparent 65%, #ffffff55),\n linear-gradient(to bottom, transparent 6px, #cacaca33 6px, #d5d5d533);\n"])),function(n){var t=n.value;return null!=t?t:0},function(n){var t=n.color,e=n.paused;return n.error?"#ef0000":e?"#e6df1b":null!=t?t:"#0bd82c"}),b=r.div(d||(d=o(["\n position: absolute;\n top: 0;\n left: -40%;\n width: 40%;\n height: 100%;\n background: linear-gradient(\n to right,\n transparent,\n ","80,\n transparent\n );\n animation: "," 1.2s linear infinite;\n"],["\n position: absolute;\n top: 0;\n left: -40%;\n width: 40%;\n height: 100%;\n background: linear-gradient(\n to right,\n transparent,\n ","80,\n transparent\n );\n animation: "," 1.2s linear infinite;\n"])),function(n){var t=n.color;return null!=t?t:"#0bd82c"},c),g=r.div(l||(l=o(["\n position: absolute;\n top: 0;\n left: -40%;\n width: 40%;\n height: 100%;\n background: linear-gradient(to right, transparent, #ffffff80, transparent);\n animation: "," 1.5s linear infinite;\n"],["\n position: absolute;\n top: 0;\n left: -40%;\n width: 40%;\n height: 100%;\n background: linear-gradient(to right, transparent, #ffffff80, transparent);\n animation: "," 1.5s linear infinite;\n"])),c),h=r.span(s||(s=o(['\n position: absolute;\n font:\n 9pt "Segoe UI",\n "SegoeUI",\n "Noto Sans",\n sans-serif;\n color: #000;\n pointer-events: none;\n\n ',"\n"],['\n position: absolute;\n font:\n 9pt "Segoe UI",\n "SegoeUI",\n "Noto Sans",\n sans-serif;\n color: #000;\n pointer-events: none;\n\n ',"\n"])),function(n){switch(n.position){case"topLeft":return"top: -20px; left: 0;";case"topCenter":return"top: -20px; left: 50%; transform: translateX(-50%);";case"topRight":return"top: -20px; right: 0;";case"bottomLeft":return"bottom: -20px; left: 0;";case"bottomCenter":return"bottom: -20px; left: 50%; transform: translateX(-50%);";case"bottomRight":return"bottom: -20px; right: 0;";case"centerLeft":return"top: 50%; left: 0; transform: translateY(-50%);";case"centerRight":return"top: 50%; right: 0; transform: translateY(-50%);";default:return"top: 50%; left: 50%; transform: translate(-50%, -50%);"}}),m=function(r){var a=r.value,o=r.min,i=void 0===o?0:o,f=r.max,p=void 0===f?100:f,d=r.width,l=r.height,s=r.color,c=r.variant,m=void 0===c?"default":c,v=r.auto,w=void 0!==v&&v,k=r.speed,S=void 0===k?5:k,y=r.labelPosition,E=void 0===y?"center":y,M=r.label,I=r.displayValue,U=void 0!==I&&I,q=r.onComplete,A=t(i),C=A[0],F=A[1];e(function(){if(w&&null==a){var n,t=null,e=function(r){null===t&&(t=r);var a=r-t,o=Math.min(a/(1e3*S)*(p-i)+i,p);F(o),o<p?n=requestAnimationFrame(e):q&&q()};return n=requestAnimationFrame(e),function(){return cancelAnimationFrame(n)}}},[w,S,a,i,p,q]);var L=null!=a?Math.min(Math.max(a,i),p):C,P=(L-i)/(p-i)*100,R="paused"===m,j="error"===m,N="animate"===m,O="marquee"===m,X=(null!=P||R)&&!O,Y=O&&!R;return n.createElement(u,{width:d,height:l,role:"progressbar"},X&&n.createElement(x,{value:P,color:s,paused:R,error:j}),Y&&n.createElement(b,{color:s}),N&&n.createElement(g,null),(M||U)&&n.createElement(h,{position:E},M?"function"==typeof M?M(Math.round(L)):M:Math.round(L)))};export{m as default};