moq-ui/lib/icons/chevron-icon.js

Simple, customizable UI components built with React

var React = require('react');

var ChevronIcon = React.createClass({displayName: "ChevronIcon",

  propTypes: {
    direction: function(props, propName, componentName) {
      if (['right', 'left', 'up', 'down'].indexOf(props.direction) === -1) {
        return new Error('Property `direction` has invalid value in `'+ componentName + '`.');
      }
    }
  },

  getDefaultProps: function() {
    return {
      direction: 'right',
      style: {
        color: '#000000'
      }
    }
  },

  getStyles: function() {
    return {
      svg: {
        width: '100%',
        height: '100%'
      },
      path: {
        fill: 'none',
        stroke: this.props.style.color,
        strokeWidth: 2,
        strokeLinecap: 'round',
        strokeLinejoin: 'square'
      }
    };
  },

  getTransform: function() {
    var map = {
      right:  'rotate(0)',
      left:   'rotate(180, 7, 7)',
      up:     'rotate(-90, 7, 7)',
      down:   'rotate(90, 7, 7)'
    };

    return map[this.props.direction];
  },

  render: function() {
    var styles = this.getStyles();
    var transform = this.getTransform();

    return (
      React.createElement("svg", {viewBox: "0 0 14 14", style: styles.svg}, 
        React.createElement("path", {
          d: "M 5.25 3.5 l 3.5 3.5 l -3.5 3.5", 
          style: styles.path, 
          transform: transform}
        )
      )
    );
  }

});

module.exports = ChevronIcon;