@audira/carbon-react-native/lib/module/components/accordion/_chevron/Chevron.js

Build React Native apps with component and shared patterns using Carbon

"use strict";

import { useEffect, useRef } from 'react';
import { Animated as RNAnimated } from 'react-native';
import ChevronDown from '@carbon/icons/svg/32/chevron--down.svg';
import { Motion } from "../_motion.js";
import { jsx as _jsx } from "react/jsx-runtime";
const AnimatedSvgChevronDown = RNAnimated.createAnimatedComponent(ChevronDown);
export function Chevron({
  open,
  color,
  size,
  style
}) {
  const isMounted = useRef(false),
    /**
     * To animate degree unit, we have to animate it through interpolation
     * 
     * - 0 = 0deg (original)
     * - 1 = 180deg (become to chevron up)
     */
    rotateZ = useRef(new RNAnimated.Value(open ? 1 : 0));
  useEffect(() => {
    if (isMounted.current) {
      if (open) {
        RNAnimated.timing(rotateZ.current, {
          toValue: 1,
          duration: Motion.toOpen.duration,
          easing: Motion.toOpen.easing,
          useNativeDriver: true
        }).start();
      } else {
        RNAnimated.timing(rotateZ.current, {
          toValue: 0,
          duration: Motion.toClose.duration,
          easing: Motion.toClose.easing,
          useNativeDriver: true
        }).start();
      }
    } else {
      isMounted.current = true;
    }
  }, [open, rotateZ]);
  return /*#__PURE__*/_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