@navinc/base-react-components
Version:
Nav's Pattern Library
174 lines (172 loc) • 9.15 kB
JavaScript
"use strict";
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 __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 Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
const styles_1 = require("@material-ui/core/styles");
const styled_components_1 = __importDefault(require("styled-components"));
const icon_js_1 = __importDefault(require("./icon.js"));
const theme = __importStar(require("./theme.js"));
const prop_types_1 = __importDefault(require("prop-types"));
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.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.neutral300}`,
transform: 'translate(6px, 12px) rotate(45deg)',
},
},
};
};
const useStylesArrow = (0, styles_1.makeStyles)(() => ({
arrow: {
position: 'absolute',
width: '42px',
height: '42px',
transition: 'none',
'&::before': {
content: '""',
width: '12px',
height: '12px',
boxShadow: `1px 2px 4px 2px ${theme.neutral300}`,
backgroundColor: 'white',
position: 'absolute',
},
},
popper: arrowGenerator(),
tooltip: {
color: '#70727B',
fontSize: '12px',
lineHeight: '18px',
backgroundColor: 'white',
boxShadow: `1px 2px 4px 2px ${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)(Tooltip_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 }, void 0)] }, void 0) }), void 0));
};
const RightTooltip = (0, styled_components_1.default)(ArrowTooltip) `
display: none;
@media (${theme.forLargerThanPhone}) {
display: inline-block;
}
`;
const TopTooltip = (0, styled_components_1.default)(ArrowTooltip) `
display: inline-block;
@media (${theme.forLargerThanPhone}) {
display: none;
}
`;
const Wrapper = styled_components_1.default.span ``;
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), void 0) }, void 0) }), void 0), (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), void 0) }, void 0) }), void 0)] }), void 0));
};
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) ``;
//# sourceMappingURL=tooltip.js.map