Skip to content

Commit e5038ed

Browse files
mengxinssfdmengxinssfd
authored
Merge pull request #113 from js-tool-pack/remove-defaultProps
Remove defaultProps
2 parents c75fa57 + caae0c0 commit e5038ed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+2658
-2632
lines changed

‎packages/components/src/alert/Alert.tsx

+49-51
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
import {
22
Close as CloseIcon,
3-
CircleWarningFill,
43
CircleSuccessFill,
4+
CircleWarningFill,
55
CircleCloseFill,
66
CircleInfoFill,
77
CircleInfo,
88
} from '@pkg/icons';
9+
import { mergeReactDefaultProps, getClasses } from '@pkg/shared';
910
import { CollapseTransition } from '~/collapse-transition';
10-
import type { RequiredPart } from '@tool-pack/types';
1111
import { getClassNames } from '@tool-pack/basic';
1212
import type { AlertProps } from './alert.types';
13-
import { getClasses } from '@pkg/shared';
1413
import React, { useState } from 'react';
1514
import { Button } from '~/button';
1615
import { Icon } from '~/icon';
@@ -34,58 +33,57 @@ const Icons: Record<Required<AlertProps>['type'], React.FC> = {
3433
primary: CircleInfo,
3534
};
3635

37-
export const Alert: React.FC<AlertProps> = React.forwardRef<
38-
HTMLDivElement,
39-
AlertProps
40-
>((props, ref) => {
41-
const { bordered, closable, children, onClose, attrs, title, icon, type } =
42-
props as RequiredPart<AlertProps, keyof typeof defaultProps>;
36+
export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
37+
(props, ref) => {
38+
const { bordered, closable, children, onClose, attrs, title, icon, type } =
39+
mergeReactDefaultProps(props, defaultProps);
4340

44-
const [visible, setVisible] = useState(true);
45-
const DefaultIcon = Icons[type];
41+
const [visible, setVisible] = useState(true);
42+
const DefaultIcon = Icons[type];
4643

47-
const Body = (
48-
<div
49-
{...attrs}
50-
className={getClassNames(cls.root, attrs?.className, {
51-
[`${cls.root}--${type}`]: type !== 'primary',
52-
[cls['--'].centered]: title && !children,
53-
[cls['--'].bordered]: bordered,
54-
})}
55-
ref={ref}
56-
>
57-
{icon !== null && (
58-
<Icon className={cls.__.icon}>{icon || <DefaultIcon />}</Icon>
59-
)}
60-
<div className={cls.__.content}>
61-
{title && <div className={cls.__.title}>{title}</div>}
62-
{children && <div className={cls.__.desc}>{children}</div>}
44+
const Body = (
45+
<div
46+
{...attrs}
47+
className={getClassNames(cls.root, attrs?.className, {
48+
[`${cls.root}--${type}`]: type !== 'primary',
49+
[cls['--'].centered]: title && !children,
50+
[cls['--'].bordered]: bordered,
51+
})}
52+
ref={ref}
53+
>
54+
{icon !== null && (
55+
<Icon className={cls.__.icon}>{icon || <DefaultIcon />}</Icon>
56+
)}
57+
<div className={cls.__.content}>
58+
{title && <div className={cls.__.title}>{title}</div>}
59+
{children && <div className={cls.__.desc}>{children}</div>}
60+
</div>
61+
{closable && (
62+
<Button
63+
className={cls.__['close-btn']}
64+
onClick={close}
65+
size="small"
66+
plain="text"
67+
>
68+
<Icon className={cls.__['close-icon']}>
69+
<CloseIcon />
70+
</Icon>
71+
</Button>
72+
)}
6373
</div>
64-
{closable && (
65-
<Button
66-
className={cls.__['close-btn']}
67-
onClick={close}
68-
size="small"
69-
plain="text"
70-
>
71-
<Icon className={cls.__['close-icon']}>
72-
<CloseIcon />
73-
</Icon>
74-
</Button>
75-
)}
76-
</div>
77-
);
74+
);
7875

79-
if (!closable) return Body;
80-
return <CollapseTransition>{visible && Body}</CollapseTransition>;
76+
if (!closable) return Body;
77+
return <CollapseTransition>{visible && Body}</CollapseTransition>;
8178

82-
function close(e: React.MouseEvent<HTMLButtonElement>) {
83-
if (!closable) return;
84-
onClose?.(e);
85-
if (e.isDefaultPrevented()) return;
86-
setVisible(false);
87-
}
88-
});
79+
function close(e: React.MouseEvent<HTMLButtonElement>) {
80+
if (!closable) return;
81+
onClose?.(e);
82+
if (e.isDefaultPrevented()) return;
83+
setVisible(false);
84+
}
85+
},
86+
);
8987

