mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-03 20:49:14 +08:00
refactor: input number cssinjs (#34384)
* refactor: input number cssinjs * refactor: rtl * chore: code clean * pref: better code style * test: fix lint * perf: better style * chore: code style * chore: use GenerateStyle * chore: remove useless px
This commit is contained in:
MadCcc
GitHub
parent
30e0d57302
commit
249ae9fda8
@ -14,6 +14,7 @@ import {
|
||||
InputStatus,
|
||||
getMergedStatus,
|
||||
} from '../_util/statusUtils';
|
||||
import useStyle from './style';
|
||||
|
||||
type ValueType = string | number;
|
||||
|
||||
@ -52,6 +53,10 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
|
||||
} = props;
|
||||
|
||||
const prefixCls = getPrefixCls('input-number', customizePrefixCls);
|
||||
|
||||
// Style
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
|
||||
let upIcon = <UpOutlined className={`${prefixCls}-handler-up-inner`} />;
|
||||
let downIcon = <DownOutlined className={`${prefixCls}-handler-down-inner`} />;
|
||||
const controlsTemp = typeof controls === 'boolean' ? controls : undefined;
|
||||
@ -84,6 +89,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
|
||||
[`${prefixCls}-borderless`]: !bordered,
|
||||
},
|
||||
getStatusClassNames(prefixCls, mergedStatus),
|
||||
hashId,
|
||||
className,
|
||||
);
|
||||
|
||||
@ -115,6 +121,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
|
||||
// className will go to addon wrapper
|
||||
[`${className}`]: !(addonBefore || addonAfter) && className,
|
||||
},
|
||||
hashId,
|
||||
);
|
||||
|
||||
element = (
|
||||
@ -151,7 +158,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
|
||||
) : null;
|
||||
const addonAfterNode = addonAfter ? <div className={addonClassName}>{addonAfter}</div> : null;
|
||||
|
||||
const mergedWrapperClassName = classNames(`${prefixCls}-wrapper`, wrapperClassName, {
|
||||
const mergedWrapperClassName = classNames(`${prefixCls}-wrapper`, wrapperClassName, hashId, {
|
||||
[`${wrapperClassName}-rtl`]: direction === 'rtl',
|
||||
});
|
||||
|
||||
@ -163,6 +170,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
|
||||
[`${prefixCls}-group-wrapper-rtl`]: direction === 'rtl',
|
||||
},
|
||||
getStatusClassNames(`${prefixCls}-group-wrapper`, mergedStatus, hasFeedback),
|
||||
hashId,
|
||||
className,
|
||||
);
|
||||
element = (
|
||||
@ -176,7 +184,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
|
||||
);
|
||||
}
|
||||
|
||||
return element;
|
||||
return wrapSSR(element);
|
||||
});
|
||||
|
||||
export default InputNumber as (<T extends ValueType = ValueType>(
|
||||
|
||||
@ -1,235 +1,235 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
@import '../../input/style/mixin';
|
||||
@import './affix';
|
||||
@import './status';
|
||||
|
||||
@input-number-prefix-cls: ~'@{ant-prefix}-input-number';
|
||||
@form-item-prefix-cls: ~'@{ant-prefix}-form-item';
|
||||
|
||||
.@{input-number-prefix-cls} {
|
||||
.reset-component();
|
||||
.input();
|
||||
|
||||
//== Style for input-group: input with label, with button or dropdown...
|
||||
&-group {
|
||||
.reset-component();
|
||||
.input-group(~'@{input-number-prefix-cls}');
|
||||
|
||||
&-wrapper {
|
||||
display: inline-block;
|
||||
text-align: start;
|
||||
vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
|
||||
}
|
||||
}
|
||||
|
||||
display: inline-block;
|
||||
width: 90px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
&-handler {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
overflow: hidden;
|
||||
color: @text-color-secondary;
|
||||
font-weight: bold;
|
||||
line-height: 0;
|
||||
text-align: center;
|
||||
border-left: @border-width-base @border-style-base @input-number-handler-border-color;
|
||||
transition: all 0.1s linear;
|
||||
|
||||
&:active {
|
||||
background: @input-number-handler-active-bg;
|
||||
}
|
||||
|
||||
&:hover &-up-inner,
|
||||
&:hover &-down-inner {
|
||||
color: @input-number-handler-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&-handler-up-inner,
|
||||
&-handler-down-inner {
|
||||
.iconfont-mixin();
|
||||
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
color: @text-color-secondary;
|
||||
line-height: 12px;
|
||||
transition: all 0.1s linear;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.hover(@input-number-hover-border-color);
|
||||
& + .@{form-item-prefix-cls}-children-icon {
|
||||
opacity: 0;
|
||||
transition: opacity 0.24s linear 0.24s;
|
||||
}
|
||||
}
|
||||
|
||||
&-focused {
|
||||
.active();
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
.disabled();
|
||||
.@{input-number-prefix-cls}-input {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.@{input-number-prefix-cls}-handler-wrap {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-readonly {
|
||||
.@{input-number-prefix-cls}-handler-wrap {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-input {
|
||||
width: 100%;
|
||||
height: @input-height-base - 2px;
|
||||
padding: 0 @control-padding-horizontal - 1px;
|
||||
text-align: left;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: @border-radius-base;
|
||||
outline: 0;
|
||||
transition: all 0.3s linear;
|
||||
appearance: textfield !important;
|
||||
.placeholder();
|
||||
|
||||
&[type='number']::-webkit-inner-spin-button,
|
||||
&[type='number']::-webkit-outer-spin-button {
|
||||
margin: 0;
|
||||
/* stylelint-disable-next-line property-no-vendor-prefix */
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-lg {
|
||||
padding: 0;
|
||||
font-size: @font-size-lg;
|
||||
|
||||
input {
|
||||
height: @input-height-lg - 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&-sm {
|
||||
padding: 0;
|
||||
|
||||
input {
|
||||
height: @input-height-sm - 2px;
|
||||
padding: 0 @control-padding-horizontal-sm - 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&-handler-wrap {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 22px;
|
||||
height: 100%;
|
||||
background: @input-number-handler-bg;
|
||||
border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||
opacity: 0;
|
||||
transition: opacity 0.24s linear 0.1s;
|
||||
|
||||
// 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
|
||||
.@{input-number-prefix-cls}-handler {
|
||||
.@{input-number-prefix-cls}-handler-up-inner,
|
||||
.@{input-number-prefix-cls}-handler-down-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: auto;
|
||||
margin-right: 0;
|
||||
font-size: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{input-number-prefix-cls}-borderless & {
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-handler-wrap:hover &-handler {
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
&:hover &-handler-wrap,
|
||||
&-focused &-handler-wrap {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&-handler-up {
|
||||
border-top-right-radius: @border-radius-base;
|
||||
cursor: pointer;
|
||||
|
||||
&-inner {
|
||||
top: 50%;
|
||||
margin-top: -5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
height: 60% !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-handler-down {
|
||||
top: 0;
|
||||
border-top: @border-width-base @border-style-base @border-color-base;
|
||||
border-bottom-right-radius: @border-radius-base;
|
||||
cursor: pointer;
|
||||
|
||||
&-inner {
|
||||
top: 50%;
|
||||
text-align: center;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
height: 60% !important;
|
||||
}
|
||||
.@{input-number-prefix-cls}-borderless & {
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-handler-up-disabled,
|
||||
&-handler-down-disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&-handler-up-disabled:hover &-handler-up-inner,
|
||||
&-handler-down-disabled:hover &-handler-down-inner {
|
||||
color: @disabled-color;
|
||||
}
|
||||
|
||||
&-borderless {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// ===================== Out Of Range =====================
|
||||
&-out-of-range {
|
||||
input {
|
||||
color: @error-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import './rtl';
|
||||
//@import '../../style/themes/index';
|
||||
//@import '../../style/mixins/index';
|
||||
//@import '../../input/style/mixin';
|
||||
//@import './affix';
|
||||
//@import './status';
|
||||
//
|
||||
//@input-number-prefix-cls: ~'@{ant-prefix}-input-number';
|
||||
//@form-item-prefix-cls: ~'@{ant-prefix}-form-item';
|
||||
//
|
||||
//.@{input-number-prefix-cls} {
|
||||
// .reset-component();
|
||||
// .input();
|
||||
//
|
||||
// //== Style for input-group: input with label, with button or dropdown...
|
||||
// &-group {
|
||||
// .reset-component();
|
||||
// .input-group(~'@{input-number-prefix-cls}');
|
||||
//
|
||||
// &-wrapper {
|
||||
// display: inline-block;
|
||||
// text-align: start;
|
||||
// vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// display: inline-block;
|
||||
// width: 90px;
|
||||
// margin: 0;
|
||||
// padding: 0;
|
||||
// border: @border-width-base @border-style-base @border-color-base;
|
||||
// border-radius: @border-radius-base;
|
||||
//
|
||||
// &-handler {
|
||||
// position: relative;
|
||||
// display: block;
|
||||
// width: 100%;
|
||||
// height: 50%;
|
||||
// overflow: hidden;
|
||||
// color: @text-color-secondary;
|
||||
// font-weight: bold;
|
||||
// line-height: 0;
|
||||
// text-align: center;
|
||||
// border-left: @border-width-base @border-style-base @input-number-handler-border-color;
|
||||
// transition: all 0.1s linear;
|
||||
//
|
||||
// &:active {
|
||||
// background: @input-number-handler-active-bg;
|
||||
// }
|
||||
//
|
||||
// &:hover &-up-inner,
|
||||
// &:hover &-down-inner {
|
||||
// color: @input-number-handler-hover-bg;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &-handler-up-inner,
|
||||
// &-handler-down-inner {
|
||||
// .iconfont-mixin();
|
||||
//
|
||||
// position: absolute;
|
||||
// right: 4px;
|
||||
// width: 12px;
|
||||
// height: 12px;
|
||||
// color: @text-color-secondary;
|
||||
// line-height: 12px;
|
||||
// transition: all 0.1s linear;
|
||||
// user-select: none;
|
||||
// }
|
||||
//
|
||||
// &:hover {
|
||||
// .hover(@input-number-hover-border-color);
|
||||
// & + .@{form-item-prefix-cls}-children-icon {
|
||||
// opacity: 0;
|
||||
// transition: opacity 0.24s linear 0.24s;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &-focused {
|
||||
// .active();
|
||||
// }
|
||||
//
|
||||
// &-disabled {
|
||||
// .disabled();
|
||||
// .@{input-number-prefix-cls}-input {
|
||||
// cursor: not-allowed;
|
||||
// }
|
||||
// .@{input-number-prefix-cls}-handler-wrap {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &-readonly {
|
||||
// .@{input-number-prefix-cls}-handler-wrap {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &-input {
|
||||
// width: 100%;
|
||||
// height: @input-height-base - 2px;
|
||||
// padding: 0 @control-padding-horizontal - 1px;
|
||||
// text-align: left;
|
||||
// background-color: transparent;
|
||||
// border: 0;
|
||||
// border-radius: @border-radius-base;
|
||||
// outline: 0;
|
||||
// transition: all 0.3s linear;
|
||||
// appearance: textfield !important;
|
||||
// .placeholder();
|
||||
//
|
||||
// &[type='number']::-webkit-inner-spin-button,
|
||||
// &[type='number']::-webkit-outer-spin-button {
|
||||
// margin: 0;
|
||||
// /* stylelint-disable-next-line property-no-vendor-prefix */
|
||||
// -webkit-appearance: none;
|
||||
// appearance: none;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &-lg {
|
||||
// padding: 0;
|
||||
// font-size: @font-size-lg;
|
||||
//
|
||||
// input {
|
||||
// height: @input-height-lg - 2px;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &-sm {
|
||||
// padding: 0;
|
||||
//
|
||||
// input {
|
||||
// height: @input-height-sm - 2px;
|
||||
// padding: 0 @control-padding-horizontal-sm - 1px;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &-handler-wrap {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// width: 22px;
|
||||
// height: 100%;
|
||||
// background: @input-number-handler-bg;
|
||||
// border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||
// opacity: 0;
|
||||
// transition: opacity 0.24s linear 0.1s;
|
||||
//
|
||||
// // 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
|
||||
// .@{input-number-prefix-cls}-handler {
|
||||
// .@{input-number-prefix-cls}-handler-up-inner,
|
||||
// .@{input-number-prefix-cls}-handler-down-inner {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// min-width: auto;
|
||||
// margin-right: 0;
|
||||
// font-size: 7px;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .@{input-number-prefix-cls}-borderless & {
|
||||
// border-left-width: 0;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &-handler-wrap:hover &-handler {
|
||||
// height: 40%;
|
||||
// }
|
||||
//
|
||||
// &:hover &-handler-wrap,
|
||||
// &-focused &-handler-wrap {
|
||||
// opacity: 1;
|
||||
// }
|
||||
//
|
||||
// &-handler-up {
|
||||
// border-top-right-radius: @border-radius-base;
|
||||
// cursor: pointer;
|
||||
//
|
||||
// &-inner {
|
||||
// top: 50%;
|
||||
// margin-top: -5px;
|
||||
// text-align: center;
|
||||
// }
|
||||
//
|
||||
// &:hover {
|
||||
// height: 60% !important;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &-handler-down {
|
||||
// top: 0;
|
||||
// border-top: @border-width-base @border-style-base @border-color-base;
|
||||
// border-bottom-right-radius: @border-radius-base;
|
||||
// cursor: pointer;
|
||||
//
|
||||
// &-inner {
|
||||
// top: 50%;
|
||||
// text-align: center;
|
||||
// transform: translateY(-50%);
|
||||
// }
|
||||
//
|
||||
// &:hover {
|
||||
// height: 60% !important;
|
||||
// }
|
||||
// .@{input-number-prefix-cls}-borderless & {
|
||||
// border-top-width: 0;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &-handler-up-disabled,
|
||||
// &-handler-down-disabled {
|
||||
// cursor: not-allowed;
|
||||
// }
|
||||
//
|
||||
// &-handler-up-disabled:hover &-handler-up-inner,
|
||||
// &-handler-down-disabled:hover &-handler-down-inner {
|
||||
// color: @disabled-color;
|
||||
// }
|
||||
//
|
||||
// &-borderless {
|
||||
// box-shadow: none;
|
||||
// }
|
||||
//
|
||||
// // ===================== Out Of Range =====================
|
||||
// &-out-of-range {
|
||||
// input {
|
||||
// color: @error-color;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@import './rtl';
|
||||
|
||||
@ -1,4 +1,389 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
// deps-lint-skip-all
|
||||
import {
|
||||
GenerateStyle,
|
||||
resetComponent,
|
||||
resetIcon,
|
||||
UseComponentStyleResult,
|
||||
useStyleRegister,
|
||||
useToken,
|
||||
} from '../../_util/theme';
|
||||
import {
|
||||
genActiveStyle,
|
||||
genBasicInputStyle,
|
||||
genDisabledStyle,
|
||||
genHoverStyle,
|
||||
genInputGroupStyle,
|
||||
genPlaceholderStyle,
|
||||
genStatusStyle,
|
||||
initInputToken,
|
||||
InputToken,
|
||||
} from '../../input/style';
|
||||
|
||||
// deps-lint-skip: form
|
||||
interface InputNumberToken extends InputToken {
|
||||
prefixCls: string;
|
||||
inputNumberCls: string;
|
||||
inputNumberHandlerActiveBgColor: string;
|
||||
}
|
||||
|
||||
const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumberToken) => {
|
||||
const {
|
||||
inputNumberCls,
|
||||
borderWidth,
|
||||
borderStyle,
|
||||
borderColor,
|
||||
borderRadius,
|
||||
fontSizeLG,
|
||||
controlHeightLG,
|
||||
controlHeightSM,
|
||||
errorColor,
|
||||
paddingXS,
|
||||
textColorSecondary,
|
||||
durationFast,
|
||||
inputNumberHandlerActiveBgColor,
|
||||
primaryColor,
|
||||
marginXXS,
|
||||
controlHeight,
|
||||
inputPaddingHorizontal,
|
||||
duration,
|
||||
componentBackground,
|
||||
durationMid,
|
||||
textColorDisabled,
|
||||
prefixCls,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
[inputNumberCls]: {
|
||||
...resetComponent(token),
|
||||
...genBasicInputStyle(prefixCls, token),
|
||||
...genStatusStyle(prefixCls, token),
|
||||
|
||||
display: 'inline-block',
|
||||
width: 90, // FIXME: magic number
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
border: `${borderWidth}px ${borderStyle} ${borderColor}`,
|
||||
borderRadius,
|
||||
|
||||
'&-rtl': {
|
||||
direction: 'rtl',
|
||||
|
||||
[`${inputNumberCls}-input`]: {
|
||||
direction: 'rtl',
|
||||
},
|
||||
},
|
||||
|
||||
[`&:hover ${inputNumberCls}-handler-wrap, &-focused ${inputNumberCls}-handler-wrap`]: {
|
||||
opacity: 1,
|
||||
},
|
||||
|
||||
'&-lg': {
|
||||
padding: 0,
|
||||
fontSize: fontSizeLG,
|
||||
|
||||
[`input${inputNumberCls}-input`]: {
|
||||
height: controlHeightLG - 2 * borderWidth,
|
||||
},
|
||||
},
|
||||
|
||||
'&-sm': {
|
||||
padding: 0,
|
||||
|
||||
[`input${inputNumberCls}-input`]: {
|
||||
height: controlHeightSM - 2 * borderWidth,
|
||||
padding: `0 ${paddingXS - borderWidth}px`,
|
||||
},
|
||||
},
|
||||
|
||||
'&:hover': {
|
||||
...genHoverStyle(token),
|
||||
},
|
||||
|
||||
'&-focused': {
|
||||
...genActiveStyle(token),
|
||||
},
|
||||
|
||||
'&-disabled': {
|
||||
...genDisabledStyle(token),
|
||||
[`${inputNumberCls}-input`]: {
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
[`${inputNumberCls}-handler-wrap`]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
|
||||
'&-readonly': {
|
||||
[`${inputNumberCls}-handler-wrap`]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
|
||||
'&-borderless': {
|
||||
boxShadow: 'none',
|
||||
},
|
||||
|
||||
// ===================== Out Of Range =====================
|
||||
'&-out-of-range': {
|
||||
input: {
|
||||
color: errorColor,
|
||||
},
|
||||
},
|
||||
|
||||
// Style for input-group: input with label, with button or dropdown...
|
||||
'&-group': {
|
||||
...resetComponent(token),
|
||||
...genInputGroupStyle(prefixCls, token),
|
||||
|
||||
'&-wrapper': {
|
||||
display: 'inline-block',
|
||||
textAlign: 'start',
|
||||
verticalAlign: 'top', // https://github.com/ant-design/ant-design/issues/6403
|
||||
|
||||
[`${inputNumberCls}-affix-wrapper`]: {
|
||||
width: '100%',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[inputNumberCls]: {
|
||||
'&-handler': {
|
||||
position: 'relative',
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
height: '50%',
|
||||
overflow: 'hidden',
|
||||
color: textColorSecondary,
|
||||
fontWeight: 'bold',
|
||||
lineHeight: 0,
|
||||
textAlign: 'center',
|
||||
borderInlineStart: `${borderWidth}px ${borderStyle} ${borderColor}`,
|
||||
transition: `all ${durationFast} linear`,
|
||||
|
||||
'&:active': {
|
||||
background: inputNumberHandlerActiveBgColor,
|
||||
},
|
||||
|
||||
'&:hover &-up-inner, &:hover &-down-inner': {
|
||||
color: primaryColor,
|
||||
},
|
||||
},
|
||||
|
||||
'&-handler-up-inner, &-handler-down-inner': {
|
||||
...resetIcon(),
|
||||
|
||||
position: 'absolute',
|
||||
insetInlineEnd: marginXXS,
|
||||
width: controlHeightSM / 2,
|
||||
height: controlHeightSM / 2,
|
||||
color: textColorSecondary,
|
||||
lineHeight: controlHeightSM / 2,
|
||||
transition: `all ${durationFast} linear`,
|
||||
userSelect: 'none',
|
||||
},
|
||||
|
||||
'&-input': {
|
||||
width: '100%',
|
||||
height: controlHeight - 2 * borderWidth,
|
||||
padding: `0 ${inputPaddingHorizontal - borderWidth}px`,
|
||||
textAlign: 'start',
|
||||
backgroundColor: 'transparent',
|
||||
border: 0,
|
||||
borderRadius,
|
||||
outline: 0,
|
||||
transition: `all ${duration} linear`,
|
||||
appearance: 'textfield', // FIXME: important
|
||||
...genPlaceholderStyle(),
|
||||
|
||||
'&[type="number"]::-webkit-inner-spin-button, &[type="number"]::-webkit-outer-spin-button':
|
||||
{
|
||||
margin: 0,
|
||||
/* stylelint-disable-next-line property-no-vendor-prefix */
|
||||
webkitAppearance: 'none',
|
||||
appearance: 'none',
|
||||
},
|
||||
},
|
||||
|
||||
'&-handler-wrap': {
|
||||
position: 'absolute',
|
||||
insetBlockStart: 0,
|
||||
insetInlineEnd: 0,
|
||||
width: 22, // FIXME: magic number
|
||||
height: '100%',
|
||||
background: componentBackground,
|
||||
borderStartStartRadius: 0,
|
||||
borderStartEndRadius: borderRadius,
|
||||
borderEndEndRadius: borderRadius,
|
||||
borderEndStartRadius: 0,
|
||||
opacity: 0,
|
||||
transition: `opacity ${durationMid} linear ${durationFast}`,
|
||||
|
||||
// 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
|
||||
[`${inputNumberCls}-handler`]: {
|
||||
[`${inputNumberCls}-handler-up-inner,
|
||||
${inputNumberCls}-handler-down-inner`]: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
minWidth: 'auto',
|
||||
marginRight: 0,
|
||||
fontSize: 7, // FIXME: magic
|
||||
},
|
||||
},
|
||||
|
||||
[`${inputNumberCls}-borderless &`]: {
|
||||
borderInlineStartWidth: 0,
|
||||
},
|
||||
|
||||
[`&:hover ${inputNumberCls}-handler`]: {
|
||||
height: '40%',
|
||||
},
|
||||
},
|
||||
|
||||
'&-handler-up': {
|
||||
borderStartEndRadius: borderRadius,
|
||||
cursor: 'pointer',
|
||||
|
||||
'&-inner': {
|
||||
top: '50%',
|
||||
marginTop: -5, // FIXME: magic
|
||||
textAlign: 'center',
|
||||
},
|
||||
|
||||
'&:hover': {
|
||||
height: '60% !important',
|
||||
},
|
||||
},
|
||||
|
||||
'&-handler-down': {
|
||||
top: 0,
|
||||
borderBlockStart: `${borderWidth}px ${borderStyle} ${borderColor}`,
|
||||
borderEndEndRadius: borderRadius,
|
||||
cursor: 'pointer',
|
||||
|
||||
'&-inner': {
|
||||
top: '50%',
|
||||
textAlign: 'center',
|
||||
transform: 'translateY(-50%)',
|
||||
},
|
||||
|
||||
'&:hover': {
|
||||
height: '60% !important',
|
||||
},
|
||||
|
||||
[`${inputNumberCls}-borderless &`]: {
|
||||
borderBlockStartWidth: 0,
|
||||
},
|
||||
},
|
||||
'&-handler-up-disabled, &-handler-down-disabled': {
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
|
||||
[`&-handler-up-disabled:hover &-handler-up-inner,
|
||||
&-handler-down-disabled:hover &-handler-down-inner`]: {
|
||||
color: textColorDisabled,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumberToken) => {
|
||||
const { inputNumberCls, inputPaddingHorizontal, inputAffixMargin, prefixCls } = token;
|
||||
|
||||
return {
|
||||
[`${inputNumberCls}-affix-wrapper`]: {
|
||||
...genBasicInputStyle(prefixCls, token),
|
||||
...genStatusStyle(prefixCls, token),
|
||||
// or number handler will cover form status
|
||||
position: 'relative',
|
||||
display: 'inline-flex',
|
||||
width: 90, // FIXME: magic
|
||||
padding: 0,
|
||||
paddingInlineStart: inputPaddingHorizontal,
|
||||
|
||||
'&:not(&-disabled):hover': {
|
||||
...genHoverStyle(token),
|
||||
zIndex: 1,
|
||||
},
|
||||
|
||||
'&-focused, &:focus': {
|
||||
zIndex: 1,
|
||||
},
|
||||
|
||||
'&-disabled': {
|
||||
[`${inputNumberCls}[disabled]`]: {
|
||||
background: 'transparent',
|
||||
},
|
||||
},
|
||||
|
||||
[`> div${inputNumberCls}`]: {
|
||||
width: '100%',
|
||||
border: 'none',
|
||||
outline: 'none',
|
||||
|
||||
[`&${inputNumberCls}-focused`]: {
|
||||
boxShadow: 'none !important',
|
||||
},
|
||||
},
|
||||
|
||||
[`input${inputNumberCls}-input`]: {
|
||||
padding: 0,
|
||||
},
|
||||
|
||||
'&::before': {
|
||||
width: 0,
|
||||
visibility: 'hidden',
|
||||
content: '"\\a0"',
|
||||
},
|
||||
|
||||
[`${inputNumberCls}-handler-wrap`]: {
|
||||
zIndex: 2,
|
||||
},
|
||||
|
||||
[inputNumberCls]: {
|
||||
'&-prefix, &-suffix': {
|
||||
display: 'flex',
|
||||
flex: 'none',
|
||||
alignItems: 'center',
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
|
||||
'&-prefix': {
|
||||
marginInlineEnd: inputAffixMargin,
|
||||
},
|
||||
|
||||
'&-suffix': {
|
||||
position: 'absolute',
|
||||
insetBlockStart: 0,
|
||||
insetInlineEnd: 0,
|
||||
zIndex: 1,
|
||||
height: '100%',
|
||||
marginInlineEnd: inputPaddingHorizontal,
|
||||
marginInlineStart: inputAffixMargin,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default function useStyle(prefixCls: string): UseComponentStyleResult {
|
||||
const [theme, token, hashId] = useToken();
|
||||
|
||||
const inputNumberToken: InputNumberToken = {
|
||||
...initInputToken(token),
|
||||
prefixCls,
|
||||
inputNumberCls: `.${prefixCls}`,
|
||||
inputNumberHandlerActiveBgColor: '#f4f4f4', // FIXME: magic number
|
||||
};
|
||||
|
||||
return [
|
||||
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
|
||||
genInputNumberStyles(inputNumberToken),
|
||||
genAffixWrapperStyles(inputNumberToken),
|
||||
]),
|
||||
hashId,
|
||||
];
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@ import {
|
||||
withPrefix,
|
||||
} from '../../_util/theme';
|
||||
|
||||
interface InputToken extends DerivativeToken {
|
||||
export interface InputToken extends DerivativeToken {
|
||||
inputAffixMargin: number;
|
||||
inputPaddingVertical: number;
|
||||
inputPaddingVerticalLG: number;
|
||||
@ -76,7 +76,7 @@ const genInputSmallStyle = (token: InputToken): CSSObject => ({
|
||||
padding: `${token.inputPaddingVerticalSM}px ${token.paddingXS - 1}px`,
|
||||
});
|
||||
|
||||
const genStatusStyle = (prefixCls: string, token: InputToken): CSSObject => ({
|
||||
export const genStatusStyle = (prefixCls: string, token: InputToken): CSSObject => ({
|
||||
'&-status-error:not(&-disabled):not(&-borderless)&': {
|
||||
'&, &:hover': {
|
||||
borderColor: token.errorColor,
|
||||
@ -139,7 +139,7 @@ export const genBasicInputStyle = (prefixCls: string, token: InputToken): CSSObj
|
||||
...genActiveStyle(token),
|
||||
},
|
||||
|
||||
'&:disabled, &[disabled]': {
|
||||
'&-disabled, &[disabled]': {
|
||||
...genDisabledStyle(token),
|
||||
},
|
||||
|
||||
@ -180,7 +180,7 @@ export const genBasicInputStyle = (prefixCls: string, token: InputToken): CSSObj
|
||||
},
|
||||
});
|
||||
|
||||
const genInputGroupStyle = (prefixCls: string, token: InputToken): CSSObject => ({
|
||||
export const genInputGroupStyle = (prefixCls: string, token: InputToken): CSSObject => ({
|
||||
position: 'relative',
|
||||
display: 'table',
|
||||
width: '100%',
|
||||
@ -739,14 +739,7 @@ const genSearchInputStyle = (
|
||||
},
|
||||
});
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default function useStyle(
|
||||
prefixCls: string,
|
||||
iconPrefixCls: string,
|
||||
): UseComponentStyleResult {
|
||||
const [theme, token, hashId] = useToken();
|
||||
|
||||
const inputToken: InputToken = {
|
||||
export const initInputToken = (token: DerivativeToken): InputToken => ({
|
||||
...token,
|
||||
inputAffixMargin: token.marginXXS,
|
||||
inputPaddingVertical: Math.max(
|
||||
@ -762,10 +755,19 @@ export default function useStyle(
|
||||
token.borderWidth,
|
||||
0,
|
||||
),
|
||||
inputPaddingHorizontal: token.paddingSM - 1,
|
||||
inputPaddingHorizontal: token.paddingSM - token.borderWidth,
|
||||
inputBorderHoverColor: token.primaryHoverColor,
|
||||
inputBorderActiveColor: token.primaryHoverColor,
|
||||
};
|
||||
});
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default function useStyle(
|
||||
prefixCls: string,
|
||||
iconPrefixCls: string,
|
||||
): UseComponentStyleResult {
|
||||
const [theme, token, hashId] = useToken();
|
||||
|
||||
const inputToken: InputToken = initInputToken(token);
|
||||
|
||||
const affixWrapperPrefixCls = `${prefixCls}-affix-wrapper`;
|
||||
const groupPrefixCls = `${prefixCls}-group`;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user