@fruits-chain/react-native-xiaoshu/lib/module/skeleton/skeleton.js

🌈 React Native UI library

"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