@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
142 lines • 9.51 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
*
* Copyright (c) "Neo4j"
* Neo4j Sweden AB [http://neo4j.com]
*
* This file is part of Neo4j.
*
* Neo4j is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { tokens } from '@neo4j-ndl/base';
import React, { useMemo, useState } from 'react';
import { classNames } from '../_common/defaultImports';
import { getDisabledColor, getDisabledTextColor, getHoverColor, getTextColorFromBackground, } from './color';
/**
*
*
* Helpers
*
*
*/
const HexagonEnd = ({ direction = 'left', color, htmlAttributes, height = 24, }) => {
const classes = classNames('ndl-hexagon-end', {
'ndl-left': direction === 'left',
'ndl-right': direction === 'right',
});
return (_jsxs("div", Object.assign({ className: classes }, htmlAttributes, { children: [_jsx("svg", { className: "ndl-hexagon-end-inner", width: "9", height: height, viewBox: "0 0 9 24", preserveAspectRatio: "none", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { style: { fill: color }, fillRule: "evenodd", clipRule: "evenodd", d: "M5.73024 1.03676C6.08165 0.397331 6.75338 0 7.48301 0H9V24H7.483C6.75338 24 6.08165 23.6027 5.73024 22.9632L0.315027 13.1094C-0.105009 12.4376 -0.105009 11.5624 0.315026 10.8906L5.73024 1.03676Z" }) }), _jsx("svg", { className: "ndl-hexagon-end-active", width: "13", height: height + 6, viewBox: "0 0 13 30", preserveAspectRatio: "none", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.075 2C9.12474 2 8.24318 2.54521 7.74867 3.43873L2.21419 13.4387C1.68353 14.3976 1.68353 15.6024 2.21419 16.5613L7.74867 26.5613C8.24318 27.4548 9.12474 28 10.075 28H13V30H10.075C8.49126 30 7.022 29.0913 6.1978 27.6021L0.663324 17.6021C-0.221109 16.0041 -0.221108 13.9959 0.663325 12.3979L6.1978 2.39789C7.022 0.90869 8.49126 0 10.075 0H13V2H10.075Z" }) })] })));
};
const SquareEnd = ({ direction = 'left', color, height = 24, htmlAttributes, }) => {
const classes = classNames('ndl-square-end', {
'ndl-left': direction === 'left',
'ndl-right': direction === 'right',
});
return (_jsxs("div", Object.assign({ className: classes }, htmlAttributes, { children: [_jsx("div", { className: "ndl-square-end-inner", style: { backgroundColor: color } }), _jsx("svg", { className: "ndl-square-end-active", width: "7", height: height + 6, preserveAspectRatio: "none", viewBox: "0 0 7 30", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M 3.8774 2 C 3.2697 2 2.7917 2.248 2.3967 2.6605 C 1.928 3.1498 1.7993 3.8555 1.7993 4.5331 V 13.8775 V 25.4669 C 1.7993 26.1445 1.928 26.8502 2.3967 27.3395 C 2.7917 27.752 3.2697 28 3.8774 28 H 7 V 30 H 3.8774 C 2.6211 30 1.4369 29.4282 0.5895 28.4485 C 0.1462 27.936 0.0002 27.2467 0.0002 26.5691 L -0.0002 13.8775 L 0.0002 3.4309 C 0.0002 2.7533 0.1462 2.064 0.5895 1.5515 C 1.4368 0.5718 2.6211 0 3.8774 0 H 7 V 2 H 3.8774 Z" }) })] })));
};
const HorizontalLines = ({ height = 24 }) => {
return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", height: height + 6, preserveAspectRatio: "none", viewBox: "0 0 37 30", fill: "none", className: "ndl-relationship-label-lines", children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M 37 2 H 0 V 0 H 37 V 2 Z" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M 37 30 H 0 V 28 H 37 V 30 Z" })] }));
};
/**
*
*
* GraphLabel Component
*
*
*/
const MAX_WIDTH = 200;
export const GraphLabel = React.forwardRef(function GraphLabel({ type = 'node', color, isDisabled = false, isSelected = false, as, onClick, className, style, children, htmlAttributes, isFluid = false, size = 'medium', }, ref) {
const [isHover, setIsHover] = useState(false);
const handleMouseEnter = (event) => {
setIsHover(true);
if (htmlAttributes && htmlAttributes.onMouseEnter)
htmlAttributes.onMouseEnter(event);
};
const handleMouseLeave = (event) => {
var _a;
setIsHover(false);
(_a = htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes.onMouseLeave) === null || _a === void 0 ? void 0 : _a.call(htmlAttributes, event);
};
const Component = as || 'button';
const isButton = Component === 'button';
const handleClick = (event) => {
// By default, a <button /> element with disabled set to true will not get its
// on click handler called. To support the same behavior on <a /> tags we
// swallow the event here when disabled, since the <a /> tag with disabled set to
// true will have its onClick handler called
if (isDisabled) {
event.preventDefault();
event.stopPropagation();
return;
}
if (onClick) {
onClick(event);
}
};
let backgroundColor = useMemo(() => {
if (!color) {
switch (type) {
case 'node':
return tokens.palette.graph['1'];
case 'relationship':
case 'relationshipLeft':
case 'relationshipRight':
return tokens.theme.light.palette.neutral.bg.strong;
default:
return tokens.theme.light.palette.neutral.bg.strongest;
}
}
return color;
}, [color, type]);
const hoverColor = useMemo(() => getHoverColor(backgroundColor ? backgroundColor : tokens.colors.lemon[40]), [backgroundColor]);
const textColor = useMemo(() => getTextColorFromBackground(backgroundColor ? backgroundColor : tokens.colors.lemon[40]), [backgroundColor]);
const disabledTextColor = useMemo(() => getDisabledTextColor(backgroundColor ? backgroundColor : tokens.colors.lemon[40]), [backgroundColor]);
if (isHover && !isDisabled)
backgroundColor = hoverColor;
if (isDisabled)
backgroundColor = getDisabledColor(backgroundColor);
const commonClasses = classNames('ndl-graph-label', className, {
'ndl-disabled': isDisabled,
'ndl-selected': isSelected,
'ndl-interactable': isButton,
'ndl-small': size === 'small',
});
if (type === 'node') {
const classes = classNames('ndl-node-label', commonClasses);
return (_jsx(Component, Object.assign({ className: classes, ref: ref, style: Object.assign({ backgroundColor: backgroundColor, color: isDisabled ? disabledTextColor : textColor, maxWidth: isFluid ? '100%' : MAX_WIDTH }, style) }, (isButton && {
disabled: isDisabled,
onClick: handleClick,
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave,
}), htmlAttributes, { children: _jsx("div", { className: "ndl-node-label-content", children: children }) })));
}
else if (type === 'relationship' ||
type === 'relationshipLeft' ||
type === 'relationshipRight') {
const classes = classNames('ndl-relationship-label', commonClasses);
const height = size === 'small' ? 20 : 24;
return (_jsxs(Component, Object.assign({ style: Object.assign(Object.assign({ maxWidth: isFluid ? '100%' : MAX_WIDTH }, style), { color: isDisabled ? disabledTextColor : textColor }), className: classes }, (isButton && {
disabled: isDisabled,
onClick: handleClick,
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave,
}), { ref: ref }, htmlAttributes, { children: [type === 'relationshipLeft' || type === 'relationship' ? (_jsx(HexagonEnd, { direction: "left", color: backgroundColor, height: height })) : (_jsx(SquareEnd, { direction: "left", color: backgroundColor, height: height })), _jsxs("div", { className: "ndl-relationship-label-container", style: {
backgroundColor: backgroundColor,
}, children: [_jsx("div", { className: "ndl-relationship-label-content", children: children }), _jsx(HorizontalLines, { height: height })] }), type === 'relationshipRight' || type === 'relationship' ? (_jsx(HexagonEnd, { direction: "right", color: backgroundColor, height: height })) : (_jsx(SquareEnd, { direction: "right", color: backgroundColor, height: height }))] })));
}
else {
const classes = classNames('ndl-property-key-label', commonClasses);
return (_jsx(Component, Object.assign({ style: Object.assign({ backgroundColor: backgroundColor, color: isDisabled ? disabledTextColor : textColor, maxWidth: isFluid ? '100%' : MAX_WIDTH }, style), className: classes, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: ref }, htmlAttributes, { children: _jsx("div", { className: "ndl-property-key-label-content", children: children }) })));
}
});
//# sourceMappingURL=GraphLabel.js.map