90-
Alert.defaultProps = defaultProps;
9188
Alert.displayName = 'Alert';
89+
Alert.defaultProps = defaultProps;

‎packages/components/src/button/Button.tsx

+9-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1-
import { getSizeClassName, getClasses } from '@pkg/shared';
1+
import {
2+
mergeReactDefaultProps,
3+
getSizeClassName,
4+
getClasses,
5+
} from '@pkg/shared';
26
import { ButtonContext } from '~/button/button.context';
3-
import type { RequiredPart } from '@tool-pack/types';
47
import type { ButtonProps } from './button.types';
58
import { getClassNames } from '@tool-pack/basic';
69
import { useBtnWave, useBtnIcon } from './hooks';
@@ -45,10 +48,10 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
4548
size,
4649
type,
4750
icon,
48-
} = { ...defaultProps, ...context, ...props } as RequiredPart<
49-
ButtonProps,
50-
keyof typeof defaultProps
51-
>;
51+
} = mergeReactDefaultProps(
52+
props,
53+
mergeReactDefaultProps(context, defaultProps),
54+
);
5255

5356
const [btnWave, activateWave] = useBtnWave(cls.root);
5457
const btnIcon = useBtnIcon(cls.root, icon, loading);

‎packages/components/src/button/ButtonGroup.tsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1+
import { mergeReactDefaultProps, getComponentClass } from '@pkg/shared';
12
import type { ButtonGroupProps, ButtonProps } from './button.types';
2-
import type { RequiredPart } from '@tool-pack/types';
33
import { getClassNames } from '@tool-pack/basic';
4-
import { getComponentClass } from '@pkg/shared';
54
import React from 'react';
65

