@woocommerce/components
Version:
UI components for WooCommerce.
135 lines (134 loc) • 6.1 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
/**
* External dependencies
*/
const element_1 = require("@wordpress/element");
const components_1 = require("@wordpress/components");
const navigation_1 = require("@woocommerce/navigation");
const lodash_1 = require("lodash");
const prop_types_1 = __importDefault(require("prop-types"));
const clsx_1 = __importDefault(require("clsx"));
/**
* Internal dependencies
*/
const search_1 = __importDefault(require("../search"));
const utils_1 = require("./utils");
class SearchFilter extends element_1.Component {
constructor({ filter, config, query }) {
super(...arguments);
this.onSearchChange = this.onSearchChange.bind(this);
this.state = {
selected: [],
};
this.updateLabels = this.updateLabels.bind(this);
if (filter.value.length) {
config.input
.getLabels(filter.value, query)
.then((selected) => {
const selectedWithKeys = selected.map((s) => ({
key: s.id,
...s,
}));
this.updateLabels(selectedWithKeys);
});
}
}
componentDidUpdate(prevProps) {
const { config, filter, query } = this.props;
const { filter: prevFilter } = prevProps;
if (filter.value.length && !(0, lodash_1.isEqual)(prevFilter, filter)) {
const { selected } = this.state;
const ids = selected.map((item) => item.key);
const filterIds = (0, navigation_1.getIdsFromQuery)(filter.value);
const hasNewIds = filterIds.every((id) => !ids.includes(id));
if (hasNewIds) {
config.input
.getLabels(filter.value, query)
.then(this.updateLabels);
}
}
}
updateLabels(selected) {
const prevIds = this.state.selected.map((item) => item.key);
const ids = selected.map((item) => item.key);
if (!(0, lodash_1.isEqual)(ids.sort(), prevIds.sort())) {
this.setState({ selected });
}
}
onSearchChange(values) {
this.setState({
selected: values,
});
const { onFilterChange } = this.props;
const idList = values.map((value) => value.key).join(',');
onFilterChange({ property: 'value', value: idList });
}
getScreenReaderText(filter, config) {
const { selected } = this.state;
if (selected.length === 0) {
return '';
}
const rule = (0, lodash_1.find)(config.rules, { value: filter.rule }) || {};
const filterStr = selected.map((item) => item.label).join(', ');
return (0, utils_1.textContent)((0, utils_1.backwardsCompatibleCreateInterpolateElement)(config.labels.title, {
filter: (0, element_1.createElement)(element_1.Fragment, null, filterStr),
rule: (0, element_1.createElement)(element_1.Fragment, null, rule.label),
title: (0, element_1.createElement)(element_1.Fragment, null),
}));
}
render() {
const { className, config, filter, onFilterChange, isEnglish } = this.props;
const { selected } = this.state;
const { rule } = filter;
const { input, labels, rules } = config;
const children = (0, utils_1.backwardsCompatibleCreateInterpolateElement)(labels.title, {
title: (0, element_1.createElement)("span", { className: className }),
rule: ((0, element_1.createElement)(components_1.SelectControl, { className: (0, clsx_1.default)(className, 'woocommerce-filters-advanced__rule'), options: rules, value: rule, onChange: (value) => onFilterChange({ property: 'rule', value }), "aria-label": labels.rule })),
filter: ((0, element_1.createElement)(search_1.default, { className: (0, clsx_1.default)(className, 'woocommerce-filters-advanced__input'), onChange: this.onSearchChange, type: input.type, autocompleter: input.autocompleter, placeholder: labels.placeholder, selected: selected, inlineTags: true, "aria-label": labels.filter })),
});
const screenReaderText = this.getScreenReaderText(filter, config);
/*eslint-disable jsx-a11y/no-noninteractive-tabindex*/
return ((0, element_1.createElement)("fieldset", { className: "woocommerce-filters-advanced__line-item", tabIndex: "0" },
(0, element_1.createElement)("legend", { className: "screen-reader-text" }, labels.add || ''),
(0, element_1.createElement)("div", { className: (0, clsx_1.default)('woocommerce-filters-advanced__fieldset', {
'is-english': isEnglish,
}) }, children),
screenReaderText && ((0, element_1.createElement)("span", { className: "screen-reader-text" }, screenReaderText))));
/*eslint-enable jsx-a11y/no-noninteractive-tabindex*/
}
}
SearchFilter.propTypes = {
/**
* The configuration object for the single filter to be rendered.
*/
config: prop_types_1.default.shape({
labels: prop_types_1.default.shape({
placeholder: prop_types_1.default.string,
rule: prop_types_1.default.string,
title: prop_types_1.default.string,
}),
rules: prop_types_1.default.arrayOf(prop_types_1.default.object),
input: prop_types_1.default.object,
}).isRequired,
/**
* The activeFilter handed down by AdvancedFilters.
*/
filter: prop_types_1.default.shape({
key: prop_types_1.default.string,
rule: prop_types_1.default.string,
value: prop_types_1.default.string,
}).isRequired,
/**
* Function to be called on update.
*/
onFilterChange: prop_types_1.default.func.isRequired,
/**
* The query string represented in object form.
*/
query: prop_types_1.default.object,
};
exports.default = SearchFilter;