qt-public-ui
Version:
新设计规范下业务组件库
201 lines (200 loc) • 8.46 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _antd = require("antd");
var _icons = require("@ant-design/icons");
var _reactRouterDom = require("react-router-dom");
var _ = require("..");
var _classnames = _interopRequireDefault(require("classnames"));
var _Tips = _interopRequireDefault(require("../Tips"));
var _utils = require("../utils");
require("./style");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var formatRatio = function formatRatio(value, valueType) {
if (valueType !== 'percent') {
return {
cls: '',
value: (0, _utils.formatValue)(valueType)(value)
};
}
var _value = parseFloat("".concat(value));
if (Number.isNaN(_value)) return {
cls: '',
value: value
};
var $value = (0, _utils.formatValue)('percent')(value);
if (value > 0) return {
cls: 'umui-positive',
value: $value,
icon: 'umicon-increase'
};else if (value === 0) return {
cls: 'umui-zero',
value: $value
};else return {
cls: 'umui-negative',
value: $value,
icon: 'umicon-decrease'
};
};
var renderRatios = function renderRatios(ratio, index) {
var radioContent = null;
if (ratio.render) {
radioContent = /*#__PURE__*/_react["default"].createElement("div", {
className: "umui-index-ratio",
key: ratio.label || index
}, ratio.label && /*#__PURE__*/_react["default"].createElement("span", {
className: "umui-index-ratio-label"
}, ratio.label), /*#__PURE__*/_react["default"].createElement("span", {
className: "umui-index-ratio-render"
}, ratio.render));
} else {
var _formatRatio = formatRatio(ratio.value, ratio.valueType || 'percent'),
cls = _formatRatio.cls,
_value = _formatRatio.value,
icon = _formatRatio.icon;
radioContent = /*#__PURE__*/_react["default"].createElement("div", {
className: "umui-index-ratio ".concat(cls),
key: ratio.label || index
}, ratio.label && /*#__PURE__*/_react["default"].createElement("span", {
className: "umui-index-ratio-label"
}, ratio.label), /*#__PURE__*/_react["default"].createElement("span", {
className: "umui-index-ratio-value umui-number"
}, _value), icon && /*#__PURE__*/_react["default"].createElement(_.IconSlim, {
type: icon,
className: "umui-index-ratio-icon"
}));
}
return ratio.hint ? /*#__PURE__*/_react["default"].createElement(_antd.Popover, {
content: ratio.hint,
placement: "top",
key: ratio.label
}, radioContent) : radioContent;
};
var renderItemIndex = function renderItemIndex(datum, i) {
var _ref = datum,
desc = _ref.desc,
button = _ref.button;
var _ref2 = datum,
tips = _ref2.tips,
title = _ref2.title,
value = _ref2.value,
ratios = _ref2.ratios,
links = _ref2.links,
valueType = _ref2.valueType;
if ('desc' in datum) {
return /*#__PURE__*/_react["default"].createElement("div", {
className: "um-index-desc-wrapper"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "umui-index-desc"
}, desc), button && /*#__PURE__*/_react["default"].createElement(_antd.Button, button));
}
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
key: i
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "umui-index-top"
}, /*#__PURE__*/_react["default"].createElement("span", {
className: "umui-index-title",
title: title
}, title), tips && /*#__PURE__*/_react["default"].createElement(_Tips["default"], (0, _extends2["default"])({}, tips, {
placement: "top"
})), Array.isArray(links) && links.length && /*#__PURE__*/_react["default"].createElement("div", {
className: "umui-index-links"
}, /*#__PURE__*/_react["default"].createElement(_icons.CaretRightOutlined, {
className: "umui-index-links-icon"
}), links.map(function (link) {
return /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, {
to: link.url
}, link.label);
}))), /*#__PURE__*/_react["default"].createElement("div", {
className: "umui-index-content"
}, (0, _utils.notEmpty)(value) && /*#__PURE__*/_react["default"].createElement("div", {
className: "umui-index-value"
}, (0, _utils.formatValue)(valueType || 'number')(value)), ratios && /*#__PURE__*/_react["default"].createElement("div", {
className: "umui-index-ratios"
}, ratios.map(renderRatios))));
};
var IndexCard = function IndexCard(props) {
var data = props.data,
id = props.id,
render = props.render,
onClick = props.onClick,
isActive = props.isActive,
disabled = props.disabled,
_props$type = props.type,
type = _props$type === void 0 ? 'default' : _props$type,
hasHook = props.hasHook,
className = props.className,
action = props.action;
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
isShowAction = _useState2[0],
setIsShowAction = _useState2[1];
var onCardClick = function onCardClick() {
onClick && onClick(id);
};
var cls = (0, _classnames["default"])('umui-index-card', className, {
'umui-active': isActive,
'umui-multi': type === 'pairs',
'umui-simple': type === 'simple',
'umui-disabled': disabled
});
if (render) {
return /*#__PURE__*/_react["default"].createElement("div", {
className: cls,
onClick: disabled ? _utils.emptyFun : onCardClick
}, render, isActive && hasHook && /*#__PURE__*/_react["default"].createElement(_.IconSlim, {
className: "umui-multi-hook",
type: "umicon-hook"
}));
}
if (!Array.isArray(data) || data.length === 0) return null;
var onClickAction = function onClickAction(key) {
props.onClickAction && props.onClickAction(key, data);
};
return /*#__PURE__*/_react["default"].createElement("div", {
className: cls,
onClick: disabled ? _utils.emptyFun : onCardClick,
onMouseEnter: function onMouseEnter() {
return setIsShowAction(true);
},
onMouseLeave: function onMouseLeave() {
return setIsShowAction(false);
}
}, action && Array.isArray(action) && /*#__PURE__*/_react["default"].createElement(_antd.Dropdown, {
placement: "bottomCenter",
className: "umui-indicator-action",
overlayClassName: "umui-indicator-action-menu",
overlay: /*#__PURE__*/_react["default"].createElement(_antd.Menu, {
onClick: function onClick(e) {
return onClickAction(e.key);
}
}, action.map(function (item) {
return /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, {
onClick: function onClick(e) {
return e.domEvent.stopPropagation();
},
key: item.key
}, item.name);
}))
}, /*#__PURE__*/_react["default"].createElement(_icons.EllipsisOutlined, {
className: (0, _classnames["default"])({
'umui-indicator-action-icon': isShowAction,
'umui-indicator-action-icon-none': !isShowAction
}),
onClick: function onClick(e) {
return e.stopPropagation();
}
})), data.map(renderItemIndex), isActive && hasHook && /*#__PURE__*/_react["default"].createElement(_.IconSlim, {
className: "umui-multi-hook",
type: "umicon-hook"
}));
};
var _default = exports["default"] = IndexCard;