Move Chart to styled-components (#1098)

packages/ui-app/src/Chart/Base.tsx

@@ -0,0 +1,37 @@
+// Copyright 2017-2019 @polkadot/ui-app authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { BareProps } from '../types';
+
+import React from 'react';
+import styled from 'styled-components';
+
+import { classes } from '../util';
+
+type Props = BareProps & {
+  children: React.ReactNode
+};
+
+const Wrapper = styled.div`
+  position: relative;
+  display: inline-block;
+  padding: 1em 1em 0;
+  height: 15vw;
+  width: 15vw;
+`;
+
+export default class BaseChart extends React.PureComponent<Props> {
+  render () {
+    const { children, className, style } = this.props;
+
+    return (
+      <Wrapper
+        className={classes('ui--Chart', className)}
+        style={style}
+      >
+        {children}
+      </Wrapper>
+    );
+  }
+}

packages/ui-app/src/Chart/Doughnut.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import { Doughnut } from 'react-chartjs-2';
 import { bnToBn } from '@polkadot/util';
 
-import { classes } from '../util';
+import Base from './Base';
 
 type Value = {
   colors: Array<string>,
@@ -48,8 +48,8 @@ export default class ChartDoughnut extends React.PureComponent<Props> {
     } as Options);
 
     return (
-      <div
-        className={classes('ui--Chart', className)}
+      <Base
+        className={className}
         style={style}
       >
         <Doughnut
@@ -64,7 +64,7 @@ export default class ChartDoughnut extends React.PureComponent<Props> {
           height={size}
           width={size}
         />
-      </div>
+      </Base>
     );
   }
 }

packages/ui-app/src/styles/components.css

@@ -217,14 +217,6 @@ header .ui--Button-Group {
   }
 }
 
-.ui--Chart {
-  position: relative;
-  display: inline-block;
-  padding: 1em 1em 0;
-  height: 15vw;
-  width: 15vw;
-}
-
 .ui--CopyButton {
   cursor: copy !important;
   margin-left: 0.25rem !important;