@leonsilicon/react-native-wishlist 0.0.0

package/src/Wishlist.tsx

@@ -0,0 +1,417 @@
+import React, {
+  createContext,
+  Ref,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+import { ComponentPool } from './ComponentPool';
+import { ForEach } from './Components/ForEach';
+import { IF } from './Components/IF';
+import { Pressable } from './Components/Pressable';
+import { Case, Switch } from './Components/Switch';
+import { WishlistImage } from './Components/WishlistImage';
+import { WishlistText } from './Components/WishlistText';
+import { WishlistView } from './Components/WishlistView';
+import { initEventHandler } from './EventHandler';
+import InflatorRepository, { InflateMethod } from './InflatorRepository';
+import NativeContentContainer from './Specs/NativeContentContainer';
+import NativeTemplateContainer from './Specs/NativeTemplateContainer';
+import NativeTemplateInterceptor from './Specs/NativeTemplateInterceptor';
+import NativeWishList, {
+  Commands as WishlistCommands,
+} from './Specs/NativeWishlist';
+import { TemplateContext } from './TemplateContext';
+import { TemplateItem } from './TemplateItem';
+import { generateId } from './Utils';
+import { useWishlistContext, WishlistContext } from './WishlistContext';
+import type { WishlistData, WishlistDataInternal } from './WishlistData';
+
+type NestedTemplatesContextValue = {
+  templates: { [key: string]: any };
+  registerTemplate(type: string, component: any): void;
+};
+
+const TemplatesRegistryContext =
+  createContext<NestedTemplatesContextValue | null>(null);
+
+function getTemplatesFromChildren(children: React.ReactNode, width: number) {
+  const nextTemplates: { [key: string]: React.ReactElement } = {
+    __offsetComponent: <View style={[styles.offsetView, { width }]} />,
+    __viewComponent: <View />,
+    __textComponent: (
+      <Text>
+        <Text> </Text>
+      </Text>
+    ),
+    __paragraphComponent: <Text> </Text>,
+  };
+  React.Children.forEach(children, (c) => {
+    if ((c as any).type.displayName === 'WishListTemplate') {
+      const templateElement = c as React.ReactElement<TemplateProps>;
+      nextTemplates[templateElement.props.type] = templateElement;
+    }
+  });
+  return nextTemplates;
+}
+
+export type WishListInstance = {
+  scrollToItem: (index: number, animated?: boolean) => void;
+  scrollToTop: () => void;
+};
+
+export type BaseItem = { type: string; key: string };
+
+type Props = ViewProps & {
+  data: WishlistData<any>;
+  onStartReached?: () => void;
+  onEndReached?: () => void;
+  initialIndex?: number;
+  contentContainerStyle?: StyleProp<ViewStyle> | undefined;
+  /**
+   * Rendered at the bottom of all the items. Can be a React Component Class, a render function, or
+   * a rendered element.
+   */
+  ListFooterComponent?:
+    | React.ComponentType<any>
+    | React.ReactElement
+    | null
+    | undefined;
+  /**
+   * Rendered at the top of all the items. Can be a React Component Class, a render function, or
+   * a rendered element.
+   */
+  ListHeaderComponent?:
+    | React.ComponentType<any>
+    | React.ReactElement
+    | null
+    | undefined;
+};
+
+function ComponentBase<T extends BaseItem>(
+  {
+    children,
+    style,
+    data,
+    contentContainerStyle,
+    ListFooterComponent,
+    ListHeaderComponent,
+    ...rest
+  }: Props,
+  ref: React.Ref<WishListInstance>,
+) {
+  const nativeWishlist = useRef<InstanceType<typeof NativeWishList> | null>(
+    null,
+  );
+  const wishlistId = useRef<string | null>(null);
+  if (!wishlistId.current) {
+    wishlistId.current = generateId();
+  }
+
+  useImperativeHandle(
+    ref,
+    (): WishListInstance => ({
+      scrollToItem: (index: number, animated?: boolean) => {
+        if (nativeWishlist.current != null) {
+          console.log('scrollTo', index);
+          WishlistCommands.scrollToItem(
+            nativeWishlist.current,
+            index,
+            animated ?? true,
+          );
+        }
+      },
+      scrollToTop: () => {
+        if (nativeWishlist.current != null) {
+          WishlistCommands.scrollToItem(nativeWishlist.current, 0, true);
+        }
+      },
+    }),
+  );
+
+  const { width } = useWindowDimensions();
+  useMemo(() => initEventHandler(), []);
+
+  // Template registration and tracking
+  const childrenTemplates = useMemo(
+    () => getTemplatesFromChildren(children, width),
+    [children, width],
+  );
+
+  if (ListHeaderComponent) {
+    childrenTemplates.__wishlistHeader = React.isValidElement(
+      ListHeaderComponent,
+    ) ? (
+      ListHeaderComponent
+    ) : (
+      <ListHeaderComponent />
+    );
+  }
+
+  if (ListFooterComponent) {
+    childrenTemplates.__wishlistFooter = React.isValidElement(
+      ListFooterComponent,
+    ) ? (
+      ListFooterComponent
+    ) : (
+      <ListFooterComponent />
+    );
+  }
+
+  const templatesRegistry = useMemo<NestedTemplatesContextValue>(
+    () => ({
+      templates: {},
+      registerTemplate(type, component) {
+        if (this.templates[type]) {
+          return;
+        }
+
+        this.templates[type] = component;
+      },
+    }),
+    [],
+  );
+
+  const hasHeader = !!ListHeaderComponent;
+  const hasFooter = !!ListFooterComponent;
+
+  // Resolve inflator - either use the provided callback or use the mapping
+  const resolvedInflater: InflateMethod = useMemo(() => {
+    return (
+      index: number,
+      pool: ComponentPool,
+      previousItem: TemplateItem | null,
+    ) => {
+      'worklet';
+      const internalData = data as WishlistDataInternal<T>;
+
+      let value: T | undefined;
+      if (hasHeader && index === internalData.__firstIndex() - 1) {
+        value = { key: '__wishlistHeader', type: '__wishlistHeader' } as T;
+      } else if (hasFooter && index === internalData.__lastIndex()) {
+        value = { key: '__wishlistFooter', type: '__wishlistFooter' } as T;
+      } else {
+        value = internalData.__at(index);
+      }
+
+      if (!value) {
+        return undefined;
+      }
+
+      const item =
+        previousItem != null &&
+        previousItem.type === value.type &&
+        previousItem.key === value.key
+          ? previousItem
+          : pool.getComponent(value.type);
+      if (!item) {
+        return undefined;
+      }
+
+      if (value.key == null) {
+        throw new Error('Every data cell has to contain unique key prop!');
+      }
+      // We set the key of the item here so that
+      // viewportObserver knows what's the key and is able to rerender it later on
+      item.key = value.key;
+      item.type = value.type;
+
+      return [item, value];
+    };
+  }, [data, hasFooter, hasHeader]);
+
+  const inflatorIdRef = useRef<string | null>(null);
+  const prevInflatorRef = useRef<typeof resolvedInflater | undefined>(
+    undefined,
+  );
+
+  // Inflator registration and tracking
+  const inflatorId = useMemo(() => {
+    if (prevInflatorRef.current !== resolvedInflater) {
+      // Unregister?
+      if (inflatorIdRef.current) {
+        InflatorRepository.unregister(inflatorIdRef.current);
+      }
+      // Register
+      inflatorIdRef.current = generateId();
+      InflatorRepository.register(inflatorIdRef.current, resolvedInflater);
+    }
+    return inflatorIdRef.current!;
+  }, [resolvedInflater]);
+
+  useEffect(() => {
+    (data as WishlistDataInternal<T>).__attach(wishlistId.current!);
+
+    return () => {
+      (data as WishlistDataInternal<T>).__detach(wishlistId.current!);
+    };
+  }, [data]);
+
+  const wishlistContext = useMemo(
+    () => ({
+      id: wishlistId.current!,
+      inflatorId,
+      data,
+    }),
+    [inflatorId, data],
+  );
+
+  return (
+    <WishlistContext.Provider value={wishlistContext}>
+      <TemplatesRegistryContext.Provider value={templatesRegistry}>
+        <>
+          {/* Prerender templates to register all the nested templates */}
+          <View style={styles.noDisplay}>
+            {Object.keys(childrenTemplates).map((c) => (
+              <View key={c + 'prerender'}>
+                <TemplateContext.Provider
+                  value={{ templateType: c, renderChildren: true }}
+                >
+                  {childrenTemplates[c]}
+                </TemplateContext.Provider>
+              </View>
+            ))}
+          </View>
+          <InnerComponent
+            inflatorId={inflatorId}
+            style={style}
+            nativeWishlist={nativeWishlist}
+            rest={rest}
+            templates={childrenTemplates}
+            nestedTemplates={templatesRegistry.templates}
+            contentContainerStyle={contentContainerStyle}
+            initialIndex={rest.initialIndex ?? (hasHeader ? -1 : 0)}
+          />
+        </>
+      </TemplatesRegistryContext.Provider>
+    </WishlistContext.Provider>
+  );
+}
+
+const Component = React.forwardRef(
+  ComponentBase as (
+    props: Props & { ref?: Ref<WishListInstance> },
+  ) => ReturnType<typeof ComponentBase>,
+);
+
+type InnerComponentProps = ViewProps & {
+  inflatorId: string;
+  nativeWishlist: any;
+  rest: any;
+  templates: { [key: string]: any };
+  nestedTemplates: { [key: string]: any };
+  contentContainerStyle?: StyleProp<ViewStyle> | undefined;
+  initialIndex: number;
+};
+
+function InnerComponent({
+  inflatorId,
+  style,
+  nativeWishlist,
+  rest,
+  templates,
+  nestedTemplates,
+  contentContainerStyle,
+  initialIndex,
+}: InnerComponentProps) {
+  const combinedTemplates: { [key: string]: React.ReactElement<any> } = {
+    ...templates,
+    ...nestedTemplates,
+  };
+
+  const { id } = useWishlistContext();
+
+  const keys = Object.keys(combinedTemplates);
+  const names = JSON.stringify(keys);
+
+  return (
+    <NativeTemplateInterceptor
+      style={style}
+      collapsable={false}
+      removeClippedSubviews={false}
+    >
+      <NativeWishList
+        style={styles.flex}
+        ref={nativeWishlist}
+        removeClippedSubviews={false}
+        inflatorId={inflatorId}
+        onEndReached={rest?.onEndReached}
+        onStartReached={rest?.onStartReached}
+        initialIndex={initialIndex}
+      >
+        <NativeContentContainer
+          collapsable={false}
+          style={contentContainerStyle}
+        />
+      </NativeWishList>
+      <NativeTemplateContainer
+        names={names}
+        inflatorId={inflatorId}
+        wishlistId={id}
+        key={Math.random().toString()}
+        collapsable={false}
+      >
+        {Object.keys(combinedTemplates).map((c) => (
+          <View key={c}>
+            <TemplateContext.Provider value={{ templateType: c }}>
+              {combinedTemplates[c]}
+            </TemplateContext.Provider>
+          </View>
+        ))}
+      </NativeTemplateContainer>
+    </NativeTemplateInterceptor>
+  );
+}
+
+type TemplateProps = {
+  type: string;
+  children: React.ReactElement;
+};
+
+function Template({ children, type }: TemplateProps) {
+  const registry = useContext(TemplatesRegistryContext);
+  const templates = useContext(TemplateContext);
+
+  registry?.registerTemplate(type, children);
+
+  return templates?.renderChildren ? children : null;
+}
+
+Template.displayName = 'WishListTemplate';
+
+export const Wishlist = {
+  Component,
+  Template,
+
+  Pressable,
+  View: WishlistView,
+  Image: WishlistImage,
+  Text: WishlistText,
+
+  IF,
+  Switch,
+  Case,
+  /**
+   * TODO(Szymon) It's just a prototype we have to think about matching new and old children
+   * TODO(Szymon) implement setChildren
+   */
+  ForEach,
+};
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  noDisplay: { display: 'none' },
+  offsetView: { height: 0 },
+  contentContainer: {},
+});

