import cx from 'classnames';
import * as d3 from 'd3';
import PropTypes from 'prop-types';
import React from 'react';
import {findDOMNode} from 'react-dom';

class Axis extends React.Component {
  componentDidMount() {
    this._renderAxis();
  }

  componentDidUpdate() {
    this._renderAxis();
  }

  render() {
    const {children, className, transform} = this.props;
    return (
      <g
        className={cx('axis', className)}
        transform={transform}>
        {children}
      </g>
    );
  }

  _renderAxis = () => {
    const {orient, scale, ticks, tickFormat, tickSize} = this.props;

    let axis;
    switch (orient) {
      case 'bottom':
        axis = d3.axisBottom(scale);
        break;
      case 'left':
        axis = d3.axisLeft(scale);
        break;
      case 'right':
        axis = d3.axisRight(scale);
        break;
      case 'top':
        axis = d3.axisTop(scale);
        break;
    }

    axis
      .ticks(ticks)
      .tickFormat(tickFormat)
      .tickSize(tickSize);

    d3.select(findDOMNode(this)).call(axis);
  };
}

Axis.propTypes = {
  orient: PropTypes.oneOf(['bottom', 'left', 'right', 'top']).isRequired,
  scale: PropTypes.func.isRequired,
  ticks: PropTypes.number,
  tickFormat: PropTypes.func,
  tickSize: PropTypes.number,
  transform: PropTypes.string,
};

Axis.defaultProps = {
  tickSize: 6,
};

export default Axis;

@@ -579,16 +579,28 @@
 tickSize
+, tickValues
 %7D = this
@@ -1018,16 +1018,80 @@
 Size);%0A%0A
+    if (tickValues) %7B%0A      axis.tickValues(tickValues);%0A    %7D%0A%0A
     d3.s
@@ -1351,16 +1351,47 @@
 number,%0A
+  tickValues: PropTypes.array,%0A
   transf

Allow `tickValues` for Axis