@hero-design/rn 8.30.1 → 8.30.3

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.
@@ -4,5 +4,5 @@ $ rollup -c
4
4
  src/index.ts → lib/index.js, es/index.js...
5
5
  (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
6
6
  (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
7
- created lib/index.js, es/index.js in 28.5s
7
+ created lib/index.js, es/index.js in 23.8s
8
8
  $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json
package/es/index.js CHANGED
@@ -1626,7 +1626,8 @@ var getSpace = function getSpace(baseSpace) {
1626
1626
  xlarge: scale(baseSpace * 4),
1627
1627
  xxlarge: scale(baseSpace * 5),
1628
1628
  xxxlarge: scale(baseSpace * 6),
1629
- xxxxlarge: scale(baseSpace * 7) // 56
1629
+ xxxxlarge: scale(baseSpace * 7),
1630
+ '5xlarge': scale(baseSpace * 8) // 64
1630
1631
  };
1631
1632
  };
1632
1633
 
@@ -12973,11 +12974,9 @@ var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
12973
12974
  iconProps = _objectWithoutProperties(_ref, _excluded$c);
12974
12975
  var rotateAnimation = useRef(new Animated.Value(active ? 1 : 0));
12975
12976
  useEffect(function () {
12976
- var animation = Animated.timing(rotateAnimation.current, {
12977
+ var animation = Animated.spring(rotateAnimation.current, {
12977
12978
  toValue: active ? 1 : 0,
12978
- useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
12979
- easing: Easing.inOut(Easing.ease),
12980
- duration: 300
12979
+ useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android'
12981
12980
  });
12982
12981
  animation.start();
12983
12982
  return function () {
@@ -12999,6 +12998,11 @@ var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
12999
12998
  }, iconProps)));
13000
12999
  };
13001
13000
 
13001
+ if (Platform.OS === 'android') {
13002
+ if (UIManager.setLayoutAnimationEnabledExperimental) {
13003
+ UIManager.setLayoutAnimationEnabledExperimental(true);
13004
+ }
13005
+ }
13002
13006
  var IconOnlyContent = function IconOnlyContent(_ref) {
13003
13007
  var icon = _ref.icon,
13004
13008
  animated = _ref.animated,
@@ -13024,7 +13028,19 @@ var IconWithTextContent = function IconWithTextContent(_ref2) {
13024
13028
  testID: "styled-fab-icon"
13025
13029
  })), /*#__PURE__*/React.createElement(StyledFABText, null, title));
13026
13030
  };
