@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
168 lines • 11.3 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GraphLabel = void 0;
const jsx_runtime_1 = require("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/>.
*/
const base_1 = require("@neo4j-ndl/base");
const react_1 = __importStar(require("react"));
const defaultImports_1 = require("../_common/defaultImports");
const color_1 = require("./color");
/**
*
*
* Helpers
*
*
*/
const HexagonEnd = ({ direction = 'left', color, htmlAttributes, height = 24, }) => {
const classes = (0, defaultImports_1.classNames)('ndl-hexagon-end', {
'ndl-left': direction === 'left',
'ndl-right': direction === 'right',
});
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes }, htmlAttributes, { children: [(0, jsx_runtime_1.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: (0, jsx_runtime_1.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" }) }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.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 = (0, defaultImports_1.classNames)('ndl-square-end', {
'ndl-left': direction === 'left',
'ndl-right': direction === 'right',
});
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes }, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-square-end-inner", style: { backgroundColor: color } }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.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 ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M 37 2 H 0 V 0 H 37 V 2 Z" }), (0, jsx_runtime_1.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;
exports.GraphLabel = react_1.default.forwardRef(function GraphLabel({ type = 'node', color, isDisabled = false, isSelected = false, as, onClick, className, style, children, htmlAttributes, isFluid = false, size = 'medium', }, ref) {
const [isHover, setIsHover] = (0, react_1.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 = (0, react_1.useMemo)(() => {
if (!color) {
switch (type) {
case 'node':
return base_1.tokens.palette.graph['1'];
case 'relationship':
case 'relationshipLeft':
case 'relationshipRight':
return base_1.tokens.theme.light.palette.neutral.bg.strong;
default:
return base_1.tokens.theme.light.palette.neutral.bg.strongest;
}
}
return color;
}, [color, type]);
const hoverColor = (0, react_1.useMemo)(() => (0, color_1.getHoverColor)(backgroundColor ? backgroundColor : base_1.tokens.colors.lemon[40]), [backgroundColor]);
const textColor = (0, react_1.useMemo)(() => (0, color_1.getTextColorFromBackground)(backgroundColor ? backgroundColor : base_1.tokens.colors.lemon[40]), [backgroundColor]);
const disabledTextColor = (0, react_1.useMemo)(() => (0, color_1.getDisabledTextColor)(backgroundColor ? backgroundColor : base_1.tokens.colors.lemon[40]), [backgroundColor]);
if (isHover && !isDisabled)
backgroundColor = hoverColor;
if (isDisabled)
backgroundColor = (0, color_1.getDisabledColor)(backgroundColor);
const commonClasses = (0, defaultImports_1.classNames)('ndl-graph-label', className, {
'ndl-disabled': isDisabled,
'ndl-selected': isSelected,
'ndl-interactable': isButton,
'ndl-small': size === 'small',
});
if (type === 'node') {
const classes = (0, defaultImports_1.classNames)('ndl-node-label', commonClasses);
return ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("div", { className: "ndl-node-label-content", children: children }) })));
}
else if (type === 'relationship' ||
type === 'relationshipLeft' ||
type === 'relationshipRight') {
const classes = (0, defaultImports_1.classNames)('ndl-relationship-label', commonClasses);
const height = size === 'small' ? 20 : 24;
return ((0, jsx_runtime_1.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' ? ((0, jsx_runtime_1.jsx)(HexagonEnd, { direction: "left", color: backgroundColor, height: height })) : ((0, jsx_runtime_1.jsx)(SquareEnd, { direction: "left", color: backgroundColor, height: height })), (0, jsx_runtime_1.jsxs)("div", { className: "ndl-relationship-label-container", style: {
backgroundColor: backgroundColor,
}, children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-relationship-label-content", children: children }), (0, jsx_runtime_1.jsx)(HorizontalLines, { height: height })] }), type === 'relationshipRight' || type === 'relationship' ? ((0, jsx_runtime_1.jsx)(HexagonEnd, { direction: "right", color: backgroundColor, height: height })) : ((0, jsx_runtime_1.jsx)(SquareEnd, { direction: "right", color: backgroundColor, height: height }))] })));
}
else {
const classes = (0, defaultImports_1.classNames)('ndl-property-key-label', commonClasses);
return ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("div", { className: "ndl-property-key-label-content", children: children }) })));
}
});
//# sourceMappingURL=GraphLabel.js.map