deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-05-12 02:26:35 +02:00
Code Issues Projects Releases Wiki Activity

fix: Circular dep caused by requiring options

Browse source
This commit is contained in:
viction 2021-12-25 21:38:19 +00:00
parent 545a442f5c
commit 3d402d4560
1 changed files with 38 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
src/scripts/templates.ts
View file

@ -6,9 +6,12 @@
import { Choice } from './interfaces/choice'; import { Choice } from './interfaces/choice';
import { Group } from './interfaces/group'; import { Group } from './interfaces/group';
import { Item } from './interfaces/item'; import { Item } from './interfaces/item';
import { Options } from './interfaces/options';
import { PassedElementType } from './interfaces/passed-element-type'; import { PassedElementType } from './interfaces/passed-element-type';
// Not the most ideal solution to requiring Options from ./interfaces/options and creating a circular dep
// Fixing the circular would require merging the interfaces/templates or doing something like below.
type Options = Record<'classNames' | 'allowHTML', any>;
const templates = { const templates = {
containerOuter( containerOuter(
{ classNames: { containerOuter } }: Options, { classNames: { containerOuter } }: Options,
@ -45,20 +48,14 @@ const templates = {
return div; return div;
}, },
containerInner({ containerInner({ classNames: { containerInner } }: Options): HTMLDivElement {
classNames: { containerInner },
}: Options): HTMLDivElement {
return Object.assign(document.createElement('div'), { return Object.assign(document.createElement('div'), {
className: containerInner, className: containerInner,
}); });
}, },
itemList({ itemList(
classNames: { { classNames: { list, listSingle, listItems } }: Options,
list,
listSingle,
listItems,
}}: Options,
isSelectOneElement: boolean, isSelectOneElement: boolean,
): HTMLDivElement { ): HTMLDivElement {
return Object.assign(document.createElement('div'), { return Object.assign(document.createElement('div'), {
@ -76,13 +73,17 @@ const templates = {
}); });
}, },
item({ allowHTML, classNames: { item(
item, {
button, allowHTML,
highlightedState, classNames: {
itemSelectable, item,
placeholder, button,
} }: Options, highlightedState,
itemSelectable,
placeholder,
},
}: Options,
{ {
id, id,
value, value,
@ -160,13 +161,8 @@ const templates = {
return div; return div;
}, },
choiceGroup({ choiceGroup(
allowHTML, { allowHTML, classNames: { group, groupHeading, itemDisabled } }: Options,
classNames: {
group,
groupHeading,
itemDisabled,
} }: Options,
{ id, value, disabled }: Group, { id, value, disabled }: Group,
): HTMLDivElement { ): HTMLDivElement {
const div = Object.assign(document.createElement('div'), { const div = Object.assign(document.createElement('div'), {
@ -195,17 +191,18 @@ const templates = {
return div; return div;
}, },
choice({ choice(
allowHTML, {
classNames: { allowHTML,
item, classNames: {
itemChoice, item,
itemSelectable, itemChoice,
selectedState, itemSelectable,
itemDisabled, selectedState,
placeholder, itemDisabled,
} placeholder,
}: Options, },
}: Options,
{ {
id, id,
value, value,
@ -273,12 +270,7 @@ const templates = {
return inp; return inp;
}, },
dropdown({ dropdown({ classNames: { list, listDropdown } }: Options): HTMLDivElement {
classNames: {
list,
listDropdown,
}
}: Options): HTMLDivElement {
const div = document.createElement('div'); const div = document.createElement('div');
div.classList.add(list, listDropdown); div.classList.add(list, listDropdown);
@ -287,15 +279,11 @@ const templates = {
return div; return div;
}, },
notice({ notice(
allowHTML, {
classNames: { allowHTML,
item, classNames: { item, itemChoice, noResults, noChoices },
itemChoice, }: Options,
noResults,
noChoices,
}
}: Options,
innerText: string, innerText: string,
type: 'no-choices' | 'no-results' | '' = '', type: 'no-choices' | 'no-results' | '' = '',
): HTMLDivElement { ): HTMLDivElement {