@nodeject/ui-components
Version:
UI library for non-trivial components
43 lines (42 loc) • 2.32 kB
JavaScript
import { RightOutlined } from '@ant-design/icons';
import { Dropdown, Menu, Typography } from 'antd';
import * as React from 'react';
import { Link as ReactRouterLink } from 'react-router-dom';
import { ButtonLabel } from '../buttons/ButtonLabel';
import { useToggle } from '../hooks';
import * as styles from './Separator.module.less';
var Text = Typography.Text;
var separatorRenderDefault = React.createElement(RightOutlined, null);
export var Separator = function (props) {
var className = props.className, id = props.id, islinkListLoading = props.islinkListLoading, linkList = props.linkList, onDropDownClick = props.onDropDownClick, path = props.path, separatorRenderProps = props.separatorRender;
var separatorRender = separatorRenderProps || separatorRenderDefault;
var _a = useToggle(), active = _a.active, toggleOn = _a.toggleOn, toggleOff = _a.toggleOff;
var Link = props.Link !== undefined ? props.Link : ReactRouterLink;
var onButtonClick = function () {
if (onDropDownClick) {
onDropDownClick({ id: id, url: path });
toggleOn();
}
if (!onDropDownClick && linkList) {
toggleOn();
}
};
var onVisibleChange = function (visible) {
if (!visible) {
toggleOff();
}
};
var onLinkClick = function (url) {
if (props.onLinkClick) {
props.onLinkClick(url);
}
};
var button = (React.createElement(ButtonLabel, { className: className, onClick: onButtonClick, active: active },
React.createElement(Text, { type: "secondary", className: styles.separator }, separatorRender)));
return (linkList === null || linkList === void 0 ? void 0 : linkList.length) > 0 ? (React.createElement(Dropdown, { onVisibleChange: onVisibleChange, overlay: React.createElement(Menu, null, islinkListLoading
? null
: linkList.map(function (link) {
return (React.createElement(Menu.Item, { key: "" + link.url + link.label },
React.createElement(Link, { to: link === null || link === void 0 ? void 0 : link.url, onClick: function () { return onLinkClick(link.url); } }, link.label)));
})), trigger: ['click'], visible: active }, button)) : (button);
};