@fruits-chain/react-native-xiaoshu
Version:
🌈 React Native UI library
72 lines (71 loc) • 2.16 kB
JavaScript
"use strict";
import isNil from 'lodash/isNil';
import React, { memo } from 'react';
import { View, StyleSheet } from 'react-native';
import { isObject } from "../helpers/index.js";
import Space from "../space/index.js";
import SkeletonAvatar from "./skeleton-avatar.js";
import SkeletonParagraph from "./skeleton-paragraph.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const defaultTitleWidths = [38];
const defaultParagraphOption = {
rows: 3,
widths: [100, 100, 61]
};
const STYLES = StyleSheet.create({
skeleton: {
flexDirection: 'row'
},
avatar: {
marginRight: 8
},
ctx: {
flex: 1
}
});
const Skeleton = ({
children,
theme,
active = true,
loading,
title = true,
paragraph = true,
avatar = false
}) => {
const showTitle = !!title;
const titleWidths = isObject(title) ? [title.width] : defaultTitleWidths;
const showParagraph = !!paragraph;
const paragraphOption = isObject(paragraph) ? paragraph : defaultParagraphOption;
const paragraphActive = !isNil(paragraphOption.active) ? paragraphOption.active : active;
const showAvatar = !!avatar;
const avatarOption = isObject(avatar) ? avatar : {};
const ctxJSX = showParagraph || showTitle ? /*#__PURE__*/_jsxs(Space, {
children: [showTitle ? /*#__PURE__*/_jsx(SkeletonParagraph, {
theme: theme,
active: active,
rows: 1,
widths: titleWidths
}) : null, showParagraph ? /*#__PURE__*/_jsx(SkeletonParagraph, {
theme: theme,
...paragraphOption,
active: paragraphActive
}) : null]
}) : null;
const nodeJSX = showAvatar ? /*#__PURE__*/_jsxs(View, {
style: STYLES.skeleton,
children: [/*#__PURE__*/_jsx(View, {
style: STYLES.avatar,
children: /*#__PURE__*/_jsx(SkeletonAvatar, {
theme: theme,
...avatarOption,
active: !isNil(avatarOption.active) ? avatarOption.active : active
})
}), !isNil(ctxJSX) ? /*#__PURE__*/_jsx(View, {
style: STYLES.ctx,
children: ctxJSX
}) : null]
}) : ctxJSX;
return loading ? nodeJSX : children;
};
export default /*#__PURE__*/memo(Skeleton);
//# sourceMappingURL=skeleton.js.map