chore: weex support for ice appear

.changeset/dry-pets-sing.md

@@ -0,0 +1,5 @@
+---
+'@ice/appear': minor
+---
+
+chore: weex support for ice appear

packages/appear/src/index.tsx

@@ -1,41 +1,14 @@
-import { Children, useRef, useEffect, useCallback } from 'react';
-import type { Ref } from 'react';
-import { isFunction } from './type';
-import { observerElement, VisibilityChangeEvent } from './visibility';
+import type * as React from 'react';
+import WebAppear from './web';
+import WeexAppear from './weex';
+import type { AppearProps } from './typings.js';
 
-function VisibilityChange(props: any) {
-  const {
-    onAppear,
-    onDisappear,
-    children,
-  } = props;
+let Appear: React.ForwardRefExoticComponent<AppearProps & React.RefAttributes<any>>;
 
-  const defaultRef: Ref<Node> = useRef<Node>();
-  const ref: Ref<Node> = (children && children.ref) ? children.ref : defaultRef;
-
-  const listen = useCallback((eventName: string, handler: Function) => {
-    const { current } = ref;
-    // Rax components will set custom ref by useImperativeHandle.
-    // So We should get eventTarget by _nativeNode.
-    // https://github.com/raxjs/rax-components/blob/master/packages/rax-textinput/src/index.tsx#L151
-    if (current && isFunction(handler)) {
-      const eventTarget = current._nativeNode || current;
-      observerElement(eventTarget as Element);
-      eventTarget.addEventListener(eventName, handler);
-    }
-    return () => {
-      const { current } = ref;
-      if (current) {
-        const eventTarget = current._nativeNode || current;
-        eventTarget.removeEventListener(eventName, handler);
-      }
-    };
-  }, [ref]);
-
-  useEffect(() => listen(VisibilityChangeEvent.appear, onAppear), [ref, onAppear, listen]);
-  useEffect(() => listen(VisibilityChangeEvent.disappear, onDisappear), [ref, onDisappear, listen]);
-
-  return Children.only({ ...children, ref });
+if (import.meta.target === 'weex') {
+  Appear = WeexAppear;
+} else {
+  Appear = WebAppear as any;
 }
 
-export default VisibilityChange;
+export default Appear;

packages/appear/src/runtime.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="@ice/pkg/types" />
+
+interface ImportMeta {
+  // The build target
+  target: 'weex' | 'web';
+}
+
+
+interface Node {
+  _nativeNode: Node;
+}

packages/appear/src/typings.ts

@@ -0,0 +1,17 @@
+import type * as React from 'react';
+
+export interface AppearProps {
+  children: React.ReactElement;
+  /**
+   * Triggered when the element enters the visible area.
+   * @param {CustomEvent} e
+   * @returns {void}
+   */
+  onAppear?: (e: CustomEvent) => void;
+  /**
+   * Triggered when the element leaves the visible area.
+   * @param {CustomEvent} e
+   * @returns {void}
+   */
+  onDisappear?: (e: CustomEvent) => void;
+}

packages/appear/src/web/index.tsx

@@ -0,0 +1,44 @@
+import { Children, useRef, useEffect, useCallback } from 'react';
+import type { MutableRefObject } from 'react';
+
+import { observerElement, VisibilityChangeEvent } from './visibility';
+
+export function isFunction(obj: any): obj is Function {
+  return typeof obj === 'function';
+}
+
+function VisibilityChange(props: any) {
+  const { onAppear, onDisappear, children } = props;
+
+  const defaultRef: MutableRefObject<Node> = useRef<Node>();
+  const ref: MutableRefObject<Node> = children && children.ref ? children.ref : defaultRef;
+
+  const listen = useCallback(
+    (eventName: string, handler: () => {}) => {
+      const { current } = ref;
+      // Rax components will set custom ref by useImperativeHandle.
+      // So We should get eventTarget by _nativeNode.
+      // https://github.com/raxjs/rax-components/blob/master/packages/rax-textinput/src/index.tsx#L151
+      if (current && isFunction(handler)) {
+        const eventTarget = current._nativeNode || current;
+        observerElement(eventTarget as Element);
+        eventTarget.addEventListener(eventName, handler);
+      }
+      return () => {
+        const { current } = ref;
+        if (current) {
+          const eventTarget = current._nativeNode || current;
+          eventTarget.removeEventListener(eventName, handler);
+        }
+      };
+    },
+    [ref],
+  );
+
+  useEffect(() => listen(VisibilityChangeEvent.appear, onAppear), [ref, onAppear, listen]);
+  useEffect(() => listen(VisibilityChangeEvent.disappear, onDisappear), [ref, onDisappear, listen]);
+
+  return Children.only({ ...children, ref });
+}
+
+export default VisibilityChange;

packages/appear/src/weex/index.tsx

@@ -0,0 +1,36 @@
+import type { ForwardedRef } from 'react';
+import { useEffect, useRef, forwardRef, cloneElement, Children } from 'react';
+import type { AppearProps } from '../typings';
+
+const WeexAppear = forwardRef<any, AppearProps>((props, ref) => {
+  const internalRef = useRef<HTMLDivElement>(null);
+  const childrenRef: ForwardedRef<HTMLDivElement> = ref ?? internalRef;
+
+  const { children, onAppear, onDisappear } = props;
+
+  useEffect(() => {
+    // Use copy of childrenRef to avoid ref value changed in cleanup phase.
+    const nodeRef = typeof childrenRef === 'object' ? childrenRef.current : null;
+
+    // Return early if onAppear callback not specified.
+    onAppear && nodeRef?.addEventListener('appear', (e: CustomEvent) => onAppear(e));
+
+    return () => {
+      onAppear && nodeRef?.removeEventListener('appear', (e: CustomEvent) => onAppear(e));
+    };
+  }, [childrenRef, onAppear]);
+
+  useEffect(() => {
+    const nodeRef = typeof childrenRef === 'object' ? childrenRef.current : null;
+
+    onDisappear && nodeRef?.addEventListener('disappear', (e: CustomEvent) => onDisappear(e));
+
+    return () => {
+      onDisappear && nodeRef?.removeEventListener('disappear', (e: CustomEvent) => onDisappear(e));
+    };
+  }, [childrenRef, onDisappear]);
+
+  return cloneElement(Children.only(children), { ref: childrenRef });
+});
+
+export default WeexAppear;