1#@!#!123s

: / usr / share / grafana / public / build /
Filename : BenchmarksPage.b45f4aa6b6c2b16e9eeb.js
back
"use strict";(self.webpackChunkgrafana=self.webpackChunkgrafana||[]).push([[4908],{6625:(B,m,o)=>{o.r(m),o.d(m,{BenchmarksPage:()=>j,default:()=>T});var c=o(27702),u=o(64022),i=o(42844),n=o(76808),f=o(89898),h=o.n(f),l=o(66310),p=o(66670);function v(){return console.log("process.env.NODE_ENV","production"),(0,n.jsx)(u.wc,null,(0,n.jsx)("div",null,"Emotion performance tests"),(0,n.jsx)(a,{name:"No styles",Component:E}),(0,n.jsx)(a,{name:"inline emotion/css",Component:z}),(0,n.jsx)(a,{name:"useStyles no cx",Component:C}),(0,n.jsx)(a,{name:"useStyles with conditional cx styles",Component:N}),(0,n.jsx)(a,{name:"useStyles with css prop",Component:b}),(0,n.jsx)(a,{name:"useStyles with conditional css prop",Component:w}),(0,n.jsx)(a,{name:"useStyles with conditional classnames",Component:W}))}const a=({name:s,Component:e})=>{const[t,d]=(0,c.useState)(0);return(0,n.jsx)("div",null,(0,n.jsx)(p.zx,{onClick:()=>d(t>2?0:t+1)},s),t>0&&(0,n.jsx)(P,{id:s},g(e)))};a.displayName="TestScenario";function g(s){const e=[];for(let t=0;t<5e3;t++)e.push((0,n.jsx)(s,{index:t,key:t.toString()}));return(0,n.jsx)("div",{style:{display:"flex",flexWrap:"wrap"}},e)}function C({index:s}){const e=(0,l.wW)(r);return(0,n.jsx)("div",{className:e.main},(0,n.jsx)("div",{className:e.child},s))}function N({index:s}){const e=(0,l.wW)(r),t=(0,i.cx)(e.main,{[e.large]:s>10,[e.disabed]:s%10===0});return(0,n.jsx)("div",{className:t},(0,n.jsx)("div",{className:e.child},s))}function W({index:s}){const e=(0,l.wW)(r),t=h()(e.main,{[e.large]:s>10,[e.disabed]:s%10===0});return(0,n.jsx)("div",{className:t},(0,n.jsx)("div",{className:e.child},s))}function b({index:s}){const e=(0,l.wW)(x);return(0,n.jsx)("div",{css:e.main},(0,n.jsx)("div",{css:e.child},s))}function w({index:s}){const e=(0,l.wW)(x),t=[e.main,s>10&&e.large,s%10===0&&e.disabed];return(0,n.jsx)("div",{css:t},(0,n.jsx)("div",{css:e.child},s))}function z({index:s}){const e=(0,l.l4)(),t=r(e);return(0,n.jsx)("div",{className:t.main},(0,n.jsx)("div",{className:t.child},s))}function E({index:s}){return(0,n.jsx)("div",{className:"no-styles-main"},(0,n.jsx)("div",{className:"no-styles-child"},s))}function P({children:s,id:e}){const t=(d,O,U,k,D,M)=>{console.log("Profile "+d,U)};return(0,n.jsx)(c.Profiler,{id:e,onRender:t},s)}const r=s=>({main:(0,i.css)(y(s)),large:(0,i.css)({fontSize:"20px",color:"red"}),disabed:(0,i.css)({fontSize:"10px",color:"gray"}),child:(0,i.css)(S(s))}),x=s=>({main:y(s),large:{fontSize:"20px",color:"red"},disabed:{fontSize:"10px",color:"gray"},child:S(s)});function y(s){return{background:"blue",border:"1px solid red",color:"white",padding:s.spacing(1),shadow:s.shadows.z1,":hover":{background:s.colors.background.primary}}}function S(s){return{padding:"2px",fontSize:"10px",boxShadow:"none",textAlign:"center",textDecoration:"none"}}const j=()=>c.createElement(u.wc,null,c.createElement(v,null)),T=j}}]);

//# sourceMappingURL=BenchmarksPage.b45f4aa6b6c2b16e9eeb.js.map