13027
- var FAB = function FAB(_ref3) {
13031
+ var defaultAnimation = {
13032
+ create: {
13033
+ type: 'easeInEaseOut',
13034
+ property: 'opacity'
13035
+ },
13036
+ update: {
13037
+ type: 'spring',
13038
+ springDamping: 1
13039
+ },
13040
+ duration: 400
13041
+ };
13042
+ var FAB = /*#__PURE__*/forwardRef(function (_ref3, ref) {
13043
+ var _StyleSheet$flatten, _StyleSheet$flatten2;
13028
13044
  var onPress = _ref3.onPress,
13029
13045
  title = _ref3.title,
13030
13046
  icon = _ref3.icon,
@@ -13032,22 +13048,75 @@ var FAB = function FAB(_ref3) {
13032
13048
  testID = _ref3.testID,
13033
13049
  active = _ref3.active,
13034
13050
  style = _ref3.style;
13035
- var isIconOnly = !title;
13036
13051
  var theme = useTheme();
13037
- return /*#__PURE__*/React.createElement(StyledFAB$1, {
13052
+ var _React$useState = React.useState({
13053
+ hideTitle: false,
13054
+ hideButton: false
13055
+ }),
13056
+ _React$useState2 = _slicedToArray(_React$useState, 2),
13057
+ displayState = _React$useState2[0],
13058
+ setDisplayState = _React$useState2[1];
13059
+ var _React$useState3 = React.useState(false),
13060
+ _React$useState4 = _slicedToArray(_React$useState3, 2),
13061
+ canAnimate = _React$useState4[0],
13062
+ setCanAnimate = _React$useState4[1];
13063
+ var isIconOnly = displayState.hideTitle || active || !title;
13064
+ useImperativeHandle(ref, function () {
13065
+ return {
13066
+ show: function show() {
13067
+ setDisplayState({
13068
+ hideButton: false,
13069
+ hideTitle: false
13070
+ });
13071
+ },
13072
+ collapse: function collapse() {
13073
+ setDisplayState({
13074
+ hideButton: false,
13075
+ hideTitle: true
13076
+ });
13077
+ },
13078
+ hide: function hide() {
13079
+ setDisplayState(function (previousState) {
13080
+ return _objectSpread2(_objectSpread2({}, previousState), {}, {
13081
+ hideButton: true
13082
+ });
13083
+ });
13084
+ }
13085
+ };
13086
+ }, [displayState]);
13087
+ useEffect(function () {
13088
+ if (canAnimate) {
13089
+ LayoutAnimation.configureNext(defaultAnimation);
13090
+ }
13091
+ }, [isIconOnly]);
13092
+ useEffect(function () {
13093
+ if (canAnimate) {
13094
+ LayoutAnimation.configureNext(defaultAnimation);
13095
+ }
13096
+ }, [displayState.hideButton]);
13097
+ var marginBottom = Number((_StyleSheet$flatten = StyleSheet$1.flatten(style)) === null || _StyleSheet$flatten === void 0 ? void 0 : _StyleSheet$flatten.marginBottom) || 0;
13098
+ return /*#__PURE__*/React.createElement(StyledFAB$1
13099
+ /** Add a small timeout before executing animation to prevent flakiness on android */, {
13100
+ onLayout: function onLayout() {
13101
+ return setTimeout(function () {
13102
+ return setCanAnimate(true);
13103
+ }, 200);
13104
+ },
13038
13105
  underlayColor: theme.__hd__.fab.colors.buttonPressedBackground,
13039
13106
  onPress: onPress,
13040
- style: style,
13107
+ style: [style, {
13108
+ bottom: displayState.hideButton ? -(marginBottom + theme.__hd__.fab.sizes.height * 2) : (_StyleSheet$flatten2 = StyleSheet$1.flatten(style)) === null || _StyleSheet$flatten2 === void 0 ? void 0 : _StyleSheet$flatten2.bottom
13109
+ }],
13041
13110
  testID: testID
13042
13111
  }, isIconOnly ? /*#__PURE__*/React.createElement(IconOnlyContent, {
13043
13112
  animated: animated,
13044
13113
  active: active,
13045
- icon: icon
13114
+ icon: active ? 'add' : icon
13046
13115
  }) : /*#__PURE__*/React.createElement(IconWithTextContent, {
13047
13116
  icon: icon,
13048
13117
  title: title
13049
13118
  }));
13050
- };
13119
+ });
13051
13120
 
13052
13121
  var StyledActionItem = index$a(TouchableHighlight)(function (_ref) {
13053
13122
  var theme = _ref.theme;
@@ -13144,40 +13213,55 @@ var StyledHeaderText = index$a(Typography.Text)(function (_ref3) {
13144
13213
  };
13145
13214
  });
13146
13215
 
13147
- var ActionItemsListComponent = function ActionItemsListComponent(_ref) {
13148
- var style = _ref.style,
13149
- items = _ref.items;
13150
- return /*#__PURE__*/React.createElement(View, {
13151
- style: style
13152
- }, items === null || items === void 0 ? void 0 : items.map(function (itemProp) {
13153
- return /*#__PURE__*/React.createElement(ActionItem, _extends$1({
13154
- key: itemProp.key || "".concat(itemProp.icon, "_").concat(itemProp.title)
13155
- }, itemProp));
13156
- }));
13157
- };
13158
- var ActionGroup = function ActionGroup(_ref2) {
13159
- var headerTitle = _ref2.headerTitle,
13160
- onPress = _ref2.onPress,
13161
- active = _ref2.active,
13162
- style = _ref2.style,
13163
- items = _ref2.items,
13164
- testID = _ref2.testID,
13165
- fabTitle = _ref2.fabTitle,
13166
- _ref2$fabIcon = _ref2.fabIcon,
13167
- fabIcon = _ref2$fabIcon === void 0 ? 'add' : _ref2$fabIcon;
13216
+ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
13217
+ var headerTitle = _ref.headerTitle,
13218
+ onPress = _ref.onPress,
13219
+ active = _ref.active,
13220
+ style = _ref.style,
13221
+ items = _ref.items,
13222
+ testID = _ref.testID,
13223
+ fabTitle = _ref.fabTitle,
13224
+ _ref$fabIcon = _ref.fabIcon,
13225
+ fabIcon = _ref$fabIcon === void 0 ? 'add' : _ref$fabIcon;
13226
+ var fabRef = useRef(null);
13168
13227
  var tranlateXAnimation = useRef(new Animated.Value(active ? 1 : 0));
13169
- useEffect(function () {
13170
- var animation = Animated.timing(tranlateXAnimation.current, {
13171
- toValue: active ? 1 : 0,
13172
- useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
13173
- easing: Easing.inOut(Easing.cubic)
13228
+ var animatedValues = useRef((items === null || items === void 0 ? void 0 : items.map(function () {
13229
+ return new Animated.Value(0);
13230
+ })) || []).current;
13231
+ var translateYAnimations = animatedValues === null || animatedValues === void 0 ? void 0 : animatedValues.map(function (value) {
13232
+ return value.interpolate({
13233
+ inputRange: [0, 1],
13234
+ outputRange: active ? [100, 0] : [40, 0]
13174
13235
  });
13175
- animation.start();
13176
- }, [active]);
13177
- var interpolatedTranlateXAnimation = tranlateXAnimation.current.interpolate({
13178
- inputRange: [0, 1],
13179
- outputRange: [400, 0]
13180
13236
  });
13237
+ useImperativeHandle(ref, function () {
13238
+ return {
13239
+ showFAB: function showFAB() {
13240
+ var _fabRef$current;
13241
+ return (_fabRef$current = fabRef.current) === null || _fabRef$current === void 0 ? void 0 : _fabRef$current.show();
13242
+ },
13243
+ collapseFAB: function collapseFAB() {
13244
+ var _fabRef$current2;
13245
+ return (_fabRef$current2 = fabRef.current) === null || _fabRef$current2 === void 0 ? void 0 : _fabRef$current2.collapse();
13246
+ },
13247
+ hideFAB: function hideFAB() {
13248
+ var _fabRef$current3;
13249
+ return (_fabRef$current3 = fabRef.current) === null || _fabRef$current3 === void 0 ? void 0 : _fabRef$current3.hide();
13250
+ }
13251
+ };
13252
+ }, [fabRef]);
13253
+ useEffect(function () {
13254
+ Animated.spring(tranlateXAnimation.current, {
13255
+ toValue: active ? 1 : 0,
13256
+ useNativeDriver: Platform.OS !== 'web'
13257
+ }).start();
13258
+ Animated.stagger(20, animatedValues.map(function (value) {
13259
+ return Animated.spring(value, {
13260
+ toValue: active ? 1 : 0,
13261
+ useNativeDriver: Platform.OS !== 'web'
13262
+ });
13263
+ }).reverse()).start();
13264
+ }, [active, animatedValues]);
13181
13265
  var interpolatedBackdropOpacityAnimation = tranlateXAnimation.current.interpolate({
13182
13266
  inputRange: [0, 1],
13183
13267
  outputRange: [0, 0.4]
@@ -13200,24 +13284,39 @@ var ActionGroup = function ActionGroup(_ref2) {
13200
13284
  pointerEvents: active ? 'auto' : 'none',
13201
13285
  testID: "action-group",
13202
13286
  style: {
13203
- opacity: interpolatedActionGroupOpacityAnimation,
13287
+ opacity: interpolatedActionGroupOpacityAnimation
13288
+ }
13289
+ }, !!headerTitle && /*#__PURE__*/React.createElement(Animated.View, {
13290
+ style: {
13204
13291
  transform: [{
13205
- translateX: interpolatedTranlateXAnimation
13292
+ translateY: translateYAnimations[0]
13206
13293
  }]
13207
13294
  }
13208
- }, !!headerTitle && /*#__PURE__*/React.createElement(StyledHeaderText, {
13295
+ }, /*#__PURE__*/React.createElement(StyledHeaderText, {
13209
13296
  testID: "header-text"
13210
- }, headerTitle), /*#__PURE__*/React.createElement(ActionItemsListComponent, {
13211
- items: items
13212
- })), /*#__PURE__*/React.createElement(StyledFAB, {
13297
+ }, headerTitle)), /*#__PURE__*/React.createElement(Box, {
13298
+ style: [style, {
13299
+ paddingBottom: 0
13300
+ }]
13301
+ }, items === null || items === void 0 ? void 0 : items.map(function (itemProp, index) {
13302
+ return /*#__PURE__*/React.createElement(Animated.View, {
13303
+ key: itemProp.key || "".concat(itemProp.icon, "_").concat(itemProp.title),
13304
+ style: {
13305
+ transform: [{
13306
+ translateY: translateYAnimations[index]
13307
+ }]
13308
+ }
13309
+ }, /*#__PURE__*/React.createElement(ActionItem, itemProp));
13310
+ }))), /*#__PURE__*/React.createElement(StyledFAB, {
13213
13311
  testID: "fab",
13214
13312
  icon: fabIcon,
13215
13313
  onPress: onPress,
13216
13314
  animated: true,
13217
13315
  active: active,
13218
- title: fabTitle
13316
+ title: fabTitle,
13317
+ ref: fabRef
13219
13318
  }));
13220
- };
13319
+ });
13221
13320
 
13222
13321
  var index$6 = Object.assign(FAB, {
13223
13322
  ActionGroup: ActionGroup
package/lib/index.js CHANGED
@@ -1656,7 +1656,8 @@ var getSpace = function getSpace(baseSpace) {
1656
1656
  xlarge: scale(baseSpace * 4),
1657
1657
  xxlarge: scale(baseSpace * 5),
1658
1658
  xxxlarge: scale(baseSpace * 6),
1659
- xxxxlarge: scale(baseSpace * 7) // 56
1659
+ xxxxlarge: scale(baseSpace * 7),
1660
+ '5xlarge': scale(baseSpace * 8) // 64
1660
1661
  };
1661
1662
  };
1662
1663
 
@@ -13003,11 +13004,9 @@ var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
13003
13004
  iconProps = _objectWithoutProperties(_ref, _excluded$c);
13004
13005
  var rotateAnimation = React.useRef(new reactNative.Animated.Value(active ? 1 : 0));
13005
13006
  React.useEffect(function () {
13006
- var animation = reactNative.Animated.timing(rotateAnimation.current, {
13007
+ var animation = reactNative.Animated.spring(rotateAnimation.current, {
13007
13008
  toValue: active ? 1 : 0,
13008
- useNativeDriver: reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android',
13009
- easing: reactNative.Easing.inOut(reactNative.Easing.ease),
13010
- duration: 300
13009
+ useNativeDriver: reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android'
13011
13010
  });
13012
13011
  animation.start();
13013
13012
  return function () {
@@ -13029,6 +13028,11 @@ var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
13029
13028
  }, iconProps)));
13030
13029
  };
13031
13030
 
13031
+ if (reactNative.Platform.OS === 'android') {
13032
+ if (reactNative.UIManager.setLayoutAnimationEnabledExperimental) {
13033
+ reactNative.UIManager.setLayoutAnimationEnabledExperimental(true);
13034
+ }
13035
+ }
13032
13036
  var IconOnlyContent = function IconOnlyContent(_ref) {
13033
13037
  var icon = _ref.icon,
13034
13038
  animated = _ref.animated,
@@ -13054,7 +13058,19 @@ var IconWithTextContent = function IconWithTextContent(_ref2) {
13054
13058
  testID: "styled-fab-icon"
13055
13059
  })), /*#__PURE__*/React__default["default"].createElement(StyledFABText, null, title));
13056
13060
  };
13057
- var FAB = function FAB(_ref3) {
13061
+ var defaultAnimation = {
13062
+ create: {
13063
+ type: 'easeInEaseOut',
13064
+ property: 'opacity'
13065
+ },
13066
+ update: {
13067
+ type: 'spring',
13068
+ springDamping: 1
13069
+ },
13070
+ duration: 400
13071
+ };
13072
+ var FAB = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
13073
+ var _StyleSheet$flatten, _StyleSheet$flatten2;
13058
13074
  var onPress = _ref3.onPress,
13059
13075
  title = _ref3.title,
13060
13076
  icon = _ref3.icon,
@@ -13062,22 +13078,75 @@ var FAB = function FAB(_ref3) {
13062
13078
  testID = _ref3.testID,
13063
13079
  active = _ref3.active,
13064
13080
  style = _ref3.style;
13065
- var isIconOnly = !title;
13066
13081
  var theme = useTheme();
13067
- return /*#__PURE__*/React__default["default"].createElement(StyledFAB$1, {
13082
+ var _React$useState = React__default["default"].useState({
13083
+ hideTitle: false,
13084
+ hideButton: false
13085
+ }),
13086
+ _React$useState2 = _slicedToArray(_React$useState, 2),
13087
+ displayState = _React$useState2[0],
13088
+ setDisplayState = _React$useState2[1];
13089
+ var _React$useState3 = React__default["default"].useState(false),
13090
+ _React$useState4 = _slicedToArray(_React$useState3, 2),
13091
+ canAnimate = _React$useState4[0],
13092
+ setCanAnimate = _React$useState4[1];
13093
+ var isIconOnly = displayState.hideTitle || active || !title;
13094
+ React.useImperativeHandle(ref, function () {
13095
+ return {
13096
+ show: function show() {
13097
+ setDisplayState({
13098
+ hideButton: false,
13099
+ hideTitle: false
13100
+ });
13101
+ },
13102
+ collapse: function collapse() {
13103
+ setDisplayState({
13104
+ hideButton: false,
13105
+ hideTitle: true
13106
+ });
13107
+ },
13108
+ hide: function hide() {
13109
+ setDisplayState(function (previousState) {
13110
+ return _objectSpread2(_objectSpread2({}, previousState), {}, {
13111
+ hideButton: true
13112
+ });
13113
+ });
13114
+ }
13115
+ };
13116
+ }, [displayState]);
13117
+ React.useEffect(function () {
13118
+ if (canAnimate) {
13119
+ reactNative.LayoutAnimation.configureNext(defaultAnimation);
13120
+ }
13121
+ }, [isIconOnly]);
13122
+ React.useEffect(function () {
13123
+ if (canAnimate) {
13124
+ reactNative.LayoutAnimation.configureNext(defaultAnimation);
13125
+ }
13126
+ }, [displayState.hideButton]);
13127
+ var marginBottom = Number((_StyleSheet$flatten = reactNative.StyleSheet.flatten(style)) === null || _StyleSheet$flatten === void 0 ? void 0 : _StyleSheet$flatten.marginBottom) || 0;
13128
+ return /*#__PURE__*/React__default["default"].createElement(StyledFAB$1
13129
+ /** Add a small timeout before executing animation to prevent flakiness on android */, {
13130
+ onLayout: function onLayout() {
13131
+ return setTimeout(function () {
13132
+ return setCanAnimate(true);
13133
+ }, 200);
13134
+ },
13068
13135
  underlayColor: theme.__hd__.fab.colors.buttonPressedBackground,
13069
13136
  onPress: onPress,
13070
- style: style,
13137
+ style: [style, {
13138
+ bottom: displayState.hideButton ? -(marginBottom + theme.__hd__.fab.sizes.height * 2) : (_StyleSheet$flatten2 = reactNative.StyleSheet.flatten(style)) === null || _StyleSheet$flatten2 === void 0 ? void 0 : _StyleSheet$flatten2.bottom
13139
+ }],
13071
13140
  testID: testID
13072
13141
  }, isIconOnly ? /*#__PURE__*/React__default["default"].createElement(IconOnlyContent, {
13073
13142
  animated: animated,
13074
13143
  active: active,
13075
- icon: icon
13144
+ icon: active ? 'add' : icon
13076
13145
  }) : /*#__PURE__*/React__default["default"].createElement(IconWithTextContent, {
13077
13146
  icon: icon,
13078
13147
  title: title
13079
13148
  }));
13080
- };
13149
+ });
13081
13150
 
13082
13151
  var StyledActionItem = index$a(reactNative.TouchableHighlight)(function (_ref) {
13083
13152
  var theme = _ref.theme;
@@ -13174,40 +13243,55 @@ var StyledHeaderText = index$a(Typography.Text)(function (_ref3) {
13174
13243
  };
13175
13244
  });
13176
13245
 
13177
- var ActionItemsListComponent = function ActionItemsListComponent(_ref) {
13178
- var style = _ref.style,
13179
- items = _ref.items;
13180
- return /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
13181
- style: style
13182
- }, items === null || items === void 0 ? void 0 : items.map(function (itemProp) {
13183
- return /*#__PURE__*/React__default["default"].createElement(ActionItem, _extends$1({
13184
- key: itemProp.key || "".concat(itemProp.icon, "_").concat(itemProp.title)
13185
- }, itemProp));
13186
- }));
13187
- };
13188
- var ActionGroup = function ActionGroup(_ref2) {
13189
- var headerTitle = _ref2.headerTitle,
13190
- onPress = _ref2.onPress,
13191
- active = _ref2.active,
13192
- style = _ref2.style,
13193
- items = _ref2.items,
13194
- testID = _ref2.testID,
13195
- fabTitle = _ref2.fabTitle,
13196
- _ref2$fabIcon = _ref2.fabIcon,
13197
- fabIcon = _ref2$fabIcon === void 0 ? 'add' : _ref2$fabIcon;
13246
+ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
13247
+ var headerTitle = _ref.headerTitle,
13248
+ onPress = _ref.onPress,
13249
+ active = _ref.active,
13250
+ style = _ref.style,
13251
+ items = _ref.items,
13252
+ testID = _ref.testID,
13253
+ fabTitle = _ref.fabTitle,
13254
+ _ref$fabIcon = _ref.fabIcon,
13255
+ fabIcon = _ref$fabIcon === void 0 ? 'add' : _ref$fabIcon;
13256
+ var fabRef = React.useRef(null);
13198
13257
  var tranlateXAnimation = React.useRef(new reactNative.Animated.Value(active ? 1 : 0));
13199
- React.useEffect(function () {
13200
- var animation = reactNative.Animated.timing(tranlateXAnimation.current, {
13201
- toValue: active ? 1 : 0,
13202
- useNativeDriver: reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android',
13203
- easing: reactNative.Easing.inOut(reactNative.Easing.cubic)
13258
+ var animatedValues = React.useRef((items === null || items === void 0 ? void 0 : items.map(function () {
13259
+ return new reactNative.Animated.Value(0);
13260
+ })) || []).current;
13261
+ var translateYAnimations = animatedValues === null || animatedValues === void 0 ? void 0 : animatedValues.map(function (value) {
13262
+ return value.interpolate({
13263
+ inputRange: [0, 1],
13264
+ outputRange: active ? [100, 0] : [40, 0]
13204
13265
  });
13205
- animation.start();
13206
- }, [active]);
13207
- var interpolatedTranlateXAnimation = tranlateXAnimation.current.interpolate({
13208
- inputRange: [0, 1],
13209
- outputRange: [400, 0]
13210
13266
  });
13267
+ React.useImperativeHandle(ref, function () {
13268
+ return {
13269
+ showFAB: function showFAB() {
13270
+ var _fabRef$current;
13271
+ return (_fabRef$current = fabRef.current) === null || _fabRef$current === void 0 ? void 0 : _fabRef$current.show();
13272
+ },
13273
+ collapseFAB: function collapseFAB() {
13274
+ var _fabRef$current2;
13275
+ return (_fabRef$current2 = fabRef.current) === null || _fabRef$current2 === void 0 ? void 0 : _fabRef$current2.collapse();
13276
+ },
13277
+ hideFAB: function hideFAB() {
13278
+ var _fabRef$current3;
13279
+ return (_fabRef$current3 = fabRef.current) === null || _fabRef$current3 === void 0 ? void 0 : _fabRef$current3.hide();
13280
+ }
13281
+ };
13282
+ }, [fabRef]);
13283
+ React.useEffect(function () {
13284
+ reactNative.Animated.spring(tranlateXAnimation.current, {
13285
+ toValue: active ? 1 : 0,
13286
+ useNativeDriver: reactNative.Platform.OS !== 'web'
13287
+ }).start();
13288
+ reactNative.Animated.stagger(20, animatedValues.map(function (value) {
13289
+ return reactNative.Animated.spring(value, {
13290
+ toValue: active ? 1 : 0,
13291
+ useNativeDriver: reactNative.Platform.OS !== 'web'
13292
+ });
13293
+ }).reverse()).start();
13294
+ }, [active, animatedValues]);
13211
13295
  var interpolatedBackdropOpacityAnimation = tranlateXAnimation.current.interpolate({
13212
13296
  inputRange: [0, 1],
13213
13297
  outputRange: [0, 0.4]
@@ -13230,24 +13314,39 @@ var ActionGroup = function ActionGroup(_ref2) {
13230
13314
  pointerEvents: active ? 'auto' : 'none',
13231
13315
  testID: "action-group",
13232
13316
  style: {
13233
- opacity: interpolatedActionGroupOpacityAnimation,
13317
+ opacity: interpolatedActionGroupOpacityAnimation
13318
+ }
13319
+ }, !!headerTitle && /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, {
13320
+ style: {
13234
13321
  transform: [{
13235
- translateX: interpolatedTranlateXAnimation
13322
+ translateY: translateYAnimations[0]
13236
13323
  }]
13237
13324
  }
13238
- }, !!headerTitle && /*#__PURE__*/React__default["default"].createElement(StyledHeaderText, {
13325
+ }, /*#__PURE__*/React__default["default"].createElement(StyledHeaderText, {
13239
13326
  testID: "header-text"
13240
- }, headerTitle), /*#__PURE__*/React__default["default"].createElement(ActionItemsListComponent, {
13241
- items: items
13242
- })), /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
13327
+ }, headerTitle)), /*#__PURE__*/React__default["default"].createElement(Box, {
13328
+ style: [style, {
13329
+ paddingBottom: 0
13330
+ }]
13331
+ }, items === null || items === void 0 ? void 0 : items.map(function (itemProp, index) {
13332
+ return /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, {
13333
+ key: itemProp.key || "".concat(itemProp.icon, "_").concat(itemProp.title),
13334
+ style: {
13335
+ transform: [{
13336
+ translateY: translateYAnimations[index]
13337
+ }]
13338
+ }
13339
+ }, /*#__PURE__*/React__default["default"].createElement(ActionItem, itemProp));
13340
+ }))), /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
13243
13341
  testID: "fab",
13244
13342
  icon: fabIcon,
13245
13343
  onPress: onPress,
13246
13344
  animated: true,
13247
13345
  active: active,
13248
- title: fabTitle
13346
+ title: fabTitle,
13347
+ ref: fabRef
13249
13348
  }));
13250
- };
13349
+ });
13251
13350
 
