2022-03-01 14:17:48 +08:00
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled' ;
2016-03-31 17:46:35 +08:00
import classNames from 'classnames' ;
2022-06-06 23:39:00 +08:00
import type { InputProps as RcInputProps , InputRef } from 'rc-input' ;
import RcInput from 'rc-input' ;
2022-09-30 15:58:34 +08:00
import type { BaseInputProps } from 'rc-input/lib/interface' ;
2022-03-01 14:17:48 +08:00
import { composeRef } from 'rc-util/lib/ref' ;
2022-06-06 23:39:00 +08:00
import React , { forwardRef , useContext , useEffect , useRef } from 'react' ;
import { ConfigContext } from '../config-provider' ;
import DisabledContext from '../config-provider/DisabledContext' ;
2022-04-06 21:49:30 +08:00
import type { SizeType } from '../config-provider/SizeContext' ;
import SizeContext from '../config-provider/SizeContext' ;
2022-06-06 23:39:00 +08:00
import { FormItemInputContext , NoFormStyle } from '../form/context' ;
2022-10-18 16:23:10 +08:00
import { NoCompactStyle , useCompactItemContext } from '../space/Compact' ;
2022-04-06 21:49:30 +08:00
import type { InputStatus } from '../_util/statusUtils' ;
import { getMergedStatus , getStatusClassNames } from '../_util/statusUtils' ;
2022-05-10 15:43:29 +08:00
import warning from '../_util/warning' ;
2022-10-13 15:07:43 +08:00
import useRemovePasswordTimeout from './hooks/useRemovePasswordTimeout' ;
2022-06-06 23:39:00 +08:00
import { hasPrefixSuffix } from './utils' ;
2016-03-31 17:46:35 +08:00
2022-03-09 10:38:02 +08:00
// CSSINJS
import useStyle from './style' ;
2020-12-29 22:42:04 +08:00
export interface InputFocusOptions extends FocusOptions {
cursor ? : 'start' | 'end' | 'all' ;
}
2022-03-01 14:17:48 +08:00
export type { InputRef } ;
2016-08-19 17:11:06 +08:00
2020-12-29 22:42:04 +08:00
export function triggerFocus (
element? : HTMLInputElement | HTMLTextAreaElement ,
option? : InputFocusOptions ,
) {
2022-09-30 15:58:34 +08:00
if ( ! element ) {
return ;
}
2020-12-29 22:42:04 +08:00
element . focus ( option ) ;
// Selection content
const { cursor } = option || { } ;
if ( cursor ) {
const len = element . value . length ;
switch ( cursor ) {
case 'start' :
element . setSelectionRange ( 0 , 0 ) ;
break ;
case 'end' :
element . setSelectionRange ( len , len ) ;
break ;
default :
element . setSelectionRange ( 0 , len ) ;
2022-09-30 15:58:34 +08:00
break ;
2020-12-29 22:42:04 +08:00
}
}
}
2022-03-01 14:17:48 +08:00
export interface InputProps
extends Omit <
RcInputProps ,
2023-03-28 09:57:55 +08:00
'wrapperClassName' | 'groupClassName' | 'inputClassName' | 'affixWrapperClassName' | 'classes'
2022-03-01 14:17:48 +08:00
> {
2023-01-20 11:03:50 +08:00
rootClassName? : string ;
2022-03-01 14:17:48 +08:00
size? : SizeType ;
2022-04-29 20:48:10 +08:00
disabled? : boolean ;
2022-03-01 14:17:48 +08:00
status? : InputStatus ;
bordered? : boolean ;
2022-08-04 10:03:58 +08:00
[ key : ` data- ${ string } ` ] : string | undefined ;
2019-11-01 18:19:29 +08:00
}
2022-03-01 14:17:48 +08:00
const Input = forwardRef < InputRef , InputProps > ( ( props , ref ) = > {
const {
prefixCls : customizePrefixCls ,
bordered = true ,
status : customStatus ,
size : customSize ,
2022-04-29 20:48:10 +08:00
disabled : customDisabled ,
2022-03-01 14:17:48 +08:00
onBlur ,
onFocus ,
suffix ,
2022-03-08 01:40:24 +08:00
allowClear ,
2022-03-10 19:04:51 +08:00
addonAfter ,
addonBefore ,
2022-10-18 16:23:10 +08:00
className ,
2023-01-20 11:03:50 +08:00
rootClassName ,
2022-09-29 23:40:24 +08:00
onChange ,
2023-03-28 09:57:55 +08:00
classNames : classes ,
2022-03-01 14:17:48 +08:00
. . . rest
} = props ;
2022-04-06 21:49:30 +08:00
const { getPrefixCls , direction , input } = React . useContext ( ConfigContext ) ;
2022-03-01 14:17:48 +08:00
const prefixCls = getPrefixCls ( 'input' , customizePrefixCls ) ;
const inputRef = useRef < InputRef > ( null ) ;
2022-03-09 10:38:02 +08:00
// Style
2022-04-06 21:49:30 +08:00
const [ wrapSSR , hashId ] = useStyle ( prefixCls ) ;
2022-03-09 10:38:02 +08:00
2022-10-18 16:23:10 +08:00
// ===================== Compact Item =====================
const { compactSize , compactItemClassnames } = useCompactItemContext ( prefixCls , direction ) ;
2022-03-16 16:04:01 +08:00
// ===================== Size =====================
2022-03-01 14:17:48 +08:00
const size = React . useContext ( SizeContext ) ;
2022-10-18 16:23:10 +08:00
const mergedSize = compactSize || customSize || size ;
2022-03-01 14:17:48 +08:00
2022-04-29 20:48:10 +08:00
// ===================== Disabled =====================
const disabled = React . useContext ( DisabledContext ) ;
2022-09-20 16:48:59 +08:00
const mergedDisabled = customDisabled ? ? disabled ;
2022-04-29 20:48:10 +08:00
2022-03-01 14:17:48 +08:00
// ===================== Status =====================
2022-03-25 17:48:12 +08:00
const { status : contextStatus , hasFeedback , feedbackIcon } = useContext ( FormItemInputContext ) ;
2022-03-01 14:17:48 +08:00
const mergedStatus = getMergedStatus ( contextStatus , customStatus ) ;
// ===================== Focus warning =====================
2022-03-14 15:37:02 +08:00
const inputHasPrefixSuffix = hasPrefixSuffix ( props ) || ! ! hasFeedback ;
2022-03-01 14:17:48 +08:00
const prevHasPrefixSuffix = useRef < boolean > ( inputHasPrefixSuffix ) ;
useEffect ( ( ) = > {
if ( inputHasPrefixSuffix && ! prevHasPrefixSuffix . current ) {
2022-05-10 15:43:29 +08:00
warning (
2022-03-01 14:17:48 +08:00
document . activeElement === inputRef . current ? . input ,
2019-02-27 15:32:29 +08:00
'Input' ,
2019-02-20 15:12:29 +08:00
` When Input is focused, dynamic add or remove prefix / suffix will make it lose focus caused by dom structure change. Read more: https://ant.design/components/input/#FAQ ` ,
) ;
}
2022-03-01 14:17:48 +08:00
prevHasPrefixSuffix . current = inputHasPrefixSuffix ;
} , [ inputHasPrefixSuffix ] ) ;
// ===================== Remove Password value =====================
2022-10-13 15:07:43 +08:00
const removePasswordTimeout = useRemovePasswordTimeout ( inputRef , true ) ;
2022-02-14 17:09:35 +08:00
2022-03-01 14:17:48 +08:00
const handleBlur = ( e : React.FocusEvent < HTMLInputElement > ) = > {
removePasswordTimeout ( ) ;
onBlur ? . ( e ) ;
2022-02-14 17:09:35 +08:00
} ;
2022-03-01 14:17:48 +08:00
const handleFocus = ( e : React.FocusEvent < HTMLInputElement > ) = > {
removePasswordTimeout ( ) ;
onFocus ? . ( e ) ;
2018-12-05 19:12:18 +08:00
} ;
2022-09-29 23:40:24 +08:00
const handleChange = ( e : React.ChangeEvent < HTMLInputElement > ) = > {
removePasswordTimeout ( ) ;
onChange ? . ( e ) ;
} ;
2022-03-01 14:17:48 +08:00
const suffixNode = ( hasFeedback || suffix ) && (
< >
{ suffix }
2022-03-25 17:48:12 +08:00
{ hasFeedback && feedbackIcon }
2022-03-01 14:17:48 +08:00
< / >
) ;
2022-03-08 01:40:24 +08:00
// Allow clear
2022-09-30 15:58:34 +08:00
let mergedAllowClear : BaseInputProps [ 'allowClear' ] ;
2022-03-08 01:40:24 +08:00
if ( typeof allowClear === 'object' && allowClear ? . clearIcon ) {
mergedAllowClear = allowClear ;
} else if ( allowClear ) {
mergedAllowClear = { clearIcon : < CloseCircleFilled / > } ;
}
2022-03-09 10:38:02 +08:00
return wrapSSR (
2022-03-01 14:17:48 +08:00
< RcInput
ref = { composeRef ( ref , inputRef ) }
prefixCls = { prefixCls }
autoComplete = { input ? . autoComplete }
{ . . . rest }
2023-01-16 09:55:52 +08:00
disabled = { mergedDisabled }
2022-03-01 14:17:48 +08:00
onBlur = { handleBlur }
onFocus = { handleFocus }
suffix = { suffixNode }
2022-03-08 01:40:24 +08:00
allowClear = { mergedAllowClear }
2023-01-20 11:03:50 +08:00
className = { classNames ( className , rootClassName , compactItemClassnames ) }
2022-09-29 23:40:24 +08:00
onChange = { handleChange }
2022-06-06 23:39:00 +08:00
addonAfter = {
addonAfter && (
2022-10-18 16:23:10 +08:00
< NoCompactStyle >
< NoFormStyle override status >
{ addonAfter }
< / NoFormStyle >
< / NoCompactStyle >
2022-06-06 23:39:00 +08:00
)
}
addonBefore = {
addonBefore && (
2022-10-18 16:23:10 +08:00
< NoCompactStyle >
< NoFormStyle override status >
{ addonBefore }
< / NoFormStyle >
< / NoCompactStyle >
2022-06-06 23:39:00 +08:00
)
}
2023-03-28 09:57:55 +08:00
classNames = { {
. . . classes ,
2023-01-11 14:18:13 +08:00
input : classNames (
{
[ ` ${ prefixCls } -sm ` ] : mergedSize === 'small' ,
[ ` ${ prefixCls } -lg ` ] : mergedSize === 'large' ,
[ ` ${ prefixCls } -rtl ` ] : direction === 'rtl' ,
[ ` ${ prefixCls } -borderless ` ] : ! bordered ,
} ,
! inputHasPrefixSuffix && getStatusClassNames ( prefixCls , mergedStatus ) ,
2023-03-28 09:57:55 +08:00
classes ? . input ,
2023-01-11 14:18:13 +08:00
hashId ,
) ,
2023-03-28 09:57:55 +08:00
} }
classes = { {
2023-01-11 14:18:13 +08:00
affixWrapper : classNames (
{
[ ` ${ prefixCls } -affix-wrapper-sm ` ] : mergedSize === 'small' ,
[ ` ${ prefixCls } -affix-wrapper-lg ` ] : mergedSize === 'large' ,
[ ` ${ prefixCls } -affix-wrapper-rtl ` ] : direction === 'rtl' ,
[ ` ${ prefixCls } -affix-wrapper-borderless ` ] : ! bordered ,
} ,
getStatusClassNames ( ` ${ prefixCls } -affix-wrapper ` , mergedStatus , hasFeedback ) ,
hashId ,
) ,
wrapper : classNames (
{
[ ` ${ prefixCls } -group-rtl ` ] : direction === 'rtl' ,
} ,
hashId ,
) ,
group : classNames (
{
[ ` ${ prefixCls } -group-wrapper-sm ` ] : mergedSize === 'small' ,
[ ` ${ prefixCls } -group-wrapper-lg ` ] : mergedSize === 'large' ,
[ ` ${ prefixCls } -group-wrapper-rtl ` ] : direction === 'rtl' ,
2023-02-17 15:45:29 +08:00
[ ` ${ prefixCls } -group-wrapper-disabled ` ] : mergedDisabled ,
2023-01-11 14:18:13 +08:00
} ,
getStatusClassNames ( ` ${ prefixCls } -group-wrapper ` , mergedStatus , hasFeedback ) ,
hashId ,
) ,
} }
2022-03-09 10:38:02 +08:00
/ > ,
2022-03-01 14:17:48 +08:00
) ;
} ) ;
2018-12-26 22:47:55 +08:00
export default Input ;