improve headers for dialogs and drawers

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 2.8.0 - 3/8/22
+- [feature] expose dialog header element
+- [feature] expose drawer header element
+
 # 2.7.1 - 1/31/22
 - [feature] add footer to dialogs
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "realayers",
-  "version": "2.7.1",
+  "version": "2.8.0",
   "description": "Layer Components for React - Dialogs, Drawers, Tooltips, Popovers",
   "scripts": {
     "build": "rollup -c",
@@ -30,7 +30,10 @@
     "tooltip",
     "dialog",
     "drawer",
-    "popover"
+    "popover",
+    "contextmenu",
+    "menu",
+    "notification"
   ],
   "license": "Apache-2.0",
   "bugs": {

src/Dialog/Dialog.story.tsx

@@ -18,6 +18,19 @@ export const Simple = () => {
   );
 };
 
+const CustomHeaderElement = () => <div>hello!</div>;
+
+export const CustomHeader = () => {
+  const { toggleOpen, Dialog } = useDialog();
+
+  return (
+    <div style={{ textAlign: 'center', width: '100%', margin: '50px' }}>
+      <button onClick={toggleOpen}>Open</button>
+      <Dialog headerElement={<CustomHeaderElement />}>Body Content</Dialog>
+    </div>
+  );
+};
+
 export const NoHeader = () => {
   const { toggleOpen, Dialog } = useDialog();
 

src/Dialog/Dialog.tsx

@@ -1,19 +1,21 @@
-import React, { FC } from 'react';
+import React, { FC, ReactElement } from 'react';
 import classNames from 'classnames';
-import { GlobalOverlay, GlobalOverlayProps, useId } from 'rdk';
+import { CloneElement, GlobalOverlay, GlobalOverlayProps, useId } from 'rdk';
 import FocusTrap from 'focus-trap-react';
 import { motion } from 'framer-motion';
 import css from './Dialog.module.css';
+import { DialogHeader, DialogHeaderProps } from './DialogHeader';
 
 export interface DialogProps extends Omit<GlobalOverlayProps, 'children'> {
   className?: string;
   innerClassName?: string;
-  header?: any;
   size?: string | number;
   showCloseButton?: boolean;
   children?: any;
   disablePadding?: boolean;
   footer?: any;
+  header?: any;
+  headerElement: ReactElement<DialogHeaderProps, typeof DialogHeader> | null;
 }
 
 export const Dialog: FC<Partial<DialogProps>> = ({
@@ -22,6 +24,7 @@ export const Dialog: FC<Partial<DialogProps>> = ({
   className,
   innerClassName,
   header,
+  headerElement,
   footer,
   onClose,
   size,
@@ -33,6 +36,8 @@ export const Dialog: FC<Partial<DialogProps>> = ({
 }) => {
   const id = useId();
 
+  console.log('here', headerElement);
+
   return (
     <GlobalOverlay
       open={open}
@@ -65,19 +70,14 @@ export const Dialog: FC<Partial<DialogProps>> = ({
                 className={classNames(css.inner, innerClassName)}
                 style={{ width: size }}
               >
-                {header && (
-                  <header className={css.header}>
-                    <h1 className={css.headerText}>{header}</h1>
-                    {showCloseButton && (
-                      <button
-                        type="button"
-                        className={css.closeButton}
-                        onClick={onClose}
-                      >
-                        ✕
-                      </button>
-                    )}
-                  </header>
+                {(header || headerElement) && (
+                  <CloneElement<DialogHeaderProps>
+                    element={headerElement}
+                    showCloseButton={showCloseButton}
+                    onClose={onClose}
+                  >
+                    {header}
+                  </CloneElement>
                 )}
                 <section id={`${id}-content`} className={css.content}>
                   {typeof children === 'function' ? children() : children}
@@ -99,4 +99,5 @@ Dialog.defaultProps = {
   showCloseButton: true,
   closeOnBackdropClick: true,
   closeOnEscape: true,
+  headerElement: <DialogHeader />,
 };

src/Dialog/DialogHeader.tsx

@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+import classNames from 'classnames';
+import css from './Dialog.module.css';
+
+export interface DialogHeaderProps {
+  children?: any;
+  className?: string;
+  showCloseButton?: boolean;
+  onClose?: () => void;
+}
+
+export const DialogHeader: FC<Partial<DialogHeaderProps>> = ({
+  children,
+  className,
+  showCloseButton,
+  onClose,
+}) => (
+  <header className={classNames(css.header, className)}>
+    <h1 className={css.headerText}>{children}</h1>
+    {showCloseButton && (
+      <button type="button" className={css.closeButton} onClick={onClose}>
+        ✕
+      </button>
+    )}
+  </header>
+);

src/Dialog/index.ts

@@ -1,2 +1,3 @@
 export * from './Dialog';
 export * from './useDialog';
+export * from './DialogHeader';

src/Drawer/Drawer.story.tsx

@@ -4,7 +4,7 @@ import { Drawer } from './Drawer';
 
 export default {
   title: 'Drawer',
-  component: Drawer
+  component: Drawer,
 };
 
 export const Simple = () => {
@@ -21,6 +21,22 @@ export const Simple = () => {
   );
 };
 
+const CustomHeaderElement = () => <div>hello!</div>;
+
+export const CustomHeader = () => {
+  const { toggleOpen, Drawer } = useDrawer();
+  return (
+    <Fragment>
+      <Drawer headerElement={<CustomHeaderElement />}>
+        <p>Hello There!</p>
+      </Drawer>
+      <button type="button" onClick={toggleOpen}>
+        Open
+      </button>
+    </Fragment>
+  );
+};
+
 export const Header = () => {
   const { toggleOpen, Drawer } = useDrawer();
   return (

src/Drawer/Drawer.tsx

@@ -1,10 +1,11 @@
-import React, { FC, ReactNode } from 'react';
+import React, { FC, ReactElement, ReactNode } from 'react';
 import classNames from 'classnames';
 import FocusTrap from 'focus-trap-react';
-import { GlobalOverlay, GlobalOverlayProps, useId } from 'rdk';
+import { CloneElement, GlobalOverlay, GlobalOverlayProps, useId } from 'rdk';
 import { motion } from 'framer-motion';
 import { variants } from './variants';
 import css from './Drawer.module.css';
+import { DrawerHeader, DrawerHeaderProps } from './DrawerHeader';
 
 export interface DrawerProps extends Omit<GlobalOverlayProps, 'children'> {
   position?: 'start' | 'end' | 'top' | 'bottom';
@@ -15,10 +16,12 @@ export interface DrawerProps extends Omit<GlobalOverlayProps, 'children'> {
   header?: any;
   showCloseButton?: boolean;
   children?: any;
+  headerElement: ReactElement<DrawerHeaderProps, typeof DrawerHeader> | null;
 }
 
 export const Drawer: FC<Partial<DrawerProps>> = ({
   className,
+  headerElement,
   children,
   open,
   backdropClassName,
@@ -73,21 +76,16 @@ export const Drawer: FC<Partial<DrawerProps>> = ({
                 [css.disablePadding]: disablePadding,
               })}
             >
-              {header && (
-                <header className={css.header}>
-                  <h1>{header}</h1>
-                  {showCloseButton && (
-                    <button
-                      type="button"
-                      className={css.closeButton}
-                      onClick={onClose}
-                    >
-                      ✕
-                    </button>
-                  )}
-                </header>
+              {(header || headerElement) && (
+                <CloneElement<DrawerHeaderProps>
+                  element={headerElement}
+                  showCloseButton={showCloseButton}
+                  onClose={onClose}
+                >
+                  {header}
+                </CloneElement>
               )}
-              {!header && showCloseButton && (
+              {!header && !headerElement && showCloseButton && (
                 <button
                   type="button"
                   className={classNames(
@@ -118,4 +116,5 @@ Drawer.defaultProps = {
   closeOnBackdropClick: true,
   disablePadding: false,
   showCloseButton: true,
+  headerElement: <DrawerHeader />,
 };

src/Drawer/DrawerHeader.tsx

@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+import classNames from 'classnames';
+import css from './Drawer.module.css';
+
+export interface DrawerHeaderProps {
+  children?: any;
+  className?: string;
+  showCloseButton?: boolean;
+  onClose?: () => void;
+}
+
+export const DrawerHeader: FC<Partial<DrawerHeaderProps>> = ({
+  children,
+  className,
+  showCloseButton,
+  onClose,
+}) => (
+  <header className={classNames(css.header, className)}>
+    <h1>{children}</h1>
+    {showCloseButton && (
+      <button type="button" className={css.closeButton} onClick={onClose}>
+        ✕
+      </button>
+    )}
+  </header>
+);

src/Drawer/index.ts

@@ -1,2 +1,3 @@
 export * from './Drawer';
 export * from './useDrawer';
+export * from './DrawerHeader';