Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

loading modal #10

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

loading modal #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
85bcc6d
loading
yuenler Jun 20, 2024
99da945
Version 1 of loading modal now ready for publish
gabeabrams Jun 20, 2024
8690006
fix bug
yuenler Jun 29, 2024
3d350ba
simplify code
yuenler Jun 29, 2024
598e23c
small changes
yuenler Jul 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
221 changes: 120 additions & 101 deletions dist/cjs/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,6 +218,98 @@ const waitMs = (ms = 0) => __awaiter(void 0, void 0, void 0, function* () {
});
});

/**
* Loading spinner/indicator
* @author Gabe Abrams
*/
/*------------------------------------------------------------------------*/
/* -------------------------------- Style ------------------------------- */
/*------------------------------------------------------------------------*/
const style$a = `
/* Container fades in */
.LoadingSpinner-container {
animation-name: LoadingSpinner-container-fade-in;
animation-duration: 0.3s;
animation-delay: 0.4s;
animation-fill-mode: both;
animation-timing-function: ease-out;
}
@keyframes LoadingSpinner-container-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

/* Blips */
.LoadingSpinner-blip-1,
.LoadingSpinner-blip-2,
.LoadingSpinner-blip-3,
.LoadingSpinner-blip-4 {
font-size: 1.8rem;
opacity: 0.6;
margin-top: 1rem;
margin-bottom: 1rem;
}

/* First Blip */
.LoadingSpinner-blip-1 {
animation: LoadingSpinner-pop-animation 2s infinite;
}

/* Second Blip */
.LoadingSpinner-blip-2 {
animation: LoadingSpinner-pop-animation 2s infinite;
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}

/* Third Blip */
.LoadingSpinner-blip-3 {
animation: LoadingSpinner-pop-animation 2s infinite;
animation-delay: 0.2s;
}

/* Fourth Blip */
.LoadingSpinner-blip-4 {
animation: LoadingSpinner-pop-animation 2s infinite;
animation-delay: 0.3s;
}

/* Pop Animation for Each Blip */
@keyframes LoadingSpinner-pop-animation {
0% {
transform: scale(1.0);
}
10% {
transform: scale(1.5);
}
30% {
transform: scale(1.0);
}
100% {
transform: scale(1.0);
}
}
`;
/*------------------------------------------------------------------------*/
/* ------------------------------ Component ----------------------------- */
/*------------------------------------------------------------------------*/
const LoadingSpinner = () => {
/*------------------------------------------------------------------------*/
/* ------------------------------- Render ------------------------------- */
/*------------------------------------------------------------------------*/
// Add all four blips to a container
return (React__default["default"].createElement("div", { className: "text-center LoadingSpinner LoadingSpinner-container" },
React__default["default"].createElement("style", null, style$a),
React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faCircle, className: "LoadingSpinner-blip-1 me-1" }),
React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faCircle, className: "LoadingSpinner-blip-2 me-1" }),
React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faCircle, className: "LoadingSpinner-blip-3 me-1" }),
React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faCircle, className: "LoadingSpinner-blip-4" })));
};

