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

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

import { _ as __rest } from "./tslib.es6.js";
import React__default, { useState, useEffect } from "react";
import classNames from "classnames";
import { C as ComponentDefaults } from "./typings.js";
import { B as Button } from "./button2.js";
const defaultStatus = {
  empty: "https://storage.360buyimg.com/imgtools/30186cfda0-0d3eee40-c0ac-11ee-9382-9125782aa3b8.png",
  error: "https://storage.360buyimg.com/imgtools/f3278d0ebb-0ce360c0-c0ac-11ee-8375-193101bb1a46.png",
  network: "https://storage.360buyimg.com/imgtools/43c30f7e29-0d483d10-c0ac-11ee-bec4-eb4d2a09a51d.png"
};
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { title: "", description: "", imageSize: "", size: "base", status: "empty", actions: [] });
const classPrefix = `nut-empty`;
const Empty = (props) => {
  const _a = Object.assign(Object.assign({}, defaultProps), props), { image, imageSize, title, description, children, className, size, status, actions } = _a, rest = __rest(_a, ["image", "imageSize", "title", "description", "children", "className", "size", "status", "actions"]);
  const [imgStyle, setImgStyle] = useState({});
  const imageUrl = image || defaultStatus[status];
  const imageNode = typeof imageUrl === "string" ? React__default.createElement("img", { className: "img", src: imageUrl, alt: "empty" }) : imageUrl;
  useEffect(() => {
    setImgStyle(() => {
      if (!imageSize) {
        return {};
      }
      if (typeof imageSize === "number") {
        return {
          width: `${imageSize}px`,
          height: `${imageSize}px`
        };
      }
      return {
        width: imageSize,
        height: imageSize
      };
    });
  }, [imageSize]);
  const classes = classNames({
    [`${classPrefix}-${size}`]: size !== "base"
  });
  const cls = classNames(classPrefix, classes, className);
  return React__default.createElement(
    "div",
    Object.assign({ className: cls }, rest),
    React__default.createElement("div", { className: `${classPrefix}-image`, style: imgStyle }, imageNode),
    typeof title === "string" && title ? React__default.createElement("div", { className: `${classPrefix}-title` }, title) : title,
    typeof description === "string" ? React__default.createElement("div", { className: `${classPrefix}-description` }, description) : description,
    actions.length > 0 && React__default.createElement("div", { className: `${classPrefix}-actions` }, actions.map((item, index) => {
      return React__default.createElement(Button, { className: classNames({
        [`${classPrefix}-actions-right`]: actions.length === 1,
        [`${classPrefix}-actions-left`]: actions.length > 1 && index === 0
      }), type: `${actions.length > 1 && index === 0 ? "default" : "primary"}`, size: "small", fill: "outline", key: `action-${index}` }, item === null || item === void 0 ? void 0 : item.text);
    })),
    children
  );
};
Empty.displayName = "NutEmpty";
export {
  Empty as default
};