nw-react-slider/lib/popover-follow.js

Slider Component

'use strict';

var React = require('react');
var ReactDOM = require('react-dom');
var isUndefined = require('lodash/isUndefined');

module.exports = React.createClass({
  displayName: 'popover-follow',

  propTypes: {
    position: React.PropTypes.number,
    value: React.PropTypes.number,
    trackWidth: React.PropTypes.number,
    handleWidth: React.PropTypes.number
  },

  getDefaultProps: function getDefaultProps() {
    return {
      position: 0,
      value: 0,
      trackWidth: 0
    };
  },

  getInitialState: function getInitialState() {
    return {
      arrowPosition: undefined,
      bubblePosition: undefined,
      popoverWidth: 0,
      arrowWidth: 0
    };
  },

  componentDidMount: function componentDidMount() {
    var _this = this;

    this.updatePopoverAndArrowWidth();
    window.addEventListener('resize', function () {
      _this.updatePopoverAndArrowWidth();
    });
  },

  setPosition: function setPosition() {
    var props = arguments.length <= 0 || arguments[0] === undefined ? this.props : arguments[0];

    var trackWidth = this.props.trackWidth;
    if (this.props.handleWidth) {
      trackWidth += this.props.handleWidth;
    }
    var spaceArrowShouldMove = this.state.popoverWidth / 2 - this.state.arrowWidth;

    if (props.position >= spaceArrowShouldMove && props.position <= this.props.trackWidth - spaceArrowShouldMove) {
      // Middle of the slider where the popover is completely inside the width of the slider
      this.setState({ bubblePosition: props.position, arrowPosition: spaceArrowShouldMove });
    } else if (props.position < spaceArrowShouldMove) {
      // Left section of the slider
      this.setState({ arrowPosition: props.position, bubblePosition: spaceArrowShouldMove });
    } else if (props.position > this.props.trackWidth - spaceArrowShouldMove) {
      // Right section of the slider
      this.setState({ arrowPosition: props.position - 2 * spaceArrowShouldMove, bubblePosition: trackWidth - spaceArrowShouldMove - this.props.handleWidth });
    }
  },

  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
    this.setPosition(nextProps);
  },

  updatePopoverAndArrowWidth: function updatePopoverAndArrowWidth() {
    var popover = ReactDOM.findDOMNode(this.refs.popover);
    if (!popover) {
      return;
    }
    var popoverWidth = popover.offsetWidth;
    var arrowWidth = ReactDOM.findDOMNode(this.refs.popover).getElementsByClassName('arrow').length > 0 ? ReactDOM.findDOMNode(this.refs.popover).getElementsByClassName('arrow')[0].offsetWidth : 12;
    this.setState({ popoverWidth: popoverWidth, arrowWidth: arrowWidth }, this.setPosition);
  },

  render: function render() {
    var styles = {};
    if (isUndefined(this.state.arrowPosition) || isUndefined(this.state.bubblePosition)) {
      styles = { visibility: 'hidden' };
    }
    var popoverStyle = {
      display: 'block',
      left: this.state.bubblePosition
    };
    var arrowStyle = {
      left: this.state.arrowPosition
    };
    return React.createElement(
      'div',
      { style: styles, ref: 'container', className: 'popover-container' },
      React.createElement(
        'div',
        { role: 'tooltip', ref: 'popover', className: 'popover', style: popoverStyle },
        React.createElement('div', { className: 'popover__arrow', style: arrowStyle }),
        React.createElement(
          'div',
          { className: 'popover__content' },
          this.props.value
        )
      )
    );
  }
});
//# sourceMappingURL=popover-follow.js.map