@leonsilicon/react-native-reanimated-carousel 0.0.0

package/src/store/index.test.tsx

@@ -0,0 +1,314 @@
+import { act, render } from "@testing-library/react-native";
+import React from "react";
+import { Text } from "react-native";
+
+import { ICommonVariables } from "../hooks/useCommonVariables";
+import { GlobalStateContext, GlobalStateProvider, IContext, useGlobalState } from "./index";
+
+const createSharedValue = <T,>(initial: T) => ({ value: initial });
+
+describe("GlobalStateProvider", () => {
+  const mockProps = {
+    width: 300,
+    height: 200,
+    data: [1, 2, 3],
+    renderItem: () => <Text>Item</Text>,
+  } as any;
+
+  const mockCommon = {
+    size: 300,
+    validLength: 3,
+    handlerOffset: createSharedValue(0),
+    resolvedSize: createSharedValue<number | null>(300),
+    sizePhase: createSharedValue("ready" as const),
+  } as ICommonVariables;
+
+  const mockValue: Pick<IContext, "props" | "common"> = {
+    props: mockProps,
+    common: mockCommon,
+  };
+
+  it("should render children correctly", () => {
+    const { getByText } = render(
+      <GlobalStateProvider value={mockValue}>
+        <Text>Test Child</Text>
+      </GlobalStateProvider>
+    );
+
+    expect(getByText("Test Child")).toBeTruthy();
+  });
+
+  it("should provide context value with layout methods", () => {
+    let contextValue: any;
+
+    const TestComponent = () => {
+      contextValue = React.useContext(GlobalStateContext);
+      return <Text>Test</Text>;
+    };
+
+    render(
+      <GlobalStateProvider value={mockValue}>
+        <TestComponent />
+      </GlobalStateProvider>
+    );
+
+    expect(contextValue).toHaveProperty("props");
+    expect(contextValue).toHaveProperty("common");
+    expect(contextValue).toHaveProperty("layout");
+    expect(contextValue.layout).toHaveProperty("containerSize");
+    expect(contextValue.layout).toHaveProperty("itemDimensions");
+    expect(contextValue.layout).toHaveProperty("updateItemDimensions");
+    expect(contextValue.layout).toHaveProperty("updateContainerSize");
+  });
+
+  it("should initialize containerSize with default values", () => {
+    let contextValue: any;
+
+    const TestComponent = () => {
+      contextValue = React.useContext(GlobalStateContext);
+      return <Text>Test</Text>;
+    };
+
+    render(
+      <GlobalStateProvider value={mockValue}>
+        <TestComponent />
+      </GlobalStateProvider>
+    );
+
+    expect(contextValue.layout.containerSize.value).toEqual({ width: 0, height: 0 });
+  });
+
+  it("should initialize itemDimensions with empty object", () => {
+    let contextValue: any;
+
+    const TestComponent = () => {
+      contextValue = React.useContext(GlobalStateContext);
+      return <Text>Test</Text>;
+    };
+
+    render(
+      <GlobalStateProvider value={mockValue}>
+        <TestComponent />
+      </GlobalStateProvider>
+    );
+
+    expect(contextValue.layout.itemDimensions.value).toEqual({});
+  });
+
+  it("should provide updateItemDimensions function", () => {
+    let contextValue: any;
+
+    const TestComponent = () => {
+      contextValue = React.useContext(GlobalStateContext);
+      return <Text>Test</Text>;
+    };
+
+    render(
+      <GlobalStateProvider value={mockValue}>
+        <TestComponent />
+      </GlobalStateProvider>
+    );
+
+    expect(typeof contextValue.layout.updateItemDimensions).toBe("function");
+
+    act(() => {
+      contextValue.layout.updateItemDimensions(0, { width: 100, height: 50 });
+    });
+
+    expect(contextValue.layout.itemDimensions.value).toEqual({
+      0: { width: 100, height: 50 },
+    });
+  });
+
+  it("should provide updateContainerSize function", () => {
+    let contextValue: any;
+
+    const TestComponent = () => {
+      contextValue = React.useContext(GlobalStateContext);
+      return <Text>Test</Text>;
+    };
+
+    render(
+      <GlobalStateProvider value={mockValue}>
+        <TestComponent />
+      </GlobalStateProvider>
+    );
+
+    expect(typeof contextValue.layout.updateContainerSize).toBe("function");
+
+    act(() => {
+      contextValue.layout.updateContainerSize({ width: 400, height: 300 });
+    });
+
+    expect(contextValue.layout.containerSize.value).toEqual({ width: 400, height: 300 });
+  });
+
+  it("should merge props and common with layout", () => {
+    let contextValue: any;
+
+    const TestComponent = () => {
+      contextValue = React.useContext(GlobalStateContext);
+      return <Text>Test</Text>;
+    };
+
+    render(
+      <GlobalStateProvider value={mockValue}>
+        <TestComponent />
+      </GlobalStateProvider>
+    );
+
+    expect(contextValue.props).toEqual(mockProps);
+    expect(contextValue.common).toEqual(mockCommon);
+  });
+
+  it("should handle multiple children", () => {
+    const { getByText } = render(
+      <GlobalStateProvider value={mockValue}>
+        <Text>First Child</Text>
+        <Text>Second Child</Text>
+      </GlobalStateProvider>
+    );
+
+    expect(getByText("First Child")).toBeTruthy();
+    expect(getByText("Second Child")).toBeTruthy();
+  });
+
+  it("should handle updateItemDimensions with multiple items", () => {
+    let contextValue: any;
+
+    const TestComponent = () => {
+      contextValue = React.useContext(GlobalStateContext);
+      return <Text>Test</Text>;
+    };
+
+    render(
+      <GlobalStateProvider value={mockValue}>
+        <TestComponent />
+      </GlobalStateProvider>
+    );
+
+    act(() => {
+      contextValue.layout.updateItemDimensions(0, { width: 100, height: 50 });
+      contextValue.layout.updateItemDimensions(1, { width: 120, height: 60 });
+      contextValue.layout.updateItemDimensions(2, { width: 90, height: 45 });
+    });
+
+    expect(contextValue.layout.itemDimensions.value).toEqual({
+      0: { width: 100, height: 50 },
+      1: { width: 120, height: 60 },
+      2: { width: 90, height: 45 },
+    });
+  });
+});
+
+describe("useGlobalState", () => {
+  const mockValue: Pick<IContext, "props" | "common"> = {
+    props: { width: 300, data: [1, 2, 3], renderItem: () => <Text>Item</Text> } as any,
+    common: {
+      size: 300,
+      validLength: 3,
+      handlerOffset: createSharedValue(0),
+      resolvedSize: createSharedValue<number | null>(300),
+      sizePhase: createSharedValue("ready" as const),
+    } as ICommonVariables,
+  };
+
+  it("should return context value when used within provider", () => {
+    let hookResult: any;
+
+    const TestComponent = () => {
+      hookResult = useGlobalState();
+      return <Text>Test</Text>;
+    };
+
+    render(
+      <GlobalStateProvider value={mockValue}>
+        <TestComponent />
+      </GlobalStateProvider>
+    );
+
+    expect(hookResult).toHaveProperty("props");
+    expect(hookResult).toHaveProperty("common");
+    expect(hookResult).toHaveProperty("layout");
+  });
+
+  it("should provide expected hook functionality", () => {
+    let hookResult: any;
+
+    const TestComponent = () => {
+      hookResult = useGlobalState();
+      return <Text>Test</Text>;
+    };
+
+    const mockValue: Pick<IContext, "props" | "common"> = {
+      props: { width: 300, data: [1, 2, 3], renderItem: () => <Text>Item</Text> } as any,
+      common: { size: 300, validLength: 3 } as ICommonVariables,
+    };
+
+    render(
+      <GlobalStateProvider value={mockValue}>
+        <TestComponent />
+      </GlobalStateProvider>
+    );
+
+    expect(hookResult).toHaveProperty("props");
+    expect(hookResult).toHaveProperty("common");
+    expect(hookResult).toHaveProperty("layout");
+  });
+
+  it("should return the same context value as directly accessing context", () => {
+    let hookResult: any;
+    let contextResult: any;
+
+    const TestComponent = () => {
+      hookResult = useGlobalState();
+      contextResult = React.useContext(GlobalStateContext);
+      return <Text>Test</Text>;
+    };
+
+    render(
+      <GlobalStateProvider value={mockValue}>
+        <TestComponent />
+      </GlobalStateProvider>
+    );
+
+    expect(hookResult).toBe(contextResult);
+  });
+
+  it("should provide all expected properties", () => {
+    let hookResult: any;
+
+    const TestComponent = () => {
+      hookResult = useGlobalState();
+      return <Text>Test</Text>;
+    };
+
+    render(
+      <GlobalStateProvider value={mockValue}>
+        <TestComponent />
+      </GlobalStateProvider>
+    );
+
+    expect(hookResult.props).toEqual(mockValue.props);
+    expect(hookResult.common).toEqual(mockValue.common);
+    expect(hookResult.layout).toHaveProperty("containerSize");
+    expect(hookResult.layout).toHaveProperty("itemDimensions");
+    expect(hookResult.layout).toHaveProperty("updateItemDimensions");
+    expect(hookResult.layout).toHaveProperty("updateContainerSize");
+  });
+});
+
+describe("GlobalStateContext", () => {
+  it("should have default empty context value", () => {
+    let contextValue: any;
+
+    const TestComponent = () => {
+      contextValue = React.useContext(GlobalStateContext);
+      return <Text>Test</Text>;
+    };
+
+    render(<TestComponent />);
+
+    expect(contextValue).toEqual({});
+  });
+});

