@navinc/base-react-components
Version:
Nav's Pattern Library
148 lines (146 loc) • 7.39 kB
JavaScript
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;
};
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import MaterialTooltip from '@material-ui/core/Tooltip';
import { makeStyles } from '@material-ui/core/styles';
import styled from 'styled-components';
import Icon from './icon.js';
import * as theme from './theme.js';
import PropTypes from '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 = 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] = useState(null);
return (_jsx(MaterialTooltip, Object.assign({ TransitionProps: { timeout: 0 }, classes: classes, PopperProps: {
popperOptions: {
modifiers: {
arrow: {
enabled: Boolean(arrowRef),
element: arrowRef,
},
},
},
} }, props, { title: _jsxs(_Fragment, { children: [title, _jsx("span", { className: arrow, ref: setArrowRef }, void 0)] }, void 0) }), void 0));
};
const RightTooltip = styled(ArrowTooltip) `
display: none;
@media (${theme.forLargerThanPhone}) {
display: inline-block;
}
`;
const TopTooltip = styled(ArrowTooltip) `
display: inline-block;
@media (${theme.forLargerThanPhone}) {
display: none;
}
`;
const Wrapper = styled.span ``;
export 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 (_jsxs(Wrapper, Object.assign({ className: className }, { children: [_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: _jsx("div", { children: _jsx(Icon, Object.assign({ name: iconName }, props), void 0) }, void 0) }), void 0), _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: _jsx("div", { children: _jsx(Icon, Object.assign({ name: iconName }, props), void 0) }, void 0) }), void 0)] }), void 0));
};
Tooltip.propTypes = {
/** Add child components. */
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
/** Set the class names provided to Tooltip. */
className: PropTypes.string,
/** Set the name of the icon to show (same as Icon component uses). */
iconName: PropTypes.string,
/** Do not respond to focus events */
disableFocusListener: PropTypes.bool,
/** Do not respond to hover events */
disableHoverListener: PropTypes.bool,
/** Do not respond to long press touch events */
disableTouchListener: PropTypes.bool,
/** The number of milliseconds to wait before showing the tooltip. This prop won't impact the enter touch delay (`enterTouchDelay`). */
enterDelay: PropTypes.number,
/** The number of milliseconds a user must touch the element before showing the tooltip. */
enterTouchDelay: PropTypes.number,
/** The number of milliseconds to wait before showing the tooltip when one was already recently opened. */
enterNextDelay: PropTypes.number,
/** Makes a tooltip interactive, i.e. will not close when the user hovers over the tooltip before the `leaveDelay` is expired. */
interactive: PropTypes.bool,
/** The number of milliseconds to wait before hiding the tooltip. This prop won't impact the leave touch delay (`leaveTouchDelay`). */
leaveDelay: PropTypes.number,
/** The number of milliseconds after the user stops touching an element before hiding the tooltip. */
leaveTouchDelay: PropTypes.number,
/** Callback fired when the component requests to be closed. */
onClose: PropTypes.func,
/** Callback fired when the component requests to be open. */
onOpen: PropTypes.func,
/** If `true`, the tooltip is shown. */
open: PropTypes.bool,
};
export default styled(Tooltip) ``;
//# sourceMappingURL=tooltip.js.map