react-mapfilter/es5/components/FilterPane/DateFilter.js

A React Component for viewing and filtering GeoJSON

'use strict';

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

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _pure = require('recompose/pure');

var _pure2 = _interopRequireDefault(_pure);

var _DateRange = require('@material-ui/icons/DateRange');

var _DateRange2 = _interopRequireDefault(_DateRange);

var _Button = require('@material-ui/core/Button');

var _Button2 = _interopRequireDefault(_Button);

var _styles = require('@material-ui/core/styles');

var _IconButton = require('@material-ui/core/IconButton');

var _IconButton2 = _interopRequireDefault(_IconButton);

var _Edit = require('@material-ui/icons/Edit');

var _Edit2 = _interopRequireDefault(_Edit);

var _Popover = require('@material-ui/core/Popover');

var _Popover2 = _interopRequireDefault(_Popover);

var _reactDateRange = require('react-date-range');

var _moment = require('moment');

var _moment2 = _interopRequireDefault(_moment);

var _reactIntl = require('react-intl');

var _FilterSection = require('./FilterSection');

var _FilterSection2 = _interopRequireDefault(_FilterSection);

var _config = require('../../../config.json');

var _intl_helpers = require('../../util/intl_helpers');

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

var PureDateRange = (0, _pure2.default)(_reactDateRange.DateRange);

var styles = function styles(theme) {
  return {
    nestedList: {
      paddingTop: 0,
      paddingBottom: 0
    },
    button: {
      textTransform: 'none',
      fontWeight: 'inherit',
      padding: '4px 5px',
      margin: '9px 0 9px 52px',
      fontSize: 13,
      minHeight: 'auto'
    },
    dateItem: {
      marginLeft: 0,
      padding: '16px 56px 16px 16px',
      position: 'relative',
      fontSize: 14,
      lineHeight: '14px',
      color: 'rgba(0, 0, 0, 0.870588)'
    },
    iconButton: {
      top: 0,
      width: 38,
      right: 8,
      height: 38,
      padding: 9,
      background: 'none',
      position: 'absolute'
    },
    editIcon: {
      width: 20,
      height: 20
    },
    showAll: {
      top: 6,
      fontSize: 12
    },
    popover: {
      fontFamily: theme.typography.fontFamily
    }
  };
};

var DateFilter = function (_React$PureComponent) {
  (0, _inherits3.default)(DateFilter, _React$PureComponent);

  function DateFilter() {
    var _ref;

    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, DateFilter);

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

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = DateFilter.__proto__ || (0, _getPrototypeOf2.default)(DateFilter)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      open: false
    }, _this.showDatePopover = function (event) {
      event.preventDefault();
      var range = document.createRange();
      var sel = window.getSelection();
      range.selectNodeContents(_this.buttonNode);
      sel.removeAllRanges();
      _this.setState({
        open: true
      });
    }, _this.handleNestedListToggle = function (e) {
      _this.setState({
        expanded: !_this.state.expanded
      });
    }, _this.showAllDates = function (e) {
      e.preventDefault();
      _this.handleDateChange({
        startDate: null,
        endDate: null
      });
    }, _this.handleDateChange = function (e) {
      if (e.startDate !== _this.props.startDate) {
        _this.props.onUpdate({
          exp: '>=',
          key: _this.props.fieldName,
          val: +e.startDate
        });
      }
      if (e.endDate !== _this.props.endDate) {
        _this.props.onUpdate({
          exp: '<=',
          key: _this.props.fieldName,
          val: +e.endDate
        });
      }
    }, _this.handleRequestClose = function () {
      _this.setState({
        open: false
      });
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(DateFilter, [{
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          fieldName = _props.fieldName,
          min = _props.min,
          max = _props.max,
          classes = _props.classes,
          valueMin = _props.valueMin,
          valueMax = _props.valueMax,
          formatMessage = _props.intl.formatMessage;

      var isFiltered = min > valueMin || max < valueMax;
      var minMoment = (0, _moment2.default)(min);
      var maxMoment = (0, _moment2.default)(max);
      var rangeStr = minMoment.format(_config.dateFormatShort) + ' — ' + maxMoment.format(_config.dateFormatShort);
      var title = fieldName.split('.').slice(-1)[0];
      var subtitle = fieldName.indexOf('.') > 1 ? fieldName.split('.').slice(0, -1).join(' / ') : null;

      return _react2.default.createElement(
        _FilterSection2.default,
        {
          title: formatMessage((0, _intl_helpers.createMessage)('field_key')(title)),
          subtitle: subtitle && formatMessage((0, _intl_helpers.createMessage)('field_key')(subtitle)),
          icon: _react2.default.createElement(_DateRange2.default, null),
          isFiltered: isFiltered,
          showAll: this.showAllDates },
        _react2.default.createElement(
          _Button2.default,
          {
            ref: function ref(el) {
              return _this2.buttonNode = _reactDom2.default.findDOMNode(el);
            },
            onClick: this.showDatePopover,
            className: classes.button },
          rangeStr
        ),
        _react2.default.createElement(
          _IconButton2.default,
          {
            onClick: this.showDatePopover,
            className: classes.iconButton },
          _react2.default.createElement(_Edit2.default, { nativeColor: '#757575', className: classes.editIcon })
        ),
        _react2.default.createElement(
          _Popover2.default,
          {
            open: this.state.open,
            anchorEl: this.buttonNode,
            anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
            onClose: this.handleRequestClose,
            className: classes.popover
          },
          _react2.default.createElement(PureDateRange, {
            startDate: minMoment,
            endDate: maxMoment,
            onChange: this.handleDateChange })
        )
      );
    }
  }]);
  return DateFilter;
}(_react2.default.PureComponent);

DateFilter.propTypes = {
  fieldName: _propTypes2.default.string.isRequired,
  onUpdate: _propTypes2.default.func
};
exports.default = (0, _styles.withStyles)(styles)((0, _reactIntl.injectIntl)(DateFilter));
//# sourceMappingURL=DateFilter.js.map