react-mapfilter/commonjs/FilterPanel/DateFilter.js

These components are designed for viewing data in Mapeo. They share a common interface:

"use strict";

var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");

var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");

require("core-js/modules/es.regexp.exec");

require("core-js/modules/es.string.match");

_Object$defineProperty(exports, "__esModule", {
  value: true
});

exports.default = void 0;

var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));

var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));

var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));

var React = _interopRequireWildcard(require("react"));

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

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

var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));

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

var _helpers = require("../utils/helpers");

var _FilterSection = _interopRequireDefault(require("./FilterSection"));

var _DateField = _interopRequireDefault(require("../ObservationDialog/DateField"));

// @flow
var m = (0, _reactIntl.defineMessages)({
  // Title of min date field in filter
  min: {
    "id": "BB/6+g==",
    "defaultMessage": 'From'
  },
  // Title of max date field in filter
  max: {
    "id": "MOvYnQ==",
    "defaultMessage": 'To'
  }
});
/*:: type Props = {
  label: React.Node,
  fieldKey: Key,
  filter?: Filter | null,
  min: string,
  max: string,
  type?: 'date' | 'datetime',
  onChangeFilter: (filter: Array<any> | null) => void
}*/

var DateFilter = function DateFilter(_ref) {
  var label = _ref.label,
      fieldKey = _ref.fieldKey,
      filter = (0, _filter.default)(_ref),
      min = _ref.min,
      max = _ref.max,
      _ref$type = _ref.type,
      type = _ref$type === void 0 ? 'datetime' : _ref$type,
      onChangeFilter = _ref.onChangeFilter;
  var cx = useStyles();

  var _useIntl = (0, _reactIntl.useIntl)(),
      t = _useIntl.formatMessage;

  var _parseDateFilter = parseDateFilter(filter),
      _parseDateFilter2 = (0, _slicedToArray2.default)(_parseDateFilter, 2),
      filterMin = _parseDateFilter2[0],
      filterMax = _parseDateFilter2[1];

  var isFiltered = filterMin != null && filterMin > min || filterMax != null && filterMax < max;

  var handleChange = function handleChange(minOrMax
  /*: 'min' | 'max'*/
  ) {
    return function (value) {
      var filterValue = createFilterValue(value, minOrMax);
      var newFilter = minOrMax === 'min' ? compileFilter(fieldKey, filterValue, filterMax && (filterMax < filterValue ? createFilterValue(value, 'max') : filterMax)) : compileFilter(fieldKey, filterMin && (filterMin > filterValue ? createFilterValue(value, 'min') : filterMin), filterValue);
      onChangeFilter(newFilter);
    };
  };

  return /*#__PURE__*/React.createElement(_FilterSection.default, {
    title: label,
    icon: /*#__PURE__*/React.createElement(_DateRange.default, null),
    isFiltered: isFiltered,
    onShowAllClick: function onShowAllClick() {
      return onChangeFilter(null);
    }
  }, /*#__PURE__*/React.createElement(_ListItem.default, null, /*#__PURE__*/React.createElement(_DateField.default, {
    minDate: (0, _helpers.parseDateString)(min),
    maxDate: (0, _helpers.parseDateString)(max),
    label: t(m.min),
    value: filterMin || min,
    onChange: handleChange('min'),
    fullWidth: false,
    margin: "dense",
    className: cx.dateField
  }), /*#__PURE__*/React.createElement(_DateField.default, {
    minDate: (0, _helpers.parseDateString)(min),
    maxDate: (0, _helpers.parseDateString)(max),
    label: t(m.max),
    value: filterMax || max,
    onChange: handleChange('max'),
    fullWidth: false,
    margin: "dense",
    className: cx.dateField
  })));
};

var _default = DateFilter;
exports.default = _default;

function compileFilter(key, min, max) {
  if (min === undefined && max === undefined) return null;
  var filter = ['all'];
  if (min) filter.push(['>=', key, min]);
  if (max) filter.push(['<=', key, max]);
  return filter;
}

function parseDateFilter(filter
/*:: ?: Array<any> | null*/
) {
  if (!filter || filter.length < 2 || filter[0] !== 'all') return [];
  var minFilter = (0, _find.default)(filter).call(filter, function (d) {
    return (0, _isArray.default)(d) && d[0] === '>=';
  });
  var maxFilter = (0, _find.default)(filter).call(filter, function (d) {
    return (0, _isArray.default)(d) && d[0] === '<=';
  });
  return [minFilter && minFilter[2], maxFilter && maxFilter[2]];
}

var useStyles = (0, _styles.makeStyles)(function (theme) {
  return {
    dateField: {
      '&:not(:last-child)': {
        marginRight: theme.spacing(1)
      }
    }
  };
});
var shortDateRegExp = /^(\d{4})-(\d{2})-(\d{2})$/;

function createFilterValue(value, minOrMax) {
  var match = value.match(shortDateRegExp);
  if (!match) return value;
  return minOrMax === 'min' ? new Date(+match[1], +match[2] - 1, +match[3]).toISOString() : new Date(+match[1], +match[2] - 1, +match[3], 23, 59, 59, 999).toISOString();
}
//# sourceMappingURL=DateFilter.js.map