@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
166 lines • 9.45 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.jsx)("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" }) }) })));
};
const SquareEnd = ({ direction = 'left', color, htmlAttributes, }) => {
const classes = (0, classnames_1.default)('ndl-square-end', {
'ndl-left': direction === 'left',
'ndl-right': direction === 'right',
});
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes }, htmlAttributes, { children: (0, jsx_runtime_1.jsx)("div", { className: "ndl-square-end-inner", style: { backgroundColor: color } }) })));
};
/**
*
*
* 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,
type: 'button',
}), 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;
const focusRingClasses = (0, classnames_1.default)('ndl-relationship-focus-ring', {
'ndl-end-left-square': type === 'relationshipRight',
'ndl-end-right-square': type === 'relationshipLeft',
});
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,
type: 'button',
}), { 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 })), (0, jsx_runtime_1.jsx)("div", { className: "ndl-relationship-label-container", style: {
backgroundColor: backgroundColor,
}, children: (0, jsx_runtime_1.jsx)("div", { className: "ndl-relationship-label-content", children: children }) }), 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 })), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": true, className: focusRingClasses })] })));
}
else {
const classes = (0, classnames_1.default)('ndl-property-key-label', commonClasses);
return ((0, jsx_runtime_1.jsx)(Component, Object.assign({}, (isButton && {
type: 'button',
}), { 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