local-it/dashboard
Archived
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Connected users with Kratos

Browse source
This commit is contained in:
Valentino 2021-12-21 14:55:46 +00:00 • committed by Maarten de Waard
parent b0af0de05b
commit 8da937d0c5
22 changed files with 479 additions and 228 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/components/Modal/Modal/Modal.tsx
View file

@ -10,8 +10,11 @@ export const Modal: React.FC<ModalProps> = ({
children,
title = '',
useCancelButton = false,
isLoading = false,
leftActions = <></>,
}) => {
const cancelButtonRef = useRef(null);
const saveButtonRef = useRef(null);
return (
<Transition.Root show={open} as={Fragment}>
@ -42,7 +45,25 @@ export const Modal: React.FC<ModalProps> = ({
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
<div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full relative">
{isLoading && (
<Dialog.Overlay className="inset-0 bg-gray-400 bg-opacity-75 transition-opacity absolute flex justify-center items-center">
<svg
className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
</svg>
</Dialog.Overlay>
)}
{!useCancelButton && (
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:items-center sm:justify-between">
<div>{title}</div>
@ -60,24 +81,28 @@ export const Modal: React.FC<ModalProps> = ({
<div className="bg-white px-4 p-6">{children}</div>
{onSave && (
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button
type="button"
className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm"
onClick={onSave}
>
Save Changes
</button>
{useCancelButton && (
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex">
{leftActions}
<div className="ml-auto sm:flex sm:flex-row-reverse">
<button
type="button"
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-200 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
onClick={onClose}
ref={cancelButtonRef}
className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm"
onClick={onSave}
ref={saveButtonRef}
>
Cancel
Save Changes
</button>
)}
{useCancelButton && (
<button
type="button"
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-200 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
onClick={onClose}
ref={cancelButtonRef}
>
Cancel
</button>
)}
</div>
</div>
)}
</div>

4
src/components/Modal/Modal/types.ts
View file

@ -1,7 +1,11 @@
import React from 'react';
export type ModalProps = {
open: boolean;
onClose: () => void;
title?: string;
onSave?: () => void;
useCancelButton?: boolean;
isLoading?: boolean;
leftActions?: React.ReactNode;
};