mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 01:13:58 +08:00
feat: input token (#44325)
* feat: input token * feat: input number token * feat: input token * fix: date-picker & calendar * fix: calendar style * fix: token use
This commit is contained in:
MadCcc
GitHub
parent
f34ff52cec
commit
d1d3b57dcb
@ -1,8 +1,6 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { PickerPanelToken } from '../../date-picker/style';
|
||||
import { genPanelStyle, initPickerPanelToken } from '../../date-picker/style';
|
||||
import type { InputToken } from '../../input/style';
|
||||
import { initInputToken } from '../../input/style';
|
||||
import { resetComponent } from '../../style';
|
||||
import type { FullToken } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
@ -40,7 +38,7 @@ export interface ComponentToken {
|
||||
itemActiveBg: string;
|
||||
}
|
||||
|
||||
interface CalendarToken extends InputToken<FullToken<'Calendar'>>, PickerPanelToken {
|
||||
interface CalendarToken extends FullToken<'Calendar'>, PickerPanelToken {
|
||||
calendarCls: string;
|
||||
dateValueHeight: number;
|
||||
weekHeight: number;
|
||||
@ -215,18 +213,14 @@ export default genComponentStyleHook(
|
||||
'Calendar',
|
||||
(token) => {
|
||||
const calendarCls = `${token.componentCls}-calendar`;
|
||||
const calendarToken = mergeToken<CalendarToken>(
|
||||
initInputToken<FullToken<'Calendar'>>(token),
|
||||
initPickerPanelToken(token),
|
||||
{
|
||||
calendarCls,
|
||||
pickerCellInnerCls: `${token.componentCls}-cell-inner`,
|
||||
dateValueHeight: token.controlHeightSM,
|
||||
weekHeight: token.controlHeightSM * 0.75,
|
||||
dateContentHeight:
|
||||
(token.fontSizeSM * token.lineHeightSM + token.marginXS) * 3 + token.lineWidth * 2,
|
||||
},
|
||||
);
|
||||
const calendarToken = mergeToken<CalendarToken>(token, initPickerPanelToken(token), {
|
||||
calendarCls,
|
||||
pickerCellInnerCls: `${token.componentCls}-cell-inner`,
|
||||
dateValueHeight: token.controlHeightSM,
|
||||
weekHeight: token.controlHeightSM * 0.75,
|
||||
dateContentHeight:
|
||||
(token.fontSizeSM * token.lineHeightSM + token.marginXS) * 3 + token.lineWidth * 2,
|
||||
});
|
||||
|
||||
return [genCalendarStyles(calendarToken)];
|
||||
},
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import type { InputToken } from '../../input/style';
|
||||
import type { SharedComponentToken, SharedInputToken } from '../../input/style';
|
||||
import {
|
||||
genActiveStyle,
|
||||
genBasicInputStyle,
|
||||
genHoverStyle,
|
||||
initComponentToken,
|
||||
initInputToken,
|
||||
} from '../../input/style';
|
||||
import { resetComponent, roundedArrow, textEllipsis } from '../../style';
|
||||
@ -22,7 +23,7 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
|
||||
|
||||
export interface ComponentToken {
|
||||
export interface ComponentToken extends Exclude<SharedComponentToken, 'addonBg'> {
|
||||
/**
|
||||
* @desc 预设区域宽度
|
||||
* @descEN Width of preset area
|
||||
@ -61,9 +62,9 @@ export type PickerPanelToken = {
|
||||
pickerControlIconBorderWidth: number;
|
||||
};
|
||||
|
||||
type PickerToken = InputToken<FullToken<'DatePicker'>> & PickerPanelToken;
|
||||
type PickerToken = FullToken<'DatePicker'> & PickerPanelToken & SharedInputToken;
|
||||
|
||||
type SharedPickerToken = Omit<PickerToken, 'zIndexPopup' | 'presetsWidth' | 'presetsMaxWidth'>;
|
||||
type SharedPickerToken = TokenWithCommonCls<GlobalToken> & PickerPanelToken;
|
||||
|
||||
const genPikerPadding = (
|
||||
token: PickerToken,
|
||||
@ -951,8 +952,8 @@ const genPickerStatusStyle: GenerateStyle<PickerToken> = (token) => {
|
||||
[`&${componentCls}-focused, &:focus`]: {
|
||||
...genActiveStyle(
|
||||
mergeToken<PickerToken>(token, {
|
||||
inputBorderActiveColor: colorError,
|
||||
inputBorderHoverColor: colorError,
|
||||
activeBorderColor: colorError,
|
||||
hoverBorderColor: colorError,
|
||||
controlOutline: colorErrorOutline,
|
||||
}),
|
||||
),
|
||||
@ -972,8 +973,8 @@ const genPickerStatusStyle: GenerateStyle<PickerToken> = (token) => {
|
||||
[`&${componentCls}-focused, &:focus`]: {
|
||||
...genActiveStyle(
|
||||
mergeToken<PickerToken>(token, {
|
||||
inputBorderActiveColor: colorWarning,
|
||||
inputBorderHoverColor: colorWarning,
|
||||
activeBorderColor: colorWarning,
|
||||
hoverBorderColor: colorWarning,
|
||||
controlOutline: colorWarningOutline,
|
||||
}),
|
||||
),
|
||||
@ -993,7 +994,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
|
||||
antCls,
|
||||
controlHeight,
|
||||
fontSize,
|
||||
inputPaddingHorizontal,
|
||||
paddingInline,
|
||||
colorBgContainer,
|
||||
lineWidth,
|
||||
lineType,
|
||||
@ -1006,7 +1007,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
|
||||
controlHeightLG,
|
||||
fontSizeLG,
|
||||
controlHeightSM,
|
||||
inputPaddingHorizontalSM,
|
||||
paddingInlineSM,
|
||||
paddingXS,
|
||||
marginXS,
|
||||
colorTextDescription,
|
||||
@ -1039,7 +1040,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
|
||||
{
|
||||
[componentCls]: {
|
||||
...resetComponent(token),
|
||||
...genPikerPadding(token, controlHeight, fontSize, inputPaddingHorizontal),
|
||||
...genPikerPadding(token, controlHeight, fontSize, paddingInline),
|
||||
position: 'relative',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
@ -1117,7 +1118,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
|
||||
|
||||
// Size
|
||||
'&-large': {
|
||||
...genPikerPadding(token, controlHeightLG, fontSizeLG, inputPaddingHorizontal),
|
||||
...genPikerPadding(token, controlHeightLG, fontSizeLG, paddingInline),
|
||||
|
||||
[`${componentCls}-input > input`]: {
|
||||
fontSize: fontSizeLG,
|
||||
@ -1125,7 +1126,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
|
||||
},
|
||||
|
||||
'&-small': {
|
||||
...genPikerPadding(token, controlHeightSM, fontSize, inputPaddingHorizontalSM),
|
||||
...genPikerPadding(token, controlHeightSM, fontSize, paddingInlineSM),
|
||||
},
|
||||
|
||||
[`${componentCls}-suffix`]: {
|
||||
@ -1195,7 +1196,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
|
||||
|
||||
// Clear
|
||||
[`${componentCls}-clear`]: {
|
||||
insetInlineEnd: inputPaddingHorizontal,
|
||||
insetInlineEnd: paddingInline,
|
||||
},
|
||||
|
||||
'&:hover': {
|
||||
@ -1208,7 +1209,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
|
||||
[`${componentCls}-active-bar`]: {
|
||||
bottom: -lineWidth,
|
||||
height: lineWidthBold,
|
||||
marginInlineStart: inputPaddingHorizontal,
|
||||
marginInlineStart: paddingInline,
|
||||
background: colorPrimary,
|
||||
opacity: 0,
|
||||
transition: `all ${motionDurationSlow} ease-out`,
|
||||
@ -1229,11 +1230,11 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
|
||||
|
||||
[`&${componentCls}-small`]: {
|
||||
[`${componentCls}-clear`]: {
|
||||
insetInlineEnd: inputPaddingHorizontalSM,
|
||||
insetInlineEnd: paddingInlineSM,
|
||||
},
|
||||
|
||||
[`${componentCls}-active-bar`]: {
|
||||
marginInlineStart: inputPaddingHorizontalSM,
|
||||
marginInlineStart: paddingInlineSM,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -1342,7 +1343,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
|
||||
position: 'absolute',
|
||||
zIndex: 1,
|
||||
display: 'none',
|
||||
marginInlineStart: inputPaddingHorizontal * 1.5,
|
||||
marginInlineStart: paddingInline * 1.5,
|
||||
transition: `left ${motionDurationSlow} ease-out`,
|
||||
...roundedArrow(
|
||||
sizePopupArrow,
|
||||
@ -1501,10 +1502,7 @@ export const initPickerPanelToken = (token: TokenWithCommonCls<GlobalToken>): Pi
|
||||
export default genComponentStyleHook(
|
||||
'DatePicker',
|
||||
(token) => {
|
||||
const pickerToken = mergeToken<PickerToken>(
|
||||
initInputToken<FullToken<'DatePicker'>>(token),
|
||||
initPickerPanelToken(token),
|
||||
);
|
||||
const pickerToken = mergeToken<PickerToken>(initInputToken(token), initPickerPanelToken(token));
|
||||
return [
|
||||
genPickerStyle(pickerToken),
|
||||
genPickerStatusStyle(pickerToken),
|
||||
@ -1517,6 +1515,7 @@ export default genComponentStyleHook(
|
||||
];
|
||||
},
|
||||
(token) => ({
|
||||
...initComponentToken(token),
|
||||
presetsWidth: 120,
|
||||
presetsMaxWidth: 200,
|
||||
zIndexPopup: token.zIndexPopupBase + 50,
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import type { InputToken } from '../../input/style';
|
||||
import type { SharedInputToken, SharedComponentToken } from '../../input/style';
|
||||
import {
|
||||
initComponentToken,
|
||||
initInputToken,
|
||||
genActiveStyle,
|
||||
genBasicInputStyle,
|
||||
genDisabledStyle,
|
||||
@ -7,14 +9,13 @@ import {
|
||||
genInputGroupStyle,
|
||||
genPlaceholderStyle,
|
||||
genStatusStyle,
|
||||
initInputToken,
|
||||
} from '../../input/style';
|
||||
import { resetComponent, resetIcon } from '../../style';
|
||||
import { genCompactItemStyle } from '../../style/compact-item';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {
|
||||
export interface ComponentToken extends SharedComponentToken {
|
||||
/**
|
||||
* @desc 输入框宽度
|
||||
* @descEN Width of input
|
||||
@ -36,9 +37,29 @@ export interface ComponentToken {
|
||||
* @descEN Handle visible
|
||||
*/
|
||||
handleVisible: 'auto' | true;
|
||||
/**
|
||||
* @desc 操作按钮背景色
|
||||
* @descEN Background color of handle
|
||||
*/
|
||||
handleBg: string;
|
||||
/**
|
||||
* @desc 操作按钮激活背景色
|
||||
* @descEN Active background color of handle
|
||||
*/
|
||||
handleActiveBg: string;
|
||||
/**
|
||||
* @desc 操作按钮悬浮颜色
|
||||
* @descEN Hover color of handle
|
||||
*/
|
||||
handleHoverColor: string;
|
||||
/**
|
||||
* @desc 操作按钮边框颜色
|
||||
* @descEN Border color of handle
|
||||
*/
|
||||
handleBorderColor: string;
|
||||
}
|
||||
|
||||
type InputNumberToken = InputToken<FullToken<'InputNumber'>>;
|
||||
type InputNumberToken = FullToken<'InputNumber'> & SharedInputToken;
|
||||
|
||||
export const genRadiusStyle = (
|
||||
{ componentCls, borderRadiusSM, borderRadiusLG }: InputNumberToken,
|
||||
@ -72,18 +93,20 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
controlHeightLG,
|
||||
controlHeightSM,
|
||||
colorError,
|
||||
inputPaddingHorizontalSM,
|
||||
paddingInlineSM,
|
||||
colorTextDescription,
|
||||
motionDurationMid,
|
||||
colorPrimary,
|
||||
inputPaddingHorizontal,
|
||||
inputPaddingVertical,
|
||||
colorBgContainer,
|
||||
handleHoverColor,
|
||||
paddingInline,
|
||||
paddingBlock,
|
||||
handleBg,
|
||||
handleActiveBg,
|
||||
colorTextDisabled,
|
||||
borderRadiusSM,
|
||||
borderRadiusLG,
|
||||
controlWidth,
|
||||
handleVisible,
|
||||
handleBorderColor,
|
||||
} = token;
|
||||
|
||||
return [
|
||||
@ -124,7 +147,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
|
||||
[`input${componentCls}-input`]: {
|
||||
height: controlHeightSM - 2 * lineWidth,
|
||||
padding: `0 ${inputPaddingHorizontalSM}px`,
|
||||
padding: `0 ${paddingInlineSM}px`,
|
||||
},
|
||||
},
|
||||
|
||||
@ -186,7 +209,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
'&-input': {
|
||||
...resetComponent(token),
|
||||
width: '100%',
|
||||
padding: `${inputPaddingVertical}px ${inputPaddingHorizontal}px`,
|
||||
padding: `${paddingBlock}px ${paddingInline}px`,
|
||||
textAlign: 'start',
|
||||
backgroundColor: 'transparent',
|
||||
border: 0,
|
||||
@ -222,7 +245,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
insetInlineEnd: 0,
|
||||
width: token.handleWidth,
|
||||
height: '100%',
|
||||
background: colorBgContainer,
|
||||
background: handleBg,
|
||||
borderStartStartRadius: 0,
|
||||
borderStartEndRadius: borderRadius,
|
||||
borderEndEndRadius: borderRadius,
|
||||
@ -261,10 +284,10 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
lineHeight: 0,
|
||||
textAlign: 'center',
|
||||
cursor: 'pointer',
|
||||
borderInlineStart: `${lineWidth}px ${lineType} ${colorBorder}`,
|
||||
borderInlineStart: `${lineWidth}px ${lineType} ${handleBorderColor}`,
|
||||
transition: `all ${motionDurationMid} linear`,
|
||||
'&:active': {
|
||||
background: token.colorFillAlter,
|
||||
background: handleActiveBg,
|
||||
},
|
||||
|
||||
// Hover
|
||||
@ -275,7 +298,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
${componentCls}-handler-up-inner,
|
||||
${componentCls}-handler-down-inner
|
||||
`]: {
|
||||
color: colorPrimary,
|
||||
color: handleHoverColor,
|
||||
},
|
||||
},
|
||||
|
||||
@ -293,7 +316,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
},
|
||||
|
||||
[`${componentCls}-handler-down`]: {
|
||||
borderBlockStart: `${lineWidth}px ${lineType} ${colorBorder}`,
|
||||
borderBlockStart: `${lineWidth}px ${lineType} ${handleBorderColor}`,
|
||||
borderEndEndRadius: borderRadius,
|
||||
},
|
||||
|
||||
@ -344,8 +367,8 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumberToken) => {
|
||||
const {
|
||||
componentCls,
|
||||
inputPaddingVertical,
|
||||
inputPaddingHorizontal,
|
||||
paddingBlock,
|
||||
paddingInline,
|
||||
inputAffixPadding,
|
||||
controlWidth,
|
||||
borderRadiusLG,
|
||||
@ -361,7 +384,7 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
|
||||
display: 'inline-flex',
|
||||
width: controlWidth,
|
||||
padding: 0,
|
||||
paddingInlineStart: inputPaddingHorizontal,
|
||||
paddingInlineStart: paddingInline,
|
||||
|
||||
'&-lg': {
|
||||
borderRadius: borderRadiusLG,
|
||||
@ -395,7 +418,7 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
|
||||
},
|
||||
|
||||
[`input${componentCls}-input`]: {
|
||||
padding: `${inputPaddingVertical}px 0`,
|
||||
padding: `${paddingBlock}px 0`,
|
||||
},
|
||||
|
||||
'&::before': {
|
||||
@ -427,7 +450,7 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
|
||||
insetInlineEnd: 0,
|
||||
zIndex: 1,
|
||||
height: '100%',
|
||||
marginInlineEnd: inputPaddingHorizontal,
|
||||
marginInlineEnd: paddingInline,
|
||||
marginInlineStart: inputAffixPadding,
|
||||
},
|
||||
},
|
||||
@ -439,7 +462,7 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
|
||||
export default genComponentStyleHook(
|
||||
'InputNumber',
|
||||
(token) => {
|
||||
const inputNumberToken = initInputToken<FullToken<'InputNumber'>>(token);
|
||||
const inputNumberToken = mergeToken<InputNumberToken>(token, initInputToken(token));
|
||||
return [
|
||||
genInputNumberStyles(inputNumberToken),
|
||||
genAffixWrapperStyles(inputNumberToken),
|
||||
@ -450,9 +473,14 @@ export default genComponentStyleHook(
|
||||
];
|
||||
},
|
||||
(token) => ({
|
||||
...initComponentToken(token),
|
||||
controlWidth: 90,
|
||||
handleWidth: token.controlHeightSM - token.lineWidth * 2,
|
||||
handleFontSize: token.fontSize / 2,
|
||||
handleVisible: 'auto',
|
||||
handleActiveBg: token.colorFillAlter,
|
||||
handleBg: token.colorBgContainer,
|
||||
handleHoverColor: token.colorPrimary,
|
||||
handleBorderColor: token.colorBorder,
|
||||
}),
|
||||
);
|
||||
|
||||
@ -5,17 +5,61 @@ import type { GlobalToken } from '../../theme/interface';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
|
||||
export type InputToken<T extends GlobalToken = FullToken<'Input'>> = T & {
|
||||
export interface SharedComponentToken {
|
||||
/**
|
||||
* @desc 输入框横向内边距
|
||||
* @descEN Horizontal padding of input
|
||||
*/
|
||||
paddingInline: number;
|
||||
/**
|
||||
* @desc 小号输入框横向内边距
|
||||
* @descEN Horizontal padding of small input
|
||||
*/
|
||||
paddingInlineSM: number;
|
||||
/**
|
||||
* @desc 大号输入框横向内边距
|
||||
* @descEN Horizontal padding of large input
|
||||
*/
|
||||
paddingInlineLG: number;
|
||||
/**
|
||||
* @desc 输入框纵向内边距
|
||||
* @descEN Vertical padding of input
|
||||
*/
|
||||
paddingBlock: number;
|
||||
/**
|
||||
* @desc 小号输入框纵向内边距
|
||||
* @descEN Vertical padding of small input
|
||||
*/
|
||||
paddingBlockSM: number;
|
||||
/**
|
||||
* @desc 大号输入框纵向内边距
|
||||
* @descEN Vertical padding of large input
|
||||
*/
|
||||
paddingBlockLG: number;
|
||||
/**
|
||||
* @desc 前/后置标签背景色
|
||||
* @descEN Background color of addon
|
||||
*/
|
||||
addonBg: string;
|
||||
/**
|
||||
* @desc 悬浮态边框色
|
||||
* @descEN Hover border color
|
||||
*/
|
||||
hoverBorderColor: string;
|
||||
/**
|
||||
* @desc 激活态边框色
|
||||
* @descEN Active border color
|
||||
*/
|
||||
activeBorderColor: string;
|
||||
}
|
||||
|
||||
export interface ComponentToken extends SharedComponentToken {}
|
||||
|
||||
export interface SharedInputToken {
|
||||
inputAffixPadding: number;
|
||||
inputPaddingVertical: number;
|
||||
inputPaddingVerticalLG: number;
|
||||
inputPaddingVerticalSM: number;
|
||||
inputPaddingHorizontal: number;
|
||||
inputPaddingHorizontalLG: number;
|
||||
inputPaddingHorizontalSM: number;
|
||||
inputBorderHoverColor: string;
|
||||
inputBorderActiveColor: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface InputToken extends FullToken<'Input'>, SharedInputToken {}
|
||||
|
||||
export const genPlaceholderStyle = (color: string): CSSObject => ({
|
||||
// Firefox
|
||||
@ -32,12 +76,12 @@ export const genPlaceholderStyle = (color: string): CSSObject => ({
|
||||
});
|
||||
|
||||
export const genHoverStyle = (token: InputToken): CSSObject => ({
|
||||
borderColor: token.inputBorderHoverColor,
|
||||
borderColor: token.hoverBorderColor,
|
||||
borderInlineEndWidth: token.lineWidth,
|
||||
});
|
||||
|
||||
export const genActiveStyle = (token: InputToken) => ({
|
||||
borderColor: token.inputBorderHoverColor,
|
||||
borderColor: token.activeBorderColor,
|
||||
boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.controlOutline}`,
|
||||
borderInlineEndWidth: token.lineWidth,
|
||||
outline: 0,
|
||||
@ -52,21 +96,15 @@ export const genDisabledStyle = (token: InputToken): CSSObject => ({
|
||||
opacity: 1,
|
||||
|
||||
'&:hover': {
|
||||
...genHoverStyle(mergeToken<InputToken>(token, { inputBorderHoverColor: token.colorBorder })),
|
||||
...genHoverStyle(mergeToken<InputToken>(token, { hoverBorderColor: token.colorBorder })),
|
||||
},
|
||||
});
|
||||
|
||||
const genInputLargeStyle = (token: InputToken): CSSObject => {
|
||||
const {
|
||||
inputPaddingVerticalLG,
|
||||
fontSizeLG,
|
||||
lineHeightLG,
|
||||
borderRadiusLG,
|
||||
inputPaddingHorizontalLG,
|
||||
} = token;
|
||||
const { paddingBlockLG, fontSizeLG, lineHeightLG, borderRadiusLG, paddingInlineLG } = token;
|
||||
|
||||
return {
|
||||
padding: `${inputPaddingVerticalLG}px ${inputPaddingHorizontalLG}px`,
|
||||
padding: `${paddingBlockLG}px ${paddingInlineLG}px`,
|
||||
fontSize: fontSizeLG,
|
||||
lineHeight: lineHeightLG,
|
||||
borderRadius: borderRadiusLG,
|
||||
@ -74,7 +112,7 @@ const genInputLargeStyle = (token: InputToken): CSSObject => {
|
||||
};
|
||||
|
||||
export const genInputSmallStyle = (token: InputToken): CSSObject => ({
|
||||
padding: `${token.inputPaddingVerticalSM}px ${token.controlPaddingHorizontalSM - 1}px`,
|
||||
padding: `${token.paddingBlockSM}px ${token.paddingInlineSM}px`,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
});
|
||||
|
||||
@ -100,8 +138,8 @@ export const genStatusStyle = (token: InputToken, parentCls: string): CSSObject
|
||||
'&:focus, &-focused': {
|
||||
...genActiveStyle(
|
||||
mergeToken<InputToken>(token, {
|
||||
inputBorderActiveColor: colorError,
|
||||
inputBorderHoverColor: colorError,
|
||||
activeBorderColor: colorError,
|
||||
hoverBorderColor: colorError,
|
||||
controlOutline: colorErrorOutline,
|
||||
}),
|
||||
),
|
||||
@ -121,8 +159,8 @@ export const genStatusStyle = (token: InputToken, parentCls: string): CSSObject
|
||||
'&:focus, &-focused': {
|
||||
...genActiveStyle(
|
||||
mergeToken<InputToken>(token, {
|
||||
inputBorderActiveColor: colorWarning,
|
||||
inputBorderHoverColor: colorWarning,
|
||||
activeBorderColor: colorWarning,
|
||||
hoverBorderColor: colorWarning,
|
||||
controlOutline: colorWarningOutline,
|
||||
}),
|
||||
),
|
||||
@ -140,7 +178,7 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({
|
||||
display: 'inline-block',
|
||||
width: '100%',
|
||||
minWidth: 0,
|
||||
padding: `${token.inputPaddingVertical}px ${token.inputPaddingHorizontal}px`,
|
||||
padding: `${token.paddingBlock}px ${token.paddingInline}px`,
|
||||
color: token.colorText,
|
||||
fontSize: token.fontSize,
|
||||
lineHeight: token.lineHeight,
|
||||
@ -265,7 +303,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
|
||||
|
||||
'&-addon': {
|
||||
position: 'relative',
|
||||
padding: `0 ${token.inputPaddingHorizontal}px`,
|
||||
padding: `0 ${token.paddingInline}px`,
|
||||
color: token.colorText,
|
||||
fontWeight: 'normal',
|
||||
fontSize: token.fontSize,
|
||||
@ -278,7 +316,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
|
||||
|
||||
// Reset Select's style in addon
|
||||
[`${antCls}-select`]: {
|
||||
margin: `-${token.inputPaddingVertical + 1}px -${token.inputPaddingHorizontal}px`,
|
||||
margin: `-${token.paddingBlock + 1}px -${token.paddingInline}px`,
|
||||
|
||||
[`&${antCls}-select-single:not(${antCls}-select-customize-input)`]: {
|
||||
[`${antCls}-select-selector`]: {
|
||||
@ -297,7 +335,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/31333
|
||||
[`${antCls}-cascader-picker`]: {
|
||||
margin: `-9px -${token.inputPaddingHorizontal}px`,
|
||||
margin: `-9px -${token.paddingInline}px`,
|
||||
backgroundColor: 'transparent',
|
||||
[`${antCls}-cascader-input`]: {
|
||||
textAlign: 'start',
|
||||
@ -870,31 +908,6 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
|
||||
};
|
||||
};
|
||||
|
||||
export function initInputToken<T extends GlobalToken = GlobalToken>(token: T): InputToken<T> {
|
||||
// @ts-ignore
|
||||
return mergeToken<InputToken<T>>(token, {
|
||||
inputAffixPadding: token.paddingXXS,
|
||||
inputPaddingVertical: Math.max(
|
||||
Math.round(((token.controlHeight - token.fontSize * token.lineHeight) / 2) * 10) / 10 -
|
||||
token.lineWidth,
|
||||
3,
|
||||
),
|
||||
inputPaddingVerticalLG:
|
||||
Math.ceil(((token.controlHeightLG - token.fontSizeLG * token.lineHeightLG) / 2) * 10) / 10 -
|
||||
token.lineWidth,
|
||||
inputPaddingVerticalSM: Math.max(
|
||||
Math.round(((token.controlHeightSM - token.fontSize * token.lineHeight) / 2) * 10) / 10 -
|
||||
token.lineWidth,
|
||||
0,
|
||||
),
|
||||
inputPaddingHorizontal: token.paddingSM - token.lineWidth,
|
||||
inputPaddingHorizontalSM: token.paddingXS - token.lineWidth,
|
||||
inputPaddingHorizontalLG: token.controlPaddingHorizontal - token.lineWidth,
|
||||
inputBorderHoverColor: token.colorPrimaryHover,
|
||||
inputBorderActiveColor: token.colorPrimaryHover,
|
||||
});
|
||||
}
|
||||
|
||||
const genTextAreaStyle: GenerateStyle<InputToken> = (token) => {
|
||||
const { componentCls, paddingLG } = token;
|
||||
const textareaPrefixCls = `${componentCls}-textarea`;
|
||||
@ -962,7 +975,7 @@ const genTextAreaStyle: GenerateStyle<InputToken> = (token) => {
|
||||
[`${textareaPrefixCls}-suffix`]: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
insetInlineEnd: token.inputPaddingHorizontal,
|
||||
insetInlineEnd: token.paddingInline,
|
||||
bottom: 0,
|
||||
zIndex: 1,
|
||||
display: 'inline-flex',
|
||||
@ -976,19 +989,66 @@ const genTextAreaStyle: GenerateStyle<InputToken> = (token) => {
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Input', (token) => {
|
||||
const inputToken = initInputToken<FullToken<'Input'>>(token);
|
||||
export function initInputToken(token: GlobalToken): SharedInputToken {
|
||||
return mergeToken<InputToken>(token, {
|
||||
inputAffixPadding: token.paddingXXS,
|
||||
});
|
||||
}
|
||||
|
||||
return [
|
||||
genInputStyle(inputToken),
|
||||
genTextAreaStyle(inputToken),
|
||||
genAffixStyle(inputToken),
|
||||
genGroupStyle(inputToken),
|
||||
genSearchInputStyle(inputToken),
|
||||
// =====================================================
|
||||
// == Space Compact ==
|
||||
// =====================================================
|
||||
genCompactItemStyle(inputToken),
|
||||
];
|
||||
});
|
||||
export const initComponentToken = (token: GlobalToken): SharedComponentToken => {
|
||||
const {
|
||||
controlHeight,
|
||||
fontSize,
|
||||
lineHeight,
|
||||
lineWidth,
|
||||
controlHeightSM,
|
||||
controlHeightLG,
|
||||
fontSizeLG,
|
||||
lineHeightLG,
|
||||
paddingSM,
|
||||
controlPaddingHorizontalSM,
|
||||
controlPaddingHorizontal,
|
||||
colorFillAlter,
|
||||
colorPrimaryHover,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
paddingBlock: Math.max(
|
||||
Math.round(((controlHeight - fontSize * lineHeight) / 2) * 10) / 10 - lineWidth,
|
||||
3,
|
||||
),
|
||||
paddingBlockSM: Math.max(
|
||||
Math.round(((controlHeightSM - fontSize * lineHeight) / 2) * 10) / 10 - lineWidth,
|
||||
0,
|
||||
),
|
||||
paddingBlockLG:
|
||||
Math.ceil(((controlHeightLG - fontSizeLG * lineHeightLG) / 2) * 10) / 10 - lineWidth,
|
||||
paddingInline: paddingSM - lineWidth,
|
||||
paddingInlineSM: controlPaddingHorizontalSM - lineWidth,
|
||||
paddingInlineLG: controlPaddingHorizontal - lineWidth,
|
||||
addonBg: colorFillAlter,
|
||||
activeBorderColor: colorPrimaryHover,
|
||||
hoverBorderColor: colorPrimaryHover,
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook(
|
||||
'Input',
|
||||
(token) => {
|
||||
const inputToken = mergeToken<InputToken>(token, initInputToken(token));
|
||||
|
||||
return [
|
||||
genInputStyle(inputToken),
|
||||
genTextAreaStyle(inputToken),
|
||||
genAffixStyle(inputToken),
|
||||
genGroupStyle(inputToken),
|
||||
genSearchInputStyle(inputToken),
|
||||
// =====================================================
|
||||
// == Space Compact ==
|
||||
// =====================================================
|
||||
genCompactItemStyle(inputToken),
|
||||
];
|
||||
},
|
||||
initComponentToken,
|
||||
);
|
||||
|
||||
@ -1,17 +1,18 @@
|
||||
import type { InputToken } from '../../input/style';
|
||||
import type { SharedComponentToken, SharedInputToken } from '../../input/style';
|
||||
import {
|
||||
genActiveStyle,
|
||||
genBasicInputStyle,
|
||||
genDisabledStyle,
|
||||
genPlaceholderStyle,
|
||||
genStatusStyle,
|
||||
initComponentToken,
|
||||
initInputToken,
|
||||
} from '../../input/style';
|
||||
import { resetComponent, textEllipsis } from '../../style';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {
|
||||
export interface ComponentToken extends SharedComponentToken {
|
||||
/**
|
||||
* @desc 弹层 z-index
|
||||
* @descEN z-index of popup
|
||||
@ -29,7 +30,7 @@ export interface ComponentToken {
|
||||
controlItemWidth: number;
|
||||
}
|
||||
|
||||
type MentionsToken = InputToken<FullToken<'Mentions'>>;
|
||||
type MentionsToken = FullToken<'Mentions'> & SharedInputToken;
|
||||
|
||||
const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
|
||||
const {
|
||||
@ -41,8 +42,8 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
|
||||
motionDurationSlow,
|
||||
lineHeight,
|
||||
controlHeight,
|
||||
inputPaddingHorizontal,
|
||||
inputPaddingVertical,
|
||||
paddingInline,
|
||||
paddingBlock,
|
||||
fontSize,
|
||||
colorBgElevated,
|
||||
paddingXXS,
|
||||
@ -84,7 +85,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
|
||||
[`&-affix-wrapper ${componentCls}-suffix`]: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
insetInlineEnd: inputPaddingHorizontal,
|
||||
insetInlineEnd: paddingInline,
|
||||
bottom: 0,
|
||||
zIndex: 1,
|
||||
display: 'inline-flex',
|
||||
@ -98,7 +99,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
|
||||
boxSizing: 'border-box',
|
||||
minHeight: controlHeight - 2,
|
||||
margin: 0,
|
||||
padding: `${inputPaddingVertical}px ${inputPaddingHorizontal}px`,
|
||||
padding: `${paddingBlock}px ${paddingInline}px`,
|
||||
overflow: 'inherit',
|
||||
overflowX: 'hidden',
|
||||
overflowY: 'auto',
|
||||
@ -223,10 +224,11 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
|
||||
export default genComponentStyleHook(
|
||||
'Mentions',
|
||||
(token) => {
|
||||
const mentionsToken = initInputToken<FullToken<'Mentions'>>(token);
|
||||
const mentionsToken = mergeToken<MentionsToken>(token, initInputToken(token));
|
||||
return [genMentionsStyle(mentionsToken)];
|
||||
},
|
||||
(token) => ({
|
||||
...initComponentToken(token),
|
||||
dropdownHeight: 250,
|
||||
controlItemWidth: 100,
|
||||
zIndexPopup: token.zIndexPopupBase + 50,
|
||||
|
||||
@ -2,9 +2,10 @@ import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import {
|
||||
genBasicInputStyle,
|
||||
genInputSmallStyle,
|
||||
initComponentToken,
|
||||
initInputToken,
|
||||
type InputToken,
|
||||
} from '../../input/style';
|
||||
import type { SharedComponentToken, SharedInputToken } from '../../input/style';
|
||||
import { genFocusOutline, genFocusStyle, resetComponent } from '../../style';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
@ -57,7 +58,7 @@ export interface ComponentToken {
|
||||
miniOptionsSizeChangerTop: number;
|
||||
}
|
||||
|
||||
interface PaginationToken extends InputToken<FullToken<'Pagination'>> {
|
||||
interface PaginationToken extends FullToken<'Pagination'>, SharedComponentToken, SharedInputToken {
|
||||
inputOutlineOffset: number;
|
||||
paginationMiniOptionsMarginInlineStart: number;
|
||||
paginationMiniQuickJumperInputWidth: number;
|
||||
@ -751,6 +752,7 @@ export default genComponentStyleHook(
|
||||
paginationEllipsisTextIndent: '0.13em', // magic for ui experience
|
||||
},
|
||||
initInputToken(token),
|
||||
initComponentToken(token),
|
||||
);
|
||||
return [
|
||||
genPaginationStyle(paginationToken),
|
||||
|
||||
@ -22,6 +22,7 @@ import type { ComponentToken as DropdownComponentToken } from '../../dropdown/st
|
||||
import type { ComponentToken as EmptyComponentToken } from '../../empty/style';
|
||||
import type { ComponentToken as FloatButtonComponentToken } from '../../float-button/style';
|
||||
import type { ComponentToken as ImageComponentToken } from '../../image/style';
|
||||
import type { ComponentToken as InputComponentToken } from '../../input/style';
|
||||
import type { ComponentToken as InputNumberComponentToken } from '../../input-number/style';
|
||||
import type { ComponentToken as LayoutComponentToken } from '../../layout/style';
|
||||
import type { ComponentToken as ListComponentToken } from '../../list/style';
|
||||
@ -84,7 +85,7 @@ export interface ComponentTokenMap {
|
||||
Form?: {};
|
||||
Grid?: {};
|
||||
Image?: ImageComponentToken;
|
||||
Input?: {};
|
||||
Input?: InputComponentToken;
|
||||
InputNumber?: InputNumberComponentToken;
|
||||
Layout?: LayoutComponentToken;
|
||||
List?: ListComponentToken;
|
||||
|
||||
@ -10,7 +10,6 @@
|
||||
import { gold } from '@ant-design/colors';
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { TypographyToken } from '.';
|
||||
import { initInputToken } from '../../input/style';
|
||||
import { operationUnit } from '../../style';
|
||||
import type { GenerateStyle } from '../../theme/internal';
|
||||
|
||||
@ -187,10 +186,9 @@ export const getResetStyles: GenerateStyle<TypographyToken, CSSObject> = (token)
|
||||
});
|
||||
|
||||
export const getEditableStyles: GenerateStyle<TypographyToken, CSSObject> = (token) => {
|
||||
const { componentCls } = token;
|
||||
const { componentCls, paddingSM } = token;
|
||||
|
||||
const inputToken = initInputToken(token);
|
||||
const inputShift = inputToken.inputPaddingVertical + 1;
|
||||
const inputShift = paddingSM;
|
||||
return {
|
||||
'&-edit-content': {
|
||||
position: 'relative',
|
||||
|
||||
@ -338,7 +338,43 @@ export default App;
|
||||
| `@image-preview-operation-color` | `previewOperationColor` | - |
|
||||
| `@image-preview-operation-disabled-color` | `previewOperationColorDisabled` | - |
|
||||
|
||||
<!-- ### Input -->
|
||||
### Input
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| Less variables | Component Token | Note |
|
||||
| --- | --- | --- |
|
||||
| `@input-height-base` | `controlHeight` | Global Token |
|
||||
| `@input-height-lg` | `controlHeightLG` | Global Token |
|
||||
| `@input-height-sm` | `controlHeightSM` | Global Token |
|
||||
| `@input-padding-horizontal` | `paddingInline` | - |
|
||||
| `@input-padding-horizontal-base` | `paddingInline` | - |
|
||||
| `@input-padding-horizontal-sm` | `paddingInlineSM` | - |
|
||||
| `@input-padding-horizontal-lg` | `paddingInlineLG` | - |
|
||||
| `@input-padding-vertical-base` | `paddinBlock` | - |
|
||||
| `@input-padding-vertical-sm` | `paddingBlockSM` | - |
|
||||
| `@input-padding-vertical-lg` | `paddingBlockLG` | - |
|
||||
| `@input-placeholder-color` | `colorTextPlaceholder` | Global Token |
|
||||
| `@input-color` | `colorText` | Global Token |
|
||||
| `@input-icon-color` | - | 已废弃 |
|
||||
| `@input-border-color` | `colorBorder` | Global Token |
|
||||
| `@input-bg` | `colorBgContainer` | Global Token |
|
||||
| `@input-addon-bg` | `addonBg` | - |
|
||||
| `@input-hover-border-color` | `hoverBorderColor` | - |
|
||||
| `@input-disabled-bg` | `colorBgContainerDisabled` | Global Token |
|
||||
| `@input-outline-offset` | `activeShadow` | Control box-shadow when active |
|
||||
| `@input-icon-hover-color` | `colorIconHover` | Global Token |
|
||||
| `@input-disabled-color` | `colorTextDisabled` | Global Token |
|
||||
|
||||
### InputNumber
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| Less variables | Component Token | Note |
|
||||
| --- | --- | --- |
|
||||
| `@input-number-hover-border-color` | `hoverBorderColor` | - |
|
||||
| `@input-number-handler-active-bg` | `handleActiveBg` | - |
|
||||
| `@input-number-handler-hover-bg` | `handleHoverColor` | Wrong usage in 4.x, which is actually text color |
|
||||
| `@input-number-handler-bg` | `handleBg` | - |
|
||||
| `@input-number-handler-border-color` | `handleBorderColor` | - |
|
||||
|
||||
### Layout
|
||||
|
||||
|
||||
@ -335,7 +335,43 @@ export default App;
|
||||
| `@image-preview-operation-color` | `previewOperationColor` | - |
|
||||
| `@image-preview-operation-disabled-color` | `previewOperationColorDisabled` | - |
|
||||
|
||||
<!-- ### Input 输入框 -->
|
||||
### Input 输入框
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| less 变量 | Component Token | 备注 |
|
||||
| --- | --- | --- |
|
||||
| `@input-height-base` | `controlHeight` | 全局 Token |
|
||||
| `@input-height-lg` | `controlHeightLG` | 全局 Token |
|
||||
| `@input-height-sm` | `controlHeightSM` | 全局 Token |
|
||||
| `@input-padding-horizontal` | `paddingInline` | - |
|
||||
| `@input-padding-horizontal-base` | `paddingInline` | - |
|
||||
| `@input-padding-horizontal-sm` | `paddingInlineSM` | - |
|
||||
| `@input-padding-horizontal-lg` | `paddingInlineLG` | - |
|
||||
| `@input-padding-vertical-base` | `paddinBlock` | - |
|
||||
| `@input-padding-vertical-sm` | `paddingBlockSM` | - |
|
||||
| `@input-padding-vertical-lg` | `paddingBlockLG` | - |
|
||||
| `@input-placeholder-color` | `colorTextPlaceholder` | 全局 Token |
|
||||
| `@input-color` | `colorText` | 全局 Token |
|
||||
| `@input-icon-color` | - | 已废弃 |
|
||||
| `@input-border-color` | `colorBorder` | 全局 Token |
|
||||
| `@input-bg` | `colorBgContainer` | 全局 Token |
|
||||
| `@input-addon-bg` | `addonBg` | - |
|
||||
| `@input-hover-border-color` | `hoverBorderColor` | - |
|
||||
| `@input-disabled-bg` | `colorBgContainerDisabled` | 全局 Token |
|
||||
| `@input-outline-offset` | `activeShadow` | 控制激活态阴影 |
|
||||
| `@input-icon-hover-color` | `colorIconHover` | 全局 Token |
|
||||
| `@input-disabled-color` | `colorTextDisabled` | 全局 Token |
|
||||
|
||||
### InputNumber 数字输入框
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| less 变量 | Component Token | 备注 |
|
||||
| --- | --- | --- |
|
||||
| `@input-number-hover-border-color` | `hoverBorderColor` | - |
|
||||
| `@input-number-handler-active-bg` | `handleActiveBg` | - |
|
||||
| `@input-number-handler-hover-bg` | `handleHoverColor` | 4.x 中命名有误，实际上是 color |
|
||||
| `@input-number-handler-bg` | `handleBg` | - |
|
||||
| `@input-number-handler-border-color` | `handleBorderColor` | - |
|
||||
|
||||
### Layout 布局
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user