@navinc/base-react-components
Version:
Nav's Pattern Library
156 lines (154 loc) • 8.91 kB
JavaScript
"use strict";
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tooltip = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const index_js_1 = __importDefault(require("@material-ui/core/Tooltip/index.js"));
const index_js_2 = require("@material-ui/core/styles/index.js");
const styled_components_1 = __importDefault(require("styled-components"));
const icon_js_1 = __importDefault(require("./icon.js"));
const theme_js_1 = require("./theme.js");
const prop_types_1 = __importDefault(require("prop-types"));
const is_rebrand_js_1 = __importDefault(require("./is-rebrand.js"));
const arrowGenerator = () => {
return {
'&[x-placement*="top"] $arrow': {
bottom: 0,
left: 0,
marginBottom: '12px',
marginTop: '12px',
overflow: 'hidden',
height: '12px',
transition: 'none',
transform: 'translateY(4px)',
'&::before': {
width: '12px',
height: '12px',
boxShadow: `1px 2px 4px 2px ${({ theme }) => ((0, is_rebrand_js_1.default)(theme) ? theme.navNeutral300 : theme.neutral300)}`,
transform: 'translate(15px, -6px) rotate(45deg)',
},
},
'&[x-placement*="right"] $arrow': {
left: 0,
marginLeft: '12px',
marginRight: '12px',
width: '12px',
overflow: 'hidden',
transform: 'translateX(-10px)',
transition: 'none',
'&::before': {
width: '12px',
height: '12px',
boxShadow: `1px 2px 4px 2px ${({ theme }) => ((0, is_rebrand_js_1.default)(theme) ? theme.navNeutral300 : theme.neutral300)}`,
transform: 'translate(6px, 12px) rotate(45deg)',
},
},
};
};
const useStylesArrow = (0, index_js_2.makeStyles)(() => ({
arrow: {
position: 'absolute',
width: '42px',
height: '42px',
transition: 'none',
'&::before': {
content: '""',
width: '12px',
height: '12px',
boxShadow: `1px 2px 4px 2px ${({ theme }) => ((0, is_rebrand_js_1.default)(theme) ? theme.navNeutral300 : theme.neutral300)}`,
backgroundColor: 'white',
position: 'absolute',
},
},
popper: arrowGenerator(),
tooltip: {
color: '#70727B',
fontSize: '12px',
lineHeight: '18px',
backgroundColor: 'white',
boxShadow: `1px 2px 4px 2px ${({ theme }) => ((0, is_rebrand_js_1.default)(theme) ? theme.navNeutral300 : theme.neutral300)}`,
width: '198px',
marginBottom: '20px',
},
}));
const ArrowTooltip = (_a) => {
var { title } = _a, props = __rest(_a, ["title"]);
const _b = useStylesArrow(), { arrow } = _b, classes = __rest(_b, ["arrow"]);
const [arrowRef, setArrowRef] = (0, react_1.useState)(null);
return ((0, jsx_runtime_1.jsx)(index_js_1.default, Object.assign({ TransitionProps: { timeout: 0 }, classes: classes, PopperProps: {
popperOptions: {
modifiers: {
arrow: {
enabled: Boolean(arrowRef),
element: arrowRef,
},
},
},
} }, props, { title: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title, (0, jsx_runtime_1.jsx)("span", { className: arrow, ref: setArrowRef })] }) })));
};
const RightTooltip = (0, styled_components_1.default)(ArrowTooltip).withConfig({ displayName: "brc-sc-RightTooltip", componentId: "brc-sc-g8a64d" }) `
display: none;
@media (${theme_js_1.theme.forLargerThanPhone}) {
display: inline-block;
}
`;
const TopTooltip = (0, styled_components_1.default)(ArrowTooltip).withConfig({ displayName: "brc-sc-TopTooltip", componentId: "brc-sc-19mtdlo" }) `
display: inline-block;
@media (${theme_js_1.theme.forLargerThanPhone}) {
display: none;
}
`;
const Wrapper = styled_components_1.default.span.withConfig({ displayName: "brc-sc-Wrapper", componentId: "brc-sc-1mjuxva" }) ``;
const Tooltip = (_a) => {
var { children, className, iconName = 'actions/circle-info', disableFocusListener = false, disableHoverListener = false, disableTouchListener = false, enterDelay = 100, enterTouchDelay = 700, enterNextDelay = 0, interactive = false, leaveDelay = 0, leaveTouchDelay = 1500, onClose = () => { }, onOpen = () => { }, open } = _a, props = __rest(_a, ["children", "className", "iconName", "disableFocusListener", "disableHoverListener", "disableTouchListener", "enterDelay", "enterTouchDelay", "enterNextDelay", "interactive", "leaveDelay", "leaveTouchDelay", "onClose", "onOpen", "open"]);
return ((0, jsx_runtime_1.jsxs)(Wrapper, Object.assign({ className: className }, { children: [(0, jsx_runtime_1.jsx)(RightTooltip, Object.assign({ title: children, placement: "right", disableFocusListener: disableFocusListener, disableHoverListener: disableHoverListener, disableTouchListener: disableTouchListener, enterDelay: enterDelay, enterTouchDelay: enterTouchDelay, enterNextDelay: enterNextDelay, interactive: interactive, leaveDelay: leaveDelay, leaveTouchDelay: leaveTouchDelay, onClose: onClose, onOpen: onOpen, open: open }, { children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(icon_js_1.default, Object.assign({ name: iconName }, props)) }) })), (0, jsx_runtime_1.jsx)(TopTooltip, Object.assign({ title: children, placement: "top", disableFocusListener: disableFocusListener, disableHoverListener: disableHoverListener, disableTouchListener: disableTouchListener, enterDelay: enterDelay, enterTouchDelay: enterTouchDelay, enterNextDelay: enterNextDelay, interactive: interactive, leaveDelay: leaveDelay, leaveTouchDelay: leaveTouchDelay, onClose: onClose, onOpen: onOpen, open: open }, { children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(icon_js_1.default, Object.assign({ name: iconName }, props)) }) }))] })));
};
exports.Tooltip = Tooltip;
exports.Tooltip.propTypes = {
/** Add child components. */
children: prop_types_1.default.oneOfType([prop_types_1.default.arrayOf(prop_types_1.default.node), prop_types_1.default.node]),
/** Set the class names provided to Tooltip. */
className: prop_types_1.default.string,
/** Set the name of the icon to show (same as Icon component uses). */
iconName: prop_types_1.default.string,
/** Do not respond to focus events */
disableFocusListener: prop_types_1.default.bool,
/** Do not respond to hover events */
disableHoverListener: prop_types_1.default.bool,
/** Do not respond to long press touch events */
disableTouchListener: prop_types_1.default.bool,
/** The number of milliseconds to wait before showing the tooltip. This prop won't impact the enter touch delay (`enterTouchDelay`). */
enterDelay: prop_types_1.default.number,
/** The number of milliseconds a user must touch the element before showing the tooltip. */
enterTouchDelay: prop_types_1.default.number,
/** The number of milliseconds to wait before showing the tooltip when one was already recently opened. */
enterNextDelay: prop_types_1.default.number,
/** Makes a tooltip interactive, i.e. will not close when the user hovers over the tooltip before the `leaveDelay` is expired. */
interactive: prop_types_1.default.bool,
/** The number of milliseconds to wait before hiding the tooltip. This prop won't impact the leave touch delay (`leaveTouchDelay`). */
leaveDelay: prop_types_1.default.number,
/** The number of milliseconds after the user stops touching an element before hiding the tooltip. */
leaveTouchDelay: prop_types_1.default.number,
/** Callback fired when the component requests to be closed. */
onClose: prop_types_1.default.func,
/** Callback fired when the component requests to be open. */
onOpen: prop_types_1.default.func,
/** If `true`, the tooltip is shown. */
open: prop_types_1.default.bool,
};
exports.default = (0, styled_components_1.default)(exports.Tooltip).withConfig({ componentId: "brc-sc-ap9b14" }) ``;
//# sourceMappingURL=tooltip.js.map