added steps modal with next and previous buttons
- changes for improve app access setting flow
This commit is contained in:
Davor
parent
bc1a072515
commit
e830a095b8
12 changed files with 200 additions and 26 deletions
143
src/components/Modal/StepsModal/StepsModal.tsx
Normal file
143
src/components/Modal/StepsModal/StepsModal.tsx
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
import React, { Fragment, useRef } from 'react';
|
||||
import { Dialog, Transition } from '@headlessui/react';
|
||||
import { XIcon } from '@heroicons/react/solid';
|
||||
import { StepsModalProps } from './types';
|
||||
|
||||
export const StepsModal: React.FC<StepsModalProps> = ({
|
||||
open,
|
||||
onClose,
|
||||
onSave,
|
||||
onNext,
|
||||
onPrevious,
|
||||
children,
|
||||
title = '',
|
||||
useCancelButton = false,
|
||||
isLoading = false,
|
||||
leftActions = <></>,
|
||||
showSaveButton = false,
|
||||
showPreviousButton = false,
|
||||
saveButtonDisabled = false,
|
||||
}) => {
|
||||
const cancelButtonRef = useRef(null);
|
||||
const saveButtonRef = useRef(null);
|
||||
const nextButtonRef = useRef(null);
|
||||
const previousButtonRef = useRef(null);
|
||||
|
||||
return (
|
||||
<Transition.Root show={open} as={Fragment}>
|
||||
<Dialog as="div" className="fixed z-10 inset-0 overflow-y-auto" initialFocus={cancelButtonRef} onClose={() => {}}>
|
||||
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
{/* This element is to trick the browser into centering the modal contents. */}
|
||||
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
|
||||
​
|
||||
</span>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave="ease-in duration-200"
|
||||
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 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>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full inline-flex justify-center rounded-md border border-gray-200 p-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}
|
||||
>
|
||||
<XIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-white px-4 p-6">{children}</div>
|
||||
<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">
|
||||
{showSaveButton && onSave && (
|
||||
<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 ${
|
||||
saveButtonDisabled ? 'opacity-50' : ''
|
||||
}`}
|
||||
onClick={onSave}
|
||||
ref={saveButtonRef}
|
||||
disabled={saveButtonDisabled}
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
)}
|
||||
{!showSaveButton && (
|
||||
<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={onNext}
|
||||
ref={nextButtonRef}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
)}
|
||||
{showPreviousButton && (
|
||||
<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={onPrevious}
|
||||
ref={previousButtonRef}
|
||||
>
|
||||
Previous
|
||||
</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>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
);
|
||||
};
|
||||
Reference in a new issue