package/src/WishlistContext.tsx

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+
+export const WishlistContext = createContext<{
+  id: string;
+  inflatorId: string;
+  data: Object;
+} | null>(null);
+
+export function useWishlistContext() {
+  const context = useContext(WishlistContext);
+  if (!context) {
+    throw Error('Must be rendered inside a Template component.');
+  }
+  return context;
+}

package/src/WishlistData.ts

@@ -0,0 +1,179 @@
+import { useMemo } from 'react';
+import { scheduleSyncUp } from './OrchestratorBinding';
+import { useGeneratedId } from './Utils';
+import { useWishlistContext } from './WishlistContext';
+import {
+  createItemsDataStructure,
+  DataCopy,
+  Item,
+  UpdateJob,
+} from './WishlistDataCopy';
+import { createRunInJsFn, createRunInWishlistFn } from './WishlistJsRuntime';
+
+export interface WishlistData<T extends Item> {
+  update: <ResT>(job: UpdateJob<T, ResT>) => Promise<ResT>;
+}
+
+export interface WishlistDataInternal<T extends Item> extends WishlistData<T> {
+  __attach: (wishlistId: string) => void;
+  __detach: (wishlistId: string) => void;
+  __at: (index: number) => T | undefined;
+  __firstIndex: () => number;
+  __lastIndex: () => number;
+}
+
+/**
+ * Creates an instance of Wishlist data which can be passed to Wishlist components.
+ */
+export function useWishlistData<T extends Item>(
+  getInitialData: () => Array<T>,
+): WishlistData<T> {
+  const dataId = useGeneratedId();
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const initialData = useMemo(getInitialData, []);
+
+  const getWishlistData = useMemo((): (() => WishlistDataInternal<T>) => {
+    return () => {
+      'worklet';
+
+      if (!global.dataCtx) {
+        global.dataCtx = {};
+      }
+
+      if (global.dataCtx[dataId]) {
+        return global.dataCtx[dataId] as WishlistDataInternal<T>;
+      }
+
+      const currentlyRenderedCopy = createItemsDataStructure(initialData);
+      const attachedListIds = new Set<string>();
+      const pendingUpdates: Array<UpdateJob<T, unknown>> = [];
+
+      async function update<ResT>(updateJob: UpdateJob<T, ResT>) {
+        return new Promise<ResT>((resolve) => {
+          pendingUpdates.push((dataCopy: DataCopy<T>) => {
+            const result = updateJob(dataCopy);
+            resolve(result);
+          });
+          if (attachedListIds.size > 0) {
+            for (const id of attachedListIds) {
+              scheduleSyncUp(id);
+            }
+          } else {
+            // If we are not rendering a list yet, just apply changes immediately.
+            currentlyRenderedCopy.__applyChanges(pendingUpdates);
+          }
+        });
+      }
+
+      function __at(index: number) {
+        return currentlyRenderedCopy.at(index);
+      }
+
+      function __firstIndex() {
+        return 0 - currentlyRenderedCopy.__numberOfNegative;
+      }
+
+      function __lastIndex() {
+        return (
+          currentlyRenderedCopy.length -
+          currentlyRenderedCopy.__numberOfNegative
+        );
+      }
+
+      function __attach(wishlistId: string) {
+        attachedListIds.add(wishlistId);
+
+        if (!global.wishlists) {
+          global.wishlists = {};
+        }
+        if (!global.wishlists[wishlistId]) {
+          global.wishlists[wishlistId] = {};
+        }
+        global.wishlists[wishlistId].listener = () => {
+          const pendingUpdatesCopy = pendingUpdates.splice(
+            0,
+            pendingUpdates.length,
+          );
+
+          return currentlyRenderedCopy.__applyChanges(pendingUpdatesCopy);
+        };
+      }
+
+      function __detach(wishlistId: string) {
+        global.wishlists[wishlistId].listener = undefined;
+      }
+
+      const internalData: WishlistDataInternal<T> = {
+        update,
+        __at,
+        __attach,
+        __detach,
+        __firstIndex,
+        __lastIndex,
+      };
+
+      global.dataCtx[dataId] = internalData;
+
+      return internalData;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return useMemo(
+    (): WishlistDataInternal<T> => ({
+      update: <ResT>(updateJob: UpdateJob<T, ResT>) => {
+        'worklet';
+
+        // This can be called from both JS and Wishlist context.
+        // TODO: Better api to check which JS runtime we are on.
+        if (global.dataCtx) {
+          return getWishlistData().update(updateJob);
+        } else {
+          return new Promise<ResT>((resolve) => {
+            const resolveJs = createRunInJsFn(resolve);
+            return createRunInWishlistFn(() => {
+              'worklet';
+
+              getWishlistData().update(updateJob).then(resolveJs);
+            })();
+          });
+        }
+      },
+      __at(index: number) {
+        'worklet';
+
+        return getWishlistData().__at(index);
+      },
+      __attach: (wishlistId: string) => {
+        createRunInWishlistFn(() => {
+          'worklet';
+          getWishlistData().__attach(wishlistId);
+        })();
+      },
+      __detach: (wishlistId: string) => {
+        createRunInWishlistFn(() => {
+          'worklet';
+          getWishlistData().__detach(wishlistId);
+        })();
+      },
+      __firstIndex: () => {
+        'worklet';
+        return getWishlistData().__firstIndex();
+      },
+      __lastIndex: () => {
+        'worklet';
+        return getWishlistData().__lastIndex();
+      },
+    }),
+    [getWishlistData],
+  );
+}
+
+/**
+ * Returns the data for the current Wishlist. Must be called inside template components.
+ */
+export function useWishlistContextData<T extends Item>() {
+  const { data } = useWishlistContext();
+  return data as WishlistData<T>;
+}