@audira/carbon-react-native
Version:
Build React Native apps with component and shared patterns using Carbon
63 lines (62 loc) • 1.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Chevron = Chevron;
var _react = require("react");
var _reactNative = require("react-native");
var _chevronDown = _interopRequireDefault(require("@carbon/icons/svg/32/chevron--down.svg"));
var _motion = require("../_motion.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const AnimatedSvgChevronDown = _reactNative.Animated.createAnimatedComponent(_chevronDown.default);
function Chevron({
open,
color,
size,
style
}) {
const isMounted = (0, _react.useRef)(false),
/**
* To animate degree unit, we have to animate it through interpolation
*
* - 0 = 0deg (original)
* - 1 = 180deg (become to chevron up)
*/
rotateZ = (0, _react.useRef)(new _reactNative.Animated.Value(open ? 1 : 0));
(0, _react.useEffect)(() => {
if (isMounted.current) {
if (open) {
_reactNative.Animated.timing(rotateZ.current, {
toValue: 1,
duration: _motion.Motion.toOpen.duration,
easing: _motion.Motion.toOpen.easing,
useNativeDriver: true
}).start();
} else {
_reactNative.Animated.timing(rotateZ.current, {
toValue: 0,
duration: _motion.Motion.toClose.duration,
easing: _motion.Motion.toClose.easing,
useNativeDriver: true
}).start();
}
} else {
isMounted.current = true;
}
}, [open, rotateZ]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedSvgChevronDown, {
fill: color,
width: size,
height: size,
style: [{
transform: [{
rotateZ: rotateZ.current.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '180deg']
})
}]
}, style]
});
}
//# sourceMappingURL=Chevron.js.map