Skip to content

Commit

Permalink
feat(frontend): cancel movie request modal
Browse files Browse the repository at this point in the history 
also includes tons of performance fixes for the modals
  • Loading branch information
@sct
sct committed Oct 14, 2020
1 parent 61b6152 commit 1f9cbbf
Show file tree
Hide file tree
Showing 9 changed files with 300 additions and 304 deletions.
1 change: 1 addition & 0 deletions src/assets/download.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions src/components/Common/Badge/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@ const Badge: React.FC<BadgeProps> = ({ badgeType = 'default', children }) => {
badgeStyle.push('bg-red-600 text-red-100');
break;
case 'warning':
badgeStyle.push('bg-orange-400 text-orange-100');
badgeStyle.push('bg-orange-500 text-orange-100');
break;
case 'success':
badgeStyle.push('bg-green-500 text-green-100');
badgeStyle.push('bg-green-400 text-green-100');
break;
default:
badgeStyle.push('bg-indigo-500 text-indigo-100');
Expand Down
235 changes: 128 additions & 107 deletions src/components/Common/Modal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,23 @@ import { useLockBodyScroll } from '../../../hooks/useLockBodyScroll';
import LoadingSpinner from '../LoadingSpinner';
import useClickOutside from '../../../hooks/useClickOutside';

interface ModalProps {
interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
title?: string;
onCancel?: (e?: MouseEvent<HTMLElement>) => void;
onOk?: (e: MouseEvent<HTMLButtonElement>) => void;
onOk?: (e?: MouseEvent<HTMLButtonElement>) => void;
onSecondary?: (e?: MouseEvent<HTMLButtonElement>) => void;
onTertiary?: (e?: MouseEvent<HTMLButtonElement>) => void;
cancelText?: string;
okText?: string;
secondaryText?: string;
tertiaryText?: string;
okDisabled?: boolean;
cancelButtonType?: ButtonType;
okButtonType?: ButtonType;
visible?: boolean;
secondaryButtonType?: ButtonType;
secondaryDisabled?: boolean;
tertiaryDisabled?: boolean;
tertiaryButtonType?: ButtonType;
disableScrollLock?: boolean;
backgroundClickable?: boolean;
iconSvg?: ReactNode;
Expand All @@ -29,138 +36,152 @@ const Modal: React.FC<ModalProps> = ({
cancelText,
okText,
okDisabled = false,
cancelButtonType,
okButtonType,
cancelButtonType = 'default',
okButtonType = 'primary',
children,
visible,
disableScrollLock,
backgroundClickable = true,
iconSvg,
loading = false,
secondaryButtonType = 'default',
secondaryDisabled = false,
onSecondary,
secondaryText,
tertiaryButtonType = 'default',
tertiaryDisabled = false,
tertiaryText,
onTertiary,
...props
}) => {
const modalRef = useRef<HTMLDivElement>(null);
useClickOutside(modalRef, () => {
typeof onCancel === 'function' && backgroundClickable
? onCancel()
: undefined;
});
useLockBodyScroll(!!visible, disableScrollLock);
const transitions = useTransition(visible, null, {
from: { opacity: 0, backdropFilter: 'blur(0px)' },
enter: { opacity: 1, backdropFilter: 'blur(3px)' },
leave: { opacity: 0, backdropFilter: 'blur(0px)' },
config: { tension: 500, velocity: 40, friction: 60 },
});
const containerTransitions = useTransition(visible && !loading, null, {
useLockBodyScroll(true, disableScrollLock);
const containerTransitions = useTransition(!loading, null, {
from: { opacity: 0, transform: 'scale(0.5)' },
enter: { opacity: 1, transform: 'scale(1)' },
leave: { opacity: 0, transform: 'scale(0.5)' },
config: { tension: 500, velocity: 40, friction: 60 },
});
const loadingTransitions = useTransition(visible && loading, null, {
const loadingTransitions = useTransition(loading, null, {
from: { opacity: 0, transform: 'scale(0.5)' },
enter: { opacity: 1, transform: 'scale(1)' },
leave: { opacity: 0, transform: 'scale(0.5)' },
config: { tension: 500, velocity: 40, friction: 60 },
});

const cancelType = cancelButtonType ?? 'default';
const okType = okButtonType ?? 'primary';

return (
<>
{transitions.map(
({ props, item, key }) =>
item &&
ReactDOM.createPortal(
<animated.div
className="fixed top-0 left-0 right-0 bottom-0 bg-cool-gray-800 bg-opacity-50 w-full h-full z-50 flex justify-center items-center"
style={props}
key={key}
onKeyDown={(e) => {
if (e.key === 'Escape') {
typeof onCancel === 'function' && backgroundClickable
? onCancel()
: undefined;
}
}}
>
{loadingTransitions.map(
({ props, item, key }) =>
item && (
<animated.div
style={{ ...props, position: 'absolute' }}
key={key}
>
<LoadingSpinner />
</animated.div>
)
)}
{containerTransitions.map(
({ props, item, key }) =>
item && (
<animated.div
style={props}
className="inline-block align-bottom bg-cool-gray-700 sm:rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl w-full sm:p-6"
role="dialog"
aria-modal="true"
aria-labelledby="modal-headline"
key={key}
ref={modalRef}
>
<div className="sm:flex sm:items-center">
{iconSvg && (
<div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-cool-gray-600 text-white sm:mx-0 sm:h-10 sm:w-10">
{iconSvg}
</div>
)}
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
{title && (
<h3
className="text-lg leading-6 font-medium text-white"
id="modal-headline"
>
{title}
</h3>
)}
</div>
{ReactDOM.createPortal(
<animated.div
className="fixed top-0 left-0 right-0 bottom-0 bg-cool-gray-800 bg-opacity-50 w-full h-full z-50 flex justify-center items-center"
style={props.style}
onKeyDown={(e) => {
if (e.key === 'Escape') {
typeof onCancel === 'function' && backgroundClickable
? onCancel()
: undefined;
}
}}
>
{loadingTransitions.map(
({ props, item, key }) =>
item && (
<animated.div
style={{ ...props, position: 'absolute' }}
key={key}
>
<LoadingSpinner />
</animated.div>
)
)}
{containerTransitions.map(
({ props, item, key }) =>
item && (
<animated.div
style={props}
className="inline-block align-bottom bg-cool-gray-700 sm:rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl w-full sm:p-6"
role="dialog"
aria-modal="true"
aria-labelledby="modal-headline"
key={key}
ref={modalRef}
>
<div className="sm:flex sm:items-center">
{iconSvg && (
<div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-cool-gray-600 text-white sm:mx-0 sm:h-10 sm:w-10">
{iconSvg}
</div>
{children && (
<div className="mt-4">
<p className="text-sm leading-5 text-cool-gray-300">
{children}
</p>
</div>
)}
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
{title && (
<h3
className="text-lg leading-6 font-medium text-white"
id="modal-headline"
>
{title}
</h3>
)}
</div>
</div>
{children && (
<div className="mt-4">
<p className="text-sm leading-5 text-cool-gray-300">
{children}
</p>
</div>
)}
{(onCancel || onOk || onSecondary || onTertiary) && (
<div className="mt-5 sm:mt-4 flex justify-center sm:justify-start flex-row-reverse">
{typeof onOk === 'function' && (
<Button
buttonType={okButtonType}
onClick={onOk}
className="ml-3"
disabled={okDisabled}
>
{okText ? okText : 'Ok'}
</Button>
)}
{typeof onSecondary === 'function' && secondaryText && (
<Button
buttonType={secondaryButtonType}
onClick={onSecondary}
className="ml-3"
disabled={secondaryDisabled}
>
{secondaryText}
</Button>
)}
{typeof onTertiary === 'function' && tertiaryText && (
<Button
buttonType={tertiaryButtonType}
onClick={onTertiary}
className="ml-3"
disabled={tertiaryDisabled}
>
{tertiaryText}
</Button>
)}
{(onCancel || onOk) && (
<div className="mt-5 sm:mt-4 flex justify-center sm:justify-start flex-row-reverse">
{typeof onOk === 'function' && (
<Button
buttonType={okType}
onClick={onOk}
className="ml-3"
disabled={okDisabled}
>
{okText ? okText : 'Ok'}
</Button>
)}
{typeof onCancel === 'function' && (
<Button
buttonType={cancelType}
onClick={onCancel}
className="ml-3 sm:ml-0 sm:px-4"
>
{cancelText ? cancelText : 'Cancel'}
</Button>
)}
</div>
{typeof onCancel === 'function' && (
<Button
buttonType={cancelButtonType}
onClick={onCancel}
className="ml-3 sm:ml-0 sm:px-4"
>
{cancelText ? cancelText : 'Cancel'}
</Button>
)}
</animated.div>
)
)}
</animated.div>,
document.body
)
</div>
)}
</animated.div>
)
)}
</animated.div>,
document.body
)}
</>
);
Expand Down

0 comments on commit 1f9cbbf

Please sign in to comment.