refactor(ui): add DCardActions

BREAKING CHANGE: adjust api of card's actions.
DevCloudFE · Mar 14, 2023 · 01176c2 · 01176c2
1 parent b83a36b
commit 01176c2
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 64 deletions.
diff --git a/packages/ui/src/components/card/Card.tsx b/packages/ui/src/components/card/Card.tsx
@@ -4,20 +4,20 @@ import { getClassName } from '@react-devui/utils';
 
 import { registerComponentMate } from '../../utils';
 import { useComponentConfig, usePrefixConfig } from '../root';
-import { DSeparator } from '../separator';
 import { DCardAction } from './CardAction';
+import { DCardActions } from './CardActions';
 import { DCardContent } from './CardContent';
 import { DCardHeader } from './CardHeader';
 
 export interface DCardProps extends React.HTMLAttributes<HTMLDivElement> {
   dBorder?: boolean;
   dShadow?: boolean | 'hover';
-  dActions?: React.ReactNode[];
 }
 
 const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DCard' as const });
 export const DCard: {
   (props: DCardProps): JSX.Element | null;
+  Actions: typeof DCardActions;
   Action: typeof DCardAction;
   Header: typeof DCardHeader;
   Content: typeof DCardContent;
@@ -26,7 +26,6 @@ export const DCard: {
     children,
     dBorder = true,
     dShadow = false,
-    dActions,
 
     ...restProps
   } = useComponentConfig(COMPONENT_NAME, props);
@@ -45,20 +44,11 @@ export const DCard: {
       })}
     >
       {children}
-      {dActions && (
-        <div className={`${dPrefix}card__actions`}>
-          {React.Children.map(dActions, (action, index) => (
-            <>
-              {action}
-              {index !== dActions.length - 1 && <DSeparator style={{ margin: 8 }} dVertical></DSeparator>}
-            </>
-          ))}
-        </div>
-      )}
     </div>
   );
 };
 
+DCard.Actions = DCardActions;
 DCard.Action = DCardAction;
 DCard.Header = DCardHeader;
 DCard.Content = DCardContent;
diff --git a/packages/ui/src/components/card/CardAction.tsx b/packages/ui/src/components/card/CardAction.tsx
@@ -5,10 +5,10 @@ import { getClassName } from '@react-devui/utils';
 import { registerComponentMate } from '../../utils';
 import { useComponentConfig, usePrefixConfig } from '../root';
 
-export type DCardActionProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+export type DCardActionProps = React.ButtonHTMLAttributes<HTMLDivElement>;
 
 const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DCard.Action' as const });
