feat: parent child retrieval (#12106)
Signed-off-by: -LAN- <laipz8200@outlook.com> Co-authored-by: -LAN- <laipz8200@outlook.com>
This commit is contained in:
@@ -21,6 +21,7 @@ export type IToastProps = {
|
||||
children?: ReactNode
|
||||
onClose?: () => void
|
||||
className?: string
|
||||
customComponent?: ReactNode
|
||||
}
|
||||
type IToastContext = {
|
||||
notify: (props: IToastProps) => void
|
||||
@@ -35,6 +36,7 @@ const Toast = ({
|
||||
message,
|
||||
children,
|
||||
className,
|
||||
customComponent,
|
||||
}: IToastProps) => {
|
||||
const { close } = useToastContext()
|
||||
// sometimes message is react node array. Not handle it.
|
||||
@@ -49,8 +51,7 @@ const Toast = ({
|
||||
'top-0',
|
||||
'right-0',
|
||||
)}>
|
||||
<div className={`absolute inset-0 opacity-40 ${
|
||||
(type === 'success' && 'bg-[linear-gradient(92deg,rgba(23,178,106,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
|
||||
<div className={`absolute inset-0 opacity-40 -z-10 ${(type === 'success' && 'bg-[linear-gradient(92deg,rgba(23,178,106,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
|
||||
|| (type === 'warning' && 'bg-[linear-gradient(92deg,rgba(247,144,9,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
|
||||
|| (type === 'error' && 'bg-[linear-gradient(92deg,rgba(240,68,56,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
|
||||
|| (type === 'info' && 'bg-[linear-gradient(92deg,rgba(11,165,236,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
|
||||
@@ -63,14 +64,17 @@ const Toast = ({
|
||||
{type === 'warning' && <RiAlertFill className={`${size === 'md' ? 'w-5 h-5' : 'w-4 h-4'} text-text-warning-secondary`} aria-hidden="true" />}
|
||||
{type === 'info' && <RiInformation2Fill className={`${size === 'md' ? 'w-5 h-5' : 'w-4 h-4'} text-text-accent`} aria-hidden="true" />}
|
||||
</div>
|
||||
<div className={`flex py-1 ${size === 'md' ? 'px-1' : 'px-0.5'} flex-col items-start gap-1 flex-grow`}>
|
||||
<div className='text-text-primary system-sm-semibold'>{message}</div>
|
||||
<div className={`flex py-1 ${size === 'md' ? 'px-1' : 'px-0.5'} flex-col items-start gap-1 flex-grow z-10`}>
|
||||
<div className='flex items-center gap-1'>
|
||||
<div className='text-text-primary system-sm-semibold'>{message}</div>
|
||||
{customComponent}
|
||||
</div>
|
||||
{children && <div className='text-text-secondary system-xs-regular'>
|
||||
{children}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<ActionButton className='z-[1000]' onClick={close}>
|
||||
<ActionButton onClick={close}>
|
||||
<RiCloseLine className='w-4 h-4 flex-shrink-0 text-text-tertiary' />
|
||||
</ActionButton>
|
||||
</div>
|
||||
@@ -117,7 +121,8 @@ Toast.notify = ({
|
||||
message,
|
||||
duration,
|
||||
className,
|
||||
}: Pick<IToastProps, 'type' | 'size' | 'message' | 'duration' | 'className'>) => {
|
||||
customComponent,
|
||||
}: Pick<IToastProps, 'type' | 'size' | 'message' | 'duration' | 'className' | 'customComponent'>) => {
|
||||
const defaultDuring = (type === 'success' || type === 'info') ? 3000 : 6000
|
||||
if (typeof window === 'object') {
|
||||
const holder = document.createElement('div')
|
||||
@@ -133,7 +138,7 @@ Toast.notify = ({
|
||||
}
|
||||
},
|
||||
}}>
|
||||
<Toast type={type} size={size} message={message} duration={duration} className={className} />
|
||||
<Toast type={type} size={size} message={message} duration={duration} className={className} customComponent={customComponent} />
|
||||
</ToastContext.Provider>,
|
||||
)
|
||||
document.body.appendChild(holder)
|
||||
|
Reference in New Issue
Block a user