react-mapfilter
Version:
A React Component for viewing and filtering GeoJSON
260 lines (212 loc) • 8.38 kB
JavaScript
'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 _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _Checkbox = require('@material-ui/core/Checkbox');
var _Checkbox2 = _interopRequireDefault(_Checkbox);
var _CheckBox = require('@material-ui/icons/CheckBox');
var _CheckBox2 = _interopRequireDefault(_CheckBox);
var _CheckBoxOutlineBlank = require('@material-ui/icons/CheckBoxOutlineBlank');
var _CheckBoxOutlineBlank2 = _interopRequireDefault(_CheckBoxOutlineBlank);
var _FormGroup = require('@material-ui/core/FormGroup');
var _FormGroup2 = _interopRequireDefault(_FormGroup);
var _FormControlLabel = require('@material-ui/core/FormControlLabel');
var _FormControlLabel2 = _interopRequireDefault(_FormControlLabel);
var _List = require('@material-ui/icons/List');
var _List2 = _interopRequireDefault(_List);
var _styles = require('@material-ui/core/styles');
var _reactIntl = require('react-intl');
var _FilterSection = require('./FilterSection');
var _FilterSection2 = _interopRequireDefault(_FilterSection);
var _OnlyButton = require('./OnlyButton');
var _OnlyButton2 = _interopRequireDefault(_OnlyButton);
var _intl_helpers = require('../../util/intl_helpers');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// import {FIELD_TYPE_BOOLEAN, FIELD_TYPE_NUMBER} from '../../constants'
var styles = {
formGroup: {
paddingBottom: 8
},
formControlRoot: {
lineHeight: '22px',
padding: '2px 16px',
boxSizing: 'border-box',
width: '100%',
minWidth: 0,
marginRight: 0,
marginLeft: 0
},
formControlLabel: {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
},
coloredSpan: {
backgroundColor: 'rgb(0, 188, 212)',
borderRadius: 2,
padding: '2px 5px',
color: 'white',
letterSpacing: '0.02em',
fontSize: 13,
lineHeight: '24px'
},
showAll: {
top: 6,
fontSize: 12
},
checkboxItem: {
display: 'flex',
justifyContent: 'space-between'
},
checkboxButton: {
width: 24,
height: 24,
marginRight: 16
},
checkboxIcon: {
width: 20,
height: 20
}
};
var DiscreteFilter = function (_React$PureComponent) {
(0, _inherits3.default)(DiscreteFilter, _React$PureComponent);
function DiscreteFilter() {
var _ref;
var _temp, _this, _ret;
(0, _classCallCheck3.default)(this, DiscreteFilter);
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 = DiscreteFilter.__proto__ || (0, _getPrototypeOf2.default)(DiscreteFilter)).call.apply(_ref, [this].concat(args))), _this), _this.state = {}, _this.showAll = function (e) {
e.preventDefault();
_this.props.onUpdate({
exp: 'in',
key: _this.props.fieldName,
val: null
});
}, _this.handleCheck = function (value, e) {
var checked = _this.props.checked.slice(0);
if (e.target.checked && checked.indexOf(value) === -1) {
checked.push(value);
} else if (!e.target.checked && checked.indexOf(value) > -1) {
checked.splice(checked.indexOf(value), 1);
}
_this.props.onUpdate({
exp: 'in',
key: _this.props.fieldName,
val: checked
});
}, _this.handleMouseLeave = function () {
_this.setState({ hovered: false });
}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
}
(0, _createClass3.default)(DiscreteFilter, [{
key: 'handleOnlyClick',
value: function handleOnlyClick(key, e) {
e.preventDefault();
this.props.onUpdate({
exp: 'in',
key: this.props.fieldName,
val: [key]
});
}
}, {
key: 'handleMouseEnter',
value: function handleMouseEnter(key) {
this.setState({ hovered: key });
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var _props = this.props,
fieldName = _props.fieldName,
checked = _props.checked,
values = _props.values,
classes = _props.classes,
colored = _props.colored,
colorIndex = _props.colorIndex,
formatMessage = _props.intl.formatMessage;
var isFiltered = checked.length < values.length;
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(_List2.default, null),
isFiltered: isFiltered,
showAll: this.showAll },
_react2.default.createElement(
_FormGroup2.default,
{ className: classes.formGroup },
values.map(function (v, i) {
return _react2.default.createElement(
'div',
{
className: classes.checkboxItem,
key: v.value,
onMouseEnter: function onMouseEnter() {
return _this2.handleMouseEnter(v.value);
},
onMouseLeave: _this2.handleMouseLeave },
_react2.default.createElement(_FormControlLabel2.default, {
classes: { root: classes.formControlRoot, label: classes.formControlLabel },
control: _react2.default.createElement(_Checkbox2.default, {
classes: { root: classes.checkboxButton },
checked: checked.indexOf(v.value) > -1,
icon: _react2.default.createElement(_CheckBoxOutlineBlank2.default, { classes: { root: classes.checkboxIcon } }),
checkedIcon: _react2.default.createElement(_CheckBox2.default, { classes: { root: classes.checkboxIcon } }),
onChange: function onChange(e) {
return _this2.handleCheck(v.value, e);
}
}),
label: _react2.default.createElement(
'span',
{
className: colored ? classes.coloredSpan : '',
style: colored ? { backgroundColor: colorIndex[v.value] } : null,
title: formatMessage((0, _intl_helpers.createMessage)('field_value')(v.value)) },
formatMessage((0, _intl_helpers.createMessage)('field_value')(v.value))
)
}),
_this2.state.hovered === v.value && _react2.default.createElement(_OnlyButton2.default, { onClick: function onClick(e) {
return _this2.handleOnlyClick(v.value, e);
} })
);
})
)
);
}
}]);
return DiscreteFilter;
}(_react2.default.PureComponent);
DiscreteFilter.propTypes = {
fieldName: _propTypes2.default.string.isRequired,
checked: _propTypes2.default.array,
values: _propTypes2.default.arrayOf(_propTypes2.default.object),
onUpdate: _propTypes2.default.func
};
DiscreteFilter.defaultProps = {
checked: [],
onUpdate: function onUpdate(x) {
return x;
}
};
exports.default = (0, _styles.withStyles)(styles)((0, _reactIntl.injectIntl)(DiscreteFilter));
//# sourceMappingURL=DiscreteFilter.js.map