import * as React from 'react'; import classNames from 'classnames'; import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled'; import { tuple } from '../_util/type'; import { InputProps, getInputClassName } from './Input'; import { SizeType } from '../config-provider/SizeContext'; const ClearableInputType = tuple('text', 'input'); export function hasPrefixSuffix(props: InputProps | ClearableInputProps) { return !!(props.prefix || props.suffix || props.allowClear); } /** * This basic props required for input and textarea. */ interface BasicProps { prefixCls: string; inputType: typeof ClearableInputType[number]; value?: any; allowClear?: boolean; element: React.ReactElement; handleReset: (event: React.MouseEvent) => void; className?: string; style?: object; disabled?: boolean; direction?: any; focused?: boolean; readOnly?: boolean; } /** * This props only for input. */ interface ClearableInputProps extends BasicProps { size?: SizeType; suffix?: React.ReactNode; prefix?: React.ReactNode; addonBefore?: React.ReactNode; addonAfter?: React.ReactNode; triggerFocus: () => void; } class ClearableLabeledInput extends React.Component { renderClearIcon(prefixCls: string) { const { allowClear, value, disabled, readOnly, inputType, handleReset } = this.props; if ( !allowClear || disabled || readOnly || value === undefined || value === null || value === '' ) { return null; } const className = inputType === ClearableInputType[0] ? `${prefixCls}-textarea-clear-icon` : `${prefixCls}-clear-icon`; return ; } renderSuffix(prefixCls: string) { const { suffix, allowClear } = this.props; if (suffix || allowClear) { return ( {this.renderClearIcon(prefixCls)} {suffix} ); } return null; } renderLabeledIcon(prefixCls: string, element: React.ReactElement) { const { focused, value, prefix, className, size, suffix, disabled, allowClear, direction, style, triggerFocus, } = this.props; const suffixNode = this.renderSuffix(prefixCls); if (!hasPrefixSuffix(this.props)) { return React.cloneElement(element, { value, }); } const prefixNode = prefix ? {prefix} : null; const affixWrapperCls = classNames(className, `${prefixCls}-affix-wrapper`, { [`${prefixCls}-affix-wrapper-focused`]: focused, [`${prefixCls}-affix-wrapper-disabled`]: disabled, [`${prefixCls}-affix-wrapper-sm`]: size === 'small', [`${prefixCls}-affix-wrapper-lg`]: size === 'large', [`${prefixCls}-affix-wrapper-input-with-clear-btn`]: suffix && allowClear && value, [`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl', }); return ( {prefixNode} {React.cloneElement(element, { style: null, value, className: getInputClassName(prefixCls, size, disabled), })} {suffixNode} ); } renderInputWithLabel(prefixCls: string, labeledElement: React.ReactElement) { const { addonBefore, addonAfter, style, size, className, direction } = this.props; // Not wrap when there is not addons if (!addonBefore && !addonAfter) { return labeledElement; } const wrapperClassName = `${prefixCls}-group`; const addonClassName = `${wrapperClassName}-addon`; const addonBeforeNode = addonBefore ? ( {addonBefore} ) : null; const addonAfterNode = addonAfter ? {addonAfter} : null; const mergedWrapperClassName = classNames(`${prefixCls}-wrapper`, { [wrapperClassName]: addonBefore || addonAfter, [`${wrapperClassName}-rtl`]: direction === 'rtl', }); const mergedGroupClassName = classNames(className, `${prefixCls}-group-wrapper`, { [`${prefixCls}-group-wrapper-sm`]: size === 'small', [`${prefixCls}-group-wrapper-lg`]: size === 'large', [`${prefixCls}-group-wrapper-rtl`]: direction === 'rtl', }); // Need another wrapper for changing display:table to display:inline-block // and put style prop in wrapper return ( {addonBeforeNode} {React.cloneElement(labeledElement, { style: null })} {addonAfterNode} ); } renderTextAreaWithClearIcon(prefixCls: string, element: React.ReactElement) { const { value, allowClear, className, style } = this.props; if (!allowClear) { return React.cloneElement(element, { value, }); } const affixWrapperCls = classNames( className, `${prefixCls}-affix-wrapper`, `${prefixCls}-affix-wrapper-textarea-with-clear-btn`, ); return ( {React.cloneElement(element, { style: null, value, })} {this.renderClearIcon(prefixCls)} ); } renderClearableLabeledInput() { const { prefixCls, inputType, element } = this.props; if (inputType === ClearableInputType[0]) { return this.renderTextAreaWithClearIcon(prefixCls, element); } return this.renderInputWithLabel(prefixCls, this.renderLabeledIcon(prefixCls, element)); } render() { return this.renderClearableLabeledInput(); } } export default ClearableLabeledInput;