You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
2.4 KiB
42 lines
2.4 KiB
3 years ago
|
"use strict";
|
||
|
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
||
|
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
exports.default = exports.NavigationElement = void 0;
|
||
|
|
const react_1 = __importDefault(require("react"));
|
||
|
|
const box_1 = __importDefault(require("../../atoms/box"));
|
||
|
|
const icon_1 = __importDefault(require("../../atoms/icon"));
|
||
|
|
const typography_1 = require("../../atoms/typography");
|
||
|
|
const navigation_element_styled_1 = require("./navigation-element-styled");
|
||
|
|
// The longest part of the label which makes it no-wrap: ellipsis
|
||
|
|
// example: `MongooseWithLongNameAnd with space` should be truncated because 15 lines doesn't fit
|
||
|
|
// the width of the navbar. But "Postgres with long name and spaces" shouldn't be truncated because
|
||
|
|
// its "parts" doesn't exceed 15 chars each.
|
||
|
|
const PART_LENGTH_TO_ELLIPSIS = 15;
|
||
|
|
/**
|
||
|
|
* @load ./navigation-element.doc.md
|
||
|
|
* @component
|
||
|
|
* @subcategory Molecules
|
||
|
|
* @hideconstructor
|
||
|
|
* @see NavigationElementProps
|
||
|
|
* @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-navigation-element--default Storybook}
|
||
|
|
* @section design-system
|
||
|
|
* @new In version 3.3
|
||
|
|
*/
|
||
|
|
const NavigationElement = (props) => {
|
||
|
|
const { isOpen, icon, onClick, label, isSelected, href } = props;
|
||
|
|
const expandable = typeof isOpen !== 'undefined';
|
||
|
|
const chevron = isOpen ? 'ChevronUp' : 'ChevronDown';
|
||
|
|
const hasLongName = label.split(' ').reduce((memo, part) => (memo.length > part.length ? memo : part), '').length
|
||
|
|
> PART_LENGTH_TO_ELLIPSIS;
|
||
|
|
return (react_1.default.createElement(navigation_element_styled_1.StyledNavigationElement, { flex: true, flexDirection: "row", as: "a", isSelected: isSelected, isOpen: isOpen, href: href, onClick: (event) => (onClick ? onClick(event, props) : undefined) },
|
||
|
|
icon && (react_1.default.createElement(box_1.default, { className: "icon-box", as: "span" },
|
||
|
|
react_1.default.createElement(icon_1.default, { icon: icon }))),
|
||
|
|
react_1.default.createElement(typography_1.Title, { style: { whiteSpace: hasLongName ? 'nowrap' : 'normal' } }, label),
|
||
|
|
expandable && (react_1.default.createElement(box_1.default, { className: "arrow-box", as: "span" },
|
||
|
|
react_1.default.createElement(icon_1.default, { icon: chevron })))));
|
||
|
|
};
|
||
|
|
exports.NavigationElement = NavigationElement;
|
||
|
|
exports.default = NavigationElement;
|