@nutui/nutui-react/dist/esm/Skeleton.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import { _ as __rest } from "./tslib.es6.js";
import React__default from "react";
import classNames from "classnames";
import Avatar__default from "./Avatar.js";
import { C as ComponentDefaults } from "./typings.js";
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { rows: 1, animated: false, title: false, avatar: false, avatarSize: "50px", visible: false, avatarShape: "round" });
const Skeleton = (props) => {
  const _a = Object.assign(Object.assign({}, defaultProps), props), { className, animated, rows, title, avatar, avatarSize, visible, children, avatarShape } = _a, rest = __rest(_a, ["className", "animated", "rows", "title", "avatar", "avatarSize", "visible", "children", "avatarShape"]);
  const classPrefix = "nut-skeleton";
  const classes = classNames(classPrefix, className);
  const avatarClass = classNames({
    [`nut-avatar`]: true,
    [`avatar-${avatarShape}`]: avatarShape
  });
  const repeatLines = (num) => {
    return Array.from({ length: num }, (v, i) => i);
  };
  const getStyle = () => {
    if (avatarSize) {
      return {
        width: avatarSize,
        height: avatarSize
      };
    }
    return {
      width: "50px",
      height: "50px"
    };
  };
  return React__default.createElement(React__default.Fragment, null, visible ? React__default.createElement(React__default.Fragment, null, children) : React__default.createElement(
    "div",
    Object.assign({ className: classes }, rest),
    animated && React__default.createElement("div", { className: `${classPrefix}-animation` }),
    React__default.createElement(
      "div",
      { className: `${classPrefix}-content` },
      avatar && React__default.createElement(Avatar__default, { className: avatarClass, shape: avatarShape, style: getStyle(), icon: "null" }),
      rows === 1 ? React__default.createElement("div", { className: `${classPrefix}-block` }) : React__default.createElement(
        "div",
        { className: `${classPrefix}-content-line` },
        title && React__default.createElement("div", { className: `${classPrefix}-title` }),
        repeatLines(rows).map((item, index) => {
          return React__default.createElement("div", { className: `${classPrefix}-block`, key: index });
        })
      )
    )
  ));
};
Skeleton.displayName = "NutSkeleton";
export {
  Skeleton as default
};