Run pure-component Codemod (uber#965)

* Run pure-component Codemod
ayarcohaila · Oct 15, 2018 · f3999b6 · f3999b6
1 parent f3f4915
commit f3999b6
Show file tree

Hide file tree

Showing 53 changed files with 1,408 additions and 1,525 deletions.
diff --git a/showcase/app.js b/showcase/app.js
@@ -19,23 +19,21 @@
 // THE SOFTWARE.
 
 import ReactDOM from 'react-dom';
-import React, {Component} from 'react';
+import React from 'react';
 import document from 'global/document';
 
 import {BrowserRouter, Route} from 'react-router-dom';
 
 import ShowcaseApp from './showcase-app';
 import '../src/styles/examples.scss';
 
-export default class App extends Component {
-  render() {
-    // using react-router to trigger react updates on url change
-    return (
-      <BrowserRouter>
-        <Route path="/" component={ShowcaseApp} />
-      </BrowserRouter>
-    );
-  }
+export default function App(props) {
+  // using react-router to trigger react updates on url change
+  return (
+    <BrowserRouter>
+      <Route path="/" component={ShowcaseApp} />
+    </BrowserRouter>
+  );
 }
 
 const el = document.createElement('div');

diff --git a/showcase/axes/custom-axes-orientation.js b/showcase/axes/custom-axes-orientation.js
@@ -29,36 +29,34 @@ import {
   LineSeries
 } from 'index';
 
-export default class Example extends React.Component {
-  render() {
-    return (
-      <XYPlot
-        margin={{top: 40, right: 40, left: 10, bottom: 10}}
-        width={300}
-        height={300}
-      >
-        <HorizontalGridLines />
-        <VerticalGridLines />
-        <XAxis orientation="top" title="X Axis" />
-        <YAxis orientation="right" title="Y Axis" />
-        <LineSeries
-          data={[
-            {x: 1, y: 3, z: 10},
-            {x: 2, y: 4, z: 10},
-            {x: 3, y: 8, z: 10},
-            {x: 4, y: 11, z: 10}
-          ]}
-        />
-        <LineSeries data={null} />
-        <LineSeries
-          data={[
-            {x: 1, y: 3, z: 10},
-            {x: 2, y: 9, z: 10},
-            {x: 3, y: 2, z: 10},
-            {x: 4, y: 11, z: 10}
-          ]}
-        />
-      </XYPlot>
-    );
-  }
+export default function Example(props) {
+  return (
+    <XYPlot
+      margin={{top: 40, right: 40, left: 10, bottom: 10}}
+      width={300}
+      height={300}
+    >
+      <HorizontalGridLines />
+      <VerticalGridLines />
+      <XAxis orientation="top" title="X Axis" />
+      <YAxis orientation="right" title="Y Axis" />
+      <LineSeries
+        data={[
+          {x: 1, y: 3, z: 10},
+          {x: 2, y: 4, z: 10},
+          {x: 3, y: 8, z: 10},
+          {x: 4, y: 11, z: 10}
+        ]}
+      />
+      <LineSeries data={null} />
+      <LineSeries
+        data={[
+          {x: 1, y: 3, z: 10},
+          {x: 2, y: 9, z: 10},
+          {x: 3, y: 2, z: 10},
+          {x: 4, y: 11, z: 10}
+        ]}
+      />
+    </XYPlot>
+  );
 }
diff --git a/showcase/axes/custom-axes.js b/showcase/axes/custom-axes.js
@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {Component} from 'react';
+import React from 'react';
 
 import {XYPlot, XAxis, YAxis, MarkSeries} from 'index';
 
@@ -44,21 +44,19 @@ const WORDS = [
     </tspan>
   </tspan>
 ];
-export default class Example extends Component {
-  render() {
-    return (
-      <XYPlot margin={MARGIN} width={300} height={300}>
-        <XAxis top={0} hideLine tickValues={[0, 1, 3, 4, 5]} title="X" />
-        <XAxis tickFormat={v => `Value is ${v}`} tickLabelAngle={-90} />
-        <YAxis hideTicks />
-        <YAxis left={50} tickFormat={v => v * v} />
-        <YAxis hideLine left={150} tickFormat={v => WORDS[v]} />
-        <MarkSeries
-          data={[{x: 0, y: 0}, {x: 5, y: 5}]}
-          opacity={0}
-          opacityType="linear"
-        />
-      </XYPlot>
-    );
-  }
+export default function Example(props) {
+  return (
+    <XYPlot margin={MARGIN} width={300} height={300}>
+      <XAxis top={0} hideLine tickValues={[0, 1, 3, 4, 5]} title="X" />
+      <XAxis tickFormat={v => `Value is ${v}`} tickLabelAngle={-90} />
+      <YAxis hideTicks />
+      <YAxis left={50} tickFormat={v => v * v} />
+      <YAxis hideLine left={150} tickFormat={v => WORDS[v]} />
+      <MarkSeries
+        data={[{x: 0, y: 0}, {x: 5, y: 5}]}
+        opacity={0}
+        opacityType="linear"
+      />
+    </XYPlot>
+  );
 }
diff --git a/showcase/axes/custom-axis.js b/showcase/axes/custom-axis.js
@@ -29,34 +29,32 @@ import {
   LineSeries
 } from 'index';
 
-export default class Example extends React.Component {
-  render() {
-    const axisStyle = {
-      ticks: {
-        fontSize: '14px',
-        color: '#333'
-      },
-      title: {
-        fontSize: '16px',
-        color: '#333'
-      }
-    };
+export default function Example(props) {
+  const axisStyle = {
+    ticks: {
+      fontSize: '14px',
+      color: '#333'
+    },
+    title: {
+      fontSize: '16px',
+      color: '#333'
+    }
+  };
 
-    return (
-      <XYPlot width={300} height={300}>
-        <VerticalGridLines />
-        <HorizontalGridLines />
-        <XAxis
-          hideLine
-          title="X"
-          labelFormat={v => `Value is ${v}`}
-          labelValues={[2]}
-          tickValues={[1, 1.5, 2, 3]}
-          style={axisStyle}
-        />
-        <YAxis hideTicks />
-        <LineSeries data={[{x: 1, y: 10}, {x: 2, y: 5}, {x: 3, y: 15}]} />
-      </XYPlot>
-    );
-  }
+  return (
+    <XYPlot width={300} height={300}>
+      <VerticalGridLines />
+      <HorizontalGridLines />
+      <XAxis
+        hideLine
+        title="X"
+        labelFormat={v => `Value is ${v}`}
+        labelValues={[2]}
+        tickValues={[1, 1.5, 2, 3]}
+        style={axisStyle}
+      />
+      <YAxis hideTicks />
+      <LineSeries data={[{x: 1, y: 10}, {x: 2, y: 5}, {x: 3, y: 15}]} />
+    </XYPlot>
+  );
 }
diff --git a/showcase/axes/decorative-axes-criss-cross.js b/showcase/axes/decorative-axes-criss-cross.js
@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {Component} from 'react';
+import React from 'react';
 
 import {XYPlot, DecorativeAxis} from 'index';
 
@@ -29,30 +29,28 @@ const MARGIN = {
   bottom: 30
 };
 
-export default class Example extends Component {
-  render() {
-    return (
-      <XYPlot
-        dontCheckIfEmpty
-        margin={MARGIN}
-        xDomain={[0, 1]}
-        yDomain={[0, 1]}
-        width={300}
-        height={300}
-      >
-        <DecorativeAxis
-          axisStart={{x: 0, y: 0}}
-          axisEnd={{x: 1, y: 1}}
-          axisDomain={[-10, 100]}
-        />
-        <DecorativeAxis
-          axisStart={{x: 1, y: 0}}
-          axisEnd={{x: 0, y: 1}}
-          axisDomain={[1000, 900]}
-          tickSize={-10}
-          tickValue={t => `¡${t}!`}
-        />
-      </XYPlot>
-    );
-  }
+export default function Example(props) {
+  return (
+    <XYPlot
+      dontCheckIfEmpty
+      margin={MARGIN}
+      xDomain={[0, 1]}
+      yDomain={[0, 1]}
+      width={300}
+      height={300}
+    >
+      <DecorativeAxis
+        axisStart={{x: 0, y: 0}}
+        axisEnd={{x: 1, y: 1}}
+        axisDomain={[-10, 100]}
+      />
+      <DecorativeAxis
+        axisStart={{x: 1, y: 0}}
+        axisEnd={{x: 0, y: 1}}
+        axisDomain={[1000, 900]}
+        tickSize={-10}
+        tickValue={t => `¡${t}!`}
+      />
+    </XYPlot>
+  );
 }
diff --git a/showcase/axes/parallel-coordinates-example.js b/showcase/axes/parallel-coordinates-example.js
@@ -65,33 +65,30 @@ const MARGIN = {
   bottom: 10
 };
 
-// build a custom color scale
-class ParallelCoordinatesExample extends React.Component {
-  render() {
-    return (
-      <XYPlot
-        width={500}
-        height={300}
-        xType="ordinal"
-        margin={MARGIN}
-        className="parallel-coordinates-example"
-      >
-        {mappedData.map((series, index) => {
-          return <LineSeries data={series} key={`series-${index}`} />;
-        })}
-        {mappedData[0].map((cell, index) => {
-          return (
-            <DecorativeAxis
-              key={`${index}-axis`}
-              axisStart={{x: cell.x, y: 0}}
-              axisEnd={{x: cell.x, y: 1}}
-              axisDomain={[domains[cell.x].min, domains[cell.x].max]}
-            />
-          );
-        })}
-      </XYPlot>
-    );
-  }
+function ParallelCoordinatesExample(props) {
+  return (
+    <XYPlot
+      width={500}
+      height={300}
+      xType="ordinal"
+      margin={MARGIN}
+      className="parallel-coordinates-example"
+    >
+      {mappedData.map((series, index) => {
+        return <LineSeries data={series} key={`series-${index}`} />;
+      })}
+      {mappedData[0].map((cell, index) => {
+        return (
+          <DecorativeAxis
+            key={`${index}-axis`}
+            axisStart={{x: cell.x, y: 0}}
+            axisEnd={{x: cell.x, y: 1}}
+            axisDomain={[domains[cell.x].min, domains[cell.x].max]}
+          />
+        );
+      })}
+    </XYPlot>
+  );
 }
 
 export default ParallelCoordinatesExample;
diff --git a/showcase/axes/static-crosshair.js b/showcase/axes/static-crosshair.js
@@ -30,18 +30,16 @@ import {
   Crosshair
 } from 'index';
 
-export default class Example extends React.Component {
-  render() {
-    return (
-      <XYPlot width={300} height={300}>
-        <VerticalGridLines />
-        <HorizontalGridLines />
-        <XAxis />
-        <YAxis />
-        <LineSeries data={[{x: 1, y: 10}, {x: 2, y: 7}, {x: 3, y: 15}]} />
-        <LineSeries data={[{x: 1, y: 20}, {x: 2, y: 5}, {x: 3, y: 15}]} />
-        <Crosshair values={[{x: 2, y: 5}, {x: 2, y: 7}]} />
-      </XYPlot>
-    );
-  }
+export default function Example(props) {
+  return (
+    <XYPlot width={300} height={300}>
+      <VerticalGridLines />
+      <HorizontalGridLines />
+      <XAxis />
+      <YAxis />
+      <LineSeries data={[{x: 1, y: 10}, {x: 2, y: 7}, {x: 3, y: 15}]} />
+      <LineSeries data={[{x: 1, y: 20}, {x: 2, y: 5}, {x: 3, y: 15}]} />
+      <Crosshair values={[{x: 2, y: 5}, {x: 2, y: 7}]} />
+    </XYPlot>
+  );
 }