package/src/store/index.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+
+import { SharedValue, useSharedValue } from "react-native-reanimated";
+import type { ICommonVariables } from "../hooks/useCommonVariables";
+import type { TInitializeCarouselProps } from "../hooks/useInitProps";
+import type { SizeResolver } from "../utils/size-resolver";
+
+type ItemDimensions = Record<number, { width: number; height: number }>;
+
+export interface IContext {
+  props: TInitializeCarouselProps<any>;
+  common: ICommonVariables;
+  /** Per-item size resolver (uniform or variable). */
+  sizeResolver: SizeResolver;
+  layout: {
+    containerSize: SharedValue<{ width: number; height: number }>;
+    updateContainerSize: (dimensions: { width: number; height: number }) => void;
+    itemDimensions: SharedValue<ItemDimensions>;
+    updateItemDimensions: (index: number, dimensions: { width: number; height: number }) => void;
+  };
+}
+
+export const GlobalStateContext = React.createContext<IContext>({} as IContext);
+
+export const GlobalStateProvider = ({
+  children,
+  value,
+}: {
+  children: React.ReactNode;
+  value: Pick<IContext, "props" | "common" | "sizeResolver">;
+}) => {
+  const containerSize = useSharedValue<{ width: number; height: number }>({ width: 0, height: 0 });
+  const itemDimensions = useSharedValue<ItemDimensions>({});
+
+  const updateItemDimensions = (index: number, dimensions: { width: number; height: number }) => {
+    "worklet";
+
+    itemDimensions.value = { ...itemDimensions.value, [index]: dimensions };
+  };
+
+  const updateContainerSize = (dimensions: { width: number; height: number }) => {
+    "worklet";
+    containerSize.value = dimensions;
+  };
+
+  return (
+    <GlobalStateContext.Provider
+      value={{
+        ...value,
+        layout: { containerSize, itemDimensions, updateItemDimensions, updateContainerSize },
+      }}
+    >
+      {children}
+    </GlobalStateContext.Provider>
+  );
+};
+
+export const useGlobalState = () => {
+  const context = React.useContext(GlobalStateContext);
+
+  if (!context) {
+    throw new Error("useGlobalState must be used within a GlobalStateProvider");
+  }
+
+  return context;
+};