diff --git a/.dumi/pages/index/components/BannerRecommends.tsx b/.dumi/pages/index/components/BannerRecommends.tsx index 8c6dfc16c2..2859c9b43b 100644 --- a/.dumi/pages/index/components/BannerRecommends.tsx +++ b/.dumi/pages/index/components/BannerRecommends.tsx @@ -113,7 +113,7 @@ export const BannerRecommendsFallback: React.FC = () => { const { isMobile } = useContext(SiteContext); const { styles } = useStyle(); - const list = new Array(3).fill(1); + const list = Array.from({ length: 3 }); return isMobile ? ( @@ -141,7 +141,8 @@ const BannerRecommends: React.FC = () => { const data = useSiteData(); const extras = data?.extras?.[lang]; const icons = data?.icons || []; - const first3 = !extras || extras.length === 0 ? new Array(3).fill(null) : extras.slice(0, 3); + const first3 = + !extras || extras.length === 0 ? Array.from({ length: 3 }) : extras.slice(0, 3); if (!data) { return ; diff --git a/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx b/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx index e28b46c549..c49be9c599 100644 --- a/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx +++ b/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx @@ -119,7 +119,7 @@ const ComponentsBlock: React.FC = () => {
({ + items: Array.from({ length: 5 }).map((_, index) => ({ key: `opt${index}`, label: `${locale.option} ${index}`, })), diff --git a/.dumi/pages/index/components/PreviewBanner/index.tsx b/.dumi/pages/index/components/PreviewBanner/index.tsx index 38ec15b560..82ea8f2ce5 100644 --- a/.dumi/pages/index/components/PreviewBanner/index.tsx +++ b/.dumi/pages/index/components/PreviewBanner/index.tsx @@ -69,11 +69,7 @@ const useStyle = () => { position: relative; z-index: 1; padding-inline: ${token.paddingXL}px; - text-shadow: ${new Array(5) - .fill(null) - .map(() => textShadow) - .join(', ')}; - + text-shadow: ${Array.from({ length: 5 }, () => textShadow).join(', ')}; h1 { font-family: AliPuHui, ${token.fontFamily} !important; font-weight: 900 !important; diff --git a/.dumi/theme/builtins/IconSearch/index.tsx b/.dumi/theme/builtins/IconSearch/index.tsx index 57850217dc..ef2a4389cd 100644 --- a/.dumi/theme/builtins/IconSearch/index.tsx +++ b/.dumi/theme/builtins/IconSearch/index.tsx @@ -44,7 +44,7 @@ const IconSearchFallback: React.FC = () => {
- {new Array(24).fill(1).map((_, index) => ( + {Array.from({ length: 24 }).map((_, index) => (
{' '} diff --git a/components/auto-complete/demo/uncertain-category.tsx b/components/auto-complete/demo/uncertain-category.tsx index f00e46cf97..481ac528ff 100644 --- a/components/auto-complete/demo/uncertain-category.tsx +++ b/components/auto-complete/demo/uncertain-category.tsx @@ -5,7 +5,7 @@ import type { AutoCompleteProps } from 'antd'; const getRandomInt = (max: number, min = 0) => Math.floor(Math.random() * (max - min + 1)) + min; const searchResult = (query: string) => - new Array(getRandomInt(5)) + Array.from({ length: getRandomInt(5) }) .join('.') .split('.') .map((_, idx) => { diff --git a/components/cascader/demo/multiple.tsx b/components/cascader/demo/multiple.tsx index 11fcb8179f..3dde161e50 100644 --- a/components/cascader/demo/multiple.tsx +++ b/components/cascader/demo/multiple.tsx @@ -13,9 +13,10 @@ const options: Option[] = [ { label: 'Light', value: 'light', - children: new Array(20) - .fill(null) - .map((_, index) => ({ label: `Number ${index}`, value: index })), + children: Array.from({ length: 20 }).map((_, index) => ({ + label: `Number ${index}`, + value: index, + })), }, { label: 'Bamboo', diff --git a/components/cascader/demo/showCheckedStrategy.tsx b/components/cascader/demo/showCheckedStrategy.tsx index 020a93f254..77c2a6dfc7 100644 --- a/components/cascader/demo/showCheckedStrategy.tsx +++ b/components/cascader/demo/showCheckedStrategy.tsx @@ -13,9 +13,10 @@ const options: Option[] = [ { label: 'Light', value: 'light', - children: new Array(20) - .fill(null) - .map((_, index) => ({ label: `Number ${index}`, value: index })), + children: Array.from({ length: 20 }).map((_, index) => ({ + label: `Number ${index}`, + value: index, + })), }, { label: 'Bamboo', diff --git a/components/config-provider/__tests__/popup.test.tsx b/components/config-provider/__tests__/popup.test.tsx index b6a78af067..13564e701d 100644 --- a/components/config-provider/__tests__/popup.test.tsx +++ b/components/config-provider/__tests__/popup.test.tsx @@ -32,18 +32,9 @@ describe('ConfigProvider.Popup', () => { const selectLikeNodes = ( <> - ({ value: i, label: i }))} /> + ({ value: i, title: i }))} /> + ({ value: i, label: i }))} /> ); diff --git a/components/date-picker/demo/multiple-debug.tsx b/components/date-picker/demo/multiple-debug.tsx index 0597e23bf9..b45777bfed 100644 --- a/components/date-picker/demo/multiple-debug.tsx +++ b/components/date-picker/demo/multiple-debug.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { DatePicker, Flex } from 'antd'; import dayjs from 'dayjs'; -const defaultValue = new Array(10).fill(0).map((_, index) => dayjs('2000-01-01').add(index, 'day')); +const defaultValue = Array.from({ length: 10 }).map((_, i) => dayjs('2000-01-01').add(i, 'day')); const App: React.FC = () => ( diff --git a/components/date-picker/design/demo/date-extra-info.tsx b/components/date-picker/design/demo/date-extra-info.tsx index ea2e2019e2..8532fa80c9 100644 --- a/components/date-picker/design/demo/date-extra-info.tsx +++ b/components/date-picker/design/demo/date-extra-info.tsx @@ -58,7 +58,7 @@ const useStyle = createStyles(({ token }) => ({ `, })); -const seeds = new Array(30).fill(1).map(() => Math.random()); +const seeds = Array.from({ length: 30 }).map(Math.random); const getSales = (date: Dayjs) => Math.floor(seeds[date.date() % 30] * 10000); diff --git a/components/grid/demo/responsive-flex.tsx b/components/grid/demo/responsive-flex.tsx index b310a5d382..47d68aac2d 100644 --- a/components/grid/demo/responsive-flex.tsx +++ b/components/grid/demo/responsive-flex.tsx @@ -3,7 +3,7 @@ import { Col, Row } from 'antd'; const App: React.FC = () => ( - {new Array(10).fill(0).map((_, index) => { + {Array.from({ length: 10 }).map((_, index) => { const key = `col-${index}`; return ( { { + items={Array.from({ length: 15 }).map((_, index) => { const key = index + 1; return { key, @@ -64,7 +64,7 @@ describe('Layout.Token', () => { { + items={Array.from({ length: 15 }).map((_, index) => { const key = index + 1; return { key, diff --git a/components/layout/demo/component-token.tsx b/components/layout/demo/component-token.tsx index e9a47de94f..aeeab643dd 100644 --- a/components/layout/demo/component-token.tsx +++ b/components/layout/demo/component-token.tsx @@ -13,8 +13,7 @@ const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOu key: `sub${key}`, icon: React.createElement(icon), label: `subnav ${key}`, - - children: new Array(4).fill(null).map((_, j) => { + children: Array.from({ length: 4 }).map((_, j) => { const subKey = index * 4 + j + 1; return { key: subKey, diff --git a/components/layout/demo/fixed.tsx b/components/layout/demo/fixed.tsx index 7d80342107..92d957e617 100644 --- a/components/layout/demo/fixed.tsx +++ b/components/layout/demo/fixed.tsx @@ -3,7 +3,7 @@ import { Breadcrumb, Layout, Menu, theme } from 'antd'; const { Header, Content, Footer } = Layout; -const items = new Array(3).fill(null).map((_, index) => ({ +const items = Array.from({ length: 3 }).map((_, index) => ({ key: String(index + 1), label: `nav ${index + 1}`, })); diff --git a/components/layout/demo/top-side-2.tsx b/components/layout/demo/top-side-2.tsx index 43a46e990e..4758a2c480 100644 --- a/components/layout/demo/top-side-2.tsx +++ b/components/layout/demo/top-side-2.tsx @@ -18,8 +18,7 @@ const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOu key: `sub${key}`, icon: React.createElement(icon), label: `subnav ${key}`, - - children: new Array(4).fill(null).map((_, j) => { + children: Array.from({ length: 4 }).map((_, j) => { const subKey = index * 4 + j + 1; return { key: subKey, diff --git a/components/layout/demo/top-side.tsx b/components/layout/demo/top-side.tsx index 2a3ddeebfb..2baf685363 100644 --- a/components/layout/demo/top-side.tsx +++ b/components/layout/demo/top-side.tsx @@ -18,8 +18,7 @@ const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOu key: `sub${key}`, icon: React.createElement(icon), label: `subnav ${key}`, - - children: new Array(4).fill(null).map((_, j) => { + children: Array.from({ length: 4 }).map((_, j) => { const subKey = index * 4 + j + 1; return { key: subKey, diff --git a/components/layout/demo/top.tsx b/components/layout/demo/top.tsx index 7ffffc6291..4d1841836c 100644 --- a/components/layout/demo/top.tsx +++ b/components/layout/demo/top.tsx @@ -3,7 +3,7 @@ import { Breadcrumb, Layout, Menu, theme } from 'antd'; const { Header, Content, Footer } = Layout; -const items = new Array(15).fill(null).map((_, index) => ({ +const items = Array.from({ length: 15 }).map((_, index) => ({ key: index + 1, label: `nav ${index + 1}`, })); diff --git a/components/list/demo/loadmore.tsx b/components/list/demo/loadmore.tsx index c10d838c24..b47a66838a 100644 --- a/components/list/demo/loadmore.tsx +++ b/components/list/demo/loadmore.tsx @@ -40,7 +40,9 @@ const App: React.FC = () => { const onLoadMore = () => { setLoading(true); setList( - data.concat([...new Array(count)].map(() => ({ loading: true, name: {}, picture: {} }))), + data.concat( + Array.from({ length: count }).map(() => ({ loading: true, name: {}, picture: {} })), + ), ); fetch(fakeDataUrl) .then((res) => res.json()) diff --git a/components/notification/demo/stack.tsx b/components/notification/demo/stack.tsx index 67a9b550e3..9ea7f6d50c 100644 --- a/components/notification/demo/stack.tsx +++ b/components/notification/demo/stack.tsx @@ -17,9 +17,10 @@ const App: React.FC = () => { const openNotification = () => { api.open({ message: 'Notification Title', - description: `${new Array(Math.round(Math.random() * 5) + 1) - .fill('This is the content of the notification.') - .join('\n')}`, + description: `${Array.from( + { length: Math.round(Math.random() * 5) + 1 }, + () => 'This is the content of the notification.', + ).join('\n')}`, duration: null, }); }; diff --git a/components/progress/Steps.tsx b/components/progress/Steps.tsx index ff307968bd..581980ea6e 100644 --- a/components/progress/Steps.tsx +++ b/components/progress/Steps.tsx @@ -28,7 +28,7 @@ const Steps: React.FC = (props) => { const mergedSize = size ?? [stepWidth, strokeWidth]; const [width, height] = getSize(mergedSize, 'step', { steps, strokeWidth }); const unitWidth = width / steps; - const styledSteps: React.ReactNode[] = new Array(steps); + const styledSteps = Array.from({ length: steps }); for (let i = 0; i < steps; i++) { const color = Array.isArray(strokeColor) ? strokeColor[i] : strokeColor; styledSteps[i] = ( diff --git a/components/select/demo/debug-flip-shift.tsx b/components/select/demo/debug-flip-shift.tsx index 376df5550a..38459a6c88 100644 --- a/components/select/demo/debug-flip-shift.tsx +++ b/components/select/demo/debug-flip-shift.tsx @@ -5,7 +5,7 @@ const App: React.FC = () => (