chowa
Version:
UI component library based on React
91 lines (90 loc) • 3.4 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.
*/
;
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const PropTypes = require("prop-types");
const classnames_1 = require("classnames");
const utils_1 = require("../utils");
const icon_1 = require("../icon");
const recommend = ['primary', 'info', 'success', 'error', 'warning', 'cyan', 'geekblue'];
class Tag extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
result: props.checked
};
[
'onChangeHandler',
'onCloseHandler'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
onChangeHandler(e) {
this.setState({
result: e.target.checked
}, () => {
if (this.props.onChange) {
this.props.onChange(e);
}
});
}
onCloseHandler(e) {
if (this.props.onClose) {
this.props.onClose(e);
}
}
componentDidUpdate(preProps) {
if (preProps.checked !== this.props.checked && this.props.checked !== this.state.result) {
this.setState({ result: this.props.checked });
}
}
render() {
const { children, className, style, closable, color, checkable, disabled } = this.props;
const { result } = this.state;
const inRecommend = recommend.includes(color);
const useCustomColor = utils_1.isExist(color) && !inRecommend;
const componentClass = classnames_1.default({
[utils_1.preClass('tag')]: true,
[utils_1.preClass(`tag-${color}`)]: inRecommend,
[utils_1.preClass('tag-custom-color')]: useCustomColor,
[utils_1.preClass('tag-checkable')]: checkable,
[utils_1.preClass('tag-disabled')]: disabled,
[utils_1.preClass('tag-checked')]: result,
[className]: utils_1.isExist(className)
});
const componentStyle = Object.assign(Object.assign({}, style), (useCustomColor ? { backgroundColor: color, borderColor: color } : {}));
return (React.createElement("label", { className: componentClass, style: componentStyle },
checkable &&
React.createElement("input", { type: 'checkbox', onChange: this.onChangeHandler, checked: result, disabled: disabled, className: utils_1.preClass('tag-input') }),
React.createElement("span", { className: utils_1.preClass('tag-inner') }, children),
closable && !disabled &&
React.createElement("button", { onClick: this.onCloseHandler, tabIndex: -1, className: utils_1.preClass('tag-close') },
React.createElement(icon_1.default, { type: 'close' }))));
}
}
Tag.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
closable: PropTypes.bool,
checkable: PropTypes.bool,
checked: PropTypes.bool,
disabled: PropTypes.bool,
color: PropTypes.string,
onChange: PropTypes.func,
onClose: PropTypes.func
};
Tag.defaultProps = {
closable: false,
checkable: false,
disabled: false,
checked: false
};
exports.default = Tag;