@hero-design/rn 8.59.0 → 8.60.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.
Files changed (19) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/CHANGELOG.md +6 -0
  3. package/es/index.js +183 -102
  4. package/lib/index.js +183 -102
  5. package/package.json +1 -1
  6. package/src/components/AnimatedScroller/AnimatedFAB.tsx +99 -49
  7. package/src/components/AnimatedScroller/AnimatedScrollable.tsx +18 -3
  8. package/src/components/AnimatedScroller/__tests__/ScrollablesWithFAB.spec.tsx +30 -9
  9. package/src/components/AnimatedScroller/__tests__/__snapshots__/ScrollablesWithFAB.spec.tsx.snap +474 -447
  10. package/src/components/FAB/ActionGroup/ActionItem.tsx +3 -1
  11. package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap +216 -211
  12. package/src/components/FAB/ActionGroup/index.tsx +34 -28
  13. package/src/components/FAB/FAB.tsx +102 -41
  14. package/src/components/FAB/StyledFAB.tsx +10 -8
  15. package/src/components/FAB/__tests__/__snapshots__/StyledFAB.spec.tsx.snap +34 -38
  16. package/src/components/FAB/__tests__/__snapshots__/index.spec.tsx.snap +191 -170
  17. package/types/components/AnimatedScroller/AnimatedFAB.d.ts +3 -1
  18. package/types/components/AnimatedScroller/AnimatedScrollable.d.ts +1 -1
  19. package/types/components/FAB/StyledFAB.d.ts +4 -6
package/src/components/FAB/ActionGroup/ActionItem.tsx CHANGED
@@ -50,7 +50,9 @@ const ActionItem = ({
50
50
  Animated.spring(animatedValue.current, {
51
51
  toValue: active ? 1 : 0,
52
52
  useNativeDriver: Platform.OS !== 'web',
53
- delay: index * 20,
53
+ delay: index * 30,
54
+ speed: 10,
55
+ bounciness: 10,
54
56
  }).start();
55
57
  }, [active, index]);
56
58
 
package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap CHANGED
@@ -27,11 +27,7 @@ exports[`ActionGroup has active false 1`] = `
27
27
  >
28
28
  <View
29
29
  collapsable={false}
30
- style={
31
- {
32
- "opacity": 1,
33
- }
34
- }
30
+ style={{}}
35
31
  >
36
32
  <View
37
33
  accessibilityValue={
@@ -53,69 +49,99 @@ exports[`ActionGroup has active false 1`] = `
53
49
  onResponderTerminationRequest={[Function]}
54
50
  onStartShouldSetResponder={[Function]}
