@chroniq/chroniq-view-agenda/lib/index.js

storybook for chroniq

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _localizer = require('@chroniq/chroniq/lib/localizer');

var _localizer2 = _interopRequireDefault(_localizer);

var _dates = require('@chroniq/chroniq/lib/utils/dates');

var _dates2 = _interopRequireDefault(_dates);

var _actions = require('@chroniq/chroniq/lib/store/actions');

var _chroniqAccessorHelpers = require('@chroniq/chroniq-accessor-helpers');

var _connect = require('@chroniq/chroniq/lib/store/connect');

var _helpers = require('@chroniq/chroniq/lib/utils/helpers');

var _selectors = require('@chroniq/chroniq/lib/store/selectors');

var _events = require('@chroniq/chroniq/lib/selectors/events');

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; }

_actions.navigate.registerView('agenda', function (date, action) {
  switch (action) {
    case _actions.navigate.TODAY:
      return new Date();

    case _actions.navigate.NEXT:
      return _dates2.default.add(date, 1, 'month');

    case _actions.navigate.PREVIOUS:
      return _dates2.default.add(date, -1, 'month');
  }
});

var Agenda = function (_React$PureComponent) {
  _inherits(Agenda, _React$PureComponent);

  function Agenda() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, Agenda);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Agenda.__proto__ || Object.getPrototypeOf(Agenda)).call.apply(_ref, [this].concat(args))), _this), _this.setHeaderRef = function (ref) {
      _this.headerRef = ref;
    }, _this.setDateColRef = function (ref) {
      _this.dateColRef = ref;
    }, _this.setResourceColRef = function (ref) {
      _this.resourceColRef = ref;
    }, _this.setTimeColRef = function (ref) {
      _this.timeColRef = ref;
    }, _this.setContentRef = function (ref) {
      _this.contentRef = ref;
    }, _this.setTbodyRef = function (ref) {
      _this.tbodyRef = ref;
    }, _this.renderDay = function (day, events, dayKey) {
      var _this$props = _this.props,
          culture = _this$props.culture,
          components = _this$props.components,
          accessors = _this$props.accessors,
          selectedEvents = _this$props.selectedEvents,
          resources = _this$props.resources;
      var agendaDateFormat = _this.props.redux.formats.agendaDateFormat;


      var EventComponent = components.event;
      var DateComponent = components.date;

      var eventsByResourceId = events.reduce(function (result, event) {
        var resourceId = (0, _chroniqAccessorHelpers.get)(event, accessors.event.resourceId);

        if (!result[resourceId]) {
          result[resourceId] = [];
        }
        result[resourceId] = result[resourceId].concat(event);

        return result;
      }, {});

      var datePrinted = false;

      return resources.map(function (resource, resourceIdx) {
        var resourceId = (0, _chroniqAccessorHelpers.get)(resource, accessors.resource.id);
        return (eventsByResourceId[resourceId] || []).map(function (event, idx) {
          var dateLabel = idx === 0 && _localizer2.default.format(day, agendaDateFormat, culture);
          var first = idx === 0 && !datePrinted ? [_react2.default.createElement(
            'td',
            { key: 'date', rowSpan: (0, _chroniqAccessorHelpers.length)(events), className: 'chrnq-agenda-date-cell' },
            DateComponent ? _react2.default.createElement(DateComponent, { day: day, label: dateLabel }) : dateLabel
          )] : [];

          if (first.length > 0) {
            datePrinted = true;
          }

          var resourceId = (0, _chroniqAccessorHelpers.get)(resource, accessors.resource.id);
          idx === 0 && (0, _chroniqAccessorHelpers.length)(resources) > 1 && first.push(_react2.default.createElement(
            'td',
            { key: 'resource', rowSpan: (0, _chroniqAccessorHelpers.length)(eventsByResourceId[resourceId]), className: 'chrnq-agenda-resource-cell' },
            (0, _chroniqAccessorHelpers.get)(resource, accessors.resource.title)
          ));

          var title = (0, _chroniqAccessorHelpers.get)(event, accessors.event.title);

          return _react2.default.createElement(
            'tr',
            { key: dayKey + '_' + idx },
            first,
            _react2.default.createElement(
              'td',
              { className: 'chrnq-agenda-time-cell' },
              _this.timeRangeLabel(day, event)
            ),
            _react2.default.createElement(
              'td',
              { className: 'chrnq-agenda-event-cell' },
              EventComponent ? _react2.default.createElement(EventComponent, { event: event, title: title }) : title
            )
          );
        }, []);
      });
    }, _this.timeRangeLabel = function (day, event) {
      var _this$props2 = _this.props,
          accessors = _this$props2.accessors,
          culture = _this$props2.culture,
          components = _this$props2.components;
      var _this$props$redux = _this.props.redux,
          messages = _this$props$redux.messages,
          formats = _this$props$redux.formats;


      var labelClass = '';
      var TimeComponent = components.time;
      var label = messages.allDay;

      var start = (0, _chroniqAccessorHelpers.get)(event, accessors.event.start);
      var end = (0, _chroniqAccessorHelpers.get)(event, accessors.event.end);

      if (!(0, _chroniqAccessorHelpers.get)(event, accessors.event.allDay)) {
        if (_dates2.default.eq(start, end, 'day')) {
          label = _localizer2.default.format({ start: start, end: end }, formats.agendaTimeRangeFormat, culture);
        } else if (_dates2.default.eq(day, start, 'day')) {
          label = _localizer2.default.format(start, formats.agendaTimeFormat, culture);
        } else if (_dates2.default.eq(day, end, 'day')) {
          label = _localizer2.default.format(end, formats.agendaTimeFormat, culture);
        }
      }

      if (_dates2.default.gt(day, start, 'day')) labelClass = 'chrnq-continues-prior';
      if (_dates2.default.lt(day, end, 'day')) labelClass += ' chrnq-continues-after';

      return _react2.default.createElement(
        'span',
        { className: labelClass.trim() },
        TimeComponent ? _react2.default.createElement(TimeComponent, { event: event, day: day, label: label }) : label
      );
    }, _this._adjustHeader = function () {
      var header = _this.headerRef;
      var firstRow = _this.tbodyRef.firstChild;

      if (!firstRow) {
        return;
      }

      // let isOverflowing = this.contentRef.scrollHeight > this.contentRef.clientHeight
      var widths = _this._widths || [];

      _this._widths = [(0, _helpers.getWidth)(firstRow.children[0]), (0, _helpers.getWidth)(firstRow.children[1]), (0, _helpers.getWidth)(firstRow.children[2])];

      var setWidth = function setWidth(ref, width) {
        ref.style.width = width;
        ref.style.maxWidth = width;
      };

      if (_this._widths.some(function (width, index) {
        return width !== widths[index] && index < ((0, _chroniqAccessorHelpers.length)(_this.props.resources) > 1 ? 3 : 2);
      })) {
        setWidth(_this.dateColRef, _this._widths[0] + 'px');

        if ((0, _chroniqAccessorHelpers.length)(_this.props.resources) > 1) {
          setWidth(_this.resourceColRef, _this._widths[1] + 'px');
          setWidth(_this.timeColRef, _this._widths[2] + 'px');
        } else {
          setWidth(_this.timeColRef, _this._widths[1] + 'px');
        }
      }
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(Agenda, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this._adjustHeader();
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      this._adjustHeader();
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var accessors = this.props.accessors;
      var _props$redux = this.props.redux,
          events = _props$redux.events,
          date = _props$redux.date,
          messages = _props$redux.messages;


      var end = _dates2.default.endOf(date, 'month');

      var range = _dates2.default.range(_dates2.default.startOf(date, 'month'), end, 'day');

      events.sort(function (a, b) {
        return +(0, _chroniqAccessorHelpers.get)(a, accessors.event.start) - +(0, _chroniqAccessorHelpers.get)(b, accessors.event.start);
      });
      events = events.reduce(function (result, event) {
        var date = (0, _chroniqAccessorHelpers.get)(event, accessors.event.start);
        var end = (0, _chroniqAccessorHelpers.get)(event, accessors.event.end);

        var dateRange = [];
        while (_dates2.default.lte(date, end, 'day')) {
          dateRange.push(date);
          date = _dates2.default.add(date, 1, 'day');
        }

        dateRange.forEach(function (date) {
          if (!result[date.toDateString()]) {
            result[date.toDateString()] = [];
          }

          result[date.toDateString()] = result[date.toDateString()].concat(event);
        });

        return result;
      }, {});

      return _react2.default.createElement(
        'div',
        { className: 'chrnq-agenda-view' },
        _react2.default.createElement(
          'table',
          { ref: this.setHeaderRef },
          _react2.default.createElement(
            'thead',
            null,
            _react2.default.createElement(
              'tr',
              null,
              _react2.default.createElement(
                'th',
                { className: 'chrnq-header', ref: this.setDateColRef },
                messages.date
              ),
              (0, _chroniqAccessorHelpers.length)(this.props.resources) > 1 && _react2.default.createElement(
                'th',
                { className: 'chrnq-header', ref: this.setResourceColRef },
                messages.resource
              ),
              _react2.default.createElement(
                'th',
                { className: 'chrnq-header', ref: this.setTimeColRef },
                messages.time
              ),
              _react2.default.createElement(
                'th',
                { className: 'chrnq-header' },
                messages.event
              )
            )
          )
        ),
        _react2.default.createElement(
          'div',
          { className: 'chrnq-agenda-content', ref: this.setContentRef },
          _react2.default.createElement(
            'table',
            null,
            _react2.default.createElement(
              'tbody',
              { ref: this.setTbodyRef },
              range.map(function (day, idx) {
                return _this2.renderDay(day, events[day.toDateString()] || [], idx);
              })
            )
          )
        )
      );
    }
  }]);

  return Agenda;
}(_react2.default.PureComponent);

