p-sw/pswui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: apply slot in Dialog

Browse Source
This commit is contained in:
p-sw 2024-05-24 22:03:41 +09:00
parent 27c4ab0470
commit 7977ac5038
1 changed files with 15 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
packages/react/components/Dialog.tsx
View File

@ -1,10 +1,5 @@
import React, {
Dispatch,
MouseEventHandler,
SetStateAction,
useState,
} from "react";
import { VariantProps, vcn } from "..//shared";
import React, { Dispatch, SetStateAction, useState } from "react";
import { MustAsChild, Slot, VariantProps, vcn } from "../shared";
import ReactDOM from "react-dom";
/**
@ -56,20 +51,18 @@ const DialogRoot = ({ children }: DialogRootProps) => {
* =========================
*/
interface DialogTriggerProps {
children: Exclude<React.ReactNode, Iterable<React.ReactNode>>;
}
interface DialogTriggerProps extends MustAsChild {}
const DialogTrigger = ({ children }: DialogTriggerProps) => {
const [_, setState] = useDialogContext();
// const onClick = () => setState((p) => ({ ...p, opened: true }));
const onClick = () => setState((p) => ({ ...p, opened: true }));
const child = React.Children.only(children) as React.ReactElement;
const onClick: MouseEventHandler<HTMLButtonElement> = (e) => {
child.props.onClick?.(e);
setState((p) => ({ ...p, opened: true }));
const slotProps = {
onClick,
children,
};
return <>{React.cloneElement(child, { onClick })}</>;
return <Slot {...slotProps} />;
};
/**
@ -217,22 +210,18 @@ const DialogContent = React.forwardRef<HTMLDivElement, DialogContent>(
* =========================
*/
interface DialogCloseProps {
children: Exclude<React.ReactNode, Iterable<React.ReactNode>>;
}
interface DialogCloseProps extends MustAsChild {}
const DialogClose = ({ children }: DialogCloseProps) => {
const [_, setState] = useDialogContext();
// const onClick = () => setState((p) => ({ ...p, opened: false }));
const onClick = () => setState((p) => ({ ...p, opened: false }));
const child = React.Children.only(children) as React.ReactElement;
const onClick: MouseEventHandler<HTMLButtonElement> = (e) => {
child.props.onClick?.(e);
setState((p) => ({ ...p, opened: false }));
const slotProps = {
onClick,
children,
};
return <>{React.cloneElement(child, { onClick })}</>;
return <Slot {...slotProps} />;
};
/**