replyke-rn
Version:
Replyke React Native components: Build interactive apps with social features like comments, votes, feeds, user lists, notifications, and more.
68 lines • 2.68 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CommentSkeleton = CommentSkeleton;
exports.UserMentionSkeleton = UserMentionSkeleton;
exports.Skeleton = Skeleton;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_native_1 = require("react-native");
function Skeleton(_a) {
var style = _a.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: __assign(__assign({}, styles.textSkeleton), { width: "30%" }) }), (0, jsx_runtime_1.jsx)(Skeleton, { style: styles.textSkeleton }), (0, jsx_runtime_1.jsx)(Skeleton, { style: __assign(__assign({}, 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 }) })] }));
}
var 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