@attivio/suit/lib/components/TimeRangePicker.js

Attivio SUIT, the Search UI Toolkit, is a library for creating search clients for searching the Attivio platform.

'use strict';

exports.__esModule = true;
exports.default = undefined;

var _class, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Menu = require('./Menu');

var _Menu2 = _interopRequireDefault(_Menu);

var _SmallTabs = require('./SmallTabs');

var _SmallTabs2 = _interopRequireDefault(_SmallTabs);

var _DatePicker = require('./DatePicker');

var _DatePicker2 = _interopRequireDefault(_DatePicker);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var TimeRangePicker = (_temp = _class = function (_React$Component) {
  _inherits(TimeRangePicker, _React$Component);

  // eslint-disable-line max-len
  function TimeRangePicker(props) {
    _classCallCheck(this, TimeRangePicker);

    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

    _this.state = {
      showCustomDatePicker: false,
      start: null,
      end: null
    };
    _this.tabChanged = _this.tabChanged.bind(_this);
    _this.granularityChanged = _this.granularityChanged.bind(_this);
    _this.showCustomDatePicker = _this.showCustomDatePicker.bind(_this);
    _this.hideCustomDatePicker = _this.hideCustomDatePicker.bind(_this);
    _this.updateDateRange = _this.updateDateRange.bind(_this);
    return _this;
  }

  TimeRangePicker.prototype.calculateGranularity = function calculateGranularity(intervalName) {
    if (this.props.customGranularity) {
      return this.props.currentGranularity;
    }
    var rangeMS = void 0;
    if (intervalName) {
      var potentialRangeMS = this.props.intervals.get(intervalName);
      if (potentialRangeMS) {
        rangeMS = potentialRangeMS;
      }
    } else if (this.state.end) {
      // We have a custom range...
      var endMS = this.state.end.getDate();
      if (this.state.start) {
        var startMS = this.state.start.getDate();
        rangeMS = endMS - startMS;
      }
    }
    if (rangeMS) {
      // Ranges longer than 3 months are done by month
      if (rangeMS > 3 * 30 * 24 * 60 * 60 * 1000) {
        return 'MONTH';
      }
      // Ranges longer than 1 month are done by week
      if (rangeMS > 30 * 24 * 60 * 60 * 1000) {
        return 'WEEK';
      }
      // Ranges longer than 1 day are done by day
      if (rangeMS > 24 * 60 * 60 * 1000) {
        return 'DAY';
      }
      // Ranges longer than 1 hour are done by hour
      if (rangeMS > 60 * 60 * 1000) {
        return 'HOUR';
      }
      // Ranges shorter than an hour are done by minute
      return 'MINUTE';
    }
    return 'MINUTE';
  };

  TimeRangePicker.prototype.tabChanged = function tabChanged(newTab) {
    var _this2 = this;

    var intervalMS = this.props.intervals.get(newTab);
    if (intervalMS) {
      // This makes flow happy
      this.setState({
        showCustomDatePicker: false,
        start: null,
        end: null
      }, function () {
        var granularity = _this2.calculateGranularity(newTab);
        _this2.props.onChange(newTab, intervalMS, null, null, granularity);
      });
    }
  };

  TimeRangePicker.prototype.granularityChanged = function granularityChanged(item) {
    var intervalMS = 0;
    if (this.props.currentInterval) {
      intervalMS = this.props.intervals.get(this.props.currentInterval) || 0;
    }
    this.props.onChange(this.props.currentInterval, intervalMS, this.props.currentStart, this.props.currentEnd, item.value);
  };

  TimeRangePicker.prototype.updateDateRange = function updateDateRange(start, end) {
    this.setState({
      start: start,
      end: end
    });
  };

  TimeRangePicker.prototype.showCustomDatePicker = function showCustomDatePicker() {
    this.setState({ showCustomDatePicker: true });
  };

  TimeRangePicker.prototype.hideCustomDatePicker = function hideCustomDatePicker() {
    this.setState({ showCustomDatePicker: false });
  };

  TimeRangePicker.prototype.calculateRange = function calculateRange() {
    if (this.state.start && this.state.end) {
      return {
        startDate: this.state.start,
        endDate: this.state.end
      };
    }
    var intervalMS = 0;
    if (this.props.currentInterval) {
      intervalMS = this.props.intervals.get(this.props.currentInterval) || 0;
    }
    var end = new Date();
    var start = new Date(end.getTime() - intervalMS);
    return {
      startDate: start,
      endDate: end
    };
  };

  TimeRangePicker.prototype.renderCustomRangeOption = function renderCustomRangeOption() {
    if (this.props.customRange) {
      var customRangeClass = this.state.currentInterval === null ? 'attivio-smalltabs-selected' : '';

      var _calculateRange = this.calculateRange(),
          _startDate = _calculateRange.startDate,
          _endDate = _calculateRange.endDate;

      return _react2.default.createElement(
        'li',
        { className: 'DateRangePicker' },
        _react2.default.createElement(
          'a',
          {
            className: customRangeClass,
            role: 'button',
            tabIndex: 0,
            onClick: this.showCustomDatePicker
          },
          'Custom\u2026'
        ),
        this.state.showCustomDatePicker && _react2.default.createElement(
          'div',
          {
            className: 'DateRangePicker__picker DateRangePicker__picker--direction-left DateRangePicker__picker--open-down DateRangePicker__picker--horizontal' // eslint-disable-line max-len
            , style: { left: '-542px', top: '35px' }
          },
          _react2.default.createElement(_DatePicker2.default, {
            startingDate: _startDate,
            endingDate: _endDate,
            updateDate: this.updateDateRange,
            onClose: this.hideCustomDatePicker
          })
        )
      );
    }
    // No custom range
    return null;
  };

  TimeRangePicker.prototype.render = function render() {
    var intervals = Array.from(this.props.intervals.keys());
    var granularityMenuItems = [new _Menu.MenuItemDef('Minute', 'MINUTE'), new _Menu.MenuItemDef('Hour', 'HOUR'), new _Menu.MenuItemDef('Day', 'DAY'), new _Menu.MenuItemDef('Week', 'WEEK'), new _Menu.MenuItemDef('Month', 'MONTH')];
    var currentTab = this.props.currentInterval || undefined;

    return _react2.default.createElement(
      'div',
      { style: this.props.style },
      _react2.default.createElement(
        _SmallTabs2.default,
        {
          tabs: intervals,
          currentTab: currentTab,
          changed: this.tabChanged
        },
        this.renderCustomRangeOption()
      ),
      this.props.customGranularity ? _react2.default.createElement(_Menu2.default, {
        label: 'By:',
        items: granularityMenuItems,
        selection: this.props.currentGranularity,
        onSelect: this.granularityChanged,
        style: { top: '10px' }
      }) : null
    );
  };

  return TimeRangePicker;
}(_react2.default.Component), _class.defaultProps = {
  currentStart: null,
  currentEnd: null,
  customRange: false,
  customGranularity: false,
  currentGranularity: 'DAY',
  style: {}
}, _class.displayName = 'TimeRangePicker', _temp);
exports.default = TimeRangePicker;
module.exports = exports['default'];