feat(ui): add modal component

close #41

Author: xiejay97

packages/site/src/app/styles/_app.scss

@@ -195,7 +195,8 @@ h3 {
   section[id^='Button'],
   section[id^='Dropdown'],
   section[id^='Notification'],
-  section[id^='Toast'] {
+  section[id^='Toast'],
+  section[id^='Modal'] {
     .d-button {
       margin-right: 8px;
       margin-bottom: 12px;

packages/ui/src/components/drawer/Drawer.tsx

@@ -12,6 +12,7 @@ import { usePrefixConfig, useComponentConfig, useElement, useLockScroll, useMaxI
 import { registerComponentMate, getClassName, toPx } from '../../utils';
 import { DMask } from '../_mask';
 import { DTransition } from '../_transition';
+import { DDrawerHeader } from './DrawerHeader';
 
 export interface DDrawerProps extends React.HTMLAttributes<HTMLDivElement> {
   dVisible: [boolean, DUpdater<boolean>?];
@@ -23,7 +24,7 @@ export interface DDrawerProps extends React.HTMLAttributes<HTMLDivElement> {
   dMask?: boolean;
   dMaskClosable?: boolean;
   dEscClosable?: boolean;
-  dHeader?: React.ReactElement<DDrawerHeaderProps>;
+  dHeader?: React.ReactElement<DDrawerHeaderProps> | string;
   dFooter?: React.ReactElement<DDrawerFooterProps>;
   dChildDrawer?: React.ReactElement<DDrawerProps>;
   onClose?: () => void;
@@ -205,6 +206,17 @@ export function DDrawer(props: DDrawerProps): JSX.Element | null {
     return null;
   })();
 
+  const headerNode = (() => {
+    if (dHeader) {
+      const node = isString(dHeader) ? <DDrawerHeader>{dHeader}</DDrawerHeader> : dHeader;
+      return React.cloneElement<DDrawerHeaderPropsWithPrivate>(node, {
+        ...node.props,
+        __id: headerId,
+        __onClose: closeDrawer,
+      });
+    }
+  })();
+
   const drawerNode = (
     <>
       <DTransition
@@ -231,7 +243,7 @@ export function DDrawer(props: DDrawerProps): JSX.Element | null {
             }}
             role="dialog"
             aria-modal="true"
-            aria-labelledby={dHeader ? headerId : undefined}
+            aria-labelledby={headerNode ? headerId : undefined}
             aria-describedby={contentId}
           >
             {dMask && (
@@ -260,12 +272,7 @@ export function DDrawer(props: DDrawerProps): JSX.Element | null {
                 }
               }}
             >
-              {dHeader &&
-                React.cloneElement<DDrawerHeaderPropsWithPrivate>(dHeader, {
-                  ...dHeader.props,
-                  __id: headerId,
-                  __onClose: closeDrawer,
-                })}
+              {headerNode}
               <div className={`${dPrefix}drawer__body`}>{children}</div>
               {dFooter &&
                 React.cloneElement<DDrawerFooterPropsWithPrivate>(dFooter, {

packages/ui/src/components/drawer/demos/2.Placement.md

@@ -15,7 +15,7 @@ Set the pop-up position through `dPlacement`.
 ```tsx
 import { useState } from 'react';
 
-import { DDrawer, DDrawerHeader, DButton } from '@react-devui/ui';
+import { DDrawer, DButton } from '@react-devui/ui';
 
 export default function Demo() {
   const [visible, setVisible] = useState(false);
@@ -44,7 +44,7 @@ export default function Demo() {
           <DButton onClick={() => handleClick('bottom')}>B</DButton>
         </div>
       </div>
-      <DDrawer dVisible={[visible, setVisible]} dPlacement={placement} dHeader={<DDrawerHeader>Placement Drawer</DDrawerHeader>}>
+      <DDrawer dVisible={[visible, setVisible]} dPlacement={placement} dHeader="Placement Drawer">
         <p>Some contents...</p>
         <p>Some contents...</p>
         <p>Some contents...</p>

packages/ui/src/components/drawer/demos/4.Nested.md

@@ -15,7 +15,7 @@ Nesting drawers through `dChildDrawer`.
 ```tsx
 import { useState } from 'react';
 
-import { DDrawer, DDrawerHeader, DButton } from '@react-devui/ui';
+import { DDrawer, DButton } from '@react-devui/ui';
 
 export default function Demo() {
   const [visible1, setVisible1] = useState(false);
@@ -32,9 +32,9 @@ export default function Demo() {
       </DButton>
       <DDrawer
         dVisible={[visible1, setVisible1]}
-        dHeader={<DDrawerHeader>Drawer1</DDrawerHeader>}
+        dHeader="Drawer1"
         dChildDrawer={
-          <DDrawer dVisible={[visible2, setVisible2]} dHeader={<DDrawerHeader>Drawer2</DDrawerHeader>}>
+          <DDrawer dVisible={[visible2, setVisible2]} dHeader="Drawer2">
             <p>Some contents...</p>
             <p>Some contents...</p>
             <p>Some contents...</p>

packages/ui/src/components/drawer/demos/5.Footer.md

@@ -15,7 +15,7 @@ Realize complex footer operations through the `DDrawerFooter` component.
 ```tsx
 import { useState } from 'react';
 
-import { DDrawer, DDrawerHeader, DDrawerFooter, DButton } from '@react-devui/ui';
+import { DDrawer, DDrawerFooter, DButton } from '@react-devui/ui';
 import { useAsync } from '@react-devui/ui/hooks';
 
 export default function Demo() {
@@ -34,7 +34,7 @@ export default function Demo() {
       </DButton>
       <DDrawer
         dVisible={[visible, setVisible]}
-        dHeader={<DDrawerHeader>Custom Footer</DDrawerHeader>}
+        dHeader="Custom Footer"
         dFooter={
           <DDrawerFooter
             dAlign="center"

packages/ui/src/components/index.ts

@@ -37,6 +37,9 @@ export { DInput } from './input';
 export type { DMenuProps } from './menu';
 export { DMenu } from './menu';
 
+export type { DModalProps, DModalHeaderProps, DModalFooterProps } from './modal';
+export { DModal, DModalHeader, DModalFooter } from './modal';
+
 export type { DNotificationProps } from './notification';
 export { NotificationService } from './notification';