@replyke/ui-core-react-native
Version:
Replyke: Build interactive apps with social features like comments, votes, feeds, user lists, notifications, and more.
56 lines • 2.24 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CommentSkeleton = CommentSkeleton;
exports.UserMentionSkeleton = UserMentionSkeleton;
exports.Skeleton = Skeleton;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_native_1 = require("react-native");
function Skeleton({ style }) {
return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [styles.skeleton, style, { opacity: new react_native_1.Animated.Value(0.6) }] }));
}
function CommentSkeleton() {
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.commentContainer, children: [(0, jsx_runtime_1.jsx)(Skeleton, { style: styles.avatarSkeleton }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.textSkeletonContainer, children: [(0, jsx_runtime_1.jsx)(Skeleton, { style: { ...styles.textSkeleton, width: "30%" } }), (0, jsx_runtime_1.jsx)(Skeleton, { style: styles.textSkeleton }), (0, jsx_runtime_1.jsx)(Skeleton, { style: { ...styles.textSkeleton, width: "15%" } })] })] }));
}
function UserMentionSkeleton() {
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.mentionContainer, children: [(0, jsx_runtime_1.jsx)(Skeleton, { style: styles.mentionAvatarSkeleton }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flex: 1 }, children: (0, jsx_runtime_1.jsx)(Skeleton, { style: styles.textSkeleton }) })] }));
}
const styles = react_native_1.StyleSheet.create({
skeleton: {
backgroundColor: "#efefef",
borderRadius: 8,
width: "100%",
height: 16,
},
commentContainer: {
flexDirection: "row",
alignItems: "flex-start",
gap: 8,
width: "100%",
},
avatarSkeleton: {
height: 50,
width: 50,
borderRadius: 25,
},
textSkeletonContainer: {
flex: 1,
gap: 8,
},
textSkeleton: {
width: "100%",
height: 16,
borderRadius: 8,
},
mentionContainer: {
flexDirection: "row",
gap: 8,
width: "100%",
alignItems: "center",
},
mentionAvatarSkeleton: {
height: 35,
width: 35,
borderRadius: 17.5,
},
});
//# sourceMappingURL=Skeleton.js.map