refactor(util): use shared type guards for runtime checks (ant-design#57835)

* refactor(util): use shared type guards for runtime checks

* update

* update

* update

Author: li-jia-nan

components/_util/getRenderPropValue.ts

@@ -1,5 +1,7 @@
 import type * as React from 'react';
 
+import { isFunction } from './is';
+
 export type RenderFunction = () => React.ReactNode;
 
 export const getRenderPropValue = (
@@ -8,6 +10,5 @@ export const getRenderPropValue = (
   if (!propValue) {
     return null;
   }
-
-  return typeof propValue === 'function' ? propValue() : propValue;
+  return isFunction(propValue) ? propValue() : propValue;
 };

components/_util/hooks/useMergeSemantic.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { clsx } from 'clsx';
 
-import { isPlainObject } from '../is';
+import { isFunction, isPlainObject } from '../is';
 import type { AnyObject, EmptyObject, ValidChar } from '../type';
 
 export type SemanticSchema = { _default?: string } & {
@@ -103,7 +103,7 @@ export const resolveStyleOrClass = <T extends AnyObject>(
   value: T | ((config: any) => T),
   info: { props: AnyObject },
 ) => {
-  return typeof value === 'function' ? value(info) : value;
+  return isFunction(value) ? value(info) : value;
 };
 
 type MaybeFn<T, P> = T | ((info: { props: P }) => T) | undefined;

components/_util/responsiveObserver.ts

@@ -2,6 +2,7 @@ import React from 'react';
 
 import type { GlobalToken } from '../theme/internal';
 import { useToken } from '../theme/internal';
+import { isFunction } from './is';
 
 export const responsiveArray = ['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs'] as const;
 export const responsiveArrayReversed = [...responsiveArray].reverse();
@@ -131,7 +132,7 @@ const useResponsiveObserver = () => {
             this.dispatch({ ...screens, [screen]: matches });
           };
           const mql = window.matchMedia(mediaQuery);
-          if (typeof mql?.addEventListener === 'function') {
+          if (isFunction(mql.addEventListener)) {
             mql.addEventListener('change', listener);
           }
           this.matchHandlers[mediaQuery] = { mql, listener };
@@ -141,7 +142,7 @@ const useResponsiveObserver = () => {
       unregister() {
         Object.values(responsiveMap).forEach((mediaQuery) => {
           const handler = this.matchHandlers[mediaQuery];
-          if (typeof handler?.mql?.removeEventListener === 'function') {
+          if (isFunction(handler?.mql.removeEventListener)) {
             handler.mql.removeEventListener('change', handler?.listener);
           }
         });

components/_util/scrollTo.ts

@@ -2,6 +2,7 @@ import raf from '@rc-component/util/lib/raf';
 
 import { easeInOutCubic } from './easings';
 import getScroll, { isWindow } from './getScroll';
+import { isFunction } from './is';
 
 interface ScrollToOptions {
   /** Scroll container, default as window */
@@ -33,7 +34,7 @@ export default function scrollTo(y: number, options: ScrollToOptions = {}) {
     }
     if (time < duration) {
       rafId = raf(frameFunc);
-    } else if (typeof callback === 'function') {
+    } else if (isFunction(callback)) {
       callback();
     }
   };

components/anchor/Anchor.tsx

@@ -6,7 +6,7 @@ import scrollIntoView from 'scroll-into-view-if-needed';
 import getScroll from '../_util/getScroll';
 import type { SemanticClassNamesType, SemanticStylesType } from '../_util/hooks';
 import { useMergeSemantic } from '../_util/hooks';
-import { isPlainObject } from '../_util/is';
+import { isFunction, isNumber, isPlainObject } from '../_util/is';
 import scrollTo from '../_util/scrollTo';
 import { devUseWarning } from '../_util/warning';
 import Affix from '../affix';
@@ -257,7 +257,7 @@ const Anchor: React.FC<AnchorProps> = (props) => {
     }
 
     // https://github.com/ant-design/ant-design/issues/30584
-    const newLink = typeof getCurrentAnchor === 'function' ? getCurrentAnchor(link) : link;
+    const newLink = isFunction(getCurrentAnchor) ? getCurrentAnchor(link) : link;
     setActiveLink(newLink);
     activeLinkRef.current = newLink;
 
@@ -273,7 +273,7 @@ const Anchor: React.FC<AnchorProps> = (props) => {
 
     const currentActiveLink = getInternalCurrentAnchor(
       links,
-      targetOffset !== undefined ? targetOffset : offsetTop || 0,
+      isNumber(targetOffset) ? targetOffset : offsetTop || 0,
       bounds,
     );
 
@@ -304,7 +304,7 @@ const Anchor: React.FC<AnchorProps> = (props) => {
       const scrollTop = getScroll(container);
       const eleOffsetTop = getOffsetTop(targetElement, container);
       let y = scrollTop + eleOffsetTop;
-      y -= targetOffset !== undefined ? targetOffset : offsetTop || 0;
+      y -= isNumber(targetOffset) ? targetOffset : offsetTop || 0;
       animatingRef.current = true;
       scrollRequestIdRef.current = scrollTo(y, {
         getContainer: getCurrentContainer,
@@ -388,7 +388,7 @@ const Anchor: React.FC<AnchorProps> = (props) => {
   }, [dependencyListItem]);
 
   React.useEffect(() => {
-    if (typeof getCurrentAnchor === 'function') {
+    if (isFunction(getCurrentAnchor)) {
       setCurrentActiveLink(getCurrentAnchor(activeLinkRef.current || ''));
     }
   }, [getCurrentAnchor]);

components/calendar/generateCalendar.tsx

@@ -8,6 +8,7 @@ import { clsx } from 'clsx';
 
 import { useMergeSemantic } from '../_util/hooks';
 import type { SemanticClassNamesType, SemanticStylesType } from '../_util/hooks';
+import { isFunction } from '../_util/is';
 import type { AnyObject } from '../_util/type';
 import { devUseWarning } from '../_util/warning';
 import { useComponentConfig } from '../config-provider/context';
@@ -261,7 +262,6 @@ const generateCalendar = <DateType extends AnyObject>(generateConfig: GenerateCo
         if (dateFullCellRender) {
           return dateFullCellRender(date);
         }
-
         return (
           <div
             className={clsx(`${prefixCls}-cell-inner`, `${calendarPrefixCls}-date`, {
@@ -272,7 +272,7 @@ const generateCalendar = <DateType extends AnyObject>(generateConfig: GenerateCo
               {String(generateConfig.getDate(date)).padStart(2, '0')}
             </div>
             <div className={`${calendarPrefixCls}-date-content`}>
-              {typeof cellRender === 'function' ? cellRender(date, info) : dateCellRender?.(date)}
+              {isFunction(cellRender) ? cellRender(date, info) : dateCellRender?.(date)}
             </div>
           </div>
         );
@@ -310,7 +310,7 @@ const generateCalendar = <DateType extends AnyObject>(generateConfig: GenerateCo
               {months[generateConfig.getMonth(date)]}
             </div>
             <div className={`${calendarPrefixCls}-date-content`}>
-              {typeof cellRender === 'function' ? cellRender(date, info) : monthCellRender?.(date)}
+              {isFunction(cellRender) ? cellRender(date, info) : monthCellRender?.(date)}
             </div>
           </div>
         );

components/collapse/Collapse.tsx

@@ -8,6 +8,7 @@ import { clsx } from 'clsx';
 
 import { useMergeSemantic } from '../_util/hooks';
 import type { SemanticClassNamesType, SemanticStylesType } from '../_util/hooks';
+import { isFunction } from '../_util/is';
 import initCollapseMotion from '../_util/motion';
 import { cloneElement } from '../_util/reactNode';
 import { devUseWarning } from '../_util/warning';
@@ -155,15 +156,14 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
 
   const renderExpandIcon = React.useCallback(
     (panelProps: PanelProps = {}) => {
-      const icon =
-        typeof mergedExpandIcon === 'function' ? (
-          mergedExpandIcon(panelProps)
-        ) : (
-          <RightOutlined
-            rotate={panelProps.isActive ? (direction === 'rtl' ? -90 : 90) : undefined}
-            aria-label={panelProps.isActive ? 'expanded' : 'collapsed'}
-          />
-        );
+      const icon = isFunction(mergedExpandIcon) ? (
+        mergedExpandIcon(panelProps)
+      ) : (
+        <RightOutlined
+          rotate={panelProps.isActive ? (direction === 'rtl' ? -90 : 90) : undefined}
+          aria-label={panelProps.isActive ? 'expanded' : 'collapsed'}
+        />
+      );
       return cloneElement(icon, (oriProps) => ({
         className: clsx(oriProps.className, `${prefixCls}-arrow`),
       }));

components/color-picker/ColorPickerPanel.tsx

@@ -1,6 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
+import { isFunction } from '../_util/is';
 import Divider from '../divider';
 import PanelPicker from './components/PanelPicker';
 import PanelPresets from './components/PanelPresets';
@@ -9,8 +10,7 @@ import type { PanelPickerContextProps, PanelPresetsContextProps } from './contex
 import type { ColorPickerProps } from './interface';
 
 export interface ColorPickerPanelProps
-  extends PanelPickerContextProps,
-    Omit<PanelPresetsContextProps, 'onChange'> {
+  extends PanelPickerContextProps, Omit<PanelPresetsContextProps, 'onChange'> {
   onClear?: () => void;
   panelRender?: ColorPickerProps['panelRender'];
 }
@@ -104,12 +104,9 @@ const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
     <PanelPickerContext.Provider value={panelContext}>
       <PanelPresetsContext.Provider value={presetContext}>
         <div className={colorPickerPanelPrefixCls}>
-          {typeof panelRender === 'function'
+          {isFunction(panelRender)
             ? panelRender(innerPanel, {
-                components: {
-                  Picker: PanelPicker,
-                  Presets: PanelPresets,
-                },
+                components: { Picker: PanelPicker, Presets: PanelPresets },
               })
             : innerPanel}
         </div>

components/color-picker/components/ColorTrigger.tsx

@@ -5,6 +5,7 @@ import { ColorBlock } from '@rc-component/color-picker';
 import pickAttrs from '@rc-component/util/lib/pickAttrs';
 import { clsx } from 'clsx';
 
+import { isFunction } from '../../_util/is';
 import { useLocale } from '../../locale';
 import type { AggregationColor } from '../color';
 import type {
@@ -61,7 +62,7 @@ const ColorTrigger = forwardRef<HTMLDivElement, ColorTriggerProps>((props, ref)
       return '';
     }
 
-    if (typeof showText === 'function') {
+    if (isFunction(showText)) {
       return showText(color);
     }
 

components/config-provider/hooks/useSize.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { isFunction, isString } from '../../_util/is';
 import type { SizeType } from '../SizeContext';
 import SizeContext from '../SizeContext';
 
@@ -11,10 +12,10 @@ const useSize = <T extends string | undefined | number | object>(
     if (!customSize) {
       return size as T;
     }
-    if (typeof customSize === 'string') {
+    if (isString(customSize)) {
       return customSize ?? size;
     }
-    if (typeof customSize === 'function') {
+    if (isFunction(customSize)) {
       return customSize(size);
     }
     return size as T;