test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-03 20:49:14 +08:00
Code Issues Actions 100 Packages Projects Releases Wiki Activity

refactor: input number cssinjs (#34384)

Browse Source 
* 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 2022-03-14 11:40:13 +08:00 committed by GitHub
parent 30e0d57302
commit 249ae9fda8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 659 additions and 264 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/input-number/index.tsx
View File

@ -14,6 +14,7 @@ import {
InputStatus, InputStatus,
getMergedStatus, getMergedStatus,
} from '../_util/statusUtils'; } from '../_util/statusUtils';
import useStyle from './style';
type ValueType = string | number; type ValueType = string | number;
@ -52,6 +53,10 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
} = props; } = props;
const prefixCls = getPrefixCls('input-number', customizePrefixCls); const prefixCls = getPrefixCls('input-number', customizePrefixCls);
// Style
const [wrapSSR, hashId] = useStyle(prefixCls);
let upIcon = <UpOutlined className={`${prefixCls}-handler-up-inner`} />; let upIcon = <UpOutlined className={`${prefixCls}-handler-up-inner`} />;
let downIcon = <DownOutlined className={`${prefixCls}-handler-down-inner`} />; let downIcon = <DownOutlined className={`${prefixCls}-handler-down-inner`} />;
const controlsTemp = typeof controls === 'boolean' ? controls : undefined; const controlsTemp = typeof controls === 'boolean' ? controls : undefined;
@ -84,6 +89,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
[`${prefixCls}-borderless`]: !bordered, [`${prefixCls}-borderless`]: !bordered,
}, },
getStatusClassNames(prefixCls, mergedStatus), getStatusClassNames(prefixCls, mergedStatus),
hashId,
className, className,
); );
@ -115,6 +121,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
// className will go to addon wrapper // className will go to addon wrapper
[`${className}`]: !(addonBefore || addonAfter) && className, [`${className}`]: !(addonBefore || addonAfter) && className,
}, },
hashId,
); );
element = ( element = (
@ -151,7 +158,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
) : null; ) : null;
const addonAfterNode = addonAfter ? <div className={addonClassName}>{addonAfter}</div> : 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', [`${wrapperClassName}-rtl`]: direction === 'rtl',
}); });
@ -163,6 +170,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
[`${prefixCls}-group-wrapper-rtl`]: direction === 'rtl', [`${prefixCls}-group-wrapper-rtl`]: direction === 'rtl',
}, },
getStatusClassNames(`${prefixCls}-group-wrapper`, mergedStatus, hasFeedback), getStatusClassNames(`${prefixCls}-group-wrapper`, mergedStatus, hasFeedback),
hashId,
className, className,
); );
element = ( 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>( export default InputNumber as (<T extends ValueType = ValueType>(

470
components/input-number/style/index.less
View File

@ -1,235 +1,235 @@
@import '../../style/themes/index'; //@import '../../style/themes/index';
@import '../../style/mixins/index'; //@import '../../style/mixins/index';
@import '../../input/style/mixin'; //@import '../../input/style/mixin';
@import './affix'; //@import './affix';
@import './status'; //@import './status';
//
@input-number-prefix-cls: ~'@{ant-prefix}-input-number'; //@input-number-prefix-cls: ~'@{ant-prefix}-input-number';
@form-item-prefix-cls: ~'@{ant-prefix}-form-item'; //@form-item-prefix-cls: ~'@{ant-prefix}-form-item';
//
.@{input-number-prefix-cls} { //.@{input-number-prefix-cls} {
.reset-component(); // .reset-component();
.input(); // .input();
//
//== Style for input-group: input with label, with button or dropdown... // //== Style for input-group: input with label, with button or dropdown...
&-group { // &-group {
.reset-component(); // .reset-component();
.input-group(~'@{input-number-prefix-cls}'); // .input-group(~'@{input-number-prefix-cls}');
//
&-wrapper { // &-wrapper {
display: inline-block; // display: inline-block;
text-align: start; // text-align: start;
vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403 // vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
} // }
} // }
//
display: inline-block; // display: inline-block;
width: 90px; // width: 90px;
margin: 0; // margin: 0;
padding: 0; // padding: 0;
border: @border-width-base @border-style-base @border-color-base; // border: @border-width-base @border-style-base @border-color-base;
border-radius: @border-radius-base; // border-radius: @border-radius-base;
//
&-handler { // &-handler {
position: relative; // position: relative;
display: block; // display: block;
width: 100%; // width: 100%;
height: 50%; // height: 50%;
overflow: hidden; // overflow: hidden;
color: @text-color-secondary; // color: @text-color-secondary;
font-weight: bold; // font-weight: bold;
line-height: 0; // line-height: 0;
text-align: center; // text-align: center;
border-left: @border-width-base @border-style-base @input-number-handler-border-color; // border-left: @border-width-base @border-style-base @input-number-handler-border-color;
transition: all 0.1s linear; // transition: all 0.1s linear;
//
&:active { // &:active {
background: @input-number-handler-active-bg; // background: @input-number-handler-active-bg;
} // }
//
&:hover &-up-inner, // &:hover &-up-inner,
&:hover &-down-inner { // &:hover &-down-inner {
color: @input-number-handler-hover-bg; // color: @input-number-handler-hover-bg;
} // }
} // }
//
&-handler-up-inner, // &-handler-up-inner,
&-handler-down-inner { // &-handler-down-inner {
.iconfont-mixin(); // .iconfont-mixin();
//
position: absolute; // position: absolute;
right: 4px; // right: 4px;
width: 12px; // width: 12px;
height: 12px; // height: 12px;
color: @text-color-secondary; // color: @text-color-secondary;
line-height: 12px; // line-height: 12px;
transition: all 0.1s linear; // transition: all 0.1s linear;
user-select: none; // user-select: none;
} // }
//
&:hover { // &:hover {
.hover(@input-number-hover-border-color); // .hover(@input-number-hover-border-color);
& + .@{form-item-prefix-cls}-children-icon { // & + .@{form-item-prefix-cls}-children-icon {
opacity: 0; // opacity: 0;
transition: opacity 0.24s linear 0.24s; // transition: opacity 0.24s linear 0.24s;
} // }
} // }
//
&-focused { // &-focused {
.active(); // .active();
} // }
//
&-disabled { // &-disabled {
.disabled(); // .disabled();
.@{input-number-prefix-cls}-input { // .@{input-number-prefix-cls}-input {
cursor: not-allowed; // cursor: not-allowed;
} // }
.@{input-number-prefix-cls}-handler-wrap { // .@{input-number-prefix-cls}-handler-wrap {
display: none; // display: none;
} // }
} // }
//
&-readonly { // &-readonly {
.@{input-number-prefix-cls}-handler-wrap { // .@{input-number-prefix-cls}-handler-wrap {
display: none; // display: none;
} // }
} // }
//
&-input { // &-input {
width: 100%; // width: 100%;
height: @input-height-base - 2px; // height: @input-height-base - 2px;
padding: 0 @control-padding-horizontal - 1px; // padding: 0 @control-padding-horizontal - 1px;
text-align: left; // text-align: left;
background-color: transparent; // background-color: transparent;
border: 0; // border: 0;
border-radius: @border-radius-base; // border-radius: @border-radius-base;
outline: 0; // outline: 0;
transition: all 0.3s linear; // transition: all 0.3s linear;
appearance: textfield !important; // appearance: textfield !important;
.placeholder(); // .placeholder();
//
&[type='number']::-webkit-inner-spin-button, // &[type='number']::-webkit-inner-spin-button,
&[type='number']::-webkit-outer-spin-button { // &[type='number']::-webkit-outer-spin-button {
margin: 0; // margin: 0;
/* stylelint-disable-next-line property-no-vendor-prefix */ // /* stylelint-disable-next-line property-no-vendor-prefix */
-webkit-appearance: none; // -webkit-appearance: none;
appearance: none; // appearance: none;
} // }
} // }
//
&-lg { // &-lg {
padding: 0; // padding: 0;
font-size: @font-size-lg; // font-size: @font-size-lg;
//
input { // input {
height: @input-height-lg - 2px; // height: @input-height-lg - 2px;
} // }
} // }
//
&-sm { // &-sm {
padding: 0; // padding: 0;
//
input { // input {
height: @input-height-sm - 2px; // height: @input-height-sm - 2px;
padding: 0 @control-padding-horizontal-sm - 1px; // padding: 0 @control-padding-horizontal-sm - 1px;
} // }
} // }
//
&-handler-wrap { // &-handler-wrap {
position: absolute; // position: absolute;
top: 0; // top: 0;
right: 0; // right: 0;
width: 22px; // width: 22px;
height: 100%; // height: 100%;
background: @input-number-handler-bg; // background: @input-number-handler-bg;
border-radius: 0 @border-radius-base @border-radius-base 0; // border-radius: 0 @border-radius-base @border-radius-base 0;
opacity: 0; // opacity: 0;
transition: opacity 0.24s linear 0.1s; // transition: opacity 0.24s linear 0.1s;
//
// Fix input number inside Menu makes icon too large // // Fix input number inside Menu makes icon too large
// We arise the selector priority by nest selector here // // We arise the selector priority by nest selector here
// https://github.com/ant-design/ant-design/issues/14367 // // https://github.com/ant-design/ant-design/issues/14367
.@{input-number-prefix-cls}-handler { // .@{input-number-prefix-cls}-handler {
.@{input-number-prefix-cls}-handler-up-inner, // .@{input-number-prefix-cls}-handler-up-inner,
.@{input-number-prefix-cls}-handler-down-inner { // .@{input-number-prefix-cls}-handler-down-inner {
display: flex; // display: flex;
align-items: center; // align-items: center;
justify-content: center; // justify-content: center;
min-width: auto; // min-width: auto;
margin-right: 0; // margin-right: 0;
font-size: 7px; // font-size: 7px;
} // }
} // }
//
.@{input-number-prefix-cls}-borderless & { // .@{input-number-prefix-cls}-borderless & {
border-left-width: 0; // border-left-width: 0;
} // }
} // }
//
&-handler-wrap:hover &-handler { // &-handler-wrap:hover &-handler {
height: 40%; // height: 40%;
} // }
//
&:hover &-handler-wrap, // &:hover &-handler-wrap,
&-focused &-handler-wrap { // &-focused &-handler-wrap {
opacity: 1; // opacity: 1;
} // }
//
&-handler-up { // &-handler-up {
border-top-right-radius: @border-radius-base; // border-top-right-radius: @border-radius-base;
cursor: pointer; // cursor: pointer;
//
&-inner { // &-inner {
top: 50%; // top: 50%;
margin-top: -5px; // margin-top: -5px;
text-align: center; // text-align: center;
} // }
//
&:hover { // &:hover {
height: 60% !important; // height: 60% !important;
} // }
} // }
//
&-handler-down { // &-handler-down {
top: 0; // top: 0;
border-top: @border-width-base @border-style-base @border-color-base; // border-top: @border-width-base @border-style-base @border-color-base;
border-bottom-right-radius: @border-radius-base; // border-bottom-right-radius: @border-radius-base;
cursor: pointer; // cursor: pointer;
//
&-inner { // &-inner {
top: 50%; // top: 50%;
text-align: center; // text-align: center;
transform: translateY(-50%); // transform: translateY(-50%);
} // }
//
&:hover { // &:hover {
height: 60% !important; // height: 60% !important;
} // }
.@{input-number-prefix-cls}-borderless & { // .@{input-number-prefix-cls}-borderless & {
border-top-width: 0; // border-top-width: 0;
} // }
} // }
//
&-handler-up-disabled, // &-handler-up-disabled,
&-handler-down-disabled { // &-handler-down-disabled {
cursor: not-allowed; // cursor: not-allowed;
} // }
//
&-handler-up-disabled:hover &-handler-up-inner, // &-handler-up-disabled:hover &-handler-up-inner,
&-handler-down-disabled:hover &-handler-down-inner { // &-handler-down-disabled:hover &-handler-down-inner {
color: @disabled-color; // color: @disabled-color;
} // }
//
&-borderless { // &-borderless {
box-shadow: none; // box-shadow: none;
} // }
//
// ===================== Out Of Range ===================== // // ===================== Out Of Range =====================
&-out-of-range { // &-out-of-range {
input { // input {
color: @error-color; // color: @error-color;
} // }
} // }
} //}
//
@import './rtl'; //@import './rtl';

391
components/input-number/style/index.tsx
View File

@ -1,4 +1,389 @@
import '../../style/index.less'; // deps-lint-skip-all
import './index.less'; 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,
];
}

50
components/input/style/index.tsx
View File

@ -11,7 +11,7 @@ import {
withPrefix, withPrefix,
} from '../../_util/theme'; } from '../../_util/theme';
interface InputToken extends DerivativeToken { export interface InputToken extends DerivativeToken {
inputAffixMargin: number; inputAffixMargin: number;
inputPaddingVertical: number; inputPaddingVertical: number;
inputPaddingVerticalLG: number; inputPaddingVerticalLG: number;
@ -76,7 +76,7 @@ const genInputSmallStyle = (token: InputToken): CSSObject => ({
padding: `${token.inputPaddingVerticalSM}px ${token.paddingXS - 1}px`, 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)&': { '&-status-error:not(&-disabled):not(&-borderless)&': {
'&, &:hover': { '&, &:hover': {
borderColor: token.errorColor, borderColor: token.errorColor,
@ -139,7 +139,7 @@ export const genBasicInputStyle = (prefixCls: string, token: InputToken): CSSObj
...genActiveStyle(token), ...genActiveStyle(token),
}, },
'&:disabled, &[disabled]': { '&-disabled, &[disabled]': {
...genDisabledStyle(token), ...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', position: 'relative',
display: 'table', display: 'table',
width: '100%', width: '100%',
@ -739,6 +739,27 @@ const genSearchInputStyle = (
}, },
}); });
export const initInputToken = (token: DerivativeToken): InputToken => ({
...token,
inputAffixMargin: token.marginXXS,
inputPaddingVertical: Math.max(
Math.round(((token.controlHeight - token.fontSize * token.lineHeight) / 2) * 10) / 10 -
token.borderWidth,
3,
),
inputPaddingVerticalLG:
Math.ceil(((token.controlHeightLG - token.fontSizeLG * token.lineHeight) / 2) * 10) / 10 -
token.borderWidth,
inputPaddingVerticalSM: Math.max(
Math.round(((token.controlHeightSM - token.fontSize * token.lineHeight) / 2) * 10) / 10 -
token.borderWidth,
0,
),
inputPaddingHorizontal: token.paddingSM - token.borderWidth,
inputBorderHoverColor: token.primaryHoverColor,
inputBorderActiveColor: token.primaryHoverColor,
});
// ============================== Export ============================== // ============================== Export ==============================
export default function useStyle( export default function useStyle(
prefixCls: string, prefixCls: string,
@ -746,26 +767,7 @@ export default function useStyle(
): UseComponentStyleResult { ): UseComponentStyleResult {
const [theme, token, hashId] = useToken(); const [theme, token, hashId] = useToken();
const inputToken: InputToken = { const inputToken: InputToken = initInputToken(token);
...token,
inputAffixMargin: token.marginXXS,
inputPaddingVertical: Math.max(
Math.round(((token.controlHeight - token.fontSize * token.lineHeight) / 2) * 10) / 10 -
token.borderWidth,
3,
),
inputPaddingVerticalLG:
Math.ceil(((token.controlHeightLG - token.fontSizeLG * token.lineHeight) / 2) * 10) / 10 -
token.borderWidth,
inputPaddingVerticalSM: Math.max(
Math.round(((token.controlHeightSM - token.fontSize * token.lineHeight) / 2) * 10) / 10 -
token.borderWidth,
0,
),
inputPaddingHorizontal: token.paddingSM - 1,
inputBorderHoverColor: token.primaryHoverColor,
inputBorderActiveColor: token.primaryHoverColor,
};
const affixWrapperPrefixCls = `${prefixCls}-affix-wrapper`; const affixWrapperPrefixCls = `${prefixCls}-affix-wrapper`;
const groupPrefixCls = `${prefixCls}-group`; const groupPrefixCls = `${prefixCls}-group`;