@skbkontur/react-ui 0.0.0-9a66eda8b5 → 0.0.0-a18e664e8f

package/internal/NativeDateInput/utils/utils.js

@@ -0,0 +1,54 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+export var getDateForNative = function getDateForNative(componentDate) {
+  if (!componentDate) {
+    return undefined;
+  }
+
+  var splittedDate = componentDate.split('.');
+  return splittedDate[2] + "-" + splittedDate[1] + "-" + splittedDate[0];
+};
+export var getDateForComponent = function getDateForComponent(nativeDate) {
+  if (!nativeDate) {
+    return '';
+  }
+
+  var splittedDate = nativeDate.split('-');
+  return splittedDate[2] + "." + splittedDate[1] + "." + splittedDate[0];
+};
+export var getNativeDateFromShape = function getNativeDateFromShape(componentDate) {
+  if (!componentDate) {
+    return undefined;
+  }
+
+  var _map = [componentDate.date, componentDate.month, componentDate.year].map(function (x) {
+    return x.toString();
+  }),
+      date = _map[0],
+      month = _map[1],
+      year = _map[2];
+
+  return year.padStart(4, '0') + "-" + month.padStart(2, '0') + "-" + date.padStart(2, '0');
+};
+export var upMonthOfShape = function upMonthOfShape(DateShape) {
+  if (!DateShape) {
+    return undefined;
+  }
+
+  return _extends({}, DateShape, {
+    month: DateShape.month + 1
+  });
+};
+export var getShapeFromNativeDate = function getShapeFromNativeDate(nativeDate) {
+  if (!nativeDate) {
+    return undefined;
+  }
+
+  var splittedDate = nativeDate.split('-').map(function (date) {
+    return Number(date);
+  });
+  return {
+    year: splittedDate[0],
+    month: splittedDate[1],
+    date: splittedDate[2]
+  };
+};

