nandorojo / moti

🐼 The React Native (+ Web) animation library, powered by Reanimated 3.
https://moti.fyi
MIT License
3.9k stars 120 forks source link

Typescript support motifySvg #264

Closed XantreDev closed 1 year ago

XantreDev commented 1 year ago

Is there an existing issue for this?

Current Behavior

Wrong typings. You can pass functions and other props to animate prop. And cannot pass regular svg props

Expected Behavior

You can pass regular svg element props. In animate prop there are no functions

Steps To Reproduce

Just use motifySvg for any of components

Versions

- Moti: 0.23.3

Screenshots

image

image

image

Reproduction

I can try to fix it by myself

XantreDev commented 1 year ago

patch that fixes it

diff --git a/node_modules/moti/build/svg/motify-svg.d.ts b/node_modules/moti/build/svg/motify-svg.d.ts
index e079a49..1b8c36e 100644
--- a/node_modules/moti/build/svg/motify-svg.d.ts
+++ b/node_modules/moti/build/svg/motify-svg.d.ts
@@ -1,7 +1,6 @@
 import React from 'react';
 import { ExcludeFunctionKeys, MotiProps } from '../core/types';
 declare type AdditionalProps = {
-    children?: React.ReactNode;
     /**
      * Animated props are not allowed with a Moti SVG component, since they will be overridden.
      *
@@ -23,5 +22,5 @@ declare type AdditionalProps = {
      */
     animatedProps?: never;
 };
-export declare function motifySvg<Props, C extends React.ComponentClass<any> = React.ComponentClass<Props>, Animate = ExcludeFunctionKeys<Omit<React.ComponentPropsWithoutRef<C>, 'children'>>>(ComponentWithoutAnimation: C): () => React.ForwardRefExoticComponent<React.PropsWithoutRef<Props & MotiProps<Animate, import("../core/types").StyleValueWithReplacedTransforms<Animate>, Partial<import("../core/types").StyleValueWithSequenceArraysWithoutTransform<import("../core/types").StyleValueWithReplacedTransforms<Animate>, "transform" | "scaleX" | "scaleY" | "translateX" | "translateY" | "perspective" | "rotate" | "rotateX" | "rotateY" | "rotateZ" | "scale" | "skewX" | "skewY" | Exclude<keyof Animate, "scaleX" | "scaleY" | "translateX" | "translateY" | "perspective" | "rotate" | "rotateX" | "rotateY" | "rotateZ" | "scale" | "skewX" | "skewY">, "scaleX" | "scaleY" | "translateX" | "translateY" | "perspective" | "rotate" | "rotateX" | "rotateY" | "rotateZ" | "scale" | "skewX" | "skewY" | Exclude<Exclude<keyof Animate, "scaleX" | "scaleY" | "translateX" | "translateY" | "perspective" | "rotate" | "rotateX" | "rotateY" | "rotateZ" | "scale" | "skewX" | "skewY">, "transform">> & import("../core/types").StyleValueWithSequenceArraysWithTransform>> & AdditionalProps> & React.RefAttributes<React.RefAttributes<React.ElementRef<C>>>>;
+export declare function motifySvg<C extends React.ComponentClass<any>,Props = React.ComponentPropsWithoutRef<C>,Animate = ExcludeFunctionKeys<Omit<Props, 'children'>>>(ComponentWithoutAnimation: C): () => React.ForwardRefExoticComponent<React.PropsWithoutRef<Props & MotiProps<Animate, import("../core/types").StyleValueWithReplacedTransforms<Animate>, Partial<import("../core/types").StyleValueWithSequenceArraysWithoutTransform<import("../core/types").StyleValueWithReplacedTransforms<Animate>, "transform" | "scaleX" | "scaleY" | "translateX" | "translateY" | "perspective" | "rotate" | "rotateX" | "rotateY" | "rotateZ" | "scale" | "skewX" | "skewY" | Exclude<keyof Animate, "scaleX" | "scaleY" | "translateX" | "translateY" | "perspective" | "rotate" | "rotateX" | "rotateY" | "rotateZ" | "scale" | "skewX" | "skewY">, "scaleX" | "scaleY" | "translateX" | "translateY" | "perspective" | "rotate" | "rotateX" | "rotateY" | "rotateZ" | "scale" | "skewX" | "skewY" | Exclude<Exclude<keyof Animate, "scaleX" | "scaleY" | "translateX" | "translateY" | "perspective" | "rotate" | "rotateX" | "rotateY" | "rotateZ" | "scale" | "skewX" | "skewY">, "transform">> & import("../core/types").StyleValueWithSequenceArraysWithTransform>> & AdditionalProps> & React.RefAttributes<React.RefAttributes<React.ElementRef<C>>>>;
 export {};
nandorojo commented 1 year ago

can you try upgrading moti?

XantreDev commented 1 year ago

I think yes. Project is not working on windows, btw

XantreDev commented 1 year ago

You checked PR? https://github.com/nandorojo/moti/pull/265

nandorojo commented 1 year ago

can you try upgrading moti?

yarn add moti

XantreDev commented 1 year ago

Your function is shitty typed, still. Why are you ignoring me?

nandorojo commented 1 year ago

I'm responding within minutes, telling you to upgrade to the latest version (0.23.4) where this issue should be resolved. That's hardly ignoring you.

Screenshot 2023-02-14 at 12 28 45 PM

It's possible this works in the example app but not when exported.

nandorojo commented 1 year ago

Try 0.23.5

nandorojo commented 1 year ago

I just created a fresh project with 0.23.4, and it worked fine. Rather than assuming I was ignoring you, it would have been best to just try the upgrade. Locking this.

XantreDev commented 1 year ago

I was looking for changes in the moti master branch. I've seen wrong typings before you hadn't merge my PR))