@codinglane/dropdown
Version:
An easy-to-use react dropdown
111 lines (110 loc) • 5.19 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.getScrollbarWidth = exports.setStyleSheet = exports.mapToFavoriteGroup = exports.mapToGroupsWithFavorites = exports.mapToGroups = exports.createGroups = exports.filterOptions = void 0;
const filterOptions = (field, filter) => {
if (!filter || filter === null)
return true;
const parts = filter.toLowerCase().split(' ');
return parts.every((part) => field.label.toLowerCase().includes(part));
};
exports.filterOptions = filterOptions;
const createGroups = (options, filter) => {
const groups = options
.filter((option) => (0, exports.filterOptions)(option, filter))
.map((field) => field.group)
.filter((group, index, self) => self.indexOf(group) === index);
return groups;
};
exports.createGroups = createGroups;
const mapToGroups = (options, filter) => {
const groups = (0, exports.createGroups)(options, filter);
const mapped = [];
groups.forEach((group) => {
const groupOption = options
.filter((option) => option.group === group)
.filter((option) => (0, exports.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));
};
exports.mapToGroups = mapToGroups;
const mapToGroupsWithFavorites = (options, labels, filter) => {
var _a, _b;
const grouped = (0, exports.mapToGroups)(options, filter);
const favoriteGroup = {
name: (_a = labels.favorite) !== null && _a !== void 0 ? _a : 'Favorites',
isParent: true,
options: [],
};
const nonFavoriteGroup = {
name: (_b = labels.nonFavorite) !== null && _b !== void 0 ? _b : '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(Object.assign(Object.assign({}, group), { options: favOptions }));
if (nonFavOptions.length > 0)
nonFavoriteGroup.options.push(Object.assign(Object.assign({}, group), { options: nonFavOptions }));
});
return [favoriteGroup, nonFavoriteGroup];
};
exports.mapToGroupsWithFavorites = mapToGroupsWithFavorites;
const mapToFavoriteGroup = (options, labels, filter) => {
var _a, _b;
const favoriteGroup = {
name: (_a = labels.favorite) !== null && _a !== void 0 ? _a : 'Favorites',
isParent: false,
options: [],
};
const nonFavoriteGroup = {
name: (_b = labels.nonFavorite) !== null && _b !== void 0 ? _b : 'Standard',
isParent: false,
options: [],
};
options
.filter((option) => (0, exports.filterOptions)(option, filter))
.forEach((option) => {
if (option.favorite)
favoriteGroup.options.push(option);
else
nonFavoriteGroup.options.push(option);
});
return [favoriteGroup, nonFavoriteGroup];
};
exports.mapToFavoriteGroup = mapToFavoriteGroup;
const setStyleSheet = (style) => {
var _a, _b, _c, _d;
const doc = document.documentElement.style;
doc.setProperty('--dropdownBackgroundColor', (_a = style === null || style === void 0 ? void 0 : style.dropdownBackgroundColor) !== null && _a !== void 0 ? _a : 'white');
doc.setProperty('--dropdownPrimaryColor', (_b = style === null || style === void 0 ? void 0 : style.color) !== null && _b !== void 0 ? _b : 'black');
doc.setProperty('--dropdownFontSize', (_c = style === null || style === void 0 ? void 0 : style.dropdownFontSize) !== null && _c !== void 0 ? _c : '0.9em');
doc.setProperty('--dropdownFontFamily', (_d = style === null || style === void 0 ? void 0 : style.dropdownFontFamily) !== null && _d !== void 0 ? _d : "'Courier New', Courier, monospace");
};
exports.setStyleSheet = setStyleSheet;
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;
};
exports.getScrollbarWidth = getScrollbarWidth;