repeat.d.ts 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. /**
  2. * @license
  3. * Copyright 2017 Google LLC
  4. * SPDX-License-Identifier: BSD-3-Clause
  5. */
  6. import { ChildPart, noChange } from '../lit-html.js';
  7. import { Directive, PartInfo } from '../directive.js';
  8. export declare type KeyFn<T> = (item: T, index: number) => unknown;
  9. export declare type ItemTemplate<T> = (item: T, index: number) => unknown;
  10. declare class RepeatDirective extends Directive {
  11. private _itemKeys?;
  12. constructor(partInfo: PartInfo);
  13. private _getValuesAndKeys;
  14. render<T>(items: Iterable<T>, template: ItemTemplate<T>): Array<unknown>;
  15. render<T>(items: Iterable<T>, keyFn: KeyFn<T> | ItemTemplate<T>, template: ItemTemplate<T>): Array<unknown>;
  16. update<T>(containerPart: ChildPart, [items, keyFnOrTemplate, template]: [
  17. Iterable<T>,
  18. KeyFn<T> | ItemTemplate<T>,
  19. ItemTemplate<T>
  20. ]): unknown[] | typeof noChange;
  21. }
  22. export interface RepeatDirectiveFn {
  23. <T>(items: Iterable<T>, keyFnOrTemplate: KeyFn<T> | ItemTemplate<T>, template?: ItemTemplate<T>): unknown;
  24. <T>(items: Iterable<T>, template: ItemTemplate<T>): unknown;
  25. <T>(items: Iterable<T>, keyFn: KeyFn<T> | ItemTemplate<T>, template: ItemTemplate<T>): unknown;
  26. }
  27. /**
  28. * A directive that repeats a series of values (usually `TemplateResults`)
  29. * generated from an iterable, and updates those items efficiently when the
  30. * iterable changes based on user-provided `keys` associated with each item.
  31. *
  32. * Note that if a `keyFn` is provided, strict key-to-DOM mapping is maintained,
  33. * meaning previous DOM for a given key is moved into the new position if
  34. * needed, and DOM will never be reused with values for different keys (new DOM
  35. * will always be created for new keys). This is generally the most efficient
  36. * way to use `repeat` since it performs minimum unnecessary work for insertions
  37. * and removals.
  38. *
  39. * The `keyFn` takes two parameters, the item and its index, and returns a unique key value.
  40. *
  41. * ```js
  42. * html`
  43. * <ol>
  44. * ${repeat(this.items, (item) => item.id, (item, index) => {
  45. * return html`<li>${index}: ${item.name}</li>`;
  46. * })}
  47. * </ol>
  48. * `
  49. * ```
  50. *
  51. * **Important**: If providing a `keyFn`, keys *must* be unique for all items in a
  52. * given call to `repeat`. The behavior when two or more items have the same key
  53. * is undefined.
  54. *
  55. * If no `keyFn` is provided, this directive will perform similar to mapping
  56. * items to values, and DOM will be reused against potentially different items.
  57. */
  58. export declare const repeat: RepeatDirectiveFn;
  59. /**
  60. * The type of the class that powers this directive. Necessary for naming the
  61. * directive's return type.
  62. */
  63. export type { RepeatDirective };
  64. //# sourceMappingURL=repeat.d.ts.map