ldx-widgets/dist/components/chevron.js

widgets

(function() {
  var Animation, Chevron, React, _, div, easing, path, ref, svg;

  React = require('react');

  _ = require('lodash');

  Animation = require('ainojs-animation');

  easing = require('ainojs-easing');

  ref = React.DOM, svg = ref.svg, path = ref.path, div = ref.div;

  Chevron = React.createClass({
    displayName: 'Chevron',
    getDefaultProps: function() {
      return {
        onClick: function() {},
        positionClass: null,
        invertOnClick: false,
        defaultOrientation: 'down',
        isInverted: false,
        animationDuration: 200,
        color: "#37BAC4"
      };
    },
    "default": {
      d1: 4,
      d2: -4,
      d3: 6,
      d4: -4,
      d5: 0,
      d6: 4
    },
    inverted: {
      d1: 0,
      d2: 4,
      d3: 2,
      d4: 4,
      d5: 4,
      d6: -4
    },
    render: function() {
      var className, color, d1, d2, d3, d4, d5, d6, dAttr, defaultOrientation, onClick, positionClass, ref1, ref2;
      ref1 = this.props, positionClass = ref1.positionClass, onClick = ref1.onClick, defaultOrientation = ref1.defaultOrientation, color = ref1.color;
      ref2 = this.state, d1 = ref2.d1, d2 = ref2.d2, d3 = ref2.d3, d4 = ref2.d4, d5 = ref2.d5, d6 = ref2.d6;
      dAttr = "M4 " + d1 + "l5 " + d2 + "v2L4 " + d3 + "l-5 " + d4 + "V" + d5 + "l5 " + d6 + "z";
      className = 'chevron';
      className += " " + defaultOrientation;
      if (positionClass != null) {
        className += " " + positionClass;
      }
      return div({
        className: className,
        onClick: this.handleClick
      }, svg({
        className: 'chevron-svg',
        width: "10",
        height: "6",
        viewBox: "-1 0 10 6"
      }, path({
        fill: color,
        d: dAttr
      })));
    },
    getInitialState: function() {
      this.isInverted = this.props.isInverted;
      if (this.isInverted) {
        return this.inverted;
      } else {
        return this["default"];
      }
    },
    componentDidMount: function() {
      return this.animation = new Animation({
        duration: this.props.animationDuration,
        easing: easing('linear')
      }).on('frame', this.onFrame);
    },
    componentWillReceiveProps: function(nextProps) {
      if (nextProps.isInverted !== this.isInverted) {
        if (this.props.invertOnClick) {
          return this.animate();
        }
      }
    },
    componentWillUnmount: function() {
      var ref1;
      if ((ref1 = this.animation) != null ? ref1.isAnimating() : void 0) {
        this.animation.end();
      }
      return this.animation.destroy();
    },
    onFrame: function(e) {
      if (this.isMounted()) {
        return this.setState(e.values);
      }
    },
    handleClick: function(e) {
      var base;
      e.stopPropagation();
      if (typeof (base = this.props).onClick === "function") {
        base.onClick();
      }
      if (this.props.invertOnClick) {
        return this.animate();
      }
    },
    animate: function() {
      var stateEnd, stateStart;
      this.isInverted = !this.isInverted;
      stateStart = _.clone(this.state);
      stateEnd = _.clone(this.isInverted ? this.inverted : this["default"]);
      this.animation.init(stateStart);
      return this.animation.animateTo(stateEnd);
    }
  });

  module.exports = Chevron;

}).call(this);