mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-08 01:53:34 +08:00
refactor: code optimization (#49431)
* refactor: refactor InputAddon code * fix: fix * fix: fix * Update components/_util/InputAddon.tsx Signed-off-by: afc163 <afc163@gmail.com> * fix: fix lint --------- Signed-off-by: afc163 <afc163@gmail.com> Co-authored-by: afc163 <afc163@gmail.com>
This commit is contained in:
parent
4f3e381797
commit
41fba82b39
15
components/_util/InputAddon.tsx
Normal file
15
components/_util/InputAddon.tsx
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import { NoFormStyle } from '../form/context';
|
||||||
|
import { NoCompactStyle } from '../space/Compact';
|
||||||
|
|
||||||
|
const getInputAddon = (addon: React.ReactNode): React.ReactNode =>
|
||||||
|
addon ? (
|
||||||
|
<NoCompactStyle>
|
||||||
|
<NoFormStyle override status>
|
||||||
|
{addon}
|
||||||
|
</NoFormStyle>
|
||||||
|
</NoCompactStyle>
|
||||||
|
) : null;
|
||||||
|
|
||||||
|
export default getInputAddon;
|
@ -5,6 +5,7 @@ import classNames from 'classnames';
|
|||||||
import type { InputNumberProps as RcInputNumberProps, ValueType } from 'rc-input-number';
|
import type { InputNumberProps as RcInputNumberProps, ValueType } from 'rc-input-number';
|
||||||
import RcInputNumber from 'rc-input-number';
|
import RcInputNumber from 'rc-input-number';
|
||||||
|
|
||||||
|
import getInputAddon from '../_util/InputAddon';
|
||||||
import type { InputStatus } from '../_util/statusUtils';
|
import type { InputStatus } from '../_util/statusUtils';
|
||||||
import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
|
import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
|
||||||
import { devUseWarning } from '../_util/warning';
|
import { devUseWarning } from '../_util/warning';
|
||||||
@ -13,10 +14,10 @@ import DisabledContext from '../config-provider/DisabledContext';
|
|||||||
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
|
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
|
||||||
import useSize from '../config-provider/hooks/useSize';
|
import useSize from '../config-provider/hooks/useSize';
|
||||||
import type { SizeType } from '../config-provider/SizeContext';
|
import type { SizeType } from '../config-provider/SizeContext';
|
||||||
import { FormItemInputContext, NoFormStyle } from '../form/context';
|
import { FormItemInputContext } from '../form/context';
|
||||||
import type { Variant } from '../form/hooks/useVariants';
|
import type { Variant } from '../form/hooks/useVariants';
|
||||||
import useVariant from '../form/hooks/useVariants';
|
import useVariant from '../form/hooks/useVariants';
|
||||||
import { NoCompactStyle, useCompactItemContext } from '../space/Compact';
|
import { useCompactItemContext } from '../space/Compact';
|
||||||
import useStyle from './style';
|
import useStyle from './style';
|
||||||
|
|
||||||
export interface InputNumberProps<T extends ValueType = ValueType>
|
export interface InputNumberProps<T extends ValueType = ValueType>
|
||||||
@ -124,19 +125,6 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
|
|||||||
);
|
);
|
||||||
const wrapperClassName = `${prefixCls}-group`;
|
const wrapperClassName = `${prefixCls}-group`;
|
||||||
|
|
||||||
const getAddon = (addon: React.ReactNode): React.ReactNode => {
|
|
||||||
if (!addon) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<NoCompactStyle>
|
|
||||||
<NoFormStyle override status>
|
|
||||||
{addon}
|
|
||||||
</NoFormStyle>
|
|
||||||
</NoCompactStyle>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const element = (
|
const element = (
|
||||||
<RcInputNumber
|
<RcInputNumber
|
||||||
ref={inputRef}
|
ref={inputRef}
|
||||||
@ -149,8 +137,8 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
|
|||||||
controls={controlsTemp}
|
controls={controlsTemp}
|
||||||
prefix={prefix}
|
prefix={prefix}
|
||||||
suffix={suffixNode}
|
suffix={suffixNode}
|
||||||
addonBefore={getAddon(addonBefore)}
|
addonBefore={getInputAddon(addonBefore)}
|
||||||
addonAfter={getAddon(addonAfter)}
|
addonAfter={getInputAddon(addonAfter)}
|
||||||
classNames={{
|
classNames={{
|
||||||
input: inputNumberClass,
|
input: inputNumberClass,
|
||||||
variant: classNames(
|
variant: classNames(
|
||||||
|
@ -5,6 +5,7 @@ import RcInput from 'rc-input';
|
|||||||
import { composeRef } from 'rc-util/lib/ref';
|
import { composeRef } from 'rc-util/lib/ref';
|
||||||
|
|
||||||
import getAllowClear from '../_util/getAllowClear';
|
import getAllowClear from '../_util/getAllowClear';
|
||||||
|
import getInputAddon from '../_util/InputAddon';
|
||||||
import type { InputStatus } from '../_util/statusUtils';
|
import type { InputStatus } from '../_util/statusUtils';
|
||||||
import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
|
import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
|
||||||
import { devUseWarning } from '../_util/warning';
|
import { devUseWarning } from '../_util/warning';
|
||||||
@ -13,10 +14,10 @@ import DisabledContext from '../config-provider/DisabledContext';
|
|||||||
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
|
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
|
||||||
import useSize from '../config-provider/hooks/useSize';
|
import useSize from '../config-provider/hooks/useSize';
|
||||||
import type { SizeType } from '../config-provider/SizeContext';
|
import type { SizeType } from '../config-provider/SizeContext';
|
||||||
import { FormItemInputContext, NoFormStyle } from '../form/context';
|
import { FormItemInputContext } from '../form/context';
|
||||||
import type { Variant } from '../form/hooks/useVariants';
|
import type { Variant } from '../form/hooks/useVariants';
|
||||||
import useVariant from '../form/hooks/useVariants';
|
import useVariant from '../form/hooks/useVariants';
|
||||||
import { NoCompactStyle, useCompactItemContext } from '../space/Compact';
|
import { useCompactItemContext } from '../space/Compact';
|
||||||
import useRemovePasswordTimeout from './hooks/useRemovePasswordTimeout';
|
import useRemovePasswordTimeout from './hooks/useRemovePasswordTimeout';
|
||||||
import useStyle from './style';
|
import useStyle from './style';
|
||||||
import { hasPrefixSuffix } from './utils';
|
import { hasPrefixSuffix } from './utils';
|
||||||
@ -171,15 +172,6 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
|
|||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
||||||
const getAddon = (addon: React.ReactNode): React.ReactNode =>
|
|
||||||
addon && (
|
|
||||||
<NoCompactStyle>
|
|
||||||
<NoFormStyle override status>
|
|
||||||
{addon}
|
|
||||||
</NoFormStyle>
|
|
||||||
</NoCompactStyle>
|
|
||||||
);
|
|
||||||
|
|
||||||
const mergedAllowClear = getAllowClear(allowClear ?? input?.allowClear);
|
const mergedAllowClear = getAllowClear(allowClear ?? input?.allowClear);
|
||||||
|
|
||||||
const [variant, enableVariantCls] = useVariant(customVariant, bordered);
|
const [variant, enableVariantCls] = useVariant(customVariant, bordered);
|
||||||
@ -206,8 +198,8 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
|
|||||||
input?.className,
|
input?.className,
|
||||||
)}
|
)}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
addonBefore={getAddon(addonBefore)}
|
addonBefore={getInputAddon(addonBefore)}
|
||||||
addonAfter={getAddon(addonAfter)}
|
addonAfter={getInputAddon(addonAfter)}
|
||||||
classNames={{
|
classNames={{
|
||||||
...classes,
|
...classes,
|
||||||
...input?.classNames,
|
...input?.classNames,
|
||||||
|
Loading…
Reference in New Issue
Block a user