refactor: TextArea (#40045)
* refactor: TextArea * chore: update snapshot * chore: update snapshot * chore: fix lint * chore: classes * refactor: mentions * chore: bump rc-textarea * chore: code clean * chore: code clean * chore: UPDATE SNAPSHOT * chore: code clean * test: cov * fix: textarea sizepull/40160/head
MadCcc
2 years ago
committed by
GitHub
parent
3f87a2d263
commit
642bb582eb
@ -1,137 +0,0 @@
|
||||
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
|
||||
import classNames from 'classnames';
|
||||
import * as React from 'react';
|
||||
import type { DirectionType } from '../config-provider';
|
||||
import type { SizeType } from '../config-provider/SizeContext';
|
||||
import type { FormItemStatusContextProps } from '../form/context';
|
||||
import { FormItemInputContext } from '../form/context';
|
||||
import { cloneElement } from '../_util/reactNode';
|
||||
import type { InputStatus } from '../_util/statusUtils';
|
||||
import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
|
||||
import type { InputProps } from './Input';
|
||||
|
||||
const ClearableInputType = ['text', 'input'] as const;
|
||||
|
||||
function hasAddon(props: InputProps | ClearableInputProps) {
|
||||
return !!(props.addonBefore || props.addonAfter);
|
||||
}
|
||||
|
||||
/** 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<HTMLElement, MouseEvent>) => void;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
disabled?: boolean;
|
||||
direction?: DirectionType;
|
||||
focused?: boolean;
|
||||
readOnly?: boolean;
|
||||
bordered: boolean;
|
||||
hidden?: boolean;
|
||||
}
|
||||
|
||||
/** This props only for input. */
|
||||
export interface ClearableInputProps extends BasicProps {
|
||||
size?: SizeType;
|
||||
suffix?: React.ReactNode;
|
||||
prefix?: React.ReactNode;
|
||||
addonBefore?: React.ReactNode;
|
||||
addonAfter?: React.ReactNode;
|
||||
triggerFocus?: () => void;
|
||||
status?: InputStatus;
|
||||
hashId?: string;
|
||||
}
|
||||
|
||||
class ClearableLabeledInput extends React.Component<ClearableInputProps> {
|
||||
renderClearIcon(prefixCls: string) {
|
||||
const { value, disabled, readOnly, handleReset, suffix } = this.props;
|
||||
const needClear = !disabled && !readOnly && value;
|
||||
const className = `${prefixCls}-clear-icon`;
|
||||
return (
|
||||
<CloseCircleFilled
|
||||
onClick={handleReset}
|
||||
// Do not trigger onBlur when clear input
|
||||
// https://github.com/ant-design/ant-design/issues/31200
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
className={classNames(
|
||||
{
|
||||
[`${className}-hidden`]: !needClear,
|
||||
[`${className}-has-suffix`]: !!suffix,
|
||||
},
|
||||
className,
|
||||
)}
|
||||
role="button"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
renderTextAreaWithClearIcon(
|
||||
prefixCls: string,
|
||||
element: React.ReactElement,
|
||||
statusContext: FormItemStatusContextProps,
|
||||
) {
|
||||
const {
|
||||
value,
|
||||
allowClear,
|
||||
className,
|
||||
style,
|
||||
direction,
|
||||
bordered,
|
||||
hidden,
|
||||
status: customStatus,
|
||||
hashId,
|
||||
} = this.props;
|
||||
|
||||
const { status: contextStatus, hasFeedback } = statusContext;
|
||||
|
||||
if (!allowClear) {
|
||||
return cloneElement(element, {
|
||||
value,
|
||||
});
|
||||
}
|
||||
const affixWrapperCls = classNames(
|
||||
`${prefixCls}-affix-wrapper`,
|
||||
`${prefixCls}-affix-wrapper-textarea-with-clear-btn`,
|
||||
getStatusClassNames(
|
||||
`${prefixCls}-affix-wrapper`,
|
||||
getMergedStatus(contextStatus, customStatus),
|
||||
hasFeedback,
|
||||
),
|
||||
{
|
||||
[`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl',
|
||||
[`${prefixCls}-affix-wrapper-borderless`]: !bordered,
|
||||
// className will go to addon wrapper
|
||||
[`${className}`]: !hasAddon(this.props) && className,
|
||||
},
|
||||
hashId,
|
||||
);
|
||||
return (
|
||||
<span className={affixWrapperCls} style={style} hidden={hidden}>
|
||||
{cloneElement(element, {
|
||||
style: null,
|
||||
value,
|
||||
})}
|
||||
{this.renderClearIcon(prefixCls)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<FormItemInputContext.Consumer>
|
||||
{(statusContext) => {
|
||||
const { prefixCls, inputType, element } = this.props;
|
||||
if (inputType === ClearableInputType[0]) {
|
||||
return this.renderTextAreaWithClearIcon(prefixCls, element, statusContext);
|
||||
}
|
||||
}}
|
||||
</FormItemInputContext.Consumer>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ClearableLabeledInput;
|
||||
@ -1,7 +1,6 @@
|
||||
import type { ClearableInputProps } from './ClearableLabeledInput';
|
||||
import type { InputProps } from './Input';
|
||||
|
||||
// eslint-disable-next-line import/prefer-default-export
|
||||
export function hasPrefixSuffix(props: InputProps | ClearableInputProps) {
|
||||
export function hasPrefixSuffix(props: InputProps) {
|
||||
return !!(props.prefix || props.suffix || props.allowClear);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue