@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
81 lines (80 loc) • 3.88 kB
JavaScript
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import React, { useEffect, useState } from "react";
import classNames from "classnames";
import { View, Image } from "@tarojs/components";
import { ComponentDefaults } from "../../utils/typings";
import { Button } from "../button/button";
import { getEmptyStatusImage } from "../../types";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
title: '',
description: '',
imageSize: '',
size: 'half',
status: 'network',
actions: []
});
var classPrefix = "nut-empty";
export var Empty = function Empty(props) {
var _$_object_spread = _object_spread({}, defaultProps, props), image = _$_object_spread.image, imageSize = _$_object_spread.imageSize, title = _$_object_spread.title, description = _$_object_spread.description, children = _$_object_spread.children, className = _$_object_spread.className, size = _$_object_spread.size, status = _$_object_spread.status, actions = _$_object_spread.actions, style = _$_object_spread.style;
var _useState = _sliced_to_array(useState({}), 2), imgStyle = _useState[0], setImgStyle = _useState[1];
var imageUrl = image || getEmptyStatusImage(status);
var imageNode = typeof imageUrl === 'string' ? /*#__PURE__*/ React.createElement(Image, {
style: {
width: '100%',
height: '100%'
},
src: imageUrl
}) : imageUrl;
useEffect(function() {
setImgStyle(function() {
if (!imageSize) {
return {};
}
if (typeof imageSize !== 'number') {
return {
width: imageSize,
height: imageSize
};
}
return {
width: "".concat(imageSize, "px"),
height: "".concat(imageSize, "px")
};
});
}, [
imageSize
]);
var cls = classNames(classPrefix, "".concat(classPrefix, "--").concat(size), className);
var imageBlock = /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-image"),
style: imgStyle
}, imageNode);
var titleBlock = typeof title === 'string' && title ? /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-title")
}, title) : title;
var descriptionBlock = typeof description === 'string' ? /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-description")
}, description) : description;
return /*#__PURE__*/ React.createElement(View, {
className: cls,
style: style
}, size === 'partial' ? /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-partial-body")
}, imageBlock, /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-content")
}, titleBlock, descriptionBlock)) : /*#__PURE__*/ React.createElement(React.Fragment, null, imageBlock, titleBlock, descriptionBlock), actions.length ? /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-actions")
}, actions.map(function(action, index) {
var text = action.text, rest = _object_without_properties(action, [
"text"
]);
return /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-action"),
key: index
}, /*#__PURE__*/ React.createElement(Button, rest, action === null || action === void 0 ? void 0 : action.text));
})) : null, children);
};
Empty.displayName = 'NutEmpty';