Agenda.title = function (start, _ref2) {
  var formats = _ref2.formats,
      culture = _ref2.culture;

  start = _dates2.default.startOf(start, 'month');
  var end = _dates2.default.add(start, 1, 'month');

  var range = { start: start, end: end };
  return _localizer2.default.format(range, formats.dayRangeHeaderFormat, culture);
};

Agenda.defaultProps = {
  length: 30
};

Agenda.propTypes = {
  accessors: _propTypes2.default.object,
  selectedEvents: _propTypes2.default.array,
  culture: _propTypes2.default.string,
  components: _propTypes2.default.object.isRequired,
  resources: _propTypes2.default.any.isRequired,
  redux: _propTypes2.default.shape({
    events: _propTypes2.default.any,
    date: _propTypes2.default.instanceOf(Date),
    messages: _propTypes2.default.shape({
      date: _propTypes2.default.string,
      time: _propTypes2.default.string
    }),
    formats: _propTypes2.default.shape({
      agendaDateFormat: _propTypes2.default.string,
      agendaTimeFormat: _propTypes2.default.string,
      agendaTimeRangeFormat: _propTypes2.default.func
    })
  })
};

var makeMapStateToProps = function makeMapStateToProps() {
  var getEventsForResourcesAndRange = (0, _events.makeGetEventsForResourcesAndRange)();

  return function (state, props) {
    var resources = props.resources,
        accessors = props.accessors;

    var date = _dates2.default.startOf((0, _selectors.getDate)(state), 'month');
    var range = _dates2.default.range(date, _dates2.default.endOf(date, 'month'), 'day');
    var events = getEventsForResourcesAndRange(state, resources, accessors, range);

    return {
      events: events,
      date: date,
      messages: (0, _selectors.getMessages)(state),
      formats: {
        agendaDateFormat: (0, _selectors.getAgendaDateFormat)(state),
        agendaTimeFormat: (0, _selectors.getAgendaTimeFormat)(state),
        agendaTimeRangeFormat: (0, _selectors.getAgendaTimeRangeFormat)(state)
      }
    };
  };
};

var mergeProps = function mergeProps(stateProps, dispatchProps, ownProps) {
  return _extends({}, ownProps, {
    redux: _extends({}, stateProps, dispatchProps)
  });
};

exports.default = (0, _connect.connect)(makeMapStateToProps, null, mergeProps)(Agenda);