@planningcenter/chat-react-native 3.17.2 → 3.17.3-rc.0
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reply_connectors.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/reply_connectors.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAU7C,eAAO,MAAM,wBAAwB,IAAI,CAAA;AAEzC,UAAU,mBAAmB;IAC3B,OAAO,EAAE,eAAe,CAAA;IACxB,mBAAmB,EAAE,MAAM,CAAA;CAC5B;AAED,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,EAAE,mBAAmB,sCAkCxF;AAED,wBAAgB,gBAAgB,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,EAAE,mBAAmB,
|
|
1
|
+
{"version":3,"file":"reply_connectors.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/reply_connectors.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAU7C,eAAO,MAAM,wBAAwB,IAAI,CAAA;AAEzC,UAAU,mBAAmB;IAC3B,OAAO,EAAE,eAAe,CAAA;IACxB,mBAAmB,EAAE,MAAM,CAAA;CAC5B;AAED,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,EAAE,mBAAmB,sCAkCxF;AAED,wBAAgB,gBAAgB,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,EAAE,mBAAmB,sCA6CrF"}
|
|
@@ -66,7 +66,9 @@ export function MyReplyConnector({ message, messageBubbleHeight }) {
|
|
|
66
66
|
if (!ConnectorComponent)
|
|
67
67
|
return null;
|
|
68
68
|
const spacerStyle = nextRendersAuthor ? styles.myReplyConnectorSpacer : null;
|
|
69
|
-
return <
|
|
69
|
+
return (<EnforceLeftPositionForMyReplyConnector>
|
|
70
|
+
<View style={[styles.myReplyConnectorContainer, spacerStyle]}>{ConnectorComponent}</View>
|
|
71
|
+
</EnforceLeftPositionForMyReplyConnector>);
|
|
70
72
|
}
|
|
71
73
|
function VerticalLineConnector({ style }) {
|
|
72
74
|
const styles = useStyles();
|
|
@@ -102,6 +104,17 @@ function SwirlConnector({ style, height }) {
|
|
|
102
104
|
<View style={styles.swirlConnectorVerticalLineTail}/>
|
|
103
105
|
</View>);
|
|
104
106
|
}
|
|
107
|
+
// TODO: Remove when Services React Native bumps to React Native 0.74 or higher.
|
|
108
|
+
// This fixes a React Native bug where using `flexDirection: 'row-reverse'` also switches the `left`/`right` absolute positioning values.
|
|
109
|
+
// The wrapper ensures the MyReplyConnector is always positioned to the left of the message bubble on older versions of React Native.
|
|
110
|
+
// Long term fix is described here: https://reactnative.dev/blog/2024/04/22/release-0.74#new-layout-behaviors
|
|
111
|
+
function EnforceLeftPositionForMyReplyConnector({ children }) {
|
|
112
|
+
const styles = useStyles();
|
|
113
|
+
return (<View style={styles.resetPosition} pointerEvents="none" // ensures wrapper does not block press events
|
|
114
|
+
>
|
|
115
|
+
{children}
|
|
116
|
+
</View>);
|
|
117
|
+
}
|
|
105
118
|
const useStyles = () => {
|
|
106
119
|
const { colors } = useTheme();
|
|
107
120
|
const borderColor = colors.borderColorDefaultBase;
|
|
@@ -176,6 +189,14 @@ const useStyles = () => {
|
|
|
176
189
|
flex: 1,
|
|
177
190
|
marginTop: -1, // Ensures there is no gap between the vertical line and the swirl connector
|
|
178
191
|
},
|
|
192
|
+
// TODO: Remove when Services React Native bumps to React Native 0.74 or higher.
|
|
193
|
+
resetPosition: {
|
|
194
|
+
position: 'absolute',
|
|
195
|
+
left: 0,
|
|
196
|
+
right: 0,
|
|
197
|
+
top: 0,
|
|
198
|
+
bottom: 0,
|
|
199
|
+
},
|
|
179
200
|
});
|
|
180
201
|
};
|
|
181
202
|
//# sourceMappingURL=reply_connectors.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reply_connectors.js","sourceRoot":"","sources":["../../../src/components/conversation/reply_connectors.tsx"],"names":[],"mappings":"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","sourcesContent":["import { StyleSheet, View, ViewStyle } from 'react-native'\nimport Svg, { Path } from 'react-native-svg'\nimport { useTheme } from '../../hooks'\nimport { MessageResource } from '../../types'\nimport {\n CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,\n} from '../../utils/styles'\nimport { REPLIES_FEATURE_ENABLED } from '../../utils'\n\nconst MY_REPLY_CONNECTOR_WIDTH = 38\nconst CONNECTOR_BORDER_WIDTH = 4\nconst OFFSET_CONNECTOR_CONTAINER = CONNECTOR_BORDER_WIDTH / 2 // Accounts for the border width ensuring the connectors are centered under the avatar\nexport const AVATAR_CONNECTOR_SPACING = 8\n\ninterface ReplyConnectorProps {\n message: MessageResource\n messageBubbleHeight: number\n}\n\nexport function TheirReplyConnector({ message, messageBubbleHeight }: ReplyConnectorProps) {\n const styles = useStyles()\n const { nextRendersAuthor, threadPosition, renderAuthor, isReplyShadowMessage } = message\n\n if (!REPLIES_FEATURE_ENABLED) return null\n if (messageBubbleHeight === 0) return null // Prevents UI shifting\n\n const connectorMap: Record<string, React.ReactNode | null> = {\n shortTailCurve: <ShortTailCurveConnector height={messageBubbleHeight / 2} />,\n shortHeadCurve: <ShortHeadCurveConnector height={messageBubbleHeight / 2} />,\n verticalLine: <VerticalLineConnector />,\n default: null,\n }\n\n const getConnectorKey = () => {\n if (threadPosition === 'first' && !renderAuthor) return 'shortHeadCurve'\n if (threadPosition === 'last' && !renderAuthor) return 'shortTailCurve'\n if (\n (threadPosition === 'first' && renderAuthor) ||\n threadPosition === 'center' ||\n isReplyShadowMessage\n )\n return 'verticalLine'\n return 'default'\n }\n\n const ConnectorComponent = connectorMap[getConnectorKey()]\n if (!ConnectorComponent) return null\n\n const spacerStyle = nextRendersAuthor ? styles.theirReplyConnectorSpacer : null\n\n return (\n <View style={[styles.theirReplyConnectorContainer, spacerStyle]}>{ConnectorComponent}</View>\n )\n}\n\nexport function MyReplyConnector({ message, messageBubbleHeight }: ReplyConnectorProps) {\n const styles = useStyles()\n const { nextRendersAuthor, threadPosition, prevIsMyReply, nextIsMyReply, isReplyShadowMessage } =\n message\n\n if (!REPLIES_FEATURE_ENABLED) return null\n if (messageBubbleHeight === 0) return null // Prevents UI shifting\n\n const connectorMap: Record<string, React.ReactNode | null> = {\n longTailCurve: (\n <LongTailCurveConnector\n height={messageBubbleHeight / 2}\n style={styles.myReplyConnectorPosition}\n />\n ),\n longHeadCurve: (\n <LongHeadCurveConnector\n height={messageBubbleHeight / 2}\n style={styles.myReplyConnectorPosition}\n />\n ),\n verticalLine: <VerticalLineConnector style={styles.myReplyConnectorPosition} />,\n swirl: <SwirlConnector style={styles.myReplyConnectorPosition} height={messageBubbleHeight} />,\n default: null,\n }\n\n const getConnectorKey = () => {\n if (threadPosition === 'first' || isReplyShadowMessage) return 'longHeadCurve'\n if (threadPosition === 'center' && prevIsMyReply && nextIsMyReply) return 'verticalLine'\n if (threadPosition === 'center' && (!prevIsMyReply || !nextIsMyReply)) return 'swirl'\n if (threadPosition === 'last') return 'longTailCurve'\n\n return 'default'\n }\n\n const ConnectorComponent = connectorMap[getConnectorKey()]\n if (!ConnectorComponent) return null\n\n const spacerStyle = nextRendersAuthor ? styles.myReplyConnectorSpacer : null\n\n return <View style={[styles.myReplyConnectorContainer, spacerStyle]}>{ConnectorComponent}</View>\n}\n\nfunction VerticalLineConnector({ style }: { style?: ViewStyle }) {\n const styles = useStyles()\n return <View style={[styles.verticalLineConnector, style]} />\n}\n\nfunction LongHeadCurveConnector({ height, style }: { height: number; style?: ViewStyle }) {\n const styles = useStyles()\n return <View style={[styles.longHeadCurveConnector, { height, marginTop: height }, style]} />\n}\n\nfunction LongTailCurveConnector({ height, style }: { height: number; style?: ViewStyle }) {\n const styles = useStyles()\n return <View style={[styles.longTailCurveConnector, { height }, style]} />\n}\n\nfunction ShortHeadCurveConnector({ height }: { height: number }) {\n const styles = useStyles()\n return <View style={[styles.shortHeadCurveConnector, { marginTop: height }]} />\n}\n\nfunction ShortTailCurveConnector({ height }: { height: number }) {\n const styles = useStyles()\n return <View style={[styles.shortTailCurveConnector, { height }]} />\n}\n\nfunction SwirlConnector({ style, height }: { style?: ViewStyle; height: number }) {\n const styles = useStyles()\n const { colors } = useTheme()\n\n return (\n <View style={[styles.swirlConnectorContainer, style]}>\n <View style={{ height }}>\n <View style={styles.swirlConnectorVerticalLineHead} />\n <Svg width={27} height={34} fill=\"none\">\n <Path\n stroke={colors.borderColorDefaultBase}\n strokeWidth={CONNECTOR_BORDER_WIDTH}\n d=\"M2.07 34c0-6.142 1.201-12.283 3.343-17m0 0c2.305-5.075 5.699-8.5 9.857-8.5 4.86 0 8.8 3.806 8.8 8.5s-3.94 8.5-8.8 8.5c-4.158 0-7.552-3.425-9.857-8.5zm0 0C3.271 12.283 2.07 6.142 2.07 0\"\n />\n </Svg>\n <View style={styles.swirlConnectorVerticalLineTail} />\n </View>\n <View style={styles.swirlConnectorVerticalLineTail} />\n </View>\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n const borderColor = colors.borderColorDefaultBase\n\n return StyleSheet.create({\n theirReplyConnectorContainer: {\n width: '50%',\n marginRight: OFFSET_CONNECTOR_CONTAINER,\n alignSelf: 'flex-end',\n flex: 1,\n },\n theirReplyConnectorSpacer: {\n paddingBottom: AVATAR_CONNECTOR_SPACING,\n },\n myReplyConnectorContainer: {\n width: MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,\n position: 'absolute',\n left: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL - OFFSET_CONNECTOR_CONTAINER,\n top: 0,\n bottom: 0,\n },\n myReplyConnectorPosition: {\n left: '50%',\n },\n myReplyConnectorSpacer: {\n bottom: AVATAR_CONNECTOR_SPACING,\n },\n verticalLineConnector: {\n flex: 1,\n borderLeftWidth: CONNECTOR_BORDER_WIDTH,\n borderLeftColor: borderColor,\n },\n longHeadCurveConnector: {\n width: MY_REPLY_CONNECTOR_WIDTH,\n borderColor: borderColor,\n borderLeftWidth: CONNECTOR_BORDER_WIDTH,\n borderTopWidth: CONNECTOR_BORDER_WIDTH,\n borderTopLeftRadius: 16,\n flex: 1,\n },\n longTailCurveConnector: {\n width: MY_REPLY_CONNECTOR_WIDTH,\n borderColor: borderColor,\n borderLeftWidth: CONNECTOR_BORDER_WIDTH,\n borderBottomWidth: CONNECTOR_BORDER_WIDTH,\n borderBottomLeftRadius: 16,\n },\n shortHeadCurveConnector: {\n borderColor: borderColor,\n borderLeftWidth: CONNECTOR_BORDER_WIDTH,\n borderTopWidth: CONNECTOR_BORDER_WIDTH,\n borderTopLeftRadius: 16,\n flex: 1,\n },\n shortTailCurveConnector: {\n borderColor: borderColor,\n borderLeftWidth: CONNECTOR_BORDER_WIDTH,\n borderBottomWidth: CONNECTOR_BORDER_WIDTH,\n borderBottomLeftRadius: 16,\n },\n swirlConnectorContainer: {\n flex: 1,\n },\n swirlConnectorVerticalLineHead: {\n backgroundColor: borderColor,\n width: CONNECTOR_BORDER_WIDTH,\n flex: 1,\n marginBottom: -1, // Ensures there is no gap between the vertical line and the swirl connector\n },\n swirlConnectorVerticalLineTail: {\n backgroundColor: borderColor,\n width: CONNECTOR_BORDER_WIDTH,\n flex: 1,\n marginTop: -1, // Ensures there is no gap between the vertical line and the swirl connector\n },\n })\n}\n"]}
|
|
1
|
+
{"version":3,"file":"reply_connectors.js","sourceRoot":"","sources":["../../../src/components/conversation/reply_connectors.tsx"],"names":[],"mappings":"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","sourcesContent":["import { StyleSheet, View, ViewStyle } from 'react-native'\nimport Svg, { Path } from 'react-native-svg'\nimport { useTheme } from '../../hooks'\nimport { MessageResource } from '../../types'\nimport {\n CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,\n} from '../../utils/styles'\nimport { REPLIES_FEATURE_ENABLED } from '../../utils'\n\nconst MY_REPLY_CONNECTOR_WIDTH = 38\nconst CONNECTOR_BORDER_WIDTH = 4\nconst OFFSET_CONNECTOR_CONTAINER = CONNECTOR_BORDER_WIDTH / 2 // Accounts for the border width ensuring the connectors are centered under the avatar\nexport const AVATAR_CONNECTOR_SPACING = 8\n\ninterface ReplyConnectorProps {\n message: MessageResource\n messageBubbleHeight: number\n}\n\nexport function TheirReplyConnector({ message, messageBubbleHeight }: ReplyConnectorProps) {\n const styles = useStyles()\n const { nextRendersAuthor, threadPosition, renderAuthor, isReplyShadowMessage } = message\n\n if (!REPLIES_FEATURE_ENABLED) return null\n if (messageBubbleHeight === 0) return null // Prevents UI shifting\n\n const connectorMap: Record<string, React.ReactNode | null> = {\n shortTailCurve: <ShortTailCurveConnector height={messageBubbleHeight / 2} />,\n shortHeadCurve: <ShortHeadCurveConnector height={messageBubbleHeight / 2} />,\n verticalLine: <VerticalLineConnector />,\n default: null,\n }\n\n const getConnectorKey = () => {\n if (threadPosition === 'first' && !renderAuthor) return 'shortHeadCurve'\n if (threadPosition === 'last' && !renderAuthor) return 'shortTailCurve'\n if (\n (threadPosition === 'first' && renderAuthor) ||\n threadPosition === 'center' ||\n isReplyShadowMessage\n )\n return 'verticalLine'\n return 'default'\n }\n\n const ConnectorComponent = connectorMap[getConnectorKey()]\n if (!ConnectorComponent) return null\n\n const spacerStyle = nextRendersAuthor ? styles.theirReplyConnectorSpacer : null\n\n return (\n <View style={[styles.theirReplyConnectorContainer, spacerStyle]}>{ConnectorComponent}</View>\n )\n}\n\nexport function MyReplyConnector({ message, messageBubbleHeight }: ReplyConnectorProps) {\n const styles = useStyles()\n const { nextRendersAuthor, threadPosition, prevIsMyReply, nextIsMyReply, isReplyShadowMessage } =\n message\n\n if (!REPLIES_FEATURE_ENABLED) return null\n if (messageBubbleHeight === 0) return null // Prevents UI shifting\n\n const connectorMap: Record<string, React.ReactNode | null> = {\n longTailCurve: (\n <LongTailCurveConnector\n height={messageBubbleHeight / 2}\n style={styles.myReplyConnectorPosition}\n />\n ),\n longHeadCurve: (\n <LongHeadCurveConnector\n height={messageBubbleHeight / 2}\n style={styles.myReplyConnectorPosition}\n />\n ),\n verticalLine: <VerticalLineConnector style={styles.myReplyConnectorPosition} />,\n swirl: <SwirlConnector style={styles.myReplyConnectorPosition} height={messageBubbleHeight} />,\n default: null,\n }\n\n const getConnectorKey = () => {\n if (threadPosition === 'first' || isReplyShadowMessage) return 'longHeadCurve'\n if (threadPosition === 'center' && prevIsMyReply && nextIsMyReply) return 'verticalLine'\n if (threadPosition === 'center' && (!prevIsMyReply || !nextIsMyReply)) return 'swirl'\n if (threadPosition === 'last') return 'longTailCurve'\n\n return 'default'\n }\n\n const ConnectorComponent = connectorMap[getConnectorKey()]\n if (!ConnectorComponent) return null\n\n const spacerStyle = nextRendersAuthor ? styles.myReplyConnectorSpacer : null\n\n return (\n <EnforceLeftPositionForMyReplyConnector>\n <View style={[styles.myReplyConnectorContainer, spacerStyle]}>{ConnectorComponent}</View>\n </EnforceLeftPositionForMyReplyConnector>\n )\n}\n\nfunction VerticalLineConnector({ style }: { style?: ViewStyle }) {\n const styles = useStyles()\n return <View style={[styles.verticalLineConnector, style]} />\n}\n\nfunction LongHeadCurveConnector({ height, style }: { height: number; style?: ViewStyle }) {\n const styles = useStyles()\n return <View style={[styles.longHeadCurveConnector, { height, marginTop: height }, style]} />\n}\n\nfunction LongTailCurveConnector({ height, style }: { height: number; style?: ViewStyle }) {\n const styles = useStyles()\n return <View style={[styles.longTailCurveConnector, { height }, style]} />\n}\n\nfunction ShortHeadCurveConnector({ height }: { height: number }) {\n const styles = useStyles()\n return <View style={[styles.shortHeadCurveConnector, { marginTop: height }]} />\n}\n\nfunction ShortTailCurveConnector({ height }: { height: number }) {\n const styles = useStyles()\n return <View style={[styles.shortTailCurveConnector, { height }]} />\n}\n\nfunction SwirlConnector({ style, height }: { style?: ViewStyle; height: number }) {\n const styles = useStyles()\n const { colors } = useTheme()\n\n return (\n <View style={[styles.swirlConnectorContainer, style]}>\n <View style={{ height }}>\n <View style={styles.swirlConnectorVerticalLineHead} />\n <Svg width={27} height={34} fill=\"none\">\n <Path\n stroke={colors.borderColorDefaultBase}\n strokeWidth={CONNECTOR_BORDER_WIDTH}\n d=\"M2.07 34c0-6.142 1.201-12.283 3.343-17m0 0c2.305-5.075 5.699-8.5 9.857-8.5 4.86 0 8.8 3.806 8.8 8.5s-3.94 8.5-8.8 8.5c-4.158 0-7.552-3.425-9.857-8.5zm0 0C3.271 12.283 2.07 6.142 2.07 0\"\n />\n </Svg>\n <View style={styles.swirlConnectorVerticalLineTail} />\n </View>\n <View style={styles.swirlConnectorVerticalLineTail} />\n </View>\n )\n}\n\n// TODO: Remove when Services React Native bumps to React Native 0.74 or higher.\n// This fixes a React Native bug where using `flexDirection: 'row-reverse'` also switches the `left`/`right` absolute positioning values.\n// The wrapper ensures the MyReplyConnector is always positioned to the left of the message bubble on older versions of React Native.\n// Long term fix is described here: https://reactnative.dev/blog/2024/04/22/release-0.74#new-layout-behaviors\nfunction EnforceLeftPositionForMyReplyConnector({ children }: { children: React.ReactNode }) {\n const styles = useStyles()\n return (\n <View\n style={styles.resetPosition}\n pointerEvents=\"none\" // ensures wrapper does not block press events\n >\n {children}\n </View>\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n const borderColor = colors.borderColorDefaultBase\n\n return StyleSheet.create({\n theirReplyConnectorContainer: {\n width: '50%',\n marginRight: OFFSET_CONNECTOR_CONTAINER,\n alignSelf: 'flex-end',\n flex: 1,\n },\n theirReplyConnectorSpacer: {\n paddingBottom: AVATAR_CONNECTOR_SPACING,\n },\n myReplyConnectorContainer: {\n width: MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,\n position: 'absolute',\n left: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL - OFFSET_CONNECTOR_CONTAINER,\n top: 0,\n bottom: 0,\n },\n myReplyConnectorPosition: {\n left: '50%',\n },\n myReplyConnectorSpacer: {\n bottom: AVATAR_CONNECTOR_SPACING,\n },\n verticalLineConnector: {\n flex: 1,\n borderLeftWidth: CONNECTOR_BORDER_WIDTH,\n borderLeftColor: borderColor,\n },\n longHeadCurveConnector: {\n width: MY_REPLY_CONNECTOR_WIDTH,\n borderColor: borderColor,\n borderLeftWidth: CONNECTOR_BORDER_WIDTH,\n borderTopWidth: CONNECTOR_BORDER_WIDTH,\n borderTopLeftRadius: 16,\n flex: 1,\n },\n longTailCurveConnector: {\n width: MY_REPLY_CONNECTOR_WIDTH,\n borderColor: borderColor,\n borderLeftWidth: CONNECTOR_BORDER_WIDTH,\n borderBottomWidth: CONNECTOR_BORDER_WIDTH,\n borderBottomLeftRadius: 16,\n },\n shortHeadCurveConnector: {\n borderColor: borderColor,\n borderLeftWidth: CONNECTOR_BORDER_WIDTH,\n borderTopWidth: CONNECTOR_BORDER_WIDTH,\n borderTopLeftRadius: 16,\n flex: 1,\n },\n shortTailCurveConnector: {\n borderColor: borderColor,\n borderLeftWidth: CONNECTOR_BORDER_WIDTH,\n borderBottomWidth: CONNECTOR_BORDER_WIDTH,\n borderBottomLeftRadius: 16,\n },\n swirlConnectorContainer: {\n flex: 1,\n },\n swirlConnectorVerticalLineHead: {\n backgroundColor: borderColor,\n width: CONNECTOR_BORDER_WIDTH,\n flex: 1,\n marginBottom: -1, // Ensures there is no gap between the vertical line and the swirl connector\n },\n swirlConnectorVerticalLineTail: {\n backgroundColor: borderColor,\n width: CONNECTOR_BORDER_WIDTH,\n flex: 1,\n marginTop: -1, // Ensures there is no gap between the vertical line and the swirl connector\n },\n // TODO: Remove when Services React Native bumps to React Native 0.74 or higher.\n resetPosition: {\n position: 'absolute',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n },\n })\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@planningcenter/chat-react-native",
|
|
3
|
-
"version": "3.17.
|
|
3
|
+
"version": "3.17.3-rc.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "build/index.js",
|
|
6
6
|
"types": "build/index.d.ts",
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"react-native-url-polyfill": "^2.0.0",
|
|
60
60
|
"typescript": "<5.6.0"
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "aad447b4fb480ce51e039290bf9e546a60411c29"
|
|
63
63
|
}
|
|
@@ -94,7 +94,11 @@ export function MyReplyConnector({ message, messageBubbleHeight }: ReplyConnecto
|
|
|
94
94
|
|
|
95
95
|
const spacerStyle = nextRendersAuthor ? styles.myReplyConnectorSpacer : null
|
|
96
96
|
|
|
97
|
-
return
|
|
97
|
+
return (
|
|
98
|
+
<EnforceLeftPositionForMyReplyConnector>
|
|
99
|
+
<View style={[styles.myReplyConnectorContainer, spacerStyle]}>{ConnectorComponent}</View>
|
|
100
|
+
</EnforceLeftPositionForMyReplyConnector>
|
|
101
|
+
)
|
|
98
102
|
}
|
|
99
103
|
|
|
100
104
|
function VerticalLineConnector({ style }: { style?: ViewStyle }) {
|
|
@@ -144,6 +148,22 @@ function SwirlConnector({ style, height }: { style?: ViewStyle; height: number }
|
|
|
144
148
|
)
|
|
145
149
|
}
|
|
146
150
|
|
|
151
|
+
// TODO: Remove when Services React Native bumps to React Native 0.74 or higher.
|
|
152
|
+
// This fixes a React Native bug where using `flexDirection: 'row-reverse'` also switches the `left`/`right` absolute positioning values.
|
|
153
|
+
// The wrapper ensures the MyReplyConnector is always positioned to the left of the message bubble on older versions of React Native.
|
|
154
|
+
// Long term fix is described here: https://reactnative.dev/blog/2024/04/22/release-0.74#new-layout-behaviors
|
|
155
|
+
function EnforceLeftPositionForMyReplyConnector({ children }: { children: React.ReactNode }) {
|
|
156
|
+
const styles = useStyles()
|
|
157
|
+
return (
|
|
158
|
+
<View
|
|
159
|
+
style={styles.resetPosition}
|
|
160
|
+
pointerEvents="none" // ensures wrapper does not block press events
|
|
161
|
+
>
|
|
162
|
+
{children}
|
|
163
|
+
</View>
|
|
164
|
+
)
|
|
165
|
+
}
|
|
166
|
+
|
|
147
167
|
const useStyles = () => {
|
|
148
168
|
const { colors } = useTheme()
|
|
149
169
|
const borderColor = colors.borderColorDefaultBase
|
|
@@ -219,5 +239,13 @@ const useStyles = () => {
|
|
|
219
239
|
flex: 1,
|
|
220
240
|
marginTop: -1, // Ensures there is no gap between the vertical line and the swirl connector
|
|
221
241
|
},
|
|
242
|
+
// TODO: Remove when Services React Native bumps to React Native 0.74 or higher.
|
|
243
|
+
resetPosition: {
|
|
244
|
+
position: 'absolute',
|
|
245
|
+
left: 0,
|
|
246
|
+
right: 0,
|
|
247
|
+
top: 0,
|
|
248
|
+
bottom: 0,
|
|
249
|
+
},
|
|
222
250
|
})
|
|
223
251
|
}
|