@navinc/base-react-components/dist/info-drawer.js

Nav's Pattern Library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { createContext, useContext, useState, useRef, useEffect, useCallback, } from 'react';
import styled, { keyframes } from 'styled-components';
import { useDebouncedCallback } from 'use-debounce';
import Header from './header.js';
import { InteractiveIcon } from './icon.js';
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;
  `;
        default:
            return null;
    }
};
const contentHeightVariations = {
    dynamic: 'max-height: calc(100vh - 160px);',
    full: 'max-height: calc(100vh - 65px);',
};
const CloseButton = styled(InteractiveIcon).attrs(() => ({ name: 'actions/close' })).withConfig({ displayName: "brc-sc-CloseButton", componentId: "brc-sc-krdogs" }) `
  cursor: pointer;
`;
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: 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 }) => (orientBottom ? `calc(100% - 260px)` : `485px`)};
    padding: 24px 24px 32px;
    max-width: calc(100vw - 55px);

  }
`;
const InfoDrawerContext = createContext({
    mobileFullPage: false,
    orientBottom: false,
    heightVariation: undefined,
    setHeightVariation: noop,
    isOpen: false,
    setIsOpen: noop,
    content: null,
    title: null,
    setInfoDrawer: noop,
    closeHandlersRef: { current: [] },
    close: noop,
});
export const InfoDrawerProvider = ({ children }) => {
    const [mobileFullPage, setMobileFullPage] = useState(false);
    const [orientBottom, setOrientBottom] = useState(false);
    const [content, setContent] = useState(null);
    const [title, setTitle] = useState(null);
    const [isOpen, setIsOpen] = useState(false);
    const [heightVariation, setHeightVariation] = useState(undefined);
    const closeHandlersRef = useRef([]);
    const close = useCallback(() => {
        setIsOpen(false);
        closeHandlersRef.current.forEach((closeHandler) => closeHandler());
    }, []);
    const setInfoDrawer = useCallback((config = {}) => {
        const cfg = Object.assign({ 
            // in order to keep the value of orientBottom and mobileFullPage we need to check the config if the drawer is open to prevent flashing when orientBottom is true
            mobileFullPage: config.isOpen ? false : mobileFullPage, orientBottom: config.isOpen ? false : orientBottom, title,
            content,
            isOpen }, config);
        setMobileFullPage(cfg.mobileFullPage);
        setOrientBottom(cfg.orientBottom);
        if (isOpen && !config.isOpen) {
            close();
        }
        else {
            setIsOpen(cfg.isOpen);
        }
        setTitle(cfg.title);
        setHeightVariation(cfg.heightVariation);
        setContent(cfg.content);
    }, [close, content, isOpen, title, orientBottom, mobileFullPage, heightVariation]);
    return (_jsx(InfoDrawerContext.Provider, Object.assign({ value: {
            mobileFullPage,
            orientBottom,
            content,
            isOpen,
            setIsOpen,
            title,
            closeHandlersRef,
            close,
            setInfoDrawer,
            setHeightVariation,
            heightVariation: heightVariation,
        } }, { children: children })));
};
export const useInfoDrawer = ({ onClose } = {}) => {
    const { mobileFullPage, orientBottom, content, title, setInfoDrawer, closeHandlersRef, isOpen, heightVariation } = 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,
        title,
        isOpen,
        setInfoDrawer,
        heightVariation,
    };
};
export const InfoDrawer = ({ variation, heightVariation = 'dynamic', className, }) => {
    const { mobileFullPage, orientBottom, content, title, isOpen, setInfoDrawer, heightVariation: heightVariationOverride, } = useInfoDrawer();
    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, "data-testid": "info-drawer:drawer" }, { children: [_jsx(Header, Object.assign({ size: "sm" }, { children: title })), _jsx(CloseButton, { onClick: () => setInfoDrawer({ isOpen: false }), "data-testid": "info-drawer:close-button" }), _jsx(Content, Object.assign({ heightVariation: configuredheightVariation }, { children: content }))] })) })));
};
export default styled(InfoDrawer).withConfig({ componentId: "brc-sc-ozwl0o" }) ``;
//# sourceMappingURL=info-drawer.js.map