From 1f3277e24c984c9494124bfc024c8ef5ec2c6a64 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Sun, 1 Dec 2024 15:47:49 +0800
Subject: [PATCH] type: update Segmented options type of site (#51847)

---
 .../theme/builtins/IconSearch/IconSearch.tsx  | 47 ++++++++++---------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/.dumi/theme/builtins/IconSearch/IconSearch.tsx b/.dumi/theme/builtins/IconSearch/IconSearch.tsx
index 1490fa0b38..288f6d2307 100644
--- a/.dumi/theme/builtins/IconSearch/IconSearch.tsx
+++ b/.dumi/theme/builtins/IconSearch/IconSearch.tsx
@@ -1,9 +1,9 @@
 import type { CSSProperties } from 'react';
 import React, { useCallback, useMemo, useState } from 'react';
 import Icon, * as AntdIcons from '@ant-design/icons';
-import type { SegmentedProps } from 'antd';
 import { Affix, Empty, Input, Segmented } from 'antd';
 import { createStyles, useTheme } from 'antd-style';
+import type { SegmentedOptions } from 'antd/es/segmented';
 import { useIntl } from 'dumi';
 import debounce from 'lodash/debounce';
 
@@ -28,26 +28,6 @@ const useStyle = createStyles(({ token, css }) => ({
   `,
 }));
 
-const options = (
-  formatMessage: (values: Record<string, string>) => React.ReactNode,
-): SegmentedProps['options'] => [
-  {
-    value: ThemeType.Outlined,
-    icon: <Icon component={OutlinedIcon} />,
-    label: formatMessage({ id: 'app.docs.components.icon.outlined' }),
-  },
-  {
-    value: ThemeType.Filled,
-    icon: <Icon component={FilledIcon} />,
-    label: formatMessage({ id: 'app.docs.components.icon.filled' }),
-  },
-  {
-    value: ThemeType.TwoTone,
-    icon: <Icon component={TwoToneIcon} />,
-    label: formatMessage({ id: 'app.docs.components.icon.two-tone' }),
-  },
-];
-
 interface IconSearchState {
   theme: ThemeType;
   searchKey: string;
@@ -124,14 +104,35 @@ const IconSearch: React.FC = () => {
     backgroundColor: colorBgContainer,
   };
 
+  const memoizedOptions = React.useMemo<SegmentedOptions<ThemeType>>(
+    () => [
+      {
+        value: ThemeType.Outlined,
+        icon: <Icon component={OutlinedIcon} />,
+        label: intl.formatMessage({ id: 'app.docs.components.icon.outlined' }),
+      },
+      {
+        value: ThemeType.Filled,
+        icon: <Icon component={FilledIcon} />,
+        label: intl.formatMessage({ id: 'app.docs.components.icon.filled' }),
+      },
+      {
+        value: ThemeType.TwoTone,
+        icon: <Icon component={TwoToneIcon} />,
+        label: intl.formatMessage({ id: 'app.docs.components.icon.two-tone' }),
+      },
+    ],
+    [intl],
+  );
+
   return (
     <div className="markdown">
       <Affix offsetTop={anchorTop} onChange={setSearchBarAffixed}>
         <div className={styles.iconSearchAffix} style={searchBarAffixed ? affixedStyle : {}}>
-          <Segmented
+          <Segmented<ThemeType>
             size="large"
             value={displayState.theme}
-            options={options(intl.formatMessage)}
+            options={memoizedOptions}
             onChange={handleChangeTheme}
           />
           <Input.Search