@dnanpm/styleguide/build/cjs/components/TooltipMenu/TooltipMenu.js

DNA Styleguide repository provides the set of components and theme object used in various DNA projects.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var icons = require('@dnanpm/icons');
var React = require('react');
var useOutsideClick = require('../../hooks/useOutsideClick.js');
var styledComponents = require('styled-components');
var theme = require('../../themes/theme.js');
var Icon = require('../Icon/Icon.js');
var TooltipMenuExportedStyles = require('./ChildComponents/TooltipMenuExportedStyles.js');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefaultCompat(React);

const Selector = styledComponents.styled.div `
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: ${p => p.color || theme.default.color.text.white};
    cursor: pointer;

    span + span.dnasg-icon > svg {
        transform: ${p => (p.showDropdown ? 'rotate(180deg)' : 'rotate(0deg)')};
        transition: transform 0.15s linear;
    }
`;
const Container = styledComponents.styled.div `
    position: relative;
`;
const Tooltip = styledComponents.styled.div `
    background-color: ${theme.default.color.background.white.default};
    padding: 0.5rem;
    min-height: 3rem;
    min-width: 4rem;
    position: absolute;
    right: ${p => p.tooltipRight};
    top: ${p => p.tooltipTop};
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.48);
    z-index: ${p => p.zIndex};
`;
const ChildrenWrapper = styledComponents.styled.span `
    > * {
        white-space: nowrap;
    }
`;
/**
 * @visibleName Tooltip Menu
 * @deprecated Use `Tooltip` component
 */
const TooltipMenu = ({ selector, className, color = theme.default.color.text.black, children, iconSize = '1.5rem', zIndex = '1', tooltipTop = '2rem', tooltipRight = '-1.25rem', activeColor = color, tooltipIconName, tooltipIcon, tooltipIconSize = '1.5rem', tooltipChevron = true, arrowPosition = '-0.25rem', }) => {
    const [showDropdown, setShowDropdown] = React.useState(false);
    const ref = React.useRef(null);
    const toggleState = () => {
        setShowDropdown(!showDropdown);
    };
    useOutsideClick.default(ref, () => {
        if (showDropdown) {
            setShowDropdown(false);
        }
    });
    return (React__default.default.createElement(Container, { className: className, ref: ref },
        React__default.default.createElement(Selector, { color: showDropdown ? activeColor : color, onClick: toggleState, showDropdown: showDropdown },
            tooltipIcon && React__default.default.createElement(Icon.default, { icon: tooltipIcon, size: tooltipIconSize, position: "left" }),
            tooltipIconName && (React__default.default.createElement(Icon.default, { name: tooltipIconName, size: tooltipIconSize, position: "left" })),
            React__default.default.createElement("span", null, selector),
            tooltipChevron && React__default.default.createElement(Icon.default, { icon: icons.ChevronDown, size: iconSize, position: "right" })),
        showDropdown && (React__default.default.createElement(React__default.default.Fragment, null,
            React__default.default.createElement(TooltipMenuExportedStyles.TailShadow, { zIndex: zIndex, tooltipTop: tooltipTop, arrowPosition: arrowPosition }),
            React__default.default.createElement(TooltipMenuExportedStyles.Tail, { zIndex: zIndex, tooltipTop: tooltipTop, arrowPosition: arrowPosition }))),
        showDropdown && (React__default.default.createElement(Tooltip, { zIndex: zIndex, tooltipTop: tooltipTop, tooltipRight: tooltipRight },
            React__default.default.createElement(ChildrenWrapper, null, children)))));
};

exports.default = TooltipMenu;