Skip to content

Commit 01176c2

Browse files
xiejay97xiejay97
committed
refactor(ui): add DCardActions
BREAKING CHANGE: adjust api of card's actions.
1 parent b83a36b commit 01176c2

9 files changed

Lines changed: 90 additions & 64 deletions

File tree

‎packages/ui/src/components/card/Card.tsx‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,20 @@ import { getClassName } from '@react-devui/utils';
44

55
import { registerComponentMate } from '../../utils';
66
import { useComponentConfig, usePrefixConfig } from '../root';
7-
import { DSeparator } from '../separator';
87
import { DCardAction } from './CardAction';
8+
import { DCardActions } from './CardActions';
99
import { DCardContent } from './CardContent';
1010
import { DCardHeader } from './CardHeader';
1111

1212
export interface DCardProps extends React.HTMLAttributes<HTMLDivElement> {
1313
dBorder?: boolean;
1414
dShadow?: boolean | 'hover';
15-
dActions?: React.ReactNode[];
1615
}
1716

1817
const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DCard' as const });
1918
export const DCard: {
2019
(props: DCardProps): JSX.Element | null;
20+
Actions: typeof DCardActions;
2121
Action: typeof DCardAction;
2222
Header: typeof DCardHeader;
2323
Content: typeof DCardContent;
@@ -26,7 +26,6 @@ export const DCard: {
2626
children,
2727
dBorder = true,
2828
dShadow = false,
29-
dActions,
3029

3130
...restProps
3231
} = useComponentConfig(COMPONENT_NAME, props);
@@ -45,20 +44,11 @@ export const DCard: {
4544
})}
4645
>
4746
{children}
48-
{dActions && (
49-
<div className={`${dPrefix}card__actions`}>
50-
{React.Children.map(dActions, (action, index) => (
51-
<>
52-
{action}
53-
{index !== dActions.length - 1 && <DSeparator style={{ margin: 8 }} dVertical></DSeparator>}
54-
</>
55-
))}
56-
</div>
57-
)}
5847
</div>
5948
);
6049
};
6150

51+
DCard.Actions = DCardActions;
6252
DCard.Action = DCardAction;
6353
DCard.Header = DCardHeader;
6454
DCard.Content = DCardContent;

‎packages/ui/src/components/card/CardAction.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ import { getClassName } from '@react-devui/utils';
55
import { registerComponentMate } from '../../utils';
66
import { useComponentConfig, usePrefixConfig } from '../root';
77

8-
export type DCardActionProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
8+
export type DCardActionProps = React.ButtonHTMLAttributes<HTMLDivElement>;
99

