(Modal): move the close button

Author: msmx-mnakagawa

src/scripts/Modal.tsx

@@ -1,70 +1,30 @@
-import React, {
-  HTMLAttributes,
-  CSSProperties,
-  FC,
-  createContext,
-  useContext,
-  useMemo,
-  ReactNode,
-} from 'react';
+import React, { HTMLAttributes, CSSProperties, FC, ReactNode } from 'react';
 import classnames from 'classnames';
 import { Button } from './Button';
 import { Text } from './Text';
 import { useEventCallback } from './hooks';
 
-/**
- *
- */
-const ModalHandlersContext = createContext<{
-  onHide?: () => void;
-}>({});
-
 /**
  *
  */
 export type ModalHeaderProps = {
   className?: string;
   title?: string;
   tagline?: string;
-  closeButton?: boolean;
-  onClose?: () => void;
 };
 
 /**
  *
  */
 export const ModalHeader: FC<ModalHeaderProps> = (props) => {
-  const {
-    className,
-    title,
-    tagline,
-    closeButton,
-    onClose: onClose_,
-    ...rprops
-  } = props;
-  const { onHide: onHideModal } = useContext(ModalHandlersContext);
-  const onClose = useEventCallback(() => {
-    onClose_?.();
-    onHideModal?.();
-  });
+  const { className, title, tagline, ...rprops } = props;
   const hdClassNames = classnames(className, 'slds-modal__header');
   return (
     <div className={hdClassNames} {...rprops}>
       <Text tag='h2' category='heading' type='medium' tabIndex={-1}>
         {title}
       </Text>
       {tagline ? <p className='slds-m-top_x-small'>{tagline}</p> : null}
-      {closeButton ? (
-        <Button
-          type='icon-inverse'
-          className='slds-modal__close'
-          icon='close'
-          iconSize='large'
-          alt='Close'
-          inverse
-          onClick={onClose}
-        />
-      ) : null}
     </div>
   );
 };
@@ -131,6 +91,8 @@ export type ModalProps = {
   opened?: boolean;
   containerStyle?: CSSProperties;
   onHide?: () => void;
+  closeButton?: boolean;
+  onClose?: () => void;
 } & HTMLAttributes<HTMLDivElement>;
 
 /**
@@ -144,6 +106,8 @@ const Modal_: FC<ModalProps> = (props) => {
     size,
     containerStyle,
     onHide,
+    closeButton,
+    onClose: onClose_,
     ...rprops
   } = props;
   const modalClassNames = classnames(className, 'slds-modal', {
@@ -153,9 +117,12 @@ const Modal_: FC<ModalProps> = (props) => {
   const backdropClassNames = classnames(className, 'slds-backdrop', {
     'slds-backdrop_open': opened,
   });
-  const handlers = useMemo(() => ({ onHide }), [onHide]);
+  const onClose = useEventCallback(() => {
+    onClose_?.();
+    onHide?.();
+  });
   return (
-    <ModalHandlersContext.Provider value={handlers}>
+    <>
       <section
         className={modalClassNames}
         aria-hidden={!opened}
@@ -165,11 +132,22 @@ const Modal_: FC<ModalProps> = (props) => {
         {...rprops}
       >
         <div className='slds-modal__container' style={containerStyle}>
+          {closeButton ? (
+            <Button
+              type='icon-inverse'
+              className='slds-modal__close'
+              icon='close'
+              iconSize='large'
+              alt='Close'
+              inverse
+              onClick={onClose}
+            />
+          ) : null}
           {children}
         </div>
       </section>
       <div className={backdropClassNames} role='presentation' />
-    </ModalHandlersContext.Provider>
+    </>
   );
 };
 

stories/Modal.stories.tsx

@@ -142,10 +142,10 @@ export const Default: StoryObj<StoryProps> = {
   name: 'Default',
   args: {
     opened: true,
+    closeButton: true,
     childProps: {
       header: {
         title: 'Default Modal',
-        closeButton: true,
       },
       content: {
         className: 'slds-p-around_small',
@@ -171,11 +171,11 @@ export const Large: StoryObj<StoryProps> = {
   name: 'Large',
   args: {
     opened: true,
+    closeButton: true,
     size: 'large',
     childProps: {
       header: {
         title: 'Large Size Modal',
-        closeButton: true,
       },
       content: {
         className: 'slds-p-around_small',
@@ -201,11 +201,11 @@ export const WithTagline: StoryObj<StoryProps> = {
   name: 'With tagline',
   args: {
     opened: true,
+    closeButton: true,
     childProps: {
       header: {
         title: 'Modal with tagline',
         tagline: 'This is a tagline',
-        closeButton: true,
       },
       content: {
         className: 'slds-p-around_small',
@@ -231,10 +231,10 @@ export const FooterDirectional: StoryObj<StoryProps> = {
   name: 'Footer directional',
   args: {
     opened: true,
+    closeButton: true,
     childProps: {
       header: {
         title: 'Modal with directional footer',
-        closeButton: true,
       },
       content: {
         className: 'slds-p-around_small',
@@ -261,10 +261,10 @@ export const FormElements: StoryObj<StoryProps> = {
   name: 'Form elements',
   args: {
     opened: true,
+    closeButton: true,
     childProps: {
       header: {
         title: 'Modal Form',
-        closeButton: true,
       },
       content: {
         className: 'slds-p-around_small',