-function CardAction(props: DCardActionProps, ref: React.ForwardedRef<HTMLButtonElement>): JSX.Element | null {
+function CardAction(props: DCardActionProps, ref: React.ForwardedRef<HTMLDivElement>): JSX.Element | null {
   const {
     children,
 
@@ -20,14 +20,15 @@ function CardAction(props: DCardActionProps, ref: React.ForwardedRef<HTMLButtonE
   //#endregion
 
   return (
-    <button
+    <div
       {...restProps}
       ref={ref}
       className={getClassName(restProps.className, `${dPrefix}card__action`)}
-      type={restProps['type'] ?? 'button'}
+      role={restProps['role'] ?? 'button'}
+      tabIndex={restProps['tabIndex'] ?? 0}
     >
       {children}
-    </button>
+    </div>
   );
 }
 

diff --git a/packages/ui/src/components/card/CardActions.tsx b/packages/ui/src/components/card/CardActions.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { getClassName } from '@react-devui/utils';
+
+import { registerComponentMate } from '../../utils';
+import { useComponentConfig, usePrefixConfig } from '../root';
+import { DSeparator } from '../separator';
+
+export interface DCardActionsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+  dActions: React.ReactNode[];
+}
+
+const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DCard.Actions' as const });
+export function DCardActions(props: DCardActionsProps): JSX.Element | null {
+  const {
+    dActions,
+
+    ...restProps
+  } = useComponentConfig(COMPONENT_NAME, props);
+
+  //#region Context
+  const dPrefix = usePrefixConfig();
+  //#endregion
+
+  return (
+    <div {...restProps} className={getClassName(restProps.className, `${dPrefix}card__actions`)}>
+      {React.Children.map(dActions, (action, index) => (
+        <>
+          {action}
+          {index !== dActions.length - 1 && <DSeparator style={{ margin: 8 }} dVertical></DSeparator>}
+        </>
+      ))}
+    </div>
+  );
+}
diff --git a/packages/ui/src/components/card/demos/1.Basic.md b/packages/ui/src/components/card/demos/1.Basic.md
@@ -18,20 +18,7 @@ import { DCard, DButton } from '@react-devui/ui';
 
 export default function Demo() {
   return (
-    <DCard
-      style={{ width: 300 }}
-      dActions={[
-        <DCard.Action title="edit">
-          <EditOutlined />
-        </DCard.Action>,
-        <DCard.Action title="delete">
-          <DeleteOutlined />
-        </DCard.Action>,
-        <DCard.Action title="more">
-          <EllipsisOutlined />
-        </DCard.Action>,
-      ]}
-    >
+    <DCard style={{ width: 300 }}>
       <DCard.Header dAction={<DButton dType="link">More</DButton>}>Card title</DCard.Header>
       <DCard.Content>
         <div className="app-demo-text-container">
@@ -40,6 +27,19 @@ export default function Demo() {
           <div>Some contents...</div>
         </div>
       </DCard.Content>
+      <DCard.Actions
+        dActions={[
+          <DCard.Action title="edit">
+            <EditOutlined />
+          </DCard.Action>,
+          <DCard.Action title="delete">
+            <DeleteOutlined />
+          </DCard.Action>,
+          <DCard.Action title="more">
+            <EllipsisOutlined />
+          </DCard.Action>,
+        ]}
+      ></DCard.Actions>
     </DCard>
   );
 }

diff --git a/packages/ui/src/components/card/demos/2.Style.md b/packages/ui/src/components/card/demos/2.Style.md
@@ -44,29 +44,27 @@ export default function Demo() {
         onModelChange={setShadow}
       />
       <br />
-      <DCard
-        style={{ width: 300 }}
-        dBorder={border}
-        dShadow={shadow}
-        dActions={[
-          <DCard.Action title="edit">
-            <EditOutlined />
-          </DCard.Action>,
-          <DCard.Action title="delete">
-            <DeleteOutlined />
-          </DCard.Action>,
-          <DCard.Action title="more">
-            <EllipsisOutlined />
-          </DCard.Action>,
-        ]}
-      >
+      <DCard style={{ width: 300 }} dBorder={border} dShadow={shadow}>
         <DCard.Content>
           <div className="app-demo-text-container">
             <div>Some contents...</div>
             <div>Some contents...</div>
             <div>Some contents...</div>
           </div>
         </DCard.Content>
+        <DCard.Actions
+          dActions={[
+            <DCard.Action title="edit">
+              <EditOutlined />
+            </DCard.Action>,
+            <DCard.Action title="delete">
+              <DeleteOutlined />
+            </DCard.Action>,
+            <DCard.Action title="more">
+              <EllipsisOutlined />
+            </DCard.Action>,
+          ]}
+        ></DCard.Actions>
       </DCard>
     </>
   );

diff --git a/packages/ui/src/components/card/demos/3.Media.md b/packages/ui/src/components/card/demos/3.Media.md
@@ -18,20 +18,7 @@ import { DCard } from '@react-devui/ui';
 
 export default function Demo() {
   return (
-    <DCard
-      style={{ width: 300 }}
-      dActions={[
-        <DCard.Action title="edit">
-          <EditOutlined />
-        </DCard.Action>,
-        <DCard.Action title="delete">
-          <DeleteOutlined />
-        </DCard.Action>,
-        <DCard.Action title="more">
-          <EllipsisOutlined />
-        </DCard.Action>,
-      ]}
-    >
+    <DCard style={{ width: 300 }}>
       <div style={{ margin: '-1px -1px 0 -1px' }}>
         <img
           style={{ width: '100%', borderRadius: 'var(--rd-border-radius) var(--rd-border-radius) 0 0' }}
@@ -46,6 +33,19 @@ export default function Demo() {
           <div>Some contents...</div>
         </div>
       </DCard.Content>
+      <DCard.Actions
+        dActions={[
+          <DCard.Action title="edit">
+            <EditOutlined />
+          </DCard.Action>,
+          <DCard.Action title="delete">
+            <DeleteOutlined />
+          </DCard.Action>,
+          <DCard.Action title="more">
+            <EllipsisOutlined />
+          </DCard.Action>,
+        ]}
+      ></DCard.Actions>
     </DCard>
   );
 }

diff --git a/packages/ui/src/components/card/index.ts b/packages/ui/src/components/card/index.ts
@@ -1,4 +1,5 @@
 export * from './Card';
+export * from './CardActions';
 export * from './CardAction';
 export * from './CardHeader';
 export * from './CardContent';
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
@@ -25,7 +25,7 @@ export { DBreadcrumb } from './breadcrumb';
 export type { DButtonProps } from './button';
 export { DButton } from './button';
 
-export type { DCardProps, DCardActionProps, DCardHeaderProps, DCardContentProps } from './card';
+export type { DCardProps, DCardActionsProps, DCardActionProps, DCardHeaderProps, DCardContentProps } from './card';
 export { DCard } from './card';
 
 export type { DCascaderProps } from './cascader';

diff --git a/packages/ui/src/components/root/contex.ts b/packages/ui/src/components/root/contex.ts
@@ -9,7 +9,7 @@ import type { DAvatarProps } from '../avatar';
 import type { DBadgeProps } from '../badge';
 import type { DBreadcrumbProps } from '../breadcrumb';
 import type { DButtonProps } from '../button';
-import type { DCardProps, DCardActionProps, DCardHeaderProps, DCardContentProps } from '../card';
+import type { DCardProps, DCardActionsProps, DCardActionProps, DCardHeaderProps, DCardContentProps } from '../card';
 import type { DCascaderProps } from '../cascader';
 import type { DCheckboxProps, DCheckboxGroupProps } from '../checkbox';
 import type { DComposeProps, DComposeItemProps } from '../compose';
@@ -77,6 +77,7 @@ export type DComponentConfig = {
   DBreadcrumb: DBreadcrumbProps<any, any>;
   DButton: DButtonProps;
   DCard: DCardProps;
+  'DCard.Actions': DCardActionsProps;
   'DCard.Action': DCardActionProps;
   'DCard.Header': DCardHeaderProps;
   'DCard.Content': DCardContentProps;