diff --git a/native/components/swipeable.js b/native/components/swipeable.js --- a/native/components/swipeable.js +++ b/native/components/swipeable.js @@ -7,9 +7,9 @@ import { useSelector } from 'react-redux'; import Button from './button.react.js'; -import { type Colors, useColors, useStyles } from '../themes/colors.js'; +import { useStyles } from '../themes/colors.js'; -type BaseProps = { +type Props = { +buttonWidth: number, +rightActions: $ReadOnlyArray<{ +key: string, @@ -23,68 +23,76 @@ }, +children?: React.Node, }; -type Props = { - ...BaseProps, - +windowWidth: number, - +colors: Colors, - +styles: typeof unboundStyles, -}; -class Swipeable extends React.PureComponent { - static defaultProps = { - rightActions: [], - }; +function Swipeable(props: Props): React.Node { + const styles = useStyles(unboundStyles); + const windowWidth = useSelector(state => state.dimensions.width); + + const { + buttonWidth, + rightActions = [], + onSwipeableRightWillOpen, + innerRef, + children, + } = props; - renderRightActions = progress => { - const actions = this.props.rightActions.map( - ({ key, content, color, onPress }, i) => { - const translation = progress.interpolate({ - inputRange: [0, 1], - outputRange: [ - (this.props.rightActions.length - i) * this.props.buttonWidth, - 0, - ], - }); - return ( - - - - ); - }, - ); + + + ); + }, + ); - return {actions}; - }; + return {actions}; + }, + [ + buttonWidth, + rightActions, + styles.action, + styles.actionsContainer, + windowWidth, + ], + ); - render() { - return ( + const swipeable = React.useMemo( + () => ( - {this.props.children} + {children} - ); - } + ), + [children, innerRef, onSwipeableRightWillOpen, renderRightActions], + ); + + return swipeable; } const unboundStyles = { @@ -98,20 +106,4 @@ }, }; -const ConnectedSwipeable: React.ComponentType = - React.memo(function ConnectedSwipeable(props: BaseProps) { - const styles = useStyles(unboundStyles); - const windowWidth = useSelector(state => state.dimensions.width); - const colors = useColors(); - - return ( - - ); - }); - -export default ConnectedSwipeable; +export default Swipeable;