ant-design/components/tag/index.tsx

139 lines
3.5 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
2016-01-27 01:47:12 +08:00
import classNames from 'classnames';
import omit from 'omit.js';
2018-06-13 10:57:34 +08:00
import { polyfill } from 'react-lifecycles-compat';
use ant design icons 4.0 (#18217) * feat: use @ant-design/icons@4.0 * feat: use createFromIconfontCN to make site works * feat: update doc for Icon * feat: use icon in component Alert * feat: use icon in component Avatar * feat: use icon in component Breadcrumb * feat: use icon in component Button * feat: use icon in component Cascader * feat: use icon in component Collapse * feat: use icon in component Datepicker * feat: use icon in component Dropdown * feat: use icon in component Form * feat: use icon in component Input * feat: use icon in component InputNumber * feat: use icon in component Layout * feat: use icon in component Mention * feat: use icon in component Message * feat: use icon in component Modal * feat: use icon in component Notification * feat: use icon in component PageHeader * feat: use icon in component Pagination * feat: use icon in component Popconfirm * feat: use icon in component Progress * feat: use icon in component Rate * feat: use icon in component Result * feat: use icon in component Select * feat: use icon in component Step * feat: use icon in component Switch * feat: use icon in component Table * feat: use icon in component Tab * feat: use icon in component Tag * feat: handle rest component which using Icon * fix: remove unused vars * feat: use latest alpha ant design icons * fix: failed test in uploadlist.test.js * test: update snapshot for icons * doc: add Icon for site * doc: use @ant-design/icons in site * chore: use latest icons * fix: tslint issue * fix: test cases * fix: types for react * fix: lint rules for import orders * fix: use @ant-design/icons@4.0.0-alpha.5 to avoid insert css in server render * fix: eslint error in demo/**.md * inject antd icons * update snapshot * fix site * doc: update docs * fix: code snippets icon in site * feat: use latest @ant-design/icons * fix: icon props in message
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';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
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
export { CheckableTagProps } from './CheckableTag';
export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
2016-12-19 15:19:15 +08:00
prefixCls?: string;
className?: string;
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
}
const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)?$`);
const PresetStatusColorRegex = new RegExp(`^(${PresetStatusColorTypes.join('|')})$`);
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
static defaultProps = {
closable: false,
2016-07-13 11:14:24 +08:00
};
2018-12-22 19:20:38 +08:00
static getDerivedStateFromProps(nextProps: TagProps) {
if ('visible' in nextProps) {
2018-12-22 19:20:38 +08:00
return {
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>) {
const { onClose } = this.props;
2016-10-24 16:30:38 +08:00
if (onClose) {
onClose(e);
}
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;
}
return PresetColorRegex.test(color) || PresetStatusColorRegex.test(color);
}
2018-12-22 19:20:38 +08:00
renderCloseIcon() {
const { closable } = this.props;
use ant design icons 4.0 (#18217) * feat: use @ant-design/icons@4.0 * feat: use createFromIconfontCN to make site works * feat: update doc for Icon * feat: use icon in component Alert * feat: use icon in component Avatar * feat: use icon in component Breadcrumb * feat: use icon in component Button * feat: use icon in component Cascader * feat: use icon in component Collapse * feat: use icon in component Datepicker * feat: use icon in component Dropdown * feat: use icon in component Form * feat: use icon in component Input * feat: use icon in component InputNumber * feat: use icon in component Layout * feat: use icon in component Mention * feat: use icon in component Message * feat: use icon in component Modal * feat: use icon in component Notification * feat: use icon in component PageHeader * feat: use icon in component Pagination * feat: use icon in component Popconfirm * feat: use icon in component Progress * feat: use icon in component Rate * feat: use icon in component Result * feat: use icon in component Select * feat: use icon in component Step * feat: use icon in component Switch * feat: use icon in component Table * feat: use icon in component Tab * feat: use icon in component Tag * feat: handle rest component which using Icon * fix: remove unused vars * feat: use latest alpha ant design icons * fix: failed test in uploadlist.test.js * test: update snapshot for icons * doc: add Icon for site * doc: use @ant-design/icons in site * chore: use latest icons * fix: tslint issue * fix: test cases * fix: types for react * fix: lint rules for import orders * fix: use @ant-design/icons@4.0.0-alpha.5 to avoid insert css in server render * fix: eslint error in demo/**.md * inject antd icons * update snapshot * fix site * doc: update docs * fix: code snippets icon in site * feat: use latest @ant-design/icons * fix: icon props in message
2019-08-13 14:07:17 +08:00
return closable ? <Close onClick={this.handleIconClick} /> : null;
2018-12-22 19:20:38 +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>
<span
{...tagProps}
className={this.getTagClassName(configProps)}
style={this.getTagStyle()}
>
2019-04-10 21:42:35 +08:00
{children}
{this.renderCloseIcon()}
</span>
2019-04-10 21:42:35 +08:00
</Wave>
) : (
<span {...tagProps} className={this.getTagClassName(configProps)} style={this.getTagStyle()}>
2019-04-09 22:35:21 +08:00
{children}
{this.renderCloseIcon()}
</span>
2016-01-26 23:40:20 +08:00
);
2019-01-07 09:40:55 +08:00
};
render() {
2018-12-07 20:02:01 +08:00
return <ConfigConsumer>{this.renderTag}</ConfigConsumer>;
}
2015-07-28 17:08:06 +08:00
}
2018-06-13 10:57:34 +08:00
polyfill(Tag);
export default Tag;