@cimpress/react-components
Version:
React components to support the MCP styleguide
69 lines • 4.46 kB
JavaScript
import React, { useState } from 'react';
import { Tooltip } from '@cimpress/react-components';
const TooltipDemo = () => {
const [show, setShow] = useState(false);
const [showPopover, setShowPopover] = useState(false);
const [showPopoverStyle, setShowPopoverStyle] = useState(false);
const [showPopoverIgnoredClass, setShowPopoverIgnoredClass] = useState(false);
const onClickShow = () => {
setShow(!show);
};
const onClickOutside = () => {
setShowPopover(false);
};
const onPopoverClick = () => {
setShowPopover(!showPopover);
};
const onPopoverClickStyle = () => {
setShowPopoverStyle(!showPopoverStyle);
};
const onIgnoreClickOutside = () => {
setShowPopoverIgnoredClass(false);
};
const onIgnoreClick = () => {
setShowPopoverIgnoredClass(!showPopoverIgnoredClass);
};
const directions = ['top', 'bottom', 'left', 'right'];
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: "col-md-12", style: { marginBottom: '15px' } },
directions.map(d => (React.createElement("span", { key: d },
React.createElement(Tooltip, { direction: d, contents: `Tooltip on ${d}` },
React.createElement("button", { className: "btn btn-primary" }, d)),
' '))),
React.createElement(Tooltip, { direction: "top", contents: "custom enter", show: show },
React.createElement("button", { onClick: onClickShow, className: "btn btn-primary" }, "click")),
' ',
React.createElement(Tooltip, { direction: "top", variant: "popover", contents: React.createElement("div", null,
React.createElement("p", null,
"This is a ",
React.createElement("b", null, "popover"),
" instead! Fancy!"),
React.createElement("p", null, "It will close when you click outside.")), onClickOutside: onClickOutside, show: showPopover },
React.createElement("button", { onClick: onPopoverClick, className: "btn btn-primary" }, "Popover!")),
' ',
React.createElement(Tooltip, { direction: "top", contents: React.createElement("div", null,
React.createElement("p", null, "This tooltip has been restyled to be wide with large text!!")), tooltipInnerStyle: { maxWidth: '700px', fontSize: '20px' } },
React.createElement("button", { className: "btn btn-primary" }, "Style")),
' ',
React.createElement(Tooltip, { contents: "This tooltip has a delay", delay: 1000 },
React.createElement("button", { className: "btn btn-primary" }, "Delayed"))),
React.createElement("div", { className: "col-md-12", style: { marginBottom: '15px' } },
React.createElement(Tooltip, { outsideClickIgnoreClass: "ignore-this-class", direction: "top", variant: "popover", contents: React.createElement("div", null,
React.createElement("p", null,
"This is a ",
React.createElement("b", null, "popover"),
" instead! Fancy!"),
React.createElement("p", null, "It will close when you click outside except elements with class 'ignore-this-class'.")), onClickOutside: onIgnoreClickOutside, show: showPopoverIgnoredClass },
React.createElement("button", { onClick: onIgnoreClick, className: "btn btn-primary" }, "Popover! with ignored class")),
' ',
React.createElement("span", { className: "ignore-this-class", style: { border: '1px solid black', padding: '9px' } }, "Ignore click outside")),
React.createElement("div", { className: "col-md-12", style: { marginBottom: '15px' } },
React.createElement(Tooltip, { style: { color: 'red' }, direction: "top", variant: "popover", contents: React.createElement("div", null,
React.createElement("p", null,
"This is a ",
React.createElement("b", null, "popover"),
" with custom styles on the parent!")), show: showPopoverStyle },
React.createElement("button", { onClick: onPopoverClickStyle, className: "btn btn-primary" }, "Popover!")))));
};
export default TooltipDemo;
//# sourceMappingURL=tooltip.js.map