1010
const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DCard.Action' as const });
11-
function CardAction(props: DCardActionProps, ref: React.ForwardedRef<HTMLButtonElement>): JSX.Element | null {
11+
function CardAction(props: DCardActionProps, ref: React.ForwardedRef<HTMLDivElement>): JSX.Element | null {
1212
const {
1313
children,
1414

@@ -20,14 +20,15 @@ function CardAction(props: DCardActionProps, ref: React.ForwardedRef<HTMLButtonE
2020
//#endregion
2121

2222
return (
23-
<button
23+
<div
2424
{...restProps}
2525
ref={ref}
2626
className={getClassName(restProps.className, `${dPrefix}card__action`)}
27-
type={restProps['type'] ?? 'button'}
27+
role={restProps['role'] ?? 'button'}
28+
tabIndex={restProps['tabIndex'] ?? 0}
2829
>
2930
{children}
30-
</button>
31+
</div>
3132
);
3233
}
3334

‎packages/ui/src/components/card/CardActions.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react';
2+
3+
import { getClassName } from '@react-devui/utils';
4+
5+
import { registerComponentMate } from '../../utils';
6+
import { useComponentConfig, usePrefixConfig } from '../root';
7+
import { DSeparator } from '../separator';
8+
9+
export interface DCardActionsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
10+
dActions: React.ReactNode[];
11+
}
12+
13+
const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DCard.Actions' as const });
14+
export function DCardActions(props: DCardActionsProps): JSX.Element | null {
15+
const {
16+
dActions,
17+
18+
...restProps
19+
} = useComponentConfig(COMPONENT_NAME, props);
20+
21+
//#region Context
22+
const dPrefix = usePrefixConfig();
23+
//#endregion
24+
25+
return (
26+
<div {...restProps} className={getClassName(restProps.className, `${dPrefix}card__actions`)}>
27+
{React.Children.map(dActions, (action, index) => (
28+
<>
29+
{action}
30+
{index !== dActions.length - 1 && <DSeparator style={{ margin: 8 }} dVertical></DSeparator>}
31+
</>
32+
))}
33+
</div>
34+
);
35+
}

‎packages/ui/src/components/card/demos/1.Basic.md‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -18,20 +18,7 @@ import { DCard, DButton } from '@react-devui/ui';
1818

1919
export default function Demo() {
2020
return (
21-
<DCard
22-
style={{ width: 300 }}
23-
dActions={[
24-
<DCard.Action title="edit">
25-
<EditOutlined />
26-
</DCard.Action>,
27-
<DCard.Action title="delete">
28-
<DeleteOutlined />
29-
</DCard.Action>,
30-
<DCard.Action title="more">
31-
<EllipsisOutlined />
32-
</DCard.Action>,
33-
]}
34-
>
21+
<DCard style={{ width: 300 }}>
3522
<DCard.Header dAction={<DButton dType="link">More</DButton>}>Card title</DCard.Header>
3623
<DCard.Content>
3724
<div className="app-demo-text-container">
@@ -40,6 +27,19 @@ export default function Demo() {
4027
<div>Some contents...</div>
4128
</div>
4229
</DCard.Content>
30+
<DCard.Actions
31+
dActions={[
32+
<DCard.Action title="edit">
33+
<EditOutlined />
34+
</DCard.Action>,
35+
<DCard.Action title="delete">
36+
<DeleteOutlined />
37+
</DCard.Action>,
38+
<DCard.Action title="more">
39+
<EllipsisOutlined />
40+
</DCard.Action>,
41+
]}
42+
></DCard.Actions>
4343
</DCard>
4444
);
4545
}

‎packages/ui/src/components/card/demos/2.Style.md‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -44,29 +44,27 @@ export default function Demo() {
4444
onModelChange={setShadow}
4545
/>
4646
<br />
47-
<DCard
48-
style={{ width: 300 }}
49-
dBorder={border}
50-
dShadow={shadow}
51-
dActions={[
52-
<DCard.Action title="edit">
53-
<EditOutlined />
54-
</DCard.Action>,
55-
<DCard.Action title="delete">
56-
<DeleteOutlined />
57-
</DCard.Action>,
58-
<DCard.Action title="more">
59-
<EllipsisOutlined />
60-
</DCard.Action>,
61-
]}
62-
>
47+
<DCard style={{ width: 300 }} dBorder={border} dShadow={shadow}>
6348
<DCard.Content>
6449
<div className="app-demo-text-container">
6550
<div>Some contents...</div>
6651
<div>Some contents...</div>
6752
<div>Some contents...</div>
6853
</div>
6954
</DCard.Content>
55+
<DCard.Actions
56+
dActions={[
57+
<DCard.Action title="edit">
58+
<EditOutlined />
59+
</DCard.Action>,
60+
<DCard.Action title="delete">
61+
<DeleteOutlined />
62+
</DCard.Action>,
63+
<DCard.Action title="more">
64+
<EllipsisOutlined />
65+
</DCard.Action>,
66+
]}
67+
></DCard.Actions>
7068
</DCard>
7169
</>
7270
);

‎packages/ui/src/components/card/demos/3.Media.md‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -18,20 +18,7 @@ import { DCard } from '@react-devui/ui';
1818

1919
export default function Demo() {
2020
return (
21-
<DCard
22-
style={{ width: 300 }}
23-
dActions={[
24-
<DCard.Action title="edit">
25-
<EditOutlined />
26-
</DCard.Action>,
27-
<DCard.Action title="delete">
28-
<DeleteOutlined />
29-
</DCard.Action>,
30-
<DCard.Action title="more">
31-
<EllipsisOutlined />
32-
</DCard.Action>,
33-
]}
34-
>
21+
<DCard style={{ width: 300 }}>
3522
<div style={{ margin: '-1px -1px 0 -1px' }}>
3623
<img
3724
style={{ width: '100%', borderRadius: 'var(--rd-border-radius) var(--rd-border-radius) 0 0' }}
@@ -46,6 +33,19 @@ export default function Demo() {
4633
<div>Some contents...</div>
4734
</div>
4835
</DCard.Content>
36+
<DCard.Actions
37+
dActions={[
38+
<DCard.Action title="edit">
39+
<EditOutlined />
40+
</DCard.Action>,
41+
<DCard.Action title="delete">
42+
<DeleteOutlined />
43+
</DCard.Action>,
44+
<DCard.Action title="more">
45+
<EllipsisOutlined />
46+
</DCard.Action>,
47+
]}
48+
></DCard.Actions>
4949
</DCard>
5050
);
5151
}

‎packages/ui/src/components/card/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export * from './Card';
2+
export * from './CardActions';
23
export * from './CardAction';
34
export * from './CardHeader';
45
export * from './CardContent';

‎packages/ui/src/components/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export { DBreadcrumb } from './breadcrumb';
2525
export type { DButtonProps } from './button';
2626
export { DButton } from './button';
2727

28-
export type { DCardProps, DCardActionProps, DCardHeaderProps, DCardContentProps } from './card';
28+
export type { DCardProps, DCardActionsProps, DCardActionProps, DCardHeaderProps, DCardContentProps } from './card';
2929
export { DCard } from './card';
3030

3131
export type { DCascaderProps } from './cascader';

‎packages/ui/src/components/root/contex.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import type { DAvatarProps } from '../avatar';
99
import type { DBadgeProps } from '../badge';
1010
import type { DBreadcrumbProps } from '../breadcrumb';
1111
import type { DButtonProps } from '../button';
12-
import type { DCardProps, DCardActionProps, DCardHeaderProps, DCardContentProps } from '../card';
12+
import type { DCardProps, DCardActionsProps, DCardActionProps, DCardHeaderProps, DCardContentProps } from '../card';
1313
import type { DCascaderProps } from '../cascader';
1414
import type { DCheckboxProps, DCheckboxGroupProps } from '../checkbox';
1515
import type { DComposeProps, DComposeItemProps } from '../compose';
@@ -77,6 +77,7 @@ export type DComponentConfig = {
7777
DBreadcrumb: DBreadcrumbProps<any, any>;
7878
DButton: DButtonProps;
7979
DCard: DCardProps;
80+
'DCard.Actions': DCardActionsProps;
8081
'DCard.Action': DCardActionProps;
8182
'DCard.Header': DCardHeaderProps;
8283
'DCard.Content': DCardContentProps;

0 commit comments

Comments
 (0)