@collectionspace/cspace-public-browser
Version:
CollectionSpace public browser
185 lines (183 loc) • 7.55 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactIntl = require("react-intl");
var _reactRouter = require("react-router");
var _immutable = _interopRequireDefault(require("immutable"));
var _memoizeOne = _interopRequireDefault(require("memoize-one"));
var _FilterSearchInput = _interopRequireDefault(require("./FilterSearchInput"));
var _PanelContainer = _interopRequireDefault(require("../../layout/PanelContainer"));
var _Filter = _interopRequireDefault(require("../../../../styles/cspace/Filter.css"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const propTypes = {
aggregation: _propTypes.default.instanceOf(_immutable.default.Map),
field: _propTypes.default.string.isRequired,
formatValue: _propTypes.default.func,
history: _propTypes.default.shape({
push: _propTypes.default.func.isRequired
}).isRequired,
id: _propTypes.default.string.isRequired,
messages: _propTypes.default.shape({
label: _propTypes.default.object.isRequired
}).isRequired,
onSearchValueCommit: _propTypes.default.func,
onValueCommit: _propTypes.default.func,
params: _propTypes.default.instanceOf(_immutable.default.Map).isRequired,
searchValue: _propTypes.default.string,
showSearch: _propTypes.default.bool
};
const defaultProps = {
aggregation: _immutable.default.Map(),
formatValue: undefined,
onSearchValueCommit: () => undefined,
onValueCommit: () => undefined,
searchValue: undefined,
showSearch: true
};
const messages = (0, _reactIntl.defineMessages)({
count: {
"id": "filter.count",
"defaultMessage": "({count, number})"
}
});
const getFormattedValues = (0, _memoizeOne.default)((aggregation, formatValue) => {
if (!formatValue) {
return undefined;
}
const formattedValues = {};
aggregation.get('buckets').forEach(bucket => {
const value = bucket.get('key');
const formattedValue = formatValue(value);
formattedValues[value] = formattedValue;
});
return formattedValues;
});
const handleCheckboxFocus = event => {
const {
target: focusedFieldElement
} = event;
const fieldIndex = focusedFieldElement.getAttribute('data-number');
const focusedFieldLiElement = focusedFieldElement.parentElement.parentElement;
const focusedFieldUlElement = focusedFieldLiElement.parentElement;
const newScrollPosition = focusedFieldLiElement.getBoundingClientRect().height * fieldIndex;
focusedFieldUlElement.scrollTop = newScrollPosition;
focusedFieldUlElement.scrollIntoView({
block: 'end',
behavior: 'instant'
});
};
class Filter extends _react.Component {
constructor() {
super();
this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
this.handleSearchInputCommit = this.handleSearchInputCommit.bind(this);
}
handleSearchInputCommit(value) {
const {
id,
onSearchValueCommit
} = this.props;
onSearchValueCommit(id, value);
}
handleCheckboxChange(event) {
const {
history,
id,
onValueCommit
} = this.props;
const {
target: checkbox
} = event;
const {
dataset,
name
} = checkbox;
const {
type
} = dataset;
const value = type === 'number' ? Number.parseInt(name, 10) : name;
onValueCommit(history, id, value, checkbox.checked);
}
renderBuckets() {
const {
aggregation,
formatValue,
id,
params,
searchValue
} = this.props;
const formattedValues = getFormattedValues(aggregation, formatValue);
const buckets = aggregation.get('buckets');
let matchingBuckets = buckets;
if (searchValue) {
const needle = searchValue.toLowerCase();
matchingBuckets = buckets.filter(bucket => {
const value = bucket.get('key');
const formattedValue = formattedValues ? formattedValues[value] : value;
const haystack = formattedValue.toLowerCase();
return haystack.includes(needle);
});
}
let selectedValues = params.get(id) || _immutable.default.List();
if (!_immutable.default.List.isList(selectedValues)) {
selectedValues = _immutable.default.List.of(selectedValues);
}
return matchingBuckets.map((bucket, index) => {
const value = bucket.get('key');
const type = typeof value;
const count = bucket.get('doc_count');
const isSelected = selectedValues.indexOf(value) >= 0;
const formattedValue = formattedValues ? formattedValues[value] : value;
return /*#__PURE__*/_react.default.createElement("li", {
key: value
}, /*#__PURE__*/_react.default.createElement("label", null, /*#__PURE__*/_react.default.createElement("input", {
checked: isSelected,
"data-type": type !== 'string' ? type : undefined,
"data-number": index,
name: value,
type: "checkbox",
onChange: this.handleCheckboxChange,
onFocus: handleCheckboxFocus
}), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", null, formattedValue, ' ', /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _extends({}, messages.count, {
values: {
count
}
}))))));
});
}
render() {
const {
aggregation,
id,
messages: filterMessages,
searchValue,
showSearch
} = this.props;
const buckets = aggregation.get('buckets');
const isEmpty = !buckets || buckets.size === 0;
if (isEmpty) {
return null;
}
// eslint-disable-next-line react/jsx-props-no-spreading
const title = /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, filterMessages.label);
return /*#__PURE__*/_react.default.createElement(_PanelContainer.default, {
id: `Filter-${id}`,
title: title
}, /*#__PURE__*/_react.default.createElement("div", {
className: _Filter.default.common
}, showSearch && /*#__PURE__*/_react.default.createElement(_FilterSearchInput.default, {
value: searchValue,
onCommit: this.handleSearchInputCommit
}), /*#__PURE__*/_react.default.createElement("ul", null, this.renderBuckets(buckets))));
}
}
Filter.propTypes = propTypes;
Filter.defaultProps = defaultProps;
var _default = exports.default = (0, _reactRouter.withRouter)(Filter);