13252
13351
  var index$6 = Object.assign(FAB, {
13253
13352
  ActionGroup: ActionGroup
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hero-design/rn",
3
- "version": "8.30.1",
3
+ "version": "8.30.3",
4
4
  "license": "MIT",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
@@ -21,7 +21,7 @@
21
21
  "dependencies": {
22
22
  "@emotion/native": "^11.9.3",
23
23
  "@emotion/react": "^11.9.3",
24
- "@hero-design/colors": "8.30.1",
24
+ "@hero-design/colors": "8.30.3",
25
25
  "date-fns": "^2.16.1",
26
26
  "events": "^3.2.0",
27
27
  "hero-editor": "^1.9.21"
@@ -45,7 +45,7 @@
45
45
  "@babel/preset-typescript": "^7.17.12",
46
46
  "@babel/runtime": "^7.18.9",
47
47
  "@emotion/jest": "^11.9.3",
48
- "@hero-design/eslint-plugin": "8.30.1",
48
+ "@hero-design/eslint-plugin": "8.30.3",
49
49
  "@react-native-community/datetimepicker": "^3.5.2",
50
50
  "@react-native-community/slider": "4.1.12",
51
51
  "@rollup/plugin-babel": "^5.3.1",
@@ -61,10 +61,10 @@
61
61
  "@types/react-native": "^0.67.7",
62
62
  "@types/react-native-vector-icons": "^6.4.10",
63
63
  "babel-plugin-inline-import": "^3.0.0",
64
- "eslint-config-hd": "8.30.1",
64
+ "eslint-config-hd": "8.30.3",
65
65
  "eslint-plugin-import": "^2.27.5",
66
66
  "jest": "^27.3.1",
67
- "prettier-config-hd": "8.30.1",
67
+ "prettier-config-hd": "8.30.3",
68
68
  "react": "18.0.0",
69
69
  "react-native": "0.69.7",
70
70
  "react-native-gesture-handler": "~2.1.0",