File size: 2,154 Bytes
ea35075 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
import React from 'react'
import * as AlertDialog from '@radix-ui/react-alert-dialog'
import NiceModal, { useModal } from '@ebay/nice-modal-react'
import { debounce } from 'lodash-es'
import classes from './styles.module.css'
const {
AlertDialogOverlay,
AlertDialogContent,
AlertDialogTitle,
'lds-roller': LdsRoller,
} = classes
function CSSLoading() {
return (
<div className={LdsRoller}>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
)
}
const Loading = NiceModal.create<{ title: string }>(
({ title }: { title: string }) => {
const modal = useLoading()
return (
<AlertDialog.Root defaultOpen={true} open={modal.visible}>
<AlertDialog.Portal>
<AlertDialog.Overlay className={AlertDialogOverlay} />
<AlertDialog.Content className={AlertDialogContent}>
<AlertDialog.Title className={AlertDialogTitle}>
<CSSLoading></CSSLoading>
{title}
</AlertDialog.Title>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog.Root>
)
}
)
export function useLoading() {
return useModal(Loading)
}
declare type NiceModalArgs<T> = T extends
| keyof JSX.IntrinsicElements
| React.JSXElementConstructor<any>
? Omit<React.ComponentProps<T>, 'id'>
: Record<string, unknown>
export type ShowProps = NiceModalArgs<typeof Loading>
export function GetLoading(wait = 0) {
const show = debounce((props: ShowProps) => {
NiceModal.show(Loading, props)
}, wait)
return {
show: (props: ShowProps) => {
show(props)
},
hide: () => {
show.cancel()
HideLoading()
},
}
}
export function ShowLoading(props: ShowProps) {
NiceModal.show(Loading, props)
}
export function HideLoading() {
NiceModal.hide(Loading)
}
|