package/internal/NativeDateInput/utils/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils.ts"],"names":["getDateForNative","componentDate","undefined","splittedDate","split","getDateForComponent","nativeDate","getNativeDateFromShape","date","month","year","map","x","toString","padStart","upMonthOfShape","DateShape","getShapeFromNativeDate","Number"],"mappings":";;;AAGA,OAAO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,aAAD,EAAqC;AACnE,MAAI,CAACA,aAAL,EAAoB;AAClB,WAAOC,SAAP;AACD;;AAED,MAAMC,YAAY,GAAGF,aAAa,CAACG,KAAd,CAAoB,GAApB,CAArB;;AAEA,SAAUD,YAAY,CAAC,CAAD,CAAtB,SAA6BA,YAAY,CAAC,CAAD,CAAzC,SAAgDA,YAAY,CAAC,CAAD,CAA5D;AACD,CARM;;AAUP,OAAO,IAAME,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,UAAD,EAAkC;AACnE,MAAI,CAACA,UAAL,EAAiB;AACf,WAAO,EAAP;AACD;;AAED,MAAMH,YAAY,GAAGG,UAAU,CAACF,KAAX,CAAiB,GAAjB,CAArB;;AAEA,SAAUD,YAAY,CAAC,CAAD,CAAtB,SAA6BA,YAAY,CAAC,CAAD,CAAzC,SAAgDA,YAAY,CAAC,CAAD,CAA5D;AACD,CARM;;AAUP,OAAO,IAAMI,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACN,aAAD,EAAyD;AAC7F,MAAI,CAACA,aAAL,EAAoB;AAClB,WAAOC,SAAP;AACD,GAH4F;AAIjE,GAACD,aAAa,CAACO,IAAf,EAAqBP,aAAa,CAACQ,KAAnC,EAA0CR,aAAa,CAACS,IAAxD,EAA8DC,GAA9D,CAAkE,UAACC,CAAD,UAAOA,CAAC,CAACC,QAAF,EAAP,EAAlE,CAJiE,CAItFL,IAJsF,WAIhFC,KAJgF,WAIzEC,IAJyE;;AAM7F,SAAUA,IAAI,CAACI,QAAL,CAAc,CAAd,EAAiB,GAAjB,CAAV,SAAmCL,KAAK,CAACK,QAAN,CAAe,CAAf,EAAkB,GAAlB,CAAnC,SAA6DN,IAAI,CAACM,QAAL,CAAc,CAAd,EAAiB,GAAjB,CAA7D;AACD,CAPM;;AASP,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,SAAD,EAA6E;AACzG,MAAI,CAACA,SAAL,EAAgB;AACd,WAAOd,SAAP;AACD;;AAED,sBAAYc,SAAZ,IAAuBP,KAAK,EAAEO,SAAS,CAACP,KAAV,GAAkB,CAAhD;AACD,CANM;;AAQP,OAAO,IAAMQ,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACX,UAAD,EAAiE;AACrG,MAAI,CAACA,UAAL,EAAiB;AACf,WAAOJ,SAAP;AACD;;AAED,MAAMC,YAAY,GAAGG,UAAU,CAACF,KAAX,CAAiB,GAAjB,EAAsBO,GAAtB,CAA0B,UAACH,IAAD,UAAUU,MAAM,CAACV,IAAD,CAAhB,EAA1B,CAArB;;AAEA,SAAO,EAAEE,IAAI,EAAEP,YAAY,CAAC,CAAD,CAApB,EAAyBM,KAAK,EAAEN,YAAY,CAAC,CAAD,CAA5C,EAAiDK,IAAI,EAAEL,YAAY,CAAC,CAAD,CAAnE,EAAP;AACD,CARM","sourcesContent":["import { Nullable } from '../../typings/utility-types';\nimport { CalendarDateShape } from '../Calendar';\n\nexport const getDateForNative = (componentDate: Nullable<string>) => {\n  if (!componentDate) {\n    return undefined;\n  }\n\n  const splittedDate = componentDate.split('.');\n\n  return `${splittedDate[2]}-${splittedDate[1]}-${splittedDate[0]}`;\n};\n\nexport const getDateForComponent = (nativeDate: Nullable<string>) => {\n  if (!nativeDate) {\n    return '';\n  }\n\n  const splittedDate = nativeDate.split('-');\n\n  return `${splittedDate[2]}.${splittedDate[1]}.${splittedDate[0]}`;\n};\n\nexport const getNativeDateFromShape = (componentDate: CalendarDateShape | undefined | null) => {\n  if (!componentDate) {\n    return undefined;\n  }\n  const [date, month, year] = [componentDate.date, componentDate.month, componentDate.year].map((x) => x.toString());\n\n  return `${year.padStart(4, '0')}-${month.padStart(2, '0')}-${date.padStart(2, '0')}`;\n};\n\nexport const upMonthOfShape = (DateShape: CalendarDateShape | undefined): CalendarDateShape | undefined => {\n  if (!DateShape) {\n    return undefined;\n  }\n\n  return { ...DateShape, month: DateShape.month + 1 };\n};\n\nexport const getShapeFromNativeDate = (nativeDate: Nullable<string>): CalendarDateShape | undefined => {\n  if (!nativeDate) {\n    return undefined;\n  }\n\n  const splittedDate = nativeDate.split('-').map((date) => Number(date));\n\n  return { year: splittedDate[0], month: splittedDate[1], date: splittedDate[2] };\n};\n"]}

package/internal/NativeDateInput/utils.d.ts

@@ -0,0 +1,7 @@
+import { Nullable } from '../../typings/utility-types';
+import { CalendarDateShape } from '../Calendar';
+export declare const getDateForNative: (componentDate: Nullable<string>) => string | undefined;
+export declare const getDateForComponent: (nativeDate: Nullable<string>) => string;
+export declare const getNativeDateFromShape: (componentDate: CalendarDateShape | undefined | null) => string | undefined;
+export declare const upMonthOfShape: (DateShape: CalendarDateShape | undefined) => CalendarDateShape | undefined;
+export declare const getShapeFromNativeDate: (nativeDate: Nullable<string>) => CalendarDateShape | undefined;

package/internal/PerformanceMetrics/PerformanceMetrics/PerformanceMetrics.js

@@ -9,38 +9,36 @@ var PANEL_WRAPPER_STYLES = {
   verticalAlign: 'top'
 };
 export function PerformanceMetrics(props) {
-  return React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     style: {
       padding: 10,
       width: 1200
     }
-  }, React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
       position: 'absolute'
     }
