@navinc/base-react-components
Version:
Nav's Pattern Library
196 lines (193 loc) • 8.37 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (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_js_1 = __importDefault(require("./icon.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 `
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 = {
dynamic: `
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
height: auto;
margin-top: 100px;
max-height: calc(100vh - 100px);
min-height: 80px;
`,
full: `
align-content: flex-start;
height: 100vh;
`,
};
const contentHeightVariations = {
dynamic: 'max-height: calc(100vh - 160px);',
full: 'max-height: calc(100vh - 65px);',
};
const CloseButton = (0, styled_components_1.default)(icon_js_1.default).attrs(() => ({ name: 'actions/close' })) `
cursor: pointer;
`;
const Content = styled_components_1.default.div `
overflow: scroll;
${({ heightVariation }) => { var _a; return (_a = contentHeightVariations[heightVariation]) !== null && _a !== void 0 ? _a : contentHeightVariations.dynamic; }}
`;
const Drawer = styled_components_1.default.div `
animation: 0.2s ${({ theme }) => theme.materialTransitionTiming} both
${({ isOpen }) => (isOpen ? moveOnScreen : moveOffScreen)};
background-color: ${({ variation = 'default', theme }) => {
var _a;
const colorVariation = {
blue: theme.pastelBlue100,
brown: theme.timberwolf100,
default: theme.white,
};
return (_a = colorVariation[variation]) !== null && _a !== void 0 ? _a : colorVariation.default;
}};
display: grid;
grid-template-columns: 1fr min-content;
gap: 16px;
border-right: solid 1px ${({ theme }) => theme.border};
max-width: calc(100vw - 55px);
overflow: hidden;
padding: 16px;
transform: translateX(
${({ isOpen, moveStartX, translateX }) => (isOpen ? Math.max(translateX - moveStartX, 0) : 485)}px
);
transition: transform 0.2s ${({ theme }) => theme.materialTransitionTiming};
${({ heightVariation }) => { var _a; return (_a = drawerHeightVariations[heightVariation]) !== null && _a !== void 0 ? _a : drawerHeightVariations.dynamic; }}
width: 485px;
$ > ${Content} {
grid-columns: 1 / -1;
}
@media (${({ theme }) => theme.forLargerThanPhone}) {
padding: 24px 24px 32px;
}
`;
const InfoDrawerContext = (0, react_1.createContext)({
content: null,
title: null,
setInfoDrawer: () => { },
closeHandlersRef: { current: [] },
});
const InfoDrawerProvider = ({ children }) => {
const [content, setContent] = (0, react_1.useState)(null);
const [title, setTitle] = (0, react_1.useState)(null);
const [isOpen, setIsOpen] = (0, react_1.useState)(false);
const closeHandlersRef = (0, react_1.useRef)([]);
const close = (0, react_1.useCallback)(() => {
setIsOpen(false);
closeHandlersRef.current.forEach((closeHandler) => closeHandler());
}, []);
const setInfoDrawer = (0, react_1.useCallback)((config = {}) => {
const cfg = Object.assign({ title,
content,
isOpen }, config);
if (isOpen && !config.isOpen) {
close();
}
else {
setIsOpen(cfg.isOpen);
}
setTitle(cfg.title);
setContent(cfg.content);
}, [close, content, isOpen, title]);
return ((0, jsx_runtime_1.jsx)(InfoDrawerContext.Provider, Object.assign({ value: { content, isOpen, setIsOpen, title, closeHandlersRef, close, setInfoDrawer } }, { children: children }), void 0));
};
exports.InfoDrawerProvider = InfoDrawerProvider;
const useInfoDrawer = ({ onClose } = {}) => {
const { content, title, setInfoDrawer, closeHandlersRef, isOpen } = (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) => closeHandlersRef !== onClose);
}, [closeHandlersRef, onClose]);
return {
content,
title,
isOpen,
setInfoDrawer,
};
};
exports.useInfoDrawer = useInfoDrawer;
const InfoDrawer = ({ variation, heightVariation = 'dynamic', className }) => {
const { content, title, isOpen, setInfoDrawer } = (0, exports.useInfoDrawer)();
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 });
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 (e.target.dataset.testid === 'info-drawer:backdrop') {
setInfoDrawer({ isOpen: false });
}
} }, { children: (0, jsx_runtime_1.jsxs)(Drawer, Object.assign({ moveStartX: moveStartX, translateX: translateX, isOpen: isOpen, variation: variation, heightVariation: heightVariation, "data-testid": "info-drawer:drawer" }, { children: [(0, jsx_runtime_1.jsx)(header_js_1.default, Object.assign({ size: "sm" }, { children: title }), void 0), (0, jsx_runtime_1.jsx)(CloseButton, { onClick: () => setInfoDrawer({ isOpen: false }), "data-testid": "info-drawer:close-button" }, void 0), (0, jsx_runtime_1.jsx)(Content, Object.assign({ heightVariation: heightVariation }, { children: content }), void 0)] }), void 0) }), void 0));
};
exports.InfoDrawer = InfoDrawer;
exports.default = (0, styled_components_1.default)(exports.InfoDrawer) ``;
//# sourceMappingURL=info-drawer.js.map