@navinc/base-react-components
Version:
Nav's Pattern Library
240 lines (235 loc) • 10.5 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { createContext, useContext, useState, useRef, useEffect, useCallback, } from 'react';
import styled, { useTheme, keyframes } from 'styled-components';
import { useDebouncedCallback } from 'use-debounce';
import Header from './header.js';
import IconButton from './icon-button';
import { noop } from '@navinc/utils';
import isRebrand from './is-rebrand.js';
const moveOffScreen = keyframes `
from { right: 0%; }
to { right: -100%; }
`;
const moveOnScreen = keyframes `
from { right: -100%; }
to { right: 0%; }
`;
const suddenIn = keyframes `
from { width: 100%; opacity: 0; }
to { width: 100%; opacity: 1; }
`;
const suddenOut = keyframes `
0% { width: 100%; opacity: 1; }
99.9% { width: 100%; }
100% { width: 0%; opacity: 0; }
`;
const Backdrop = styled.div.withConfig({ displayName: "brc-sc-Backdrop", componentId: "brc-sc-1kxu7f1" }) `
align-items: flex-start;
animation: 0.2s ${({ theme }) => theme.materialTransitionTiming} both ${({ isOpen }) => isOpen ? suddenIn : suddenOut} ;
background-color: hsla(0, 0%, 0%, .2)};
box-sizing: border-box;
display: flex;
height: 100%;
justify-content: flex-end;
overflow: hidden;
pointer-events: ${({ isOpen }) => (isOpen ? 'initial' : 'none')};
position: fixed;
right: 0;
& * {
box-sizing: border-box;
}
`;
const drawerHeightVariations = (theme, type, mobileFullPage) => {
switch (type) {
case 'dynamic':
return `
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
height: ${mobileFullPage ? '100%' : 'auto'} ;
margin-top: ${mobileFullPage ? '0' : '100px'};
max-height: ${!mobileFullPage && 'calc(100vh - 100px)'};
min-height: 80px;
@media (${theme.forLargerThanPhone}) {
height: auto;
max-height: calc(100vh - 100px);
}
`;
case 'full':
return `
align-content: flex-start;
height 100vh;
height: 100dvh;
`;
default:
return null;
}
};
const contentHeightVariations = {
dynamic: 'max-height: calc(100vh - 160px);',
full: 'max-height: calc(100vh - 65px);',
};
const CloseButton = styled(IconButton).attrs(() => ({ name: 'actions/close' })).withConfig({ displayName: "brc-sc-CloseButton", componentId: "brc-sc-krdogs" }) `
cursor: pointer;
color: inherit;
margin-top: 4px;
&:hover,
&:hover:not([disabled]),
&:hover:active,
&:focus,
&:focus:active,
&:active {
color: inherit;
}
`;
const Content = styled.div.withConfig({ displayName: "brc-sc-Content", componentId: "brc-sc-1soge9e" }) `
overflow: auto;
grid-column: 1 / -1;
font-family: ${({ theme }) => theme.fontPrimary}
${({ heightVariation }) => { var _a; return (_a = contentHeightVariations[heightVariation]) !== null && _a !== void 0 ? _a : contentHeightVariations.dynamic; }};
`;
const Drawer = styled.div.withConfig({ displayName: "brc-sc-Drawer", componentId: "brc-sc-50iogq" }) `
animation: 0.2s ${({ theme }) => theme.materialTransitionTiming} both
${({ isOpen }) => (isOpen ? moveOnScreen : moveOffScreen)};
background-color: ${({ variation = 'default', theme }) => {
var _a;
if (isRebrand(theme))
return theme.navSecondary100;
const colorVariation = {
blue: theme.bubbleBlue100,
default: theme.white,
};
return (_a = colorVariation[variation]) !== null && _a !== void 0 ? _a : colorVariation.default;
}};
display: grid;
grid-template-columns: ${({ theme }) => (isRebrand(theme) ? 'min-content 1fr' : '1fr min-content')};
grid-template-rows: ${({ mobileFullPage }) => mobileFullPage && 'auto 1fr'};
gap: 16px;
border-right: solid 1px ${({ theme }) => theme.border};
overflow: hidden;
padding: 16px;
// only use transition when not touching, otherwise dragging feels sluggish
transition: ${({ isTouching, theme }) => !isTouching && `transform 0.2s ${theme.materialTransitionTiming};`}
${({ theme, heightVariation, mobileFullPage }) => { var _a; return (_a = drawerHeightVariations(theme, heightVariation, mobileFullPage)) !== null && _a !== void 0 ? _a : drawerHeightVariations(theme, 'dynamic'); }}
width: 100%;
@media (${({ theme }) => theme.forLargerThanPhone}) {
position: ${({ orientBottom }) => orientBottom && `absolute`};
bottom: ${({ orientBottom }) => orientBottom && `0`};
width: ${({ orientBottom, width }) => width !== null && width !== void 0 ? width : (orientBottom ? `calc(100% - 260px)` : `485px`)};
padding: ${({ theme }) => (isRebrand(theme) ? '24px 28px 32px' : '24px 24px 32px')};
max-width: calc(100vw - 55px);
}
`;
const InfoDrawerContext = createContext({
mobileFullPage: false,
orientBottom: false,
heightVariation: undefined,
width: undefined,
isOpen: false,
setIsOpen: noop,
content: null,
title: null,
setInfoDrawer: noop,
closeHandlersRef: { current: [] },
close: noop,
});
export const InfoDrawerProvider = ({ children }) => {
const [groupedConfig, setGroupedConfig] = useState({
mobileFullPage: false,
orientBottom: false,
content: null,
contentProps: undefined,
title: null,
heightVariation: undefined,
width: undefined,
});
const [isOpen, setIsOpen] = useState(false);
const closeHandlersRef = useRef([]);
const { mobileFullPage, orientBottom, content, contentProps, title, heightVariation, width } = groupedConfig;
const close = useCallback((noClose = false) => {
if (!noClose) {
setIsOpen(false);
}
closeHandlersRef.current.forEach((closeHandler) => closeHandler());
}, []);
const setInfoDrawer = useCallback((config = {}) => {
setGroupedConfig((currentGroupedConfig) => (Object.assign(Object.assign({}, (config.isOpen ? {} : currentGroupedConfig)), config)));
setIsOpen((currentIsOpen) => {
var _a;
const shouldBeOpen = (_a = config.isOpen) !== null && _a !== void 0 ? _a : currentIsOpen;
if (currentIsOpen && !shouldBeOpen) {
close(true);
}
return shouldBeOpen;
});
}, [close]);
return (_jsx(InfoDrawerContext.Provider, Object.assign({ value: {
mobileFullPage,
orientBottom,
content,
contentProps,
isOpen,
setIsOpen,
title,
closeHandlersRef,
close,
setInfoDrawer,
heightVariation,
width,
} }, { children: children })));
};
export const useInfoDrawer = ({ onClose } = {}) => {
const { mobileFullPage, orientBottom, content, contentProps, title, setInfoDrawer, closeHandlersRef, isOpen, heightVariation, width, } = useContext(InfoDrawerContext);
if (onClose && !closeHandlersRef.current.includes(onClose)) {
closeHandlersRef.current = closeHandlersRef.current.concat(onClose);
}
// When the component unmounts, we want to clean up our onClose handler.
useEffect(() => () => {
closeHandlersRef.current = closeHandlersRef.current.filter((closeHandler) => closeHandler !== onClose);
}, [closeHandlersRef, onClose]);
return {
mobileFullPage,
orientBottom,
content,
contentProps,
title,
isOpen,
setInfoDrawer,
heightVariation,
width,
};
};
export const InfoDrawer = ({ variation, heightVariation = 'dynamic', className, }) => {
const theme = useTheme();
const purpleTheme = isRebrand(theme);
const infoDrawerState = useInfoDrawer();
const { mobileFullPage, orientBottom, content: ContentComponent, contentProps, title, isOpen, setInfoDrawer, heightVariation: heightVariationOverride, width, } = infoDrawerState;
const [moveStartX, setMoveStartX] = useState(0);
const [translateX, setTranslateX] = useState(0);
const onTouchMove = useDebouncedCallback((e) => {
onTouchMove.cancel();
e.persist();
setTranslateX(e.touches[0].clientX);
}, 2, { maxWait: 5 });
const configuredHeightVariation = heightVariationOverride !== null && heightVariationOverride !== void 0 ? heightVariationOverride : heightVariation;
return (_jsx(Backdrop, Object.assign({ isOpen: isOpen, className: className, "data-testid": "info-drawer:backdrop", onTouchStart: (e) => setMoveStartX(e.touches[0].clientX), onTouchMove: onTouchMove, onTouchEnd: () => {
onTouchMove.cancel();
translateX - moveStartX > 180 && setInfoDrawer({ isOpen: false });
setMoveStartX(0);
setTranslateX(0);
}, onClick: (e) => {
e.persist();
if ('dataset' in e.target && e.target.dataset.testid === 'info-drawer:backdrop') {
setInfoDrawer({ isOpen: false });
}
} }, { children: _jsxs(Drawer, Object.assign({ mobileFullPage: mobileFullPage, orientBottom: orientBottom, style: {
transform: `translateX(${isOpen ? Math.max(translateX - moveStartX, 0) : 485}px)`,
}, isOpen: isOpen, isTouching: moveStartX !== 0, variation: variation, heightVariation: configuredHeightVariation, width: width, onAnimationEnd: () => {
if (!isOpen) {
// Reset content and props to ensure we are not holding onto old state. If the same info drawer was
// displayed, the content and any state would have persisted, which may lead to unexpected behavior
setInfoDrawer({ content: undefined, contentProps: undefined });
}
}, "data-testid": "info-drawer:drawer" }, { children: [purpleTheme && (_jsx(IconButton, { name: "actions/close", onClick: () => setInfoDrawer({ isOpen: false }), variation: "neutral", "data-testid": "info-drawer:close-button", size: "18px", color: theme.navNeutralDark })), _jsx(Header, Object.assign({ size: "sm" }, { children: title })), !purpleTheme && (_jsx(CloseButton, { onClick: () => setInfoDrawer({ isOpen: false }), "data-testid": "info-drawer:close-button" })), _jsx(Content, Object.assign({ heightVariation: configuredHeightVariation }, { children: typeof ContentComponent === 'function' ? (_jsx(ContentComponent, Object.assign({}, infoDrawerState, contentProps))) : (ContentComponent) }))] })) })));
};
export default styled(InfoDrawer).withConfig({ componentId: "brc-sc-ozwl0o" }) ``;
//# sourceMappingURL=info-drawer.js.map