@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
100 lines (99 loc) • 4.38 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Empty", {
enumerable: true,
get: function() {
return Empty;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _typings = require("../../utils/typings");
var _button = /*#__PURE__*/ _interop_require_default._(require("../button"));
var 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'
};
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
title: '',
description: '',
imageSize: '',
size: 'base',
status: 'empty',
actions: []
});
var classPrefix = "nut-empty";
var Empty = function Empty(props) {
var _ref = (0, _object_spread._)({}, defaultProps, props), image = _ref.image, imageSize = _ref.imageSize, title = _ref.title, description = _ref.description, children = _ref.children, className = _ref.className, size = _ref.size, status = _ref.status, actions = _ref.actions, style = _ref.style, rest = (0, _object_without_properties._)(_ref, [
"image",
"imageSize",
"title",
"description",
"children",
"className",
"size",
"status",
"actions",
"style"
]);
var _useState = (0, _sliced_to_array._)((0, _react.useState)({}), 2), imgStyle = _useState[0], setImgStyle = _useState[1];
var imageUrl = image || defaultStatus[status];
var imageNode = typeof imageUrl === 'string' ? /*#__PURE__*/ _react.default.createElement("img", {
style: {
width: '100%',
height: '100%'
},
src: imageUrl,
alt: "empty"
}) : imageUrl;
(0, _react.useEffect)(function() {
setImgStyle(function() {
if (!imageSize) {
return {};
}
if (typeof imageSize === 'number') {
return {
width: "".concat(imageSize, "px"),
height: "".concat(imageSize, "px")
};
}
return {
width: imageSize,
height: imageSize
};
});
}, [
imageSize
]);
var cls = (0, _classnames.default)(classPrefix, className);
return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
className: cls
}, rest), /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-").concat(size),
style: imgStyle
}, imageNode), typeof title === 'string' && title ? /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-title")
}, title) : title, typeof description === 'string' ? /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-description")
}, description) : description, actions.length ? /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-actions-").concat(size)
}, actions.map(function(action, index) {
var text = action.text, rest = (0, _object_without_properties._)(action, [
"text"
]);
return /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-action"),
key: index
}, /*#__PURE__*/ _react.default.createElement(_button.default, rest, action === null || action === void 0 ? void 0 : action.text));
})) : null, children);
};
Empty.displayName = 'NutEmpty';