@audira/carbon-react-native
Version:
Build React Native apps with component and shared patterns using Carbon
99 lines (98 loc) • 2.92 kB
JavaScript
;
import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
import { Animated, Easing, Platform, StyleSheet } from 'react-native';
import { Motion, Spacing } from '@audira/carbon-react-native-elements';
import { jsx as _jsx } from "react/jsx-runtime";
export const ComponentWrapper = /*#__PURE__*/forwardRef(function ({
children,
onLayout,
onShiftedX,
onShiftedY
}, ref) {
const translateX = useRef(new Animated.Value(0)),
translateXValueJS = useRef(0),
translateY = useRef(new Animated.Value(0)),
translateYValueJS = useRef(0);
useEffect(() => {
const translateX_ = translateX.current,
translateY_ = translateY.current,
translateXListenerID = translateX_.addListener(({
value
}) => {
translateXValueJS.current = value;
}),
translateYListenerID = translateY_.addListener(({
value
}) => {
translateYValueJS.current = value;
});
return () => {
translateX_.removeListener(translateXListenerID);
translateY_.removeListener(translateYListenerID);
};
}, []);
useImperativeHandle(ref, () => {
return {
cancelX() {
translateX.current?.stopAnimation();
},
cancelY() {
translateY.current?.stopAnimation();
},
shiftX(px, delayMs = 0) {
Animated.sequence([Animated.delay(delayMs), Animated.timing(translateX.current, {
toValue: translateXValueJS.current + px,
duration: Motion.Duration.moderate_01,
easing,
useNativeDriver: true
})]).start(({
finished
}) => {
if (finished && onShiftedX) {
onShiftedX();
}
});
},
shiftY(px) {
Animated.timing(translateY.current, {
toValue: translateYValueJS.current + px,
duration: Motion.Duration.moderate_01,
easing,
useNativeDriver: true
}).start(({
finished
}) => {
if (finished && onShiftedY) {
onShiftedY();
}
});
}
};
}, [translateX, translateY, onShiftedX, onShiftedY]);
return /*#__PURE__*/_jsx(Animated.View, {
onLayout: onLayout,
style: [styleSheet.componentWrapper, {
transform: [{
translateX: translateX.current
}, {
translateY: translateY.current
}]
}],
children: children
});
});
const styleSheet = StyleSheet.create({
componentWrapper: {
position: 'absolute',
top: Spacing.spacing_03,
left: '100%',
width: 'auto',
...Platform.select({
web: {
flexDirection: 'row'
}
})
}
}),
easing = Easing.bezier(Motion.Easing.entrance.productive.x1, Motion.Easing.entrance.productive.y1, Motion.Easing.entrance.productive.x2, Motion.Easing.entrance.productive.y2);
//# sourceMappingURL=ComponentWrapper.js.map