fix: README examples & change template type
This commit is contained in:
parent
3d402d4560
commit
391c3e39cb
|
@ -646,6 +646,8 @@ classNames: {
|
|||
If you want just extend a little original template then you may use `Choices.defaults.templates` to get access to
|
||||
original template function.
|
||||
|
||||
Templates receive the full Choices config as the first argument to any template, which allows you to conditionally display things based on the options specified.
|
||||
|
||||
**Example:**
|
||||
|
||||
```js
|
||||
|
@ -665,7 +667,7 @@ or more complex:
|
|||
const example = new Choices(element, {
|
||||
callbackOnCreateTemplates: function(template) {
|
||||
return {
|
||||
item: (classNames, data) => {
|
||||
item: ({ classNames }, data) => {
|
||||
return template(`
|
||||
<div class="${classNames.item} ${
|
||||
data.highlighted
|
||||
|
@ -680,7 +682,7 @@ const example = new Choices(element, {
|
|||
</div>
|
||||
`);
|
||||
},
|
||||
choice: (classNames, data) => {
|
||||
choice: ({ classNames }, data) => {
|
||||
return template(`
|
||||
<div class="${classNames.item} ${classNames.itemChoice} ${
|
||||
data.disabled ? classNames.itemDisabled : classNames.itemSelectable
|
||||
|
|
|
@ -8,13 +8,11 @@ import { Group } from './interfaces/group';
|
|||
import { Item } from './interfaces/item';
|
||||
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>;
|
||||
type TemplateOptions = Record<'classNames' | 'allowHTML', any>;
|
||||
|
||||
const templates = {
|
||||
containerOuter(
|
||||
{ classNames: { containerOuter } }: Options,
|
||||
{ classNames: { containerOuter } }: TemplateOptions,
|
||||
dir: HTMLElement['dir'],
|
||||
isSelectElement: boolean,
|
||||
isSelectOneElement: boolean,
|
||||
|
@ -48,14 +46,14 @@ const templates = {
|
|||
return div;
|
||||
},
|
||||
|
||||
containerInner({ classNames: { containerInner } }: Options): HTMLDivElement {
|
||||
containerInner({ classNames: { containerInner } }: TemplateOptions): HTMLDivElement {
|
||||
return Object.assign(document.createElement('div'), {
|
||||
className: containerInner,
|
||||
});
|
||||
},
|
||||
|
||||
itemList(
|
||||
{ classNames: { list, listSingle, listItems } }: Options,
|
||||
{ classNames: { list, listSingle, listItems } }: TemplateOptions,
|
||||
isSelectOneElement: boolean,
|
||||
): HTMLDivElement {
|
||||
return Object.assign(document.createElement('div'), {
|
||||
|
@ -64,7 +62,7 @@ const templates = {
|
|||
},
|
||||
|
||||
placeholder(
|
||||
{ allowHTML, classNames: { placeholder } }: Options,
|
||||
{ allowHTML, classNames: { placeholder } }: TemplateOptions,
|
||||
value: string,
|
||||
): HTMLDivElement {
|
||||
return Object.assign(document.createElement('div'), {
|
||||
|
@ -83,7 +81,7 @@ const templates = {
|
|||
itemSelectable,
|
||||
placeholder,
|
||||
},
|
||||
}: Options,
|
||||
}: TemplateOptions,
|
||||
{
|
||||
id,
|
||||
value,
|
||||
|
@ -146,7 +144,7 @@ const templates = {
|
|||
},
|
||||
|
||||
choiceList(
|
||||
{ classNames: { list } }: Options,
|
||||
{ classNames: { list } }: TemplateOptions,
|
||||
isSelectOneElement: boolean,
|
||||
): HTMLDivElement {
|
||||
const div = Object.assign(document.createElement('div'), {
|
||||
|
@ -162,7 +160,7 @@ const templates = {
|
|||
},
|
||||
|
||||
choiceGroup(
|
||||
{ allowHTML, classNames: { group, groupHeading, itemDisabled } }: Options,
|
||||
{ allowHTML, classNames: { group, groupHeading, itemDisabled } }: TemplateOptions,
|
||||
{ id, value, disabled }: Group,
|
||||
): HTMLDivElement {
|
||||
const div = Object.assign(document.createElement('div'), {
|
||||
|
@ -202,7 +200,7 @@ const templates = {
|
|||
itemDisabled,
|
||||
placeholder,
|
||||
},
|
||||
}: Options,
|
||||
}: TemplateOptions,
|
||||
{
|
||||
id,
|
||||
value,
|
||||
|
@ -251,7 +249,7 @@ const templates = {
|
|||
},
|
||||
|
||||
input(
|
||||
{ classNames: { input, inputCloned } }: Options,
|
||||
{ classNames: { input, inputCloned } }: TemplateOptions,
|
||||
placeholderValue: string,
|
||||
): HTMLInputElement {
|
||||
const inp = Object.assign(document.createElement('input'), {
|
||||
|
@ -270,7 +268,7 @@ const templates = {
|
|||
return inp;
|
||||
},
|
||||
|
||||
dropdown({ classNames: { list, listDropdown } }: Options): HTMLDivElement {
|
||||
dropdown({ classNames: { list, listDropdown } }: TemplateOptions): HTMLDivElement {
|
||||
const div = document.createElement('div');
|
||||
|
||||
div.classList.add(list, listDropdown);
|
||||
|
@ -283,7 +281,7 @@ const templates = {
|
|||
{
|
||||
allowHTML,
|
||||
classNames: { item, itemChoice, noResults, noChoices },
|
||||
}: Options,
|
||||
}: TemplateOptions,
|
||||
innerText: string,
|
||||
type: 'no-choices' | 'no-results' | '' = '',
|
||||
): HTMLDivElement {
|
||||
|
|
Loading…
Reference in New Issue