From 6b72d0e98cc5527d3cd76ed0753a8d477b700f20 Mon Sep 17 00:00:00 2001 From: Minnia Date: Thu, 15 Jul 2021 15:05:54 +0200 Subject: [PATCH 1/3] add panOnPress --- .../AppNotificationWrapper.tsx | 73 ++++++++++--------- 1 file changed, 39 insertions(+), 34 deletions(-) diff --git a/src/AppNotificationWrapper/AppNotificationWrapper.tsx b/src/AppNotificationWrapper/AppNotificationWrapper.tsx index 88add83..d45eaf5 100644 --- a/src/AppNotificationWrapper/AppNotificationWrapper.tsx +++ b/src/AppNotificationWrapper/AppNotificationWrapper.tsx @@ -1,22 +1,22 @@ -import { useAnimatedValue, useLayout } from '@redmindab/react-hooks' -import React, { Fragment, FunctionComponent, useRef, useState } from 'react' -import { Animated, Dimensions, PanResponder } from 'react-native' -import { View } from 'styled-native-kit' +import { useAnimatedValue, useLayout } from "@redmindab/react-hooks"; +import React, { Fragment, FunctionComponent, useRef, useState } from "react"; +import { Animated, Dimensions, PanResponder } from "react-native"; +import { View } from "styled-native-kit"; import { AppNotificationComponentProps, AppNotificationStyleProps, NotificationQueueItem, -} from '../types' -import { Shrink, SlideUpFadeIn } from './animations' +} from "../types"; +import { Shrink, SlideUpFadeIn } from "./animations"; -type OwnProps = AppNotificationStyleProps +type OwnProps = AppNotificationStyleProps; -type Props = OwnProps & NotificationQueueItem & AppNotificationComponentProps +type Props = OwnProps & NotificationQueueItem & AppNotificationComponentProps; type WrapperProps = { - height?: number - reversed?: boolean -} + height?: number; + reversed?: boolean; +}; export const AppNotificationWrapper: FunctionComponent = ({ animateOut, @@ -24,62 +24,67 @@ export const AppNotificationWrapper: FunctionComponent = ({ panEnabled = true, alignBottom, children, + onPress, animationWrappers = { in: undefined, out: undefined }, }) => { - const [hide, setHide] = useState(false) - const [layout, bindLayout] = useLayout() - const translateX = useAnimatedValue(0) + const [hide, setHide] = useState(false); + const [layout, bindLayout] = useLayout(); + const translateX = useAnimatedValue(0); const pan = useRef( PanResponder.create({ onMoveShouldSetPanResponderCapture: () => true, onPanResponderMove: (e, { dx }) => { - translateX.setValue(dx) + translateX.setValue(dx); }, onPanResponderRelease: (e, { vx, dx }) => { - const screenWidth = Dimensions.get('window').width + const hasTapped = vx + dx === 0; + if (onPress && hasTapped) { + onPress(); + } + const screenWidth = Dimensions.get("window").width; if (Math.abs(vx) >= 0.5 || Math.abs(dx) >= 0.5 * screenWidth) { Animated.timing(translateX, { toValue: dx > 0 ? screenWidth : -screenWidth, duration: 200, useNativeDriver: true, - }).start(() => setHide(true)) + }).start(() => setHide(true)); } else { Animated.spring(translateX, { toValue: 0, bounciness: 10, useNativeDriver: true, - }).start() + }).start(); } }, }) - ).current + ).current; - let PanWrapper = Fragment - let panWrapperProps = {} - let AnimationWrapper = View - const wrapperProps: WrapperProps = {} + let PanWrapper = Fragment; + let panWrapperProps = {}; + let AnimationWrapper = View; + const wrapperProps: WrapperProps = {}; if (animated) { if (panEnabled) { - PanWrapper = Animated.View + PanWrapper = Animated.View; panWrapperProps = { ...pan.panHandlers, style: { opacity: +!hide, transform: [{ translateX }] }, - } + }; } - const outAnimation = animationWrappers.out || Shrink - const inAnimation = animationWrappers.in || SlideUpFadeIn + const outAnimation = animationWrappers.out || Shrink; + const inAnimation = animationWrappers.in || SlideUpFadeIn; - AnimationWrapper = animateOut ? outAnimation : inAnimation - wrapperProps.height = layout.height + AnimationWrapper = animateOut ? outAnimation : inAnimation; + wrapperProps.height = layout.height; if (hide) { - AnimationWrapper = Shrink + AnimationWrapper = Shrink; } if (alignBottom && !animateOut) { - wrapperProps.reversed = true + wrapperProps.reversed = true; } } @@ -89,7 +94,7 @@ export const AppNotificationWrapper: FunctionComponent = ({ {children} - ) -} + ); +}; -export default AppNotificationWrapper +export default AppNotificationWrapper; From 7e418944a3372a0e3417b79c0c54d43fe0a70d80 Mon Sep 17 00:00:00 2001 From: Minnia Date: Mon, 2 Aug 2021 14:31:31 +0200 Subject: [PATCH 2/3] change onPress in AppNotificationWrapper, remove onPress in AppNotificationUI --- src/AppNotificationUI/AppNotificationUI.tsx | 29 ++++++++----------- src/AppNotificationUI/styled.ts | 20 ++++++------- .../AppNotificationWrapper.tsx | 29 +++++++++++++++---- 3 files changed, 46 insertions(+), 32 deletions(-) diff --git a/src/AppNotificationUI/AppNotificationUI.tsx b/src/AppNotificationUI/AppNotificationUI.tsx index cad1fa0..69e7be2 100644 --- a/src/AppNotificationUI/AppNotificationUI.tsx +++ b/src/AppNotificationUI/AppNotificationUI.tsx @@ -1,34 +1,29 @@ -import React, { FunctionComponent } from 'react' -import { Image } from 'react-native' -import { FlexRow } from 'styled-native-kit' +import React, { FunctionComponent } from "react"; +import { Image } from "react-native"; +import { FlexRow } from "styled-native-kit"; import { AppNotificationComponentProps, AppNotificationStyleProps, NotificationQueueItem, -} from '../types' -import { Card, Circle, Message, TextContainer, Title } from './styled' +} from "../types"; +import { Card, Circle, Message, TextContainer, Title } from "./styled"; -type OwnProps = AppNotificationStyleProps +type OwnProps = AppNotificationStyleProps; -type Props = OwnProps & NotificationQueueItem & AppNotificationComponentProps +type Props = OwnProps & NotificationQueueItem & AppNotificationComponentProps; export const AppNotificationUI: FunctionComponent = ({ title, message, imageUrl, - onPress, containerStyle, imageStyle, messageStyle, titleStyle, }) => { return ( - - + + {imageUrl && ( )} @@ -40,7 +35,7 @@ export const AppNotificationUI: FunctionComponent = ({ - ) -} + ); +}; -export default AppNotificationUI +export default AppNotificationUI; diff --git a/src/AppNotificationUI/styled.ts b/src/AppNotificationUI/styled.ts index b5474b9..b2eea76 100644 --- a/src/AppNotificationUI/styled.ts +++ b/src/AppNotificationUI/styled.ts @@ -1,6 +1,6 @@ -import styled, { css } from 'styled-components/native' -import { TouchableOpacity, Text } from 'react-native' -import { CircleView } from 'styled-native-kit' +import styled, { css } from "styled-components/native"; +import { TouchableOpacity, Text } from "react-native"; +import { CircleView } from "styled-native-kit"; export const cardShadow = css` shadow-color: #948aa5; @@ -8,32 +8,32 @@ export const cardShadow = css` shadow-opacity: 0.22; shadow-radius: 6px; elevation: 3; -` +`; -export const Card = styled(TouchableOpacity)` +export const Card = styled.View` background-color: white; ${cardShadow}; padding: ${8 * 2}px ${8 * 1.5}px; border-radius: 12px; margin: 0 ${8 * 2}px; margin-bottom: ${8 / 2}px; -` +`; export const TextContainer = styled.View` margin-left: 8px; width: 85%; -` +`; export const Title = styled(Text)` font-size: 12px; text-transform: uppercase; -` +`; export const Message = styled(Text)` font-size: 14px; line-height: ${14 * 1.3}px; -` +`; export const Circle = styled(CircleView).attrs(() => ({ size: 33, -}))`` +}))``; diff --git a/src/AppNotificationWrapper/AppNotificationWrapper.tsx b/src/AppNotificationWrapper/AppNotificationWrapper.tsx index d45eaf5..c9e407e 100644 --- a/src/AppNotificationWrapper/AppNotificationWrapper.tsx +++ b/src/AppNotificationWrapper/AppNotificationWrapper.tsx @@ -1,6 +1,11 @@ import { useAnimatedValue, useLayout } from "@redmindab/react-hooks"; import React, { Fragment, FunctionComponent, useRef, useState } from "react"; -import { Animated, Dimensions, PanResponder } from "react-native"; +import { + Animated, + Dimensions, + PanResponder, + TouchableOpacity, +} from "react-native"; import { View } from "styled-native-kit"; import { AppNotificationComponentProps, @@ -18,18 +23,29 @@ type WrapperProps = { reversed?: boolean; }; +type TouchableOpacityProps = { + activeOpacity: number; + onPress: () => void; +}; + export const AppNotificationWrapper: FunctionComponent = ({ animateOut, animated = true, panEnabled = true, alignBottom, - children, onPress, + children, animationWrappers = { in: undefined, out: undefined }, }) => { const [hide, setHide] = useState(false); const [layout, bindLayout] = useLayout(); const translateX = useAnimatedValue(0); + + const touchableProps: TouchableOpacityProps = { + activeOpacity: 1, + onPress: () => null, + }; + const pan = useRef( PanResponder.create({ onMoveShouldSetPanResponderCapture: () => true, @@ -38,8 +54,9 @@ export const AppNotificationWrapper: FunctionComponent = ({ }, onPanResponderRelease: (e, { vx, dx }) => { const hasTapped = vx + dx === 0; - if (onPress && hasTapped) { - onPress(); + if (onPress && !panEnabled && hasTapped) { + touchableProps.onPress = onPress(); + touchableProps.activeOpacity = 0.7; } const screenWidth = Dimensions.get("window").width; if (Math.abs(vx) >= 0.5 || Math.abs(dx) >= 0.5 * screenWidth) { @@ -91,7 +108,9 @@ export const AppNotificationWrapper: FunctionComponent = ({ return ( - {children} + + {children} + ); From 4c0f5c6c1c5fad05eeb72dc499482aaf1230f283 Mon Sep 17 00:00:00 2001 From: Minnia Date: Tue, 3 Aug 2021 10:42:52 +0200 Subject: [PATCH 3/3] fix onPress and prettier --- example/.prettierrc.js | 3 ++- src/AppNotificationWrapper/AppNotificationWrapper.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/example/.prettierrc.js b/example/.prettierrc.js index 5c4de1a..756c7b8 100644 --- a/example/.prettierrc.js +++ b/example/.prettierrc.js @@ -1,6 +1,7 @@ module.exports = { bracketSpacing: false, jsxBracketSameLine: true, + semi: false, singleQuote: true, trailingComma: 'all', -}; +} diff --git a/src/AppNotificationWrapper/AppNotificationWrapper.tsx b/src/AppNotificationWrapper/AppNotificationWrapper.tsx index c9e407e..82d6d90 100644 --- a/src/AppNotificationWrapper/AppNotificationWrapper.tsx +++ b/src/AppNotificationWrapper/AppNotificationWrapper.tsx @@ -55,7 +55,7 @@ export const AppNotificationWrapper: FunctionComponent = ({ onPanResponderRelease: (e, { vx, dx }) => { const hasTapped = vx + dx === 0; if (onPress && !panEnabled && hasTapped) { - touchableProps.onPress = onPress(); + touchableProps.onPress = onPress; touchableProps.activeOpacity = 0.7; } const screenWidth = Dimensions.get("window").width;