@audira/carbon-react-native
Version:
Build React Native apps with component and shared patterns using Carbon
103 lines (102 loc) • 3.39 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ComponentWrapper = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _carbonReactNativeElements = require("@audira/carbon-react-native-elements");
var _jsxRuntime = require("react/jsx-runtime");
const ComponentWrapper = exports.ComponentWrapper = /*#__PURE__*/(0, _react.forwardRef)(function ({
children,
onLayout,
onShiftedX,
onShiftedY
}, ref) {
const translateX = (0, _react.useRef)(new _reactNative.Animated.Value(0)),
translateXValueJS = (0, _react.useRef)(0),
translateY = (0, _react.useRef)(new _reactNative.Animated.Value(0)),
translateYValueJS = (0, _react.useRef)(0);
(0, _react.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);
};
}, []);
(0, _react.useImperativeHandle)(ref, () => {
return {
cancelX() {
translateX.current?.stopAnimation();
},
cancelY() {
translateY.current?.stopAnimation();
},
shiftX(px, delayMs = 0) {
_reactNative.Animated.sequence([_reactNative.Animated.delay(delayMs), _reactNative.Animated.timing(translateX.current, {
toValue: translateXValueJS.current + px,
duration: _carbonReactNativeElements.Motion.Duration.moderate_01,
easing,
useNativeDriver: true
})]).start(({
finished
}) => {
if (finished && onShiftedX) {
onShiftedX();
}
});
},
shiftY(px) {
_reactNative.Animated.timing(translateY.current, {
toValue: translateYValueJS.current + px,
duration: _carbonReactNativeElements.Motion.Duration.moderate_01,
easing,
useNativeDriver: true
}).start(({
finished
}) => {
if (finished && onShiftedY) {
onShiftedY();
}
});
}
};
}, [translateX, translateY, onShiftedX, onShiftedY]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
onLayout: onLayout,
style: [styleSheet.componentWrapper, {
transform: [{
translateX: translateX.current
}, {
translateY: translateY.current
}]
}],
children: children
});
});
const styleSheet = _reactNative.StyleSheet.create({
componentWrapper: {
position: 'absolute',
top: _carbonReactNativeElements.Spacing.spacing_03,
left: '100%',
width: 'auto',
..._reactNative.Platform.select({
web: {
flexDirection: 'row'
}
})
}
}),
easing = _reactNative.Easing.bezier(_carbonReactNativeElements.Motion.Easing.entrance.productive.x1, _carbonReactNativeElements.Motion.Easing.entrance.productive.y1, _carbonReactNativeElements.Motion.Easing.entrance.productive.x2, _carbonReactNativeElements.Motion.Easing.entrance.productive.y2);
//# sourceMappingURL=ComponentWrapper.js.map