ant-design/components/icon/index.tsx

218 lines
5.3 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
import classNames from 'classnames';
2018-09-06 23:14:14 +08:00
import * as allIcons from '@ant-design/icons/lib/dist';
2018-08-04 18:42:41 +08:00
import ReactIcon from '@ant-design/icons-react';
import createFromIconfontCN from './IconFont';
2018-09-02 19:48:57 +08:00
import {
2018-12-07 16:17:45 +08:00
svgBaseProps,
withThemeSuffix,
removeTypeTheme,
getThemeFromTypeName,
alias,
2018-09-02 19:48:57 +08:00
} from './utils';
2018-08-15 17:21:02 +08:00
import warning from '../_util/warning';
2019-01-10 18:46:57 +08:00
import LocaleReceiver from '../locale-provider/LocaleReceiver';
2018-09-01 19:44:21 +08:00
import { getTwoToneColor, setTwoToneColor } from './twoTonePrimaryColor';
2018-07-18 10:07:10 +08:00
2018-09-01 17:44:15 +08:00
// Initial setting
2018-12-07 16:17:45 +08:00
ReactIcon.add(...Object.keys(allIcons).map(key => (allIcons as any)[key]));
2018-09-01 19:44:21 +08:00
setTwoToneColor('#1890ff');
2018-09-06 21:42:06 +08:00
let defaultTheme: ThemeType = 'outlined';
let dangerousTheme: ThemeType | undefined = undefined;
2018-08-04 18:42:41 +08:00
2019-01-10 18:46:57 +08:00
export interface TransferLocale {
icon: string;
}
2018-08-15 17:21:02 +08:00
export interface CustomIconComponentProps {
width: string | number;
height: string | number;
fill: string;
2018-08-16 11:41:37 +08:00
viewBox?: string;
2018-08-15 17:21:02 +08:00
className?: string;
style?: React.CSSProperties;
spin?: boolean;
rotate?: number;
2018-08-16 11:41:37 +08:00
['aria-hidden']?: string;
2018-08-15 17:21:02 +08:00
}
2018-08-31 11:14:51 +08:00
export type ThemeType = 'filled' | 'outlined' | 'twoTone';
2018-08-30 22:53:24 +08:00
export interface IconProps {
2019-01-10 18:37:21 +08:00
tabIndex?: number;
2018-08-15 17:21:02 +08:00
type?: string;
className?: string;
2018-08-30 22:53:24 +08:00
theme?: ThemeType;
2016-08-22 17:26:14 +08:00
title?: string;
2018-08-15 17:21:02 +08:00
onClick?: React.MouseEventHandler<HTMLElement>;
component?: React.ComponentType<CustomIconComponentProps>;
2018-09-01 19:44:21 +08:00
twoToneColor?: string;
2018-08-15 17:21:02 +08:00
viewBox?: string;
spin?: boolean;
rotate?: number;
2016-10-21 16:27:26 +08:00
style?: React.CSSProperties;
2018-08-04 18:42:41 +08:00
prefixCls?: string;
2018-12-28 17:07:02 +08:00
role?: string;
}
2018-09-30 16:07:01 +08:00
export interface IconComponent<P> extends React.SFC<P> {
2018-10-22 13:35:31 +08:00
createFromIconfontCN: typeof createFromIconfontCN;
getTwoToneColor: typeof getTwoToneColor;
setTwoToneColor: typeof setTwoToneColor;
2018-09-30 16:07:01 +08:00
unstable_ChangeThemeOfIconsDangerously?: typeof unstable_ChangeThemeOfIconsDangerously;
unstable_ChangeDefaultThemeOfIcons?: typeof unstable_ChangeDefaultThemeOfIcons;
}
2018-12-07 16:17:45 +08:00
const Icon: IconComponent<IconProps> = props => {
2018-08-04 18:42:41 +08:00
const {
2018-08-15 17:21:02 +08:00
// affect outter <i>...</i>
2018-08-16 16:13:18 +08:00
className,
2018-08-15 17:21:02 +08:00
// affect inner <svg>...</svg>
type,
2018-08-16 11:41:37 +08:00
component: Component,
viewBox,
spin,
rotate,
2018-08-15 17:21:02 +08:00
2019-01-10 18:37:21 +08:00
tabIndex,
onClick,
2018-08-15 17:21:02 +08:00
// children
children,
2018-08-30 22:53:24 +08:00
// other
2018-09-01 19:44:21 +08:00
theme, // default to outlined
twoToneColor,
...restProps
2018-08-04 18:42:41 +08:00
} = props;
2018-08-15 17:21:02 +08:00
warning(
2018-08-16 11:41:37 +08:00
Boolean(type || Component || children),
2018-08-15 17:21:02 +08:00
'Icon should have `type` prop or `component` prop or `children`.',
);
2018-12-07 16:17:45 +08:00
const classString = classNames(
{
[`anticon`]: true,
[`anticon-${type}`]: Boolean(type),
},
className,
);
2018-08-04 18:42:41 +08:00
const svgClassString = classNames({
[`anticon-spin`]: !!spin || type === 'loading',
2018-09-01 20:11:13 +08:00
});
2019-01-10 18:46:57 +08:00
let innerNode: React.ReactNode;
const svgStyle = rotate
? {
msTransform: `rotate(${rotate}deg)`,
transform: `rotate(${rotate}deg)`,
}
: undefined;
const innerSvgProps: CustomIconComponentProps = {
...svgBaseProps,
className: svgClassString,
style: svgStyle,
viewBox,
};
2019-02-01 23:04:41 +08:00
if (!viewBox) {
delete innerSvgProps.viewBox;
}
2018-08-15 17:21:02 +08:00
// component > children > type
2018-08-16 11:41:37 +08:00
if (Component) {
2018-12-07 16:17:45 +08:00
innerNode = <Component {...innerSvgProps}>{children}</Component>;
2018-08-15 17:21:02 +08:00
}
if (children) {
2018-08-16 11:41:37 +08:00
warning(
2018-12-07 16:17:45 +08:00
Boolean(viewBox) ||
(React.Children.count(children) === 1 &&
React.isValidElement(children) &&
React.Children.only(children).type === 'use'),
2018-08-16 11:41:37 +08:00
'Make sure that you provide correct `viewBox`' +
2018-12-07 16:17:45 +08:00
' prop (default `0 0 1024 1024`) to the icon.',
2018-08-16 11:41:37 +08:00
);
innerNode = (
<svg {...innerSvgProps} viewBox={viewBox}>
{children}
</svg>
2018-08-15 17:21:02 +08:00
);
}
2018-08-30 22:53:24 +08:00
if (typeof type === 'string') {
let computedType = type;
if (theme) {
const themeInName = getThemeFromTypeName(type);
2018-12-07 16:17:45 +08:00
warning(
!themeInName || theme === themeInName,
`The icon name '${type}' already specify a theme '${themeInName}',` +
2018-12-07 16:17:45 +08:00
` the 'theme' prop '${theme}' will be ignored.`,
);
2018-08-30 22:53:24 +08:00
}
2018-09-02 19:48:57 +08:00
computedType = withThemeSuffix(
removeTypeTheme(alias(computedType)),
2018-09-06 21:42:06 +08:00
dangerousTheme || theme || defaultTheme,
2018-09-02 19:48:57 +08:00
);
innerNode = (
<ReactIcon
className={svgClassString}
type={computedType}
primaryColor={twoToneColor}
style={svgStyle}
/>
2018-08-15 17:21:02 +08:00
);
}
2019-01-10 18:37:21 +08:00
let iconTabIndex = tabIndex;
if (iconTabIndex === undefined && onClick) {
iconTabIndex = -1;
}
2018-08-16 11:41:37 +08:00
return (
2019-01-10 18:46:57 +08:00
<LocaleReceiver componentName="Icon">
{(locale: TransferLocale) => (
<i
aria-label={`${locale.icon}: ${type}`}
{...restProps}
tabIndex={iconTabIndex}
onClick={onClick}
className={classString}
>
{innerNode}
</i>
)}
</LocaleReceiver>
);
2017-04-06 03:41:03 +08:00
};
2017-04-06 02:50:12 +08:00
2018-09-06 21:42:06 +08:00
function unstable_ChangeThemeOfIconsDangerously(theme?: ThemeType) {
warning(
false,
`You are using the unstable method 'Icon.unstable_ChangeThemeOfAllIconsDangerously', ` +
2018-12-07 16:17:45 +08:00
`make sure that all the icons with theme '${theme}' display correctly.`,
2018-09-06 21:42:06 +08:00
);
dangerousTheme = theme;
}
function unstable_ChangeDefaultThemeOfIcons(theme: ThemeType) {
warning(
false,
`You are using the unstable method 'Icon.unstable_ChangeDefaultThemeOfIcons', ` +
2018-12-07 16:17:45 +08:00
`make sure that all the icons with theme '${theme}' display correctly.`,
2018-09-06 21:42:06 +08:00
);
defaultTheme = theme;
}
2018-09-30 16:07:01 +08:00
Icon.createFromIconfontCN = createFromIconfontCN;
Icon.getTwoToneColor = getTwoToneColor;
Icon.setTwoToneColor = setTwoToneColor;
2018-09-30 16:07:01 +08:00
export default Icon;