diff --git a/packages/components/src/components/swipeable-wrapper/index.js b/packages/components/src/components/swipeable-wrapper/index.js deleted file mode 100644 index 6c9f2aa6ce4d..000000000000 --- a/packages/components/src/components/swipeable-wrapper/index.js +++ /dev/null @@ -1,7 +0,0 @@ -import { useSwipeable } from 'react-swipeable'; -import SwipeableWrapper from './swipeable-wrapper.jsx'; -import './swipeable-wrapper.scss'; - -SwipeableWrapper.useSwipeable = useSwipeable; - -export default SwipeableWrapper; diff --git a/packages/components/src/components/swipeable-wrapper/index.ts b/packages/components/src/components/swipeable-wrapper/index.ts new file mode 100644 index 000000000000..03c6e85d0861 --- /dev/null +++ b/packages/components/src/components/swipeable-wrapper/index.ts @@ -0,0 +1,4 @@ +import SwipeableWrapper from './swipeable-wrapper'; +import './swipeable-wrapper.scss'; + +export default SwipeableWrapper; diff --git a/packages/components/src/components/swipeable-wrapper/swipeable-wrapper.jsx b/packages/components/src/components/swipeable-wrapper/swipeable-wrapper.tsx similarity index 84% rename from packages/components/src/components/swipeable-wrapper/swipeable-wrapper.jsx rename to packages/components/src/components/swipeable-wrapper/swipeable-wrapper.tsx index e21cf92ef491..53eda7298d93 100644 --- a/packages/components/src/components/swipeable-wrapper/swipeable-wrapper.jsx +++ b/packages/components/src/components/swipeable-wrapper/swipeable-wrapper.tsx @@ -1,17 +1,22 @@ import classNames from 'classnames'; -import PropTypes from 'prop-types'; import React from 'react'; -import { Swipeable } from 'react-swipeable'; +import { Swipeable, SwipeableProps, useSwipeable } from 'react-swipeable'; import Icon from '../icon'; -const SwipeableWrapper = ({ children, className, onChange, ...props }) => { +type TSwipeableWrapper = { + className?: string; + onChange: (prop?: number) => void; + is_disabled?: boolean; +} & SwipeableProps; + +const SwipeableWrapper = ({ children, className, onChange, ...props }: TSwipeableWrapper) => { const [active_index, setActiveIndex] = React.useState(0); React.useEffect(() => { - if (typeof onChange === 'function') onChange(active_index); + onChange(active_index); return () => { // Makes an empty callback when unmounted so that we can reset - if (typeof onChange === 'function') onChange(); + onChange(); }; }, [active_index, onChange]); @@ -73,11 +78,6 @@ const SwipeableWrapper = ({ children, className, onChange, ...props }) => { ); }; -SwipeableWrapper.propTypes = { - className: PropTypes.string, - children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node), PropTypes.object]), - onChange: PropTypes.func, - is_disabled: PropTypes.bool, -}; +SwipeableWrapper.useSwipeable = useSwipeable; export default SwipeableWrapper;