refector: refector the component to stateless

recharts · Mar 24, 2016 · eeb71d7 · eeb71d7
1 parent f39990e
commit eeb71d7
Show file tree

Hide file tree

Showing 24 changed files with 1,843 additions and 1,935 deletions.
diff --git a/src/cartesian/CartesianAxis.js b/src/cartesian/CartesianAxis.js
diff --git a/src/cartesian/CartesianGrid.js b/src/cartesian/CartesianGrid.js
@@ -6,86 +6,82 @@ import pureRender from '../util/PureRender';
 import { PRESENTATION_ATTRIBUTES, getPresentationAttributes } from '../util/ReactUtils';
 import _ from 'lodash';
 
-@pureRender
-class CartesianGrid extends Component {
-
-  static displayName = 'CartesianGrid';
-
-  static propTypes = {
-    ...PRESENTATION_ATTRIBUTES,
-    x: PropTypes.number,
-    y: PropTypes.number,
-    width: PropTypes.number,
-    height: PropTypes.number,
-    horizontal: PropTypes.bool,
-    vertical: PropTypes.bool,
-    horizontalPoints: PropTypes.arrayOf(PropTypes.number),
-    verticalPoints: PropTypes.arrayOf(PropTypes.number),
-  };
-
-  static defaultProps = {
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0,
-    horizontal: true,
-    vertical: true,
-    // The ordinates of horizontal grid lines
-    horizontalPoints: [],
-    // The abscissas of vertical grid lines
-    verticalPoints: [],
-
-    stroke: '#ccc',
-    fill: 'none',
-  };
-
-  /**
-   * Draw the horizontal grid lines
-   * @return {Group} Horizontal lines
-   */
-  renderHorizontal() {
-    const { x, width, horizontalPoints } = this.props;
-
-    if (!horizontalPoints || !horizontalPoints.length) { return null; }
-
-    const props = getPresentationAttributes(this.props);
-    const items = horizontalPoints.map((entry, i) =>
-      (<line {...props} key={`line-${i}`} x1={x} y1={entry} x2={x + width} y2={entry} />));
-
-    return <g className="recharts-cartesian-grid-horizontal">{items}</g>;
-  }
+/**
+ * Draw the horizontal grid lines
+ * @return {Group} Horizontal lines
+ */
+function renderHorizontal(props) {
+  const { x, width, horizontalPoints } = props;
 
-  /**
-   * Draw vertical grid lines
-   * @return {Group} Vertical lines
-   */
-  renderVertical() {
-    const { y, height, verticalPoints } = this.props;
+  if (!horizontalPoints || !horizontalPoints.length) { return null; }
+
+  const horizontalProps = getPresentationAttributes(props);
+  const items = horizontalPoints.map((entry, i) =>
+    (<line {...horizontalProps} key={`line-${i}`} x1={x} y1={entry} x2={x + width} y2={entry} />));
+
+  return <g className="recharts-cartesian-grid-horizontal">{items}</g>;
+}
 
-    if (!verticalPoints || !verticalPoints.length) { return null; }
+/**
+ * Draw vertical grid lines
+ * @return {Group} Vertical lines
+ */
+function renderVertical(props) {
+  const { y, height, verticalPoints } = props;
 
-    const props = getPresentationAttributes(this.props);
+  if (!verticalPoints || !verticalPoints.length) { return null; }
 
-    const items = verticalPoints.map((entry, i) =>
-      (<line {...props} key={`line-${i}`} x1={entry} y1={y} x2={entry} y2={y + height} />));
+  const verticalProps = getPresentationAttributes(props);
 
-    return <g className="recharts-cartesian-grid-vertical">{items}</g>;
-  }
+  const items = verticalPoints.map((entry, i) =>
+    (<line {...verticalProps} key={`line-${i}`} x1={entry} y1={y} x2={entry} y2={y + height} />));
 
-  render() {
-    const { width, height, horizontal, vertical } = this.props;
+  return <g className="recharts-cartesian-grid-vertical">{items}</g>;
+}
 
-    if (width <= 0 || height <= 0) {
-      return null;
-    }
+function CartesianGrid(props) {
+  const { width, height, horizontal, vertical } = props;
 
-    return (
-      <g className="recharts-cartesian-grid">
-        {horizontal && this.renderHorizontal()}
-        {vertical && this.renderVertical()}
-      </g>
-    );
+  if (width <= 0 || height <= 0) {
+    return <g />;
   }
+
+  return (
+    <g className="recharts-cartesian-grid">
+      {horizontal && renderHorizontal(props)}
+      {vertical && renderVertical(props)}
+    </g>
+  );
 }
 
+CartesianGrid.displayName = 'CartesianGrid';
+
+CartesianGrid.propTypes = {
+  ...PRESENTATION_ATTRIBUTES,
+  x: PropTypes.number,
+  y: PropTypes.number,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  horizontal: PropTypes.bool,
+  vertical: PropTypes.bool,
+  horizontalPoints: PropTypes.arrayOf(PropTypes.number),
+  verticalPoints: PropTypes.arrayOf(PropTypes.number),
+};
+
+CartesianGrid.defaultProps = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  horizontal: true,
+  vertical: true,
+  // The ordinates of horizontal grid lines
+  horizontalPoints: [],
+  // The abscissas of vertical grid lines
+  verticalPoints: [],
+
+  stroke: '#ccc',
+  fill: 'none',
+};
+
 export default CartesianGrid;
diff --git a/src/cartesian/ReferenceDot.js b/src/cartesian/ReferenceDot.js
@@ -9,109 +9,105 @@ import { PRESENTATION_ATTRIBUTES, getPresentationAttributes } from '../util/Reac
 import { validateCoordinateInRange } from '../util/DataUtils';
 import _ from 'lodash';
 
-@pureRender
-class ReferenceDot extends Component {
-
-  static displayName = 'ReferenceDot';
-
-  static propTypes = {
-    ...PRESENTATION_ATTRIBUTES,
-    r: PropTypes.number,
-
-    label: PropTypes.oneOfType([
-      PropTypes.number, PropTypes.string, PropTypes.func, PropTypes.element,
-    ]),
-
-    xAxisMap: PropTypes.object,
-    yAxisMap: PropTypes.object,
+function getCoordinate(props) {
+  const { x, y, xAxisMap, yAxisMap, xAxisId, yAxisId } = props;
+  const xScale = xAxisMap[xAxisId].scale;
+  const yScale = yAxisMap[yAxisId].scale;
+  const result = {
+    cx: xScale(x),
+    cy: yScale(y),
+  };
 
-    alwaysShow: PropTypes.bool,
-    x: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    y: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  if (validateCoordinateInRange(result.cx, xScale) &&
+    validateCoordinateInRange(result.cy, yScale)) {
+    return result;
+  }
 
-    yAxisId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    xAxisId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  };
+  return null;
+}
 
-  static defaultProps = {
-    alwaysShow: false,
-    xAxisId: 0,
-    yAxisId: 0,
-    r: 20,
-    fill: '#fff',
-    stroke: '#ccc',
-    fillOpacity: 1,
-    strokeWidth: 1,
+function renderLabel(props, coordinate) {
+  const { label, stroke } = props;
+  const labelProps = {
+    ...getPresentationAttributes(label),
+    stroke: 'none',
+    fill: stroke,
+    x: coordinate.cx,
+    y: coordinate.cy,
+    textAnchor: 'middle',
   };
 
-  getCoordinate() {
-    const { x, y, xAxisMap, yAxisMap, xAxisId, yAxisId } = this.props;
-    const xScale = xAxisMap[xAxisId].scale;
-    const yScale = yAxisMap[yAxisId].scale;
-    const result = {
-      cx: xScale(x),
-      cy: yScale(y),
-    };
-
-    if (validateCoordinateInRange(result.cx, xScale) &&
-      validateCoordinateInRange(result.cy, yScale)) {
-      return result;
-    }
-
-    return null;
+  if (React.isValidElement(label)) {
+    return React.cloneElement(label, labelProps);
+  } else if (_.isFunction(label)) {
+    return label(labelProps);
+  } else if (_.isString(label) || _.isNumber(label)) {
+    return (
+      <g className="recharts-reference-dot-label">
+        <text {...labelProps}>{label}</text>
+      </g>
+    );
   }
 
-  renderLabel(coordinate) {
-    const { label, stroke } = this.props;
-    const props = {
-      ...getPresentationAttributes(label),
-      stroke: 'none',
-      fill: stroke,
-      x: coordinate.cx,
-      y: coordinate.cy,
-      textAnchor: 'middle',
-    };
-
-    if (React.isValidElement(label)) {
-      return React.cloneElement(label, props);
-    } else if (_.isFunction(label)) {
-      return label(props);
-    } else if (_.isString(label) || _.isNumber(label)) {
-      return (
-        <g className="recharts-reference-dot-label">
-          <text {...props}>{label}</text>
-        </g>
-      );
-    }
-
-    return null;
-  }
+  return null;
+}
 
-  render() {
-    const { x, y } = this.props;
-    const isX = _.isNumber(x) || _.isString(x);
-    const isY = _.isNumber(y) || _.isString(y);
+function ReferenceDot(props) {
+  const { x, y } = props;
+  const isX = _.isNumber(x) || _.isString(x);
+  const isY = _.isNumber(y) || _.isString(y);
 
-    if (!isX || !isY) { return null; }
+  if (!isX || !isY) { return <span />; }
 
-    const coordinate = this.getCoordinate();
+  const coordinate = getCoordinate();
 
-    if (!coordinate) {return null;}
+  if (!coordinate) { return <span />; }
 
-    const props = getPresentationAttributes(this.props);
+  const dotProps = getPresentationAttributes(props);
 
-    return (
-      <Layer className="recharts-reference-dot">
-        <Dot
-          {...props}
-          r={this.props.r}
-          className="recharts-reference-dot-dot"
-          {...coordinate}
-        />
-        {this.renderLabel(coordinate)}
-      </Layer>
-    );
-  }
+  return (
+    <Layer className="recharts-reference-dot">
+      <Dot
+        {...dotProps}
+        r={props.r}
+        className="recharts-reference-dot-dot"
+        {...coordinate}
+      />
+      {renderLabel(coordinate)}
+    </Layer>
+  );
 }
 
+ReferenceDot.displayName = 'ReferenceDot';
+
+ReferenceDot.propTypes = {
+  ...PRESENTATION_ATTRIBUTES,
+  r: PropTypes.number,
+
+  label: PropTypes.oneOfType([
+    PropTypes.number, PropTypes.string, PropTypes.func, PropTypes.element,
+  ]),
+
+  xAxisMap: PropTypes.object,
+  yAxisMap: PropTypes.object,
+
+  alwaysShow: PropTypes.bool,
+  x: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  y: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  yAxisId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  xAxisId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+ReferenceDot.defaultProps = {
+  alwaysShow: false,
+  xAxisId: 0,
+  yAxisId: 0,
+  r: 20,
+  fill: '#fff',
+  stroke: '#ccc',
+  fillOpacity: 1,
+  strokeWidth: 1,
+};
+
 export default ReferenceDot;