1
This commit is contained in:
+4
@@ -0,0 +1,4 @@
|
||||
import type { ComponentToken } from './token';
|
||||
export type { ComponentToken };
|
||||
declare const _default: (prefixCls: string, rootCls?: string) => readonly [string, string];
|
||||
export default _default;
|
||||
+316
@@ -0,0 +1,316 @@
|
||||
import { unit } from '@ant-design/cssinjs';
|
||||
import { genBasicInputStyle, genPlaceholderStyle, initInputToken } from '../../input/style';
|
||||
import { genBorderlessStyle, genFilledStyle, genOutlinedStyle, genUnderlinedStyle } from '../../input/style/variants';
|
||||
import { resetComponent, resetIcon } from '../../style';
|
||||
import { genCompactItemStyle } from '../../style/compact-item';
|
||||
import { genStyleHooks, mergeToken } from '../../theme/internal';
|
||||
import { genCssVar } from '../../theme/util/genStyleUtils';
|
||||
import { prepareComponentToken } from './token';
|
||||
const genInputNumberStyles = token => {
|
||||
const {
|
||||
componentCls,
|
||||
lineWidth,
|
||||
lineType,
|
||||
borderRadius,
|
||||
inputFontSizeSM,
|
||||
inputFontSizeLG,
|
||||
colorError,
|
||||
paddingInlineSM,
|
||||
paddingBlockSM,
|
||||
paddingBlockLG,
|
||||
paddingInlineLG,
|
||||
colorIcon,
|
||||
colorTextDisabled,
|
||||
motionDurationMid,
|
||||
handleHoverColor,
|
||||
handleOpacity,
|
||||
paddingInline,
|
||||
paddingBlock,
|
||||
handleBg,
|
||||
handleActiveBg,
|
||||
inputAffixPadding,
|
||||
borderRadiusSM,
|
||||
controlWidth,
|
||||
handleBorderColor,
|
||||
filledHandleBg,
|
||||
lineHeightLG,
|
||||
antCls
|
||||
} = token;
|
||||
const borderStyle = `${unit(lineWidth)} ${lineType} ${handleBorderColor}`;
|
||||
const [varName, varRef] = genCssVar(antCls, 'input-number');
|
||||
return [
|
||||
// ==========================================================
|
||||
// == Base ==
|
||||
// ==========================================================
|
||||
{
|
||||
[componentCls]: {
|
||||
...resetComponent(token),
|
||||
...genBasicInputStyle(token),
|
||||
[varName('input-padding-block')]: unit(paddingBlock),
|
||||
[varName('input-padding-inline')]: unit(paddingInline),
|
||||
display: 'inline-flex',
|
||||
width: controlWidth,
|
||||
margin: 0,
|
||||
paddingBlock: 0,
|
||||
borderRadius,
|
||||
// ======================= Variants =======================
|
||||
...genOutlinedStyle(token, {
|
||||
[`${componentCls}-actions`]: {
|
||||
background: handleBg,
|
||||
[`${componentCls}-action-down`]: {
|
||||
borderBlockStart: borderStyle
|
||||
}
|
||||
}
|
||||
}),
|
||||
...genFilledStyle(token, {
|
||||
[`${componentCls}-actions`]: {
|
||||
background: filledHandleBg,
|
||||
[`${componentCls}-action-down`]: {
|
||||
borderBlockStart: borderStyle
|
||||
}
|
||||
},
|
||||
'&:focus-within': {
|
||||
[`${componentCls}-actions`]: {
|
||||
background: handleBg
|
||||
}
|
||||
}
|
||||
}),
|
||||
...genUnderlinedStyle(token, {
|
||||
[`${componentCls}-actions`]: {
|
||||
background: handleBg,
|
||||
[`${componentCls}-action-down`]: {
|
||||
borderBlockStart: borderStyle
|
||||
}
|
||||
}
|
||||
}),
|
||||
...genBorderlessStyle(token),
|
||||
// InputNumber 两层结构：borderless 补偿只加在内层 input 的 CSS 变量上，避免外层+内层双重 padding 导致高度异常
|
||||
[`&${componentCls}-borderless`]: {
|
||||
paddingBlock: 0,
|
||||
[varName('input-padding-block')]: unit(token.calc(paddingBlock).add(lineWidth).equal())
|
||||
},
|
||||
[`&${componentCls}-borderless${componentCls}-sm`]: {
|
||||
paddingBlock: 0,
|
||||
[varName('input-padding-block')]: unit(token.calc(paddingBlockSM).add(lineWidth).equal())
|
||||
},
|
||||
[`&${componentCls}-borderless${componentCls}-lg`]: {
|
||||
paddingBlock: 0,
|
||||
[varName('input-padding-block')]: unit(token.calc(paddingBlockLG).add(lineWidth).equal())
|
||||
},
|
||||
// ========================= RTL ==========================
|
||||
'&-rtl': {
|
||||
direction: 'rtl',
|
||||
[`${componentCls}-input`]: {
|
||||
direction: 'rtl'
|
||||
}
|
||||
},
|
||||
// ===================== Out Of Range =====================
|
||||
[`&${componentCls}-out-of-range`]: {
|
||||
[`${componentCls}-input`]: {
|
||||
color: colorError
|
||||
}
|
||||
},
|
||||
// ======================== Input =========================
|
||||
[`${componentCls}-input`]: {
|
||||
...resetComponent(token),
|
||||
width: '100%',
|
||||
paddingBlock: varRef('input-padding-block'),
|
||||
textAlign: 'start',
|
||||
backgroundColor: 'transparent',
|
||||
border: 0,
|
||||
borderRadius: 0,
|
||||
outline: 0,
|
||||
transition: `all ${motionDurationMid} linear`,
|
||||
appearance: 'textfield',
|
||||
fontSize: 'inherit',
|
||||
lineHeight: 'inherit',
|
||||
...genPlaceholderStyle(token.colorTextPlaceholder),
|
||||
'&[type="number"]::-webkit-inner-spin-button, &[type="number"]::-webkit-outer-spin-button': {
|
||||
margin: 0,
|
||||
appearance: 'none'
|
||||
}
|
||||
},
|
||||
[`&:hover ${componentCls}-handler-wrap, &-focused ${componentCls}-handler-wrap`]: {
|
||||
width: token.handleWidth,
|
||||
opacity: 1
|
||||
},
|
||||
// ======================= Disabled =======================
|
||||
[`&-disabled ${componentCls}-input`]: {
|
||||
cursor: 'not-allowed',
|
||||
color: token.colorTextDisabled
|
||||
}
|
||||
}
|
||||
},
|
||||
// ==========================================================
|
||||
// == Action ==
|
||||
// ==========================================================
|
||||
{
|
||||
[componentCls]: {
|
||||
// ======================= Shared =======================
|
||||
[`${componentCls}-action`]: {
|
||||
...resetIcon(),
|
||||
userSelect: 'none',
|
||||
overflow: 'hidden',
|
||||
fontWeight: 'bold',
|
||||
lineHeight: 0,
|
||||
textAlign: 'center',
|
||||
cursor: 'pointer',
|
||||
transition: `all ${motionDurationMid} linear`,
|
||||
// Active: change background not disabled only;
|
||||
[`&:active:not(${componentCls}-action-up-disabled):not(${componentCls}-action-down-disabled)`]: {
|
||||
background: handleActiveBg
|
||||
},
|
||||
// Hover: change color not disabled only;
|
||||
[`&:hover:not(${componentCls}-action-up-disabled):not(${componentCls}-action-down-disabled)`]: {
|
||||
color: handleHoverColor
|
||||
},
|
||||
[`&${componentCls}-action-up-disabled, &${componentCls}-action-down-disabled`]: {
|
||||
cursor: 'not-allowed',
|
||||
color: colorTextDisabled
|
||||
}
|
||||
},
|
||||
// ===================== Input Mode =====================
|
||||
'&-mode-input': {
|
||||
overflow: 'hidden',
|
||||
[`${componentCls}-actions`]: {
|
||||
position: 'absolute',
|
||||
insetBlockStart: 0,
|
||||
insetInlineEnd: 0,
|
||||
width: token.handleVisibleWidth,
|
||||
opacity: handleOpacity,
|
||||
height: '100%',
|
||||
borderRadius: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'stretch',
|
||||
transition: `all ${motionDurationMid}`,
|
||||
overflow: 'hidden',
|
||||
// Fix input number inside Menu makes icon too large
|
||||
// We arise the selector priority by nest selector here
|
||||
// https://github.com/ant-design/ant-design/issues/14367
|
||||
[`${componentCls}-action`]: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flex: 'auto',
|
||||
height: '40%',
|
||||
marginInlineEnd: 0,
|
||||
fontSize: token.handleFontSize
|
||||
}
|
||||
},
|
||||
[`&:hover ${componentCls}-actions, &-focused ${componentCls}-actions`]: {
|
||||
width: token.handleWidth,
|
||||
opacity: 1
|
||||
},
|
||||
[`${componentCls}-action`]: {
|
||||
color: colorIcon,
|
||||
height: '50%',
|
||||
borderInlineStart: borderStyle,
|
||||
// Hover: change height not disabled only;
|
||||
[`&:hover:not(${componentCls}-action-up-disabled):not(${componentCls}-action-down-disabled)`]: {
|
||||
height: `60%`
|
||||
}
|
||||
},
|
||||
[`&${componentCls}-disabled, &${componentCls}-readonly`]: {
|
||||
[`${componentCls}-actions`]: {
|
||||
display: 'none'
|
||||
}
|
||||
}
|
||||
},
|
||||
// ==================== Spinner Mode ====================
|
||||
[`&${componentCls}-mode-spinner`]: {
|
||||
padding: 0,
|
||||
width: 'auto',
|
||||
[`${componentCls}-action`]: {
|
||||
flex: 'none',
|
||||
paddingInline: varRef('input-padding-inline'),
|
||||
'&-up': {
|
||||
borderInlineStart: borderStyle
|
||||
},
|
||||
'&-down': {
|
||||
borderInlineEnd: borderStyle
|
||||
}
|
||||
},
|
||||
[`${componentCls}-input`]: {
|
||||
textAlign: 'center',
|
||||
paddingInline: varRef('input-padding-inline')
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// ==========================================================
|
||||
// == Size ==
|
||||
// ==========================================================
|
||||
{
|
||||
[componentCls]: {
|
||||
'&-lg': {
|
||||
[varName('input-padding-block')]: unit(paddingBlockLG),
|
||||
[varName('input-padding-inline')]: unit(paddingInlineLG),
|
||||
paddingBlock: 0,
|
||||
fontSize: inputFontSizeLG,
|
||||
lineHeight: lineHeightLG
|
||||
},
|
||||
'&-sm': {
|
||||
[varName('input-padding-block')]: unit(paddingBlockSM),
|
||||
[varName('input-padding-inline')]: unit(paddingInlineSM),
|
||||
paddingBlock: 0,
|
||||
fontSize: inputFontSizeSM,
|
||||
borderRadius: borderRadiusSM
|
||||
}
|
||||
}
|
||||
},
|
||||
// ==========================================================
|
||||
// == Pre/Suffix ==
|
||||
// ==========================================================
|
||||
{
|
||||
[componentCls]: {
|
||||
[`${componentCls}-prefix, ${componentCls}-suffix`]: {
|
||||
display: 'flex',
|
||||
flex: 'none',
|
||||
alignItems: 'center',
|
||||
alignSelf: 'center',
|
||||
pointerEvents: 'none'
|
||||
},
|
||||
[`${componentCls}-prefix`]: {
|
||||
marginInlineEnd: inputAffixPadding
|
||||
},
|
||||
[`${componentCls}-suffix`]: {
|
||||
height: '100%',
|
||||
marginInlineStart: inputAffixPadding,
|
||||
transition: `margin ${motionDurationMid}`
|
||||
},
|
||||
[`&:hover:not(${componentCls}-without-controls)`]: {
|
||||
[`${componentCls}-suffix`]: {
|
||||
marginInlineEnd: token.handleWidth
|
||||
}
|
||||
}
|
||||
}
|
||||
}];
|
||||
};
|
||||
const genCompatibleStyles = token => {
|
||||
const {
|
||||
componentCls,
|
||||
antCls
|
||||
} = token;
|
||||
return {
|
||||
[`${componentCls}-addon`]: {
|
||||
[`&:has(${antCls}-select)`]: {
|
||||
border: 0,
|
||||
padding: 0
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
export default genStyleHooks('InputNumber', token => {
|
||||
const inputNumberToken = mergeToken(token, initInputToken(token));
|
||||
return [genInputNumberStyles(inputNumberToken), genCompatibleStyles(inputNumberToken),
|
||||
// =====================================================
|
||||
// == Space Compact ==
|
||||
// =====================================================
|
||||
genCompactItemStyle(inputNumberToken)];
|
||||
}, prepareComponentToken, {
|
||||
unitless: {
|
||||
handleOpacity: true
|
||||
},
|
||||
resetFont: false
|
||||
});
|
||||
+52
@@ -0,0 +1,52 @@
|
||||
import type { SharedComponentToken, SharedInputToken } from '../../input/style/token';
|
||||
import type { FullToken, GetDefaultToken } from '../../theme/internal';
|
||||
export interface ComponentToken extends SharedComponentToken {
|
||||
/**
|
||||
* @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
|
||||
* @desc 操作按钮可见性
|
||||
* @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;
|
||||
/**
|
||||
* @desc 面性变体操作按钮背景色
|
||||
* @descEN Background color of handle in filled variant
|
||||
*/
|
||||
filledHandleBg: string;
|
||||
}
|
||||
export type InputNumberToken = FullToken<'InputNumber'> & SharedInputToken;
|
||||
export declare const prepareComponentToken: GetDefaultToken<'InputNumber'>;
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
import { FastColor } from '@ant-design/fast-color';
|
||||
import { initComponentToken } from '../../input/style/token';
|
||||
export const prepareComponentToken = token => {
|
||||
const handleVisible = token.handleVisible ?? 'auto';
|
||||
const handleWidth = token.controlHeightSM - token.lineWidth * 2;
|
||||
return {
|
||||
...initComponentToken(token),
|
||||
controlWidth: 90,
|
||||
handleWidth,
|
||||
handleFontSize: token.fontSize / 2,
|
||||
handleVisible,
|
||||
handleActiveBg: token.colorFillAlter,
|
||||
handleBg: token.colorBgContainer,
|
||||
filledHandleBg: new FastColor(token.colorFillSecondary).onBackground(token.colorBgContainer).toHexString(),
|
||||
handleHoverColor: token.colorPrimary,
|
||||
handleBorderColor: token.colorBorder,
|
||||
handleOpacity: handleVisible === true ? 1 : 0,
|
||||
handleVisibleWidth: handleVisible === true ? handleWidth : 0
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user