chowa
Version:
UI component library based on React
69 lines (68 loc) • 2.88 kB
JavaScript
/**
* @license chowa v1.1.3
*
* Copyright (c) Chowa Techonlogies Co.,Ltd.(http://www.chowa.cn).
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const PropTypes = require("prop-types");
const classnames_1 = require("classnames");
const transition_1 = require("../transition");
const utils_1 = require("../utils");
function getCountUnits(count, overflowCount) {
const units = [];
const countStr = overflowCount < count ? String(overflowCount) : String(count);
for (let i = 0; i < countStr.length; i++) {
if (overflowCount < count) {
units.push(9);
}
else {
units.push(Number(countStr.charAt(i)));
}
}
return units;
}
const Badge = (props) => {
const { children, className, style, count, theme, dot, overflowCount } = props;
const units = getCountUnits(count, overflowCount);
const numbersNodes = [];
for (let i = 0; i < 10; i++) {
numbersNodes.push(React.createElement("dd", { key: i, className: utils_1.preClass('badge-number') }, i));
}
const componentClass = classnames_1.default({
[utils_1.preClass('badge')]: true,
[utils_1.preClass('badge-with-children')]: utils_1.isExist(children),
[utils_1.preClass(`badge-${theme}`)]: true,
[utils_1.preClass('badge-dot')]: dot,
[className]: utils_1.isExist(className)
});
return (React.createElement("span", { className: utils_1.preClass('badge-wrapper') },
children,
React.createElement(transition_1.default, { appear: utils_1.preClass('badge-appear'), enter: utils_1.preClass('badge-enter'), leave: utils_1.preClass('badge-leave'), visible: count > 0 },
React.createElement("sup", { style: style, className: componentClass }, !dot &&
React.createElement("ul", { className: utils_1.preClass('badge-unit-container') },
units.map((num, index) => {
return (React.createElement("li", { key: index, className: utils_1.preClass('badge-unit'), style: { transform: `translateY(${-num * 20}px)` } },
React.createElement("dl", { className: utils_1.preClass('badge-numbers') }, numbersNodes)));
}),
overflowCount < count && React.createElement("li", null, "+"))))));
};
Badge.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
count: PropTypes.number,
overflowCount: PropTypes.number,
theme: PropTypes.oneOf(['primary', 'danger', 'dark', 'warning']),
dot: PropTypes.bool
};
Badge.defaultProps = {
count: 0,
overflowCount: 999,
theme: 'dark',
dot: false
};
exports.default = Badge;