@paraboly/pwc-multi-filter
Version:
A wrapper over pwc-tabview and pwc-filter. Provides means of dynamically managing multiple filters via a single component.
205 lines (185 loc) • 7.33 kB
JavaScript
import { r as registerInstance, h, d as getElement } from './core-ba89e169.js';
import { c as createCommonjsModule } from './_commonjsHelpers-4ab098b6.js';
import { _ } from './lodash-62c1633d.js';
var fuzzy = createCommonjsModule(function (module, exports) {
/*
* Fuzzy
* https://github.com/myork/fuzzy
*
* Copyright (c) 2012 Matt York
* Licensed under the MIT license.
*/
(function() {
var root = this;
var fuzzy = {};
// Use in node or in browser
if ('object' !== 'undefined') {
module.exports = fuzzy;
} else {
root.fuzzy = fuzzy;
}
// Return all elements of `array` that have a fuzzy
// match against `pattern`.
fuzzy.simpleFilter = function(pattern, array) {
return array.filter(function(str) {
return fuzzy.test(pattern, str);
});
};
// Does `pattern` fuzzy match `str`?
fuzzy.test = function(pattern, str) {
return fuzzy.match(pattern, str) !== null;
};
// If `pattern` matches `str`, wrap each matching character
// in `opts.pre` and `opts.post`. If no match, return null
fuzzy.match = function(pattern, str, opts) {
opts = opts || {};
var patternIdx = 0
, result = []
, len = str.length
, totalScore = 0
, currScore = 0
// prefix
, pre = opts.pre || ''
// suffix
, post = opts.post || ''
// String to compare against. This might be a lowercase version of the
// raw string
, compareString = opts.caseSensitive && str || str.toLowerCase()
, ch;
pattern = opts.caseSensitive && pattern || pattern.toLowerCase();
// For each character in the string, either add it to the result
// or wrap in template if it's the next string in the pattern
for(var idx = 0; idx < len; idx++) {
ch = str[idx];
if(compareString[idx] === pattern[patternIdx]) {
ch = pre + ch + post;
patternIdx += 1;
// consecutive characters should increase the score more than linearly
currScore += 1 + currScore;
} else {
currScore = 0;
}
totalScore += currScore;
result[result.length] = ch;
}
// return rendered string if we have a match for every char
if(patternIdx === pattern.length) {
// if the string is an exact match with pattern, totalScore should be maxed
totalScore = (compareString === pattern) ? Infinity : totalScore;
return {rendered: result.join(''), score: totalScore};
}
return null;
};
// The normal entry point. Filters `arr` for matches against `pattern`.
// It returns an array with matching values of the type:
//
// [{
// string: '<b>lah' // The rendered string
// , index: 2 // The index of the element in `arr`
// , original: 'blah' // The original element in `arr`
// }]
//
// `opts` is an optional argument bag. Details:
//
// opts = {
// // string to put before a matching character
// pre: '<b>'
//
// // string to put after matching character
// , post: '</b>'
//
// // Optional function. Input is an entry in the given arr`,
// // output should be the string to test `pattern` against.
// // In this example, if `arr = [{crying: 'koala'}]` we would return
// // 'koala'.
// , extract: function(arg) { return arg.crying; }
// }
fuzzy.filter = function(pattern, arr, opts) {
if(!arr || arr.length === 0) {
return [];
}
if (typeof pattern !== 'string') {
return arr;
}
opts = opts || {};
return arr
.reduce(function(prev, element, idx, arr) {
var str = element;
if(opts.extract) {
str = opts.extract(element);
}
var rendered = fuzzy.match(pattern, str, opts);
if(rendered != null) {
prev[prev.length] = {
string: rendered.rendered
, score: rendered.score
, index: idx
, original: element
};
}
return prev;
}, [])
// Sort by score. Browsers are inconsistent wrt stable/unstable
// sorting, so force stable by using the index in the case of tie.
// See http://ofb.net/~sethml/is-sort-stable.html
.sort(function(a,b) {
var compare = b.score - a.score;
if(compare) return compare;
return a.index - b.index;
});
};
}());
});
const PwcChoicesDropdown = class {
constructor(hostRef) {
registerInstance(this, hostRef);
}
optionsWatchHandler(newValue) {
this.filteredOptions = this.doFilter(this.searchRef.value, newValue);
}
componentWillLoad() {
this.filteredOptions = this.convertOptionsToFilterResultsAsIs(this.options);
}
doFilter(phrase, rawOptions) {
if (phrase.length === 0) {
return this.convertOptionsToFilterResultsAsIs(rawOptions);
}
return fuzzy.filter(phrase, rawOptions, {
pre: "<mark>",
post: "</mark>",
extract: el => el.label
});
}
onSearchInput() {
this.filteredOptions = this.doFilter(this.searchRef.value, this.options);
}
convertOptionsToFilterResultsAsIs(rawOptions) {
return rawOptions.map((o, i) => {
return {
string: o.label,
score: 0,
index: i,
original: o
};
});
}
render() {
const noItemOption = {
string: this.noOptionsString,
score: 0,
index: 0,
original: null
};
return [
h("input", { type: "text", class: "pwc-choices___search", placeholder: this.searchBarPlaceholder, ref: elm => (this.searchRef = elm), onInput: this.onSearchInput.bind(this) }),
h("div", { class: "pwc-choices___dropdown-item-container" }, this.filteredOptions &&
(this.filteredOptions.length === 0 ? (h("pwc-choices-dropdown-item", { option: noItemOption, isNoOption: true, toggleText: this.toggleText })) : (this.filteredOptions.map(option => (h("pwc-choices-dropdown-item", { option: option, isNoOption: false, selectCount: _.sumBy(this.selectedOptions, so => so.value === option.original.value ? 1 : 0), selectionBehaviour: this.selectionBehaviour, toggleText: this.toggleText }))))))
];
}
get root() { return getElement(this); }
static get watchers() { return {
"options": ["optionsWatchHandler"]
}; }
static get style() { return "pwc-choices-dropdown {\n margin: 0;\n padding: 0;\n font-size: medium;\n font-family: Calibri, sans-serif;\n position: absolute;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n width: 100%;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n z-index: 1000000;\n max-height: 95vh;\n}\n\n.pwc-choices___search {\n font-size: medium;\n padding: 10px;\n border: 0;\n border: 0 solid black;\n border-width: 1px 1px 1px 1px;\n background-color: white;\n border-radius: 5px 5px 0 0;\n}\n\n.pwc-choices___dropdown-item-container {\n padding: 0;\n margin: 0;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n height: 100%;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n overflow-y: auto;\n background-color: white;\n border-radius: 0 0 5px 5px;\n border: 0 solid black;\n border-width: 0 1px 1px 1px;\n}"; }
};
export { PwcChoicesDropdown as pwc_choices_dropdown };