@crossed/ui/lib/module/forms/Switch/Track.js

A universal & performant styling library for React Native, Next.js & React

import { jsx } from "react/jsx-runtime";
import Animated, {
  interpolateColor,
  useAnimatedStyle,
  withTiming
} from "react-native-reanimated";
import { composeStyles, useTheme } from "@crossed/styled";
import { styles } from "./styles";
import { useContext } from "react";
import { localContext } from "./context";
import { Thumb } from "./Thumb";
const SwitchTrack = () => {
  const { value, duration, height, width, disabled } = useContext(localContext);
  const { components } = useTheme();
  const trackAnimatedStyle = useAnimatedStyle(() => {
    const color = interpolateColor(
      value ? 1 : 0,
      [0, 1],
      [components.Switch.off.background, components.Switch.on.background]
    );
    return {
      backgroundColor: withTiming(color, { duration })
    };
  }, [value]);
  return /* @__PURE__ */ jsx(
    Animated.View,
    {
      onLayout: (e) => {
        height.value = e.nativeEvent.layout.height;
        width.value = e.nativeEvent.layout.width;
      },
      style: [
        composeStyles(
          styles.track,
          disabled && styles.disabledOff,
          disabled && value && styles.disabledOn
        ).style().style,
        trackAnimatedStyle
      ],
      children: /* @__PURE__ */ jsx(Thumb, {})
    }
  );
};
export {
  SwitchTrack
};
//# sourceMappingURL=Track.js.map