@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
161 lines • 11 kB
JavaScript
"use strict";
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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
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 classnames_1 = __importDefault(require("classnames"));
const react_1 = require("react");
const color_1 = require("./color");
/**
*
*
* Helpers
*
*
*/
const HexagonEnd = ({ direction = 'left', color, htmlAttributes, height = 24, }) => {
const classes = (0, classnames_1.default)('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", { "aria-hidden": true, className: "ndl-hexagon-end-inner", fill: "none", height: height, preserveAspectRatio: "none", viewBox: "0 0 9 24", width: "9", 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", { "aria-hidden": true, className: "ndl-hexagon-end-active", fill: "none", height: height + 6, preserveAspectRatio: "none", viewBox: "0 0 13 30", width: "13", 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, classnames_1.default)('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;
const GraphLabel = (_a) => {
var { type = 'node', color, isDisabled = false, isSelected = false, as, onClick, className, style, children, htmlAttributes, isFluid = false, size = 'large', ref } = _a, restProps = __rest(_a, ["type", "color", "isDisabled", "isSelected", "as", "onClick", "className", "style", "children", "htmlAttributes", "isFluid", "size", "ref"]);
const [isHover, setIsHover] = (0, react_1.useState)(false);
const handleMouseEnter = (event) => {
setIsHover(true);
if (htmlAttributes && htmlAttributes.onMouseEnter !== undefined) {
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 !== null && as !== void 0 ? 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 === undefined) {
switch (type) {
case 'node':
return base_1.tokens.graph['1'];
case 'relationship':
case 'relationshipLeft':
case 'relationshipRight':
return base_1.tokens.theme.light.color.neutral.bg.strong;
default:
return base_1.tokens.theme.light.color.neutral.bg.strongest;
}
}
return color;
}, [color, type]);
const hoverColor = (0, react_1.useMemo)(() => (0, color_1.getHoverColor)(backgroundColor ? backgroundColor : base_1.tokens.palette.lemon[40]), [backgroundColor]);
const textColor = (0, react_1.useMemo)(() => (0, color_1.getTextColorFromBackground)(backgroundColor ? backgroundColor : base_1.tokens.palette.lemon[40]), [backgroundColor]);
const disabledTextColor = (0, react_1.useMemo)(() => (0, color_1.getDisabledTextColor)(backgroundColor ? backgroundColor : base_1.tokens.palette.lemon[40]), [backgroundColor]);
if (isHover && !isDisabled) {
backgroundColor = hoverColor;
}
const commonClasses = (0, classnames_1.default)('ndl-graph-label', className, {
'ndl-disabled': isDisabled,
'ndl-interactable': isButton,
'ndl-selected': isSelected,
'ndl-small': size === 'small',
});
if (type === 'node') {
const classes = (0, classnames_1.default)('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, classnames_1.default)('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 }, restProps, 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, classnames_1.default)('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 }) })));
}
};
exports.GraphLabel = GraphLabel;
//# sourceMappingURL=GraphLabel.js.map