You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
195 lines
8.2 KiB
195 lines
8.2 KiB
"use strict";
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = exports.MESSAGES = exports.renderAvatar = void 0;
|
|
|
|
var _react = _interopRequireDefault(require("react"));
|
|
|
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
|
var _reactMasonryComponent = _interopRequireDefault(require("react-masonry-component"));
|
|
|
|
var _isPlainObject = _interopRequireDefault(require("lodash/isPlainObject"));
|
|
|
|
var _antd = require("antd");
|
|
|
|
var _context = _interopRequireDefault(require("./context"));
|
|
|
|
var _indexModule = _interopRequireDefault(require("./index.module.less"));
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
|
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
|
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
|
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
|
|
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
|
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
|
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
|
|
var useCallback = _react.default.useCallback,
|
|
useEffect = _react.default.useEffect;
|
|
|
|
var renderAvatar = function renderAvatar(item) {
|
|
var isMini = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
var icon = item.icon,
|
|
title = item.title,
|
|
_item$backgroundColor = item.backgroundColor,
|
|
backgroundColor = _item$backgroundColor === void 0 ? '#459BF7' : _item$backgroundColor;
|
|
var commonAvatarProps = {
|
|
style: {
|
|
backgroundColor: backgroundColor
|
|
},
|
|
shape: 'square',
|
|
className: _indexModule.default.avatar,
|
|
size: isMini ? 'small' : 'default'
|
|
};
|
|
|
|
if (_react.default.isValidElement(icon)) {
|
|
return /*#__PURE__*/_react.default.createElement(_antd.Avatar, _extends({}, commonAvatarProps, {
|
|
icon: icon
|
|
}));
|
|
}
|
|
|
|
if (typeof icon === 'string') {
|
|
return /*#__PURE__*/_react.default.createElement(_antd.Avatar, _extends({}, commonAvatarProps, {
|
|
src: icon
|
|
}));
|
|
}
|
|
|
|
if ((0, _isPlainObject.default)(icon)) {
|
|
return /*#__PURE__*/_react.default.createElement(_antd.Avatar, _extends({}, commonAvatarProps, icon));
|
|
} // 默认返回 title 第一个字符
|
|
|
|
|
|
var defaultChar = typeof title === 'string' ? title.charAt(0) : 'Umi';
|
|
|
|
if (defaultChar) {
|
|
return /*#__PURE__*/_react.default.createElement(_antd.Avatar, commonAvatarProps, defaultChar);
|
|
}
|
|
};
|
|
|
|
exports.renderAvatar = renderAvatar;
|
|
var MESSAGES = {
|
|
CHANGE_CARDS: Symbol('CHANGE_CARDS')
|
|
};
|
|
exports.MESSAGES = MESSAGES;
|
|
|
|
var DashboardUI = function DashboardUI(props) {
|
|
// const isClosed = window.localStorage.getItem('umi_ui_dashboard_welcome') || false;
|
|
// const [closed, setClosed] = useState<boolean>(!!isClosed);
|
|
var _React$useContext = _react.default.useContext(_context.default),
|
|
api = _React$useContext.api,
|
|
loading = _React$useContext.loading,
|
|
dashboardCards = _React$useContext.dashboardCards,
|
|
setCardSettings = _React$useContext.setCardSettings;
|
|
|
|
var event = api.event,
|
|
currentProject = api.currentProject,
|
|
_api$getBasicUI = api.getBasicUI,
|
|
getBasicUI = _api$getBasicUI === void 0 ? function () {
|
|
return {};
|
|
} : _api$getBasicUI;
|
|
|
|
var _React$useState = _react.default.useState(),
|
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
updateState = _React$useState2[1];
|
|
|
|
var forceUpdate = useCallback(function () {
|
|
return updateState({});
|
|
}, []);
|
|
var actionCardCls = (0, _classnames.default)(_indexModule.default.card, _indexModule.default['card-action']);
|
|
var welcomeCardCls = (0, _classnames.default)(_indexModule.default.card, _indexModule.default.welcome);
|
|
var basicUI = getBasicUI();
|
|
var containerCls = (0, _classnames.default)(_indexModule.default['container-row'], 'ant-row', 'ant-row-flex');
|
|
|
|
var renderCard = function renderCard(content) {
|
|
var childProps = {
|
|
// 用于动态卡片 DidMount 后，重新计算瀑布流
|
|
forceUpdate: forceUpdate
|
|
};
|
|
|
|
if (Array.isArray(content)) {
|
|
// 横向排列快捷入口
|
|
return /*#__PURE__*/_react.default.createElement(_antd.Row, {
|
|
className: _indexModule.default['content-row']
|
|
}, _react.default.Children.map(content, function (child, i) {
|
|
return /*#__PURE__*/_react.default.createElement(_antd.Col, {
|
|
className: _indexModule.default['content-col'],
|
|
key: i.toString(),
|
|
span: Math.floor(24 / content.length)
|
|
}, child);
|
|
}));
|
|
}
|
|
|
|
if (_react.default.isValidElement(content)) {
|
|
return _react.default.cloneElement(content, childProps);
|
|
}
|
|
};
|
|
|
|
useEffect(function () {
|
|
event.on(MESSAGES.CHANGE_CARDS, setCardSettings);
|
|
return function () {
|
|
event.off(MESSAGES.CHANGE_CARDS, setCardSettings);
|
|
};
|
|
}, []);
|
|
var enableCards = (dashboardCards || []).filter(function (card) {
|
|
return !!card.enable;
|
|
});
|
|
|
|
if (loading) {
|
|
return /*#__PURE__*/_react.default.createElement(_antd.Spin, null);
|
|
}
|
|
|
|
var colCls = (0, _classnames.default)(actionCardCls, _indexModule.default['container-col']);
|
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
className: _indexModule.default.container
|
|
}, /*#__PURE__*/_react.default.createElement(_reactMasonryComponent.default, {
|
|
className: containerCls
|
|
}, enableCards.map(function (card) {
|
|
var _card$title = card.title,
|
|
title = _card$title === void 0 ? '' : _card$title,
|
|
description = card.description,
|
|
key = card.key,
|
|
content = card.content,
|
|
right = card.right,
|
|
colClassName = card.colClassName;
|
|
|
|
var Title = /*#__PURE__*/_react.default.createElement(_antd.Row, {
|
|
className: _indexModule.default.main,
|
|
gutter: 16,
|
|
align: "top",
|
|
justify: "space-between"
|
|
}, /*#__PURE__*/_react.default.createElement(_antd.Col, {
|
|
className: _indexModule.default['main-col']
|
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
className: (0, _classnames.default)(_indexModule.default.icon)
|
|
}, renderAvatar(card, api.mini)), /*#__PURE__*/_react.default.createElement("div", {
|
|
className: _indexModule.default.info
|
|
}, /*#__PURE__*/_react.default.createElement("h4", null, title), description && /*#__PURE__*/_react.default.createElement("p", null, description))), right && /*#__PURE__*/_react.default.createElement("div", {
|
|
className: _indexModule.default.right
|
|
}, right));
|
|
|
|
var cardColCls = (0, _classnames.default)(colCls, colClassName);
|
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
key: key,
|
|
className: cardColCls
|
|
}, /*#__PURE__*/_react.default.createElement(_antd.Card, {
|
|
title: Title,
|
|
className: _indexModule.default.card,
|
|
bordered: false,
|
|
hoverable: false
|
|
}, renderCard(content)));
|
|
})));
|
|
};
|
|
|
|
var _default = DashboardUI;
|
|
exports.default = _default; |