55
51
  style={
56
- [
57
- {
58
- "alignItems": "center",
59
- "alignSelf": "flex-start",
60
- "backgroundColor": "#401960",
61
- "borderRadius": 999,
62
- "elevation": 3,
63
- "flexDirection": "row",
64
- "justifyContent": "center",
65
- "padding": 20,
66
- "shadowColor": "#001f23",
67
- "shadowOffset": {
68
- "height": 2,
69
- "width": 0,
70
- },
71
- "shadowOpacity": 0.12,
72
- "shadowRadius": 4,
52
+ {
53
+ "alignItems": "center",
54
+ "alignSelf": "flex-end",
55
+ "backgroundColor": "#401960",
56
+ "borderRadius": 999,
57
+ "bottom": undefined,
58
+ "elevation": 3,
59
+ "flexDirection": "row",
60
+ "height": 64,
61
+ "justifyContent": "center",
62
+ "marginRight": 24,
63
+ "marginTop": 24,
64
+ "padding": 20,
65
+ "shadowColor": "#001f23",
66
+ "shadowOffset": {
67
+ "height": 2,
68
+ "width": 0,
73
69
  },
74
- [
75
- [
76
- {
77
- "alignSelf": "flex-end",
78
- "marginRight": 24,
79
- "marginTop": 24,
80
- },
81
- undefined,
82
- ],
70
+ "shadowOpacity": 0.12,
71
+ "shadowRadius": 4,
72
+ "transform": [
83
73
  {
84
- "bottom": undefined,
74
+ "translateY": 0,
85
75
  },
86
76
  ],
87
- ]
77
+ }
88
78
  }
89
79
  testID="fab"
90
80
  >
91
81
  <View
82
+ collapsable={false}
92
83
  style={
93
- [
94
- {},
95
- [
96
- {
97
- "alignItems": "center",
98
- "height": 24,
99
- "justifyContent": "center",
100
- "width": 24,
101
- },
102
- undefined,
103
- ],
104
- ]
84
+ {
85
+ "flexDirection": "row",
86
+ "opacity": 1,
87
+ }
105
88
  }
106
89
  >
107
- <HeroIcon
108
- name="add"
90
+ <View
91
+ style={
92
+ [
93
+ {},
94
+ [
95
+ {
96
+ "alignItems": "center",
97
+ "height": 24,
98
+ "justifyContent": "center",
99
+ "width": 24,
100
+ },
101
+ undefined,
102
+ ],
103
+ ]
104
+ }
105
+ >
106
+ <HeroIcon
107
+ name="add"
108
+ style={
109
+ [
110
+ {
111
+ "color": "#001f23",
112
+ "fontSize": 16,
113
+ },
114
+ [
115
+ {
116
+ "color": "#ffffff",
117
+ "lineHeight": 24,
118
+ "textAlign": "center",
119
+ "textAlignVertical": "center",
120
+ },
121
+ undefined,
122
+ ],
123
+ ]
124
+ }
125
+ testID="styled-fab-icon"
126
+ themeIntent="text"
127
+ themeSize="xsmall"
128
+ />
129
+ </View>
130
+ <Text
131
+ allowFontScaling={false}
109
132
  style={
110
133
  [
111
134
  {
112
135
  "color": "#001f23",
136
+ "fontFamily": "BeVietnamPro-Regular",
113
137
  "fontSize": 16,
138
+ "letterSpacing": 0.48,
139
+ "lineHeight": 24,
114
140
  },
115
141
  [
116
142
  {
117
143
  "color": "#ffffff",
118
- "lineHeight": 24,
144
+ "marginHorizontal": 8,
119
145
  "textAlign": "center",
120
146
  "textAlignVertical": "center",
121
147
  },
@@ -123,39 +149,13 @@ exports[`ActionGroup has active false 1`] = `
123
149
  ],
124
150
  ]
125
151
  }
126
- testID="styled-fab-icon"
127
- themeIntent="text"
128
- themeSize="xsmall"
129
- />
152
+ themeIntent="body"
153
+ themeTypeface="neutral"
154
+ themeVariant="regular"
155
+ >
156
+ Shout out
157
+ </Text>
130
158
  </View>
131
- <Text
132
- allowFontScaling={false}
133
- style={
134
- [
135
- {
136
- "color": "#001f23",
137
- "fontFamily": "BeVietnamPro-Regular",
138
- "fontSize": 16,
139
- "letterSpacing": 0.48,
140
- "lineHeight": 24,
141
- },
142
- [
143
- {
144
- "color": "#ffffff",
145
- "marginHorizontal": 8,
146
- "textAlign": "center",
147
- "textAlignVertical": "center",
148
- },
149
- undefined,
150
- ],
151
- ]
152
- }
153
- themeIntent="body"
154
- themeTypeface="neutral"
155
- themeVariant="regular"
156
- >
157
- Shout out
158
- </Text>
159
159
  </View>
160
160
  </View>
161
161
  <Modal
@@ -216,11 +216,7 @@ exports[`ActionGroup has active true 1`] = `
216
216
  >
217
217
  <View
218
218
  collapsable={false}
219
- style={
220
- {
221
- "opacity": 0,
222
- }
223
- }
219
+ style={{}}
224
220
  >
225
221
  <View
226
222
  accessibilityValue={
@@ -242,92 +238,96 @@ exports[`ActionGroup has active true 1`] = `
242
238
  onResponderTerminationRequest={[Function]}
243
239
  onStartShouldSetResponder={[Function]}
244
240
  style={
245
- [
246
- {
247
- "alignItems": "center",
248
- "alignSelf": "flex-start",
249
- "backgroundColor": "#33144d",
250
- "borderRadius": 999,
251
- "elevation": 3,
252
- "flexDirection": "row",
253
- "justifyContent": "center",
254
- "padding": 20,
255
- "shadowColor": "#001f23",
256
- "shadowOffset": {
257
- "height": 2,
258
- "width": 0,
259
- },
260
- "shadowOpacity": 0.12,
261
- "shadowRadius": 4,
241
+ {
242
+ "alignItems": "center",
243
+ "alignSelf": "flex-end",
244
+ "backgroundColor": "#33144d",
245
+ "borderRadius": 999,
246
+ "bottom": undefined,
247
+ "elevation": 3,
248
+ "flexDirection": "row",
249
+ "height": 64,
250
+ "justifyContent": "center",
251
+ "marginRight": 24,
252
+ "marginTop": 24,
253
+ "padding": 20,
254
+ "shadowColor": "#001f23",
255
+ "shadowOffset": {
256
+ "height": 2,
257
+ "width": 0,
262
258
  },
263
- [
264
- [
265
- {
266
- "alignSelf": "flex-end",
267
- "marginRight": 24,
268
- "marginTop": 24,
269
- },
270
- undefined,
271
- ],
259
+ "shadowOpacity": 0.12,
260
+ "shadowRadius": 4,
261
+ "transform": [
272
262
  {
273
- "bottom": undefined,
263
+ "translateY": 0,
274
264
  },
275
265
  ],
276
- ]
266
+ }
277
267
  }
278
268
  testID="fab"
279
269
  >
280
270
  <View
271
+ collapsable={false}
281
272
  style={
282
- [
283
- {},
284
- [
285
- {
286
- "alignItems": "center",
287
- "height": 24,
288
- "justifyContent": "center",
289
- "width": 24,
290
- },
291
- undefined,
292
- ],
293
- ]
273
+ {
274
+ "flexDirection": "row",
275
+ "opacity": 1,
276
+ }
294
277
  }
295
278
  >
296
279
  <View
297
- collapsable={false}
298
280
  style={
299
- {
300
- "transform": [
281
+ [
282
+ {},
283
+ [
301
284
  {
302
- "rotate": "-45deg",
285
+ "alignItems": "center",
286
+ "height": 24,
287
+ "justifyContent": "center",
288
+ "width": 24,
303
289
  },
290
+ undefined,
304
291
  ],
305
- }
292
+ ]
306
293
  }
307
294
  >
308
- <HeroIcon
309
- name="add"
295
+ <View
296
+ collapsable={false}
310
297
  style={
311
- [
312
- {
313
- "color": "#001f23",
314
- "fontSize": 16,
315
- },
316
- [
298
+ {
299
+ "transform": [
317
300
  {
318
- "color": "#ffffff",
319
- "lineHeight": 24,
320
- "textAlign": "center",
321
- "textAlignVertical": "center",
301
+ "rotate": "-45deg",
322
302
  },
323
- {},
324
303
  ],
325
- ]
304
+ }
326
305
  }
327
- testID="animated-fab-icon"
328
- themeIntent="text"
329
- themeSize="xsmall"
330
- />
306
+ >
307
+ <HeroIcon
308
+ name="add"
309
+ style={
310
+ [
311
+ {
312
+ "color": "#001f23",
313
+ "fontSize": 16,
314
+ },
315
+ [
316
+ {
317
+ "color": "#ffffff",
318
+ "lineHeight": 24,
319
+ "textAlign": "center",
320
+ "textAlignVertical": "center",
321
+ },
322
+ {},
323
+ ],
324
+ ]
325
+ }
326
+ testID="animated-fab-icon"
327
+ themeIntent="text"
328
+ themeSize="xsmall"
329
+ />
330
+ </View>
331
331
  </View>
332
332
  </View>
333
333
  </View>
@@ -1003,92 +1003,97 @@ exports[`ActionGroup has active true 1`] = `
1003
1003
  onResponderTerminationRequest={[Function]}
1004
1004
  onStartShouldSetResponder={[Function]}
1005
1005
  style={
1006
- [
1007
- {
1008
- "alignItems": "center",
1009
- "alignSelf": "flex-start",
1010
- "backgroundColor": "#33144d",
1011
- "borderRadius": 999,
1012
- "elevation": 3,
1013
- "flexDirection": "row",
1014
- "justifyContent": "center",
1015
- "padding": 20,
1016
- "shadowColor": "#001f23",
1017
- "shadowOffset": {
1018
- "height": 2,
1019
- "width": 0,
1020
- },
1021
- "shadowOpacity": 0.12,
1022
- "shadowRadius": 4,
1006
+ {
1007
+ "alignItems": "center",
1008
+ "alignSelf": "flex-end",
1009
+ "backgroundColor": "#33144d",
1010
+ "borderRadius": 999,
1011
+ "bottom": undefined,
1012
+ "elevation": 3,
1013
+ "flexDirection": "row",
1014
+ "height": 64,
1015
+ "justifyContent": "center",
1016
+ "marginBottom": -2,
1017
+ "marginRight": 24,
1018
+ "marginTop": 24,
1019
+ "padding": 20,
1020
+ "shadowColor": "#001f23",
1021
+ "shadowOffset": {
1022
+ "height": 2,
1023
+ "width": 0,
1023
1024
  },
1024
- [
1025
- [
1026
- {
1027
- "alignSelf": "flex-end",
1028
- "marginRight": 24,
1029
- "marginTop": 24,
1030
- },
1031
- undefined,
1032
- ],
1025
+ "shadowOpacity": 0.12,
1026
+ "shadowRadius": 4,
1027
+ "transform": [
1033
1028
  {
1034
- "bottom": undefined,
1029
+ "translateY": 0,
1035
1030
  },
1036
1031
  ],
1037
- ]
1032
+ }
1038
1033
  }
1039
1034
  testID="fab-in-portal"
1040
1035
  >
1041
1036
  <View
1037
+ collapsable={false}
1042
1038
  style={
1043
- [
1044
- {},
1045
- [
1046
- {
1047
- "alignItems": "center",
1048
- "height": 24,
1049
- "justifyContent": "center",
1050
- "width": 24,
1051
- },
1052
- undefined,
1053
- ],
1054
- ]
1039
+ {
1040
+ "flexDirection": "row",
1041
+ "opacity": 1,
1042
+ }
1055
1043
  }
1056
1044
  >
1057
1045
  <View
1058
- collapsable={false}
1059
1046
  style={
1060
- {
1061
- "transform": [
1047
+ [
1048
+ {},
1049
+ [
1062
1050
  {
1063
- "rotate": "-45deg",
1051
+ "alignItems": "center",
1052
+ "height": 24,
1053
+ "justifyContent": "center",
1054
+ "width": 24,
1064
1055
  },
1056
+ undefined,
1065
1057
  ],
1066
- }
1058
+ ]
1067
1059
  }
1068
1060
  >
1069
- <HeroIcon
1070
- name="add"
1061
+ <View
1062
+ collapsable={false}
1071
1063
  style={
1072
- [
1073
- {
1074
- "color": "#001f23",
1075
- "fontSize": 16,
1076
- },
1077
- [
1064
+ {
1065
+ "transform": [
1078
1066
  {
1079
- "color": "#ffffff",
1080
- "lineHeight": 24,
1081
- "textAlign": "center",
1082
- "textAlignVertical": "center",
1067
+ "rotate": "-45deg",
1083
1068
  },
1084
- {},
1085
1069
  ],
1086
- ]
1070
+ }
1087
1071
  }
1088
- testID="animated-fab-icon"
1089
- themeIntent="text"
1090
- themeSize="xsmall"
1091
- />
1072
+ >
1073
+ <HeroIcon
1074
+ name="add"
1075
+ style={
1076
+ [
1077
+ {
1078
+ "color": "#001f23",
1079
+ "fontSize": 16,
1080
+ },
1081
+ [
1082
+ {
1083
+ "color": "#ffffff",
1084
+ "lineHeight": 24,
1085
+ "textAlign": "center",
1086
+ "textAlignVertical": "center",
1087
+ },
1088
+ {},
1089
+ ],
1090
+ ]
1091
+ }
1092
+ testID="animated-fab-icon"
1093
+ themeIntent="text"
1094
+ themeSize="xsmall"
1095
+ />
1096
+ </View>
1092
1097
  </View>
1093
1098
  </View>
1094
1099
  </View>
package/src/components/FAB/ActionGroup/index.tsx CHANGED
@@ -15,6 +15,7 @@ import {
15
15
  import Box from '../../Box';
16
16
  import { FABHandles } from '../FAB';
17
17
  import { useDeprecation } from '../../../utils/hooks';
18
+ import { useTheme } from '../../../theme';
18
19
 
19
20
  export type ActionGroupHandles = {
20
21
  showFAB: () => void;
@@ -88,8 +89,9 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
88
89
  headerTitle !== undefined
89
90
  );
90
91
 
92
+ const theme = useTheme();
91
93
  const fabRef = useRef<FABHandles>(null);
92
- const tranlateXAnimation = useRef<Animated.Value>(
94
+ const animatedValue = useRef<Animated.Value>(
93
95
  new Animated.Value(active ? 1 : 0)
94
96
  );
95
97
 
@@ -104,30 +106,27 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
104
106
  );
105
107
 
106
108
  React.useEffect(() => {
107
- Animated.spring(tranlateXAnimation.current, {
109
+ Animated.spring(animatedValue.current, {
108
110
  toValue: active ? 1 : 0,
111
+ delay: 100,
109
112
  useNativeDriver: Platform.OS !== 'web',
110
113
  }).start();
114
+
115
+ if (active) {
116
+ fabRef.current?.collapse();
117
+ } else {
118
+ fabRef.current?.show();
119
+ }
111
120
  }, [active]);
112
- const interpolatedActionGroupOpacityAnimation =
113
- tranlateXAnimation.current.interpolate({
114
- inputRange: [0, 1],
115
- outputRange: [0, 1],
116
- });
117
-
118
- const interpolatedFABOpacityAnimation =
119
- tranlateXAnimation.current.interpolate({
120
- inputRange: [0, 1],
121
- outputRange: [1, 0],
122
- });
121
+
122
+ const actionGroupOpacity = animatedValue.current.interpolate({
123
+ inputRange: [0, 1],
124
+ outputRange: [0, 1],
125
+ });
123
126
 
124
127
  return (
125
128
  <StyledContainer testID={testID} pointerEvents="box-none" style={style}>
126
- <Animated.View
127
- style={{
128
- opacity: interpolatedFABOpacityAnimation,
129
- }}
130
- >
129
+ <Animated.View>
131
130
  <StyledFAB
132
131
  key="fab"
133
132
  testID="fab"
@@ -151,7 +150,7 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
151
150
  testID="action-group"
152
151
  pointerEvents="box-none"
153
152
  style={{
154
- opacity: interpolatedActionGroupOpacityAnimation,
153
+ opacity: actionGroupOpacity,
155
154
  }}
156
155
  >
157
156
  <Box style={[style, { paddingBottom: 0 }]}>
@@ -166,15 +165,22 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
166
165
  </Box>
167
166
  </StyledActionGroupContainer>
168
167
 
169
- <StyledFAB
170
- key="fab-in-portal"
171
- testID="fab-in-portal"
172
- icon={fabIcon}
173
- onPress={onPress}
174
- animated
175
- active={active}
176
- title={fabTitle}
177
- />
168
+ {active && (
169
+ <StyledFAB
170
+ // This FAB is moved up a bit compared to the original FAB,
171
+ // set marginBottom to negative value to compensate for it
172
+ style={{
173
+ marginBottom: -theme.space.xxsmall,
174
+ }}
175
+ key="fab-in-portal"
176
+ testID="fab-in-portal"
177
+ icon={fabIcon}
178
+ onPress={onPress}
179
+ animated
180
+ active={active}
181
+ title={fabTitle}
182
+ />
183
+ )}
178
184
  </StyledContainerInModal>
179
185
  </Modal>
180
186
  </StyledContainer>