76
const rootClass = getComponentClass('button-group');
@@ -13,8 +12,7 @@ export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
1312
attrs = {},
1413
children,
1514
size,
16-
} = props as RequiredPart<ButtonGroupProps, keyof typeof defaultProps>;
17-
15+
} = mergeReactDefaultProps(props, defaultProps);
1816
return (
1917
<div
2018
{...attrs}
@@ -72,4 +70,3 @@ function cloneChildren(
7270
}
7371

7472
ButtonGroup.displayName = 'ButtonGroup';
75-
ButtonGroup.defaultProps = defaultProps;

‎packages/components/src/calendar/Calendar.tsx

+56-58
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
mergeReactDefaultProps,
23
useFollowingState,
34
useStateRef,
45
getClasses,
@@ -9,7 +10,6 @@ import { CalendarHeader } from '~/calendar/components/Header';
910
import { useLocale } from '~/config-provider/useLocale';
1011
import type { CalendarProps } from './calendar.types';
1112
import { CalendarTable } from '~/calendar/components';
12-
import type { RequiredPart } from '@tool-pack/types';
1313
import EnUS from './locale/en-US';
1414
import React from 'react';
1515

@@ -20,67 +20,65 @@ const defaultProps = {
2020
firstDay: 0,
2121
} satisfies Partial<CalendarProps>;
2222

23-
export const Calendar: React.FC<CalendarProps> = React.forwardRef<
24-
HTMLDivElement,
25-
CalendarProps
26-
>((props, ref) => {
27-
const {
28-
locale: propsLocale,
29-
month: propsMonth,
30-
dateDisabled,
31-
attrs = {},
32-
firstDay,
33-
onChange,
34-
dateCell,
35-
header,
36-
today,
37-
value,
38-
} = props as RequiredPart<CalendarProps, keyof typeof defaultProps>;
23+
export const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(
24+
(props, ref) => {
25+
const {
26+
locale: propsLocale,
27+
month: propsMonth,
28+
dateDisabled,
29+
attrs = {},
30+
firstDay,
31+
onChange,
32+
dateCell,
33+
header,
34+
today,
35+
value,
36+
} = mergeReactDefaultProps(props, defaultProps);
3937

40-
const locale = Object.assign(useLocale('calendar', EnUS), propsLocale);
38+
const locale = Object.assign(useLocale('calendar', EnUS), propsLocale);
4139

42-
const [valueRef, setValueRef] = useStateRef(value);
43-
const [month, setMonth] = useFollowingState(
44-
propsMonth,
45-
(v) => v || getStartOfMonth(value || today || new Date()),
46-
);
47-
useWatch(
48-
valueRef.current,
49-
(v) => v && !propsMonth && setMonth(getStartOfMonth(v)),
50-
);
40+
const [valueRef, setValueRef] = useStateRef(value);
41+
const [month, setMonth] = useFollowingState(
42+
propsMonth,
43+
(v) => v || getStartOfMonth(value || today || new Date()),
44+
);
45+
useWatch(
46+
valueRef.current,
47+
(v) => v && !propsMonth && setMonth(getStartOfMonth(v)),
48+
);
5149

52-
return (
53-
<div
54-
{...attrs}
55-
className={getClassNames(cls.root, attrs.className)}
56-
ref={ref}
57-
>
58-
{header && (
59-
<CalendarHeader
60-
onMonthChange={setMonth}
61-
onChange={setValue}
62-
locale={locale}
50+
return (
51+
<div
52+
{...attrs}
53+
className={getClassNames(cls.root, attrs.className)}
54+
ref={ref}
55+
>
56+
{header && (
57+
<CalendarHeader
58+
onMonthChange={setMonth}
59+
onChange={setValue}
60+
locale={locale}
61+
today={today}
62+
value={month}
63+
/>
64+
)}
65+
<CalendarTable
66+
weekDayNames={locale.weekDayNames}
67+
dateDisabled={dateDisabled}
68+
value={valueRef.current}
69+
firstDay={firstDay}
70+
setValue={setValue}
71+
dateCell={dateCell}
72+
month={month}
6373
today={today}
64-
value={month}
6574
/>
66-
)}
67-
<CalendarTable
68-
weekDayNames={locale.weekDayNames}
69-
dateDisabled={dateDisabled}
70-
value={valueRef.current}
71-
firstDay={firstDay}
72-
setValue={setValue}
73-
dateCell={dateCell}
74-
month={month}
75-
today={today}
76-
/>
77-
</div>
78-
);
79-
function setValue(value: Date): void {
80-
setValueRef(value);
81-
onChange?.(value);
82-
}
83-
});
75+
</div>
76+
);
77+
function setValue(value: Date): void {
78+
setValueRef(value);
79+
onChange?.(value);
80+
}
81+
},
82+
);
8483

85-
Calendar.defaultProps = defaultProps;
8684
Calendar.displayName = 'Calendar';

‎packages/components/src/calendar/components/Header.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,10 @@ const cls = getClasses('calendar-header', ['month'], []);
1818
const defaultProps = {} satisfies Partial<Props>;
1919

2020
export const CalendarHeader: React.FC<Props> = (props) => {
21-
const { onMonthChange, onChange, locale, today, value } =
22-
props as RequiredPart<Props, keyof typeof defaultProps>;
21+
const { onMonthChange, onChange, locale, today, value } = {
22+
...defaultProps,
23+
...props,
24+
} as RequiredPart<Props, keyof typeof defaultProps>;
2325

2426
const monthStr = useMemo(() => {
2527
const ym = [
@@ -63,5 +65,3 @@ export const CalendarHeader: React.FC<Props> = (props) => {
6365
onMonthChange(dateAdd(value, offset, 'month'));
6466
}
6567
};
66-
67-
CalendarHeader.defaultProps = defaultProps;

‎packages/components/src/collapse-transition/CollapseTransition.tsx

+5-7
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,19 @@ import {
55
Transition,
66
} from '../transition';
77
import type { CollapseTransitionProps } from './collapse-transition.types';
8+
import { mergeReactDefaultProps, getComponentClass } from '@pkg/shared';
89
import React, { useCallback, useMemo, useRef } from 'react';
9-
import type { RequiredPart } from '@tool-pack/types';
1010
import { getClassNames } from '@tool-pack/basic';
11-
import { getComponentClass } from '@pkg/shared';
1211

1312
const rootName = getComponentClass('collapse-transition');
1413

1514
export const CollapseTransition: React.FC<CollapseTransitionProps> = (
1615
props,
1716
) => {
18-
const { children, width, on, ...rest } = props as RequiredPart<
19-
CollapseTransitionProps,
20-
keyof typeof defaultProps
21-
>;
17+
const { children, width, on, ...rest } = mergeReactDefaultProps(
18+
props,
19+
defaultProps,
20+
);
2221
const memorizedSize = useRef('');
2322

2423
const sizeType: 'maxHeight' | 'maxWidth' = useMemo(
@@ -125,5 +124,4 @@ export const CollapseTransition: React.FC<CollapseTransitionProps> = (
125124
};
126125

127126
const defaultProps = {} satisfies Partial<CollapseTransitionProps>;
128-
CollapseTransition.defaultProps = defaultProps;
129127
CollapseTransition.displayName = 'CollapseTransition';

0 commit comments

Comments
 (0)