sprint-asia-custom-component 0.1.127 → 0.1.128
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +130 -50
- package/package.json +1 -1
- package/src/components/modal/modalLoading/index.js +56 -52
package/package.json
CHANGED
|
@@ -1,66 +1,70 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { Fragment, useRef} from
|
|
3
|
-
import { Dialog, Transition } from
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Fragment, useRef } from "react";
|
|
3
|
+
import { Dialog, Transition } from "@headlessui/react";
|
|
4
4
|
import { PiInfoDuotone } from "react-icons/pi";
|
|
5
5
|
|
|
6
6
|
const ModalLoading = (props) => {
|
|
7
|
-
const cancelButtonRef = useRef(null)
|
|
7
|
+
const cancelButtonRef = useRef(null);
|
|
8
8
|
|
|
9
9
|
function handleBackgroundClick(e) {
|
|
10
|
-
e.stopPropagation()
|
|
10
|
+
e.stopPropagation();
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
return (
|
|
14
14
|
<Transition.Root show={props.isOpen} as={Fragment}>
|
|
15
|
-
|
|
15
|
+
<Dialog
|
|
16
|
+
as="div"
|
|
17
|
+
className="relative z-10"
|
|
18
|
+
initialFocus={cancelButtonRef}
|
|
19
|
+
onClose={() => props.onClose || props.isOpen}
|
|
20
|
+
static={true}
|
|
21
|
+
>
|
|
22
|
+
<Transition.Child
|
|
23
|
+
as={Fragment}
|
|
24
|
+
enter="ease-out duration-300"
|
|
25
|
+
enterFrom="opacity-0"
|
|
26
|
+
enterTo="opacity-100"
|
|
27
|
+
leave="ease-in duration-200"
|
|
28
|
+
leaveFrom="opacity-100"
|
|
29
|
+
leaveTo="opacity-0"
|
|
30
|
+
>
|
|
31
|
+
<div className="fixed inset-0 bg-black bg-opacity-25 transition-opacity" onClick={handleBackgroundClick} />
|
|
32
|
+
</Transition.Child>
|
|
33
|
+
|
|
34
|
+
<div className="fixed inset-0 z-10 w-screen overflow-y-auto">
|
|
35
|
+
<div className="flex min-h-full items-center justify-center p-4 text-center sm:items-center sm:p-0">
|
|
16
36
|
<Transition.Child
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
37
|
+
as={Fragment}
|
|
38
|
+
enter="ease-out duration-300"
|
|
39
|
+
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
40
|
+
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
|
41
|
+
leave="ease-in duration-200"
|
|
42
|
+
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
|
43
|
+
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
24
44
|
>
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
>
|
|
39
|
-
|
|
40
|
-
<div className="bg-white px-4 pb-4 pt-5 sm:p-4">
|
|
41
|
-
<div className="sm:flex sm:items-start">
|
|
42
|
-
<div className="mx-auto flex h-12 w-16 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
|
|
43
|
-
<PiInfoDuotone className="h-8 w-8 text-primary500" aria-hidden="true" />
|
|
44
|
-
</div>
|
|
45
|
-
<div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
|
|
46
|
-
<Dialog.Title as="h3" className="text-base font-semibold leading-6 text-black">
|
|
47
|
-
{props.title}
|
|
48
|
-
</Dialog.Title>
|
|
49
|
-
<div className="mt-2">
|
|
50
|
-
<p className="text-sm text-black">
|
|
51
|
-
{props.subtitle}
|
|
52
|
-
</p>
|
|
53
|
-
</div>
|
|
54
|
-
</div>
|
|
55
|
-
</div>
|
|
56
|
-
</div>
|
|
57
|
-
</Dialog.Panel>
|
|
58
|
-
</Transition.Child>
|
|
45
|
+
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
|
|
46
|
+
<div className="bg-white px-4 pb-4 pt-5 sm:p-4">
|
|
47
|
+
<div className="sm:flex sm:items-start">
|
|
48
|
+
<div className="mx-auto flex h-12 w-16 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
|
|
49
|
+
<PiInfoDuotone className="h-8 w-8 text-primary500" aria-hidden="true" />
|
|
50
|
+
</div>
|
|
51
|
+
<div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
|
|
52
|
+
<Dialog.Title as="h3" className="text-base font-semibold leading-6 text-black">
|
|
53
|
+
{props.title}
|
|
54
|
+
</Dialog.Title>
|
|
55
|
+
<div className="mt-2">
|
|
56
|
+
<p className="text-sm text-black">{props.subtitle}</p>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
59
60
|
</div>
|
|
60
|
-
|
|
61
|
-
|
|
61
|
+
</Dialog.Panel>
|
|
62
|
+
</Transition.Child>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
</Dialog>
|
|
62
66
|
</Transition.Root>
|
|
63
|
-
)
|
|
64
|
-
}
|
|
67
|
+
);
|
|
68
|
+
};
|
|
65
69
|
|
|
66
|
-
export default ModalLoading
|
|
70
|
+
export default ModalLoading;
|