@planningcenter/chat-react-native 3.7.0-rc.6 → 3.7.0-rc.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/conversations/conversation_actions.d.ts.map +1 -1
- package/build/components/conversations/conversation_actions.js +6 -2
- package/build/components/conversations/conversation_actions.js.map +1 -1
- package/package.json +2 -2
- package/src/components/conversations/conversation_actions.tsx +10 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"conversation_actions.d.ts","sourceRoot":"","sources":["../../../src/components/conversations/conversation_actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAA;AAClF,OAAO,EAAuB,SAAS,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAU1F,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;
|
|
1
|
+
{"version":3,"file":"conversation_actions.d.ts","sourceRoot":"","sources":["../../../src/components/conversations/conversation_actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAA;AAClF,OAAO,EAAuB,SAAS,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAU1F,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAKlD,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,OAAO,GACR,EAAE;IACD,QAAQ,EAAE,SAAS,CAAA;IACnB,YAAY,EAAE,oBAAoB,CAAA;IAClC,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B,qBAuDA"}
|
|
@@ -2,8 +2,9 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
|
2
2
|
import { Platform, Pressable, StyleSheet, View } from 'react-native';
|
|
3
3
|
import ReanimatedSwipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
|
|
4
4
|
import { useConversationsContext } from '../../contexts/conversations_context';
|
|
5
|
-
import { useTheme } from '../../hooks';
|
|
5
|
+
import { useTheme, useCreateAndroidRippleColor } from '../../hooks';
|
|
6
6
|
import { useConversationsMarkRead, useConversationsMute, } from '../../hooks/use_conversations_actions';
|
|
7
|
+
import { platformPressedOpacityStyle } from '../../utils';
|
|
7
8
|
import { tokens } from '../../vendor/tapestry/tokens';
|
|
8
9
|
import { ActionToggleButton } from './action_toggle_button';
|
|
9
10
|
export function ConversationActions({ children, conversation, style, onPress, }) {
|
|
@@ -12,6 +13,9 @@ export function ConversationActions({ children, conversation, style, onPress, })
|
|
|
12
13
|
const { activeConversationId, setActiveConversationId } = useConversationsContext();
|
|
13
14
|
const [disabled, setDisabled] = useState(false);
|
|
14
15
|
const overshootLeft = Platform.OS === 'ios';
|
|
16
|
+
const androidRippleColor = useCreateAndroidRippleColor({
|
|
17
|
+
color: styles.swipeableChildContainer.backgroundColor,
|
|
18
|
+
});
|
|
15
19
|
const handleSwipeableClose = () => {
|
|
16
20
|
setDisabled(false);
|
|
17
21
|
swipeableRef.current?.close();
|
|
@@ -31,7 +35,7 @@ export function ConversationActions({ children, conversation, style, onPress, })
|
|
|
31
35
|
handleSwipeableClose();
|
|
32
36
|
}, [activeConversationId, conversation.id]);
|
|
33
37
|
return (<ReanimatedSwipeable ref={swipeableRef} childrenContainerStyle={styles.swipeableChildContainer} containerStyle={styles.swipeableContainer} overshootFriction={8} overshootLeft={overshootLeft} overshootRight={false} onSwipeableOpenStartDrag={handleSwipeableOpen} onSwipeableClose={() => setDisabled(false)} renderRightActions={() => <></>} renderLeftActions={() => (<LeftActions conversation={conversation} onClose={handleSwipeableClose}/>)}>
|
|
34
|
-
<Pressable onPress={handlePress} style={style}>
|
|
38
|
+
<Pressable onPress={handlePress} style={({ pressed }) => [style, pressed && platformPressedOpacityStyle]} android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}>
|
|
35
39
|
{children}
|
|
36
40
|
</Pressable>
|
|
37
41
|
</ReanimatedSwipeable>);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"conversation_actions.js","sourceRoot":"","sources":["../../../src/components/conversations/conversation_actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAClF,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAa,UAAU,EAAE,IAAI,EAAa,MAAM,cAAc,CAAA;AAC1F,OAAO,mBAEN,MAAM,kDAAkD,CAAA;AACzD,OAAO,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAA;AAC9E,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;
|
|
1
|
+
{"version":3,"file":"conversation_actions.js","sourceRoot":"","sources":["../../../src/components/conversations/conversation_actions.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'\nimport { Platform, Pressable, StyleProp, StyleSheet, View, ViewStyle } from 'react-native'\nimport ReanimatedSwipeable, {\n SwipeableMethods,\n} from 'react-native-gesture-handler/ReanimatedSwipeable'\nimport { useConversationsContext } from '../../contexts/conversations_context'\nimport { useTheme, useCreateAndroidRippleColor } from '../../hooks'\nimport {\n useConversationsMarkRead,\n useConversationsMute,\n} from '../../hooks/use_conversations_actions'\nimport { ConversationResource } from '../../types'\nimport { platformPressedOpacityStyle } from '../../utils'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { ActionToggleButton } from './action_toggle_button'\n\nexport function ConversationActions({\n children,\n conversation,\n style,\n onPress,\n}: {\n children: ReactNode\n conversation: ConversationResource\n onPress: () => void\n style?: StyleProp<ViewStyle>\n}) {\n const swipeableRef = useRef<SwipeableMethods>(null)\n const styles = useStyles()\n const { activeConversationId, setActiveConversationId } = useConversationsContext()\n const [disabled, setDisabled] = useState(false)\n const overshootLeft = Platform.OS === 'ios'\n const androidRippleColor = useCreateAndroidRippleColor({\n color: styles.swipeableChildContainer.backgroundColor,\n })\n\n const handleSwipeableClose = () => {\n setDisabled(false)\n swipeableRef.current?.close()\n }\n\n const handleSwipeableOpen = () => {\n setDisabled(true)\n setActiveConversationId(conversation.id)\n }\n\n const handlePress = useCallback(() => {\n if (disabled || !onPress) return\n onPress()\n }, [disabled, onPress])\n\n useEffect(() => {\n if (activeConversationId === conversation.id) return\n\n handleSwipeableClose()\n }, [activeConversationId, conversation.id])\n\n return (\n <ReanimatedSwipeable\n ref={swipeableRef}\n childrenContainerStyle={styles.swipeableChildContainer}\n containerStyle={styles.swipeableContainer}\n overshootFriction={8}\n overshootLeft={overshootLeft}\n overshootRight={false}\n onSwipeableOpenStartDrag={handleSwipeableOpen}\n onSwipeableClose={() => setDisabled(false)}\n renderRightActions={() => <></>}\n renderLeftActions={() => (\n <LeftActions conversation={conversation} onClose={handleSwipeableClose} />\n )}\n >\n <Pressable\n onPress={handlePress}\n style={({ pressed }) => [style, pressed && platformPressedOpacityStyle]}\n android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n >\n {children}\n </Pressable>\n </ReanimatedSwipeable>\n )\n}\n\ninterface LeftActionsProps {\n conversation: ConversationResource\n onClose: () => void\n}\n\nfunction LeftActions({ conversation, onClose }: LeftActionsProps) {\n const styles = useStyles()\n const emptyConversation = conversation.lastMessageCreatedAt === null\n\n const muteToggleContent = {\n true: { iconName: 'general.bell', label: 'Unmute' },\n false: { iconName: 'general.bellMuted', label: 'Mute' },\n } as const\n\n const latestMessageUnreadToggleContent = {\n true: { iconName: 'general.outlinedTextMessage', label: 'Mark read' },\n false: { iconName: 'general.textMessageNotifications', label: 'Mark unread' },\n } as const\n const { muted, setMuted, isPending } = useConversationsMute({ conversation })\n const { read, markRead, isPending: markReadPending } = useConversationsMarkRead({ conversation })\n\n const handleMute = useCallback(() => {\n setMuted(!muted)\n onClose()\n }, [muted, onClose, setMuted])\n\n const handleLatestMessageUnread = useCallback(() => {\n markRead(!read)\n onClose()\n }, [read, onClose, markRead])\n\n return (\n <View style={styles.actionButtonContainer}>\n <ActionToggleButton\n loading={markReadPending}\n disabled={emptyConversation}\n toggled={!read}\n onPress={handleLatestMessageUnread}\n toggleContent={latestMessageUnreadToggleContent}\n backgroundColor={tokens.fillColorInteractionSwipeDefault}\n />\n <ActionToggleButton\n loading={isPending}\n toggled={muted}\n onPress={handleMute}\n toggleContent={muteToggleContent}\n backgroundColor={tokens.fillColorInteractionSwipeSecondary}\n />\n </View>\n )\n}\n\nconst ACTION_BUTTON_WIDTH = 120\nconst ACTION_BUTTON_COUNT = 2\n\nconst useStyles = () => {\n const { colors } = useTheme()\n return StyleSheet.create({\n swipeableChildContainer: {\n backgroundColor: colors.surfaceColor100,\n },\n actionButtonContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n width: ACTION_BUTTON_WIDTH * ACTION_BUTTON_COUNT,\n alignContent: 'stretch',\n },\n swipeableContainer: {\n backgroundColor: colors.surfaceColor090,\n },\n })\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@planningcenter/chat-react-native",
|
|
3
|
-
"version": "3.7.0-rc.
|
|
3
|
+
"version": "3.7.0-rc.7",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "build/index.js",
|
|
6
6
|
"types": "build/index.d.ts",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"prettier": "^3.4.2",
|
|
56
56
|
"typescript": "<5.6.0"
|
|
57
57
|
},
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "06b73c117671227235899f500cb1664c7f1eff42"
|
|
59
59
|
}
|
|
@@ -4,12 +4,13 @@ import ReanimatedSwipeable, {
|
|
|
4
4
|
SwipeableMethods,
|
|
5
5
|
} from 'react-native-gesture-handler/ReanimatedSwipeable'
|
|
6
6
|
import { useConversationsContext } from '../../contexts/conversations_context'
|
|
7
|
-
import { useTheme } from '../../hooks'
|
|
7
|
+
import { useTheme, useCreateAndroidRippleColor } from '../../hooks'
|
|
8
8
|
import {
|
|
9
9
|
useConversationsMarkRead,
|
|
10
10
|
useConversationsMute,
|
|
11
11
|
} from '../../hooks/use_conversations_actions'
|
|
12
12
|
import { ConversationResource } from '../../types'
|
|
13
|
+
import { platformPressedOpacityStyle } from '../../utils'
|
|
13
14
|
import { tokens } from '../../vendor/tapestry/tokens'
|
|
14
15
|
import { ActionToggleButton } from './action_toggle_button'
|
|
15
16
|
|
|
@@ -29,6 +30,9 @@ export function ConversationActions({
|
|
|
29
30
|
const { activeConversationId, setActiveConversationId } = useConversationsContext()
|
|
30
31
|
const [disabled, setDisabled] = useState(false)
|
|
31
32
|
const overshootLeft = Platform.OS === 'ios'
|
|
33
|
+
const androidRippleColor = useCreateAndroidRippleColor({
|
|
34
|
+
color: styles.swipeableChildContainer.backgroundColor,
|
|
35
|
+
})
|
|
32
36
|
|
|
33
37
|
const handleSwipeableClose = () => {
|
|
34
38
|
setDisabled(false)
|
|
@@ -66,7 +70,11 @@ export function ConversationActions({
|
|
|
66
70
|
<LeftActions conversation={conversation} onClose={handleSwipeableClose} />
|
|
67
71
|
)}
|
|
68
72
|
>
|
|
69
|
-
<Pressable
|
|
73
|
+
<Pressable
|
|
74
|
+
onPress={handlePress}
|
|
75
|
+
style={({ pressed }) => [style, pressed && platformPressedOpacityStyle]}
|
|
76
|
+
android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}
|
|
77
|
+
>
|
|
70
78
|
{children}
|
|
71
79
|
</Pressable>
|
|
72
80
|
</ReanimatedSwipeable>
|