@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.
- package/.turbo/turbo-build.log +1 -1
- package/es/index.js +149 -50
- package/lib/index.js +149 -50
- package/package.json +5 -5
- package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap +982 -819
- package/src/components/FAB/ActionGroup/__tests__/index.spec.tsx +4 -11
- package/src/components/FAB/ActionGroup/index.tsx +142 -98
- package/src/components/FAB/AnimatedFABIcon.tsx +3 -5
- package/src/components/FAB/FAB.tsx +112 -28
- package/src/components/FAB/__tests__/__snapshots__/index.spec.tsx.snap +27 -9
- package/src/components/FAB/__tests__/index.spec.tsx +22 -2
- package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +2 -0
- package/src/theme/global/space.ts +2 -0
- package/src/types.ts +4 -0
- package/testUtils/setup.tsx +2 -0
- package/types/components/FAB/ActionGroup/StyledActionGroup.d.ts +1 -1
- package/types/components/FAB/ActionGroup/index.d.ts +7 -1
- package/types/components/FAB/FAB.d.ts +8 -2
- package/types/components/FAB/index.d.ts +3 -2
- package/types/theme/global/space.d.ts +1 -0
- package/types/types.d.ts +3 -1
package/.turbo/turbo-build.log
CHANGED
|
@@ -4,5 +4,5 @@ $ rollup -c
|
|
|
4
4
|
[1msrc/index.ts[22m → [1mlib/index.js, es/index.js[22m...[39m
|
|
5
5
|
[1m[33m(!) 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`.[39m[22m
|
|
6
6
|
[1m[33m(!) 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[39m[22m
|
|
7
|
-
[32mcreated [1mlib/index.js, es/index.js[22m in [
|
|
7
|
+
[32mcreated [1mlib/index.js, es/index.js[22m in [1m23.8s[22m[39m
|
|
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)
|
|
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.
|
|
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
|
|
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
|
-
|
|
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
|
|
13148
|
-
var
|
|
13149
|
-
|
|
13150
|
-
|
|
13151
|
-
style
|
|
13152
|
-
|
|
13153
|
-
|
|
13154
|
-
|
|
13155
|
-
|
|
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
|
-
|
|
13170
|
-
|
|
13171
|
-
|
|
13172
|
-
|
|
13173
|
-
|
|
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
|
-
|
|
13292
|
+
translateY: translateYAnimations[0]
|
|
13206
13293
|
}]
|
|
13207
13294
|
}
|
|
13208
|
-
},
|
|
13295
|
+
}, /*#__PURE__*/React.createElement(StyledHeaderText, {
|
|
13209
13296
|
testID: "header-text"
|
|
13210
|
-
}, headerTitle), /*#__PURE__*/React.createElement(
|
|
13211
|
-
|
|
13212
|
-
|
|
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)
|
|
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.
|
|
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
|
|
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
|
-
|
|
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
|
|
13178
|
-
var
|
|
13179
|
-
|
|
13180
|
-
|
|
13181
|
-
style
|
|
13182
|
-
|
|
13183
|
-
|
|
13184
|
-
|
|
13185
|
-
|
|
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.
|
|
13200
|
-
|
|
13201
|
-
|
|
13202
|
-
|
|
13203
|
-
|
|
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
|
-
|
|
13322
|
+
translateY: translateYAnimations[0]
|
|
13236
13323
|
}]
|
|
13237
13324
|
}
|
|
13238
|
-
},
|
|
13325
|
+
}, /*#__PURE__*/React__default["default"].createElement(StyledHeaderText, {
|
|
13239
13326
|
testID: "header-text"
|
|
13240
|
-
}, headerTitle), /*#__PURE__*/React__default["default"].createElement(
|
|
13241
|
-
|
|
13242
|
-
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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",
|