@planningcenter/chat-react-native 4.4.1-qa-staging.12 → 4.4.1-qa-staging.13
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/conversation/jump_to_bottom_button.d.ts.map +1 -1
- package/build/components/conversation/jump_to_bottom_button.js +42 -40
- package/build/components/conversation/jump_to_bottom_button.js.map +1 -1
- package/build/components/display/action_button.d.ts.map +1 -1
- package/build/components/display/action_button.js +18 -16
- package/build/components/display/action_button.js.map +1 -1
- package/build/hooks/index.d.ts +1 -0
- package/build/hooks/index.d.ts.map +1 -1
- package/build/hooks/index.js +1 -0
- package/build/hooks/index.js.map +1 -1
- package/build/hooks/use_animated_message_background_color.d.ts.map +1 -1
- package/build/hooks/use_animated_message_background_color.js +5 -3
- package/build/hooks/use_animated_message_background_color.js.map +1 -1
- package/build/hooks/use_reduce_motion.d.ts +2 -0
- package/build/hooks/use_reduce_motion.d.ts.map +1 -0
- package/build/hooks/use_reduce_motion.js +27 -0
- package/build/hooks/use_reduce_motion.js.map +1 -0
- package/package.json +3 -3
- package/src/components/conversation/jump_to_bottom_button.tsx +4 -3
- package/src/components/display/action_button.tsx +4 -3
- package/src/hooks/__tests__/use_reduce_motion.test.tsx +49 -0
- package/src/hooks/index.ts +1 -0
- package/src/hooks/use_animated_message_background_color.ts +6 -3
- package/src/hooks/use_reduce_motion.ts +18 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jump_to_bottom_button.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/jump_to_bottom_button.tsx"],"names":[],"mappings":"AAcA,UAAU,uBAAuB;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,EAAE,OAAO,CAAA;CACjB;AAED,eAAO,MAAM,kBAAkB,GAAI,sBAAsB,uBAAuB,
|
|
1
|
+
{"version":3,"file":"jump_to_bottom_button.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/jump_to_bottom_button.tsx"],"names":[],"mappings":"AAcA,UAAU,uBAAuB;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,EAAE,OAAO,CAAA;CACjB;AAED,eAAO,MAAM,kBAAkB,GAAI,sBAAsB,uBAAuB,4CA4C/E,CAAA"}
|
|
@@ -2,38 +2,40 @@ import { c as _c } from "react/compiler-runtime";
|
|
|
2
2
|
import { useEffect } from 'react';
|
|
3
3
|
import { View, Pressable, StyleSheet } from 'react-native';
|
|
4
4
|
import Animated, { useSharedValue, useAnimatedStyle, interpolate, Extrapolation, ReduceMotion, withSpring } from 'react-native-reanimated';
|
|
5
|
-
import { useTheme } from '../../hooks';
|
|
5
|
+
import { useReduceMotion, useTheme } from '../../hooks';
|
|
6
6
|
import { platformFontWeightMedium } from '../../utils';
|
|
7
7
|
import { Icon, Text } from '../display';
|
|
8
8
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
9
|
export const JumpToBottomButton = t0 => {
|
|
10
|
-
const $ = _c(
|
|
10
|
+
const $ = _c(23);
|
|
11
11
|
const {
|
|
12
12
|
onPress,
|
|
13
13
|
visible
|
|
14
14
|
} = t0;
|
|
15
15
|
const styles = useStyles();
|
|
16
16
|
const progress = useSharedValue(0);
|
|
17
|
+
const reduceMotion = useReduceMotion();
|
|
17
18
|
let t1;
|
|
18
19
|
let t2;
|
|
19
|
-
if ($[0] !== progress || $[1] !== visible) {
|
|
20
|
+
if ($[0] !== progress || $[1] !== reduceMotion || $[2] !== visible) {
|
|
20
21
|
t1 = () => {
|
|
21
22
|
progress.value = withSpring(visible ? 1 : 0, {
|
|
22
23
|
mass: 1,
|
|
23
24
|
damping: 16,
|
|
24
25
|
stiffness: 170,
|
|
25
26
|
overshootClamping: false,
|
|
26
|
-
reduceMotion: ReduceMotion.
|
|
27
|
+
reduceMotion: reduceMotion ? ReduceMotion.Always : ReduceMotion.Never
|
|
27
28
|
});
|
|
28
29
|
};
|
|
29
|
-
t2 = [visible, progress];
|
|
30
|
+
t2 = [visible, progress, reduceMotion];
|
|
30
31
|
$[0] = progress;
|
|
31
|
-
$[1] =
|
|
32
|
-
$[2] =
|
|
33
|
-
$[3] =
|
|
32
|
+
$[1] = reduceMotion;
|
|
33
|
+
$[2] = visible;
|
|
34
|
+
$[3] = t1;
|
|
35
|
+
$[4] = t2;
|
|
34
36
|
} else {
|
|
35
|
-
t1 = $[
|
|
36
|
-
t2 = $[
|
|
37
|
+
t1 = $[3];
|
|
38
|
+
t2 = $[4];
|
|
37
39
|
}
|
|
38
40
|
useEffect(t1, t2);
|
|
39
41
|
const animatedStyle = useAnimatedStyle(() => ({
|
|
@@ -45,79 +47,79 @@ export const JumpToBottomButton = t0 => {
|
|
|
45
47
|
}]
|
|
46
48
|
}));
|
|
47
49
|
let t3;
|
|
48
|
-
if ($[
|
|
50
|
+
if ($[5] !== animatedStyle || $[6] !== styles.container) {
|
|
49
51
|
t3 = [styles.container, animatedStyle];
|
|
50
|
-
$[
|
|
51
|
-
$[
|
|
52
|
-
$[
|
|
52
|
+
$[5] = animatedStyle;
|
|
53
|
+
$[6] = styles.container;
|
|
54
|
+
$[7] = t3;
|
|
53
55
|
} else {
|
|
54
|
-
t3 = $[
|
|
56
|
+
t3 = $[7];
|
|
55
57
|
}
|
|
56
58
|
let t4;
|
|
57
|
-
if ($[
|
|
59
|
+
if ($[8] !== styles.button || $[9] !== styles.pressed) {
|
|
58
60
|
t4 = t5 => {
|
|
59
61
|
const {
|
|
60
62
|
pressed
|
|
61
63
|
} = t5;
|
|
62
64
|
return [styles.button, pressed && styles.pressed];
|
|
63
65
|
};
|
|
64
|
-
$[
|
|
65
|
-
$[
|
|
66
|
-
$[
|
|
66
|
+
$[8] = styles.button;
|
|
67
|
+
$[9] = styles.pressed;
|
|
68
|
+
$[10] = t4;
|
|
67
69
|
} else {
|
|
68
|
-
t4 = $[
|
|
70
|
+
t4 = $[10];
|
|
69
71
|
}
|
|
70
72
|
let t5;
|
|
71
|
-
if ($[
|
|
73
|
+
if ($[11] !== styles.icon) {
|
|
72
74
|
t5 = /*#__PURE__*/_jsx(Icon, {
|
|
73
75
|
name: "general.downArrow",
|
|
74
76
|
style: styles.icon
|
|
75
77
|
});
|
|
76
|
-
$[
|
|
77
|
-
$[
|
|
78
|
+
$[11] = styles.icon;
|
|
79
|
+
$[12] = t5;
|
|
78
80
|
} else {
|
|
79
|
-
t5 = $[
|
|
81
|
+
t5 = $[12];
|
|
80
82
|
}
|
|
81
83
|
let t6;
|
|
82
|
-
if ($[
|
|
84
|
+
if ($[13] !== styles.text) {
|
|
83
85
|
t6 = /*#__PURE__*/_jsx(Text, {
|
|
84
86
|
variant: "tertiary",
|
|
85
87
|
style: styles.text,
|
|
86
88
|
children: "Jump to bottom"
|
|
87
89
|
});
|
|
88
|
-
$[
|
|
89
|
-
$[
|
|
90
|
+
$[13] = styles.text;
|
|
91
|
+
$[14] = t6;
|
|
90
92
|
} else {
|
|
91
|
-
t6 = $[
|
|
93
|
+
t6 = $[14];
|
|
92
94
|
}
|
|
93
95
|
let t7;
|
|
94
|
-
if ($[
|
|
96
|
+
if ($[15] !== onPress || $[16] !== t4 || $[17] !== t5 || $[18] !== t6) {
|
|
95
97
|
t7 = /*#__PURE__*/_jsxs(Pressable, {
|
|
96
98
|
onPress: onPress,
|
|
97
99
|
style: t4,
|
|
98
100
|
children: [t5, t6]
|
|
99
101
|
});
|
|
100
|
-
$[
|
|
101
|
-
$[
|
|
102
|
-
$[
|
|
103
|
-
$[
|
|
104
|
-
$[
|
|
102
|
+
$[15] = onPress;
|
|
103
|
+
$[16] = t4;
|
|
104
|
+
$[17] = t5;
|
|
105
|
+
$[18] = t6;
|
|
106
|
+
$[19] = t7;
|
|
105
107
|
} else {
|
|
106
|
-
t7 = $[
|
|
108
|
+
t7 = $[19];
|
|
107
109
|
}
|
|
108
110
|
let t8;
|
|
109
|
-
if ($[
|
|
111
|
+
if ($[20] !== t3 || $[21] !== t7) {
|
|
110
112
|
t8 = /*#__PURE__*/_jsx(View, {
|
|
111
113
|
children: /*#__PURE__*/_jsx(Animated.View, {
|
|
112
114
|
style: t3,
|
|
113
115
|
children: t7
|
|
114
116
|
})
|
|
115
117
|
});
|
|
116
|
-
$[
|
|
117
|
-
$[
|
|
118
|
-
$[
|
|
118
|
+
$[20] = t3;
|
|
119
|
+
$[21] = t7;
|
|
120
|
+
$[22] = t8;
|
|
119
121
|
} else {
|
|
120
|
-
t8 = $[
|
|
122
|
+
t8 = $[22];
|
|
121
123
|
}
|
|
122
124
|
return t8;
|
|
123
125
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jump_to_bottom_button.js","names":["useEffect","View","Pressable","StyleSheet","Animated","useSharedValue","useAnimatedStyle","interpolate","Extrapolation","ReduceMotion","withSpring","useTheme","platformFontWeightMedium","Icon","Text","jsx","_jsx","jsxs","_jsxs","JumpToBottomButton","t0","$","_c","onPress","visible","styles","useStyles","progress","t1","t2","value","mass","damping","stiffness","overshootClamping","
|
|
1
|
+
{"version":3,"file":"jump_to_bottom_button.js","names":["useEffect","View","Pressable","StyleSheet","Animated","useSharedValue","useAnimatedStyle","interpolate","Extrapolation","ReduceMotion","withSpring","useReduceMotion","useTheme","platformFontWeightMedium","Icon","Text","jsx","_jsx","jsxs","_jsxs","JumpToBottomButton","t0","$","_c","onPress","visible","styles","useStyles","progress","reduceMotion","t1","t2","value","mass","damping","stiffness","overshootClamping","Always","Never","animatedStyle","opacity","transform","translateY","CLAMP","scale","t3","container","t4","button","pressed","t5","icon","name","style","t6","text","variant","children","t7","t8","colors","fillColorNeutral000","fillColorNeutral020","fillColorNeutral100Inverted","create","alignSelf","position","bottom","zIndex","flexDirection","alignItems","gap","paddingHorizontal","paddingVertical","borderRadius","backgroundColor","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","color","fontWeight","fontSize"],"sources":["../../../src/components/conversation/jump_to_bottom_button.tsx"],"sourcesContent":["import { useEffect } from 'react'\nimport { View, Pressable, StyleSheet } from 'react-native'\nimport Animated, {\n useSharedValue,\n useAnimatedStyle,\n interpolate,\n Extrapolation,\n ReduceMotion,\n withSpring,\n} from 'react-native-reanimated'\nimport { useReduceMotion, useTheme } from '../../hooks'\nimport { platformFontWeightMedium } from '../../utils'\nimport { Icon, Text } from '../display'\n\ninterface JumpToBottomButtonProps {\n onPress: () => void\n visible: boolean\n}\n\nexport const JumpToBottomButton = ({ onPress, visible }: JumpToBottomButtonProps) => {\n const styles = useStyles()\n const progress = useSharedValue(0)\n const reduceMotion = useReduceMotion()\n\n useEffect(() => {\n progress.value = withSpring(visible ? 1 : 0, {\n mass: 1,\n damping: 16,\n stiffness: 170,\n overshootClamping: false,\n reduceMotion: reduceMotion ? ReduceMotion.Always : ReduceMotion.Never,\n })\n }, [visible, progress, reduceMotion])\n\n const animatedStyle = useAnimatedStyle(() => {\n return {\n opacity: progress.value,\n transform: [\n {\n translateY: interpolate(progress.value, [0, 1], [12, 0], Extrapolation.CLAMP),\n },\n {\n scale: interpolate(progress.value, [0, 1], [0.9, 1], Extrapolation.CLAMP),\n },\n ],\n }\n })\n\n return (\n <View>\n <Animated.View style={[styles.container, animatedStyle]}>\n <Pressable\n onPress={onPress}\n style={({ pressed }) => [styles.button, pressed && styles.pressed]}\n >\n <Icon name=\"general.downArrow\" style={styles.icon} />\n <Text variant=\"tertiary\" style={styles.text}>\n Jump to bottom\n </Text>\n </Pressable>\n </Animated.View>\n </View>\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n\n return StyleSheet.create({\n container: {\n alignSelf: 'center',\n position: 'absolute',\n bottom: 16,\n zIndex: 2,\n },\n button: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 6,\n paddingHorizontal: 12,\n paddingVertical: 6,\n borderRadius: 20,\n backgroundColor: colors.fillColorNeutral020,\n shadowColor: colors.fillColorNeutral000,\n shadowOffset: {\n width: 0,\n height: 1,\n },\n shadowOpacity: 0.25,\n shadowRadius: 2.84,\n elevation: 5,\n },\n text: {\n color: colors.fillColorNeutral100Inverted,\n fontWeight: platformFontWeightMedium,\n },\n icon: {\n color: colors.fillColorNeutral100Inverted,\n fontSize: 14,\n },\n pressed: {\n transform: [{ scale: 0.95 }],\n },\n })\n}\n"],"mappings":";AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,IAAI,EAAEC,SAAS,EAAEC,UAAU,QAAQ,cAAc;AAC1D,OAAOC,QAAQ,IACbC,cAAc,EACdC,gBAAgB,EAChBC,WAAW,EACXC,aAAa,EACbC,YAAY,EACZC,UAAU,QACL,yBAAyB;AAChC,SAASC,eAAe,EAAEC,QAAQ,QAAQ,aAAa;AACvD,SAASC,wBAAwB,QAAQ,aAAa;AACtD,SAASC,IAAI,EAAEC,IAAI,QAAQ,YAAY;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAOvC,OAAO,MAAMC,kBAAkB,GAAGC,EAAA;EAAA,MAAAC,CAAA,GAAAC,EAAA;EAAC;IAAAC,OAAA;IAAAC;EAAA,IAAAJ,EAA6C;EAC9E,MAAAK,MAAA,GAAeC,SAAS,CAAC,CAAC;EAC1B,MAAAC,QAAA,GAAiBvB,cAAc,CAAC,CAAC,CAAC;EAClC,MAAAwB,YAAA,GAAqBlB,eAAe,CAAC,CAAC;EAAA,IAAAmB,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAT,CAAA,QAAAM,QAAA,IAAAN,CAAA,QAAAO,YAAA,IAAAP,CAAA,QAAAG,OAAA;IAE5BK,EAAA,GAAAA,CAAA;MACRF,QAAQ,CAAAI,KAAA,GAAStB,UAAU,CAACe,OAAO,GAAP,CAAe,GAAf,CAAe,EAAE;QAAAQ,IAAA,EACrC,CAAC;QAAAC,OAAA,EACE,EAAE;QAAAC,SAAA,EACA,GAAG;QAAAC,iBAAA,EACK,KAAK;QAAAP,YAAA,EACVA,YAAY,GAAGpB,YAAY,CAAA4B,MAA4B,GAAlB5B,YAAY,CAAA6B;MACjE,CAAC,CANa;IAAA,CAOf;IAAEP,EAAA,IAACN,OAAO,EAAEG,QAAQ,EAAEC,YAAY,CAAC;IAAAP,CAAA,MAAAM,QAAA;IAAAN,CAAA,MAAAO,YAAA;IAAAP,CAAA,MAAAG,OAAA;IAAAH,CAAA,MAAAQ,EAAA;IAAAR,CAAA,MAAAS,EAAA;EAAA;IAAAD,EAAA,GAAAR,CAAA;IAAAS,EAAA,GAAAT,CAAA;EAAA;EARpCtB,SAAS,CAAC8B,EAQT,EAAEC,EAAiC,CAAC;EAErC,MAAAQ,aAAA,GAAsBjC,gBAAgB,CAAC,OAC9B;IAAAkC,OAAA,EACIZ,QAAQ,CAAAI,KAAM;IAAAS,SAAA,EACZ,CACT;MAAAC,UAAA,EACcnC,WAAW,CAACqB,QAAQ,CAAAI,KAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAExB,aAAa,CAAAmC,KAAM;IAC9E,CAAC,EACD;MAAAC,KAAA,EACSrC,WAAW,CAACqB,QAAQ,CAAAI,KAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,EAAExB,aAAa,CAAAmC,KAAM;IAC1E,CAAC;EAEL,CAAC,CACF,CAAC;EAAA,IAAAE,EAAA;EAAA,IAAAvB,CAAA,QAAAiB,aAAA,IAAAjB,CAAA,QAAAI,MAAA,CAAAoB,SAAA;IAIwBD,EAAA,IAACnB,MAAM,CAAAoB,SAAU,EAAEP,aAAa,CAAC;IAAAjB,CAAA,MAAAiB,aAAA;IAAAjB,CAAA,MAAAI,MAAA,CAAAoB,SAAA;IAAAxB,CAAA,MAAAuB,EAAA;EAAA;IAAAA,EAAA,GAAAvB,CAAA;EAAA;EAAA,IAAAyB,EAAA;EAAA,IAAAzB,CAAA,QAAAI,MAAA,CAAAsB,MAAA,IAAA1B,CAAA,QAAAI,MAAA,CAAAuB,OAAA;IAG5CF,EAAA,GAAAG,EAAA;MAAC;QAAAD;MAAA,IAAAC,EAAW;MAAA,OAAK,CAACxB,MAAM,CAAAsB,MAAO,EAAEC,OAAyB,IAAdvB,MAAM,CAAAuB,OAAQ,CAAC;IAAA;IAAA3B,CAAA,MAAAI,MAAA,CAAAsB,MAAA;IAAA1B,CAAA,MAAAI,MAAA,CAAAuB,OAAA;IAAA3B,CAAA,OAAAyB,EAAA;EAAA;IAAAA,EAAA,GAAAzB,CAAA;EAAA;EAAA,IAAA4B,EAAA;EAAA,IAAA5B,CAAA,SAAAI,MAAA,CAAAyB,IAAA;IAElED,EAAA,gBAAAjC,IAAA,CAACH,IAAI;MAAMsC,IAAmB,EAAnB,mBAAmB;MAAQC,KAAW,EAAX3B,MAAM,CAAAyB;IAAK,CAAG,CAAC;IAAA7B,CAAA,OAAAI,MAAA,CAAAyB,IAAA;IAAA7B,CAAA,OAAA4B,EAAA;EAAA;IAAAA,EAAA,GAAA5B,CAAA;EAAA;EAAA,IAAAgC,EAAA;EAAA,IAAAhC,CAAA,SAAAI,MAAA,CAAA6B,IAAA;IACrDD,EAAA,gBAAArC,IAAA,CAACF,IAAI;MAASyC,OAAU,EAAV,UAAU;MAAQH,KAAW,EAAX3B,MAAM,CAAA6B,IAAK;MAAAE,QAAA,EAAE;IAE7C,CAAM,CAAC;IAAAnC,CAAA,OAAAI,MAAA,CAAA6B,IAAA;IAAAjC,CAAA,OAAAgC,EAAA;EAAA;IAAAA,EAAA,GAAAhC,CAAA;EAAA;EAAA,IAAAoC,EAAA;EAAA,IAAApC,CAAA,SAAAE,OAAA,IAAAF,CAAA,SAAAyB,EAAA,IAAAzB,CAAA,SAAA4B,EAAA,IAAA5B,CAAA,SAAAgC,EAAA;IAPTI,EAAA,gBAAAvC,KAAA,CAACjB,SAAS;MACCsB,OAAO,EAAPA,OAAO;MACT6B,KAA2D,EAA3DN,EAA2D;MAAAU,QAAA,GAElEP,EAAqD,EACrDI,EAEO;IAAA,CACE,CAAC;IAAAhC,CAAA,OAAAE,OAAA;IAAAF,CAAA,OAAAyB,EAAA;IAAAzB,CAAA,OAAA4B,EAAA;IAAA5B,CAAA,OAAAgC,EAAA;IAAAhC,CAAA,OAAAoC,EAAA;EAAA;IAAAA,EAAA,GAAApC,CAAA;EAAA;EAAA,IAAAqC,EAAA;EAAA,IAAArC,CAAA,SAAAuB,EAAA,IAAAvB,CAAA,SAAAoC,EAAA;IAVhBC,EAAA,gBAAA1C,IAAA,CAAChB,IAAI;MAAAwD,QAAA,eACHxC,IAAA,CAAAb,QAAA,CAAAH,IAAA;QAAsBoD,KAAiC,EAAjCR,EAAiC;QAAAY,QAAA,EACrDC;MAQY,CACC;IAAC,CACZ,CAAC;IAAApC,CAAA,OAAAuB,EAAA;IAAAvB,CAAA,OAAAoC,EAAA;IAAApC,CAAA,OAAAqC,EAAA;EAAA;IAAAA,EAAA,GAAArC,CAAA;EAAA;EAAA,OAZPqC,EAYO;AAAA,CAEV;AAED,MAAMhC,SAAS,GAAGA,CAAA;EAAA,MAAAL,CAAA,GAAAC,EAAA;EAChB;IAAAqC;EAAA,IAAmBhD,QAAQ,CAAC,CAAC;EAAA,IAAAS,EAAA;EAAA,IAAAC,CAAA,QAAAsC,MAAA,CAAAC,mBAAA,IAAAvC,CAAA,QAAAsC,MAAA,CAAAE,mBAAA,IAAAxC,CAAA,QAAAsC,MAAA,CAAAG,2BAAA;IAEtB1C,EAAA,GAAAlB,UAAU,CAAA6D,MAAO,CAAC;MAAAlB,SAAA,EACZ;QAAAmB,SAAA,EACE,QAAQ;QAAAC,QAAA,EACT,UAAU;QAAAC,MAAA,EACZ,EAAE;QAAAC,MAAA,EACF;MACV,CAAC;MAAApB,MAAA,EACO;QAAAqB,aAAA,EACS,KAAK;QAAAC,UAAA,EACR,QAAQ;QAAAC,GAAA,EACf,CAAC;QAAAC,iBAAA,EACa,EAAE;QAAAC,eAAA,EACJ,CAAC;QAAAC,YAAA,EACJ,EAAE;QAAAC,eAAA,EACCf,MAAM,CAAAE,mBAAoB;QAAAc,WAAA,EAC9BhB,MAAM,CAAAC,mBAAoB;QAAAgB,YAAA,EACzB;UAAAC,KAAA,EACL,CAAC;UAAAC,MAAA,EACA;QACV,CAAC;QAAAC,aAAA,EACc,IAAI;QAAAC,YAAA,EACL,IAAI;QAAAC,SAAA,EACP;MACb,CAAC;MAAA3B,IAAA,EACK;QAAA4B,KAAA,EACGvB,MAAM,CAAAG,2BAA4B;QAAAqB,UAAA,EAC7BvE;MACd,CAAC;MAAAsC,IAAA,EACK;QAAAgC,KAAA,EACGvB,MAAM,CAAAG,2BAA4B;QAAAsB,QAAA,EAC/B;MACZ,CAAC;MAAApC,OAAA,EACQ;QAAAR,SAAA,EACI,CAAC;UAAAG,KAAA,EAAS;QAAK,CAAC;MAC7B;IACF,CAAC,CAAC;IAAAtB,CAAA,MAAAsC,MAAA,CAAAC,mBAAA;IAAAvC,CAAA,MAAAsC,MAAA,CAAAE,mBAAA;IAAAxC,CAAA,MAAAsC,MAAA,CAAAG,2BAAA;IAAAzC,CAAA,MAAAD,EAAA;EAAA;IAAAA,EAAA,GAAAC,CAAA;EAAA;EAAA,OAnCKD,EAmCL;AAAA,CACH","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,4CAgDA,CAAA"}
|
|
@@ -3,14 +3,14 @@ import React from 'react';
|
|
|
3
3
|
import { StyleSheet, useWindowDimensions, View } from 'react-native';
|
|
4
4
|
import Animated, { FadeIn, FadeOut, LayoutAnimationConfig, ReduceMotion } from 'react-native-reanimated';
|
|
5
5
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
6
|
-
import { useTheme } from '../../hooks';
|
|
6
|
+
import { useReduceMotion, useTheme } from '../../hooks';
|
|
7
7
|
import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils';
|
|
8
8
|
import { Banner } from './banner';
|
|
9
9
|
import { Button } from './button';
|
|
10
10
|
import { Text } from './text';
|
|
11
11
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
12
|
export const ActionButton = t0 => {
|
|
13
|
-
const $ = _c(
|
|
13
|
+
const $ = _c(16);
|
|
14
14
|
const {
|
|
15
15
|
visible: t1,
|
|
16
16
|
disabled: t2,
|
|
@@ -35,11 +35,12 @@ export const ActionButton = t0 => {
|
|
|
35
35
|
}
|
|
36
36
|
const warnings = t5;
|
|
37
37
|
const styles = useStyles();
|
|
38
|
+
const reduceMotion = useReduceMotion() ? ReduceMotion.Always : ReduceMotion.Never;
|
|
38
39
|
let t6;
|
|
39
|
-
if ($[2] !== buttonIconNameLeft || $[3] !== disabled || $[4] !== infoText || $[5] !== loading || $[6] !== onPress || $[7] !==
|
|
40
|
+
if ($[2] !== buttonIconNameLeft || $[3] !== disabled || $[4] !== infoText || $[5] !== loading || $[6] !== onPress || $[7] !== reduceMotion || $[8] !== secondaryButton || $[9] !== styles || $[10] !== title || $[11] !== visible || $[12] !== warnings) {
|
|
40
41
|
t6 = visible && /*#__PURE__*/_jsxs(Animated.View, {
|
|
41
|
-
entering: FadeIn.duration(300).reduceMotion(
|
|
42
|
-
exiting: FadeOut.duration(300).reduceMotion(
|
|
42
|
+
entering: FadeIn.duration(300).reduceMotion(reduceMotion),
|
|
43
|
+
exiting: FadeOut.duration(300).reduceMotion(reduceMotion),
|
|
43
44
|
style: styles.container,
|
|
44
45
|
children: [warnings.length > 0 && /*#__PURE__*/_jsx(View, {
|
|
45
46
|
style: styles.warnings,
|
|
@@ -70,25 +71,26 @@ export const ActionButton = t0 => {
|
|
|
70
71
|
$[4] = infoText;
|
|
71
72
|
$[5] = loading;
|
|
72
73
|
$[6] = onPress;
|
|
73
|
-
$[7] =
|
|
74
|
-
$[8] =
|
|
75
|
-
$[9] =
|
|
76
|
-
$[10] =
|
|
77
|
-
$[11] =
|
|
78
|
-
$[12] =
|
|
74
|
+
$[7] = reduceMotion;
|
|
75
|
+
$[8] = secondaryButton;
|
|
76
|
+
$[9] = styles;
|
|
77
|
+
$[10] = title;
|
|
78
|
+
$[11] = visible;
|
|
79
|
+
$[12] = warnings;
|
|
80
|
+
$[13] = t6;
|
|
79
81
|
} else {
|
|
80
|
-
t6 = $[
|
|
82
|
+
t6 = $[13];
|
|
81
83
|
}
|
|
82
84
|
let t7;
|
|
83
|
-
if ($[
|
|
85
|
+
if ($[14] !== t6) {
|
|
84
86
|
t7 = /*#__PURE__*/_jsx(LayoutAnimationConfig, {
|
|
85
87
|
skipEntering: true,
|
|
86
88
|
children: t6
|
|
87
89
|
});
|
|
88
|
-
$[
|
|
89
|
-
$[
|
|
90
|
+
$[14] = t6;
|
|
91
|
+
$[15] = t7;
|
|
90
92
|
} else {
|
|
91
|
-
t7 = $[
|
|
93
|
+
t7 = $[15];
|
|
92
94
|
}
|
|
93
95
|
return t7;
|
|
94
96
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"action_button.js","names":["React","StyleSheet","useWindowDimensions","View","Animated","FadeIn","FadeOut","LayoutAnimationConfig","ReduceMotion","useSafeAreaInsets","useTheme","MAX_FONT_SIZE_MULTIPLIER_LANDMARK","Banner","Button","Text","jsx","_jsx","jsxs","_jsxs","ActionButton","t0","$","_c","visible","t1","disabled","t2","onPress","title","infoText","buttonIconNameLeft","secondaryButton","loading","t3","warnings","t4","undefined","t5","styles","useStyles","
|
|
1
|
+
{"version":3,"file":"action_button.js","names":["React","StyleSheet","useWindowDimensions","View","Animated","FadeIn","FadeOut","LayoutAnimationConfig","ReduceMotion","useSafeAreaInsets","useReduceMotion","useTheme","MAX_FONT_SIZE_MULTIPLIER_LANDMARK","Banner","Button","Text","jsx","_jsx","jsxs","_jsxs","ActionButton","t0","$","_c","visible","t1","disabled","t2","onPress","title","infoText","buttonIconNameLeft","secondaryButton","loading","t3","warnings","t4","undefined","t5","styles","useStyles","reduceMotion","Always","Never","t6","entering","duration","exiting","style","container","children","length","map","_temp","Boolean","variant","buttonRow","size","fullWidthButton","accessibilityShowsLargeContentViewer","t7","skipEntering","fontScale","bottom","colors","borderColorDefaultDim","surfaceColor090","create","backgroundColor","paddingHorizontal","paddingTop","paddingBottom","borderTopWidth","borderTopColor","gap","flexDirection","justifyContent","alignItems","flexWrap","flexGrow","textAlign","warning","index","appearance","description","fullMessage","attribute"],"sources":["../../../src/components/display/action_button.tsx"],"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 { useReduceMotion, 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 const reduceMotion = useReduceMotion() ? ReduceMotion.Always : ReduceMotion.Never\n\n return (\n <LayoutAnimationConfig skipEntering>\n {visible && (\n <Animated.View\n entering={FadeIn.duration(300).reduceMotion(reduceMotion)}\n exiting={FadeOut.duration(300).reduceMotion(reduceMotion)}\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"],"mappings":"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","ignoreList":[]}
|
package/build/hooks/index.d.ts
CHANGED
|
@@ -23,6 +23,7 @@ export * from './use_people_person';
|
|
|
23
23
|
export * from './use_preview_avatar_diameter';
|
|
24
24
|
export * from './use_product_analytics';
|
|
25
25
|
export * from './use_qualified_by_age';
|
|
26
|
+
export * from './use_reduce_motion';
|
|
26
27
|
export * from './use_scalable_number_of_lines';
|
|
27
28
|
export * from './use_submit_age_check';
|
|
28
29
|
export * from './use_suspense_api';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,yCAAyC,CAAA;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,wBAAwB,CAAA;AACtC,cAAc,mCAAmC,CAAA;AACjD,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kCAAkC,CAAA;AAChD,cAAc,gCAAgC,CAAA;AAC9C,cAAc,kBAAkB,CAAA;AAChC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,sCAAsC,CAAA;AACpD,cAAc,2CAA2C,CAAA;AACzD,cAAc,+BAA+B,CAAA;AAC7C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,aAAa,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,yCAAyC,CAAA;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,wBAAwB,CAAA;AACtC,cAAc,mCAAmC,CAAA;AACjD,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kCAAkC,CAAA;AAChD,cAAc,gCAAgC,CAAA;AAC9C,cAAc,kBAAkB,CAAA;AAChC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,sCAAsC,CAAA;AACpD,cAAc,2CAA2C,CAAA;AACzD,cAAc,+BAA+B,CAAA;AAC7C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,qBAAqB,CAAA;AACnC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,aAAa,CAAA"}
|
package/build/hooks/index.js
CHANGED
|
@@ -23,6 +23,7 @@ export * from './use_people_person';
|
|
|
23
23
|
export * from './use_preview_avatar_diameter';
|
|
24
24
|
export * from './use_product_analytics';
|
|
25
25
|
export * from './use_qualified_by_age';
|
|
26
|
+
export * from './use_reduce_motion';
|
|
26
27
|
export * from './use_scalable_number_of_lines';
|
|
27
28
|
export * from './use_submit_age_check';
|
|
28
29
|
export * from './use_suspense_api';
|
package/build/hooks/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["useApiClient"],"sources":["../../src/hooks/index.ts"],"sourcesContent":["export * from './use_animated_message_background_color'\nexport { useApiClient } from './use_api_client'\nexport * from './use_api'\nexport * from './use_app_state'\nexport * from './use_async_storage'\nexport * from './use_at_font_scale_breakpoint'\nexport * from './use_chat_permissions'\nexport * from './use_create_android_ripple_color'\nexport * from './use_current_person'\nexport * from './use_deleting_ids'\nexport * from './use_direct_message_eligibility'\nexport * from './use_direct_messages_eligible'\nexport * from './use_font_scale'\nexport * from './use_has_direct_messages'\nexport * from './use_groups_groups'\nexport * from './use_groups'\nexport * from './use_selected_chip_background_color'\nexport * from './use_interaction_tinted_background_color'\nexport * from './use_message_reaction_toggle'\nexport * from './use_new_conversation_entry'\nexport * from './use_organization'\nexport * from './use_people_person'\nexport * from './use_preview_avatar_diameter'\nexport * from './use_product_analytics'\nexport * from './use_qualified_by_age'\nexport * from './use_scalable_number_of_lines'\nexport * from './use_submit_age_check'\nexport * from './use_suspense_api'\nexport * from './use_theme'\n"],"mappings":"AAAA,cAAc,yCAAyC;AACvD,SAASA,YAAY,QAAQ,kBAAkB;AAC/C,cAAc,WAAW;AACzB,cAAc,iBAAiB;AAC/B,cAAc,qBAAqB;AACnC,cAAc,gCAAgC;AAC9C,cAAc,wBAAwB;AACtC,cAAc,mCAAmC;AACjD,cAAc,sBAAsB;AACpC,cAAc,oBAAoB;AAClC,cAAc,kCAAkC;AAChD,cAAc,gCAAgC;AAC9C,cAAc,kBAAkB;AAChC,cAAc,2BAA2B;AACzC,cAAc,qBAAqB;AACnC,cAAc,cAAc;AAC5B,cAAc,sCAAsC;AACpD,cAAc,2CAA2C;AACzD,cAAc,+BAA+B;AAC7C,cAAc,8BAA8B;AAC5C,cAAc,oBAAoB;AAClC,cAAc,qBAAqB;AACnC,cAAc,+BAA+B;AAC7C,cAAc,yBAAyB;AACvC,cAAc,wBAAwB;AACtC,cAAc,gCAAgC;AAC9C,cAAc,wBAAwB;AACtC,cAAc,oBAAoB;AAClC,cAAc,aAAa","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"index.js","names":["useApiClient"],"sources":["../../src/hooks/index.ts"],"sourcesContent":["export * from './use_animated_message_background_color'\nexport { useApiClient } from './use_api_client'\nexport * from './use_api'\nexport * from './use_app_state'\nexport * from './use_async_storage'\nexport * from './use_at_font_scale_breakpoint'\nexport * from './use_chat_permissions'\nexport * from './use_create_android_ripple_color'\nexport * from './use_current_person'\nexport * from './use_deleting_ids'\nexport * from './use_direct_message_eligibility'\nexport * from './use_direct_messages_eligible'\nexport * from './use_font_scale'\nexport * from './use_has_direct_messages'\nexport * from './use_groups_groups'\nexport * from './use_groups'\nexport * from './use_selected_chip_background_color'\nexport * from './use_interaction_tinted_background_color'\nexport * from './use_message_reaction_toggle'\nexport * from './use_new_conversation_entry'\nexport * from './use_organization'\nexport * from './use_people_person'\nexport * from './use_preview_avatar_diameter'\nexport * from './use_product_analytics'\nexport * from './use_qualified_by_age'\nexport * from './use_reduce_motion'\nexport * from './use_scalable_number_of_lines'\nexport * from './use_submit_age_check'\nexport * from './use_suspense_api'\nexport * from './use_theme'\n"],"mappings":"AAAA,cAAc,yCAAyC;AACvD,SAASA,YAAY,QAAQ,kBAAkB;AAC/C,cAAc,WAAW;AACzB,cAAc,iBAAiB;AAC/B,cAAc,qBAAqB;AACnC,cAAc,gCAAgC;AAC9C,cAAc,wBAAwB;AACtC,cAAc,mCAAmC;AACjD,cAAc,sBAAsB;AACpC,cAAc,oBAAoB;AAClC,cAAc,kCAAkC;AAChD,cAAc,gCAAgC;AAC9C,cAAc,kBAAkB;AAChC,cAAc,2BAA2B;AACzC,cAAc,qBAAqB;AACnC,cAAc,cAAc;AAC5B,cAAc,sCAAsC;AACpD,cAAc,2CAA2C;AACzD,cAAc,+BAA+B;AAC7C,cAAc,8BAA8B;AAC5C,cAAc,oBAAoB;AAClC,cAAc,qBAAqB;AACnC,cAAc,+BAA+B;AAC7C,cAAc,yBAAyB;AACvC,cAAc,wBAAwB;AACtC,cAAc,qBAAqB;AACnC,cAAc,gCAAgC;AAC9C,cAAc,wBAAwB;AACtC,cAAc,oBAAoB;AAClC,cAAc,aAAa","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use_animated_message_background_color.d.ts","sourceRoot":"","sources":["../../src/hooks/use_animated_message_background_color.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"use_animated_message_background_color.d.ts","sourceRoot":"","sources":["../../src/hooks/use_animated_message_background_color.ts"],"names":[],"mappings":"AAmBA,wBAAgB,iCAAiC;;;;;;;EAoDhD"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { useCallback } from 'react';
|
|
2
2
|
import { Platform } from 'react-native';
|
|
3
3
|
import { useSharedValue, useAnimatedStyle, withDelay, withSequence, withTiming, interpolateColor, Easing, ReduceMotion } from 'react-native-reanimated';
|
|
4
|
+
import { useReduceMotion } from './use_reduce_motion';
|
|
4
5
|
import { useTheme } from './use_theme';
|
|
5
6
|
const FLASH_IN_MS = 150;
|
|
6
7
|
const FLASH_HOLD_MS = 500;
|
|
@@ -9,9 +10,10 @@ export function useAnimatedMessageBackgroundColor() {
|
|
|
9
10
|
const {
|
|
10
11
|
colors
|
|
11
12
|
} = useTheme();
|
|
13
|
+
const reduceMotion = useReduceMotion();
|
|
12
14
|
const pressProgress = useSharedValue(0);
|
|
13
15
|
const flashProgress = useSharedValue(0);
|
|
14
|
-
const tintColor = colors.fillColorNeutral050Base;
|
|
16
|
+
const tintColor = colors.name === 'dark' ? colors.fillColorNeutral040 : colors.fillColorNeutral050Base;
|
|
15
17
|
const tintsOnPress = Platform.OS === 'ios';
|
|
16
18
|
const animatedBackgroundColor = useAnimatedStyle(() => {
|
|
17
19
|
const pressTint = tintsOnPress ? pressProgress.value : 0;
|
|
@@ -41,9 +43,9 @@ export function useAnimatedMessageBackgroundColor() {
|
|
|
41
43
|
}), withDelay(FLASH_HOLD_MS, withTiming(0, {
|
|
42
44
|
duration: FLASH_OUT_MS,
|
|
43
45
|
easing: Easing.out(Easing.ease),
|
|
44
|
-
reduceMotion: ReduceMotion.
|
|
46
|
+
reduceMotion: reduceMotion ? ReduceMotion.Always : ReduceMotion.Never
|
|
45
47
|
}), ReduceMotion.Never));
|
|
46
|
-
}, [flashProgress]);
|
|
48
|
+
}, [flashProgress, reduceMotion]);
|
|
47
49
|
return {
|
|
48
50
|
animatedBackgroundColor,
|
|
49
51
|
flash,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use_animated_message_background_color.js","names":["useCallback","Platform","useSharedValue","useAnimatedStyle","withDelay","withSequence","withTiming","interpolateColor","Easing","ReduceMotion","useTheme","FLASH_IN_MS","FLASH_HOLD_MS","FLASH_OUT_MS","useAnimatedMessageBackgroundColor","colors","pressProgress","flashProgress","tintColor","fillColorNeutral050Base","tintsOnPress","OS","animatedBackgroundColor","pressTint","value","progress","Math","max","backgroundColor","handleMessagePressIn","duration","easing","inOut","ease","handleMessagePressOut","flash","out","
|
|
1
|
+
{"version":3,"file":"use_animated_message_background_color.js","names":["useCallback","Platform","useSharedValue","useAnimatedStyle","withDelay","withSequence","withTiming","interpolateColor","Easing","ReduceMotion","useReduceMotion","useTheme","FLASH_IN_MS","FLASH_HOLD_MS","FLASH_OUT_MS","useAnimatedMessageBackgroundColor","colors","reduceMotion","pressProgress","flashProgress","tintColor","name","fillColorNeutral040","fillColorNeutral050Base","tintsOnPress","OS","animatedBackgroundColor","pressTint","value","progress","Math","max","backgroundColor","handleMessagePressIn","duration","easing","inOut","ease","handleMessagePressOut","flash","out","Never","Always"],"sources":["../../src/hooks/use_animated_message_background_color.ts"],"sourcesContent":["import { useCallback } from 'react'\nimport { Platform } from 'react-native'\nimport {\n useSharedValue,\n useAnimatedStyle,\n withDelay,\n withSequence,\n withTiming,\n interpolateColor,\n Easing,\n ReduceMotion,\n} from 'react-native-reanimated'\nimport { useReduceMotion } from './use_reduce_motion'\nimport { useTheme } from './use_theme'\n\nconst FLASH_IN_MS = 150\nconst FLASH_HOLD_MS = 500\nconst FLASH_OUT_MS = 1500\n\nexport function useAnimatedMessageBackgroundColor() {\n const { colors } = useTheme()\n const reduceMotion = useReduceMotion()\n const pressProgress = useSharedValue(0)\n const flashProgress = useSharedValue(0)\n\n const tintColor =\n colors.name === 'dark' ? colors.fillColorNeutral040 : colors.fillColorNeutral050Base\n const tintsOnPress = Platform.OS === 'ios'\n\n const animatedBackgroundColor = useAnimatedStyle(() => {\n const pressTint = tintsOnPress ? pressProgress.value : 0\n const progress = Math.max(pressTint, flashProgress.value)\n const backgroundColor = interpolateColor(progress, [0, 1], ['transparent', tintColor])\n return {\n backgroundColor,\n }\n })\n\n const handleMessagePressIn = () => {\n pressProgress.value = withTiming(1, { duration: 300, easing: Easing.inOut(Easing.ease) })\n }\n\n const handleMessagePressOut = () => {\n pressProgress.value = withTiming(0, { duration: 300, easing: Easing.inOut(Easing.ease) })\n }\n\n const flash = useCallback(() => {\n flashProgress.value = withSequence(\n withTiming(1, {\n duration: FLASH_IN_MS,\n easing: Easing.out(Easing.ease),\n reduceMotion: ReduceMotion.Never,\n }),\n withDelay(\n FLASH_HOLD_MS,\n withTiming(0, {\n duration: FLASH_OUT_MS,\n easing: Easing.out(Easing.ease),\n reduceMotion: reduceMotion ? ReduceMotion.Always : ReduceMotion.Never,\n }),\n ReduceMotion.Never\n )\n )\n }, [flashProgress, reduceMotion])\n\n return {\n animatedBackgroundColor,\n flash,\n handleMessagePressIn,\n handleMessagePressOut,\n }\n}\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,SAASC,QAAQ,QAAQ,cAAc;AACvC,SACEC,cAAc,EACdC,gBAAgB,EAChBC,SAAS,EACTC,YAAY,EACZC,UAAU,EACVC,gBAAgB,EAChBC,MAAM,EACNC,YAAY,QACP,yBAAyB;AAChC,SAASC,eAAe,QAAQ,qBAAqB;AACrD,SAASC,QAAQ,QAAQ,aAAa;AAEtC,MAAMC,WAAW,GAAG,GAAG;AACvB,MAAMC,aAAa,GAAG,GAAG;AACzB,MAAMC,YAAY,GAAG,IAAI;AAEzB,OAAO,SAASC,iCAAiCA,CAAA,EAAG;EAClD,MAAM;IAAEC;EAAO,CAAC,GAAGL,QAAQ,CAAC,CAAC;EAC7B,MAAMM,YAAY,GAAGP,eAAe,CAAC,CAAC;EACtC,MAAMQ,aAAa,GAAGhB,cAAc,CAAC,CAAC,CAAC;EACvC,MAAMiB,aAAa,GAAGjB,cAAc,CAAC,CAAC,CAAC;EAEvC,MAAMkB,SAAS,GACbJ,MAAM,CAACK,IAAI,KAAK,MAAM,GAAGL,MAAM,CAACM,mBAAmB,GAAGN,MAAM,CAACO,uBAAuB;EACtF,MAAMC,YAAY,GAAGvB,QAAQ,CAACwB,EAAE,KAAK,KAAK;EAE1C,MAAMC,uBAAuB,GAAGvB,gBAAgB,CAAC,MAAM;IACrD,MAAMwB,SAAS,GAAGH,YAAY,GAAGN,aAAa,CAACU,KAAK,GAAG,CAAC;IACxD,MAAMC,QAAQ,GAAGC,IAAI,CAACC,GAAG,CAACJ,SAAS,EAAER,aAAa,CAACS,KAAK,CAAC;IACzD,MAAMI,eAAe,GAAGzB,gBAAgB,CAACsB,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,aAAa,EAAET,SAAS,CAAC,CAAC;IACtF,OAAO;MACLY;IACF,CAAC;EACH,CAAC,CAAC;EAEF,MAAMC,oBAAoB,GAAGA,CAAA,KAAM;IACjCf,aAAa,CAACU,KAAK,GAAGtB,UAAU,CAAC,CAAC,EAAE;MAAE4B,QAAQ,EAAE,GAAG;MAAEC,MAAM,EAAE3B,MAAM,CAAC4B,KAAK,CAAC5B,MAAM,CAAC6B,IAAI;IAAE,CAAC,CAAC;EAC3F,CAAC;EAED,MAAMC,qBAAqB,GAAGA,CAAA,KAAM;IAClCpB,aAAa,CAACU,KAAK,GAAGtB,UAAU,CAAC,CAAC,EAAE;MAAE4B,QAAQ,EAAE,GAAG;MAAEC,MAAM,EAAE3B,MAAM,CAAC4B,KAAK,CAAC5B,MAAM,CAAC6B,IAAI;IAAE,CAAC,CAAC;EAC3F,CAAC;EAED,MAAME,KAAK,GAAGvC,WAAW,CAAC,MAAM;IAC9BmB,aAAa,CAACS,KAAK,GAAGvB,YAAY,CAChCC,UAAU,CAAC,CAAC,EAAE;MACZ4B,QAAQ,EAAEtB,WAAW;MACrBuB,MAAM,EAAE3B,MAAM,CAACgC,GAAG,CAAChC,MAAM,CAAC6B,IAAI,CAAC;MAC/BpB,YAAY,EAAER,YAAY,CAACgC;IAC7B,CAAC,CAAC,EACFrC,SAAS,CACPS,aAAa,EACbP,UAAU,CAAC,CAAC,EAAE;MACZ4B,QAAQ,EAAEpB,YAAY;MACtBqB,MAAM,EAAE3B,MAAM,CAACgC,GAAG,CAAChC,MAAM,CAAC6B,IAAI,CAAC;MAC/BpB,YAAY,EAAEA,YAAY,GAAGR,YAAY,CAACiC,MAAM,GAAGjC,YAAY,CAACgC;IAClE,CAAC,CAAC,EACFhC,YAAY,CAACgC,KACf,CACF,CAAC;EACH,CAAC,EAAE,CAACtB,aAAa,EAAEF,YAAY,CAAC,CAAC;EAEjC,OAAO;IACLS,uBAAuB;IACvBa,KAAK;IACLN,oBAAoB;IACpBK;EACF,CAAC;AACH","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use_reduce_motion.d.ts","sourceRoot":"","sources":["../../src/hooks/use_reduce_motion.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,eAc3B,CAAA"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { c as _c } from "react/compiler-runtime";
|
|
2
|
+
import { useEffect, useState } from 'react';
|
|
3
|
+
import { AccessibilityInfo } from 'react-native';
|
|
4
|
+
export const useReduceMotion = () => {
|
|
5
|
+
const $ = _c(2);
|
|
6
|
+
const [reduceMotion, setReduceMotion] = useState(false);
|
|
7
|
+
let t0;
|
|
8
|
+
let t1;
|
|
9
|
+
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
|
|
10
|
+
t0 = () => {
|
|
11
|
+
AccessibilityInfo.isReduceMotionEnabled().then(setReduceMotion);
|
|
12
|
+
const subscription = AccessibilityInfo.addEventListener("reduceMotionChanged", setReduceMotion);
|
|
13
|
+
return () => {
|
|
14
|
+
subscription.remove();
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
t1 = [];
|
|
18
|
+
$[0] = t0;
|
|
19
|
+
$[1] = t1;
|
|
20
|
+
} else {
|
|
21
|
+
t0 = $[0];
|
|
22
|
+
t1 = $[1];
|
|
23
|
+
}
|
|
24
|
+
useEffect(t0, t1);
|
|
25
|
+
return reduceMotion;
|
|
26
|
+
};
|
|
27
|
+
//# sourceMappingURL=use_reduce_motion.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use_reduce_motion.js","names":["useEffect","useState","AccessibilityInfo","useReduceMotion","$","_c","reduceMotion","setReduceMotion","t0","t1","Symbol","for","isReduceMotionEnabled","then","subscription","addEventListener","remove"],"sources":["../../src/hooks/use_reduce_motion.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\nimport { AccessibilityInfo } from 'react-native'\n\nexport const useReduceMotion = () => {\n const [reduceMotion, setReduceMotion] = useState(false)\n\n useEffect(() => {\n AccessibilityInfo.isReduceMotionEnabled().then(setReduceMotion)\n\n const subscription = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotion)\n\n return () => {\n subscription.remove()\n }\n }, [])\n\n return reduceMotion\n}\n"],"mappings":";AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,iBAAiB,QAAQ,cAAc;AAEhD,OAAO,MAAMC,eAAe,GAAGA,CAAA;EAAA,MAAAC,CAAA,GAAAC,EAAA;EAC7B,OAAAC,YAAA,EAAAC,eAAA,IAAwCN,QAAQ,CAAC,KAAK,CAAC;EAAA,IAAAO,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAL,CAAA,QAAAM,MAAA,CAAAC,GAAA;IAE7CH,EAAA,GAAAA,CAAA;MACRN,iBAAiB,CAAAU,qBAAsB,CAAC,CAAC,CAAAC,IAAK,CAACN,eAAe,CAAC;MAE/D,MAAAO,YAAA,GAAqBZ,iBAAiB,CAAAa,gBAAiB,CAAC,qBAAqB,EAAER,eAAe,CAAC;MAAA,OAExF;QACLO,YAAY,CAAAE,MAAO,CAAC,CAAC;MAAA,CACtB;IAAA,CACF;IAAEP,EAAA,KAAE;IAAAL,CAAA,MAAAI,EAAA;IAAAJ,CAAA,MAAAK,EAAA;EAAA;IAAAD,EAAA,GAAAJ,CAAA;IAAAK,EAAA,GAAAL,CAAA;EAAA;EARLJ,SAAS,CAACQ,EAQT,EAAEC,EAAE,CAAC;EAAA,OAECH,YAAY;AAAA,CACpB","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@planningcenter/chat-react-native",
|
|
3
|
-
"version": "4.4.1-qa-staging.
|
|
3
|
+
"version": "4.4.1-qa-staging.13",
|
|
4
4
|
"description": "",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@fortawesome/fontawesome-svg-core": "^7.2.0",
|
|
35
35
|
"@fortawesome/react-native-fontawesome": "^0.3.2",
|
|
36
|
-
"@planningcenter/emoji-keyboard": "4.4.1-qa-staging.
|
|
36
|
+
"@planningcenter/emoji-keyboard": "4.4.1-qa-staging.13",
|
|
37
37
|
"lodash-inflection": "^1.5.0"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
@@ -84,5 +84,5 @@
|
|
|
84
84
|
"sf-symbols-typescript": "^2.2.0",
|
|
85
85
|
"typescript": "~6.0.3"
|
|
86
86
|
},
|
|
87
|
-
"gitHead": "
|
|
87
|
+
"gitHead": "b6fa6a1c2ed0ab85c232050525ec3253be762dff"
|
|
88
88
|
}
|
|
@@ -8,7 +8,7 @@ import Animated, {
|
|
|
8
8
|
ReduceMotion,
|
|
9
9
|
withSpring,
|
|
10
10
|
} from 'react-native-reanimated'
|
|
11
|
-
import { useTheme } from '../../hooks'
|
|
11
|
+
import { useReduceMotion, useTheme } from '../../hooks'
|
|
12
12
|
import { platformFontWeightMedium } from '../../utils'
|
|
13
13
|
import { Icon, Text } from '../display'
|
|
14
14
|
|
|
@@ -20,6 +20,7 @@ interface JumpToBottomButtonProps {
|
|
|
20
20
|
export const JumpToBottomButton = ({ onPress, visible }: JumpToBottomButtonProps) => {
|
|
21
21
|
const styles = useStyles()
|
|
22
22
|
const progress = useSharedValue(0)
|
|
23
|
+
const reduceMotion = useReduceMotion()
|
|
23
24
|
|
|
24
25
|
useEffect(() => {
|
|
25
26
|
progress.value = withSpring(visible ? 1 : 0, {
|
|
@@ -27,9 +28,9 @@ export const JumpToBottomButton = ({ onPress, visible }: JumpToBottomButtonProps
|
|
|
27
28
|
damping: 16,
|
|
28
29
|
stiffness: 170,
|
|
29
30
|
overshootClamping: false,
|
|
30
|
-
reduceMotion: ReduceMotion.
|
|
31
|
+
reduceMotion: reduceMotion ? ReduceMotion.Always : ReduceMotion.Never,
|
|
31
32
|
})
|
|
32
|
-
}, [visible, progress])
|
|
33
|
+
}, [visible, progress, reduceMotion])
|
|
33
34
|
|
|
34
35
|
const animatedStyle = useAnimatedStyle(() => {
|
|
35
36
|
return {
|
|
@@ -7,7 +7,7 @@ import Animated, {
|
|
|
7
7
|
ReduceMotion,
|
|
8
8
|
} from 'react-native-reanimated'
|
|
9
9
|
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
|
10
|
-
import { useTheme } from '../../hooks'
|
|
10
|
+
import { useReduceMotion, useTheme } from '../../hooks'
|
|
11
11
|
import { ConversationWarning } from '../../types'
|
|
12
12
|
import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
|
|
13
13
|
import { Banner } from './banner'
|
|
@@ -37,13 +37,14 @@ export const ActionButton = ({
|
|
|
37
37
|
warnings?: ConversationWarning[]
|
|
38
38
|
}) => {
|
|
39
39
|
const styles = useStyles()
|
|
40
|
+
const reduceMotion = useReduceMotion() ? ReduceMotion.Always : ReduceMotion.Never
|
|
40
41
|
|
|
41
42
|
return (
|
|
42
43
|
<LayoutAnimationConfig skipEntering>
|
|
43
44
|
{visible && (
|
|
44
45
|
<Animated.View
|
|
45
|
-
entering={FadeIn.duration(300).reduceMotion(
|
|
46
|
-
exiting={FadeOut.duration(300).reduceMotion(
|
|
46
|
+
entering={FadeIn.duration(300).reduceMotion(reduceMotion)}
|
|
47
|
+
exiting={FadeOut.duration(300).reduceMotion(reduceMotion)}
|
|
47
48
|
style={styles.container}
|
|
48
49
|
>
|
|
49
50
|
{warnings.length > 0 && (
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { act, renderHook, waitFor } from '@testing-library/react-native'
|
|
2
|
+
import { AccessibilityInfo, EmitterSubscription } from 'react-native'
|
|
3
|
+
import { useReduceMotion } from '../use_reduce_motion'
|
|
4
|
+
|
|
5
|
+
type ReduceMotionListener = (enabled: boolean) => void
|
|
6
|
+
|
|
7
|
+
describe('useReduceMotion', () => {
|
|
8
|
+
let listener: ReduceMotionListener | undefined
|
|
9
|
+
const remove = jest.fn()
|
|
10
|
+
|
|
11
|
+
beforeEach(() => {
|
|
12
|
+
listener = undefined
|
|
13
|
+
remove.mockClear()
|
|
14
|
+
jest.spyOn(AccessibilityInfo, 'isReduceMotionEnabled').mockResolvedValue(true)
|
|
15
|
+
const addEventListener: typeof AccessibilityInfo.addEventListener = (_event, handler) => {
|
|
16
|
+
listener = handler as ReduceMotionListener
|
|
17
|
+
return { remove } as unknown as EmitterSubscription
|
|
18
|
+
}
|
|
19
|
+
jest.spyOn(AccessibilityInfo, 'addEventListener').mockImplementation(addEventListener)
|
|
20
|
+
})
|
|
21
|
+
|
|
22
|
+
afterEach(() => jest.restoreAllMocks())
|
|
23
|
+
|
|
24
|
+
it('seeds from the system setting', async () => {
|
|
25
|
+
const { result } = renderHook(() => useReduceMotion())
|
|
26
|
+
|
|
27
|
+
expect(result.current).toBe(false)
|
|
28
|
+
await waitFor(() => expect(result.current).toBe(true))
|
|
29
|
+
})
|
|
30
|
+
|
|
31
|
+
it('follows reduceMotionChanged while mounted', async () => {
|
|
32
|
+
const { result } = renderHook(() => useReduceMotion())
|
|
33
|
+
await waitFor(() => expect(result.current).toBe(true))
|
|
34
|
+
|
|
35
|
+
act(() => listener?.(false))
|
|
36
|
+
expect(result.current).toBe(false)
|
|
37
|
+
|
|
38
|
+
act(() => listener?.(true))
|
|
39
|
+
expect(result.current).toBe(true)
|
|
40
|
+
})
|
|
41
|
+
|
|
42
|
+
it('removes the listener on unmount', () => {
|
|
43
|
+
const { unmount } = renderHook(() => useReduceMotion())
|
|
44
|
+
|
|
45
|
+
expect(remove).not.toHaveBeenCalled()
|
|
46
|
+
unmount()
|
|
47
|
+
expect(remove).toHaveBeenCalledTimes(1)
|
|
48
|
+
})
|
|
49
|
+
})
|
package/src/hooks/index.ts
CHANGED
|
@@ -23,6 +23,7 @@ export * from './use_people_person'
|
|
|
23
23
|
export * from './use_preview_avatar_diameter'
|
|
24
24
|
export * from './use_product_analytics'
|
|
25
25
|
export * from './use_qualified_by_age'
|
|
26
|
+
export * from './use_reduce_motion'
|
|
26
27
|
export * from './use_scalable_number_of_lines'
|
|
27
28
|
export * from './use_submit_age_check'
|
|
28
29
|
export * from './use_suspense_api'
|
|
@@ -10,6 +10,7 @@ import {
|
|
|
10
10
|
Easing,
|
|
11
11
|
ReduceMotion,
|
|
12
12
|
} from 'react-native-reanimated'
|
|
13
|
+
import { useReduceMotion } from './use_reduce_motion'
|
|
13
14
|
import { useTheme } from './use_theme'
|
|
14
15
|
|
|
15
16
|
const FLASH_IN_MS = 150
|
|
@@ -18,10 +19,12 @@ const FLASH_OUT_MS = 1500
|
|
|
18
19
|
|
|
19
20
|
export function useAnimatedMessageBackgroundColor() {
|
|
20
21
|
const { colors } = useTheme()
|
|
22
|
+
const reduceMotion = useReduceMotion()
|
|
21
23
|
const pressProgress = useSharedValue(0)
|
|
22
24
|
const flashProgress = useSharedValue(0)
|
|
23
25
|
|
|
24
|
-
const tintColor =
|
|
26
|
+
const tintColor =
|
|
27
|
+
colors.name === 'dark' ? colors.fillColorNeutral040 : colors.fillColorNeutral050Base
|
|
25
28
|
const tintsOnPress = Platform.OS === 'ios'
|
|
26
29
|
|
|
27
30
|
const animatedBackgroundColor = useAnimatedStyle(() => {
|
|
@@ -53,12 +56,12 @@ export function useAnimatedMessageBackgroundColor() {
|
|
|
53
56
|
withTiming(0, {
|
|
54
57
|
duration: FLASH_OUT_MS,
|
|
55
58
|
easing: Easing.out(Easing.ease),
|
|
56
|
-
reduceMotion: ReduceMotion.
|
|
59
|
+
reduceMotion: reduceMotion ? ReduceMotion.Always : ReduceMotion.Never,
|
|
57
60
|
}),
|
|
58
61
|
ReduceMotion.Never
|
|
59
62
|
)
|
|
60
63
|
)
|
|
61
|
-
}, [flashProgress])
|
|
64
|
+
}, [flashProgress, reduceMotion])
|
|
62
65
|
|
|
63
66
|
return {
|
|
64
67
|
animatedBackgroundColor,
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { useEffect, useState } from 'react'
|
|
2
|
+
import { AccessibilityInfo } from 'react-native'
|
|
3
|
+
|
|
4
|
+
export const useReduceMotion = () => {
|
|
5
|
+
const [reduceMotion, setReduceMotion] = useState(false)
|
|
6
|
+
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
AccessibilityInfo.isReduceMotionEnabled().then(setReduceMotion)
|
|
9
|
+
|
|
10
|
+
const subscription = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotion)
|
|
11
|
+
|
|
12
|
+
return () => {
|
|
13
|
+
subscription.remove()
|
|
14
|
+
}
|
|
15
|
+
}, [])
|
|
16
|
+
|
|
17
|
+
return reduceMotion
|
|
18
|
+
}
|