qt-public-ui
Version:
新设计规范下业务组件库
189 lines • 6.61 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useState } from 'react';
import { Button, Popover, Dropdown, Menu } from 'antd';
import { EllipsisOutlined, CaretRightOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import { IconSlim as Icon } from '..';
import classnames from 'classnames';
import Tips from '../Tips';
import { formatValue, emptyFun, notEmpty } from '../utils';
import './style';
var formatRatio = function formatRatio(value, valueType) {
if (valueType !== 'percent') {
return {
cls: '',
value: formatValue(valueType)(value)
};
}
var _value = parseFloat("" + value);
if (Number.isNaN(_value)) return {
cls: '',
value: value
};
var $value = 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.createElement("div", {
className: "umui-index-ratio",
key: ratio.label || index
}, ratio.label && /*#__PURE__*/React.createElement("span", {
className: "umui-index-ratio-label"
}, ratio.label), /*#__PURE__*/React.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.createElement("div", {
className: "umui-index-ratio " + cls,
key: ratio.label || index
}, ratio.label && /*#__PURE__*/React.createElement("span", {
className: "umui-index-ratio-label"
}, ratio.label), /*#__PURE__*/React.createElement("span", {
className: "umui-index-ratio-value umui-number"
}, _value), icon && /*#__PURE__*/React.createElement(Icon, {
type: icon,
className: "umui-index-ratio-icon"
}));
}
return ratio.hint ? /*#__PURE__*/React.createElement(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.createElement("div", {
className: "um-index-desc-wrapper"
}, /*#__PURE__*/React.createElement("div", {
className: "umui-index-desc"
}, desc), button && /*#__PURE__*/React.createElement(Button, button));
}
return /*#__PURE__*/React.createElement(React.Fragment, {
key: i
}, /*#__PURE__*/React.createElement("div", {
className: "umui-index-top"
}, /*#__PURE__*/React.createElement("span", {
className: "umui-index-title",
title: title
}, title), tips && /*#__PURE__*/React.createElement(Tips, _extends({}, tips, {
placement: "top"
})), Array.isArray(links) && links.length && /*#__PURE__*/React.createElement("div", {
className: "umui-index-links"
}, /*#__PURE__*/React.createElement(CaretRightOutlined, {
className: "umui-index-links-icon"
}), links.map(function (link) {
return /*#__PURE__*/React.createElement(Link, {
to: link.url
}, link.label);
}))), /*#__PURE__*/React.createElement("div", {
className: "umui-index-content"
}, notEmpty(value) && /*#__PURE__*/React.createElement("div", {
className: "umui-index-value"
}, formatValue(valueType || 'number')(value)), ratios && /*#__PURE__*/React.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 = useState(false),
isShowAction = _useState[0],
setIsShowAction = _useState[1];
var onCardClick = function onCardClick() {
onClick && onClick(id);
};
var cls = classnames('umui-index-card', className, {
'umui-active': isActive,
'umui-multi': type === 'pairs',
'umui-simple': type === 'simple',
'umui-disabled': disabled
});
if (render) {
return /*#__PURE__*/React.createElement("div", {
className: cls,
onClick: disabled ? emptyFun : onCardClick
}, render, isActive && hasHook && /*#__PURE__*/React.createElement(Icon, {
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.createElement("div", {
className: cls,
onClick: disabled ? emptyFun : onCardClick,
onMouseEnter: function onMouseEnter() {
return setIsShowAction(true);
},
onMouseLeave: function onMouseLeave() {
return setIsShowAction(false);
}
}, action && Array.isArray(action) && /*#__PURE__*/React.createElement(Dropdown, {
placement: "bottomCenter",
className: "umui-indicator-action",
overlayClassName: "umui-indicator-action-menu",
overlay: /*#__PURE__*/React.createElement(Menu, {
onClick: function onClick(e) {
return onClickAction(e.key);
}
}, action.map(function (item) {
return /*#__PURE__*/React.createElement(Menu.Item, {
onClick: function onClick(e) {
return e.domEvent.stopPropagation();
},
key: item.key
}, item.name);
}))
}, /*#__PURE__*/React.createElement(EllipsisOutlined, {
className: classnames({
'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.createElement(Icon, {
className: "umui-multi-hook",
type: "umicon-hook"
}));
};
export default IndexCard;