ref.d.ts 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. /**
  2. * @license
  3. * Copyright 2020 Google LLC
  4. * SPDX-License-Identifier: BSD-3-Clause
  5. */
  6. import { ElementPart } from '../lit-html.js';
  7. import { AsyncDirective } from '../async-directive.js';
  8. /**
  9. * Creates a new Ref object, which is container for a reference to an element.
  10. */
  11. export declare const createRef: <T = Element>() => Ref<T>;
  12. /**
  13. * An object that holds a ref value.
  14. */
  15. declare class Ref<T = Element> {
  16. /**
  17. * The current Element value of the ref, or else `undefined` if the ref is no
  18. * longer rendered.
  19. */
  20. readonly value?: T;
  21. }
  22. export type { Ref };
  23. export declare type RefOrCallback = Ref | ((el: Element | undefined) => void);
  24. declare class RefDirective extends AsyncDirective {
  25. private _element?;
  26. private _ref?;
  27. private _context;
  28. render(_ref: RefOrCallback): symbol;
  29. update(part: ElementPart, [ref]: Parameters<this['render']>): symbol;
  30. private _updateRefValue;
  31. private get _lastElementForRef();
  32. disconnected(): void;
  33. reconnected(): void;
  34. }
  35. /**
  36. * Sets the value of a Ref object or calls a ref callback with the element it's
  37. * bound to.
  38. *
  39. * A Ref object acts as a container for a reference to an element. A ref
  40. * callback is a function that takes an element as its only argument.
  41. *
  42. * The ref directive sets the value of the Ref object or calls the ref callback
  43. * during rendering, if the referenced element changed.
  44. *
  45. * Note: If a ref callback is rendered to a different element position or is
  46. * removed in a subsequent render, it will first be called with `undefined`,
  47. * followed by another call with the new element it was rendered to (if any).
  48. *
  49. * ```js
  50. * // Using Ref object
  51. * const inputRef = createRef();
  52. * render(html`<input ${ref(inputRef)}>`, container);
  53. * inputRef.value.focus();
  54. *
  55. * // Using callback
  56. * const callback = (inputElement) => inputElement.focus();
  57. * render(html`<input ${ref(callback)}>`, container);
  58. * ```
  59. */
  60. export declare const ref: (_ref: RefOrCallback) => import("../directive.js").DirectiveResult<typeof RefDirective>;
  61. /**
  62. * The type of the class that powers this directive. Necessary for naming the
  63. * directive's return type.
  64. */
  65. export type { RefDirective };
  66. //# sourceMappingURL=ref.d.ts.map