mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
commit
1ad266f7bf
@ -1,6 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import { TinyColor, type ColorInput } from '@ctrl/tinycolor';
|
||||
import { css } from '@emotion/react';
|
||||
import * as React from 'react';
|
||||
import useSiteToken from '../../../hooks/useSiteToken';
|
||||
|
||||
interface ColorChunkProps {
|
||||
@ -23,7 +23,7 @@ const useStyle = () => {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: ${token.borderRadiusSM}px;
|
||||
border-radius: 50%;
|
||||
margin-inline-end: 4px;
|
||||
border: 1px solid ${token.colorSplit};
|
||||
`,
|
||||
|
@ -17,12 +17,16 @@ const locales = {
|
||||
description: '描述',
|
||||
type: '类型',
|
||||
value: '默认值',
|
||||
componentToken: '组件 Token',
|
||||
globalToken: '全局 Token',
|
||||
},
|
||||
en: {
|
||||
token: 'Token Name',
|
||||
description: 'Description',
|
||||
type: 'Type',
|
||||
value: 'Default Value',
|
||||
componentToken: 'Component Token',
|
||||
globalToken: 'Global Token',
|
||||
},
|
||||
};
|
||||
|
||||
@ -48,9 +52,10 @@ interface SubTokenTableProps {
|
||||
defaultOpen?: boolean;
|
||||
title: string;
|
||||
tokens: string[];
|
||||
component?: string;
|
||||
}
|
||||
|
||||
const SubTokenTable: React.FC<SubTokenTableProps> = ({ defaultOpen, tokens, title }) => {
|
||||
const SubTokenTable: React.FC<SubTokenTableProps> = ({ defaultOpen, tokens, title, component }) => {
|
||||
const [, lang] = useLocale(locales);
|
||||
const { token } = useSiteToken();
|
||||
const columns = useColumns();
|
||||
@ -64,7 +69,10 @@ const SubTokenTable: React.FC<SubTokenTableProps> = ({ defaultOpen, tokens, titl
|
||||
}
|
||||
|
||||
const data = tokens
|
||||
.sort((token1, token2) => {
|
||||
.sort(
|
||||
component
|
||||
? undefined
|
||||
: (token1, token2) => {
|
||||
const hasColor1 = token1.toLowerCase().includes('color');
|
||||
const hasColor2 = token2.toLowerCase().includes('color');
|
||||
|
||||
@ -77,9 +85,12 @@ const SubTokenTable: React.FC<SubTokenTableProps> = ({ defaultOpen, tokens, titl
|
||||
}
|
||||
|
||||
return token1 < token2 ? -1 : 1;
|
||||
})
|
||||
},
|
||||
)
|
||||
.map((name) => {
|
||||
const meta = tokenMeta[name];
|
||||
const meta = component
|
||||
? tokenMeta.components[component].find((item) => item.token === name)
|
||||
: tokenMeta.global[name];
|
||||
|
||||
if (!meta) {
|
||||
return null;
|
||||
@ -89,7 +100,7 @@ const SubTokenTable: React.FC<SubTokenTableProps> = ({ defaultOpen, tokens, titl
|
||||
name,
|
||||
desc: lang === 'cn' ? meta.desc : meta.descEn,
|
||||
type: meta.type,
|
||||
value: defaultToken[name],
|
||||
value: component ? tokenData[component].component[name] : defaultToken[name],
|
||||
};
|
||||
})
|
||||
.filter(Boolean);
|
||||
@ -122,28 +133,31 @@ export interface ComponentTokenTableProps {
|
||||
}
|
||||
|
||||
const ComponentTokenTable: React.FC<ComponentTokenTableProps> = ({ component }) => {
|
||||
const [locale] = useLocale(locales);
|
||||
const [mergedGlobalTokens] = useMemo(() => {
|
||||
const globalTokenSet = new Set<string>();
|
||||
let componentTokens: Record<string, string> = {};
|
||||
|
||||
component.split(',').forEach((comp) => {
|
||||
const { global: globalTokens = [], component: singleComponentTokens = [] } =
|
||||
tokenData[comp] || {};
|
||||
const { global: globalTokens = [] } = tokenData[comp] || {};
|
||||
|
||||
globalTokens.forEach((token: string) => {
|
||||
globalTokenSet.add(token);
|
||||
});
|
||||
|
||||
componentTokens = {
|
||||
...componentTokens,
|
||||
...singleComponentTokens,
|
||||
};
|
||||
});
|
||||
|
||||
return [Array.from(globalTokenSet), componentTokens] as const;
|
||||
return [Array.from(globalTokenSet)] as const;
|
||||
}, [component]);
|
||||
|
||||
return <SubTokenTable title="Global Token" tokens={mergedGlobalTokens} />;
|
||||
return (
|
||||
<>
|
||||
<SubTokenTable
|
||||
title={locale.componentToken}
|
||||
tokens={tokenMeta.components[component].map((item) => item.token)}
|
||||
component={component}
|
||||
/>
|
||||
<SubTokenTable title={locale.globalToken} tokens={mergedGlobalTokens} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(ComponentTokenTable);
|
||||
|
@ -98,7 +98,7 @@ const TokenTable: FC<TokenTableProps> = ({ type }) => {
|
||||
|
||||
const data = React.useMemo<TokenData[]>(
|
||||
() =>
|
||||
Object.entries(tokenMeta)
|
||||
Object.entries(tokenMeta.global)
|
||||
.filter(([, meta]) => meta.source === type)
|
||||
.map(([token, meta]) => ({
|
||||
name: token,
|
||||
|
@ -4,12 +4,20 @@ const path = require('path');
|
||||
|
||||
const blogList = [
|
||||
'check-conduct',
|
||||
'contributor-development-maintenance-guide',
|
||||
'css-in-js',
|
||||
'extract-ssr',
|
||||
'getContainer',
|
||||
'github-actions-workflow',
|
||||
'issue-helper',
|
||||
'mock-project-build',
|
||||
'modal-hook-order',
|
||||
'render-times',
|
||||
'testing-migrate',
|
||||
'render-times',
|
||||
'to-be-collaborator',
|
||||
'tooltip-align',
|
||||
'tree-shaking',
|
||||
'why-not-static',
|
||||
].map((blogName) => path.join(__dirname, `../../docs/blog/${blogName}.en-US.md`));
|
||||
|
||||
describe('blog', () => {
|
||||
|
@ -1,4 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import type { AnyObject } from './type';
|
||||
|
||||
export const { isValidElement } = React;
|
||||
|
||||
@ -6,8 +7,6 @@ export function isFragment(child: any): boolean {
|
||||
return child && isValidElement(child) && child.type === React.Fragment;
|
||||
}
|
||||
|
||||
type AnyObject = Record<PropertyKey, any>;
|
||||
|
||||
type RenderProps = AnyObject | ((originProps: AnyObject) => AnyObject | void);
|
||||
|
||||
export function replaceElement(
|
||||
|
@ -1,2 +1,4 @@
|
||||
/** https://github.com/Microsoft/TypeScript/issues/29729 */
|
||||
export type LiteralUnion<T extends string> = T | (string & {});
|
||||
|
||||
export type AnyObject = Record<PropertyKey, any>;
|
||||
|
@ -4,7 +4,15 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 链接横向内间距
|
||||
* @descEN Link horizontal padding
|
||||
*/
|
||||
linkPaddingBlock: number;
|
||||
/**
|
||||
* @desc 链接纵向内间距
|
||||
* @descEN Link vertical padding
|
||||
*/
|
||||
linkPaddingInlineStart: number;
|
||||
}
|
||||
|
||||
|
@ -4,14 +4,50 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 头像背景色
|
||||
* @descEN Background color of Avatar
|
||||
*/
|
||||
containerSize: number;
|
||||
/**
|
||||
* @desc 大号头像尺寸
|
||||
* @descEN Size of large Avatar
|
||||
*/
|
||||
containerSizeLG: number;
|
||||
/**
|
||||
* @desc 小号头像尺寸
|
||||
* @descEN Size of small Avatar
|
||||
*/
|
||||
containerSizeSM: number;
|
||||
/**
|
||||
* @desc 头像文字大小
|
||||
* @descEN Font size of Avatar
|
||||
*/
|
||||
textFontSize: number;
|
||||
/**
|
||||
* @desc 大号头像文字大小
|
||||
* @descEN Font size of large Avatar
|
||||
*/
|
||||
textFontSizeLG: number;
|
||||
/**
|
||||
* @desc 小号头像文字大小
|
||||
* @descEN Font size of small Avatar
|
||||
*/
|
||||
textFontSizeSM: number;
|
||||
/**
|
||||
* @desc 头像组间距
|
||||
* @descEN Spacing between avatars in a group
|
||||
*/
|
||||
groupSpace: number;
|
||||
/**
|
||||
* @desc 头像组重叠宽度
|
||||
* @descEN Overlapping of avatars in a group
|
||||
*/
|
||||
groupOverlapping: number;
|
||||
/**
|
||||
* @desc 头像组边框颜色
|
||||
* @descEN Border color of avatars in a group
|
||||
*/
|
||||
groupBorderColor: string;
|
||||
}
|
||||
|
||||
|
@ -4,12 +4,40 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 面包屑项文字颜色
|
||||
* @descEN Text color of Breadcrumb item
|
||||
*/
|
||||
itemColor: string;
|
||||
/**
|
||||
* @desc 图标大小
|
||||
* @descEN Icon size
|
||||
*/
|
||||
iconFontSize: number;
|
||||
/**
|
||||
* @desc 链接文字颜色
|
||||
* @descEN Text color of link
|
||||
*/
|
||||
linkColor: string;
|
||||
/**
|
||||
* @desc 链接文字悬浮颜色
|
||||
* @descEN Color of hovered link
|
||||
*/
|
||||
linkHoverColor: string;
|
||||
/**
|
||||
* @desc 最后一项文字颜色
|
||||
* @descEN Text color of the last item
|
||||
*/
|
||||
lastItemColor: string;
|
||||
/**
|
||||
* @desc 分隔符外间距
|
||||
* @descEN Margin of separator
|
||||
*/
|
||||
separatorMargin: number;
|
||||
/**
|
||||
* @desc 分隔符颜色
|
||||
* @descEN Color of separator
|
||||
*/
|
||||
separatorColor: string;
|
||||
}
|
||||
|
||||
|
@ -8,11 +8,35 @@ import type { FullToken } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 年选择器宽度
|
||||
* @descEN Width of year select
|
||||
*/
|
||||
yearControlWidth: number;
|
||||
/**
|
||||
* @desc 月选择器宽度
|
||||
* @descEN Width of month select
|
||||
*/
|
||||
monthControlWidth: number;
|
||||
/**
|
||||
* @desc 迷你日历内容高度
|
||||
* @descEN Height of mini calendar content
|
||||
*/
|
||||
miniContentHeight: number;
|
||||
/**
|
||||
* @desc 完整日历背景色
|
||||
* @descEN Background color of full calendar
|
||||
*/
|
||||
fullBg: string;
|
||||
/**
|
||||
* @desc 完整日历面板背景色
|
||||
* @descEN Background color of full calendar panel
|
||||
*/
|
||||
fullPanelBg: string;
|
||||
/**
|
||||
* @desc 日期项选中背景色
|
||||
* @descEN Background color of selected date item
|
||||
*/
|
||||
itemActiveBg: string;
|
||||
}
|
||||
|
||||
|
@ -5,14 +5,50 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 卡片头部背景色
|
||||
* @descEN Background color of card header
|
||||
*/
|
||||
headerBg: string;
|
||||
/**
|
||||
* @desc 卡片头部文字大小
|
||||
* @descEN Font size of card header
|
||||
*/
|
||||
headerFontSize: number;
|
||||
/**
|
||||
* @desc 小号卡片头部文字大小
|
||||
* @descEN Font size of small card header
|
||||
*/
|
||||
headerFontSizeSM: number;
|
||||
/**
|
||||
* @desc 卡片头部高度
|
||||
* @descEN Height of card header
|
||||
*/
|
||||
headerHeight: number;
|
||||
/**
|
||||
* @desc 小号卡片头部高度
|
||||
* @descEN Height of small card header
|
||||
*/
|
||||
headerHeightSM: number;
|
||||
/**
|
||||
* @desc 操作区背景色
|
||||
* @descEN Background color of card actions
|
||||
*/
|
||||
actionsBg: string;
|
||||
/**
|
||||
* @desc 操作区每一项的外间距
|
||||
* @descEN Margin of each item in card actions
|
||||
*/
|
||||
actionsLiMargin: string;
|
||||
/**
|
||||
* @desc 内置标签页组件下间距
|
||||
* @descEN Margin bottom of tabs component
|
||||
*/
|
||||
tabsMarginBottom: number;
|
||||
/**
|
||||
* @desc 额外区文字颜色
|
||||
* @descEN Text color of extra area
|
||||
*/
|
||||
extraColor: string;
|
||||
}
|
||||
|
||||
|
@ -3,10 +3,22 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 指示点宽度
|
||||
* @descEN Width of indicator
|
||||
*/
|
||||
dotWidth: number;
|
||||
/**
|
||||
* @desc 指示点高度
|
||||
* @descEN Height of indicator
|
||||
*/
|
||||
dotHeight: number;
|
||||
/** @deprecated Use `dotActiveWidth` instead. */
|
||||
dotWidthActive: number;
|
||||
/**
|
||||
* @desc 激活态指示点宽度
|
||||
* @descEN Width of active indicator
|
||||
*/
|
||||
dotActiveWidth: number;
|
||||
}
|
||||
|
||||
|
@ -1,12 +1,24 @@
|
||||
import { getStyle as getCheckboxStyle } from '../../checkbox/style';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook } from '../../theme/internal';
|
||||
import { textEllipsis } from '../../style';
|
||||
import { genCompactItemStyle } from '../../style/compact-item';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 选择器宽度
|
||||
* @descEN Width of Cascader
|
||||
*/
|
||||
controlWidth: number;
|
||||
/**
|
||||
* @desc 选项宽度
|
||||
* @descEN Width of item
|
||||
*/
|
||||
controlItemWidth: number;
|
||||
/**
|
||||
* @desc 下拉菜单高度
|
||||
* @descEN Height of dropdown
|
||||
*/
|
||||
dropdownHeight: number;
|
||||
}
|
||||
|
||||
|
@ -23,8 +23,20 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 预设区域宽度
|
||||
* @descEN Width of preset area
|
||||
*/
|
||||
presetsWidth: number;
|
||||
/**
|
||||
* @desc 预设区域最大宽度
|
||||
* @descEN Max width of preset area
|
||||
*/
|
||||
presetsMaxWidth: number;
|
||||
/**
|
||||
* @desc 弹窗 z-index
|
||||
* @descEN z-index of popup
|
||||
*/
|
||||
zIndexPopup: number;
|
||||
}
|
||||
|
||||
|
@ -6,11 +6,35 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
/** Component only token. Which will handle additional calculation of alias token */
|
||||
export interface ComponentToken {
|
||||
// Component token here
|
||||
/**
|
||||
* @desc 标签背景色
|
||||
* @descEN Background color of label
|
||||
*/
|
||||
labelBg: string;
|
||||
/**
|
||||
* @desc 标题下间距
|
||||
* @descEN Bottom margin of title
|
||||
*/
|
||||
titleMarginBottom: number;
|
||||
/**
|
||||
* @desc 子项下间距
|
||||
* @descEN Bottom padding of item
|
||||
*/
|
||||
itemPaddingBottom: number;
|
||||
/**
|
||||
* @desc 分号右间距
|
||||
* @descEN Right margin of colon
|
||||
*/
|
||||
colonMarginRight: number;
|
||||
/**
|
||||
* @desc 分号左间距
|
||||
* @descEN Left margin of colon
|
||||
*/
|
||||
colonMarginLeft: number;
|
||||
/**
|
||||
* @desc 额外区域文字颜色
|
||||
* @descEN Text color of extra area
|
||||
*/
|
||||
extraColor: string;
|
||||
}
|
||||
|
||||
|
@ -3,8 +3,20 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
import genMotionStyle from './motion';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 弹窗 z-index
|
||||
* @descEN z-index of drawer
|
||||
*/
|
||||
zIndexPopup: number;
|
||||
/**
|
||||
* @desc 底部区域横向内间距
|
||||
* @descEN Horizontal padding of footer
|
||||
*/
|
||||
footerPaddingBlock: number;
|
||||
/**
|
||||
* @desc 底部区域纵向内间距
|
||||
* @descEN Vertical padding of footer
|
||||
*/
|
||||
footerPaddingInline: number;
|
||||
}
|
||||
|
||||
|
@ -14,6 +14,10 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
import genStatusStyle from './status';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 下拉菜单 z-index
|
||||
* @descEN z-index of dropdown
|
||||
*/
|
||||
zIndexPopup: number;
|
||||
}
|
||||
|
||||
|
@ -7,9 +7,25 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 预览浮层 z-index
|
||||
* @descEN z-index of preview popup
|
||||
*/
|
||||
zIndexPopup: number;
|
||||
/**
|
||||
* @desc 预览操作图标大小
|
||||
* @descEN Size of preview operation icon
|
||||
*/
|
||||
previewOperationSize: number;
|
||||
/**
|
||||
* @desc 预览操作图标颜色
|
||||
* @descEN Color of preview operation icon
|
||||
*/
|
||||
previewOperationColor: string;
|
||||
/**
|
||||
* @desc 预览操作图标禁用颜色
|
||||
* @descEN Disabled color of preview operation icon
|
||||
*/
|
||||
previewOperationColorDisabled: string;
|
||||
}
|
||||
|
||||
|
@ -15,10 +15,26 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 输入框宽度
|
||||
* @descEN Width of input
|
||||
*/
|
||||
controlWidth: number;
|
||||
/**
|
||||
* @desc 操作按钮宽度
|
||||
* @descEN Width of control button
|
||||
*/
|
||||
handleWidth: number;
|
||||
/**
|
||||
* @desc 操作按钮图标大小
|
||||
* @descEN Icon size of control button
|
||||
*/
|
||||
handleFontSize: number;
|
||||
/** Default `auto`. Set `true` will always show the handle */
|
||||
/**
|
||||
* Default `auto`. Set `true` will always show the handle
|
||||
* @desc 操作按钮可见性
|
||||
* @descEN Handle visible
|
||||
*/
|
||||
handleVisible: 'auto' | true;
|
||||
}
|
||||
|
||||
|
@ -5,16 +5,60 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 内容宽度
|
||||
* @descEN Width of content
|
||||
*/
|
||||
contentWidth: number;
|
||||
/**
|
||||
* @desc 大号列表项内间距
|
||||
* @descEN Padding of large item
|
||||
*/
|
||||
itemPaddingLG: string;
|
||||
/**
|
||||
* @desc 小号列表项内间距
|
||||
* @descEN Padding of small item
|
||||
*/
|
||||
itemPaddingSM: string;
|
||||
/**
|
||||
* @desc 列表项内间距
|
||||
* @descEN Padding of item
|
||||
*/
|
||||
itemPadding: string;
|
||||
/**
|
||||
* @desc 头部区域背景色
|
||||
* @descEN Background color of header
|
||||
*/
|
||||
headerBg: string;
|
||||
/**
|
||||
* @desc 底部区域背景色
|
||||
* @descEN Background color of footer
|
||||
*/
|
||||
footerBg: string;
|
||||
/**
|
||||
* @desc 空文本内边距
|
||||
* @descEN Padding of empty text
|
||||
*/
|
||||
emptyTextPadding: CSSProperties['padding'];
|
||||
/**
|
||||
* @desc Meta 下间距
|
||||
* @descEN Margin bottom of meta
|
||||
*/
|
||||
metaMarginBottom: CSSProperties['marginBottom'];
|
||||
/**
|
||||
* @desc 头像右间距
|
||||
* @descEN Right margin of avatar
|
||||
*/
|
||||
avatarMarginRight: CSSProperties['marginRight'];
|
||||
/**
|
||||
* @desc 标题下间距
|
||||
* @descEN Margin bottom of title
|
||||
*/
|
||||
titleMarginBottom: CSSProperties['marginBottom'];
|
||||
/**
|
||||
* @desc 描述文字大小
|
||||
* @descEN Font size of description
|
||||
*/
|
||||
descriptionFontSize: number;
|
||||
}
|
||||
|
||||
|
@ -7,13 +7,25 @@ import {
|
||||
genStatusStyle,
|
||||
initInputToken,
|
||||
} from '../../input/style';
|
||||
import { resetComponent, textEllipsis } from '../../style';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook } from '../../theme/internal';
|
||||
import { resetComponent, textEllipsis } from '../../style';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 弹层 z-index
|
||||
* @descEN z-index of popup
|
||||
*/
|
||||
zIndexPopup: number;
|
||||
/**
|
||||
* @desc 弹层高度
|
||||
* @descEN Height of popup
|
||||
*/
|
||||
dropdownHeight: number;
|
||||
/**
|
||||
* @desc 菜单项高度
|
||||
* @descEN Height of menu item
|
||||
*/
|
||||
controlItemWidth: number;
|
||||
}
|
||||
|
||||
|
@ -11,112 +11,223 @@ import getVerticalStyle from './vertical';
|
||||
|
||||
/** Component only token. Which will handle additional calculation of alias token */
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 弹出菜单的宽度
|
||||
* @descEN Width of popup menu
|
||||
*/
|
||||
dropdownWidth: number;
|
||||
/**
|
||||
* @desc 弹出菜单的 z-index
|
||||
* @descEN z-index of popup menu
|
||||
*/
|
||||
zIndexPopup: number;
|
||||
|
||||
// Group
|
||||
/** @deprecated Use `groupTitleColor` instead */
|
||||
colorGroupTitle: string;
|
||||
/**
|
||||
* @desc 分组标题文字颜色
|
||||
* @descEN Color of group title text
|
||||
*/
|
||||
groupTitleColor: string;
|
||||
|
||||
// radius
|
||||
/** @deprecated Use `itemBorderRadius` instead */
|
||||
radiusItem: number;
|
||||
/**
|
||||
* @desc 菜单项的圆角
|
||||
* @descEN Radius of menu item
|
||||
*/
|
||||
itemBorderRadius: number;
|
||||
|
||||
/** @deprecated Use `subMenuItemBorderRadius` instead */
|
||||
radiusSubMenuItem: number;
|
||||
/**
|
||||
* @desc 子菜单项的圆角
|
||||
* @descEN Radius of sub-menu item
|
||||
*/
|
||||
subMenuItemBorderRadius: number;
|
||||
|
||||
// Item Text
|
||||
// > Default
|
||||
/** @deprecated Use `itemColor` instead */
|
||||
colorItemText: string;
|
||||
/**
|
||||
* @desc 菜单项文字颜色
|
||||
* @descEN Color of menu item text
|
||||
*/
|
||||
itemColor: string;
|
||||
|
||||
/** @deprecated Use `itemHoverColor` instead */
|
||||
colorItemTextHover: string;
|
||||
/**
|
||||
* @desc 菜单项文字悬浮颜色
|
||||
* @descEN Hover color of menu item text
|
||||
*/
|
||||
itemHoverColor: string;
|
||||
|
||||
/** @deprecated Use `horizontalItemHoverColor` instead */
|
||||
colorItemTextHoverHorizontal: string;
|
||||
/**
|
||||
* @desc 水平菜单项文字悬浮颜色
|
||||
* @descEN Hover color of horizontal menu item text
|
||||
*/
|
||||
horizontalItemHoverColor: string;
|
||||
|
||||
/** @deprecated Use `itemSelectedColor` instead */
|
||||
colorItemTextSelected: string;
|
||||
/**
|
||||
* @desc 菜单项文字选中颜色
|
||||
* @descEN Color of selected menu item text
|
||||
*/
|
||||
itemSelectedColor: string;
|
||||
|
||||
/** @deprecated Use `horizontalItemSelectedColor` instead */
|
||||
colorItemTextSelectedHorizontal: string;
|
||||
/**
|
||||
* @desc 水平菜单项文字选中颜色
|
||||
* @descEN Color of selected horizontal menu item text
|
||||
*/
|
||||
horizontalItemSelectedColor: string;
|
||||
|
||||
// > Disabled
|
||||
/** @deprecated Use `itemDisabledColor` instead */
|
||||
colorItemTextDisabled: string;
|
||||
/**
|
||||
* @desc 菜单项文字禁用颜色
|
||||
* @descEN Color of disabled menu item text
|
||||
*/
|
||||
itemDisabledColor: string;
|
||||
|
||||
// > Danger
|
||||
/** @deprecated Use `dangerItemColor` instead */
|
||||
colorDangerItemText: string;
|
||||
/**
|
||||
* @desc 危险菜单项文字颜色
|
||||
* @descEN Color of danger menu item text
|
||||
*/
|
||||
dangerItemColor: string;
|
||||
|
||||
/** @deprecated Use `dangerItemHoverColor` instead */
|
||||
colorDangerItemTextHover: string;
|
||||
/**
|
||||
* @desc 危险菜单项文字悬浮颜色
|
||||
* @descEN Hover color of danger menu item text
|
||||
*/
|
||||
dangerItemHoverColor: string;
|
||||
|
||||
/** @deprecated Use `dangerItemSelectedColor` instead */
|
||||
colorDangerItemTextSelected: string;
|
||||
/**
|
||||
* @desc 危险菜单项文字选中颜色
|
||||
* @descEN Color of selected danger menu item text
|
||||
*/
|
||||
dangerItemSelectedColor: string;
|
||||
|
||||
/** @deprecated Use `dangerItemActiveBg` instead */
|
||||
colorDangerItemBgActive: string;
|
||||
/**
|
||||
* @desc 危险菜单项文字激活颜色
|
||||
* @descEN Color of active danger menu item text
|
||||
*/
|
||||
dangerItemActiveBg: string;
|
||||
|
||||
/** @deprecated Use `dangerItemSelectedBg` instead */
|
||||
colorDangerItemBgSelected: string;
|
||||
/**
|
||||
* @desc 危险菜单项文字选中颜色
|
||||
* @descEN Color of selected danger menu item text
|
||||
*/
|
||||
dangerItemSelectedBg: string;
|
||||
|
||||
// Item Bg
|
||||
/** @deprecated Use `itemBg` instead */
|
||||
colorItemBg: string;
|
||||
/**
|
||||
* @desc 菜单项背景色
|
||||
*/
|
||||
itemBg: string;
|
||||
|
||||
/** @deprecated Use `itemHoverBg` instead */
|
||||
colorItemBgHover: string;
|
||||
/**
|
||||
* @desc 菜单项悬浮态背景色
|
||||
* @descEN Background color of menu item when hover
|
||||
*/
|
||||
itemHoverBg: string;
|
||||
|
||||
/** @deprecated Use `subMenuItemBg` instead */
|
||||
colorSubItemBg: string;
|
||||
/**
|
||||
* @desc 子菜单项背景色
|
||||
* @descEN Background color of sub-menu item
|
||||
*/
|
||||
subMenuItemBg: string;
|
||||
|
||||
// > Default
|
||||
/** @deprecated Use `itemActiveBg` instead */
|
||||
colorItemBgActive: string;
|
||||
/**
|
||||
* @desc 菜单项激活态背景色
|
||||
* @descEN Background color of menu item when active
|
||||
*/
|
||||
itemActiveBg: string;
|
||||
|
||||
/** @deprecated Use `itemSelectedBg` instead */
|
||||
colorItemBgSelected: string;
|
||||
/**
|
||||
* @desc 菜单项选中态背景色
|
||||
* @descEN Background color of menu item when selected
|
||||
*/
|
||||
itemSelectedBg: string;
|
||||
|
||||
/** @deprecated Use `horizontalItemSelectedBg` instead */
|
||||
colorItemBgSelectedHorizontal: string;
|
||||
/**
|
||||
* @desc 水平菜单项选中态背景色
|
||||
* @descEN Background color of horizontal menu item when selected
|
||||
*/
|
||||
horizontalItemSelectedBg: string;
|
||||
|
||||
// Ink Bar
|
||||
/** @deprecated Use `activeBarWidth` instead */
|
||||
colorActiveBarWidth: number;
|
||||
/**
|
||||
* @desc 菜单项指示条宽度
|
||||
* @descEN Width of menu item active bar
|
||||
*/
|
||||
activeBarWidth: number;
|
||||
|
||||
/** @deprecated Use `activeBarHeight` instead */
|
||||
colorActiveBarHeight: number;
|
||||
/**
|
||||
* @desc 菜单项指示条高度
|
||||
* @descEN Height of menu item active bar
|
||||
*/
|
||||
activeBarHeight: number;
|
||||
|
||||
/** @deprecated Use `activeBarBorderWidth` instead */
|
||||
colorActiveBarBorderSize: number;
|
||||
/**
|
||||
* @desc 菜单项指示条边框宽度
|
||||
* @descEN Border width of menu item active bar
|
||||
*/
|
||||
activeBarBorderWidth: number;
|
||||
|
||||
/**
|
||||
* @desc 菜单项横向外间距
|
||||
* @descEN Horizontal margin of menu item
|
||||
*/
|
||||
itemMarginInline: number;
|
||||
/**
|
||||
* @desc 横向菜单项横悬浮态背景色
|
||||
* @descEN Background color of horizontal menu item when hover
|
||||
*/
|
||||
horizontalItemHoverBg: string;
|
||||
/**
|
||||
* @desc 横向菜单项圆角
|
||||
* @descEN Border radius of horizontal menu item
|
||||
*/
|
||||
horizontalItemBorderRadius: number;
|
||||
}
|
||||
|
||||
|
@ -9,8 +9,20 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
/** Component only token. Which will handle additional calculation of alias token */
|
||||
export interface ComponentToken {
|
||||
// Component token here
|
||||
/**
|
||||
* @desc 提示框 z-index
|
||||
* @descEN z-index of Message
|
||||
*/
|
||||
zIndexPopup: number;
|
||||
/**
|
||||
* @desc 提示框背景色
|
||||
* @descEN Background color of Message
|
||||
*/
|
||||
contentBg: string;
|
||||
/**
|
||||
* @desc 提示框内边距
|
||||
* @descEN Padding of Message
|
||||
*/
|
||||
contentPadding: CSSProperties['padding'];
|
||||
}
|
||||
|
||||
|
@ -8,11 +8,35 @@ import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook'
|
||||
/** Component only token. Which will handle additional calculation of alias token */
|
||||
export interface ComponentToken {
|
||||
// Component token here
|
||||
/**
|
||||
* @desc 顶部背景色
|
||||
* @descEN Background color of header
|
||||
*/
|
||||
headerBg: string;
|
||||
/**
|
||||
* @desc 标题行高
|
||||
* @descEN Line height of title
|
||||
*/
|
||||
titleLineHeight: number;
|
||||
/**
|
||||
* @desc 标题字体大小
|
||||
* @descEN Font size of title
|
||||
*/
|
||||
titleFontSize: number;
|
||||
/**
|
||||
* @desc 标题字体颜色
|
||||
* @descEN Font color of title
|
||||
*/
|
||||
titleColor: string;
|
||||
/**
|
||||
* @desc 内容区域背景色
|
||||
* @descEN Background color of content
|
||||
*/
|
||||
contentBg: string;
|
||||
/**
|
||||
* @desc 底部区域背景色
|
||||
* @descEN Background color of footer
|
||||
*/
|
||||
footerBg: string;
|
||||
}
|
||||
|
||||
|
@ -7,7 +7,15 @@ import genNotificationPlacementStyle from './placement';
|
||||
|
||||
/** Component only token. Which will handle additional calculation of alias token */
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 提醒框 z-index
|
||||
* @descEN z-index of Notification
|
||||
*/
|
||||
zIndexPopup: number;
|
||||
/**
|
||||
* @desc 提醒框宽度
|
||||
* @descEN Width of Notification
|
||||
*/
|
||||
width: number;
|
||||
}
|
||||
|
||||
|
@ -10,14 +10,50 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 页码选项背景色
|
||||
* @descEN Background color of Pagination item
|
||||
*/
|
||||
itemBg: string;
|
||||
/**
|
||||
* @desc 页码尺寸
|
||||
* @descEN Size of Pagination item
|
||||
*/
|
||||
itemSize: number;
|
||||
/**
|
||||
* @desc 页码激活态背景色
|
||||
* @descEN Background color of active Pagination item
|
||||
*/
|
||||
itemActiveBg: string;
|
||||
/**
|
||||
* @desc 小号页码尺寸
|
||||
* @descEN Size of small Pagination item
|
||||
*/
|
||||
itemSizeSM: number;
|
||||
/**
|
||||
* @desc 页码链接背景色
|
||||
* @descEN Background color of Pagination item link
|
||||
*/
|
||||
itemLinkBg: string;
|
||||
/**
|
||||
* @desc 页码激活态禁用状态背景色
|
||||
* @descEN Background color of disabled active Pagination item
|
||||
*/
|
||||
itemActiveBgDisabled: string;
|
||||
/**
|
||||
* @desc 页码激活态禁用状态文字颜色
|
||||
* @descEN Text color of disabled active Pagination item
|
||||
*/
|
||||
itemActiveColorDisabled: string;
|
||||
/**
|
||||
* @desc 输入框背景色
|
||||
* @descEN Background color of input
|
||||
*/
|
||||
itemInputBg: string;
|
||||
/**
|
||||
* @desc 每页展示数量选择器 top
|
||||
* @descEN Top of Pagination size changer
|
||||
*/
|
||||
miniOptionsSizeChangerTop: number;
|
||||
}
|
||||
|
||||
|
@ -2,6 +2,10 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 确认框 z-index
|
||||
* @descEN z-index of Popconfirm
|
||||
*/
|
||||
zIndexPopup: number;
|
||||
}
|
||||
|
||||
|
@ -5,8 +5,20 @@ import type { FullToken, GenerateStyle, PresetColorType } from '../../theme/inte
|
||||
import { PresetColors, genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 气泡卡片宽度
|
||||
* @descEN Width of Popover
|
||||
*/
|
||||
width: number;
|
||||
/**
|
||||
* @desc 气泡卡片最小宽度
|
||||
* @descEN Min width of Popover
|
||||
*/
|
||||
minWidth: number;
|
||||
/**
|
||||
* @desc 气泡卡片 z-index
|
||||
* @descEN z-index of Popover
|
||||
*/
|
||||
zIndexPopup: number;
|
||||
}
|
||||
|
||||
|
@ -6,18 +6,62 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
// ============================== Tokens ==============================
|
||||
export interface ComponentToken {
|
||||
// Radio
|
||||
/**
|
||||
* @desc 单选框大小
|
||||
* @descEN Radio size
|
||||
*/
|
||||
radioSize: number;
|
||||
/**
|
||||
* @desc 单选框圆点大小
|
||||
* @descEN Size of Radio dot
|
||||
*/
|
||||
dotSize: number;
|
||||
/**
|
||||
* @desc 单选框圆点禁用颜色
|
||||
* @descEN Color of disabled Radio dot
|
||||
*/
|
||||
dotColorDisabled: string;
|
||||
|
||||
// Radio buttons
|
||||
/**
|
||||
* @desc 单选框按钮背景色
|
||||
* @descEN Background color of Radio button
|
||||
*/
|
||||
buttonBg: string;
|
||||
/**
|
||||
* @desc 单选框按钮选中背景色
|
||||
* @descEN Background color of checked Radio button
|
||||
*/
|
||||
buttonCheckedBg: string;
|
||||
/**
|
||||
* @desc 单选框按钮文本颜色
|
||||
* @descEN Color of Radio button text
|
||||
*/
|
||||
buttonColor: string;
|
||||
/**
|
||||
* @desc 单选框按钮横向内间距
|
||||
* @descEN Horizontal padding of Radio button
|
||||
*/
|
||||
buttonPaddingInline: number;
|
||||
/**
|
||||
* @desc 单选框按钮选中并禁用时的背景色
|
||||
* @descEN Background color of checked and disabled Radio button
|
||||
*/
|
||||
buttonCheckedBgDisabled: string;
|
||||
/**
|
||||
* @desc 单选框按钮选中并禁用时的文本颜色
|
||||
* @descEN Color of checked and disabled Radio button text
|
||||
*/
|
||||
buttonCheckedColorDisabled: string;
|
||||
/**
|
||||
* @desc 单选框实色按钮选中时的文本颜色
|
||||
* @descEN Color of checked solid Radio button text
|
||||
*/
|
||||
buttonSolidCheckedColor: string;
|
||||
/**
|
||||
* @desc 单选框右间距
|
||||
* @descEN Margin right of Radio button
|
||||
*/
|
||||
wrapperMarginInlineEnd: number;
|
||||
}
|
||||
|
||||
|
@ -4,9 +4,25 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
|
||||
export type ComponentToken = {
|
||||
/**
|
||||
* @desc 星星颜色
|
||||
* @descEN Star color
|
||||
*/
|
||||
starColor: string;
|
||||
/**
|
||||
* @desc 星星大小
|
||||
* @descEN Star size
|
||||
*/
|
||||
starSize: number;
|
||||
/**
|
||||
* @desc 星星悬浮时的缩放
|
||||
* @descEN Scale of star when hover
|
||||
*/
|
||||
starHoverScale: CSSObject['transform'];
|
||||
/**
|
||||
* @desc 星星背景色
|
||||
* @descEN Star background color
|
||||
*/
|
||||
starBg: string;
|
||||
};
|
||||
|
||||
|
@ -4,9 +4,25 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 标题字体大小
|
||||
* @descEN Title font size
|
||||
*/
|
||||
titleFontSize: number;
|
||||
/**
|
||||
* @desc 副标题字体大小
|
||||
* @descEN Subtitle font size
|
||||
*/
|
||||
subtitleFontSize: number;
|
||||
/**
|
||||
* @desc 图标大小
|
||||
* @descEN Icon size
|
||||
*/
|
||||
iconFontSize: number;
|
||||
/**
|
||||
* @desc 额外区域外间距
|
||||
* @descEN Margin of extra area
|
||||
*/
|
||||
extraMargin: CSSProperties['margin'];
|
||||
}
|
||||
|
||||
|
@ -4,10 +4,30 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 选项文本颜色
|
||||
* @descEN Text color of item
|
||||
*/
|
||||
itemColor: string;
|
||||
/**
|
||||
* @desc 选项悬浮态文本颜色
|
||||
* @descEN Text color of item when hover
|
||||
*/
|
||||
itemHoverColor: string;
|
||||
/**
|
||||
* @desc 选项悬浮态背景颜色
|
||||
* @descEN Background color of item when hover
|
||||
*/
|
||||
itemHoverBg: string;
|
||||
/**
|
||||
* @desc 选项激活态背景颜色
|
||||
* @descEN Background color of item when active
|
||||
*/
|
||||
itemActiveBg: string;
|
||||
/**
|
||||
* @desc 选项选中时背景颜色
|
||||
* @descEN Background color of item when selected
|
||||
*/
|
||||
itemSelectedBg: string;
|
||||
}
|
||||
|
||||
|
@ -8,6 +8,10 @@ import genMultipleStyle from './multiple';
|
||||
import genSingleStyle from './single';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 下拉菜单 z-index
|
||||
* @descEN z-index of dropdown
|
||||
*/
|
||||
zIndexPopup: number;
|
||||
}
|
||||
|
||||
|
@ -8,11 +8,35 @@ export type ComponentToken = {
|
||||
color: string;
|
||||
/** @deprecated use gradientToColor instead. */
|
||||
colorGradientEnd: string;
|
||||
/**
|
||||
* @desc 渐变色起点颜色
|
||||
* @descEN Start color of gradient
|
||||
*/
|
||||
gradientFromColor: string;
|
||||
/**
|
||||
* @desc 渐变色终点颜色
|
||||
* @descEN End color of gradient
|
||||
*/
|
||||
gradientToColor: string;
|
||||
/**
|
||||
* @desc 标题骨架屏高度
|
||||
* @descEN Height of title skeleton
|
||||
*/
|
||||
titleHeight: number;
|
||||
/**
|
||||
* @desc 骨架屏圆角
|
||||
* @descEN Border radius of skeleton
|
||||
*/
|
||||
blockRadius: number;
|
||||
/**
|
||||
* @desc 段落骨架屏上间距
|
||||
* @descEN Margin top of paragraph skeleton
|
||||
*/
|
||||
paragraphMarginTop: number;
|
||||
/**
|
||||
* @desc 段落骨架屏单行高度
|
||||
* @descEN Line height of paragraph skeleton
|
||||
*/
|
||||
paragraphLiHeight: number;
|
||||
};
|
||||
|
||||
|
@ -12,12 +12,40 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
// horizontal: full (水平时,水平方向命名为 full)
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 滑动输入高度
|
||||
* @descEN Height of slider
|
||||
*/
|
||||
controlSize: number;
|
||||
/**
|
||||
* @desc 轨道高度
|
||||
* @descEN Height of rail
|
||||
*/
|
||||
railSize: number;
|
||||
/**
|
||||
* @desc 滑块尺寸
|
||||
* @descEN Size of handle
|
||||
*/
|
||||
handleSize: number;
|
||||
/**
|
||||
* @desc 滑块尺寸(悬浮态)
|
||||
* @descEN Size of handle when hover
|
||||
*/
|
||||
handleSizeHover: number;
|
||||
/**
|
||||
* @desc 滑块边框宽度
|
||||
* @descEN Border width of handle
|
||||
*/
|
||||
handleLineWidth: number;
|
||||
/**
|
||||
* @desc 滑块边框宽度(悬浮态)
|
||||
* @descEN Border width of handle when hover
|
||||
*/
|
||||
handleLineWidthHover: number;
|
||||
/**
|
||||
* @desc 滑块圆点尺寸
|
||||
* @descEN Size of dot
|
||||
*/
|
||||
dotSize: number;
|
||||
railBg: string;
|
||||
railHoverBg: string;
|
||||
|
@ -1,10 +1,14 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import { Keyframes } from '@ant-design/cssinjs';
|
||||
import { resetComponent } from '../../style';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
import { resetComponent } from '../../style';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 内容区域高度
|
||||
* @descEN Height of content area
|
||||
*/
|
||||
contentHeight: number;
|
||||
}
|
||||
|
||||
|
@ -4,7 +4,15 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 标题字体大小
|
||||
* @descEN Title font size
|
||||
*/
|
||||
titleFontSize: number;
|
||||
/**
|
||||
* @desc 内容字体大小
|
||||
* @descEN Content font size
|
||||
*/
|
||||
contentFontSize: number;
|
||||
}
|
||||
|
||||
|
@ -14,18 +14,70 @@ import genStepsSmallStyle from './small';
|
||||
import genStepsVerticalStyle from './vertical';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 描述区域最大宽度
|
||||
* @descEN Max width of description area
|
||||
*/
|
||||
descriptionMaxWidth: number;
|
||||
/**
|
||||
* @desc 自定义图标容器尺寸
|
||||
* @descEN Size of custom icon container
|
||||
*/
|
||||
customIconSize: number;
|
||||
/**
|
||||
* @desc 自定义图标 top
|
||||
* @descEN Top of custom icon
|
||||
*/
|
||||
customIconTop: number;
|
||||
/**
|
||||
* @desc 自定义图标大小
|
||||
* @descEN Font size of custom icon
|
||||
*/
|
||||
customIconFontSize: number;
|
||||
/**
|
||||
* @desc 图标容器尺寸
|
||||
* @descEN Size of icon container
|
||||
*/
|
||||
iconSize: number;
|
||||
/**
|
||||
* @desc 图标 top
|
||||
* @descEN Top of icon
|
||||
*/
|
||||
iconTop: number;
|
||||
/**
|
||||
* @desc 图标大小
|
||||
* @descEN Size of icon
|
||||
*/
|
||||
iconFontSize: number;
|
||||
/**
|
||||
* @desc 点状步骤点大小
|
||||
* @descEN Size of dot
|
||||
*/
|
||||
dotSize: number;
|
||||
/**
|
||||
* @desc 点状步骤点当前大小
|
||||
* @descEN Current size of dot
|
||||
*/
|
||||
dotCurrentSize: number;
|
||||
/**
|
||||
* @desc 可跳转步骤条箭头颜色
|
||||
* @descEN Color of arrow in nav
|
||||
*/
|
||||
navArrowColor: string;
|
||||
/**
|
||||
* @desc 可跳转步骤条内容最大宽度
|
||||
* @descEN Max width of nav content
|
||||
*/
|
||||
navContentMaxWidth: CSSProperties['maxWidth'];
|
||||
/**
|
||||
* @desc 小号步骤条图标大小
|
||||
* @descEN Size of small steps icon
|
||||
*/
|
||||
iconSizeSM: number;
|
||||
/**
|
||||
* @desc 标题行高
|
||||
* @descEN Line height of title
|
||||
*/
|
||||
titleLineHeight: number;
|
||||
}
|
||||
|
||||
|
@ -5,6 +5,7 @@ import omit from 'rc-util/lib/omit';
|
||||
import * as React from 'react';
|
||||
import type { Breakpoint } from '../_util/responsiveObserver';
|
||||
import scrollTo from '../_util/scrollTo';
|
||||
import type { AnyObject } from '../_util/type';
|
||||
import warning from '../_util/warning';
|
||||
import type { SizeType } from '../config-provider/SizeContext';
|
||||
import type { ConfigConsumerProps } from '../config-provider/context';
|
||||
@ -19,7 +20,6 @@ import Spin from '../spin';
|
||||
import type { TooltipProps } from '../tooltip';
|
||||
import renderExpandIcon from './ExpandIcon';
|
||||
import RcTable from './RcTable';
|
||||
import type { AnyObject } from './Table';
|
||||
import type { FilterState } from './hooks/useFilter';
|
||||
import useFilter, { getFilterData } from './hooks/useFilter';
|
||||
import useLazyKVMap from './hooks/useLazyKVMap';
|
||||
@ -109,7 +109,7 @@ export interface TableProps<RecordType>
|
||||
showSorterTooltip?: boolean | TooltipProps;
|
||||
}
|
||||
|
||||
const InternalTable = <RecordType extends AnyObject = any>(
|
||||
const InternalTable = <RecordType extends AnyObject = AnyObject>(
|
||||
props: InternalTableProps<RecordType>,
|
||||
ref: React.MutableRefObject<HTMLDivElement>,
|
||||
) => {
|
||||
|
@ -1,5 +1,6 @@
|
||||
import { EXPAND_COLUMN, Summary } from 'rc-table';
|
||||
import * as React from 'react';
|
||||
import type { AnyObject } from '../_util/type';
|
||||
import Column from './Column';
|
||||
import ColumnGroup from './ColumnGroup';
|
||||
import type { TableProps } from './InternalTable';
|
||||
@ -12,13 +13,11 @@ import {
|
||||
} from './hooks/useSelection';
|
||||
import type { RefTable } from './interface';
|
||||
|
||||
export type AnyObject = Record<PropertyKey, any>;
|
||||
|
||||
const Table = <RecordType extends AnyObject = any>(
|
||||
const Table = <RecordType extends AnyObject = AnyObject>(
|
||||
props: TableProps<RecordType>,
|
||||
ref: React.Ref<HTMLDivElement>,
|
||||
) => {
|
||||
const renderTimesRef = React.useRef(0);
|
||||
const renderTimesRef = React.useRef<number>(0);
|
||||
renderTimesRef.current += 1;
|
||||
return <InternalTable<RecordType> {...props} ref={ref} _renderTimes={renderTimesRef.current} />;
|
||||
};
|
||||
|
@ -251,7 +251,7 @@ describe('Table', () => {
|
||||
dataIndex: 'name',
|
||||
},
|
||||
];
|
||||
render(<Table columns={columns} rowKey={(record, index) => record + index} />);
|
||||
render(<Table columns={columns} rowKey={(record, index) => record.key + index} />);
|
||||
expect(warnSpy).toHaveBeenCalledWith(
|
||||
'Warning: [antd: Table] `index` parameter of `rowKey` function is deprecated. There is no guarantee that it will work as expected.',
|
||||
);
|
||||
|
@ -9,12 +9,12 @@ import { convertDataToEntities } from 'rc-tree/lib/utils/treeUtil';
|
||||
import useMergedState from 'rc-util/lib/hooks/useMergedState';
|
||||
import * as React from 'react';
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import type { AnyObject } from '../../_util/type';
|
||||
import warning from '../../_util/warning';
|
||||
import type { CheckboxProps } from '../../checkbox';
|
||||
import Checkbox from '../../checkbox';
|
||||
import Dropdown from '../../dropdown';
|
||||
import Radio from '../../radio';
|
||||
import type { AnyObject } from '../Table';
|
||||
import type {
|
||||
ColumnType,
|
||||
ColumnsType,
|
||||
@ -38,7 +38,7 @@ export const SELECTION_NONE = 'SELECT_NONE' as const;
|
||||
|
||||
const EMPTY_LIST: React.Key[] = [];
|
||||
|
||||
interface UseSelectionConfig<RecordType extends AnyObject = any> {
|
||||
interface UseSelectionConfig<RecordType extends AnyObject = AnyObject> {
|
||||
prefixCls: string;
|
||||
pageData: RecordType[];
|
||||
data: RecordType[];
|
||||
@ -56,7 +56,7 @@ export type INTERNAL_SELECTION_ITEM =
|
||||
| typeof SELECTION_INVERT
|
||||
| typeof SELECTION_NONE;
|
||||
|
||||
const flattenData = <RecordType extends AnyObject = any>(
|
||||
const flattenData = <RecordType extends AnyObject = AnyObject>(
|
||||
childrenColumnName: keyof RecordType,
|
||||
data?: RecordType[],
|
||||
): RecordType[] => {
|
||||
@ -70,7 +70,7 @@ const flattenData = <RecordType extends AnyObject = any>(
|
||||
return list;
|
||||
};
|
||||
|
||||
const useSelection = <RecordType extends AnyObject = any>(
|
||||
const useSelection = <RecordType extends AnyObject = AnyObject>(
|
||||
config: UseSelectionConfig<RecordType>,
|
||||
rowSelection?: TableRowSelection<RecordType>,
|
||||
): readonly [TransformColumns<RecordType>, Set<Key>] => {
|
||||
|
@ -7,23 +7,24 @@ import type {
|
||||
import { ExpandableConfig, GetRowKey } from 'rc-table/lib/interface';
|
||||
import type * as React from 'react';
|
||||
import type { Breakpoint } from '../_util/responsiveObserver';
|
||||
import type { AnyObject } from '../_util/type';
|
||||
import type { CheckboxProps } from '../checkbox';
|
||||
import type { PaginationProps } from '../pagination';
|
||||
import type { TooltipProps } from '../tooltip';
|
||||
import type { InternalTableProps, TableProps } from './InternalTable';
|
||||
import type { INTERNAL_SELECTION_ITEM } from './hooks/useSelection';
|
||||
|
||||
export type RefTable = <RecordType extends object = any>(
|
||||
export type RefTable = <RecordType extends AnyObject = AnyObject>(
|
||||
props: React.PropsWithChildren<TableProps<RecordType>> & { ref?: React.Ref<HTMLDivElement> },
|
||||
) => React.ReactElement;
|
||||
|
||||
export type RefInternalTable = <RecordType extends object = any>(
|
||||
export type RefInternalTable = <RecordType extends AnyObject = AnyObject>(
|
||||
props: React.PropsWithChildren<InternalTableProps<RecordType>> & {
|
||||
ref?: React.Ref<HTMLDivElement>;
|
||||
},
|
||||
) => React.ReactElement;
|
||||
|
||||
export { GetRowKey, ExpandableConfig };
|
||||
export { ExpandableConfig, GetRowKey };
|
||||
|
||||
export type Key = React.Key;
|
||||
|
||||
@ -82,7 +83,7 @@ export type ColumnTitle<RecordType> =
|
||||
|
||||
export type FilterValue = (Key | boolean)[];
|
||||
export type FilterKey = Key[] | null;
|
||||
export type FilterSearchType<RecordType = Record<string, any>> =
|
||||
export type FilterSearchType<RecordType = AnyObject> =
|
||||
| boolean
|
||||
| ((input: string, record: RecordType) => boolean);
|
||||
export interface FilterConfirmProps {
|
||||
|
@ -5,28 +5,120 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
import genMotionStyle from './motion';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 下拉菜单 z-index
|
||||
* @descEN z-index of dropdown menu
|
||||
*/
|
||||
zIndexPopup: number;
|
||||
/**
|
||||
* @desc 卡片标签页背景色
|
||||
* @descEN Background color of card tab
|
||||
*/
|
||||
cardBg: string;
|
||||
/**
|
||||
* @desc 卡片标签页高度
|
||||
* @descEN Height of card tab
|
||||
*/
|
||||
cardHeight: number;
|
||||
/**
|
||||
* @desc 卡片标签页内间距
|
||||
* @descEN Padding of card tab
|
||||
*/
|
||||
cardPadding: string;
|
||||
/**
|
||||
* @desc 小号卡片标签页内间距
|
||||
* @descEN Padding of small card tab
|
||||
*/
|
||||
cardPaddingSM: string;
|
||||
/**
|
||||
* @desc 大号卡片标签页内间距
|
||||
* @descEN Padding of large card tab
|
||||
*/
|
||||
cardPaddingLG: string;
|
||||
/**
|
||||
* @desc 标齐页标题文本大小
|
||||
* @descEN Font size of title
|
||||
*/
|
||||
titleFontSize: number;
|
||||
/**
|
||||
* @desc 大号标签页标题文本大小
|
||||
* @descEN Font size of large title
|
||||
*/
|
||||
titleFontSizeLG: number;
|
||||
/**
|
||||
* @desc 小号标签页标题文本大小
|
||||
* @descEN Font size of small title
|
||||
*/
|
||||
titleFontSizeSM: number;
|
||||
/**
|
||||
* @desc 指示条颜色
|
||||
* @descEN Color of indicator
|
||||
*/
|
||||
inkBarColor: string;
|
||||
/**
|
||||
* @desc 横向标签页外间距
|
||||
* @descEN Horizontal margin of horizontal tab
|
||||
*/
|
||||
horizontalMargin: string;
|
||||
/**
|
||||
* @desc 横向标签页标签间距
|
||||
* @descEN Horizontal gutter of horizontal tab
|
||||
*/
|
||||
horizontalItemGutter: number;
|
||||
/**
|
||||
* @desc 横向标签页标签外间距
|
||||
* @descEN Horizontal margin of horizontal tab item
|
||||
*/
|
||||
horizontalItemMargin: string;
|
||||
/**
|
||||
* @desc 横向标签页标签外间距(RTL)
|
||||
* @descEN Horizontal margin of horizontal tab item (RTL)
|
||||
*/
|
||||
horizontalItemMarginRTL: string;
|
||||
/**
|
||||
* @desc 横向标签页标签内间距
|
||||
* @descEN Horizontal padding of horizontal tab item
|
||||
*/
|
||||
horizontalItemPadding: string;
|
||||
/**
|
||||
* @desc 大号横向标签页标签内间距
|
||||
* @descEN Horizontal padding of large horizontal tab item
|
||||
*/
|
||||
horizontalItemPaddingLG: string;
|
||||
/**
|
||||
* @desc 小号横向标签页标签内间距
|
||||
* @descEN Horizontal padding of small horizontal tab item
|
||||
*/
|
||||
horizontalItemPaddingSM: string;
|
||||
/**
|
||||
* @desc 纵向标签页标签内间距
|
||||
* @descEN Vertical padding of vertical tab item
|
||||
*/
|
||||
verticalItemPadding: string;
|
||||
/**
|
||||
* @desc 纵向标签页标签外间距
|
||||
* @descEN Vertical margin of vertical tab item
|
||||
*/
|
||||
verticalItemMargin: string;
|
||||
/**
|
||||
* @desc 标签激活态文本颜色
|
||||
* @descEN Text color of active tab
|
||||
*/
|
||||
itemActiveColor: string;
|
||||
/**
|
||||
* @desc 标签悬浮态文本颜色
|
||||
* @descEN Text color of hover tab
|
||||
*/
|
||||
itemHoverColor: string;
|
||||
/**
|
||||
* @desc 标签选中态文本颜色
|
||||
* @descEN Text color of selected tab
|
||||
*/
|
||||
itemSelectedColor: string;
|
||||
/**
|
||||
* @desc 卡片标签间距
|
||||
* @descEN Gutter of card tab
|
||||
*/
|
||||
cardGutter: number;
|
||||
}
|
||||
|
||||
|
@ -6,7 +6,15 @@ import type { FullToken } from '../../theme/internal';
|
||||
import { genComponentStyleHook, genPresetColor, mergeToken } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 默认背景色
|
||||
* @descEN Default background color
|
||||
*/
|
||||
defaultBg: string;
|
||||
/**
|
||||
* @desc 默认文字颜色
|
||||
* @descEN Default text color
|
||||
*/
|
||||
defaultColor: string;
|
||||
}
|
||||
|
||||
|
@ -4,10 +4,30 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 轨迹颜色
|
||||
* @descEN Line color
|
||||
*/
|
||||
tailColor: string;
|
||||
/**
|
||||
* @desc 轨迹宽度
|
||||
* @descEN Line width
|
||||
*/
|
||||
tailWidth: number;
|
||||
/**
|
||||
* @desc 节点边框宽度
|
||||
* @descEN Border width of node
|
||||
*/
|
||||
dotBorderWidth: number;
|
||||
/**
|
||||
* @desc 节点背景色
|
||||
* @descEN Background color of node
|
||||
*/
|
||||
dotBg: string;
|
||||
/**
|
||||
* @desc 时间项下间距
|
||||
* @descEN Bottom padding of item
|
||||
*/
|
||||
itemPaddingBottom: number;
|
||||
}
|
||||
|
||||
|
@ -5,7 +5,12 @@ import type { FullToken, GenerateStyle, UseComponentStyleResult } from '../../th
|
||||
import { genComponentStyleHook, genPresetColor, mergeToken } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 文字提示 z-index
|
||||
* @descEN z-index of tooltip
|
||||
*/
|
||||
zIndexPopup: number;
|
||||
/** @deprecated */
|
||||
colorBgDefault: string;
|
||||
}
|
||||
|
||||
|
@ -4,11 +4,35 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 列表宽度
|
||||
* @descEN Width of list
|
||||
*/
|
||||
listWidth: number;
|
||||
/**
|
||||
* @desc 大号列表宽度
|
||||
* @descEN Width of large list
|
||||
*/
|
||||
listWidthLG: number;
|
||||
/**
|
||||
* @desc 列表高度
|
||||
* @descEN Height of list
|
||||
*/
|
||||
listHeight: number;
|
||||
/**
|
||||
* @desc 列表项高度
|
||||
* @descEN Height of list item
|
||||
*/
|
||||
itemHeight: number;
|
||||
/**
|
||||
* @desc 列表项纵向内边距
|
||||
* @descEN Vertical padding of list item
|
||||
*/
|
||||
itemPaddingBlock: number;
|
||||
/**
|
||||
* @desc 顶部高度
|
||||
* @descEN Height of header
|
||||
*/
|
||||
headerHeight: number;
|
||||
}
|
||||
|
||||
|
@ -12,9 +12,16 @@ import {
|
||||
|
||||
/** Component only token. Which will handle additional calculation of alias token */
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 标题上间距
|
||||
* @descEN Margin top of title
|
||||
*/
|
||||
titleMarginTop: number | string;
|
||||
/**
|
||||
* @desc 标题下间距
|
||||
* @descEN Margin bottom of title
|
||||
*/
|
||||
titleMarginBottom: number | string;
|
||||
fontWeightStrong: number;
|
||||
}
|
||||
|
||||
export type TypographyToken = FullToken<'Typography'>;
|
||||
@ -126,9 +133,8 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = (token) => {
|
||||
export default genComponentStyleHook(
|
||||
'Typography',
|
||||
(token) => [genTypographyStyle(token)],
|
||||
(token) => ({
|
||||
() => ({
|
||||
titleMarginTop: '1.2em',
|
||||
titleMarginBottom: '0.5em',
|
||||
fontWeightStrong: token.fontWeightStrong,
|
||||
}),
|
||||
);
|
||||
|
@ -9,6 +9,10 @@ import { genPictureCardStyle, genPictureStyle } from './picture';
|
||||
import genRtlStyle from './rtl';
|
||||
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 操作按扭颜色
|
||||
* @descEN Action button color
|
||||
*/
|
||||
actionsColor: string;
|
||||
}
|
||||
|
||||
|
@ -2,11 +2,20 @@ import fs from 'fs-extra';
|
||||
import type { DeclarationReflection } from 'typedoc';
|
||||
import { Application, TSConfigReader, TypeDocReader } from 'typedoc';
|
||||
|
||||
type TokenMeta = {
|
||||
seed: ReturnType<typeof getTokenList>;
|
||||
map: ReturnType<typeof getTokenList>;
|
||||
alias: ReturnType<typeof getTokenList>;
|
||||
components: Record<string, ReturnType<typeof getTokenList>>;
|
||||
};
|
||||
|
||||
function getTokenList(list?: DeclarationReflection[], source?: string) {
|
||||
return (list || [])
|
||||
.filter(
|
||||
(item) =>
|
||||
!item.comment?.blockTags.some((tag) => tag.tag === '@internal' || tag.tag === '@private'),
|
||||
!item.comment?.blockTags.some(
|
||||
(tag) => tag.tag === '@internal' || tag.tag === '@private' || tag.tag === '@deprecated',
|
||||
),
|
||||
)
|
||||
.map((item) => ({
|
||||
source,
|
||||
@ -40,7 +49,8 @@ const main = () => {
|
||||
|
||||
app.bootstrap({
|
||||
// typedoc options here
|
||||
entryPoints: ['components/theme/interface/index.ts'],
|
||||
entryPoints: ['components/theme/interface/index.ts', 'components/*/style/index.{ts,tsx}'],
|
||||
skipErrorChecking: true,
|
||||
});
|
||||
|
||||
const project = app.convert();
|
||||
@ -48,9 +58,19 @@ const main = () => {
|
||||
if (project) {
|
||||
// Project may not have converted correctly
|
||||
const output = 'components/version/token-meta.json';
|
||||
const tokenMeta: Record<PropertyKey, ReturnType<typeof getTokenList>> = {};
|
||||
const tokenMeta: TokenMeta = {
|
||||
seed: [],
|
||||
map: [],
|
||||
alias: [],
|
||||
components: {},
|
||||
};
|
||||
|
||||
// eslint-disable-next-line no-restricted-syntax
|
||||
project?.children?.forEach((file) => {
|
||||
// Global Token
|
||||
if (file.name === 'theme/interface') {
|
||||
let presetColors: string[] = [];
|
||||
project.children?.forEach((type) => {
|
||||
file.children?.forEach((type) => {
|
||||
if (type.name === 'SeedToken') {
|
||||
tokenMeta.seed = getTokenList(type.children, 'seed');
|
||||
} else if (type.name === 'MapToken') {
|
||||
@ -79,10 +99,22 @@ const main = () => {
|
||||
tokenMeta.map = tokenMeta.map.filter(
|
||||
(item) => !tokenMeta.seed.some((seedItem) => seedItem.token === item.token),
|
||||
);
|
||||
} else {
|
||||
const component = file.name
|
||||
.slice(0, file.name.indexOf('/'))
|
||||
.replace(/(^(.)|-(.))/g, (match) => match.replace('-', '').toUpperCase());
|
||||
const componentToken = file.children?.find((item) => item.name === `ComponentToken`);
|
||||
if (componentToken) {
|
||||
tokenMeta.components[component] = getTokenList(componentToken.children, component);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const finalMeta = Object.entries(tokenMeta).reduce((acc, [key, value]) => {
|
||||
value.forEach((item) => {
|
||||
acc[item.token] = {
|
||||
if (key !== 'components') {
|
||||
(value as any[]).forEach((item) => {
|
||||
acc.global = acc.global || {};
|
||||
acc.global[item.token] = {
|
||||
name: item.name,
|
||||
nameEn: item.nameEn,
|
||||
desc: item.desc,
|
||||
@ -91,6 +123,9 @@ const main = () => {
|
||||
source: key,
|
||||
};
|
||||
});
|
||||
} else {
|
||||
acc.components = value;
|
||||
}
|
||||
return acc;
|
||||
}, {} as any);
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user