55 | >;
56 | children?: React.ReactNode;
57 | }
58 |
59 | export interface IconComponent extends React.FC
{
60 | createFromIconfontCN: typeof createFromIconfontCN;
61 | getTwoToneColor: typeof getTwoToneColor;
62 | setTwoToneColor: typeof setTwoToneColor;
63 | }
64 |
65 | const iconsMap: Record = allIcons;
66 |
67 | const LegacyTypeIcon: React.FC = props => {
68 | const { type, theme } = props;
69 |
70 | if (theme) {
71 | const themeInName = getThemeFromTypeName(type);
72 | warning(
73 | !themeInName || theme === themeInName,
74 | 'Icon',
75 | `The icon name '${type}' already specify a theme '${themeInName}',` +
76 | ` the 'theme' prop '${theme}' will be ignored.`,
77 | );
78 | }
79 | const computedType = withThemeSuffix(
80 | removeTypeTheme(alias(type)),
81 | theme || 'outlined',
82 | );
83 | const targetIconComponent = iconsMap[computedType];
84 | warning(
85 | targetIconComponent,
86 | 'Icon',
87 | `The icon name '${type}'${
88 | theme ? `with ${theme}` : ''
89 | } doesn't exist, please check it at https://ant.design/components/icon`,
90 | );
91 |
92 | return targetIconComponent
93 | ? React.createElement(targetIconComponent, props)
94 | : null;
95 | };
96 |
97 | const Icon: IconComponent = props => {
98 | const { type, component, children } = props;
99 |
100 | upgradeMessage('Icon');
101 |
102 | warning(
103 | Boolean(type || component || children),
104 | 'Icon',
105 | 'Should have `type` prop or `component` prop or `children`.',
106 | );
107 |
108 | if (component || children) {
109 | return = {} as any;
1095 |
1096 | Object.keys(raw).forEach(key => {
1097 | const value = raw[key];
1098 |
1099 | if (typeof value === 'function') {
1100 | returnData[key] = value(raw);
1101 | } else if (typeof value === 'number' && !key.includes('line-height')) {
1102 | returnData[key] = `${value}px`;
1103 | } else {
1104 | returnData[key] = `${value}`;
1105 | }
1106 | });
1107 |
1108 | return returnData;
1109 | }
1110 |
--------------------------------------------------------------------------------
/src/theme/dark.ts:
--------------------------------------------------------------------------------
1 | import type { DerivativeFunc } from '@ant-design/cssinjs';
2 | import { generate } from '@ant-design/colors';
3 | import genColorMapToken from './genColorMapToken';
4 | import type { GenerateColorMap, GenerateNeutralColorMap } from 'antd/lib/theme/themes/ColorMap';
5 | import type { MapToken, SeedToken } from 'antd/lib/theme/interface';
6 | import { theme } from 'antd';
7 | import { TinyColor } from '@ctrl/tinycolor';
8 |
9 | const { darkAlgorithm } = theme;
10 |
11 | export const getAlphaColor = (baseColor: string, alpha: number) =>
12 | new TinyColor(baseColor).setAlpha(alpha).toRgbString();
13 |
14 | export const getSolidColor = (baseColor: string, brightness: number) => {
15 | const instance = new TinyColor(baseColor);
16 | return instance.lighten(brightness).toHexString();
17 | };
18 |
19 | const generateColorPalettes: GenerateColorMap = (baseColor: string) => {
20 | const colors = generate(baseColor, { theme: 'dark' });
21 | return {
22 | 1: colors[0],
23 | 2: colors[1],
24 | 3: colors[2],
25 | 4: colors[3],
26 | 5: colors[6],
27 | 6: colors[5],
28 | 7: colors[4],
29 | 8: colors[6],
30 | 9: colors[5],
31 | 10: colors[4],
32 | };
33 | };
34 |
35 | const generateNeutralColorPalettes: GenerateNeutralColorMap = (
36 | bgBaseColor: string,
37 | textBaseColor: string,
38 | ) => {
39 | const colorBgBase = bgBaseColor || '#000';
40 | const colorTextBase = textBaseColor || '#fff';
41 |
42 | return {
43 | colorBgBase,
44 | colorTextBase,
45 | colorBgBlur: 'transparent',
46 |
47 | colorText: getAlphaColor(colorTextBase, 0.85),
48 | colorTextSecondary: getAlphaColor(colorTextBase, 0.45), // Different from v5
49 | colorTextTertiary: getAlphaColor(colorTextBase, 0.45),
50 | colorTextQuaternary: getAlphaColor(colorTextBase, 0.25),
51 |
52 | colorFill: getAlphaColor(colorTextBase, 0.18),
53 | colorFillSecondary: getAlphaColor(colorTextBase, 0.12),
54 | colorFillTertiary: getAlphaColor(colorTextBase, 0.08),
55 | colorFillQuaternary: getAlphaColor(colorTextBase, 0.04),
56 |
57 | colorBgElevated: getSolidColor(colorBgBase, 12),
58 | colorBgContainer: getSolidColor(colorBgBase, 8),
59 | colorBgLayout: getSolidColor(colorBgBase, 0),
60 | colorBgSpotlight: getSolidColor(colorBgBase, 26),
61 |
62 | colorBorder: getSolidColor(colorBgBase, 26),
63 | colorBorderSecondary: getSolidColor(colorBgBase, 19),
64 | colorSplit: getAlphaColor(colorTextBase, 0.12),
65 |
66 | colorBgSolid: getAlphaColor(colorTextBase, 0.95),
67 | colorBgSolidHover: getAlphaColor(colorTextBase, 1),
68 | colorBgSolidActive: getAlphaColor(colorTextBase, 0.9),
69 | };
70 | };
71 |
72 | const derivative: DerivativeFunc = (token, mapToken) => {
73 | const mergedMapToken = mapToken ?? darkAlgorithm(token);
74 |
75 | return {
76 | ...mergedMapToken,
77 |
78 | // Colors
79 | ...genColorMapToken(mapToken ?? token, {
80 | generateColorPalettes,
81 | generateNeutralColorPalettes,
82 | }),
83 | };
84 | };
85 |
86 | export default derivative;
87 |
--------------------------------------------------------------------------------
/src/theme/default.ts:
--------------------------------------------------------------------------------
1 | import type { DerivativeFunc } from '@ant-design/cssinjs';
2 | import { generate } from '@ant-design/colors';
3 | import genColorMapToken from './genColorMapToken';
4 | import { theme } from 'antd';
5 | import type { GenerateColorMap, GenerateNeutralColorMap } from 'antd/lib/theme/themes/ColorMap';
6 | import type { MapToken, SeedToken } from 'antd/lib/theme/interface';
7 | import { TinyColor } from '@ctrl/tinycolor';
8 |
9 | const { defaultAlgorithm } = theme;
10 |
11 | export const getAlphaColor = (baseColor: string, alpha: number) =>
12 | new TinyColor(baseColor).setAlpha(alpha).toRgbString();
13 |
14 | export const getSolidColor = (baseColor: string, brightness: number) => {
15 | const instance = new TinyColor(baseColor);
16 | return instance.darken(brightness).toHexString();
17 | };
18 |
19 | export const generateColorPalettes: GenerateColorMap = (baseColor: string) => {
20 | const colors = generate(baseColor);
21 | return {
22 | 1: colors[0],
23 | 2: colors[1],
24 | 3: colors[2],
25 | 4: colors[3],
26 | 5: colors[4],
27 | 6: colors[5],
28 | 7: colors[6],
29 | 8: colors[4],
30 | 9: colors[5],
31 | 10: colors[6],
32 | };
33 | };
34 |
35 | const generateNeutralColorPalettes: GenerateNeutralColorMap = (
36 | bgBaseColor: string,
37 | textBaseColor: string,
38 | ) => {
39 | const colorBgBase = bgBaseColor || '#fff';
40 | const colorTextBase = textBaseColor || '#000';
41 |
42 | return {
43 | colorBgBase,
44 | colorTextBase,
45 | colorBgBlur: 'transparent',
46 |
47 | colorText: getAlphaColor(colorTextBase, 0.85),
48 | colorTextSecondary: getAlphaColor(colorTextBase, 0.45), // Different from v5
49 | colorTextTertiary: getAlphaColor(colorTextBase, 0.45),
50 | colorTextQuaternary: getAlphaColor(colorTextBase, 0.25),
51 |
52 | colorFill: getAlphaColor(colorTextBase, 0.06),
53 | colorFillSecondary: getAlphaColor(colorTextBase, 0.04),
54 | colorFillTertiary: getAlphaColor(colorTextBase, 0.03),
55 | colorFillQuaternary: getAlphaColor(colorTextBase, 0.02),
56 |
57 | colorBgLayout: getSolidColor(colorBgBase, 4),
58 | colorBgContainer: getSolidColor(colorBgBase, 0),
59 | colorBgElevated: getSolidColor(colorBgBase, 0),
60 | colorBgSpotlight: getAlphaColor(colorTextBase, 0.85),
61 |
62 | colorBorder: getSolidColor(colorBgBase, 15),
63 | colorBorderSecondary: getSolidColor(colorBgBase, 6),
64 | colorSplit: getAlphaColor(colorTextBase, 0.06),
65 |
66 | colorBgSolid: getAlphaColor(colorTextBase, 1),
67 | colorBgSolidHover: getAlphaColor(colorTextBase, 0.75),
68 | colorBgSolidActive: getAlphaColor(colorTextBase, 0.95),
69 | };
70 | };
71 |
72 | const derivative: DerivativeFunc = (token, mapToken) => {
73 | const mergedMapToken = mapToken ?? defaultAlgorithm(token);
74 |
75 | return {
76 | ...mergedMapToken,
77 |
78 | // Colors
79 | ...genColorMapToken(mapToken ?? token, {
80 | generateColorPalettes,
81 | generateNeutralColorPalettes,
82 | }),
83 | };
84 | };
85 |
86 | export default derivative;
87 |
--------------------------------------------------------------------------------
/src/theme/genColorMapToken.ts:
--------------------------------------------------------------------------------
1 | import { TinyColor } from '@ctrl/tinycolor';
2 | import type { GenerateColorMap, GenerateNeutralColorMap } from 'antd/lib/theme/themes/ColorMap';
3 | import type { ColorMapToken, SeedToken } from 'antd/lib/theme/interface';
4 |
5 | interface PaletteGenerators {
6 | generateColorPalettes: GenerateColorMap;
7 | generateNeutralColorPalettes: GenerateNeutralColorMap;
8 | }
9 |
10 | export default function genColorMapToken(
11 | seed: SeedToken,
12 | { generateColorPalettes, generateNeutralColorPalettes }: PaletteGenerators,
13 | ): ColorMapToken {
14 | const {
15 | colorSuccess: colorSuccessBase,
16 | colorWarning: colorWarningBase,
17 | colorError: colorErrorBase,
18 | colorInfo: colorInfoBase,
19 | colorPrimary: colorPrimaryBase,
20 | colorBgBase,
21 | colorTextBase,
22 | } = seed;
23 |
24 | const primaryColors = generateColorPalettes(colorPrimaryBase);
25 | const successColors = generateColorPalettes(colorSuccessBase);
26 | const warningColors = generateColorPalettes(colorWarningBase);
27 | const errorColors = generateColorPalettes(colorErrorBase);
28 | const infoColors = generateColorPalettes(colorInfoBase);
29 | const neutralColors = generateNeutralColorPalettes(colorBgBase, colorTextBase);
30 |
31 | return {
32 | ...neutralColors,
33 |
34 | colorLink: primaryColors[6],
35 | colorLinkHover: primaryColors[4],
36 | colorLinkActive: primaryColors[7],
37 |
38 | colorPrimaryBg: primaryColors[1],
39 | colorPrimaryBgHover: primaryColors[2],
40 | colorPrimaryBorder: primaryColors[3],
41 | colorPrimaryBorderHover: primaryColors[4],
42 | colorPrimaryHover: primaryColors[5],
43 | colorPrimary: primaryColors[6],
44 | colorPrimaryActive: primaryColors[7],
45 | colorPrimaryTextHover: primaryColors[8],
46 | colorPrimaryText: primaryColors[9],
47 | colorPrimaryTextActive: primaryColors[10],
48 |
49 | colorSuccessBg: successColors[1],
50 | colorSuccessBgHover: successColors[2],
51 | colorSuccessBorder: successColors[3],
52 | colorSuccessBorderHover: successColors[4],
53 | colorSuccessHover: successColors[5],
54 | colorSuccess: successColors[6],
55 | colorSuccessActive: successColors[7],
56 | colorSuccessTextHover: successColors[8],
57 | colorSuccessText: successColors[9],
58 | colorSuccessTextActive: successColors[10],
59 |
60 | colorErrorBg: errorColors[1],
61 | colorErrorBgHover: errorColors[2],
62 | colorErrorBgFilledHover: new TinyColor(errorColors[1])
63 | .mix(new TinyColor(errorColors[3]), 50)
64 | .toHexString(),
65 | colorErrorBorder: errorColors[3],
66 | colorErrorBgActive: errorColors[3],
67 | colorErrorBorderHover: errorColors[4],
68 | colorErrorHover: errorColors[5],
69 | colorError: errorColors[6],
70 | colorErrorActive: errorColors[7],
71 | colorErrorTextHover: errorColors[8],
72 | colorErrorText: errorColors[9],
73 | colorErrorTextActive: errorColors[10],
74 |
75 | colorWarningBg: warningColors[1],
76 | colorWarningBgHover: warningColors[2],
77 | colorWarningBorder: warningColors[3],
78 | colorWarningBorderHover: warningColors[4],
79 | colorWarningHover: warningColors[5],
80 | colorWarning: warningColors[6],
81 | colorWarningActive: warningColors[7],
82 | colorWarningTextHover: warningColors[8],
83 | colorWarningText: warningColors[9],
84 | colorWarningTextActive: warningColors[10],
85 |
86 | colorInfoBg: infoColors[1],
87 | colorInfoBgHover: infoColors[2],
88 | colorInfoBorder: infoColors[3],
89 | colorInfoBorderHover: infoColors[4],
90 | colorInfoHover: infoColors[5],
91 | colorInfo: infoColors[6],
92 | colorInfoActive: infoColors[7],
93 | colorInfoTextHover: infoColors[8],
94 | colorInfoText: infoColors[9],
95 | colorInfoTextActive: infoColors[10],
96 |
97 | colorBgMask: new TinyColor('#000').setAlpha(0.45).toRgbString(),
98 | colorWhite: '#fff',
99 | };
100 | }
101 |
--------------------------------------------------------------------------------
/src/theme/index.ts:
--------------------------------------------------------------------------------
1 | import type { ThemeConfig } from 'antd/lib/config-provider/context';
2 | import defaultAlgorithm from './default';
3 | import darkAlgorithm from './dark';
4 |
5 | export { defaultAlgorithm, darkAlgorithm };
6 |
7 | const v4Token: ThemeConfig = {
8 | token: { borderRadius: 2, colorPrimary: '#1890ff', wireframe: true },
9 | }
10 |
11 | export const defaultTheme: ThemeConfig = {
12 | ...v4Token,
13 | algorithm: defaultAlgorithm,
14 | components: {
15 | Menu: {
16 | itemBorderRadius: 0,
17 | subMenuItemBorderRadius: 0,
18 | itemHoverColor: '#1890ff',
19 | itemSelectedColor: '#1890ff',
20 | itemSelectedBg: '#e6f7ff',
21 | activeBarWidth: 3,
22 | itemMarginInline: 0,
23 | itemHoverBg: 'transparent',
24 | },
25 | },
26 | }
27 |
28 | export const darkTheme: ThemeConfig = {
29 | ...v4Token,
30 | algorithm: darkAlgorithm,
31 | components: {
32 | Menu: {
33 | itemBorderRadius: 0,
34 | subMenuItemBorderRadius: 0,
35 | itemHoverColor: 'transparent',
36 | itemSelectedColor: '#1890ff',
37 | itemSelectedBg: '#111b26',
38 | activeBarWidth: 3,
39 | itemMarginInline: 0,
40 | itemHoverBg: 'transparent',
41 | },
42 | },
43 | }
44 |
--------------------------------------------------------------------------------
/tests/Comment.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ConfigProvider } from 'antd';
3 | import { Comment } from '../src';
4 | import { render } from '@testing-library/react';
5 |
6 | describe('Comment', () => {
7 | it('no hash', () => {
8 | const { container } = render(
9 |
14 | ,
16 | );
17 | expect(container).toMatchSnapshot();
18 | });
19 | });
20 |
--------------------------------------------------------------------------------
/tests/Form.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ConfigProvider } from 'antd';
3 | import { Form } from '../src';
4 | import { render } from '@testing-library/react';
5 |
6 | describe('Form', () => {
7 | it('no hash', () => {
8 | const { container } = render(
9 |
14 |
15 | ,
16 | );
17 | expect(container).toMatchSnapshot();
18 | });
19 | });
20 |
--------------------------------------------------------------------------------
/tests/Icon.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Icon } from '../src';
3 | import { render } from '@testing-library/react';
4 |
5 | describe('Form', () => {
6 | it('work', () => {
7 | const { container } = render(
5 |
20 |
21 | `;
22 |
--------------------------------------------------------------------------------
/tests/__snapshots__/Form.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Form no hash 1`] = `
4 |
5 |
8 |
9 | `;
10 |
--------------------------------------------------------------------------------
/tests/__snapshots__/Icon.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Form work 1`] = `
4 |
5 |
11 |
20 |
24 |
25 |
) {
10 | return new Promise((resolve, reject) => {
11 | lessRender(
12 | lessStr,
13 | {
14 | javascriptEnabled: true,
15 | modifyVars: vars,
16 | },
17 | (e, output) => {
18 | if (e) {
19 | reject(e);
20 | return;
21 | }
22 |
23 | resolve(output.css.trim());
24 | },
25 | );
26 | });
27 | }
28 |
29 | describe('Less', () => {
30 | afterEach(() => {
31 | const styles = Array.from(document.querySelectorAll('style'));
32 | styles.forEach(style => {
33 | style.parentNode?.removeChild(style);
34 | });
35 | });
36 |
37 | it('work', async () => {
38 | const mapToken = defaultAlgorithm(defaultConfig.token);
39 | const legacyToken = convertLegacyToken(mapToken);
40 |
41 | // Value exist check
42 | expect(legacyToken['line-height-base']).toEqual(`${mapToken.lineHeight}`);
43 | expect(legacyToken['border-radius-base']).toEqual(`${mapToken.borderRadius}px`);
44 |
45 | // Less compile check
46 | const css = await renderLess(
47 | `
48 | @my-prefix-cls: ~'@{ant-prefix}-my';
49 |
50 | .@{my-prefix-cls} {
51 | color: @primary-color;
52 | }
53 | `,
54 | legacyToken,
55 | );
56 |
57 | updateCSS(css, 'ant-my');
58 | const { container } = render(
);
59 |
60 | expect(container.querySelector('p')).toHaveStyle({
61 | color: mapToken.colorPrimary,
62 | });
63 | });
64 | });
65 |
--------------------------------------------------------------------------------
/tests/setupAfterEnv.ts:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom';
2 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "moduleResolution": "node",
5 | "baseUrl": "./",
6 | "jsx": "preserve",
7 | "declaration": true,
8 | "skipLibCheck": true,
9 | "esModuleInterop": true,
10 | "paths": {
11 | "@/*": ["src/*"],
12 | "@@/*": ["src/.umi/*"],
13 | "@ant-design/compatible": ["src/index.tsx"]
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/typings.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.css';
2 | declare module '*.less';
3 |
--------------------------------------------------------------------------------
: avatar}
53 |