Shayan/76594/fade wrapper typescript migration

packages/components/src/components/fade-wrapper/fade-wrapper.jsx → packages/components/src/components/fade-wrapper/fade-wrapper.tsx

@@ -1,7 +1,14 @@
-import PropTypes from 'prop-types';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import posed, { PoseGroup } from 'react-pose';
 
+type TFadeWrapperProps = {
+    children: ReactNode;
+    is_visible: boolean;
+    keyname?: string;
+    type?: 'top' | 'bottom';
+    className?: string;
+};
+
 const FadeInFromTopDiv = posed.div({
     enter: {
         y: 0,
@@ -46,7 +53,7 @@ const FadeInOnlyDiv = posed.div({
 });
 
 // `flipMove={false}` is necessary to fix react-pose bug: https://github.com/Popmotion/popmotion/issues/805
-const FadeWrapper = ({ children, className, is_visible, keyname, type }) => {
+const FadeWrapper = ({ children, className, is_visible, keyname, type }: TFadeWrapperProps) => {
     if (type === 'top') {
         return (
             <PoseGroup flipMove={false}>
@@ -80,12 +87,4 @@ const FadeWrapper = ({ children, className, is_visible, keyname, type }) => {
     );
 };
 
-FadeWrapper.propTypes = {
-    children: PropTypes.node,
-    is_visible: PropTypes.bool,
-    keyname: PropTypes.string,
-    type: PropTypes.string,
-    className: PropTypes.string,
-};
-
 export default FadeWrapper;

packages/components/src/components/fade-wrapper/index.js → packages/components/src/components/fade-wrapper/index.ts

@@ -1,4 +1,4 @@
-import FadeWrapper from './fade-wrapper.jsx';
+import FadeWrapper from './fade-wrapper';
 import './fade-wrapper.scss';
 
 export default FadeWrapper;