test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 02:59:04 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

add unstable methods

Browse Source
This commit is contained in:
HeskeyBaozi 2018-09-06 21:42:06 +08:00 committed by 偏右
parent ace857d8bf
commit 71baf32151
2 changed files with 41 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/icon/index.tsx
View File

@ -13,6 +13,8 @@ import { getTwoToneColor, setTwoToneColor } from './twoTonePrimaryColor';
// Initial setting
ReactIcon.add(...Object.keys(allIcons).map((key) => (allIcons as any)[key]));
setTwoToneColor('#1890ff');
let defaultTheme: ThemeType = 'outlined';
let dangerousTheme: ThemeType | undefined = undefined;
export interface CustomIconComponentProps {
width: string | number;
@ -122,7 +124,7 @@ const Icon: React.SFC<IconProps> = (props) => {
}
computedType = withThemeSuffix(
removeTypeTheme(type),
theme || 'outlined',
dangerousTheme || theme || defaultTheme,
);
innerNode = (
<ReactIcon
@ -144,8 +146,28 @@ export type IconType = typeof Icon & {
createFromIconfontCN: typeof createFromIconfontCN;
getTwoToneColor: typeof getTwoToneColor;
setTwoToneColor: typeof setTwoToneColor;
unstable_ChangeThemeOfIconsDangerously: typeof unstable_ChangeThemeOfIconsDangerously;
unstable_ChangeDefaultThemeOfIcons: typeof unstable_ChangeDefaultThemeOfIcons;
};
function unstable_ChangeThemeOfIconsDangerously(theme?: ThemeType) {
warning(
false,
`You are using the unstable method 'Icon.unstable_ChangeThemeOfAllIconsDangerously', ` +
`make sure that all the icons with theme '${theme}' display correctly.`,
);
dangerousTheme = theme;
}
function unstable_ChangeDefaultThemeOfIcons(theme: ThemeType) {
warning(
false,
`You are using the unstable method 'Icon.unstable_ChangeDefaultThemeOfIcons', ` +
`make sure that all the icons with theme '${theme}' display correctly.`,
);
defaultTheme = theme;
}
Icon.displayName = 'Icon';
(Icon as IconType).createFromIconfontCN = createFromIconfontCN;
(Icon as IconType).getTwoToneColor = getTwoToneColor;

34
components/icon/utils.ts
View File

@ -1,13 +1,12 @@
import { ThemeType } from './index';
import warning from '../_util/warning';
import { ThemeType } from "./index";
// These props make sure that the SVG behaviours like general text.
// Reference: https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
export const svgBaseProps = {
width: '1em',
height: '1em',
fill: 'currentColor',
['aria-hidden']: 'true',
width: "1em",
height: "1em",
fill: "currentColor",
["aria-hidden"]: "true",
};
const fillTester = /-fill$/;
@ -17,27 +16,30 @@ const twoToneTester = /-twotone$/;
export function getThemeFromTypeName(type: string): ThemeType | null {
let result: ThemeType | null = null;
if (fillTester.test(type)) {
result = 'filled';
result = "filled";
} else if (outlineTester.test(type)) {
result = 'outlined';
result = "outlined";
} else if (twoToneTester.test(type)) {
result = 'twoTone';
result = "twoTone";
}
return result;
}
export function removeTypeTheme(type: string) {
return type.replace(fillTester, '').replace(outlineTester, '').replace(twoToneTester, '');
return type
.replace(fillTester, "")
.replace(outlineTester, "")
.replace(twoToneTester, "");
}
export function withThemeSuffix(type: string, theme: ThemeType) {
let result = type;
if (theme === 'filled') {
result += '-fill';
} else if (theme === 'outlined') {
result += '-o';
} else if (theme === 'twoTone') {
result += '-twotone';
if (theme === "filled") {
result += "-fill";
} else if (theme === "outlined") {
result += "-o";
} else if (theme === "twoTone") {
result += "-twotone";
} else {
warning(false, `This icon '${type}' has unknown theme '${theme}'`);
}