@codinglane/dropdown
Version:
An easy-to-use react dropdown
104 lines (103 loc) • 4.09 kB
JavaScript
export const filterOptions = (field, filter) => {
if (!filter || filter === null)
return true;
const parts = filter.toLowerCase().split(' ');
return parts.every((part) => field.label.toLowerCase().includes(part));
};
export const createGroups = (options, filter) => {
const groups = options
.filter((option) => filterOptions(option, filter))
.map((field) => field.group)
.filter((group, index, self) => self.indexOf(group) === index);
return groups;
};
export const mapToGroups = (options, filter) => {
const groups = createGroups(options, filter);
const mapped = [];
groups.forEach((group) => {
const groupOption = options
.filter((option) => option.group === group)
.filter((option) => filterOptions(option, filter))
.map((option) => ({ value: option.value, label: option.label, favorite: option.favorite }));
mapped.push({
name: group,
options: groupOption,
isParent: false,
});
});
return mapped.sort((left, right) => (left.name < right.name ? -1 : 1));
};
export const mapToGroupsWithFavorites = (options, labels, filter) => {
const grouped = mapToGroups(options, filter);
const favoriteGroup = {
name: labels.favorite ?? 'Favorites',
isParent: true,
options: [],
};
const nonFavoriteGroup = {
name: labels.nonFavorite ?? 'Standard',
isParent: true,
options: [],
};
grouped.forEach((group) => {
if (group.isParent)
throw new Error('We should not have a parent group!');
const favOptions = group.options.filter((opt) => opt.favorite);
const nonFavOptions = group.options.filter((opt) => !opt.favorite);
if (favOptions.length > 0)
favoriteGroup.options.push({
...group,
options: favOptions,
});
if (nonFavOptions.length > 0)
nonFavoriteGroup.options.push({
...group,
options: nonFavOptions,
});
});
return [favoriteGroup, nonFavoriteGroup];
};
export const mapToFavoriteGroup = (options, labels, filter) => {
const favoriteGroup = {
name: labels.favorite ?? 'Favorites',
isParent: false,
options: [],
};
const nonFavoriteGroup = {
name: labels.nonFavorite ?? 'Standard',
isParent: false,
options: [],
};
options
.filter((option) => filterOptions(option, filter))
.forEach((option) => {
if (option.favorite)
favoriteGroup.options.push(option);
else
nonFavoriteGroup.options.push(option);
});
return [favoriteGroup, nonFavoriteGroup];
};
export const setStyleSheet = (style) => {
const doc = document.documentElement.style;
doc.setProperty('--dropdownBackgroundColor', style?.dropdownBackgroundColor ?? 'white');
doc.setProperty('--dropdownPrimaryColor', style?.color ?? 'black');
doc.setProperty('--dropdownFontSize', style?.dropdownFontSize ?? '0.9em');
doc.setProperty('--dropdownFontFamily', style?.dropdownFontFamily ?? "'Courier New', Courier, monospace");
};
export const getScrollbarWidth = () => {
// Creating invisible container
const outer = document.createElement('div');
outer.style.visibility = 'hidden';
outer.style.overflow = 'scroll'; // forcing scrollbar to appear
outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
document.body.appendChild(outer);
// Creating inner element and placing it in the container
const inner = document.createElement('div');
outer.appendChild(inner);
// Calculating difference between container's full width and the child width
const scrollbarHeight = outer.offsetHeight - inner.offsetHeight;
// Removing temporary elements from the DOM
outer.parentNode.removeChild(outer);
return scrollbarHeight;
};