Skip to content

Commit

Permalink
new/Modal: onCloseModal prop
Browse files Browse the repository at this point in the history
  • Loading branch information
abder committed Apr 17, 2024
1 parent a61bcdf commit e50738b
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 1 deletion.
13 changes: 12 additions & 1 deletion packages/ui/modal/src/modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,15 @@ export const ModalContext = createContext<ModalContextProps | null>(null)
// Build modal
const Modal = forwardRef<ModalActionsProps, ModalProps>(
(
{ id, size = "sm", _style, children, variant = "simple", _htmlProps },
{
id,
size = "sm",
_style,
children,
variant = "simple",
_htmlProps,
onCloseModal,
},
ref,
) => {
// generate id if not provided
Expand Down Expand Up @@ -56,6 +64,9 @@ const Modal = forwardRef<ModalActionsProps, ModalProps>(
// Remove lock class from body on close
document.body.classList.remove("sui-locked")

// onClose callback
if (onCloseModal) onCloseModal()

// Update open state
setIsOpen(false)
}, [])

Check warning on line 72 in packages/ui/modal/src/modal.tsx

View workflow job for this annotation

GitHub Actions / code-quality

React Hook useCallback has a missing dependency: 'onCloseModal'. Either include it or remove the dependency array. If 'onCloseModal' changes too often, find the parent component that defines it and wrap that definition in useCallback
Expand Down
1 change: 1 addition & 0 deletions packages/ui/modal/src/modal.types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ type ModalProps = {
variant?: "simple" | "advanced" | "app-connect" // Variant type of the modal
size?: "sm" | "md" | "lg" | "xl" // Size of the modal (small, medium, large, extra-large)
children?: React.ReactNode // Content of the modal (React children)
onCloseModal?: () => void // callback function to be called upon closing the modal
ref: object // Used to access the open and close modals of the modal
} & SuiStyleType &
SuiHTMLAttributes
Expand Down
4 changes: 4 additions & 0 deletions packages/ui/modal/stories/tabs/TabCode.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@ import { Section, Row, Col, Table, List, Code, Tag, PackageInstallGuide, PropSec
</List>
</PropSection>

<PropSection title="ref" type="object" isRequired={true}>
<p>A callback function to be invoked upon closing the modal, it could be used to reset the modal data for proExample=""</p>
</PropSection>

<PropSection title="children" type="React Node">
<p>Content of the modal</p>
</PropSection>
Expand Down

0 comments on commit e50738b

Please sign in to comment.