@planningcenter/chat-react-native 3.42.3-qa-staging.5 → 3.42.3-qa-staging.6
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/display/action_button.d.ts +1 -1
- package/build/components/display/action_button.d.ts.map +1 -1
- package/build/components/display/action_button.js +3 -13
- package/build/components/display/action_button.js.map +1 -1
- package/package.json +3 -3
- package/src/components/display/action_button.tsx +48 -45
|
@@ -11,5 +11,5 @@ export declare const ActionButton: ({ visible, disabled, onPress, title, infoTex
|
|
|
11
11
|
secondaryButton?: React.ReactNode;
|
|
12
12
|
loading?: boolean;
|
|
13
13
|
warnings?: ConversationWarning[];
|
|
14
|
-
}) => import("react/jsx-runtime").JSX.Element
|
|
14
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
15
15
|
//# sourceMappingURL=action_button.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"action_button.d.ts","sourceRoot":"","sources":["../../../src/components/display/action_button.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"action_button.d.ts","sourceRoot":"","sources":["../../../src/components/display/action_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAIjD,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AAGnC,eAAO,MAAM,YAAY,GAAI,0GAU1B;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kBAAkB,CAAC,EAAE,UAAU,CAAA;IAC/B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAA;CACjC,4CA+CA,CAAA"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import { Animated, LayoutAnimation, StyleSheet, useWindowDimensions, View } from 'react-native';
|
|
2
|
+
import { StyleSheet, useWindowDimensions, View } from 'react-native';
|
|
3
|
+
import Animated, { FadeIn, FadeOut, LayoutAnimationConfig, ReduceMotion, } from 'react-native-reanimated';
|
|
5
4
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
6
5
|
import { useTheme } from '../../hooks';
|
|
7
6
|
import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils';
|
|
@@ -10,16 +9,7 @@ import { Button } from './button';
|
|
|
10
9
|
import { Text } from './text';
|
|
11
10
|
export const ActionButton = ({ visible = true, disabled = false, onPress, title, infoText, buttonIconNameLeft, secondaryButton, loading = false, warnings = [], }) => {
|
|
12
11
|
const styles = useStyles();
|
|
13
|
-
|
|
14
|
-
useEffect(() => {
|
|
15
|
-
if (show === visible)
|
|
16
|
-
return;
|
|
17
|
-
setShow(visible);
|
|
18
|
-
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
|
|
19
|
-
}, [show, visible]);
|
|
20
|
-
if (!visible)
|
|
21
|
-
return null;
|
|
22
|
-
return (_jsxs(Animated.View, { style: styles.container, children: [warnings.length > 0 && (_jsx(View, { style: styles.warnings, children: warnings.map((warning, index) => (_jsx(Banner, { appearance: "error", description: warning.fullMessage }, `${warning.attribute}-${index}`))) })), Boolean(infoText) && (_jsx(Text, { style: styles.infoText, variant: "footnote", children: infoText })), _jsxs(View, { style: styles.buttonRow, children: [secondaryButton, _jsx(Button, { variant: "fill", size: "lg", onPress: onPress, title: title, disabled: disabled, style: secondaryButton ? null : styles.fullWidthButton, iconNameLeft: buttonIconNameLeft, loading: loading, maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER_LANDMARK, accessibilityShowsLargeContentViewer: true, accessibilityLargeContentTitle: title })] })] }));
|
|
12
|
+
return (_jsx(LayoutAnimationConfig, { skipEntering: true, children: visible && (_jsxs(Animated.View, { entering: FadeIn.duration(300).reduceMotion(ReduceMotion.System), exiting: FadeOut.duration(300).reduceMotion(ReduceMotion.System), style: styles.container, children: [warnings.length > 0 && (_jsx(View, { style: styles.warnings, children: warnings.map((warning, index) => (_jsx(Banner, { appearance: "error", description: warning.fullMessage }, `${warning.attribute}-${index}`))) })), Boolean(infoText) && (_jsx(Text, { style: styles.infoText, variant: "footnote", children: infoText })), _jsxs(View, { style: styles.buttonRow, children: [secondaryButton, _jsx(Button, { variant: "fill", size: "lg", onPress: onPress, title: title, disabled: disabled, style: secondaryButton ? null : styles.fullWidthButton, iconNameLeft: buttonIconNameLeft, loading: loading, maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER_LANDMARK, accessibilityShowsLargeContentViewer: true, accessibilityLargeContentTitle: title })] })] })) }));
|
|
23
13
|
};
|
|
24
14
|
const useStyles = () => {
|
|
25
15
|
const { fontScale } = useWindowDimensions();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"action_button.js","sourceRoot":"","sources":["../../../src/components/display/action_button.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"action_button.js","sourceRoot":"","sources":["../../../src/components/display/action_button.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { StyleSheet, useWindowDimensions, View } from 'react-native'\nimport Animated, {\n FadeIn,\n FadeOut,\n LayoutAnimationConfig,\n ReduceMotion,\n} from 'react-native-reanimated'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { useTheme } from '../../hooks'\nimport { ConversationWarning } from '../../types'\nimport { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'\nimport { Banner } from './banner'\nimport { Button } from './button'\nimport { IconString } from './icon'\nimport { Text } from './text'\n\nexport const ActionButton = ({\n visible = true,\n disabled = false,\n onPress,\n title,\n infoText,\n buttonIconNameLeft,\n secondaryButton,\n loading = false,\n warnings = [],\n}: {\n visible?: boolean\n disabled?: boolean\n onPress: () => void\n title: string\n infoText?: string\n buttonIconNameLeft?: IconString\n secondaryButton?: React.ReactNode\n loading?: boolean\n warnings?: ConversationWarning[]\n}) => {\n const styles = useStyles()\n\n return (\n <LayoutAnimationConfig skipEntering>\n {visible && (\n <Animated.View\n entering={FadeIn.duration(300).reduceMotion(ReduceMotion.System)}\n exiting={FadeOut.duration(300).reduceMotion(ReduceMotion.System)}\n style={styles.container}\n >\n {warnings.length > 0 && (\n <View style={styles.warnings}>\n {warnings.map((warning, index) => (\n <Banner\n key={`${warning.attribute}-${index}`}\n appearance=\"error\"\n description={warning.fullMessage}\n />\n ))}\n </View>\n )}\n {Boolean(infoText) && (\n <Text style={styles.infoText} variant=\"footnote\">\n {infoText}\n </Text>\n )}\n <View style={styles.buttonRow}>\n {secondaryButton}\n <Button\n variant=\"fill\"\n size=\"lg\"\n onPress={onPress}\n title={title}\n disabled={disabled}\n style={secondaryButton ? null : styles.fullWidthButton}\n iconNameLeft={buttonIconNameLeft}\n loading={loading}\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n accessibilityShowsLargeContentViewer\n accessibilityLargeContentTitle={title}\n />\n </View>\n </Animated.View>\n )}\n </LayoutAnimationConfig>\n )\n}\n\nconst useStyles = () => {\n const { fontScale } = useWindowDimensions()\n const { bottom } = useSafeAreaInsets()\n const { colors } = useTheme()\n const containerVerticalPadding = 16\n\n return StyleSheet.create({\n container: {\n backgroundColor: colors.surfaceColor090,\n paddingHorizontal: 24,\n paddingTop: containerVerticalPadding,\n paddingBottom: bottom + containerVerticalPadding,\n borderTopWidth: 1,\n borderTopColor: colors.borderColorDefaultDim,\n gap: 16,\n },\n buttonRow: {\n flexDirection: 'row',\n justifyContent: fontScale > 1 ? 'center' : 'space-between',\n alignItems: 'center',\n gap: 16,\n flexWrap: 'wrap-reverse',\n },\n fullWidthButton: {\n flexGrow: 1,\n },\n infoText: {\n textAlign: 'center',\n },\n warnings: {\n gap: 8,\n },\n })\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@planningcenter/chat-react-native",
|
|
3
|
-
"version": "3.42.3-qa-staging.
|
|
3
|
+
"version": "3.42.3-qa-staging.6",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "build/index.js",
|
|
6
6
|
"react-native": "./src/index.tsx",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"dependencies": {
|
|
27
27
|
"@fortawesome/fontawesome-svg-core": "^7.2.0",
|
|
28
28
|
"@fortawesome/react-native-fontawesome": "^0.3.2",
|
|
29
|
-
"@planningcenter/emoji-keyboard": "3.42.3-qa-staging.
|
|
29
|
+
"@planningcenter/emoji-keyboard": "3.42.3-qa-staging.6",
|
|
30
30
|
"lodash-inflection": "^1.5.0",
|
|
31
31
|
"react-compiler-runtime": "^1.0.0"
|
|
32
32
|
},
|
|
@@ -72,5 +72,5 @@
|
|
|
72
72
|
"react-native-url-polyfill": "^2.0.0",
|
|
73
73
|
"typescript": "~6.0.3"
|
|
74
74
|
},
|
|
75
|
-
"gitHead": "
|
|
75
|
+
"gitHead": "e908e52ea701a8168941a5895c368ffb537340b6"
|
|
76
76
|
}
|
|
@@ -1,6 +1,11 @@
|
|
|
1
|
-
import React
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { StyleSheet, useWindowDimensions, View } from 'react-native'
|
|
3
|
+
import Animated, {
|
|
4
|
+
FadeIn,
|
|
5
|
+
FadeOut,
|
|
6
|
+
LayoutAnimationConfig,
|
|
7
|
+
ReduceMotion,
|
|
8
|
+
} from 'react-native-reanimated'
|
|
4
9
|
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
|
5
10
|
import { useTheme } from '../../hooks'
|
|
6
11
|
import { ConversationWarning } from '../../types'
|
|
@@ -32,52 +37,50 @@ export const ActionButton = ({
|
|
|
32
37
|
warnings?: ConversationWarning[]
|
|
33
38
|
}) => {
|
|
34
39
|
const styles = useStyles()
|
|
35
|
-
const [show, setShow] = useState(visible)
|
|
36
|
-
|
|
37
|
-
useEffect(() => {
|
|
38
|
-
if (show === visible) return
|
|
39
|
-
|
|
40
|
-
setShow(visible)
|
|
41
|
-
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
|
|
42
|
-
}, [show, visible])
|
|
43
|
-
|
|
44
|
-
if (!visible) return null
|
|
45
40
|
|
|
46
41
|
return (
|
|
47
|
-
<
|
|
48
|
-
{
|
|
49
|
-
<View
|
|
50
|
-
{
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
42
|
+
<LayoutAnimationConfig skipEntering>
|
|
43
|
+
{visible && (
|
|
44
|
+
<Animated.View
|
|
45
|
+
entering={FadeIn.duration(300).reduceMotion(ReduceMotion.System)}
|
|
46
|
+
exiting={FadeOut.duration(300).reduceMotion(ReduceMotion.System)}
|
|
47
|
+
style={styles.container}
|
|
48
|
+
>
|
|
49
|
+
{warnings.length > 0 && (
|
|
50
|
+
<View style={styles.warnings}>
|
|
51
|
+
{warnings.map((warning, index) => (
|
|
52
|
+
<Banner
|
|
53
|
+
key={`${warning.attribute}-${index}`}
|
|
54
|
+
appearance="error"
|
|
55
|
+
description={warning.fullMessage}
|
|
56
|
+
/>
|
|
57
|
+
))}
|
|
58
|
+
</View>
|
|
59
|
+
)}
|
|
60
|
+
{Boolean(infoText) && (
|
|
61
|
+
<Text style={styles.infoText} variant="footnote">
|
|
62
|
+
{infoText}
|
|
63
|
+
</Text>
|
|
64
|
+
)}
|
|
65
|
+
<View style={styles.buttonRow}>
|
|
66
|
+
{secondaryButton}
|
|
67
|
+
<Button
|
|
68
|
+
variant="fill"
|
|
69
|
+
size="lg"
|
|
70
|
+
onPress={onPress}
|
|
71
|
+
title={title}
|
|
72
|
+
disabled={disabled}
|
|
73
|
+
style={secondaryButton ? null : styles.fullWidthButton}
|
|
74
|
+
iconNameLeft={buttonIconNameLeft}
|
|
75
|
+
loading={loading}
|
|
76
|
+
maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
|
|
77
|
+
accessibilityShowsLargeContentViewer
|
|
78
|
+
accessibilityLargeContentTitle={title}
|
|
55
79
|
/>
|
|
56
|
-
|
|
57
|
-
</View>
|
|
58
|
-
)}
|
|
59
|
-
{Boolean(infoText) && (
|
|
60
|
-
<Text style={styles.infoText} variant="footnote">
|
|
61
|
-
{infoText}
|
|
62
|
-
</Text>
|
|
80
|
+
</View>
|
|
81
|
+
</Animated.View>
|
|
63
82
|
)}
|
|
64
|
-
|
|
65
|
-
{secondaryButton}
|
|
66
|
-
<Button
|
|
67
|
-
variant="fill"
|
|
68
|
-
size="lg"
|
|
69
|
-
onPress={onPress}
|
|
70
|
-
title={title}
|
|
71
|
-
disabled={disabled}
|
|
72
|
-
style={secondaryButton ? null : styles.fullWidthButton}
|
|
73
|
-
iconNameLeft={buttonIconNameLeft}
|
|
74
|
-
loading={loading}
|
|
75
|
-
maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
|
|
76
|
-
accessibilityShowsLargeContentViewer
|
|
77
|
-
accessibilityLargeContentTitle={title}
|
|
78
|
-
/>
|
|
79
|
-
</View>
|
|
80
|
-
</Animated.View>
|
|
83
|
+
</LayoutAnimationConfig>
|
|
81
84
|
)
|
|
82
85
|
}
|
|
83
86
|
|