2017-11-17 14:38:54 +08:00
|
|
|
import * as React from 'react';
|
2016-01-27 01:47:12 +08:00
|
|
|
import classNames from 'classnames';
|
2016-09-10 17:17:55 +08:00
|
|
|
import omit from 'omit.js';
|
2018-06-13 10:57:34 +08:00
|
|
|
import { polyfill } from 'react-lifecycles-compat';
|
2019-08-13 14:07:17 +08:00
|
|
|
import { Close } from '@ant-design/icons';
|
|
|
|
|
2016-11-10 11:14:03 +08:00
|
|
|
import CheckableTag from './CheckableTag';
|
2018-12-05 19:12:18 +08:00
|
|
|
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
2019-10-25 23:17:25 +08:00
|
|
|
import { PresetColorTypes, PresetStatusColorTypes } from '../_util/colors';
|
2019-04-10 21:42:35 +08:00
|
|
|
import Wave from '../_util/wave';
|
2015-08-21 17:12:42 +08:00
|
|
|
|
2017-09-25 22:14:49 +08:00
|
|
|
export { CheckableTagProps } from './CheckableTag';
|
|
|
|
|
2019-07-30 11:46:10 +08:00
|
|
|
export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
|
2016-12-19 15:19:15 +08:00
|
|
|
prefixCls?: string;
|
|
|
|
className?: string;
|
2016-11-10 10:29:06 +08:00
|
|
|
color?: string;
|
2016-07-13 11:14:24 +08:00
|
|
|
closable?: boolean;
|
2018-06-12 22:23:04 +08:00
|
|
|
visible?: boolean;
|
2016-07-13 11:14:24 +08:00
|
|
|
onClose?: Function;
|
|
|
|
style?: React.CSSProperties;
|
2016-07-09 10:52:16 +08:00
|
|
|
}
|
2016-07-13 11:14:24 +08:00
|
|
|
|
2018-12-22 19:20:38 +08:00
|
|
|
interface TagState {
|
2018-06-12 22:23:04 +08:00
|
|
|
visible: boolean;
|
2017-07-31 00:42:25 +08:00
|
|
|
}
|
|
|
|
|
2019-03-31 20:21:20 +08:00
|
|
|
const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)?$`);
|
2019-10-25 23:17:25 +08:00
|
|
|
const PresetStatusColorRegex = new RegExp(`^(${PresetStatusColorTypes.join('|')})$`);
|
2019-03-31 20:21:20 +08:00
|
|
|
|
2018-06-13 10:57:34 +08:00
|
|
|
class Tag extends React.Component<TagProps, TagState> {
|
2016-11-10 11:14:03 +08:00
|
|
|
static CheckableTag = CheckableTag;
|
2019-08-05 18:38:10 +08:00
|
|
|
|
2016-03-29 14:01:10 +08:00
|
|
|
static defaultProps = {
|
|
|
|
closable: false,
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2016-03-29 14:01:10 +08:00
|
|
|
|
2018-12-22 19:20:38 +08:00
|
|
|
static getDerivedStateFromProps(nextProps: TagProps) {
|
2018-08-18 14:29:25 +08:00
|
|
|
if ('visible' in nextProps) {
|
2018-12-22 19:20:38 +08:00
|
|
|
return {
|
2018-08-18 14:29:25 +08:00
|
|
|
visible: nextProps.visible,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
return null;
|
2018-06-12 22:23:04 +08:00
|
|
|
}
|
2015-07-30 23:52:44 +08:00
|
|
|
|
2018-06-12 22:23:04 +08:00
|
|
|
state = {
|
|
|
|
visible: true,
|
|
|
|
};
|
|
|
|
|
2019-08-05 18:38:10 +08:00
|
|
|
getTagStyle() {
|
|
|
|
const { color, style } = this.props;
|
|
|
|
const isPresetColor = this.isPresetColor();
|
|
|
|
return {
|
|
|
|
backgroundColor: color && !isPresetColor ? color : undefined,
|
|
|
|
...style,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
getTagClassName({ getPrefixCls }: ConfigConsumerProps) {
|
|
|
|
const { prefixCls: customizePrefixCls, className, color } = this.props;
|
|
|
|
const { visible } = this.state;
|
|
|
|
const isPresetColor = this.isPresetColor();
|
|
|
|
const prefixCls = getPrefixCls('tag', customizePrefixCls);
|
|
|
|
return classNames(
|
|
|
|
prefixCls,
|
|
|
|
{
|
|
|
|
[`${prefixCls}-${color}`]: isPresetColor,
|
|
|
|
[`${prefixCls}-has-color`]: color && !isPresetColor,
|
|
|
|
[`${prefixCls}-hidden`]: !visible,
|
|
|
|
},
|
|
|
|
className,
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2018-12-22 19:20:38 +08:00
|
|
|
setVisible(visible: boolean, e: React.MouseEvent<HTMLElement>) {
|
2019-07-09 11:46:21 +08:00
|
|
|
const { onClose } = this.props;
|
2016-10-24 16:30:38 +08:00
|
|
|
if (onClose) {
|
|
|
|
onClose(e);
|
|
|
|
}
|
2019-07-09 11:46:21 +08:00
|
|
|
|
2018-12-22 19:20:38 +08:00
|
|
|
if (e.defaultPrevented) {
|
2018-06-12 22:23:04 +08:00
|
|
|
return;
|
|
|
|
}
|
2018-12-22 19:20:38 +08:00
|
|
|
if (!('visible' in this.props)) {
|
|
|
|
this.setState({ visible });
|
2016-07-13 11:14:24 +08:00
|
|
|
}
|
2018-12-22 19:20:38 +08:00
|
|
|
}
|
2015-08-21 17:27:29 +08:00
|
|
|
|
2018-12-22 19:20:38 +08:00
|
|
|
handleIconClick = (e: React.MouseEvent<HTMLElement>) => {
|
|
|
|
this.setVisible(false, e);
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2018-06-12 22:23:04 +08:00
|
|
|
|
2019-08-05 18:38:10 +08:00
|
|
|
isPresetColor(): boolean {
|
|
|
|
const { color } = this.props;
|
2018-12-07 20:02:01 +08:00
|
|
|
if (!color) {
|
|
|
|
return false;
|
|
|
|
}
|
2019-10-25 23:17:25 +08:00
|
|
|
return PresetColorRegex.test(color) || PresetStatusColorRegex.test(color);
|
2017-01-13 21:25:55 +08:00
|
|
|
}
|
|
|
|
|
2018-12-22 19:20:38 +08:00
|
|
|
renderCloseIcon() {
|
|
|
|
const { closable } = this.props;
|
2019-08-13 14:07:17 +08:00
|
|
|
return closable ? <Close onClick={this.handleIconClick} /> : null;
|
2018-12-22 19:20:38 +08:00
|
|
|
}
|
2018-08-18 14:29:25 +08:00
|
|
|
|
2018-12-26 16:01:00 +08:00
|
|
|
renderTag = (configProps: ConfigConsumerProps) => {
|
2019-08-05 18:38:10 +08:00
|
|
|
const { children, ...otherProps } = this.props;
|
2019-04-10 21:42:35 +08:00
|
|
|
const isNeedWave =
|
|
|
|
'onClick' in otherProps || (children && (children as React.ReactElement<any>).type === 'a');
|
2019-08-06 17:46:53 +08:00
|
|
|
const tagProps = omit(otherProps, ['onClose', 'color', 'visible', 'closable', 'prefixCls']);
|
2019-04-10 21:42:35 +08:00
|
|
|
return isNeedWave ? (
|
|
|
|
<Wave>
|
2019-07-30 11:46:10 +08:00
|
|
|
<span
|
|
|
|
{...tagProps}
|
|
|
|
className={this.getTagClassName(configProps)}
|
|
|
|
style={this.getTagStyle()}
|
|
|
|
>
|
2019-04-10 21:42:35 +08:00
|
|
|
{children}
|
|
|
|
{this.renderCloseIcon()}
|
2019-07-30 11:46:10 +08:00
|
|
|
</span>
|
2019-04-10 21:42:35 +08:00
|
|
|
</Wave>
|
|
|
|
) : (
|
2019-07-30 11:46:10 +08:00
|
|
|
<span {...tagProps} className={this.getTagClassName(configProps)} style={this.getTagStyle()}>
|
2019-04-09 22:35:21 +08:00
|
|
|
{children}
|
|
|
|
{this.renderCloseIcon()}
|
2019-07-30 11:46:10 +08:00
|
|
|
</span>
|
2016-01-26 23:40:20 +08:00
|
|
|
);
|
2019-01-07 09:40:55 +08:00
|
|
|
};
|
2018-12-05 19:12:18 +08:00
|
|
|
|
|
|
|
render() {
|
2018-12-07 20:02:01 +08:00
|
|
|
return <ConfigConsumer>{this.renderTag}</ConfigConsumer>;
|
2018-12-05 19:12:18 +08:00
|
|
|
}
|
2015-07-28 17:08:06 +08:00
|
|
|
}
|
2018-06-13 10:57:34 +08:00
|
|
|
|
|
|
|
polyfill(Tag);
|
|
|
|
|
|
|
|
export default Tag;
|