fix Input及相关组件设置 hidden 时展示问题 (#33735)

* fix: Image 图片底部空白 #30825

* feat: Input、Input.search、Input.Textarea、Input.password 设置 hidden 时 所有 prefix or suffix or showCount or allowClear or addonBefore or addonAfter 都应该隐藏

* fix: lint

* fix: test

* fix: test ui

components/input/ClearableLabeledInput.tsx

@@ -148,7 +148,7 @@ class ClearableLabeledInput extends React.Component<ClearableInputProps> {
   }
 
   renderInputWithLabel(prefixCls: string, labeledElement: React.ReactElement) {
-    const { addonBefore, addonAfter, style, size, className, direction } = this.props;
+    const { addonBefore, addonAfter, style, size, className, direction, hidden } = this.props;
     // Not wrap when there is not addons
     if (!hasAddon(this.props)) {
       return labeledElement;
@@ -178,7 +178,7 @@ class ClearableLabeledInput extends React.Component<ClearableInputProps> {
     // 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={mergedGroupClassName} style={style} hidden={hidden}>
         <span className={mergedWrapperClassName}>
           {addonBeforeNode}
           {cloneElement(labeledElement, { style: null })}
@@ -189,7 +189,7 @@ class ClearableLabeledInput extends React.Component<ClearableInputProps> {
   }
 
   renderTextAreaWithClearIcon(prefixCls: string, element: React.ReactElement) {
-    const { value, allowClear, className, style, direction, bordered } = this.props;
+    const { value, allowClear, className, style, direction, bordered, hidden } = this.props;
     if (!allowClear) {
       return cloneElement(element, {
         value,
@@ -206,7 +206,7 @@ class ClearableLabeledInput extends React.Component<ClearableInputProps> {
       },
     );
     return (
-      <span className={affixWrapperCls} style={style}>
+      <span className={affixWrapperCls} style={style} hidden={hidden}>
         {cloneElement(element, {
           style: null,
           value,

components/input/TextArea.tsx

@@ -58,6 +58,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
     const [value, setValue] = useMergedState(props.defaultValue, {
       value: props.value,
     });
+    const { hidden } = props;
 
     const handleSetValue = (val: string, callback?: () => void) => {
       if (props.value === undefined) {
@@ -174,6 +175,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
 
       return (
         <div
+          hidden={hidden}
           className={classNames(
             `${prefixCls}-textarea`,
             {

components/input/__tests__/index.test.js

@@ -111,6 +111,64 @@ describe('prefix and suffix', () => {
   });
 });
 
+describe('Input setting hidden', () => {
+  it('should support hidden when has prefix or suffix or showCount or allowClear or addonBefore or addonAfter', () => {
+    const wrapper = mount(
+      <>
+        <Input
+          hidden
+          className="input"
+          showCount
+          allowClear
+          prefix="11"
+          suffix="22"
+          addonBefore="http://"
+          addonAfter=".com"
+          defaultValue="mysite1"
+        />
+        <Input.Search
+          hidden
+          className="input-search"
+          showCount
+          allowClear
+          prefix="11"
+          suffix="22"
+          addonBefore="http://"
+          addonAfter=".com"
+          defaultValue="mysite1"
+        />
+        <Input.TextArea
+          hidden
+          className="input-textarea"
+          showCount
+          allowClear
+          prefix="11"
+          suffix="22"
+          addonBefore="http://"
+          addonAfter=".com"
+          defaultValue="mysite1"
+        />
+        <Input.Password
+          hidden
+          className="input-password"
+          showCount
+          allowClear
+          prefix="11"
+          suffix="22"
+          addonBefore="http://"
+          addonAfter=".com"
+          defaultValue="mysite1"
+        />
+      </>,
+    );
+
+    expect(wrapper.find('.input').at(0).getDOMNode().hidden).toBe(true);
+    expect(wrapper.find('.input-search').at(0).getDOMNode().hidden).toBe(true);
+    expect(wrapper.find('.input-textarea').at(0).getDOMNode().hidden).toBe(true);
+    expect(wrapper.find('.input-password').at(0).getDOMNode().hidden).toBe(true);
+  });
+});
+
 describe('As Form Control', () => {
   it('should be reset when wrapped in form.getFieldDecorator without initialValue', () => {
     const Demo = () => {