418 lines
13 KiB
JavaScript
418 lines
13 KiB
JavaScript
"use strict";
|
||
|
||
Object.defineProperty(exports, "__esModule", {
|
||
value: true
|
||
});
|
||
exports.genRadiusStyle = exports.default = void 0;
|
||
var _cssinjs = require("@ant-design/cssinjs");
|
||
var _style = require("../../input/style");
|
||
var _variants = require("../../input/style/variants");
|
||
var _style2 = require("../../style");
|
||
var _compactItem = require("../../style/compact-item");
|
||
var _internal = require("../../theme/internal");
|
||
var _token = require("./token");
|
||
const genRadiusStyle = ({
|
||
componentCls,
|
||
borderRadiusSM,
|
||
borderRadiusLG
|
||
}, size) => {
|
||
const borderRadius = size === 'lg' ? borderRadiusLG : borderRadiusSM;
|
||
return {
|
||
[`&-${size}`]: {
|
||
[`${componentCls}-handler-wrap`]: {
|
||
borderStartEndRadius: borderRadius,
|
||
borderEndEndRadius: borderRadius
|
||
},
|
||
[`${componentCls}-handler-up`]: {
|
||
borderStartEndRadius: borderRadius
|
||
},
|
||
[`${componentCls}-handler-down`]: {
|
||
borderEndEndRadius: borderRadius
|
||
}
|
||
}
|
||
};
|
||
};
|
||
exports.genRadiusStyle = genRadiusStyle;
|
||
const genInputNumberStyles = token => {
|
||
const {
|
||
componentCls,
|
||
lineWidth,
|
||
lineType,
|
||
borderRadius,
|
||
inputFontSizeSM,
|
||
inputFontSizeLG,
|
||
controlHeightLG,
|
||
controlHeightSM,
|
||
colorError,
|
||
paddingInlineSM,
|
||
paddingBlockSM,
|
||
paddingBlockLG,
|
||
paddingInlineLG,
|
||
colorIcon,
|
||
motionDurationMid,
|
||
handleHoverColor,
|
||
handleOpacity,
|
||
paddingInline,
|
||
paddingBlock,
|
||
handleBg,
|
||
handleActiveBg,
|
||
colorTextDisabled,
|
||
borderRadiusSM,
|
||
borderRadiusLG,
|
||
controlWidth,
|
||
handleBorderColor,
|
||
filledHandleBg,
|
||
lineHeightLG,
|
||
calc
|
||
} = token;
|
||
return [{
|
||
[componentCls]: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (0, _style2.resetComponent)(token)), (0, _style.genBasicInputStyle)(token)), {
|
||
display: 'inline-block',
|
||
width: controlWidth,
|
||
margin: 0,
|
||
padding: 0,
|
||
borderRadius
|
||
}), (0, _variants.genOutlinedStyle)(token, {
|
||
[`${componentCls}-handler-wrap`]: {
|
||
background: handleBg,
|
||
[`${componentCls}-handler-down`]: {
|
||
borderBlockStart: `${(0, _cssinjs.unit)(lineWidth)} ${lineType} ${handleBorderColor}`
|
||
}
|
||
}
|
||
})), (0, _variants.genFilledStyle)(token, {
|
||
[`${componentCls}-handler-wrap`]: {
|
||
background: filledHandleBg,
|
||
[`${componentCls}-handler-down`]: {
|
||
borderBlockStart: `${(0, _cssinjs.unit)(lineWidth)} ${lineType} ${handleBorderColor}`
|
||
}
|
||
},
|
||
'&:focus-within': {
|
||
[`${componentCls}-handler-wrap`]: {
|
||
background: handleBg
|
||
}
|
||
}
|
||
})), (0, _variants.genUnderlinedStyle)(token, {
|
||
[`${componentCls}-handler-wrap`]: {
|
||
background: handleBg,
|
||
[`${componentCls}-handler-down`]: {
|
||
borderBlockStart: `${(0, _cssinjs.unit)(lineWidth)} ${lineType} ${handleBorderColor}`
|
||
}
|
||
}
|
||
})), (0, _variants.genBorderlessStyle)(token)), {
|
||
'&-rtl': {
|
||
direction: 'rtl',
|
||
[`${componentCls}-input`]: {
|
||
direction: 'rtl'
|
||
}
|
||
},
|
||
'&-lg': {
|
||
padding: 0,
|
||
fontSize: inputFontSizeLG,
|
||
lineHeight: lineHeightLG,
|
||
borderRadius: borderRadiusLG,
|
||
[`input${componentCls}-input`]: {
|
||
height: calc(controlHeightLG).sub(calc(lineWidth).mul(2)).equal(),
|
||
padding: `${(0, _cssinjs.unit)(paddingBlockLG)} ${(0, _cssinjs.unit)(paddingInlineLG)}`
|
||
}
|
||
},
|
||
'&-sm': {
|
||
padding: 0,
|
||
fontSize: inputFontSizeSM,
|
||
borderRadius: borderRadiusSM,
|
||
[`input${componentCls}-input`]: {
|
||
height: calc(controlHeightSM).sub(calc(lineWidth).mul(2)).equal(),
|
||
padding: `${(0, _cssinjs.unit)(paddingBlockSM)} ${(0, _cssinjs.unit)(paddingInlineSM)}`
|
||
}
|
||
},
|
||
// ===================== Out Of Range =====================
|
||
'&-out-of-range': {
|
||
[`${componentCls}-input-wrap`]: {
|
||
input: {
|
||
color: colorError
|
||
}
|
||
}
|
||
},
|
||
// Style for input-group: input with label, with button or dropdown...
|
||
'&-group': Object.assign(Object.assign(Object.assign({}, (0, _style2.resetComponent)(token)), (0, _style.genInputGroupStyle)(token)), {
|
||
'&-wrapper': Object.assign(Object.assign(Object.assign({
|
||
display: 'inline-block',
|
||
textAlign: 'start',
|
||
verticalAlign: 'top',
|
||
[`${componentCls}-affix-wrapper`]: {
|
||
width: '100%'
|
||
},
|
||
// Size
|
||
'&-lg': {
|
||
[`${componentCls}-group-addon`]: {
|
||
borderRadius: borderRadiusLG,
|
||
fontSize: token.fontSizeLG
|
||
}
|
||
},
|
||
'&-sm': {
|
||
[`${componentCls}-group-addon`]: {
|
||
borderRadius: borderRadiusSM
|
||
}
|
||
}
|
||
}, (0, _variants.genOutlinedGroupStyle)(token)), (0, _variants.genFilledGroupStyle)(token)), {
|
||
// Fix the issue of using icons in Space Compact mode
|
||
// https://github.com/ant-design/ant-design/issues/45764
|
||
[`&:not(${componentCls}-compact-first-item):not(${componentCls}-compact-last-item)${componentCls}-compact-item`]: {
|
||
[`${componentCls}, ${componentCls}-group-addon`]: {
|
||
borderRadius: 0
|
||
}
|
||
},
|
||
[`&:not(${componentCls}-compact-last-item)${componentCls}-compact-first-item`]: {
|
||
[`${componentCls}, ${componentCls}-group-addon`]: {
|
||
borderStartEndRadius: 0,
|
||
borderEndEndRadius: 0
|
||
}
|
||
},
|
||
[`&:not(${componentCls}-compact-first-item)${componentCls}-compact-last-item`]: {
|
||
[`${componentCls}, ${componentCls}-group-addon`]: {
|
||
borderStartStartRadius: 0,
|
||
borderEndStartRadius: 0
|
||
}
|
||
}
|
||
})
|
||
}),
|
||
[`&-disabled ${componentCls}-input`]: {
|
||
cursor: 'not-allowed'
|
||
},
|
||
[componentCls]: {
|
||
'&-input': Object.assign(Object.assign(Object.assign(Object.assign({}, (0, _style2.resetComponent)(token)), {
|
||
width: '100%',
|
||
padding: `${(0, _cssinjs.unit)(paddingBlock)} ${(0, _cssinjs.unit)(paddingInline)}`,
|
||
textAlign: 'start',
|
||
backgroundColor: 'transparent',
|
||
border: 0,
|
||
borderRadius,
|
||
outline: 0,
|
||
transition: `all ${motionDurationMid} linear`,
|
||
appearance: 'textfield',
|
||
fontSize: 'inherit'
|
||
}), (0, _style.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
|
||
}
|
||
})
|
||
},
|
||
// Handler
|
||
{
|
||
[componentCls]: Object.assign(Object.assign(Object.assign({
|
||
[`${componentCls}-handler-wrap`]: {
|
||
position: 'absolute',
|
||
insetBlockStart: 0,
|
||
insetInlineEnd: 0,
|
||
width: token.handleVisibleWidth,
|
||
opacity: handleOpacity,
|
||
height: '100%',
|
||
borderStartStartRadius: 0,
|
||
borderStartEndRadius: borderRadius,
|
||
borderEndEndRadius: borderRadius,
|
||
borderEndStartRadius: 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}-handler`]: {
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
flex: 'auto',
|
||
height: '40%',
|
||
[`
|
||
${componentCls}-handler-up-inner,
|
||
${componentCls}-handler-down-inner
|
||
`]: {
|
||
marginInlineEnd: 0,
|
||
fontSize: token.handleFontSize
|
||
}
|
||
}
|
||
},
|
||
[`${componentCls}-handler`]: {
|
||
height: '50%',
|
||
overflow: 'hidden',
|
||
color: colorIcon,
|
||
fontWeight: 'bold',
|
||
lineHeight: 0,
|
||
textAlign: 'center',
|
||
cursor: 'pointer',
|
||
borderInlineStart: `${(0, _cssinjs.unit)(lineWidth)} ${lineType} ${handleBorderColor}`,
|
||
transition: `all ${motionDurationMid} linear`,
|
||
'&:active': {
|
||
background: handleActiveBg
|
||
},
|
||
// Hover
|
||
'&:hover': {
|
||
height: `60%`,
|
||
[`
|
||
${componentCls}-handler-up-inner,
|
||
${componentCls}-handler-down-inner
|
||
`]: {
|
||
color: handleHoverColor
|
||
}
|
||
},
|
||
'&-up-inner, &-down-inner': Object.assign(Object.assign({}, (0, _style2.resetIcon)()), {
|
||
color: colorIcon,
|
||
transition: `all ${motionDurationMid} linear`,
|
||
userSelect: 'none'
|
||
})
|
||
},
|
||
[`${componentCls}-handler-up`]: {
|
||
borderStartEndRadius: borderRadius
|
||
},
|
||
[`${componentCls}-handler-down`]: {
|
||
borderEndEndRadius: borderRadius
|
||
}
|
||
}, genRadiusStyle(token, 'lg')), genRadiusStyle(token, 'sm')), {
|
||
// Disabled
|
||
'&-disabled, &-readonly': {
|
||
[`${componentCls}-handler-wrap`]: {
|
||
display: 'none'
|
||
},
|
||
[`${componentCls}-input`]: {
|
||
color: 'inherit'
|
||
}
|
||
},
|
||
[`
|
||
${componentCls}-handler-up-disabled,
|
||
${componentCls}-handler-down-disabled
|
||
`]: {
|
||
cursor: 'not-allowed'
|
||
},
|
||
[`
|
||
${componentCls}-handler-up-disabled:hover &-handler-up-inner,
|
||
${componentCls}-handler-down-disabled:hover &-handler-down-inner
|
||
`]: {
|
||
color: colorTextDisabled
|
||
}
|
||
})
|
||
}];
|
||
};
|
||
const genAffixWrapperStyles = token => {
|
||
const {
|
||
componentCls,
|
||
paddingBlock,
|
||
paddingInline,
|
||
inputAffixPadding,
|
||
controlWidth,
|
||
borderRadiusLG,
|
||
borderRadiusSM,
|
||
paddingInlineLG,
|
||
paddingInlineSM,
|
||
paddingBlockLG,
|
||
paddingBlockSM,
|
||
motionDurationMid
|
||
} = token;
|
||
return {
|
||
[`${componentCls}-affix-wrapper`]: Object.assign(Object.assign({
|
||
[`input${componentCls}-input`]: {
|
||
padding: `${(0, _cssinjs.unit)(paddingBlock)} 0`
|
||
}
|
||
}, (0, _style.genBasicInputStyle)(token)), {
|
||
// or number handler will cover form status
|
||
position: 'relative',
|
||
display: 'inline-flex',
|
||
alignItems: 'center',
|
||
width: controlWidth,
|
||
padding: 0,
|
||
paddingInlineStart: paddingInline,
|
||
'&-lg': {
|
||
borderRadius: borderRadiusLG,
|
||
paddingInlineStart: paddingInlineLG,
|
||
[`input${componentCls}-input`]: {
|
||
padding: `${(0, _cssinjs.unit)(paddingBlockLG)} 0`
|
||
}
|
||
},
|
||
'&-sm': {
|
||
borderRadius: borderRadiusSM,
|
||
paddingInlineStart: paddingInlineSM,
|
||
[`input${componentCls}-input`]: {
|
||
padding: `${(0, _cssinjs.unit)(paddingBlockSM)} 0`
|
||
}
|
||
},
|
||
[`&:not(${componentCls}-disabled):hover`]: {
|
||
zIndex: 1
|
||
},
|
||
'&-focused, &:focus': {
|
||
zIndex: 1
|
||
},
|
||
[`&-disabled > ${componentCls}-disabled`]: {
|
||
background: 'transparent'
|
||
},
|
||
[`> div${componentCls}`]: {
|
||
width: '100%',
|
||
border: 'none',
|
||
outline: 'none',
|
||
[`&${componentCls}-focused`]: {
|
||
boxShadow: 'none !important'
|
||
}
|
||
},
|
||
'&::before': {
|
||
display: 'inline-block',
|
||
width: 0,
|
||
visibility: 'hidden',
|
||
content: '"\\a0"'
|
||
},
|
||
[`${componentCls}-handler-wrap`]: {
|
||
zIndex: 2
|
||
},
|
||
[componentCls]: {
|
||
position: 'static',
|
||
color: 'inherit',
|
||
'&-prefix, &-suffix': {
|
||
display: 'flex',
|
||
flex: 'none',
|
||
alignItems: 'center',
|
||
pointerEvents: 'none'
|
||
},
|
||
'&-prefix': {
|
||
marginInlineEnd: inputAffixPadding
|
||
},
|
||
'&-suffix': {
|
||
insetBlockStart: 0,
|
||
insetInlineEnd: 0,
|
||
height: '100%',
|
||
marginInlineEnd: paddingInline,
|
||
marginInlineStart: inputAffixPadding,
|
||
transition: `margin ${motionDurationMid}`
|
||
}
|
||
},
|
||
[`&:hover ${componentCls}-handler-wrap, &-focused ${componentCls}-handler-wrap`]: {
|
||
width: token.handleWidth,
|
||
opacity: 1
|
||
},
|
||
[`&:not(${componentCls}-affix-wrapper-without-controls):hover ${componentCls}-suffix`]: {
|
||
marginInlineEnd: token.calc(token.handleWidth).add(paddingInline).equal()
|
||
}
|
||
}),
|
||
// 覆盖 affix-wrapper borderRadius！
|
||
[`${componentCls}-underlined`]: {
|
||
borderRadius: 0
|
||
}
|
||
};
|
||
};
|
||
var _default = exports.default = (0, _internal.genStyleHooks)('InputNumber', token => {
|
||
const inputNumberToken = (0, _internal.mergeToken)(token, (0, _style.initInputToken)(token));
|
||
return [genInputNumberStyles(inputNumberToken), genAffixWrapperStyles(inputNumberToken),
|
||
// =====================================================
|
||
// == Space Compact ==
|
||
// =====================================================
|
||
(0, _compactItem.genCompactItemStyle)(inputNumberToken)];
|
||
}, _token.prepareComponentToken, {
|
||
unitless: {
|
||
handleOpacity: true
|
||
},
|
||
resetFont: false
|
||
}); |