From c9b0b6b05d7388427d8ad96cf1e205ad82d73994 Mon Sep 17 00:00:00 2001
From: Kuba Juszczyk <juszczykjakub@gmail.com>
Date: Mon, 8 Jul 2019 19:25:24 +0200
Subject: [PATCH] Adding possibility to use built-in observer
---
src/LazyImageFull.tsx | 20 +++++++++++++++++++-
1 file changed, 19 insertions(+), 1 deletion(-)
diff --git a/src/LazyImageFull.tsx b/src/LazyImageFull.tsx
index ddd0bfe..b42745e 100644
--- a/src/LazyImageFull.tsx
+++ b/src/LazyImageFull.tsx
@@ -81,6 +81,15 @@ export interface ObserverProps {
* @default `0.01`
*/
threshold?: number;
+
+ /**
+ * Only trigger this method once
+ * @default `false`
+ */
+ triggerOnce?: boolean;
+
+ /** Call this function whenever the in view state changes */
+ onChange?(inView: boolean): void;
}
/** States that the image loading can be in.
@@ -272,6 +281,7 @@ export class LazyImageFull extends React.Component<
// Bind methods
this.update = this.update.bind(this);
+ this.onChange = this.onChange.bind(this);
}
update(action: Action) {
@@ -309,6 +319,14 @@ export class LazyImageFull extends React.Component<
this.promiseCache = {};
}
+ onChange(inView :boolean) {
+ this.update(Action.ViewChanged({ inView }))
+
+ if (this.props.observerProps && this.props.observerProps.onChange) {
+ this.props.observerProps.onChange(inView)
+ }
+ }
+
// Render function
render() {
// This destructuring is silly
@@ -336,7 +354,7 @@ export class LazyImageFull extends React.Component<
// TODO: reconsider threshold
threshold={0.01}
{...observerProps}
- onChange={inView => this.update(Action.ViewChanged({ inView }))}
+ onChange={this.onChange}
>
{({ ref }) =>
children({