refactor(ui): no longer use cloneElement to change action

Use `cloneElement` that mean must provide specified element, this does not apply to components like upload. BREAKING CHANGE: provide action components
DevCloudFE · Dec 13, 2022 · e07e107 · e07e107
1 parent 8eb70ca
commit e07e107
Show file tree

Hide file tree

Showing 23 changed files with 174 additions and 67 deletions.
diff --git a/packages/ui/src/components/card/Card.tsx b/packages/ui/src/components/card/Card.tsx
@@ -5,6 +5,7 @@ import { getClassName } from '@react-devui/utils';
 import { registerComponentMate } from '../../utils';
 import { useComponentConfig, usePrefixConfig } from '../root';
 import { DSeparator } from '../separator';
+import { DCardAction } from './CardAction';
 import { DCardContent } from './CardContent';
 import { DCardHeader } from './CardHeader';
 
@@ -17,6 +18,7 @@ export interface DCardProps extends React.HTMLAttributes<HTMLDivElement> {
 const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DCard' as const });
 export const DCard: {
   (props: DCardProps): JSX.Element | null;
+  Action: typeof DCardAction;
   Header: typeof DCardHeader;
   Content: typeof DCardContent;
 } = (props) => {
@@ -45,11 +47,9 @@ export const DCard: {
       {children}
       {dActions && (
         <div className={`${dPrefix}card__actions`}>
-          {React.Children.map(dActions as any[], (action, index) => (
+          {React.Children.map(dActions, (action, index) => (
             <>
-              {React.cloneElement(action, {
-                className: getClassName(action.props.className, `${dPrefix}card__action`),
-              })}
+              {action}
               {index !== dActions.length - 1 && <DSeparator style={{ margin: 8 }} dVertical></DSeparator>}
             </>
           ))}
@@ -59,5 +59,6 @@ export const DCard: {
   );
 };
 
+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
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { getClassName } from '@react-devui/utils';
+
+import { registerComponentMate } from '../../utils';
+import { useComponentConfig, usePrefixConfig } from '../root';
+
+export type DCardActionProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DCard.Action' as const });
+function CardAction(props: DCardActionProps, ref: React.ForwardedRef<HTMLButtonElement>): JSX.Element | null {
+  const {
+    children,
+
+    ...restProps
+  } = useComponentConfig(COMPONENT_NAME, props);
+
+  //#region Context
+  const dPrefix = usePrefixConfig();
+  //#endregion
+
+  return (
+    <button
+      {...restProps}
+      ref={ref}
+      className={getClassName(restProps.className, `${dPrefix}card__action`)}
+      type={restProps['type'] ?? 'button'}
+    >
+      {children}
+    </button>
+  );
+}
+
+export const DCardAction = React.forwardRef(CardAction);
diff --git a/packages/ui/src/components/card/demos/1.Basic.md b/packages/ui/src/components/card/demos/1.Basic.md
@@ -21,15 +21,15 @@ export default function Demo() {
     <DCard
       style={{ width: 300 }}
       dActions={[
-        <button title="edit">
+        <DCard.Action title="edit">
           <EditOutlined />
-        </button>,
-        <button title="delete">
+        </DCard.Action>,
+        <DCard.Action title="delete">
           <DeleteOutlined />
-        </button>,
-        <button title="more">
+        </DCard.Action>,
+        <DCard.Action title="more">
           <EllipsisOutlined />
-        </button>,
+        </DCard.Action>,
       ]}
     >
       <DCard.Header dAction={<DButton dType="link">More</DButton>}>Card title</DCard.Header>

diff --git a/packages/ui/src/components/card/demos/2.Style.md b/packages/ui/src/components/card/demos/2.Style.md
@@ -49,15 +49,15 @@ export default function Demo() {
         dBorder={border}
         dShadow={shadow}
         dActions={[
-          <button title="edit">
+          <DCard.Action title="edit">
             <EditOutlined />
-          </button>,
-          <button title="delete">
+          </DCard.Action>,
+          <DCard.Action title="delete">
             <DeleteOutlined />
-          </button>,
-          <button title="more">
+          </DCard.Action>,
+          <DCard.Action title="more">
             <EllipsisOutlined />
-          </button>,
+          </DCard.Action>,
         ]}
       >
         <DCard.Content>

diff --git a/packages/ui/src/components/card/demos/3.Media.md b/packages/ui/src/components/card/demos/3.Media.md
@@ -21,15 +21,15 @@ export default function Demo() {
     <DCard
       style={{ width: 300 }}
       dActions={[
-        <button title="edit">
+        <DCard.Action title="edit">
           <EditOutlined />
-        </button>,
-        <button title="delete">
+        </DCard.Action>,
+        <DCard.Action title="delete">
           <DeleteOutlined />
-        </button>,
-        <button title="more">
+        </DCard.Action>,
+        <DCard.Action title="more">
           <EllipsisOutlined />
-        </button>,
+        </DCard.Action>,
       ]}
     >
       <div style={{ margin: '-1px -1px 0 -1px' }}>

diff --git a/packages/ui/src/components/card/index.ts b/packages/ui/src/components/card/index.ts
@@ -1,3 +1,4 @@
 export * from './Card';
+export * from './CardAction';
 export * from './CardHeader';
 export * from './CardContent';
diff --git a/packages/ui/src/components/image/Image.tsx b/packages/ui/src/components/image/Image.tsx
@@ -3,8 +3,9 @@ import React, { useRef } from 'react';
 import { useForceUpdate } from '@react-devui/hooks';
 import { getClassName } from '@react-devui/utils';
 
-import { cloneHTMLElement, registerComponentMate } from '../../utils';
+import { registerComponentMate } from '../../utils';
 import { useComponentConfig, usePrefixConfig } from '../root';
+import { DImageAction } from './ImageAction';
 import { DImagePreview } from './ImagePreview';
 
 export interface DImageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
@@ -17,6 +18,7 @@ export interface DImageProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
 const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DImage' as const });
 export const DImage: {
   (props: DImageProps): JSX.Element | null;
+  Action: typeof DImageAction;
   Preview: typeof DImagePreview;
 } = (props) => {
   const {
@@ -83,17 +85,10 @@ export const DImage: {
           }}
         />
       }
-      {dActions && (
-        <div className={`${dPrefix}image__actions`}>
-          {React.Children.map(dActions, (action) =>
-            cloneHTMLElement(action, {
-              className: getClassName(action.props.className, `${dPrefix}image__action`),
-            })
-          )}
-        </div>
-      )}
+      {dActions && <div className={`${dPrefix}image__actions`}>{React.Children.map(dActions, (action) => action)}</div>}
     </div>
   );
 };
 
+DImage.Action = DImageAction;
 DImage.Preview = DImagePreview;
diff --git a/packages/ui/src/components/image/ImageAction.tsx b/packages/ui/src/components/image/ImageAction.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { getClassName } from '@react-devui/utils';
+
+import { registerComponentMate } from '../../utils';
+import { useComponentConfig, usePrefixConfig } from '../root';
+
+export type DImageActionProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DImage.Action' as const });
+function ImageAction(props: DImageActionProps, ref: React.ForwardedRef<HTMLButtonElement>): JSX.Element | null {
+  const {
+    children,
+
+    ...restProps
+  } = useComponentConfig(COMPONENT_NAME, props);
+
+  //#region Context
+  const dPrefix = usePrefixConfig();
+  //#endregion
+
+  return (
+    <button
+      {...restProps}
+      ref={ref}
+      className={getClassName(restProps.className, `${dPrefix}image__action`)}
+      type={restProps['type'] ?? 'button'}
+    >
+      {children}
+    </button>
+  );
+}
+
+export const DImageAction = React.forwardRef(ImageAction);
diff --git a/packages/ui/src/components/image/demos/3.Actions.md b/packages/ui/src/components/image/demos/3.Actions.md
@@ -22,15 +22,15 @@ export default function Demo() {
       style={{ height: 100 }}
       dImgProps={{ src: '/assets/imgs/image-1.jpg', alt: 'demo' }}
       dActions={[
-        <button title="edit">
+        <DImage.Action title="edit">
           <EditOutlined />
-        </button>,
-        <button title="delete">
+        </DImage.Action>,
+        <DImage.Action title="delete">
           <DeleteOutlined />
-        </button>,
-        <button title="more">
+        </DImage.Action>,
+        <DImage.Action title="more">
           <EllipsisOutlined />
-        </button>,
+        </DImage.Action>,
       ]}
     ></DImage>
   );

diff --git a/packages/ui/src/components/image/demos/4.Preview.md b/packages/ui/src/components/image/demos/4.Preview.md
@@ -35,15 +35,15 @@ export default function Demo() {
           style={{ height: 100 }}
           dImgProps={props}
           dActions={[
-            <button
+            <DImage.Action
               className="button"
               onClick={() => {
                 setVisible(true);
               }}
             >
               <EyeOutlined />
               {index !== 3 && <span>Preview</span>}
-            </button>,
+            </DImage.Action>,
           ]}
           onClick={() => {
             setActive(index);

diff --git a/packages/ui/src/components/image/index.ts b/packages/ui/src/components/image/index.ts
@@ -1,2 +1,3 @@
 export * from './Image';
+export * from './ImageAction';
 export * from './ImagePreview';
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, DCardHeaderProps, DCardContentProps } from './card';
+export type { DCardProps, DCardActionProps, DCardHeaderProps, DCardContentProps } from './card';
 export { DCard } from './card';
 
 export type { DCascaderProps } from './cascader';
@@ -55,7 +55,7 @@ export { DFab, DFabButton, DFabBacktop } from './fab';
 export type { DFormProps, DFormItemProps, DFormGroupProps } from './form';
 export { DForm, useForm, FormControl, FormGroup, Validators } from './form';
 
-export type { DImageProps, DImagePreviewProps } from './image';
+export type { DImageProps, DImageActionProps, DImagePreviewProps } from './image';
 export { DImage } from './image';
 
 export type { DInputProps } from './input';
@@ -115,6 +115,7 @@ export { DSwitch } from './switch';
 export type {
   DTableProps,
   DTableThProps,
+  DTableThActionProps,
   DTableTdProps,
   DTableEmptyProps,
   DTableFilterProps,

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, DCardHeaderProps, DCardContentProps } from '../card';
+import type { DCardProps, DCardActionProps, DCardHeaderProps, DCardContentProps } from '../card';
 import type { DCascaderProps } from '../cascader';
 import type { DCheckboxProps, DCheckboxGroupProps } from '../checkbox';
 import type { DComposeProps, DComposeItemProps } from '../compose';
@@ -19,7 +19,7 @@ import type { DDropdownProps } from '../dropdown';
 import type { DEmptyProps } from '../empty';
 import type { DFabProps, DFabButtonProps, DFabBacktopProps } from '../fab';
 import type { DFormProps, DFormGroupProps, DFormItemProps } from '../form';
-import type { DImageProps, DImagePreviewProps } from '../image';
+import type { DImageProps, DImageActionProps, DImagePreviewProps } from '../image';
 import type { DInputProps } from '../input';
 import type { DMenuProps } from '../menu';
 import type { DModalProps, DModalHeaderProps, DModalFooterProps } from '../modal';
@@ -40,6 +40,7 @@ import type { DSwitchProps } from '../switch';
 import type {
   DTableProps,
   DTableThProps,
+  DTableThActionProps,
   DTableTdProps,
   DTableEmptyProps,
   DTableFilterProps,
@@ -76,6 +77,7 @@ export type DComponentConfig = {
   DBreadcrumb: DBreadcrumbProps<any, any>;
   DButton: DButtonProps;
   DCard: DCardProps;
+  'DCard.Action': DCardActionProps;
   'DCard.Header': DCardHeaderProps;
   'DCard.Content': DCardContentProps;
   DCascader: DCascaderProps<any, any>;
@@ -96,6 +98,7 @@ export type DComponentConfig = {
   'DForm.Group': DFormGroupProps;
   'DForm.Item': DFormItemProps<any>;
   DImage: DImageProps;
+  'DImage.Action': DImageActionProps;
   'DImage.Preview': DImagePreviewProps;
   DInput: DInputProps;
   DMenu: DMenuProps<any, any>;
@@ -121,6 +124,7 @@ export type DComponentConfig = {
   DSwitch: DSwitchProps;
   DTable: DTableProps;
   'DTable.Th': DTableThProps;
+  'DTable.ThAction': DTableThActionProps;
   'DTable.Td': DTableTdProps;
   'DTable.Empty': DTableEmptyProps;
   'DTable.Filter': DTableFilterProps<any, any>;

diff --git a/packages/ui/src/components/table/Table.tsx b/packages/ui/src/components/table/Table.tsx
@@ -11,6 +11,7 @@ import { DTableFilter } from './TableFilter';
 import { DTableSearch } from './TableSearch';
 import { DTableTd } from './TableTd';
 import { DTableTh } from './TableTh';
+import { DTableThAction } from './TableThAction';
 
 export interface DTableContextData {
   gFixed: ('left' | 'right')[];
@@ -100,6 +101,7 @@ function Table(props: DTableProps, ref: React.ForwardedRef<HTMLDivElement>): JSX
 export const DTable: {
   (props: DTableProps & React.RefAttributes<HTMLDivElement>): ReturnType<typeof Table>;
   Th: typeof DTableTh;
+  ThAction: typeof DTableThAction;
   Td: typeof DTableTd;
   Empty: typeof DTableEmpty;
   Filter: typeof DTableFilter;
@@ -108,6 +110,7 @@ export const DTable: {
 } = React.forwardRef(Table) as any;
 
 DTable.Th = DTableTh;
+DTable.ThAction = DTableThAction;
 DTable.Td = DTableTd;
 DTable.Empty = DTableEmpty;
 DTable.Filter = DTableFilter;

diff --git a/packages/ui/src/components/table/TableFilter.tsx b/packages/ui/src/components/table/TableFilter.tsx
@@ -17,6 +17,7 @@ import { DPopover } from '../popover';
 import { DRadio } from '../radio';
 import { useComponentConfig, usePrefixConfig, useTranslation } from '../root';
 import { DVirtualScroll } from '../virtual-scroll';
+import { DTableThAction } from './TableThAction';
 
 export interface DTableFilterRef {
   updatePosition: () => void;
@@ -368,14 +369,14 @@ function TableFilter<V extends DId, T extends DTableFilterItem<V>>(
       }}
       afterVisibleChange={afterVisibleChange}
     >
-      <button
+      <DTableThAction
         {...restProps}
         className={getClassName(restProps.className, {
           'is-active': hasSelected,
         })}
       >
         <FilterFilled dSize={12} />
-      </button>
+      </DTableThAction>
     </DPopover>
   );
 }