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

A React Component for viewing and filtering GeoJSON

'use strict';

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

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _List = require('@material-ui/core/List');

var _List2 = _interopRequireDefault(_List);

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

var _ListItem2 = _interopRequireDefault(_ListItem);

var _ListItemIcon = require('@material-ui/core/ListItemIcon');

var _ListItemIcon2 = _interopRequireDefault(_ListItemIcon);

var _ListItemText = require('@material-ui/core/ListItemText');

var _ListItemText2 = _interopRequireDefault(_ListItemText);

var _Divider = require('@material-ui/core/Divider');

var _Divider2 = _interopRequireDefault(_Divider);

var _Settings = require('@material-ui/icons/Settings');

var _Settings2 = _interopRequireDefault(_Settings);

var _Paper = require('@material-ui/core/Paper');

var _Paper2 = _interopRequireDefault(_Paper);

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

var _DiscreteFilter = require('./DiscreteFilter');

var _DiscreteFilter2 = _interopRequireDefault(_DiscreteFilter);

var _DateFilter = require('./DateFilter');

var _DateFilter2 = _interopRequireDefault(_DateFilter);

var _constants = require('../../constants');

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

var styles = {
  root: {
    minWidth: 300,
    flex: 1,
    overflowY: 'auto',
    zIndex: 20,
    // backgroundColor: 'white',
    '@media print': {
      display: 'none'
    }
  },
  list: {
    paddingTop: 0
  },
  listItemInner: {
    padding: 0
  },
  listItemText: {
    padding: '0 16px 0 0'
  },
  listIcon: {
    fill: 'rgb(117, 117, 117)',
    left: 0,
    top: 0,
    margin: '12px',
    position: 'absolute'
  },
  link: {
    color: '#000',
    display: 'block',
    padding: '16px 16px 16px 48px',
    textDecoration: 'none'
  }
};

var messages = (0, _reactIntl.defineMessages)({
  changeFilters: {
    'id': 'filter.change',
    'defaultMessage': 'Change Filters\u2026'
  }
});

var FilterPane = function FilterPane(_ref) {
  var classes = _ref.classes,
      _ref$filters = _ref.filters,
      filters = _ref$filters === undefined ? {} : _ref$filters,
      _ref$fieldStats = _ref.fieldStats,
      fieldStats = _ref$fieldStats === undefined ? {} : _ref$fieldStats,
      _ref$filterFields = _ref.filterFields,
      filterFields = _ref$filterFields === undefined ? [] : _ref$filterFields,
      coloredField = _ref.coloredField,
      colorIndex = _ref.colorIndex,
      _ref$onUpdateFilter = _ref.onUpdateFilter,
      onUpdateFilter = _ref$onUpdateFilter === undefined ? function (x) {
    return x;
  } : _ref$onUpdateFilter,
      _ref$onClickSettings = _ref.onClickSettings,
      onClickSettings = _ref$onClickSettings === undefined ? function (x) {
    return x;
  } : _ref$onClickSettings;
  return _react2.default.createElement(
    _Paper2.default,
    { className: classes.root, elevation: 3 },
    _react2.default.createElement(
      _List2.default,
      { className: classes.list, dense: true },
      filterFields.map(function (f) {
        var field = fieldStats.properties[f] || {};
        var filter = filters[f];
        switch (field.filterType) {
          case _constants.FILTER_TYPE_DISCRETE:
            return _react2.default.createElement(
              'div',
              { key: f },
              _react2.default.createElement(_DiscreteFilter2.default, {
                fieldName: f,
                checked: filter ? filter.in : field.values.map(function (v) {
                  return v.value;
                }),
                values: field.values,
                colored: coloredField === f || coloredField + '.0' === f,
                colorIndex: colorIndex,
                onUpdate: onUpdateFilter }),
              _react2.default.createElement(_Divider2.default, null)
            );
          case _constants.FILTER_TYPE_RANGE:
            return;
          case _constants.FILTER_TYPE_TEXT:
            return;
          case _constants.FILTER_TYPE_DATE:
            return _react2.default.createElement(
              'div',
              { key: f },
              _react2.default.createElement(_DateFilter2.default, {
                fieldName: f,
                filter: filter,
                min: filter ? filter['>='] : field.valueStats.min,
                max: filter ? filter['<='] : field.valueStats.max,
                valueMin: field.valueStats.min,
                valueMax: field.valueStats.max,
                onUpdate: onUpdateFilter }),
              _react2.default.createElement(_Divider2.default, null)
            );
        }
      }),
      _react2.default.createElement(
        _ListItem2.default,
        { button: true, onClick: onClickSettings },
        _react2.default.createElement(
          _ListItemIcon2.default,
          null,
          _react2.default.createElement(_Settings2.default, null)
        ),
        _react2.default.createElement(_ListItemText2.default, {
          classes: { root: classes.listItemText },
          primary: _react2.default.createElement(_reactIntl.FormattedMessage, messages.changeFilters)
        })
      )
    )
  );
};

FilterPane.propTypes = {
  filters: _propTypes2.default.object,
  fieldStats: _propTypes2.default.object.isRequired,
  filterFields: _propTypes2.default.arrayOf(_propTypes2.default.string).isRequired,
  /* called with valid mapbox-gl filter when updated */
  onUpdateFilter: _propTypes2.default.func,
  onClickSettings: _propTypes2.default.func
};

exports.default = (0, _styles.withStyles)(styles)(FilterPane);
//# sourceMappingURL=FilterPane.js.map