@navinc/base-react-components
Version:
Nav's Pattern Library
272 lines (267 loc) • 12.6 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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
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 = __importDefault(require("./header.js"));
const icon_button_1 = __importDefault(require("./icon-button"));
const utils_1 = require("@navinc/utils");
const is_rebrand_js_1 = __importDefault(require("./is-rebrand.js"));
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: 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 = (0, styled_components_1.default)(icon_button_1.default).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_components_1.default.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_components_1.default.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 ((0, is_rebrand_js_1.default)(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 }) => ((0, is_rebrand_js_1.default)(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 }) => ((0, is_rebrand_js_1.default)(theme) ? '24px 28px 32px' : '24px 24px 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, Object.assign({ 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 purpleTheme = (0, is_rebrand_js_1.default)(theme);
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, 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: (0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)(icon_button_1.default, { 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.default, Object.assign({ size: "sm" }, { children: title })), !purpleTheme && ((0, jsx_runtime_1.jsx)(CloseButton, { onClick: () => setInfoDrawer({ isOpen: false }), "data-testid": "info-drawer:close-button" })), (0, jsx_runtime_1.jsx)(Content, Object.assign({ heightVariation: configuredHeightVariation }, { children: typeof ContentComponent === 'function' ? ((0, jsx_runtime_1.jsx)(ContentComponent, Object.assign({}, infoDrawerState, contentProps))) : (ContentComponent) }))] })) })));
};
exports.InfoDrawer = InfoDrawer;
exports.default = (0, styled_components_1.default)(exports.InfoDrawer).withConfig({ componentId: "brc-sc-ozwl0o" }) ``;
//# sourceMappingURL=info-drawer.js.map