mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-08 00:42:15 +02:00
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
|
If you want just extend a little original template then you may use `Choices.defaults.templates` to get access to
|
||||||
original template function.
|
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:**
|
**Example:**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
@ -665,7 +667,7 @@ or more complex:
|
||||||
const example = new Choices(element, {
|
const example = new Choices(element, {
|
||||||
callbackOnCreateTemplates: function(template) {
|
callbackOnCreateTemplates: function(template) {
|
||||||
return {
|
return {
|
||||||
item: (classNames, data) => {
|
item: ({ classNames }, data) => {
|
||||||
return template(`
|
return template(`
|
||||||
<div class="${classNames.item} ${
|
<div class="${classNames.item} ${
|
||||||
data.highlighted
|
data.highlighted
|
||||||
|
@ -680,7 +682,7 @@ const example = new Choices(element, {
|
||||||
</div>
|
</div>
|
||||||
`);
|
`);
|
||||||
},
|
},
|
||||||
choice: (classNames, data) => {
|
choice: ({ classNames }, data) => {
|
||||||
return template(`
|
return template(`
|
||||||
<div class="${classNames.item} ${classNames.itemChoice} ${
|
<div class="${classNames.item} ${classNames.itemChoice} ${
|
||||||
data.disabled ? classNames.itemDisabled : classNames.itemSelectable
|
data.disabled ? classNames.itemDisabled : classNames.itemSelectable
|
||||||
|
|
|
@ -8,13 +8,11 @@ import { Group } from './interfaces/group';
|
||||||
import { Item } from './interfaces/item';
|
import { Item } from './interfaces/item';
|
||||||
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
|
type TemplateOptions = Record<'classNames' | 'allowHTML', any>;
|
||||||
// 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 } }: TemplateOptions,
|
||||||
dir: HTMLElement['dir'],
|
dir: HTMLElement['dir'],
|
||||||
isSelectElement: boolean,
|
isSelectElement: boolean,
|
||||||
isSelectOneElement: boolean,
|
isSelectOneElement: boolean,
|
||||||
|
@ -48,14 +46,14 @@ const templates = {
|
||||||
return div;
|
return div;
|
||||||
},
|
},
|
||||||
|
|
||||||
containerInner({ classNames: { containerInner } }: Options): HTMLDivElement {
|
containerInner({ classNames: { containerInner } }: TemplateOptions): HTMLDivElement {
|
||||||
return Object.assign(document.createElement('div'), {
|
return Object.assign(document.createElement('div'), {
|
||||||
className: containerInner,
|
className: containerInner,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
itemList(
|
itemList(
|
||||||
{ classNames: { list, listSingle, listItems } }: Options,
|
{ classNames: { list, listSingle, listItems } }: TemplateOptions,
|
||||||
isSelectOneElement: boolean,
|
isSelectOneElement: boolean,
|
||||||
): HTMLDivElement {
|
): HTMLDivElement {
|
||||||
return Object.assign(document.createElement('div'), {
|
return Object.assign(document.createElement('div'), {
|
||||||
|
@ -64,7 +62,7 @@ const templates = {
|
||||||
},
|
},
|
||||||
|
|
||||||
placeholder(
|
placeholder(
|
||||||
{ allowHTML, classNames: { placeholder } }: Options,
|
{ allowHTML, classNames: { placeholder } }: TemplateOptions,
|
||||||
value: string,
|
value: string,
|
||||||
): HTMLDivElement {
|
): HTMLDivElement {
|
||||||
return Object.assign(document.createElement('div'), {
|
return Object.assign(document.createElement('div'), {
|
||||||
|
@ -83,7 +81,7 @@ const templates = {
|
||||||
itemSelectable,
|
itemSelectable,
|
||||||
placeholder,
|
placeholder,
|
||||||
},
|
},
|
||||||
}: Options,
|
}: TemplateOptions,
|
||||||
{
|
{
|
||||||
id,
|
id,
|
||||||
value,
|
value,
|
||||||
|
@ -146,7 +144,7 @@ const templates = {
|
||||||
},
|
},
|
||||||
|
|
||||||
choiceList(
|
choiceList(
|
||||||
{ classNames: { list } }: Options,
|
{ classNames: { list } }: TemplateOptions,
|
||||||
isSelectOneElement: boolean,
|
isSelectOneElement: boolean,
|
||||||
): HTMLDivElement {
|
): HTMLDivElement {
|
||||||
const div = Object.assign(document.createElement('div'), {
|
const div = Object.assign(document.createElement('div'), {
|
||||||
|
@ -162,7 +160,7 @@ const templates = {
|
||||||
},
|
},
|
||||||
|
|
||||||
choiceGroup(
|
choiceGroup(
|
||||||
{ allowHTML, classNames: { group, groupHeading, itemDisabled } }: Options,
|
{ allowHTML, classNames: { group, groupHeading, itemDisabled } }: TemplateOptions,
|
||||||
{ id, value, disabled }: Group,
|
{ id, value, disabled }: Group,
|
||||||
): HTMLDivElement {
|
): HTMLDivElement {
|
||||||
const div = Object.assign(document.createElement('div'), {
|
const div = Object.assign(document.createElement('div'), {
|
||||||
|
@ -202,7 +200,7 @@ const templates = {
|
||||||
itemDisabled,
|
itemDisabled,
|
||||||
placeholder,
|
placeholder,
|
||||||
},
|
},
|
||||||
}: Options,
|
}: TemplateOptions,
|
||||||
{
|
{
|
||||||
id,
|
id,
|
||||||
value,
|
value,
|
||||||
|
@ -251,7 +249,7 @@ const templates = {
|
||||||
},
|
},
|
||||||
|
|
||||||
input(
|
input(
|
||||||
{ classNames: { input, inputCloned } }: Options,
|
{ classNames: { input, inputCloned } }: TemplateOptions,
|
||||||
placeholderValue: string,
|
placeholderValue: string,
|
||||||
): HTMLInputElement {
|
): HTMLInputElement {
|
||||||
const inp = Object.assign(document.createElement('input'), {
|
const inp = Object.assign(document.createElement('input'), {
|
||||||
|
@ -270,7 +268,7 @@ const templates = {
|
||||||
return inp;
|
return inp;
|
||||||
},
|
},
|
||||||
|
|
||||||
dropdown({ classNames: { list, listDropdown } }: Options): HTMLDivElement {
|
dropdown({ classNames: { list, listDropdown } }: TemplateOptions): HTMLDivElement {
|
||||||
const div = document.createElement('div');
|
const div = document.createElement('div');
|
||||||
|
|
||||||
div.classList.add(list, listDropdown);
|
div.classList.add(list, listDropdown);
|
||||||
|
@ -283,7 +281,7 @@ const templates = {
|
||||||
{
|
{
|
||||||
allowHTML,
|
allowHTML,
|
||||||
classNames: { item, itemChoice, noResults, noChoices },
|
classNames: { item, itemChoice, noResults, noChoices },
|
||||||
}: Options,
|
}: TemplateOptions,
|
||||||
innerText: string,
|
innerText: string,
|
||||||
type: 'no-choices' | 'no-results' | '' = '',
|
type: 'no-choices' | 'no-results' | '' = '',
|
||||||
): HTMLDivElement {
|
): HTMLDivElement {
|
||||||
|
|
Loading…
Reference in a new issue