2019-11-01 18:19:29 +08:00
|
|
|
import * as React from 'react';
|
|
|
|
import classNames from 'classnames';
|
2020-03-02 12:09:38 +08:00
|
|
|
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
|
2019-11-01 18:19:29 +08:00
|
|
|
import { tuple } from '../_util/type';
|
2020-01-03 13:38:16 +08:00
|
|
|
import { InputProps, getInputClassName } from './Input';
|
2020-11-04 14:12:45 +08:00
|
|
|
import { DirectionType } from '../config-provider';
|
2020-01-03 13:38:16 +08:00
|
|
|
import { SizeType } from '../config-provider/SizeContext';
|
2020-05-14 20:54:49 +08:00
|
|
|
import { cloneElement } from '../_util/reactNode';
|
2019-11-01 18:19:29 +08:00
|
|
|
|
|
|
|
const ClearableInputType = tuple('text', 'input');
|
|
|
|
|
|
|
|
export function hasPrefixSuffix(props: InputProps | ClearableInputProps) {
|
|
|
|
return !!(props.prefix || props.suffix || props.allowClear);
|
|
|
|
}
|
|
|
|
|
2020-10-30 15:27:37 +08:00
|
|
|
function hasAddon(props: InputProps | ClearableInputProps) {
|
|
|
|
return !!(props.addonBefore || props.addonAfter);
|
|
|
|
}
|
|
|
|
|
2020-12-28 15:30:18 +08:00
|
|
|
/** This basic props required for input and textarea. */
|
2019-11-01 18:19:29 +08:00
|
|
|
interface BasicProps {
|
|
|
|
prefixCls: string;
|
2019-12-23 18:33:08 +08:00
|
|
|
inputType: typeof ClearableInputType[number];
|
2019-11-01 18:19:29 +08:00
|
|
|
value?: any;
|
|
|
|
allowClear?: boolean;
|
2020-06-12 18:50:36 +08:00
|
|
|
element: React.ReactElement;
|
2019-11-01 18:19:29 +08:00
|
|
|
handleReset: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
|
|
|
|
className?: string;
|
2021-01-21 17:16:51 +08:00
|
|
|
style?: React.CSSProperties;
|
2019-11-01 18:19:29 +08:00
|
|
|
disabled?: boolean;
|
2020-11-04 14:12:45 +08:00
|
|
|
direction?: DirectionType;
|
2020-01-14 11:59:38 +08:00
|
|
|
focused?: boolean;
|
2020-02-20 19:56:22 +08:00
|
|
|
readOnly?: boolean;
|
2020-07-16 00:25:47 +08:00
|
|
|
bordered: boolean;
|
2019-11-01 18:19:29 +08:00
|
|
|
}
|
|
|
|
|
2020-12-28 15:30:18 +08:00
|
|
|
/** This props only for input. */
|
2019-11-01 18:19:29 +08:00
|
|
|
interface ClearableInputProps extends BasicProps {
|
2020-01-03 13:38:16 +08:00
|
|
|
size?: SizeType;
|
2019-11-01 18:19:29 +08:00
|
|
|
suffix?: React.ReactNode;
|
|
|
|
prefix?: React.ReactNode;
|
|
|
|
addonBefore?: React.ReactNode;
|
|
|
|
addonAfter?: React.ReactNode;
|
2020-11-18 11:27:58 +08:00
|
|
|
triggerFocus?: () => void;
|
2019-11-01 18:19:29 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
class ClearableLabeledInput extends React.Component<ClearableInputProps> {
|
2020-04-03 16:11:41 +08:00
|
|
|
/** @private Do not use out of this class. We do not promise this is always keep. */
|
|
|
|
private containerRef = React.createRef<HTMLSpanElement>();
|
|
|
|
|
|
|
|
onInputMouseUp: React.MouseEventHandler = e => {
|
|
|
|
if (this.containerRef.current?.contains(e.target as Element)) {
|
|
|
|
const { triggerFocus } = this.props;
|
2020-11-18 11:27:58 +08:00
|
|
|
triggerFocus?.();
|
2020-04-03 16:11:41 +08:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2019-11-01 18:19:29 +08:00
|
|
|
renderClearIcon(prefixCls: string) {
|
2020-10-13 21:16:20 +08:00
|
|
|
const { allowClear, value, disabled, readOnly, handleReset } = this.props;
|
2020-04-14 23:04:23 +08:00
|
|
|
if (!allowClear) {
|
2019-11-01 18:19:29 +08:00
|
|
|
return null;
|
|
|
|
}
|
2020-04-14 23:04:23 +08:00
|
|
|
const needClear = !disabled && !readOnly && value;
|
2020-10-13 21:16:20 +08:00
|
|
|
const className = `${prefixCls}-clear-icon`;
|
2020-04-14 23:04:23 +08:00
|
|
|
return (
|
|
|
|
<CloseCircleFilled
|
|
|
|
onClick={handleReset}
|
2020-09-06 13:07:39 +08:00
|
|
|
className={classNames(
|
|
|
|
{
|
|
|
|
[`${className}-hidden`]: !needClear,
|
|
|
|
},
|
|
|
|
className,
|
|
|
|
)}
|
2020-04-14 23:04:23 +08:00
|
|
|
role="button"
|
|
|
|
/>
|
|
|
|
);
|
2019-11-01 18:19:29 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
renderSuffix(prefixCls: string) {
|
|
|
|
const { suffix, allowClear } = this.props;
|
|
|
|
if (suffix || allowClear) {
|
|
|
|
return (
|
|
|
|
<span className={`${prefixCls}-suffix`}>
|
|
|
|
{this.renderClearIcon(prefixCls)}
|
|
|
|
{suffix}
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2020-06-12 18:50:36 +08:00
|
|
|
renderLabeledIcon(prefixCls: string, element: React.ReactElement) {
|
2020-01-14 11:59:38 +08:00
|
|
|
const {
|
|
|
|
focused,
|
|
|
|
value,
|
|
|
|
prefix,
|
|
|
|
className,
|
|
|
|
size,
|
|
|
|
suffix,
|
|
|
|
disabled,
|
|
|
|
allowClear,
|
|
|
|
direction,
|
|
|
|
style,
|
2020-05-30 00:37:59 +08:00
|
|
|
readOnly,
|
2020-07-16 00:25:47 +08:00
|
|
|
bordered,
|
2020-01-14 11:59:38 +08:00
|
|
|
} = this.props;
|
|
|
|
const suffixNode = this.renderSuffix(prefixCls);
|
|
|
|
if (!hasPrefixSuffix(this.props)) {
|
2020-05-14 20:54:49 +08:00
|
|
|
return cloneElement(element, {
|
2020-01-14 11:59:38 +08:00
|
|
|
value,
|
2019-11-01 18:19:29 +08:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2020-01-14 11:59:38 +08:00
|
|
|
const prefixNode = prefix ? <span className={`${prefixCls}-prefix`}>{prefix}</span> : null;
|
2019-11-01 18:19:29 +08:00
|
|
|
|
2020-10-20 21:44:37 +08:00
|
|
|
const affixWrapperCls = classNames(`${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',
|
|
|
|
[`${prefixCls}-affix-wrapper-readonly`]: readOnly,
|
|
|
|
[`${prefixCls}-affix-wrapper-borderless`]: !bordered,
|
2020-10-30 15:27:37 +08:00
|
|
|
// className will go to addon wrapper
|
|
|
|
[`${className}`]: !hasAddon(this.props) && className,
|
2020-10-20 21:44:37 +08:00
|
|
|
});
|
2019-11-01 18:19:29 +08:00
|
|
|
return (
|
2020-04-03 16:11:41 +08:00
|
|
|
<span
|
|
|
|
ref={this.containerRef}
|
|
|
|
className={affixWrapperCls}
|
|
|
|
style={style}
|
|
|
|
onMouseUp={this.onInputMouseUp}
|
|
|
|
>
|
2020-01-14 11:59:38 +08:00
|
|
|
{prefixNode}
|
2020-05-14 20:54:49 +08:00
|
|
|
{cloneElement(element, {
|
2019-11-01 18:19:29 +08:00
|
|
|
style: null,
|
2020-01-14 11:59:38 +08:00
|
|
|
value,
|
2020-07-16 00:25:47 +08:00
|
|
|
className: getInputClassName(prefixCls, bordered, size, disabled),
|
2019-11-01 18:19:29 +08:00
|
|
|
})}
|
2020-01-14 11:59:38 +08:00
|
|
|
{suffixNode}
|
2019-11-01 18:19:29 +08:00
|
|
|
</span>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-06-12 18:50:36 +08:00
|
|
|
renderInputWithLabel(prefixCls: string, labeledElement: React.ReactElement) {
|
2020-01-02 19:10:16 +08:00
|
|
|
const { addonBefore, addonAfter, style, size, className, direction } = this.props;
|
2019-11-01 18:19:29 +08:00
|
|
|
// Not wrap when there is not addons
|
2020-10-30 15:27:37 +08:00
|
|
|
if (!hasAddon(this.props)) {
|
2019-11-01 18:19:29 +08:00
|
|
|
return labeledElement;
|
|
|
|
}
|
|
|
|
|
|
|
|
const wrapperClassName = `${prefixCls}-group`;
|
|
|
|
const addonClassName = `${wrapperClassName}-addon`;
|
|
|
|
const addonBeforeNode = addonBefore ? (
|
|
|
|
<span className={addonClassName}>{addonBefore}</span>
|
|
|
|
) : null;
|
|
|
|
const addonAfterNode = addonAfter ? <span className={addonClassName}>{addonAfter}</span> : null;
|
|
|
|
|
2020-10-30 15:27:37 +08:00
|
|
|
const mergedWrapperClassName = classNames(`${prefixCls}-wrapper`, wrapperClassName, {
|
2020-01-02 19:10:16 +08:00
|
|
|
[`${wrapperClassName}-rtl`]: direction === 'rtl',
|
2019-11-01 18:19:29 +08:00
|
|
|
});
|
|
|
|
|
2020-09-06 13:07:39 +08:00
|
|
|
const mergedGroupClassName = classNames(
|
|
|
|
`${prefixCls}-group-wrapper`,
|
|
|
|
{
|
|
|
|
[`${prefixCls}-group-wrapper-sm`]: size === 'small',
|
|
|
|
[`${prefixCls}-group-wrapper-lg`]: size === 'large',
|
|
|
|
[`${prefixCls}-group-wrapper-rtl`]: direction === 'rtl',
|
|
|
|
},
|
|
|
|
className,
|
|
|
|
);
|
2019-11-01 18:19:29 +08:00
|
|
|
|
|
|
|
// Need another wrapper for changing display:table to display:inline-block
|
|
|
|
// and put style prop in wrapper
|
|
|
|
return (
|
|
|
|
<span className={mergedGroupClassName} style={style}>
|
|
|
|
<span className={mergedWrapperClassName}>
|
|
|
|
{addonBeforeNode}
|
2020-05-14 20:54:49 +08:00
|
|
|
{cloneElement(labeledElement, { style: null })}
|
2019-11-01 18:19:29 +08:00
|
|
|
{addonAfterNode}
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-06-12 18:50:36 +08:00
|
|
|
renderTextAreaWithClearIcon(prefixCls: string, element: React.ReactElement) {
|
2020-07-16 00:25:47 +08:00
|
|
|
const { value, allowClear, className, style, direction, bordered } = this.props;
|
2019-11-01 18:19:29 +08:00
|
|
|
if (!allowClear) {
|
2020-05-14 20:54:49 +08:00
|
|
|
return cloneElement(element, {
|
2019-11-01 18:19:29 +08:00
|
|
|
value,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
const affixWrapperCls = classNames(
|
|
|
|
`${prefixCls}-affix-wrapper`,
|
|
|
|
`${prefixCls}-affix-wrapper-textarea-with-clear-btn`,
|
2020-07-16 00:25:47 +08:00
|
|
|
{
|
|
|
|
[`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl',
|
|
|
|
[`${prefixCls}-affix-wrapper-borderless`]: !bordered,
|
2020-10-30 15:27:37 +08:00
|
|
|
// className will go to addon wrapper
|
|
|
|
[`${className}`]: !hasAddon(this.props) && className,
|
2020-07-16 00:25:47 +08:00
|
|
|
},
|
2019-11-01 18:19:29 +08:00
|
|
|
);
|
|
|
|
return (
|
|
|
|
<span className={affixWrapperCls} style={style}>
|
2020-05-14 20:54:49 +08:00
|
|
|
{cloneElement(element, {
|
2019-11-01 18:19:29 +08:00
|
|
|
style: null,
|
|
|
|
value,
|
|
|
|
})}
|
|
|
|
{this.renderClearIcon(prefixCls)}
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-04-23 18:11:11 +08:00
|
|
|
render() {
|
2019-11-01 18:19:29 +08:00
|
|
|
const { prefixCls, inputType, element } = this.props;
|
|
|
|
if (inputType === ClearableInputType[0]) {
|
|
|
|
return this.renderTextAreaWithClearIcon(prefixCls, element);
|
|
|
|
}
|
|
|
|
return this.renderInputWithLabel(prefixCls, this.renderLabeledIcon(prefixCls, element));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default ClearableLabeledInput;
|