/**
* Modal sizes
* @author Gabe Abrams
Expand Down Expand Up @@ -437,7 +529,7 @@ const getNextUniqueId = () => {
/*------------------------------------------------------------------------*/
/* -------------------------------- Style ------------------------------- */
/*------------------------------------------------------------------------*/
const style$a = `
const style$9 = `
.Modal-backdrop {
position: fixed;
top: 0;
Expand Down Expand Up @@ -509,13 +601,14 @@ const Modal = (props) => {
/*------------------------------------------------------------------------*/
var _a;
/* -------------- Props ------------- */
const { type = ModalType$1.NoButtons, size = ModalSize$1.Large, title, largeTitle, children, onClose, dontAllowBackdropExit, dontShowXButton, onTopOfOtherModals, } = props;
const { type = ModalType$1.NoButtons, size = ModalSize$1.Large, title, largeTitle, children, onClose, dontAllowBackdropExit, dontShowXButton, onTopOfOtherModals, isLoading, isLoadingCancelable, } = props;
// Determine if no header either
const noHeader = (!title && type === ModalType$1.NoButtons);
/* -------------- State ------------- */
// True if animation is in use
const [animatingIn, setAnimatingIn] = React.useState(true);
const [animatingPop, setAnimatingPop] = React.useState(false);
const [showModal, setShowModal] = React.useState(false);
/* -------------- Refs -------------- */
// Keep track of whether modal is still mounted
const mounted = React.useRef(false);
Expand All @@ -541,6 +634,14 @@ const Modal = (props) => {
// Update to state after animated in
if (mounted.current) {
setAnimatingIn(false);
if (isLoading) {
// wait 1 second before showing modal
yield waitMs(1000);
setShowModal(true);
}
else {
setShowModal(true);
}
}
}))();
return () => {
Expand Down Expand Up @@ -616,7 +717,7 @@ const Modal = (props) => {
left: 0,
right: 0,
} },
React__default["default"].createElement("style", null, style$a),
React__default["default"].createElement("style", null, style$9),
React__default["default"].createElement("div", { className: `Modal-backdrop ${backdropAnimationClass}`, style: {
zIndex: baseZIndex + 1,
}, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
Expand All @@ -634,7 +735,7 @@ const Modal = (props) => {
// Handle close
handleClose(ModalButtonType$1.Cancel);
}) }),
React__default["default"].createElement("div", { className: `modal-dialog modal-${size} ${animationClass} modal-dialog-scrollable modal-dialog-centered`, style: {
showModal && (React__default["default"].createElement("div", { className: `modal-dialog modal-${size} ${animationClass} modal-dialog-scrollable modal-dialog-centered`, style: {
zIndex: baseZIndex + 2,
// Override sizes for even larger for XL
width: (size === ModalSize$1.ExtraLarge
Expand Down Expand Up @@ -666,15 +767,25 @@ const Modal = (props) => {
? '1.6rem'
: undefined),
} }, title),
(onClose && !dontShowXButton) && (React__default["default"].createElement("button", { type: "button", className: "Modal-x-button btn-close", "aria-label": "Close", style: {
(onClose && !dontShowXButton && !(isLoading && !isLoadingCancelable)) && (React__default["default"].createElement("button", { type: "button", className: "Modal-x-button btn-close", "aria-label": "Close", style: {
backgroundColor: (isDarkModeOn()
? 'white'
: undefined),
}, onClick: () => {
// Handle close
handleClose(ModalButtonType$1.Cancel);
} })))),
children && (React__default["default"].createElement("div", { className: "modal-body", style: {
isLoading && (React__default["default"].createElement("div", { className: "modal-body", style: {
color: (isDarkModeOn()
? 'white'
: undefined),
backgroundColor: (isDarkModeOn()
? '#444'
: undefined),
} },
React__default["default"].createElement(LoadingSpinner, null),
React__default["default"].createElement("span", { className: "sr-only" }, "Content loading"))),
children && !isLoading && (React__default["default"].createElement("div", { className: "modal-body", style: {
color: (isDarkModeOn()
? 'white'
: undefined),
Expand All @@ -692,7 +803,7 @@ const Modal = (props) => {
borderTop: (isDarkModeOn()
? '0.1rem solid gray'
: undefined),
} }, footer))))));
} }, footer)))))));
// Determine which portal to use
const portalNumber = id.current % NUM_MODAL_PORTALS;
// Render in a portal
Expand Down Expand Up @@ -1172,7 +1283,7 @@ const showSessionExpiredMessage = () => __awaiter(void 0, void 0, void 0, functi
/*------------------------------------------------------------------------*/
/* -------------------------------- Style ------------------------------- */
/*------------------------------------------------------------------------*/
const style$9 = `
const style$8 = `
.AppWrapper-leave-to-url-notice {
opacity: 0;

Expand Down Expand Up @@ -1347,105 +1458,13 @@ const AppWrapper = (props) => {
/* --------------- Main UI -------------- */
/*----------------------------------------*/
return (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement("style", null, style$9),
React__default["default"].createElement("style", null, style$8),
React__default["default"].createElement("style", null, tooltipStyle),
modal,
customModalPortals,
body));
};

/**
* Loading spinner/indicator
* @author Gabe Abrams
*/
/*------------------------------------------------------------------------*/
/* -------------------------------- Style ------------------------------- */
/*------------------------------------------------------------------------*/
const style$8 = `
/* Container fades in */
.LoadingSpinner-container {
animation-name: LoadingSpinner-container-fade-in;
animation-duration: 0.3s;
animation-delay: 0.4s;
animation-fill-mode: both;
animation-timing-function: ease-out;
}
@keyframes LoadingSpinner-container-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

/* Blips */
.LoadingSpinner-blip-1,
.LoadingSpinner-blip-2,
.LoadingSpinner-blip-3,
.LoadingSpinner-blip-4 {
font-size: 1.8rem;
opacity: 0.6;
margin-top: 1rem;
margin-bottom: 1rem;
}

/* First Blip */
.LoadingSpinner-blip-1 {
animation: LoadingSpinner-pop-animation 2s infinite;
}

/* Second Blip */
.LoadingSpinner-blip-2 {
animation: LoadingSpinner-pop-animation 2s infinite;
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}

/* Third Blip */
.LoadingSpinner-blip-3 {
animation: LoadingSpinner-pop-animation 2s infinite;
animation-delay: 0.2s;
}

/* Fourth Blip */
.LoadingSpinner-blip-4 {
animation: LoadingSpinner-pop-animation 2s infinite;
animation-delay: 0.3s;
}

/* Pop Animation for Each Blip */
@keyframes LoadingSpinner-pop-animation {
0% {
transform: scale(1.0);
}
10% {
transform: scale(1.5);
}
30% {
transform: scale(1.0);
}
100% {
transform: scale(1.0);
}
}
`;
/*------------------------------------------------------------------------*/
/* ------------------------------ Component ----------------------------- */
/*------------------------------------------------------------------------*/
const LoadingSpinner = () => {
/*------------------------------------------------------------------------*/
/* ------------------------------- Render ------------------------------- */
/*------------------------------------------------------------------------*/
// Add all four blips to a container
return (React__default["default"].createElement("div", { className: "text-center LoadingSpinner LoadingSpinner-container" },
React__default["default"].createElement("style", null, style$8),
React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faCircle, className: "LoadingSpinner-blip-1 me-1" }),
React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faCircle, className: "LoadingSpinner-blip-2 me-1" }),
React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faCircle, className: "LoadingSpinner-blip-3 me-1" }),
React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faCircle, className: "LoadingSpinner-blip-4" })));
};

/**
* A box with a tab on the top that holds buttons and other content
* @author Gabe Abrams
Expand Down
2 changes: 1 addition & 1 deletion dist/cjs/index.js.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions dist/cjs/types/components/Modal/ModalProps.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,5 +38,7 @@ type ModalProps = {
confirmLabel?: string;
confirmVariant?: Variant;
onTopOfOtherModals?: boolean;
isLoading?: boolean;
isLoadingCancelable?: boolean;
};
export default ModalProps;
Loading