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