@navinc/base-react-components
Version:
Nav's Pattern Library
244 lines (240 loc) • 11.2 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.InfoDrawer = exports.useInfoDrawer = exports.InfoDrawerProvider = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styled_components_1 = __importStar(require("styled-components"));
const use_debounce_1 = require("use-debounce");
const header_js_1 = require("./header.js");
const icon_button_1 = require("./icon-button");
const utils_1 = require("@navinc/utils");
const moveOffScreen = (0, styled_components_1.keyframes) `
from { right: 0%; }
to { right: -100%; }
`;
const moveOnScreen = (0, styled_components_1.keyframes) `
from { right: -100%; }
to { right: 0%; }
`;
const suddenIn = (0, styled_components_1.keyframes) `
from { width: 100%; opacity: 0; }
to { width: 100%; opacity: 1; }
`;
const suddenOut = (0, styled_components_1.keyframes) `
0% { width: 100%; opacity: 1; }
99.9% { width: 100%; }
100% { width: 0%; opacity: 0; }
`;
const Backdrop = styled_components_1.default.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: hsl(0deg 0% 0% / 20%);
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 Content = styled_components_1.default.div.withConfig({ displayName: "brc-sc-Content", componentId: "brc-sc-1aoi4h" }) `
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_components_1.default.div.withConfig({ displayName: "brc-sc-Drawer", componentId: "brc-sc-1d32p6d" }) `
animation: 0.2s ${({ theme }) => theme.materialTransitionTiming} both
${({ isOpen }) => (isOpen ? moveOnScreen : moveOffScreen)};
background-color: ${({ theme }) => theme.navNeutralLight};
display: grid;
grid-template-columns: min-content 1fr;
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 */
${({ isTouching, theme }) => !isTouching && `transition: 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: 24px 28px 32px;
max-width: calc(100vw - 55px);
}
`;
const InfoDrawerContext = (0, react_1.createContext)({
mobileFullPage: false,
orientBottom: false,
heightVariation: undefined,
width: undefined,
isOpen: false,
setIsOpen: utils_1.noop,
content: null,
title: null,
setInfoDrawer: utils_1.noop,
closeHandlersRef: { current: [] },
close: utils_1.noop,
});
const InfoDrawerProvider = ({ children }) => {
const [groupedConfig, setGroupedConfig] = (0, react_1.useState)({
mobileFullPage: false,
orientBottom: false,
content: null,
contentProps: undefined,
title: null,
heightVariation: undefined,
width: undefined,
});
const [isOpen, setIsOpen] = (0, react_1.useState)(false);
const closeHandlersRef = (0, react_1.useRef)([]);
const { mobileFullPage, orientBottom, content, contentProps, title, heightVariation, width } = groupedConfig;
const close = (0, react_1.useCallback)((noClose = false) => {
if (!noClose) {
setIsOpen(false);
}
closeHandlersRef.current.forEach((closeHandler) => closeHandler());
}, []);
const setInfoDrawer = (0, react_1.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 ((0, jsx_runtime_1.jsx)(InfoDrawerContext.Provider, { value: {
mobileFullPage,
orientBottom,
content,
contentProps,
isOpen,
setIsOpen,
title,
closeHandlersRef,
close,
setInfoDrawer,
heightVariation,
width,
}, children: children }));
};
exports.InfoDrawerProvider = InfoDrawerProvider;
const useInfoDrawer = ({ onClose } = {}) => {
const { mobileFullPage, orientBottom, content, contentProps, title, setInfoDrawer, closeHandlersRef, isOpen, heightVariation, width, } = (0, react_1.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.
(0, react_1.useEffect)(() => () => {
closeHandlersRef.current = closeHandlersRef.current.filter((closeHandler) => closeHandler !== onClose);
}, [closeHandlersRef, onClose]);
return {
mobileFullPage,
orientBottom,
content,
contentProps,
title,
isOpen,
setInfoDrawer,
heightVariation,
width,
};
};
exports.useInfoDrawer = useInfoDrawer;
const _InfoDrawer = ({ variation, heightVariation = 'dynamic', className, }) => {
const theme = (0, styled_components_1.useTheme)();
const infoDrawerState = (0, exports.useInfoDrawer)();
const { mobileFullPage, orientBottom, content: ContentComponent, contentProps, title, isOpen, setInfoDrawer, heightVariation: heightVariationOverride, width, } = infoDrawerState;
const [moveStartX, setMoveStartX] = (0, react_1.useState)(0);
const [translateX, setTranslateX] = (0, react_1.useState)(0);
const onTouchMove = (0, use_debounce_1.useDebouncedCallback)((e) => {
onTouchMove.cancel();
e.persist();
setTranslateX(e.touches[0].clientX);
}, 2, { maxWait: 5 });
const configuredHeightVariation = heightVariationOverride !== null && heightVariationOverride !== void 0 ? heightVariationOverride : heightVariation;
return ((0, jsx_runtime_1.jsx)(Backdrop, { 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: (0, jsx_runtime_1.jsxs)(Drawer, { 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: [(0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { name: "actions/close", onClick: () => setInfoDrawer({ isOpen: false }), variation: "neutral", "data-testid": "info-drawer:close-button", size: "18px", color: theme.navNeutralDark }), (0, jsx_runtime_1.jsx)(header_js_1.Header, { size: "sm", children: title }), (0, jsx_runtime_1.jsx)(Content, { heightVariation: configuredHeightVariation, children: typeof ContentComponent === 'function' ? ((0, jsx_runtime_1.jsx)(ContentComponent, Object.assign({}, infoDrawerState, contentProps))) : (ContentComponent) })] }) }));
};
exports.InfoDrawer = (0, styled_components_1.default)(_InfoDrawer).withConfig({ displayName: "brc-sc-InfoDrawer", componentId: "brc-sc-1ty4027" }) ``;
//# sourceMappingURL=info-drawer.js.map