refactor: use renderable guards (#203)

Author: QDyanbing

package.json

@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@rc-component/resize-observer": "^1.1.1",
-    "@rc-component/util": "^1.11.1",
+    "@rc-component/util": "^1.13.0",
     "clsx": "^2.1.1"
   },
   "devDependencies": {

src/BaseInput.tsx

@@ -1,4 +1,5 @@
 import { clsx } from 'clsx';
+import { isReactRenderable } from '@rc-component/util';
 import type { ReactElement, ReactNode } from 'react';
 import React, { cloneElement, useRef } from 'react';
 import type { BaseInputProps } from './interface';
@@ -81,7 +82,8 @@ const BaseInput = React.forwardRef<HolderRef, BaseInputProps>((props, ref) => {
         !(typeof allowClear === 'object' && allowClear.disabled);
       const clearIconCls = `${prefixCls}-clear-icon`;
       const iconNode =
-        typeof allowClear === 'object' && allowClear?.clearIcon
+        typeof allowClear === 'object' &&
+        isReactRenderable(allowClear?.clearIcon)
           ? allowClear.clearIcon
           : '✖';
 
@@ -99,7 +101,7 @@ const BaseInput = React.forwardRef<HolderRef, BaseInputProps>((props, ref) => {
             clearIconCls,
             {
               [`${clearIconCls}-hidden`]: !needClear,
-              [`${clearIconCls}-has-suffix`]: !!suffix,
+              [`${clearIconCls}-has-suffix`]: isReactRenderable(suffix),
             },
             classNames?.clear,
           )}
@@ -119,14 +121,14 @@ const BaseInput = React.forwardRef<HolderRef, BaseInputProps>((props, ref) => {
         [`${affixWrapperPrefixCls}-focused`]: focused, // Not used, but keep it
         [`${affixWrapperPrefixCls}-readonly`]: readOnly,
         [`${affixWrapperPrefixCls}-input-with-clear-btn`]:
-          suffix && allowClear && value,
+          isReactRenderable(suffix) && allowClear && value,
       },
       classes?.affixWrapper,
       classNames?.affixWrapper,
       classNames?.variant,
     );
 
-    const suffixNode = (suffix || allowClear) && (
+    const suffixNode = (isReactRenderable(suffix) || allowClear) && (
       <span
         className={clsx(`${prefixCls}-suffix`, classNames?.suffix)}
         style={styles?.suffix}
@@ -144,7 +146,7 @@ const BaseInput = React.forwardRef<HolderRef, BaseInputProps>((props, ref) => {
         {...dataAttrs?.affixWrapper}
         ref={containerRef}
       >
-        {prefix && (
+        {isReactRenderable(prefix) && (
           <span
             className={clsx(`${prefixCls}-prefix`, classNames?.prefix)}
             style={styles?.prefix}
@@ -185,13 +187,13 @@ const BaseInput = React.forwardRef<HolderRef, BaseInputProps>((props, ref) => {
     element = (
       <GroupWrapperComponent className={mergedGroupClassName} ref={groupRef}>
         <WrapperComponent className={mergedWrapperClassName}>
-          {addonBefore && (
+          {isReactRenderable(addonBefore) && (
             <GroupAddonComponent className={addonCls}>
               {addonBefore}
             </GroupAddonComponent>
           )}
           {element}
-          {addonAfter && (
+          {isReactRenderable(addonAfter) && (
             <GroupAddonComponent className={addonCls}>
               {addonAfter}
             </GroupAddonComponent>

src/utils/commonUtils.ts

@@ -1,12 +1,19 @@
 import type React from 'react';
+import { isReactRenderable } from '@rc-component/util';
 import type { BaseInputProps, InputProps } from '../interface';
 
 export function hasAddon(props: BaseInputProps | InputProps) {
-  return !!(props.addonBefore || props.addonAfter);
+  return (
+    isReactRenderable(props.addonBefore) || isReactRenderable(props.addonAfter)
+  );
 }
 
 export function hasPrefixSuffix(props: BaseInputProps | InputProps) {
-  return !!(props.prefix || props.suffix || props.allowClear);
+  return (
+    isReactRenderable(props.prefix) ||
+    isReactRenderable(props.suffix) ||
+    Boolean(props.allowClear)
+  );
 }
 
 // TODO: It's better to use `Proxy` replace the `element.value`. But we still need support IE11.