-  }, React.createElement(Spinner, {
+  }, /*#__PURE__*/React.createElement(Spinner, {
     type: 'mini',
     caption: ''
-  })), React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     style: {
       padding: 10
     }
-  }, React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     style: PANEL_WRAPPER_STYLES
-  }, React.createElement(PerformanceMetricsPanel, {
+  }, /*#__PURE__*/React.createElement(PerformanceMetricsPanel, {
     title: 'Case A',
     component: props.componentsA
-  })), React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     style: PANEL_WRAPPER_STYLES
-  }, React.createElement(PerformanceMetricsPanel, {
+  }, /*#__PURE__*/React.createElement(PerformanceMetricsPanel, {
     title: 'Case B',
     component: props.componentsB
   }))));
 }
 
-var PerformanceMetricsPanel =
-/*#__PURE__*/
-function (_React$Component) {
+var PerformanceMetricsPanel = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(PerformanceMetricsPanel, _React$Component);
 
   function PerformanceMetricsPanel() {
@@ -72,18 +70,18 @@ function (_React$Component) {
   var _proto = PerformanceMetricsPanel.prototype;
 
   _proto.render = function render() {
-    return React.createElement("div", null, React.createElement("h1", {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
       style: {
         lineHeight: '2em'
       }
-    }, this.props.title), React.createElement("div", {
+    }, this.props.title), /*#__PURE__*/React.createElement("div", {
       style: {
         marginBottom: 10
       }
-    }, React.createElement(Button, {
+    }, /*#__PURE__*/React.createElement(Button, {
       onClick: this.toggleMountedState,
       size: 'small'
-    }, this.state.mounted ? 'Unmount' : 'Mount')), React.createElement("div", {
+    }, this.state.mounted ? 'Unmount' : 'Mount')), /*#__PURE__*/React.createElement("div", {
       ref: this.setContainerRef
     }));
   };

package/internal/PerformanceMetrics/PerformanceMetrics/PerformanceMetrics.js.map

@@ -1 +1 @@
-{"version":3,"sources":["PerformanceMetrics.tsx"],"names":["React","ReactDOM","Button","Spinner","PANEL_WRAPPER_STYLES","width","display","verticalAlign","PerformanceMetrics","props","padding","position","componentsA","componentsB","PerformanceMetricsPanel","state","mounted","container","setContainerRef","element","toggleMountedState","setState","render","lineHeight","title","marginBottom","componentDidMount","component","componentDidUpdate","unmountComponentAtNode","Component"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,MAAqB,WAArB;;AAEA,SAASC,MAAT,QAAuB,yBAAvB;;AAEA,SAASC,OAAT,QAAwB,0BAAxB;;AAEA,IAAMC,oBAAoB,GAAG,EAAEC,KAAK,EAAE,KAAT,EAAgBC,OAAO,EAAE,cAAzB,EAAyCC,aAAa,EAAE,KAAxD,EAA7B;;;;;;;AAOA,OAAO,SAASC,kBAAT,CAA4BC,KAA5B,EAA4D;AACjE;AACE,iCAAK,KAAK,EAAE,EAAEC,OAAO,EAAE,EAAX,EAAeL,KAAK,EAAE,IAAtB,EAAZ;AACE,iCAAK,KAAK,EAAE,EAAEM,QAAQ,EAAE,UAAZ,EAAZ;AACE,wBAAC,OAAD,IAAS,IAAI,EAAE,MAAf,EAAuB,OAAO,EAAE,EAAhC,GADF,CADF;;AAIE,iCAAK,KAAK,EAAE,EAAED,OAAO,EAAE,EAAX,EAAZ;AACE,iCAAK,KAAK,EAAEN,oBAAZ;AACE,wBAAC,uBAAD,IAAyB,KAAK,EAAE,QAAhC,EAA0C,SAAS,EAAEK,KAAK,CAACG,WAA3D,GADF,CADF;;AAIE,iCAAK,KAAK,EAAER,oBAAZ;AACE,wBAAC,uBAAD,IAAyB,KAAK,EAAE,QAAhC,EAA0C,SAAS,EAAEK,KAAK,CAACI,WAA3D,GADF,CAJF,CAJF,CADF;;;;;AAeD,C;;;;;;;;;;AAUKC,uB;AACGC,IAAAA,K,GAAQ;AACbC,MAAAA,OAAO,EAAE,KADI,E;;AAGPC,IAAAA,S;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCAC,IAAAA,e,GAAkB,UAACC,OAAD,EAAoC;AAC5D,YAAKF,SAAL,GAAiBE,OAAjB;AACD,K;;AAEOC,IAAAA,kB,GAAqB,YAAM;AACjC,YAAKC,QAAL,CAAc;AACZL,QAAAA,OAAO,EAAE,CAAC,MAAKD,KAAL,CAAWC,OADT,EAAd;;AAGD,K,qEAvCMM,M,GAAP,kBAAgB,CACd,OACE,iCACE,4BAAI,KAAK,EAAE,EAAEC,UAAU,EAAE,KAAd,EAAX,IAAmC,KAAKd,KAAL,CAAWe,KAA9C,CADF,EAEE,6BAAK,KAAK,EAAE,EAAEC,YAAY,EAAE,EAAhB,EAAZ,IACE,oBAAC,MAAD,IAAQ,OAAO,EAAE,KAAKL,kBAAtB,EAA0C,IAAI,EAAE,OAAhD,IACG,KAAKL,KAAL,CAAWC,OAAX,GAAqB,SAArB,GAAiC,OADpC,CADF,CAFF,EAOE,6BAAK,GAAG,EAAE,KAAKE,eAAf,GAPF,CADF,CAWD,C,QAEMQ,iB,GAAP,6BAA2B,CACzB,IAAI,KAAKX,KAAL,CAAWC,OAAX,IAAsB,KAAKC,SAA/B,EAA0C,CACxChB,QAAQ,CAACqB,MAAT,CAAgB,KAAKb,KAAL,CAAWkB,SAA3B,EAAsC,KAAKV,SAA3C,EACD,CACF,C,QAEMW,kB,GAAP,8BAAkC,CAChC,IAAI,CAAC,KAAKX,SAAV,EAAqB,CACnB,OACD,CACD,IAAI,KAAKF,KAAL,CAAWC,OAAf,EAAwB,CACtBf,QAAQ,CAACqB,MAAT,CAAgB,KAAKb,KAAL,CAAWkB,SAA3B,EAAsC,KAAKV,SAA3C,EACD,CAFD,MAEO,CACLhB,QAAQ,CAAC4B,sBAAT,CAAgC,KAAKZ,SAArC,EACD,CACF,C,kCAnCmCjB,KAAK,CAAC8B,S","sourcesContent":["import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\n\r\nimport { Button } from '../../components/Button';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { Spinner } from '../../components/Spinner';\r\n\r\nconst PANEL_WRAPPER_STYLES = { width: '45%', display: 'inline-block', verticalAlign: 'top' };\r\n\r\ninterface PerformanceMetricsProps {\r\n  componentsA: React.ReactElement<any>;\r\n  componentsB: React.ReactElement<any>;\r\n}\r\n\r\nexport function PerformanceMetrics(props: PerformanceMetricsProps) {\r\n  return (\r\n    <div style={{ padding: 10, width: 1200 }}>\r\n      <div style={{ position: 'absolute' }}>\r\n        <Spinner type={'mini'} caption={''} />\r\n      </div>\r\n      <div style={{ padding: 10 }}>\r\n        <div style={PANEL_WRAPPER_STYLES}>\r\n          <PerformanceMetricsPanel title={'Case A'} component={props.componentsA} />\r\n        </div>\r\n        <div style={PANEL_WRAPPER_STYLES}>\r\n          <PerformanceMetricsPanel title={'Case B'} component={props.componentsB} />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\ninterface PerformanceMetricsPanelProps {\r\n  title: string;\r\n  component: React.ReactElement<any>;\r\n}\r\ninterface PerformanceMetricsPanelState {\r\n  mounted: boolean;\r\n}\r\n\r\nclass PerformanceMetricsPanel extends React.Component<PerformanceMetricsPanelProps, PerformanceMetricsPanelState> {\r\n  public state = {\r\n    mounted: false,\r\n  };\r\n  private container: Nullable<HTMLElement>;\r\n\r\n  public render() {\r\n    return (\r\n      <div>\r\n        <h1 style={{ lineHeight: '2em' }}>{this.props.title}</h1>\r\n        <div style={{ marginBottom: 10 }}>\r\n          <Button onClick={this.toggleMountedState} size={'small'}>\r\n            {this.state.mounted ? 'Unmount' : 'Mount'}\r\n          </Button>\r\n        </div>\r\n        <div ref={this.setContainerRef} />\r\n      </div>\r\n    );\r\n  }\r\n\r\n  public componentDidMount() {\r\n    if (this.state.mounted && this.container) {\r\n      ReactDOM.render(this.props.component, this.container);\r\n    }\r\n  }\r\n\r\n  public componentDidUpdate(): void {\r\n    if (!this.container) {\r\n      return;\r\n    }\r\n    if (this.state.mounted) {\r\n      ReactDOM.render(this.props.component, this.container);\r\n    } else {\r\n      ReactDOM.unmountComponentAtNode(this.container);\r\n    }\r\n  }\r\n\r\n  private setContainerRef = (element: Nullable<HTMLElement>) => {\r\n    this.container = element;\r\n  };\r\n\r\n  private toggleMountedState = () => {\r\n    this.setState({\r\n      mounted: !this.state.mounted,\r\n    });\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["PerformanceMetrics.tsx"],"names":["React","ReactDOM","Button","Spinner","PANEL_WRAPPER_STYLES","width","display","verticalAlign","PerformanceMetrics","props","padding","position","componentsA","componentsB","PerformanceMetricsPanel","state","mounted","container","setContainerRef","element","toggleMountedState","setState","render","lineHeight","title","marginBottom","componentDidMount","component","componentDidUpdate","unmountComponentAtNode","Component"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,MAAqB,WAArB;;AAEA,SAASC,MAAT,QAAuB,yBAAvB;;AAEA,SAASC,OAAT,QAAwB,0BAAxB;;AAEA,IAAMC,oBAAoB,GAAG,EAAEC,KAAK,EAAE,KAAT,EAAgBC,OAAO,EAAE,cAAzB,EAAyCC,aAAa,EAAE,KAAxD,EAA7B;;;;;;;AAOA,OAAO,SAASC,kBAAT,CAA4BC,KAA5B,EAA4D;AACjE;AACE,iCAAK,KAAK,EAAE,EAAEC,OAAO,EAAE,EAAX,EAAeL,KAAK,EAAE,IAAtB,EAAZ;AACE,iCAAK,KAAK,EAAE,EAAEM,QAAQ,EAAE,UAAZ,EAAZ;AACE,wBAAC,OAAD,IAAS,IAAI,EAAE,MAAf,EAAuB,OAAO,EAAE,EAAhC,GADF,CADF;;AAIE,iCAAK,KAAK,EAAE,EAAED,OAAO,EAAE,EAAX,EAAZ;AACE,iCAAK,KAAK,EAAEN,oBAAZ;AACE,wBAAC,uBAAD,IAAyB,KAAK,EAAE,QAAhC,EAA0C,SAAS,EAAEK,KAAK,CAACG,WAA3D,GADF,CADF;;AAIE,iCAAK,KAAK,EAAER,oBAAZ;AACE,wBAAC,uBAAD,IAAyB,KAAK,EAAE,QAAhC,EAA0C,SAAS,EAAEK,KAAK,CAACI,WAA3D,GADF,CAJF,CAJF,CADF;;;;;AAeD,C;;;;;;;;;;AAUKC,uB;AACGC,IAAAA,K,GAAQ;AACbC,MAAAA,OAAO,EAAE,KADI,E;;AAGPC,IAAAA,S;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCAC,IAAAA,e,GAAkB,UAACC,OAAD,EAAoC;AAC5D,YAAKF,SAAL,GAAiBE,OAAjB;AACD,K;;AAEOC,IAAAA,kB,GAAqB,YAAM;AACjC,YAAKC,QAAL,CAAc;AACZL,QAAAA,OAAO,EAAE,CAAC,MAAKD,KAAL,CAAWC,OADT,EAAd;;AAGD,K,qEAvCMM,M,GAAP,kBAAgB,CACd,oBACE,8CACE,4BAAI,KAAK,EAAE,EAAEC,UAAU,EAAE,KAAd,EAAX,IAAmC,KAAKd,KAAL,CAAWe,KAA9C,CADF,eAEE,6BAAK,KAAK,EAAE,EAAEC,YAAY,EAAE,EAAhB,EAAZ,iBACE,oBAAC,MAAD,IAAQ,OAAO,EAAE,KAAKL,kBAAtB,EAA0C,IAAI,EAAE,OAAhD,IACG,KAAKL,KAAL,CAAWC,OAAX,GAAqB,SAArB,GAAiC,OADpC,CADF,CAFF,eAOE,6BAAK,GAAG,EAAE,KAAKE,eAAf,GAPF,CADF,CAWD,C,QAEMQ,iB,GAAP,6BAA2B,CACzB,IAAI,KAAKX,KAAL,CAAWC,OAAX,IAAsB,KAAKC,SAA/B,EAA0C,CACxChB,QAAQ,CAACqB,MAAT,CAAgB,KAAKb,KAAL,CAAWkB,SAA3B,EAAsC,KAAKV,SAA3C,EACD,CACF,C,QAEMW,kB,GAAP,8BAAkC,CAChC,IAAI,CAAC,KAAKX,SAAV,EAAqB,CACnB,OACD,CACD,IAAI,KAAKF,KAAL,CAAWC,OAAf,EAAwB,CACtBf,QAAQ,CAACqB,MAAT,CAAgB,KAAKb,KAAL,CAAWkB,SAA3B,EAAsC,KAAKV,SAA3C,EACD,CAFD,MAEO,CACLhB,QAAQ,CAAC4B,sBAAT,CAAgC,KAAKZ,SAArC,EACD,CACF,C,kCAnCmCjB,KAAK,CAAC8B,S","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Button } from '../../components/Button';\nimport { Nullable } from '../../typings/utility-types';\nimport { Spinner } from '../../components/Spinner';\n\nconst PANEL_WRAPPER_STYLES = { width: '45%', display: 'inline-block', verticalAlign: 'top' };\n\ninterface PerformanceMetricsProps {\n  componentsA: React.ReactElement<any>;\n  componentsB: React.ReactElement<any>;\n}\n\nexport function PerformanceMetrics(props: PerformanceMetricsProps) {\n  return (\n    <div style={{ padding: 10, width: 1200 }}>\n      <div style={{ position: 'absolute' }}>\n        <Spinner type={'mini'} caption={''} />\n      </div>\n      <div style={{ padding: 10 }}>\n        <div style={PANEL_WRAPPER_STYLES}>\n          <PerformanceMetricsPanel title={'Case A'} component={props.componentsA} />\n        </div>\n        <div style={PANEL_WRAPPER_STYLES}>\n          <PerformanceMetricsPanel title={'Case B'} component={props.componentsB} />\n        </div>\n      </div>\n    </div>\n  );\n}\n\ninterface PerformanceMetricsPanelProps {\n  title: string;\n  component: React.ReactElement<any>;\n}\ninterface PerformanceMetricsPanelState {\n  mounted: boolean;\n}\n\nclass PerformanceMetricsPanel extends React.Component<PerformanceMetricsPanelProps, PerformanceMetricsPanelState> {\n  public state = {\n    mounted: false,\n  };\n  private container: Nullable<HTMLElement>;\n\n  public render() {\n    return (\n      <div>\n        <h1 style={{ lineHeight: '2em' }}>{this.props.title}</h1>\n        <div style={{ marginBottom: 10 }}>\n          <Button onClick={this.toggleMountedState} size={'small'}>\n            {this.state.mounted ? 'Unmount' : 'Mount'}\n          </Button>\n        </div>\n        <div ref={this.setContainerRef} />\n      </div>\n    );\n  }\n\n  public componentDidMount() {\n    if (this.state.mounted && this.container) {\n      ReactDOM.render(this.props.component, this.container);\n    }\n  }\n\n  public componentDidUpdate(): void {\n    if (!this.container) {\n      return;\n    }\n    if (this.state.mounted) {\n      ReactDOM.render(this.props.component, this.container);\n    } else {\n      ReactDOM.unmountComponentAtNode(this.container);\n    }\n  }\n\n  private setContainerRef = (element: Nullable<HTMLElement>) => {\n    this.container = element;\n  };\n\n  private toggleMountedState = () => {\n    this.setState({\n      mounted: !this.state.mounted,\n    });\n  };\n}\n"]}