fix: instances + scrollcontrols TS issue

pmndrs · Jan 16, 2024 · b01211f · b01211f
1 parent 2248b9b
commit b01211f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 14 deletions.
diff --git a/src/core/Instances.tsx b/src/core/Instances.tsx
@@ -34,6 +34,14 @@ type InstancedMesh = Omit<THREE.InstancedMesh, 'instanceMatrix' | 'instanceColor
   instanceColor: THREE.InstancedBufferAttribute
 }
 
+function isFunctionChild(
+  value: any
+): value is (
+  props: React.ForwardRefExoticComponent<Omit<InstanceProps, 'ref'> & React.RefAttributes<unknown>>
+) => React.ReactNode {
+  return typeof value === 'function'
+}
+
 const _instanceLocalMatrix = /* @__PURE__ */ new THREE.Matrix4()
 const _instanceWorldMatrix = /* @__PURE__ */ new THREE.Matrix4()
 const _instanceIntersects: THREE.Intersection[] = []
@@ -192,8 +200,7 @@ export const Instances: ForwardRefComponent<InstancesProps, InstancedMesh> = /*
         itemSize={3}
         usage={THREE.DynamicDrawUsage}
       />
-      {typeof children === 'function' ? (
-        // @ts-ignore
+      {isFunctionChild(children) ? (
         <context.Provider value={api}>{children(instance)}</context.Provider>
       ) : (
         <globalContext.Provider value={api}>{children}</globalContext.Provider>

diff --git a/src/web/ScrollControls.tsx b/src/web/ScrollControls.tsx
@@ -210,17 +210,18 @@ export function ScrollControls({
   return <context.Provider value={state}>{children}</context.Provider>
 }
 
-// @ts-ignore
-const ScrollCanvas: ForwardRefComponent<{}, THREE.Group> = /* @__PURE__ */ React.forwardRef(({ children }, ref) => {
-  const group = React.useRef<THREE.Group>(null!)
-  const state = useScroll()
-  const { width, height } = useThree((state) => state.viewport)
-  useFrame(() => {
-    group.current.position.x = state.horizontal ? -width * (state.pages - 1) * state.offset : 0
-    group.current.position.y = state.horizontal ? 0 : height * (state.pages - 1) * state.offset
-  })
-  return <group ref={mergeRefs([ref, group])}>{children}</group>
-})
+const ScrollCanvas = /* @__PURE__ */ React.forwardRef(
+  ({ children }: ScrollProps, ref: React.ForwardedRef<THREE.Group>) => {
+    const group = React.useRef<THREE.Group>(null!)
+    const state = useScroll()
+    const { width, height } = useThree((state) => state.viewport)
+    useFrame(() => {
+      group.current.position.x = state.horizontal ? -width * (state.pages - 1) * state.offset : 0
+      group.current.position.y = state.horizontal ? 0 : height * (state.pages - 1) * state.offset
+    })
+    return <group ref={mergeRefs([ref, group])}>{children}</group>
+  }
+)
 
 const ScrollHtml: ForwardRefComponent<{ children?: React.ReactNode; style?: React.CSSProperties }, HTMLDivElement> =
   React.forwardRef(
@@ -264,6 +265,6 @@ type ScrollProps =
 export const Scroll: ForwardRefComponent<ScrollProps, THREE.Group & HTMLDivElement> = /* @__PURE__ */ React.forwardRef(
   ({ html, ...props }: ScrollProps, ref) => {
     const El = html ? ScrollHtml : ScrollCanvas
-    return <El ref={ref} {...props} />
+    return <El ref={ref} {...(props as ScrollProps)} />
   }
 )