@trilogy-ds/react 0.0.20-esm-cjs → 0.0.23-esm-cjs

package/lib/chunk-7DJ5V2J7.mjs

@@ -0,0 +1,90 @@
+"use client";
+
+// components/skeleton/Skeleton.native.tsx
+import React, { useEffect, useRef } from "react";
+import { View, Animated } from "react-native";
+var Skeleton = ({
+  style,
+  width = "100%",
+  height = 20,
+  backgroundColor = "#E1E9EE",
+  shimmerColor = "#F7F8F8",
+  duration = 1200,
+  borderRadius = 4,
+  children,
+  testID
+}) => {
+  const shimmerValue = useRef(new Animated.Value(0)).current;
+  const [containerWidth, setContainerWidth] = React.useState(200);
+  useEffect(() => {
+    const shimmerAnimation = Animated.loop(
+      Animated.timing(shimmerValue, {
+        toValue: 1,
+        duration,
+        useNativeDriver: true
+      }),
+      { iterations: -1 }
+    );
+    shimmerAnimation.start();
+    return () => shimmerAnimation.stop();
+  }, [shimmerValue, duration]);
+  const translateX = shimmerValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-containerWidth, containerWidth]
+  });
+  const opacity = shimmerValue.interpolate({
+    inputRange: [0, 0.5, 1],
+    outputRange: [0.3, 0.8, 0.3]
+  });
+  const containerStyle = {
+    width: children ? void 0 : width,
+    height: children ? void 0 : height,
+    backgroundColor,
+    borderRadius,
+    overflow: "hidden",
+    alignSelf: children ? "flex-start" : void 0,
+    ...style
+  };
+  const handleLayout = (event) => {
+    const { width: layoutWidth } = event.nativeEvent.layout;
+    setContainerWidth(layoutWidth);
+  };
+  if (children) {
+    return /* @__PURE__ */ React.createElement(View, { style: containerStyle, testID, onLayout: handleLayout }, /* @__PURE__ */ React.createElement(View, { style: { opacity: 0 } }, children), /* @__PURE__ */ React.createElement(
+      Animated.View,
+      {
+        style: [
+          {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: containerWidth * 0.7,
+            height: "100%",
+            backgroundColor: shimmerColor,
+            opacity,
+            transform: [{ translateX }]
+          }
+        ]
+      }
+    ));
+  }
+  return /* @__PURE__ */ React.createElement(View, { style: containerStyle, testID, onLayout: handleLayout }, /* @__PURE__ */ React.createElement(
+    Animated.View,
+    {
+      style: [
+        {
+          width: containerWidth * 0.7,
+          height: "100%",
+          backgroundColor: shimmerColor,
+          opacity,
+          transform: [{ translateX }]
+        }
+      ]
+    }
+  ));
+};
+var Skeleton_native_default = Skeleton;
+
+export {
+  Skeleton_native_default
+};