mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-23 18:50:06 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

chore: remo format and remove prettierrc arrowParens (#38722)

Browse Source
This commit is contained in:
Tom Xu 2022-11-19 13:47:33 +08:00 committed by GitHub
parent 52cb37f487
commit 77ea4038d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
464 changed files with 1113 additions and 1086 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.dumi/hooks/useMenu.tsx
View File

@ -58,7 +58,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
}, {});
const childItems = [];
childItems.push(
...childrenGroup.default.map(item => ({
...childrenGroup.default.map((item) => ({
label: (
<Link to={item.link}>
{before}
@ -75,7 +75,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
type: 'group',
label: type,
key: type,
children: children?.map(item => ({
children: children?.map((item) => ({
label: (
<Link to={item.link}>
{before}
@ -98,7 +98,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
type: 'group',
label: group.title,
key: group.title,
children: group.children?.map(item => ({
children: group.children?.map((item) => ({
label: (
<Link to={item.link}>
{before}
@ -115,7 +115,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
}
} else {
result.push(
...group.children?.map(item => ({
...group.children?.map((item) => ({
label: (
<Link to={item.link}>
{before}

9
.dumi/pages/index/components/Theme/ColorPicker.tsx
View File

@ -54,7 +54,7 @@ export default function ColorPicker({ value, onChange }: RadiusPickerProps) {
const valueStr = new TinyColor(value).toRgbString();
let existActive = false;
const colors = PRESET_COLORS.map(color => {
const colors = PRESET_COLORS.map((color) => {
const colorStr = new TinyColor(color).toRgbString();
const active = colorStr === valueStr;
existActive = existActive || active;
@ -80,7 +80,7 @@ export default function ColorPicker({ value, onChange }: RadiusPickerProps) {
<Space size="large">
<Input
value={value}
onChange={event => {
onChange={(event) => {
onChange?.(event.target.value);
}}
style={{ width: 120 }}
@ -109,7 +109,10 @@ export default function ColorPicker({ value, onChange }: RadiusPickerProps) {
key={color}
overlayInnerStyle={{ padding: 0 }}
content={
<DebouncedColorPanel color={value || ''} onChange={color => onChange?.(color)} />
<DebouncedColorPanel
color={value || ''}
onChange={(color) => onChange?.(color)}
/>
}
trigger="click"
showArrow={false}

4
.dumi/pages/index/components/Theme/RadiusPicker.tsx
View File

@ -14,8 +14,8 @@ export default function RadiusPicker({ value, onChange }: RadiusPickerProps) {
onChange={onChange}
style={{ width: 120 }}
min={0}
formatter={val => `${val}px`}
parser={str => (str ? parseFloat(str) : (str as any))}
formatter={(val) => `${val}px`}
parser={(str) => (str ? parseFloat(str) : (str as any))}
/>
<Slider

2
.dumi/pages/index/components/Theme/ThemePicker.tsx
View File

@ -74,7 +74,7 @@ export default function ThemePicker({ value, onChange }: ThemePickerProps) {
return (
<Space size={token.paddingLG}>
{Object.keys(THEMES).map(theme => {
{Object.keys(THEMES).map((theme) => {
const url = THEMES[theme as THEME];
return (

2
.dumi/pages/index/components/Theme/colorUtil.ts
View File

@ -73,7 +73,7 @@ export function getAvatarURL(color?: string | null) {
}
return (
COLOR_IMAGES.find(obj => obj.color === closestColor)?.url ||
COLOR_IMAGES.find((obj) => obj.color === closestColor)?.url ||
'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*CLp0Qqc11AkAAAAAAAAAAAAAARQnAQ'
);
}

6
.dumi/pages/index/components/util.tsx
View File

@ -72,7 +72,7 @@ export function preLoad(list: string[]) {
const div = document.createElement('div');
div.style.display = 'none';
document.body.appendChild(div);
list.forEach(src => {
list.forEach((src) => {
const img = new Image();
img.src = src;
div.appendChild(img);
@ -88,8 +88,8 @@ export function useSiteData(): [Partial<SiteData>, boolean] {
if (Object.keys(data ?? {}).length === 0 && typeof fetch !== 'undefined') {
setLoading(true);
fetch(`https://render.alipay.com/p/h5data/antd4-config_website-h5data.json`)
.then(res => res.json())
.then(result => {
.then((res) => res.json())
.then((result) => {
setData(result);
setLoading(false);
});

2
.dumi/pages/theme-editor/index.tsx
View File

@ -24,7 +24,7 @@ const CustomTheme = () => {
theme={{ name: 'test', key: 'test', config: theme }}
simple
style={{ height: 'calc(100vh - 64px)' }}
onThemeChange={newTheme => {
onThemeChange={(newTheme) => {
setTheme(newTheme.config);
}}
/>

20
.dumi/theme/builtins/ComponentOverview/index.tsx
View File

@ -68,7 +68,7 @@ const onClickCard = (pathname: string) => {
}
};
const reportSearch = debounce<(value: string) => void>(value => {
const reportSearch = debounce<(value: string) => void>((value) => {
if (window.gtag) {
window.gtag('event', '搜索', {
event_category: '组件总览卡片',
@ -91,7 +91,7 @@ const Overview: React.FC = () => {
const sectionRef = React.useRef<HTMLElement>(null);
const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = event => {
const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
if (event.keyCode === 13 && search.trim().length) {
sectionRef.current?.querySelector<HTMLElement>('.components-overview-card')?.click();
}
@ -99,11 +99,11 @@ const Overview: React.FC = () => {
const groups = useMemo<{ title: string; children: Component[] }[]>(() => {
return data
.filter(item => item.title)
.map<{ title: string; children: Component[] }>(item => {
.filter((item) => item.title)
.map<{ title: string; children: Component[] }>((item) => {
return {
title: item.title!,
children: item.children.map(child => ({
children: item.children.map((child) => ({
title: child.frontmatter.title,
subtitle: child.frontmatter.subtitle,
cover: child.frontmatter.cover,
@ -126,7 +126,7 @@ const Overview: React.FC = () => {
value={search}
placeholder={formatMessage({ id: 'app.components.overview.search' })}
css={style.componentsOverviewSearch}
onChange={e => {
onChange={(e) => {
setSearch(e.target.value);
reportSearch(e.target.value);
}}
@ -136,10 +136,10 @@ const Overview: React.FC = () => {
/>
<Divider />
{groups
.filter(i => i.title)
.map(group => {
.filter((i) => i.title)
.map((group) => {
const components = group?.children?.filter(
component =>
(component) =>
!search.trim() ||
component.title.toLowerCase().includes(search.trim().toLowerCase()) ||
(component?.subtitle || '').toLowerCase().includes(search.trim().toLowerCase()),
@ -153,7 +153,7 @@ const Overview: React.FC = () => {
</Space>
</Title>
<Row gutter={[24, 24]}>
{components.map(component => {
{components.map((component) => {
const url = `${component.link}/`;
/** Link 不能跳转到外链 */

4
.dumi/theme/builtins/IconSearch/Category.tsx
View File

@ -12,7 +12,7 @@ interface CategoryProps {
newIcons: string[];
}
const Category: React.FC<CategoryProps> = props => {
const Category: React.FC<CategoryProps> = (props) => {
const { icons, title, newIcons, theme } = props;
const intl = useIntl();
const [justCopied, setJustCopied] = React.useState<string | null>(null);
@ -40,7 +40,7 @@ const Category: React.FC<CategoryProps> = props => {
<div>
<h3>{intl.formatMessage({ id: `app.docs.components.icon.category.${title}` })}</h3>
<ul className="anticons-list">
{icons.map(name => (
{icons.map((name) => (
<CopyableIcon
key={name}
name={name}

24
.dumi/theme/builtins/IconSearch/IconPicSearcher.tsx
View File

@ -52,15 +52,15 @@ const PicSearcher: React.FC = () => {
event_label: icons[0].className,
});
}
icons = icons.map(i => ({ score: i.score, type: i.className.replace(/\s/g, '-') }));
setState(prev => ({ ...prev, loading: false, error: false, icons }));
icons = icons.map((i) => ({ score: i.score, type: i.className.replace(/\s/g, '-') }));
setState((prev) => ({ ...prev, loading: false, error: false, icons }));
} catch {
setState(prev => ({ ...prev, loading: false, error: true }));
setState((prev) => ({ ...prev, loading: false, error: true }));
}
};
// eslint-disable-next-line class-methods-use-this
const toImage = (url: string): Promise<HTMLImageElement> =>
new Promise(resolve => {
new Promise((resolve) => {
const img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url;
@ -70,11 +70,11 @@ const PicSearcher: React.FC = () => {
});
const uploadFile = useCallback((file: File) => {
setState(prev => ({ ...prev, loading: true }));
setState((prev) => ({ ...prev, loading: true }));
const reader = new FileReader();
reader.onload = () => {
toImage(reader.result as string).then(predict);
setState(prev => ({
setState((prev) => ({
...prev,
fileList: [{ uid: 1, name: file.name, status: 'done', url: reader.result }],
}));
@ -98,7 +98,7 @@ const PicSearcher: React.FC = () => {
}
}, []);
const toggleModal = useCallback(() => {
setState(prev => ({
setState((prev) => ({
...prev,
modalOpen: !prev.modalOpen,
popoverVisible: false,
@ -121,12 +121,12 @@ const PicSearcher: React.FC = () => {
const script = document.createElement('script');
script.onload = async () => {
await window.antdIconClassifier.load();
setState(prev => ({ ...prev, modelLoaded: true }));
setState((prev) => ({ ...prev, modelLoaded: true }));
document.addEventListener('paste', onPaste);
};
script.src = 'https://cdn.jsdelivr.net/gh/lewis617/antd-icon-classifier@0.0/dist/main.js';
document.head.appendChild(script);
setState(prev => ({ ...prev, popoverVisible: !localStorage.getItem('disableIconTip') }));
setState((prev) => ({ ...prev, popoverVisible: !localStorage.getItem('disableIconTip') }));
return () => {
document.removeEventListener('paste', onPaste);
};
@ -158,7 +158,7 @@ const PicSearcher: React.FC = () => {
<Dragger
accept="image/jpeg, image/png"
listType="picture"
customRequest={o => uploadFile(o.file as File)}
customRequest={(o) => uploadFile(o.file as File)}
fileList={state.fileList}
showUploadList={{ showPreviewIcon: false, showRemoveIcon: false }}
>
@ -197,11 +197,11 @@ const PicSearcher: React.FC = () => {
</thead>
)}
<tbody>
{state.icons.map(icon => {
{state.icons.map((icon) => {
const { type } = icon;
const iconName = `${type
.split('-')
.map(str => `${str[0].toUpperCase()}${str.slice(1)}`)
.map((str) => `${str[0].toUpperCase()}${str.slice(1)}`)
.join('')}Outlined`;
return (
<tr key={iconName}>

4
.dumi/theme/builtins/IconSearch/fields.ts
View File

@ -1,7 +1,7 @@
import * as AntdIcons from '@ant-design/icons/lib/icons';
const all = Object.keys(AntdIcons)
.map(n => n.replace(/(Outlined|Filled|TwoTone)$/, ''))
.map((n) => n.replace(/(Outlined|Filled|TwoTone)$/, ''))
.filter((n, i, arr) => arr.indexOf(n) === i);
const direction = [
@ -204,7 +204,7 @@ const logo = [
const datum = [...direction, ...suggestion, ...editor, ...data, ...logo];
const other = all.filter(n => !datum.includes(n));
const other = all.filter((n) => !datum.includes(n));
export const categories = {
direction,

16
.dumi/theme/builtins/IconSearch/index.tsx
View File

@ -34,20 +34,20 @@ const IconSearch: React.FC = () => {
const handleSearchIcon = React.useCallback(
debounce((searchKey: string) => {
setDisplayState(prevState => ({ ...prevState, searchKey }));
setDisplayState((prevState) => ({ ...prevState, searchKey }));
}),
[],
);
const handleChangeTheme = React.useCallback((e: RadioChangeEvent) => {
setDisplayState(prevState => ({ ...prevState, theme: e.target.value as ThemeType }));
setDisplayState((prevState) => ({ ...prevState, theme: e.target.value as ThemeType }));
}, []);
const renderCategories = React.useMemo<React.ReactNode | React.ReactNode[]>(() => {
const { searchKey = '', theme } = displayState;
const categoriesResult = Object.keys(categories)
.map(key => {
.map((key) => {
let iconList = categories[key as CategoriesKeys];
if (searchKey) {
const matchKey = searchKey
@ -55,15 +55,17 @@ const IconSearch: React.FC = () => {
.replace(new RegExp(`^<([a-zA-Z]*)\\s/>$`, 'gi'), (_, name) => name)
.replace(/(Filled|Outlined|TwoTone)$/, '')
.toLowerCase();
iconList = iconList.filter(iconName => iconName.toLowerCase().includes(matchKey));
iconList = iconList.filter((iconName) => iconName.toLowerCase().includes(matchKey));
}
// CopyrightCircle is same as Copyright, don't show it
iconList = iconList.filter(icon => icon !== 'CopyrightCircle');
iconList = iconList.filter((icon) => icon !== 'CopyrightCircle');
return {
category: key,
icons: iconList.map(iconName => iconName + theme).filter(iconName => allIcons[iconName]),
icons: iconList
.map((iconName) => iconName + theme)
.filter((iconName) => allIcons[iconName]),
};
})
.filter(({ icons }) => !!icons.length)
@ -104,7 +106,7 @@ const IconSearch: React.FC = () => {
placeholder={intl.formatMessage({ id: 'app.docs.components.icon.search.placeholder' })}
style={{ margin: '0 10px', flex: 1 }}
allowClear
onChange={e => handleSearchIcon(e.currentTarget.value)}
onChange={(e) => handleSearchIcon(e.currentTarget.value)}
size="large"
autoFocus
suffix={<IconPicSearcher />}

6
.dumi/theme/builtins/IconSearch/themeIcons.tsx
View File

@ -5,7 +5,7 @@ type CustomIconComponent = React.ComponentType<
CustomIconComponentProps | React.SVGProps<SVGSVGElement>
>;
export const FilledIcon: CustomIconComponent = props => {
export const FilledIcon: CustomIconComponent = (props) => {
const path =
'M864 64H160C107 64 64 107 64 160v' +
'704c0 53 43 96 96 96h704c53 0 96-43 96-96V16' +
@ -17,7 +17,7 @@ export const FilledIcon: CustomIconComponent = props => {
);
};
export const OutlinedIcon: CustomIconComponent = props => {
export const OutlinedIcon: CustomIconComponent = (props) => {
const path =
'M864 64H160C107 64 64 107 64 160v7' +
'04c0 53 43 96 96 96h704c53 0 96-43 96-96V160c' +
@ -31,7 +31,7 @@ export const OutlinedIcon: CustomIconComponent = props => {
);
};
export const TwoToneIcon: CustomIconComponent = props => {
export const TwoToneIcon: CustomIconComponent = (props) => {
const path =
'M16 512c0 273.932 222.066 496 496 49' +
'6s496-222.068 496-496S785.932 16 512 16 16 238.' +

20
.dumi/theme/builtins/ImagePreview/index.jsx
View File

@ -15,14 +15,14 @@ function isInline(className) {
}
function PreviewImageBox({
cover,
coverMeta,
imgs,
style,
previewVisible,
comparable,
onClick,
onCancel,
cover,
coverMeta,
imgs,
style,
previewVisible,
comparable,
onClick,
onCancel,
}) {
const onlyOneImg = comparable || imgs.length === 1;
const imageWrapperClassName = classNames('preview-image-wrapper', {
@ -77,7 +77,7 @@ export default class ImagePreview extends React.Component {
};
}
handleClick = index => {
handleClick = (index) => {
this.setState({
previewVisible: {
[index]: true,
@ -93,7 +93,7 @@ export default class ImagePreview extends React.Component {
render() {
const { imgs } = this.props;
const imgsMeta = imgs.map(img => {
const imgsMeta = imgs.map((img) => {
const { alt, description, src } = img;
const imgClassName = img.class;
return {

4
.dumi/theme/builtins/Previewer/fromDumiProps.tsx
View File

@ -16,8 +16,8 @@ function useShowRiddleButton() {
const [showRiddleButton, setShowRiddleButton] = useState(false);
useEffect(() => {
pingDeferrer ??= new Promise<boolean>(resolve => {
ping(status => {
pingDeferrer ??= new Promise<boolean>((resolve) => {
ping((status) => {
if (status !== 'timeout' && status !== 'error') {
return resolve(true);
}

12
.dumi/theme/builtins/Previewer/index.jsx
View File

@ -75,7 +75,7 @@ class Demo extends React.Component {
return ['', ''];
}
handleCodeExpand = demo => {
handleCodeExpand = (demo) => {
const { codeExpand } = this.state;
this.setState({ codeExpand: !codeExpand });
this.track({
@ -84,11 +84,11 @@ class Demo extends React.Component {
});
};
saveAnchor = anchor => {
saveAnchor = (anchor) => {
this.anchor = anchor;
};
handleCodeCopied = demo => {
handleCodeCopied = (demo) => {
this.setState({ copied: true });
this.track({
type: 'copy',
@ -96,7 +96,7 @@ class Demo extends React.Component {
});
};
onCopyTooltipOpenChange = open => {
onCopyTooltipOpenChange = (open) => {
if (open) {
this.setState({
copyTooltipOpen: open,
@ -254,7 +254,7 @@ class Demo extends React.Component {
'react-router-dom/umd/react-router-dom.min.js',
'react-router@3.x/umd/ReactRouter.min.js',
]
.map(url => `https://unpkg.com/${url}`)
.map((url) => `https://unpkg.com/${url}`)
.join(';'),
js_pre_processor: 'typescript',
};
@ -495,7 +495,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
<CodePreview
toReactComponent={props.utils.toReactComponent}
codes={highlightedCodes}
onCodeTypeChange={type => this.setState({ codeType: type })}
onCodeTypeChange={(type) => this.setState({ codeType: type })}
/>
{highlightedStyle ? (
<div key="style" className="highlight">

6
.dumi/theme/builtins/ResourceArticles/index.tsx
View File

@ -76,7 +76,7 @@ const ArticleList: React.FC<ArticleListProps> = ({ name, data = [], authors = []
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
) : (
data.map((article, index) => {
const author = authors.find(auth => auth.name === article.author);
const author = authors.find((auth) => auth.name === article.author);
return (
<li key={index}>
<a href={author?.href} target="_blank" rel="noreferrer">
@ -105,7 +105,7 @@ export default () => {
// ========================== Data ==========================
const mergedData = React.useMemo(() => {
const yearData: Record<number | string, Record<string, Article[]>> = {};
articles[isZhCN ? 'cn' : 'en']?.forEach(article => {
articles[isZhCN ? 'cn' : 'en']?.forEach((article) => {
const year = dayjs(article.date).year();
yearData[year] = yearData[year] || {};
yearData[year][article.type] = [...(yearData[year][article.type] || []), article];
@ -122,7 +122,7 @@ export default () => {
const yearList = Object.keys(mergedData).sort((a, b) => Number(b) - Number(a));
content = yearList.length ? (
<Tabs>
{yearList.map(year => (
{yearList.map((year) => (
<Tabs.TabPane tab={`${year}${isZhCN ? ' 年' : ''}`} key={year}>
<table>
<tbody>

2
.dumi/theme/builtins/ResourceCards/index.tsx
View File

@ -108,7 +108,7 @@ export type ResourceCardsProps = {
const ResourceCards: FC<ResourceCardsProps> = ({ resources }) => {
return (
<Row style={{ margin: '-12px -12px 0 -12px' }}>
{resources.map(item => (
{resources.map((item) => (
<ResourceCard resource={item} key={item.title} />
))}
</Row>

2
.dumi/theme/common/CodePenIcon.jsx
View File

@ -7,6 +7,6 @@ const SVGIcon = () => (
</svg>
);
const CodePenIcon = props => <Icon component={SVGIcon} {...props} />;
const CodePenIcon = (props) => <Icon component={SVGIcon} {...props} />;
export default CodePenIcon;

2
.dumi/theme/common/CodePreview.jsx
View File

@ -24,7 +24,7 @@ const CodePreview = ({ toReactComponent, codes, onCodeTypeChange }) => {
} else {
content = (
<Tabs centered onChange={onCodeTypeChange}>
{langList.map(lang => (
{langList.map((lang) => (
<TabPane tab={LANGS[lang]} key={lang}>
{toReactComponent([
'pre',

2
.dumi/theme/common/CodeSandboxIcon.jsx
View File

@ -7,6 +7,6 @@ const SVGIcon = () => (
</svg>
);
const CodeSandboxIcon = props => <Icon component={SVGIcon} {...props} />;
const CodeSandboxIcon = (props) => <Icon component={SVGIcon} {...props} />;
export default CodeSandboxIcon;

2
.dumi/theme/common/Color/ColorPaletteToolDark.jsx
View File

@ -22,7 +22,7 @@ export default class ColorPaletteTool extends Component {
});
};
handleChangeBackgroundColor = e => {
handleChangeBackgroundColor = (e) => {
const value = e.target ? e.target.value : e;
this.setState({
backgroundColor: value,

4
.dumi/theme/common/Color/ColorPalettes.jsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import cls from 'classnames';
import Palette from './Palette';
const ColorPalettes = props => {
const ColorPalettes = (props) => {
const { dark } = props;
const colors = [
@ -84,7 +84,7 @@ const ColorPalettes = props => {
});
return (
<div className={colorCls}>
{colors.map(color => (
{colors.map((color) => (
<Palette key={color.name} color={color} dark={dark} showTitle />
))}
</div>

8
.dumi/theme/common/Color/Palette.jsx
View File

@ -3,7 +3,7 @@ import { message } from 'antd';
import CopyToClipboard from 'react-copy-to-clipboard';
import { presetDarkPalettes } from '@ant-design/colors';
const rgbToHex = rgbString => {
const rgbToHex = (rgbString) => {
const rgb = rgbString.match(/\d+/g);
let r = parseInt(rgb[0], 10).toString(16);
let g = parseInt(rgb[1], 10).toString(16);
@ -17,7 +17,7 @@ const rgbToHex = rgbString => {
export default class Palette extends React.Component {
componentDidMount() {
this.hexColors = {};
Object.keys(this.colorNodes).forEach(key => {
Object.keys(this.colorNodes).forEach((key) => {
const computedColor = getComputedStyle(this.colorNodes[key])['background-color'];
if (computedColor.includes('rgba')) {
this.hexColors[key] = computedColor;
@ -55,7 +55,7 @@ export default class Palette extends React.Component {
>
<div
key={i}
ref={node => {
ref={(node) => {
this.colorNodes[`${name}-${i}`] = node;
}}
className={`main-color-item palette-${name}-${i}`}
@ -90,4 +90,4 @@ export default class Palette extends React.Component {
Palette.defaultProps = {
color: { name: 'gray', count: 13 },
}
};

2
.dumi/theme/common/ExternalLinkIcon.jsx
View File

@ -8,6 +8,6 @@ const SVGIcon = ({ color = 'currentColor' }) => (
</svg>
);
const ExternalLinkIcon = props => <Icon component={SVGIcon} {...props} />;
const ExternalLinkIcon = (props) => <Icon component={SVGIcon} {...props} />;
export default ExternalLinkIcon;

2
.dumi/theme/common/RiddleIcon.jsx
View File

@ -7,6 +7,6 @@ const SVGIcon = () => (
</svg>
);
const RiddleIcon = props => <Icon component={SVGIcon} {...props} />;
const RiddleIcon = (props) => <Icon component={SVGIcon} {...props} />;
export default RiddleIcon;

4
.dumi/theme/layouts/DocLayout/index.tsx
View File

@ -96,8 +96,8 @@ const DocLayout: FC = () => {
const content = useMemo(() => {
if (
['', '/'].some(path => path === pathname) ||
['/index'].some(path => pathname.startsWith(path))
['', '/'].some((path) => path === pathname) ||
['/index'].some((path) => pathname.startsWith(path))
) {
return (
<>

2
.dumi/theme/layouts/GlobalLayout.tsx
View File

@ -14,7 +14,7 @@ const GlobalLayout: FC = () => {
const contextValue = React.useMemo<ThemeContextProps>(
() => ({
theme,
setTheme: newTheme => {
setTheme: (newTheme) => {
setTheme(newTheme);
localStorage.setItem(
ANT_DESIGN_SITE_THEME,

4
.dumi/theme/layouts/ResourceLayout/AffixTabs.tsx
View File

@ -117,10 +117,10 @@ export default () => {
<div css={[styles.affixTabs, fixedId && styles.affixTabsFixed]} ref={containerRef}>
<Tabs
activeKey={fixedId || undefined}
onChange={key => {
onChange={(key) => {
scrollToId(key);
}}
items={idsRef.current.map(id => ({
items={idsRef.current.map((id) => ({
key: id,
label: <span style={{ textTransform: 'capitalize' }}>{id.replace(/-/g, ' ')}</span>,
}))}

6
.dumi/theme/slots/Header/More.tsx
View File

@ -38,7 +38,8 @@ export function getEcosystemGroup(): Exclude<MenuProps['items'], undefined> {
<a href="http://ng.ant.design" target="_blank" rel="noopener noreferrer">
Ant Design of Angular
<span style={smallStyle}>
(<FormattedMessage id="app.implementation.community" />)
(
<FormattedMessage id="app.implementation.community" />)
</span>
</a>
),
@ -49,7 +50,8 @@ export function getEcosystemGroup(): Exclude<MenuProps['items'], undefined> {
<a href="http://antdv.com" target="_blank" rel="noopener noreferrer">
Ant Design of Vue
<span style={smallStyle}>
(<FormattedMessage id="app.implementation.community" />)
(
<FormattedMessage id="app.implementation.community" />)
</span>
</a>
),

20
.dumi/theme/utils.tsx
View File

@ -29,11 +29,11 @@ export function getMenuItems(
categoryOrder: Orders,
typeOrder: Orders,
) {
const menuMeta = moduleData.map(item => item.meta).filter(meta => !meta.skip);
const menuMeta = moduleData.map((item) => item.meta).filter((meta) => !meta.skip);
const menuItems: Meta[] = [];
const sortFn = (a: Meta, b: Meta) => (a.order || 0) - (b.order || 0);
menuMeta.sort(sortFn).forEach(meta => {
menuMeta.sort(sortFn).forEach((meta) => {
// Format
if (meta.category) {
meta.category = meta.category[locale] || meta.category;
@ -52,7 +52,7 @@ export function getMenuItems(
// Component
if (meta.category === 'Components' && meta.type) {
let type = menuItems.find(i => i.title === meta.type);
let type = menuItems.find((i) => i.title === meta.type);
if (!type) {
type = {
type: 'type',
@ -67,7 +67,7 @@ export function getMenuItems(
return;
}
let group = menuItems.find(i => i.title === meta.category);
let group = menuItems.find((i) => i.title === meta.category);
if (!group) {
group = {
@ -82,7 +82,7 @@ export function getMenuItems(
group.children = group.children || [];
if (meta.type) {
let type = group.children.filter(i => i.title === meta.type)[0];
let type = group.children.filter((i) => i.title === meta.type)[0];
if (!type) {
type = {
type: 'type',
@ -100,7 +100,7 @@ export function getMenuItems(
});
function nestSort(list: Meta[]): Meta[] {
return list.sort(sortFn).map(item => {
return list.sort(sortFn).map((item) => {
if (item.children) {
return {
...item,
@ -201,7 +201,7 @@ export function getMetaDescription(jml?: any[] | null) {
}
const paragraph = flattenDeep(
jml
.filter(item => {
.filter((item) => {
if (Array.isArray(item)) {
const [tag] = item;
return tag === 'p';
@ -209,14 +209,14 @@ export function getMetaDescription(jml?: any[] | null) {
return false;
})
// ['p', ['code', 'aa'], 'bb'] => ['p', 'aabb']
.map(item => {
.map((item) => {
const [tag, ...others] = flatten(item);
const content = others
.filter(other => typeof other === 'string' && !COMMON_TAGS.includes(other))
.filter((other) => typeof other === 'string' && !COMMON_TAGS.includes(other))
.join('');
return [tag, content];
}),
).find(p => p && typeof p === 'string' && !COMMON_TAGS.includes(p)) as string;
).find((p) => p && typeof p === 'string' && !COMMON_TAGS.includes(p)) as string;
return paragraph;
}

1
.prettierrc
View File

@ -3,7 +3,6 @@
"trailingComma": "all",
"printWidth": 100,
"proseWrap": "never",
"arrowParens": "avoid",
"overrides": [
{
"files": ".prettierrc",

6
components/__tests__/node.test.tsx
View File

@ -21,7 +21,7 @@ describe('node', () => {
// Find the component exist demo test file
const files = glob.sync(`./components/*/__tests__/demo.test.@(j|t)s?(x)`);
files.forEach(componentTestFile => {
files.forEach((componentTestFile) => {
const componentName = componentTestFile.match(/components\/([^/]*)\//)![1];
// Test for ssr
@ -32,9 +32,9 @@ describe('node', () => {
require(`../../${componentTestFile}`); // eslint-disable-line global-require, import/no-dynamic-require
const option = (global as any).testConfig?.[componentName];
demoList.forEach(demoFile => {
demoList.forEach((demoFile) => {
const skip: string[] = option?.skip || [];
const test = skip.some(skipMarkdown => demoFile.includes(skipMarkdown)) ? it.skip : it;
const test = skip.some((skipMarkdown) => demoFile.includes(skipMarkdown)) ? it.skip : it;
test(demoFile, () => {
const Demo = require(`../../${demoFile}`).default; // eslint-disable-line global-require, import/no-dynamic-require

2
components/_util/ActionButton.tsx
View File

@ -20,7 +20,7 @@ function isThenable(thing?: PromiseLike<any>): boolean {
return !!(thing && !!thing.then);
}
const ActionButton: React.FC<ActionButtonProps> = props => {
const ActionButton: React.FC<ActionButtonProps> = (props) => {
const clickedRef = React.useRef<boolean>(false);
const ref = React.useRef<HTMLInputElement>(null);
const [loading, setLoading] = useState<ButtonProps['loading']>(false);

2
components/_util/PurePanel.tsx
View File

@ -31,7 +31,7 @@ export default function genPurePanel<ComponentProps extends BaseProps>(
setOpen(true);
if (typeof ResizeObserver !== 'undefined') {
const resizeObserver = new ResizeObserver(entries => {
const resizeObserver = new ResizeObserver((entries) => {
const element: HTMLDivElement = entries[0].target as any;
setPopupHeight(element.offsetHeight + 8);
setPopupWidth(element.offsetWidth);

2
components/_util/hooks/useForceUpdate.ts
View File

@ -1,6 +1,6 @@
import * as React from 'react';
export default function useForceUpdate() {
const [, forceUpdate] = React.useReducer(x => x + 1, 0);
const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
return forceUpdate;
}

4
components/_util/hooks/usePatchElement.tsx
View File

@ -8,12 +8,12 @@ export default function usePatchElement(): [
const patchElement = React.useCallback((element: React.ReactElement) => {
// append a new element to elements (and create a new ref)
setElements(originElements => [...originElements, element]);
setElements((originElements) => [...originElements, element]);
// return a function that removes the new element out of elements (and create a new ref)
// it works a little like useEffect
return () => {
setElements(originElements => originElements.filter(ele => ele !== element));
setElements((originElements) => originElements.filter((ele) => ele !== element));
};
}, []);

4
components/_util/motion.tsx
View File

@ -4,11 +4,11 @@ import { tuple } from './type';
// ================== Collapse Motion ==================
const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });
const getRealHeight: MotionEventHandler = node => {
const getRealHeight: MotionEventHandler = (node) => {
const { scrollHeight } = node;
return { height: scrollHeight, opacity: 1 };
};
const getCurrentHeight: MotionEventHandler = node => ({ height: node ? node.offsetHeight : 0 });
const getCurrentHeight: MotionEventHandler = (node) => ({ height: node ? node.offsetHeight : 0 });
const skipOpacityTransition: MotionEndEventHandler = (_, event: MotionEvent) =>
event?.deadline === true || (event as TransitionEvent).propertyName === 'height';

2
components/_util/placements.tsx
View File

@ -94,7 +94,7 @@ export default function getPlacements(config: PlacementsConfig) {
offset: [-4, verticalArrowShift + arrowWidth],
},
};
Object.keys(placementMap).forEach(key => {
Object.keys(placementMap).forEach((key) => {
placementMap[key] = arrowPointAtCenter
? {
...placementMap[key],

2
components/_util/responsiveObserve.ts
View File

@ -28,7 +28,7 @@ const responsiveObserve = {
},
dispatch(pointMap: ScreenMap) {
screens = pointMap;
subscribers.forEach(func => func(screens));
subscribers.forEach((func) => func(screens));
return subscribers.size >= 1;
},
subscribe(func: SubscribeFunc): number {

4
components/_util/transButton.tsx
View File

@ -22,14 +22,14 @@ const inlineStyle: React.CSSProperties = {
};
const TransButton = React.forwardRef<HTMLDivElement, TransButtonProps>((props, ref) => {
const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = event => {
const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
const { keyCode } = event;
if (keyCode === KeyCode.ENTER) {
event.preventDefault();
}
};
const onKeyUp: React.KeyboardEventHandler<HTMLDivElement> = event => {
const onKeyUp: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
const { keyCode } = event;
const { onClick } = props;
if (keyCode === KeyCode.ENTER && onClick) {

2
components/_util/wave/style.ts
View File

@ -12,7 +12,7 @@ interface WaveToken extends AliasToken {
clickAnimatingWithoutExtraNodeTrueAfter: string;
}
const genWaveStyle: GenerateStyle<WaveToken> = token => {
const genWaveStyle: GenerateStyle<WaveToken> = (token) => {
const waveEffect = new Keyframes('waveEffect', {
'100%': {
boxShadow: `0 0 0 6px var(--antd-wave-shadow-color)`,

16
components/affix/__tests__/Affix.test.tsx
View File

@ -33,7 +33,7 @@ class AffixMounter extends React.Component<{
const { getInstance, ...restProps } = this.props;
return (
<div
ref={node => {
ref={(node) => {
this.container = node!;
}}
className="container"
@ -41,7 +41,7 @@ class AffixMounter extends React.Component<{
<Affix
className="fixed"
target={this.getTarget}
ref={ele => {
ref={(ele) => {
getInstance?.(ele!);
}}
{...restProps}
@ -163,7 +163,7 @@ describe('Affix Render', () => {
let affixInstance: InternalAffixClass;
const { rerender } = render(
<Affix
ref={node => {
ref={(node) => {
affixInstance = node as InternalAffixClass;
}}
target={getTarget}
@ -173,7 +173,7 @@ describe('Affix Render', () => {
);
rerender(
<Affix
ref={node => {
ref={(node) => {
affixInstance = node as InternalAffixClass;
}}
target={() => null}
@ -224,7 +224,7 @@ describe('Affix Render', () => {
const { rerender } = render(
<AffixMounter
getInstance={inst => {
getInstance={(inst) => {
affixInstance = inst;
}}
offsetBottom={0}
@ -235,7 +235,7 @@ describe('Affix Render', () => {
rerender(
<AffixMounter
getInstance={inst => {
getInstance={(inst) => {
affixInstance = inst;
}}
offsetBottom={0}
@ -256,7 +256,7 @@ describe('Affix Render', () => {
let affixInstance: InternalAffixClass | null = null;
render(
<AffixMounter
getInstance={inst => {
getInstance={(inst) => {
affixInstance = inst;
}}
offsetBottom={0}
@ -275,7 +275,7 @@ describe('Affix Render', () => {
[
'.ant-btn', // inner
'.fixed', // outer
].forEach(selector => {
].forEach((selector) => {
it(`trigger listener when size change: ${selector}`, async () => {
const updateCalled = jest.fn();
const { container } = render(

2
components/affix/demo/on-change.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { Affix, Button } from 'antd';
const App: React.FC = () => (
<Affix offsetTop={120} onChange={affixed => console.log(affixed)}>
<Affix offsetTop={120} onChange={(affixed) => console.log(affixed)}>
<Button>120px to affix top</Button>
</Affix>
);

2
components/affix/style/index.tsx
View File

@ -19,7 +19,7 @@ const genSharedAffixStyle: GenerateStyle<AffixToken> = (token): CSSObject => {
};
// ============================== Export ==============================
export default genComponentStyleHook('Affix', token => {
export default genComponentStyleHook('Affix', (token) => {
const affixToken = mergeToken<AffixToken>(token, {
zIndexPopup: token.zIndexBase + 10,
});

16
components/affix/utils.ts
View File

@ -56,7 +56,7 @@ export function addObserveTarget<T>(target: HTMLElement | Window | null, affix?:
return;
}
let entity: ObserverEntity | undefined = observerEntities.find(item => item.target === target);
let entity: ObserverEntity | undefined = observerEntities.find((item) => item.target === target);
if (entity) {
entity.affixList.push(affix);
@ -69,9 +69,9 @@ export function addObserveTarget<T>(target: HTMLElement | Window | null, affix?:
observerEntities.push(entity);
// Add listener
TRIGGER_EVENTS.forEach(eventName => {
TRIGGER_EVENTS.forEach((eventName) => {
entity!.eventHandlers[eventName] = addEventListener(target, eventName, () => {
entity!.affixList.forEach(targetAffix => {
entity!.affixList.forEach((targetAffix) => {
targetAffix.lazyUpdatePosition();
});
});
@ -80,19 +80,19 @@ export function addObserveTarget<T>(target: HTMLElement | Window | null, affix?:
}
export function removeObserveTarget<T>(affix: T): void {
const observerEntity = observerEntities.find(oriObserverEntity => {
const hasAffix = oriObserverEntity.affixList.some(item => item === affix);
const observerEntity = observerEntities.find((oriObserverEntity) => {
const hasAffix = oriObserverEntity.affixList.some((item) => item === affix);
if (hasAffix) {
oriObserverEntity.affixList = oriObserverEntity.affixList.filter(item => item !== affix);
oriObserverEntity.affixList = oriObserverEntity.affixList.filter((item) => item !== affix);
}
return hasAffix;
});
if (observerEntity && observerEntity.affixList.length === 0) {
observerEntities = observerEntities.filter(item => item !== observerEntity);
observerEntities = observerEntities.filter((item) => item !== observerEntity);
// Remove listener
TRIGGER_EVENTS.forEach(eventName => {
TRIGGER_EVENTS.forEach((eventName) => {
const handler = observerEntity.eventHandlers[eventName];
if (handler && handler.remove) {
handler.remove();

6
components/alert/index.tsx
View File

@ -61,7 +61,7 @@ interface IconNodeProps {
description: AlertProps['description'];
}
const IconNode: React.FC<IconNodeProps> = props => {
const IconNode: React.FC<IconNodeProps> = (props) => {
const { icon, prefixCls, type } = props;
const iconType = iconMapFilled[type!] || null;
if (icon) {
@ -82,7 +82,7 @@ interface CloseIconProps {
handleClose: AlertProps['onClose'];
}
const CloseIcon: React.FC<CloseIconProps> = props => {
const CloseIcon: React.FC<CloseIconProps> = (props) => {
const { isClosable, closeText, prefixCls, closeIcon, handleClose } = props;
return isClosable ? (
<button type="button" onClick={handleClose} className={`${prefixCls}-close-icon`} tabIndex={0}>
@ -162,7 +162,7 @@ const Alert: AlertInterface = ({
motionName={`${prefixCls}-motion`}
motionAppear={false}
motionEnter={false}
onLeaveStart={node => ({
onLeaveStart={(node) => ({
maxHeight: node.offsetHeight,
})}
onLeaveEnd={afterClose}

2
components/anchor/AnchorLink.tsx
View File

@ -14,7 +14,7 @@ export interface AnchorLinkProps {
className?: string;
}
const AnchorLink: React.FC<AnchorLinkProps> = props => {
const AnchorLink: React.FC<AnchorLinkProps> = (props) => {
const { href = '#', title, prefixCls: customizePrefixCls, children, className, target } = props;
const context = React.useContext<AntAnchor | undefined>(AnchorContext);

2
components/auto-complete/demo/options.tsx
View File

@ -9,7 +9,7 @@ const App: React.FC = () => {
if (!value || value.indexOf('@') >= 0) {
res = [];
} else {
res = ['gmail.com', '163.com', 'qq.com'].map(domain => ({
res = ['gmail.com', '163.com', 'qq.com'].map((domain) => ({
value,
label: `${value}@${domain}`,
}));

2
components/auto-complete/index.tsx
View File

@ -86,7 +86,7 @@ const AutoComplete: React.ForwardRefRenderFunction<RefSelectProps, AutoCompleteP
optionChildren = children;
} else {
optionChildren = dataSource
? dataSource.map(item => {
? dataSource.map((item) => {
if (isValidElement(item)) {
return item;
}

2
components/avatar/SizeContext.tsx
View File

@ -12,7 +12,7 @@ export interface SizeContextProps {
export const SizeContextProvider: React.FC<SizeContextProps> = ({ children, size }) => (
<SizeContext.Consumer>
{originSize => (
{(originSize) => (
<SizeContext.Provider value={size || originSize}>{children}</SizeContext.Provider>
)}
</SizeContext.Consumer>

4
components/avatar/avatar.tsx
View File

@ -108,7 +108,7 @@ const InternalAvatar: React.ForwardRefRenderFunction<HTMLSpanElement, AvatarProp
const size = customSize === 'default' ? groupSize : customSize;
const needResponsive = Object.keys(typeof size === 'object' ? size || {} : {}).some(key =>
const needResponsive = Object.keys(typeof size === 'object' ? size || {} : {}).some((key) =>
['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key),
);
const screens = useBreakpoint(needResponsive);
@ -117,7 +117,7 @@ const InternalAvatar: React.ForwardRefRenderFunction<HTMLSpanElement, AvatarProp
return {};
}
const currentBreakpoint: Breakpoint = responsiveArray.find(screen => screens[screen])!;
const currentBreakpoint: Breakpoint = responsiveArray.find((screen) => screens[screen])!;
const currentSize = size[currentBreakpoint];
return currentSize

2
components/avatar/group.tsx
View File

@ -25,7 +25,7 @@ export interface GroupProps {
size?: AvatarSize;
}
const Group: React.FC<GroupProps> = props => {
const Group: React.FC<GroupProps> = (props) => {
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const { prefixCls: customizePrefixCls, className = '', maxCount, maxStyle, size } = props;

6
components/avatar/style/index.tsx
View File

@ -20,7 +20,7 @@ type AvatarToken = FullToken<'Avatar'> & {
avatarBgColor: string;
};
const genBaseStyle: GenerateStyle<AvatarToken> = token => {
const genBaseStyle: GenerateStyle<AvatarToken> = (token) => {
const {
antCls,
componentCls,
@ -109,7 +109,7 @@ const genBaseStyle: GenerateStyle<AvatarToken> = token => {
};
};
const genGroupStyle: GenerateStyle<AvatarToken> = token => {
const genGroupStyle: GenerateStyle<AvatarToken> = (token) => {
const { componentCls, avatarGroupBorderColor, avatarGroupOverlapping, avatarGroupSpace } = token;
return {
@ -133,7 +133,7 @@ const genGroupStyle: GenerateStyle<AvatarToken> = token => {
};
};
export default genComponentStyleHook('Avatar', token => {
export default genComponentStyleHook('Avatar', (token) => {
const {
colorTextLightSolid,

2
components/badge/SingleNumber.tsx
View File

@ -95,7 +95,7 @@ export default function SingleNumber(props: SingleNumberProps) {
}
// Fill with number unit nodes
const prevIndex = unitNumberList.findIndex(n => n % 10 === prevValue);
const prevIndex = unitNumberList.findIndex((n) => n % 10 === prevValue);
unitNodes = unitNumberList.map((n, index) => {
const singleUnit = n % 10;
return (

2
components/badge/demo/colorful.tsx
View File

@ -21,7 +21,7 @@ const App: React.FC = () => (
<>
<Divider orientation="left">Presets</Divider>
<Space direction="vertical">
{colors.map(color => (
{colors.map((color) => (
<Badge key={color} color={color} text={color} />
))}
</Space>

2
components/badge/index.tsx
View File

@ -137,7 +137,7 @@ const Badge: CompoundedComponent = ({
const displayNode =
!livingCount || typeof livingCount !== 'object'
? undefined
: cloneElement(livingCount, oriProps => ({
: cloneElement(livingCount, (oriProps) => ({
style: {
...mergedStyle,
...oriProps.style,

6
components/breadcrumb/__tests__/router.test.tsx
View File

@ -36,7 +36,7 @@ describe('react router', () => {
const Home: React.FC = () => {
const location = useLocation();
const navigate = useNavigate();
const pathSnippets = location.pathname.split('/').filter(i => i);
const pathSnippets = location.pathname.split('/').filter((i) => i);
const extraBreadcrumbItems = pathSnippets.map((_, index) => {
const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
return (
@ -51,11 +51,11 @@ describe('react router', () => {
</Breadcrumb.Item>,
].concat(extraBreadcrumbItems);
const componentProps = useMemo<RouterProps>(
() => ({ component: Apps } as unknown as RouterProps),
() => ({ component: Apps }) as unknown as RouterProps,
[],
);
const renderProps = useMemo<RouterProps>(
() => ({ render: () => <span>Home Page</span> } as unknown as RouterProps),
() => ({ render: () => <span>Home Page</span> }) as unknown as RouterProps,
[],
);
return (

2
components/breadcrumb/demo/react-router.tsx
View File

@ -23,7 +23,7 @@ const breadcrumbNameMap: Record<string, string> = {
const Home = () => {
const location = useLocation();
const pathSnippets = location.pathname.split('/').filter(i => i);
const pathSnippets = location.pathname.split('/').filter((i) => i);
const extraBreadcrumbItems = pathSnippets.map((_, index) => {
const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;

4
components/button/__tests__/delay-timer.test.tsx
View File

@ -43,11 +43,11 @@ it('Delay loading timer in Button component', () => {
// other component may call setTimeout or clearTimeout
const setTimeoutCount = () => {
const items = setTimeoutMock.mock.calls.filter(item => item[1] === specialDelay);
const items = setTimeoutMock.mock.calls.filter((item) => item[1] === specialDelay);
return items.length;
};
const clearTimeoutCount = () => {
const items = clearTimeoutMock.mock.calls.filter(item => item[0] === btnTimer);
const items = clearTimeoutMock.mock.calls.filter((item) => item[0] === btnTimer);
return items.length;
};

2
components/button/__tests__/index.test.tsx
View File

@ -297,7 +297,7 @@ describe('Button', () => {
render(
<ConfigProvider autoInsertSpaceInButton={false}>
<Button
ref={node => {
ref={(node) => {
buttonInstance = node;
}}
>

2
components/button/__tests__/wave.test.tsx
View File

@ -13,7 +13,7 @@ jest.mock('../../_util/wave', () => {
__esModule: true,
default: (props: import('../../_util/wave').WaveProps) => (
<WaveComponent
ref={node => {
ref={(node) => {
waveInstanceMock = node;
}}
{...props}

2
components/button/button-group.tsx
View File

@ -15,7 +15,7 @@ export interface ButtonGroupProps {
export const GroupSizeContext = React.createContext<SizeType | undefined>(undefined);
const ButtonGroup: React.FC<ButtonGroupProps> = props => {
const ButtonGroup: React.FC<ButtonGroupProps> = (props) => {
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const { prefixCls: customizePrefixCls, size, className, ...others } = props;

4
components/button/button.tsx
View File

@ -58,7 +58,7 @@ function insertSpace(child: React.ReactElement | string | number, needInserted:
function spaceChildren(children: React.ReactNode, needInserted: boolean) {
let isPrevChildPure: boolean = false;
const childList: React.ReactNode[] = [];
React.Children.forEach(children, child => {
React.Children.forEach(children, (child) => {
const type = typeof child;
const isCurrentChildPure = type === 'string' || type === 'number';
if (isPrevChildPure && isCurrentChildPure) {
@ -73,7 +73,7 @@ function spaceChildren(children: React.ReactNode, needInserted: boolean) {
});
// Pass to React.Children.map to auto fill key
return React.Children.map(childList, child =>
return React.Children.map(childList, (child) =>
insertSpace(child as React.ReactElement | string | number, needInserted),
);
}

2
components/button/style/group.tsx
View File

@ -22,7 +22,7 @@ const genButtonBorderStyle = (buttonTypeCls: string, borderColor: string) => ({
},
});
const genGroupStyle: GenerateStyle<ButtonToken> = token => {
const genGroupStyle: GenerateStyle<ButtonToken> = (token) => {
const { componentCls, fontSize, lineWidth, colorPrimaryHover, colorErrorHover } = token;
return {

4
components/calendar/Header.tsx
View File

@ -47,7 +47,7 @@ function YearSelect<DateType>(props: SharedProps<DateType>) {
options={options}
value={year}
className={`${prefixCls}-year-select`}
onChange={numYear => {
onChange={(numYear) => {
let newDate = generateConfig.setYear(value, numYear);
if (validRange) {
@ -109,7 +109,7 @@ function MonthSelect<DateType>(props: SharedProps<DateType>) {
className={`${prefixCls}-month-select`}
value={month}
options={options}
onChange={newMonth => {
onChange={(newMonth) => {
onChange(generateConfig.setMonth(value, newMonth));
}}
getPopupContainer={() => divRef!.current!}

5
components/calendar/__tests__/index.test.tsx
View File

@ -155,7 +155,10 @@ describe('Calendar', () => {
it('validRange should work with disabledDate function', () => {
const validRange: [Dayjs.Dayjs, Dayjs.Dayjs] = [Dayjs('2018-02-02'), Dayjs('2018-05-18')];
render(
<Calendar validRange={validRange} disabledDate={data => data.isSame(Dayjs('2018-02-03'))} />,
<Calendar
validRange={validRange}
disabledDate={(data) => data.isSame(Dayjs('2018-02-03'))}
/>,
);
expect(ref.calendarProps?.disabledDate?.(Dayjs('2018-02-01'))).toBe(true);

6
components/calendar/demo/customize-header.tsx
View File

@ -55,7 +55,7 @@ const App: React.FC = () => {
<Col>
<Radio.Group
size="small"
onChange={e => onTypeChange(e.target.value)}
onChange={(e) => onTypeChange(e.target.value)}
value={type}
>
<Radio.Button value="month">Month</Radio.Button>
@ -68,7 +68,7 @@ const App: React.FC = () => {
dropdownMatchSelectWidth={false}
className="my-year-select"
value={year}
onChange={newYear => {
onChange={(newYear) => {
const now = value.clone().year(newYear);
onChange(now);
}}
@ -81,7 +81,7 @@ const App: React.FC = () => {
size="small"
dropdownMatchSelectWidth={false}
value={month}
onChange={newMonth => {
onChange={(newMonth) => {
const now = value.clone().month(newMonth);
onChange(now);
}}

2
components/calendar/demo/notice-calendar.tsx
View File

@ -55,7 +55,7 @@ const App: React.FC = () => {
const listData = getListData(value);
return (
<ul className="events">
{listData.map(item => (
{listData.map((item) => (
<li key={item.content}>
<Badge status={item.type as BadgeProps['status']} text={item.content} />
</li>

4
components/calendar/generateCalendar.tsx
View File

@ -237,7 +237,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
return wrapSSR(
<LocaleReceiver componentName="Calendar" defaultLocale={getDefaultLocale}>
{contextLocale => (
{(contextLocale) => (
<div
className={classNames(
calendarPrefixCls,
@ -278,7 +278,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
locale={contextLocale.lang}
generateConfig={generateConfig}
dateRender={dateRender}
monthCellRender={date => monthRender(date, contextLocale.lang)}
monthCellRender={(date) => monthRender(date, contextLocale.lang)}
onSelect={onInternalSelect}
mode={panelMode}
picker={panelMode}

2
components/calendar/style/index.tsx
View File

@ -190,7 +190,7 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
export default genComponentStyleHook(
'Calendar',
token => {
(token) => {
const calendarCls = `${token.componentCls}-calendar`;
const calendarToken = mergeToken<CalendarToken>(
initInputToken<FullToken<'Calendar'>>(token),

2
components/card/Card.tsx
View File

@ -121,7 +121,7 @@ const Card = React.forwardRef((props: CardProps, ref: React.Ref<HTMLDivElement>)
{...extraProps}
className={`${prefixCls}-head-tabs`}
onChange={onTabChange}
items={tabList.map(item => ({
items={tabList.map((item) => ({
label: item.tab,
key: item.key,
disabled: item.disabled ?? false,

2
components/card/Meta.tsx
View File

@ -12,7 +12,7 @@ export interface CardMetaProps {
description?: React.ReactNode;
}
const Meta: React.FC<CardMetaProps> = props => (
const Meta: React.FC<CardMetaProps> = (props) => (
<ConfigConsumer>
{({ getPrefixCls }: ConfigConsumerProps) => {
const {

4
components/card/demo/tabs.tsx
View File

@ -57,7 +57,7 @@ const App: React.FC = () => {
extra={<a href="#">More</a>}
tabList={tabList}
activeTabKey={activeTabKey1}
onTabChange={key => {
onTabChange={(key) => {
onTab1Change(key);
}}
>
@ -70,7 +70,7 @@ const App: React.FC = () => {
tabList={tabListNoTitle}
activeTabKey={activeTabKey2}
tabBarExtraContent={<a href="#">More</a>}
onTabChange={key => {
onTabChange={(key) => {
onTab2Change(key);
}}
>

2
components/carousel/__tests__/index.test.tsx
View File

@ -86,7 +86,7 @@ describe('Carousel', () => {
});
describe('should works for dotPosition', () => {
(['left', 'right', 'top', 'bottom'] as const).forEach(dotPosition => {
(['left', 'right', 'top', 'bottom'] as const).forEach((dotPosition) => {
// eslint-disable-next-line jest/valid-title
it(dotPosition, () => {
const { container } = render(

8
components/carousel/style/index.tsx
View File

@ -14,7 +14,7 @@ interface CarouselToken extends FullToken<'Carousel'> {
carouselDotInline: number;
}
const genCarouselStyle: GenerateStyle<CarouselToken> = token => {
const genCarouselStyle: GenerateStyle<CarouselToken> = (token) => {
const { componentCls, antCls, carouselArrowSize, carouselDotOffset, marginXXS } = token;
const arrowOffset = -carouselArrowSize * 1.25;
@ -250,7 +250,7 @@ const genCarouselStyle: GenerateStyle<CarouselToken> = token => {
};
};
const genCarouselVerticalStyle: GenerateStyle<CarouselToken> = token => {
const genCarouselVerticalStyle: GenerateStyle<CarouselToken> = (token) => {
const { componentCls, carouselDotOffset, marginXXS } = token;
const reverseSizeOfDot = {
@ -298,7 +298,7 @@ const genCarouselVerticalStyle: GenerateStyle<CarouselToken> = token => {
};
};
const genCarouselRtlStyle: GenerateStyle<CarouselToken> = token => {
const genCarouselRtlStyle: GenerateStyle<CarouselToken> = (token) => {
const { componentCls } = token;
return [
@ -329,7 +329,7 @@ const genCarouselRtlStyle: GenerateStyle<CarouselToken> = token => {
// ============================== Export ==============================
export default genComponentStyleHook(
'Carousel',
token => {
(token) => {
const { controlHeightLG, controlHeightSM } = token;
const carouselToken = mergeToken<CarouselToken>(token, {
carouselArrowSize: controlHeightLG / 2,

4
components/cascader/__tests__/index.test.tsx
View File

@ -74,7 +74,7 @@ function filter<OptionType extends BaseOptionType = DefaultOptionType>(
inputValue: string,
path: OptionType[],
): boolean {
return path.some(option => option.label.toLowerCase().includes(inputValue.toLowerCase()));
return path.some((option) => option.label.toLowerCase().includes(inputValue.toLowerCase()));
}
describe('Cascader', () => {
@ -189,7 +189,7 @@ describe('Cascader', () => {
inputValue: string,
path: OptionType[],
): boolean {
return path.some(option => option.name.toLowerCase().includes(inputValue.toLowerCase()));
return path.some((option) => option.name.toLowerCase().includes(inputValue.toLowerCase()));
}
const { container } = render(
<Cascader

2
components/cascader/demo/custom-render.tsx
View File

@ -61,7 +61,7 @@ const displayRender = (labels: string[], selectedOptions: DefaultOptionType[]) =
if (i === labels.length - 1) {
return (
<span key={option.value}>
{label} (<a onClick={e => handleAreaClick(e, label, option)}>{option.code}</a>)
{label} (<a onClick={(e) => handleAreaClick(e, label, option)}>{option.code}</a>)
</span>
);
}

2
components/cascader/demo/custom-trigger.tsx
View File

@ -34,7 +34,7 @@ const App: React.FC = () => {
const [text, setText] = useState('Unselect');
const onChange = (_: string[], selectedOptions: Option[]) => {
setText(selectedOptions.map(o => o.label).join(', '));
setText(selectedOptions.map((o) => o.label).join(', '));
};
return (

4
components/cascader/demo/search.tsx
View File

@ -55,7 +55,7 @@ const onChange = (value: string[], selectedOptions: Option[]) => {
const filter = (inputValue: string, path: DefaultOptionType[]) =>
path.some(
option => (option.label as string).toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
(option) => (option.label as string).toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
);
const App: React.FC = () => (
@ -64,7 +64,7 @@ const App: React.FC = () => (
onChange={onChange}
placeholder="Please select"
showSearch={{ filter }}
onSearch={value => console.log(value)}
onSearch={(value) => console.log(value)}
/>
);

14
components/checkbox/Group.tsx
View File

@ -71,7 +71,7 @@ const InternalCheckboxGroup: React.ForwardRefRenderFunction<HTMLDivElement, Chec
}, [restProps.value]);
const getOptions = () =>
options.map(option => {
options.map((option) => {
if (typeof option === 'string' || typeof option === 'number') {
return {
label: option,
@ -82,11 +82,11 @@ const InternalCheckboxGroup: React.ForwardRefRenderFunction<HTMLDivElement, Chec
});
const cancelValue = (val: string) => {
setRegisteredValues(prevValues => prevValues.filter(v => v !== val));
setRegisteredValues((prevValues) => prevValues.filter((v) => v !== val));
};
const registerValue = (val: string) => {
setRegisteredValues(prevValues => [...prevValues, val]);
setRegisteredValues((prevValues) => [...prevValues, val]);
};
const toggleOption = (option: CheckboxOptionType) => {
@ -103,10 +103,10 @@ const InternalCheckboxGroup: React.ForwardRefRenderFunction<HTMLDivElement, Chec
const opts = getOptions();
onChange?.(
newValue
.filter(val => registeredValues.includes(val))
.filter((val) => registeredValues.includes(val))
.sort((a, b) => {
const indexA = opts.findIndex(opt => opt.value === a);
const indexB = opts.findIndex(opt => opt.value === b);
const indexA = opts.findIndex((opt) => opt.value === a);
const indexB = opts.findIndex((opt) => opt.value === b);
return indexA - indexB;
}),
);
@ -120,7 +120,7 @@ const InternalCheckboxGroup: React.ForwardRefRenderFunction<HTMLDivElement, Chec
const domProps = omit(restProps, ['value', 'disabled']);
if (options && options.length > 0) {
children = getOptions().map(option => (
children = getOptions().map((option) => (
<Checkbox
prefixCls={prefixCls}
key={option.value.toString()}

6
components/checkbox/__tests__/group.test.tsx
View File

@ -63,7 +63,7 @@ describe('CheckboxGroup', () => {
it('all children should have a name property', () => {
const { container } = render(<Checkbox.Group name="checkboxgroup" options={['Yes', 'No']} />);
Array.from(container.querySelectorAll<HTMLInputElement>('input[type="checkbox"]')).forEach(
el => {
(el) => {
expect(el.getAttribute('name')).toEqual('checkboxgroup');
},
);
@ -218,7 +218,7 @@ describe('CheckboxGroup', () => {
render(
<Checkbox.Group
options={['Apple', 'Pear', 'Orange']}
ref={node => {
ref={(node) => {
refCalls.push(node!);
}}
/>,
@ -250,7 +250,7 @@ describe('CheckboxGroup', () => {
return (
<div>
<Input className="my-input" value={v} onChange={e => setV(e.target.value)} />
<Input className="my-input" value={v} onChange={(e) => setV(e.target.value)} />
<Checkbox.Group defaultValue={['length1']} style={{ width: '100%' }} onChange={onChange}>
<Checkbox className="target-checkbox" value={v ? `length${v}` : 'A'}>
A

2
components/collapse/Collapse.tsx
View File

@ -54,7 +54,7 @@ interface CollapseInterface extends React.FC<CollapseProps> {
Panel: typeof CollapsePanel;
}
const Collapse: CollapseInterface = props => {
const Collapse: CollapseInterface = (props) => {
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const {
prefixCls: customizePrefixCls,

2
components/collapse/CollapsePanel.tsx
View File

@ -22,7 +22,7 @@ export interface CollapsePanelProps {
children?: React.ReactNode;
}
const CollapsePanel: React.FC<CollapsePanelProps> = props => {
const CollapsePanel: React.FC<CollapsePanelProps> = (props) => {
warning(
!('disabled' in props),
'Collapse.Panel',

4
components/collapse/__tests__/index.test.tsx
View File

@ -120,7 +120,7 @@ describe('Collapse', () => {
jest.useFakeTimers();
const spiedRAF = jest
.spyOn(window, 'requestAnimationFrame')
.mockImplementation(cb => setTimeout(cb, 16.66));
.mockImplementation((cb) => setTimeout(cb, 16.66));
let setActiveKeyOuter: React.Dispatch<React.SetStateAction<React.Key | undefined>>;
const Test = () => {
@ -153,7 +153,7 @@ describe('Collapse', () => {
});
describe('expandIconPosition', () => {
['left', 'right'].forEach(pos => {
['left', 'right'].forEach((pos) => {
it(`warning for legacy '${pos}'`, () => {
render(
<Collapse expandIconPosition={pos}>

2
components/collapse/demo/extra.tsx
View File

@ -26,7 +26,7 @@ const App: React.FC = () => {
const genExtra = () => (
<SettingOutlined
onClick={event => {
onClick={(event) => {
// If you don't want click extra trigger collapse, you can prevent this:
event.stopPropagation();
}}

2
components/config-provider/SizeContext.tsx
View File

@ -11,7 +11,7 @@ export interface SizeContextProps {
export const SizeContextProvider: React.FC<SizeContextProps> = ({ children, size }) => (
<SizeContext.Consumer>
{originSize => (
{(originSize) => (
<SizeContext.Provider value={size || originSize}>{children}</SizeContext.Provider>
)}
</SizeContext.Consumer>

106
components/config-provider/__tests__/components.test.tsx
View File

@ -126,28 +126,28 @@ describe('ConfigProvider', () => {
}
// Alert
testPair('Alert', props => (
testPair('Alert', (props) => (
<Alert {...props} message="Bamboo is Little Light" type="success" />
));
// Anchor
testPair('Anchor', props => (
testPair('Anchor', (props) => (
<Anchor {...props}>
<Anchor.Link {...props} href="#bamboo" title="Little Light" />
</Anchor>
));
// AutoComplete
testPair('AutoComplete', props => <AutoComplete {...props} />);
testPair('AutoComplete', (props) => <AutoComplete {...props} />);
// Avatar
testPair('Avatar', props => <Avatar {...props} />);
testPair('Avatar', (props) => <Avatar {...props} />);
// BackTop
testPair('BackTop', props => <BackTop visible {...props} />);
testPair('BackTop', (props) => <BackTop visible {...props} />);
// Badge
testPair('Badge', props => {
testPair('Badge', (props) => {
const newProps = { ...props };
// Hook for additional `scrollNumberPrefixCls` prop
@ -168,7 +168,7 @@ describe('ConfigProvider', () => {
});
// Breadcrumb
testPair('Breadcrumb', props => (
testPair('Breadcrumb', (props) => (
<Breadcrumb {...props}>
<Breadcrumb.Item {...props}>Bamboo</Breadcrumb.Item>
<Breadcrumb.Item {...props}>Light</Breadcrumb.Item>
@ -176,7 +176,7 @@ describe('ConfigProvider', () => {
));
// Button
testPair('Button', props => (
testPair('Button', (props) => (
<div>
<Button {...props}>Bamboo</Button>
<Button.Group {...props}>
@ -187,7 +187,7 @@ describe('ConfigProvider', () => {
));
// Calendar
testPair('Calendar', props => (
testPair('Calendar', (props) => (
<div>
<Calendar {...props} value={dayjs('2000-09-03')} mode="month" />
<Calendar {...props} value={dayjs('2000-09-03')} mode="year" />
@ -195,7 +195,7 @@ describe('ConfigProvider', () => {
));
// Card
testPair('Card', props => (
testPair('Card', (props) => (
<Card {...props}>
<Card.Grid {...props}>
<Card.Meta {...props} />
@ -204,7 +204,7 @@ describe('ConfigProvider', () => {
));
// Carousel
testPair('Carousel', props => (
testPair('Carousel', (props) => (
<Carousel {...props}>
<div>
<h3>Bamboo</h3>
@ -216,17 +216,17 @@ describe('ConfigProvider', () => {
));
// Cascader
testPair('Cascader', props => <Cascader {...props} options={[]} showSearch />);
testPair('Cascader', (props) => <Cascader {...props} options={[]} showSearch />);
// Checkbox
testPair('Checkbox', props => (
testPair('Checkbox', (props) => (
<Checkbox.Group {...props}>
<Checkbox {...props}>Bamboo</Checkbox>
</Checkbox.Group>
));
// Collapse
testPair('Collapse', props => (
testPair('Collapse', (props) => (
<Collapse {...props}>
<Collapse.Panel key="Collapse" header="Bamboo">
<p>Light</p>
@ -236,28 +236,28 @@ describe('ConfigProvider', () => {
// DatePicker
describe('DatePicker', () => {
testPair('DatePicker', props => (
testPair('DatePicker', (props) => (
<div>
<DatePicker {...props} />
</div>
));
// RangePicker
testPair('RangePicker', props => (
testPair('RangePicker', (props) => (
<div>
<DatePicker.RangePicker {...props} />
</div>
));
// MonthPicker
testPair('MonthPicker', props => (
testPair('MonthPicker', (props) => (
<div>
<DatePicker.MonthPicker {...props} />
</div>
));
// WeekPicker
testPair('WeekPicker', props => (
testPair('WeekPicker', (props) => (
<div>
<DatePicker.WeekPicker {...props} />
</div>
@ -265,19 +265,19 @@ describe('ConfigProvider', () => {
});
// Empty
testPair('Empty', props => <Empty {...props} />);
testPair('Empty', (props) => <Empty {...props} />);
// Divider
testPair('Divider', props => <Divider {...props} />);
testPair('Divider', (props) => <Divider {...props} />);
// Drawer
testPair('Drawer', props => <Drawer {...props} open getContainer={false} />);
testPair('Drawer', (props) => <Drawer {...props} open getContainer={false} />);
// Dropdown
testPair('Dropdown', props => <Dropdown.Button {...props}>Light</Dropdown.Button>);
testPair('Dropdown', (props) => <Dropdown.Button {...props}>Light</Dropdown.Button>);
// Form
testPair('Form', props => (
testPair('Form', (props) => (
<Form {...props}>
<Form.Item {...props} validateStatus="error" help="Bamboo is Light">
<Input {...props} />
@ -286,7 +286,7 @@ describe('ConfigProvider', () => {
));
// Grid
testPair('Grid', props => {
testPair('Grid', (props) => {
const rowProps: { prefixCls?: string } = {};
const colProps: { prefixCls?: string } = {};
if (props.prefixCls) {
@ -302,7 +302,7 @@ describe('ConfigProvider', () => {
});
// Input
testPair('Input', props => (
testPair('Input', (props) => (
<div>
<Input.Group {...props}>
<Input {...props} />
@ -314,10 +314,10 @@ describe('ConfigProvider', () => {
));
// InputNumber
testPair('InputNumber', props => <InputNumber {...props} />);
testPair('InputNumber', (props) => <InputNumber {...props} />);
// Layout
testPair('Layout', props => {
testPair('Layout', (props) => {
const siderProps: { prefixCls?: string } = {};
const headerProps: { prefixCls?: string } = {};
const contentProps: { prefixCls?: string } = {};
@ -342,7 +342,7 @@ describe('ConfigProvider', () => {
});
// List
testPair('List', props => (
testPair('List', (props) => (
<List
{...props}
itemLayout="horizontal"
@ -361,7 +361,7 @@ describe('ConfigProvider', () => {
));
// Menu
testPair('Menu', props => (
testPair('Menu', (props) => (
<Menu {...props} defaultOpenKeys={['bamboo']} mode="inline">
<Menu.SubMenu {...props} key="bamboo" title="bamboo">
<Menu.ItemGroup {...props} key="g1" title="Item 1">
@ -374,7 +374,7 @@ describe('ConfigProvider', () => {
));
// Modal
testPair('Modal', props => (
testPair('Modal', (props) => (
<div>
<Modal {...props} open getContainer={false}>
Bamboo is Little Light
@ -383,7 +383,7 @@ describe('ConfigProvider', () => {
));
// Pagination
testPair('Pagination', props => (
testPair('Pagination', (props) => (
<div>
<Pagination showSizeChanger showQuickJumper {...props} />
<Pagination size="small" showSizeChanger showQuickJumper {...props} />
@ -391,7 +391,7 @@ describe('ConfigProvider', () => {
));
// Popconfirm
testPair('Popconfirm', props => (
testPair('Popconfirm', (props) => (
<div>
<Popconfirm {...props} open>
<span>Bamboo</span>
@ -400,7 +400,7 @@ describe('ConfigProvider', () => {
));
// Popover
testPair('Popover', props => (
testPair('Popover', (props) => (
<div>
<Popover {...props} open>
<span>Light</span>
@ -409,10 +409,10 @@ describe('ConfigProvider', () => {
));
// Progress
testPair('Progress', props => <Progress {...props} />);
testPair('Progress', (props) => <Progress {...props} />);
// Radio
testPair('Radio', props => (
testPair('Radio', (props) => (
<div>
<Radio.Group {...props}>
<Radio {...props}>Bamboo</Radio>
@ -424,10 +424,10 @@ describe('ConfigProvider', () => {
));
// Rate
testPair('Rate', props => <Rate {...props} />);
testPair('Rate', (props) => <Rate {...props} />);
// Select
testPair('Select', props => (
testPair('Select', (props) => (
<Select {...props} open>
<Select.OptGroup key="grp">
<Select.Option key="Bamboo">Light</Select.Option>
@ -436,10 +436,10 @@ describe('ConfigProvider', () => {
));
// Skeleton
testPair('Skeleton', props => <Skeleton title avatar paragraph {...props} />);
testPair('Skeleton', (props) => <Skeleton title avatar paragraph {...props} />);
// Slider
testPair('Slider', props => {
testPair('Slider', (props) => {
const myProps = { ...props };
const tooltip: SliderTooltipProps = {
open: true,
@ -452,13 +452,13 @@ describe('ConfigProvider', () => {
});
// Spin
testPair('Spin', props => <Spin {...props} />);
testPair('Spin', (props) => <Spin {...props} />);
// Statistic
testPair('Statistic', props => <Statistic {...props} value={0} />);
testPair('Statistic', (props) => <Statistic {...props} value={0} />);
// Steps
testPair('Steps', props => {
testPair('Steps', (props) => {
const myProps = { ...props };
if (props.prefixCls) {
myProps.iconPrefix = 'prefixIcon';
@ -477,10 +477,10 @@ describe('ConfigProvider', () => {
});
// Switch
testPair('Switch', props => <Switch {...props} />);
testPair('Switch', (props) => <Switch {...props} />);
// Table
testPair('Table', props => {
testPair('Table', (props) => {
const columns: ColumnsType<any> = [
{
title: 'Name',
@ -508,14 +508,14 @@ describe('ConfigProvider', () => {
});
// Tabs
testPair('Tabs', props => (
testPair('Tabs', (props) => (
<Tabs {...props}>
<Tabs.TabPane tab="Bamboo" key="Light" />
</Tabs>
));
// Tags
testPair('Tags', props => (
testPair('Tags', (props) => (
<div>
<Tag {...props}>Bamboo</Tag>
<Tag.CheckableTag {...props}>Light</Tag.CheckableTag>
@ -523,29 +523,29 @@ describe('ConfigProvider', () => {
));
// TimePicker
testPair('TimePicker', props => (
testPair('TimePicker', (props) => (
<TimePicker {...props} open defaultOpenValue={dayjs('00:00:00', 'HH:mm:ss')} />
));
// Timeline
testPair('Timeline', props => (
testPair('Timeline', (props) => (
<Timeline {...props}>
<Timeline.Item {...props}>Bamboo</Timeline.Item>
</Timeline>
));
// Tooltip
testPair('Tooltip', props => (
testPair('Tooltip', (props) => (
<Tooltip {...props} title="Bamboo" open>
<span>Light</span>
</Tooltip>
));
// Transfer
testPair('Transfer', props => <Transfer {...props} dataSource={[]} />);
testPair('Transfer', (props) => <Transfer {...props} dataSource={[]} />);
// Tree
testPair('Tree', props => (
testPair('Tree', (props) => (
<div>
<Tree {...props}>
<Tree.TreeNode title="bamboo" />
@ -557,14 +557,14 @@ describe('ConfigProvider', () => {
));
// TreeSelect
testPair('TreeSelect', props => (
testPair('TreeSelect', (props) => (
<TreeSelect {...props} open>
<TreeSelect.TreeNode title="bamboo" value="light" />
</TreeSelect>
));
// Upload
testPair('Upload', props => (
testPair('Upload', (props) => (
<Upload {...props} defaultFileList={[{ uid: '1', name: 'xxx.png', status: 'done' }]}>
<span />
</Upload>

8
components/config-provider/__tests__/container.test.tsx
View File

@ -8,7 +8,7 @@ import { render, fireEvent } from '../../../tests/utils';
describe('ConfigProvider.GetPopupContainer', () => {
it('Datepicker', () => {
const getPopupContainer = jest.fn(node => node.parentNode);
const getPopupContainer = jest.fn((node) => node.parentNode);
render(
<ConfigProvider getPopupContainer={getPopupContainer}>
<DatePicker open />
@ -18,7 +18,7 @@ describe('ConfigProvider.GetPopupContainer', () => {
});
it('Slider', () => {
const getPopupContainer = jest.fn(node => node.parentNode);
const getPopupContainer = jest.fn((node) => node.parentNode);
const wrapper = render(
<ConfigProvider getPopupContainer={getPopupContainer}>
<Slider />
@ -29,7 +29,7 @@ describe('ConfigProvider.GetPopupContainer', () => {
});
it('Drawer', () => {
const getPopupContainer = jest.fn(node => node.parentNode);
const getPopupContainer = jest.fn((node) => node.parentNode);
const Demo: React.FC<{ open?: boolean }> = ({ open }) => (
<ConfigProvider getPopupContainer={getPopupContainer}>
<Drawer open={open} />
@ -40,7 +40,7 @@ describe('ConfigProvider.GetPopupContainer', () => {
});
it('Cascader', () => {
const getPopupContainer = jest.fn(node => node.parentNode);
const getPopupContainer = jest.fn((node) => node.parentNode);
render(<Cascader getPopupContainer={getPopupContainer} open />);
expect(getPopupContainer).toHaveBeenCalled();
});

2
components/config-provider/__tests__/icon.test.tsx
View File

@ -11,7 +11,7 @@ describe('ConfigProvider.Icon', () => {
});
afterEach(() => {
document.querySelectorAll('style').forEach(style => {
document.querySelectorAll('style').forEach((style) => {
style.parentNode?.removeChild(style);
});
});

4
components/config-provider/__tests__/memo.test.tsx
View File

@ -25,7 +25,7 @@ describe('ConfigProvider', () => {
const spy = jest.fn();
const App: React.FC = () => {
const [pageHeader, setPageHeader] = useState({ ghost: true });
const [, forceRender] = React.useReducer(v => v + 1, 1);
const [, forceRender] = React.useReducer((v) => v + 1, 1);
return (
<ConfigProvider pageHeader={pageHeader}>
@ -58,7 +58,7 @@ describe('ConfigProvider', () => {
const spy = jest.fn();
const App: React.FC = () => {
const [pageHeader, setPageHeader] = useState({ ghost: true });
const [, forceRender] = React.useReducer(v => v + 1, 1);
const [, forceRender] = React.useReducer((v) => v + 1, 1);
return (
<ConfigProvider pageHeader={pageHeader}>

16
components/config-provider/cssVariables.tsx
View File

@ -46,19 +46,19 @@ export function getStyle(globalPrefixCls: string, theme: Theme) {
variables[`primary-${index + 1}`] = color;
});
// Deprecated
variables['primary-color-deprecated-l-35'] = formatColor(primaryColor, c => c.lighten(35));
variables['primary-color-deprecated-l-20'] = formatColor(primaryColor, c => c.lighten(20));
variables['primary-color-deprecated-t-20'] = formatColor(primaryColor, c => c.tint(20));
variables['primary-color-deprecated-t-50'] = formatColor(primaryColor, c => c.tint(50));
variables['primary-color-deprecated-f-12'] = formatColor(primaryColor, c =>
variables['primary-color-deprecated-l-35'] = formatColor(primaryColor, (c) => c.lighten(35));
variables['primary-color-deprecated-l-20'] = formatColor(primaryColor, (c) => c.lighten(20));
variables['primary-color-deprecated-t-20'] = formatColor(primaryColor, (c) => c.tint(20));
variables['primary-color-deprecated-t-50'] = formatColor(primaryColor, (c) => c.tint(50));
variables['primary-color-deprecated-f-12'] = formatColor(primaryColor, (c) =>
c.setAlpha(c.getAlpha() * 0.12),
);
const primaryActiveColor = new TinyColor(primaryColors[0]);
variables['primary-color-active-deprecated-f-30'] = formatColor(primaryActiveColor, c =>
variables['primary-color-active-deprecated-f-30'] = formatColor(primaryActiveColor, (c) =>
c.setAlpha(c.getAlpha() * 0.3),
);
variables['primary-color-active-deprecated-d-02'] = formatColor(primaryActiveColor, c =>
variables['primary-color-active-deprecated-d-02'] = formatColor(primaryActiveColor, (c) =>
c.darken(2),
);
}
@ -85,7 +85,7 @@ export function getStyle(globalPrefixCls: string, theme: Theme) {
// Convert to css variables
const cssList = Object.keys(variables).map(
key => `--${globalPrefixCls}-${key}: ${variables[key]};`,
(key) => `--${globalPrefixCls}-${key}: ${variables[key]};`,
);
return `

2
components/config-provider/demo/direction.tsx
View File

@ -113,7 +113,7 @@ const Page: React.FC<{ popupPlacement: Placement }> = ({ popupPlacement }) => {
// ==== Cascader ====
const cascaderFilter = (inputValue: string, path: { label: string }[]) =>
path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
const onCascaderChange = (value: any) => {
console.log(value);

2
components/config-provider/demo/size.tsx
View File

@ -22,7 +22,7 @@ const App: React.FC = () => {
<div>
<Radio.Group
value={componentSize}
onChange={e => {
onChange={(e) => {
setComponentSize(e.target.value);
}}
>

7
components/date-picker/__tests__/DatePicker.test.tsx
View File

@ -165,7 +165,12 @@ describe('DatePicker', () => {
});
it('showTime should work correctly when format is custom function', () => {
const { container } = render(
<DatePicker defaultValue={dayjs()} showTime format={val => val.format('YYYY-MM-DD')} open />,
<DatePicker
defaultValue={dayjs()}
showTime
format={(val) => val.format('YYYY-MM-DD')}
open
/>,
);
const fuousEvent = () => {
fireEvent.focus(container.querySelector('input')!);

8
components/date-picker/__tests__/type.test.tsx
View File

@ -7,7 +7,7 @@ describe('DatePicker.typescript', () => {
it('DatePicker ref methods', () => {
const datePicker = (
<DatePicker
ref={picker => {
ref={(picker) => {
picker?.focus();
picker?.blur();
}}
@ -23,7 +23,7 @@ describe('DatePicker.typescript', () => {
));
const datePicker = (
<MyDatePicker
ref={picker => {
ref={(picker) => {
picker?.focus();
picker?.blur();
}}
@ -35,7 +35,7 @@ describe('DatePicker.typescript', () => {
it('RangePicker ref methods', () => {
const rangePicker = (
<DatePicker.RangePicker
ref={picker => {
ref={(picker) => {
picker?.focus();
picker?.blur();
}}
@ -50,7 +50,7 @@ describe('DatePicker.typescript', () => {
));
const datePicker = (
<MyRangePicker
ref={picker => {
ref={(picker) => {
picker?.focus();
picker?.blur();
}}

2
components/date-picker/__tests__/utils.ts
View File

@ -13,7 +13,7 @@ export function closePicker(wrapper: ReturnType<typeof render>, index = 0) {
export function selectCell(wrapper: ReturnType<typeof render>, text: string | number, index = 0) {
let matchCell: HTMLTableCellElement | null = null;
const tds = wrapper.container?.querySelectorAll('table')?.[index]?.querySelectorAll('td');
tds.forEach(td => {
tds.forEach((td) => {
if (td.querySelector('div')?.innerHTML === String(text) && td.className.includes('-in-view')) {
matchCell = td;
fireEvent.click(td);

4
components/date-picker/demo/date-render.tsx
View File

@ -6,7 +6,7 @@ const { RangePicker } = DatePicker;
const App: React.FC = () => (
<Space direction="vertical" size={12}>
<DatePicker
dateRender={current => {
dateRender={(current) => {
const style: React.CSSProperties = {};
if (current.date() === 1) {
style.border = '1px solid #1890ff';
@ -20,7 +20,7 @@ const App: React.FC = () => (
}}
/>
<RangePicker
dateRender={current => {
dateRender={(current) => {
const style: React.CSSProperties = {};
if (current.date() === 1) {
style.border = '1px solid #1890ff';

2
components/date-picker/demo/disabled-date.tsx
View File

@ -17,7 +17,7 @@ const range = (start: number, end: number) => {
};
// eslint-disable-next-line arrow-body-style
const disabledDate: RangePickerProps['disabledDate'] = current => {
const disabledDate: RangePickerProps['disabledDate'] = (current) => {
// Can not select days before today and today
return current && current < dayjs().endOf('day');
};

4
components/date-picker/demo/format.tsx
View File

@ -14,10 +14,10 @@ const monthFormat = 'YYYY/MM';
const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];
const customFormat: DatePickerProps['format'] = value =>
const customFormat: DatePickerProps['format'] = (value) =>
`custom format: ${value.format(dateFormat)}`;
const customWeekStartEndFormat: DatePickerProps['format'] = value =>
const customWeekStartEndFormat: DatePickerProps['format'] = (value) =>
`${dayjs(value).startOf('week').format(weekFormat)} ~ ${dayjs(value)
.endOf('week')
.format(weekFormat)}`;

Some files were not shown because too many files have changed in this diff Show More