diff options
Diffstat (limited to 'app/javascript/flavours/glitch/features/ui/components/column_link.jsx')
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/column_link.jsx | 55 |
1 files changed, 55 insertions, 0 deletions
diff --git a/app/javascript/flavours/glitch/features/ui/components/column_link.jsx b/app/javascript/flavours/glitch/features/ui/components/column_link.jsx new file mode 100644 index 000000000..dcdac077f --- /dev/null +++ b/app/javascript/flavours/glitch/features/ui/components/column_link.jsx @@ -0,0 +1,55 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { NavLink } from 'react-router-dom'; +import Icon from 'flavours/glitch/components/icon'; +import classNames from 'classnames'; + +const ColumnLink = ({ icon, text, to, onClick, href, method, badge, transparent, ...other }) => { + const className = classNames('column-link', { 'column-link--transparent': transparent }); + const badgeElement = typeof badge !== 'undefined' ? <span className='column-link__badge'>{badge}</span> : null; + const iconElement = typeof icon === 'string' ? <Icon id={icon} fixedWidth className='column-link__icon' /> : icon; + + if (href) { + return ( + <a href={href} className={className} data-method={method} title={text} {...other}> + {iconElement} + <span>{text}</span> + {badgeElement} + </a> + ); + } else if (to) { + return ( + <NavLink to={to} className={className} title={text} {...other}> + {iconElement} + <span>{text}</span> + {badgeElement} + </NavLink> + ); + } else { + const handleOnClick = (e) => { + e.preventDefault(); + e.stopPropagation(); + return onClick(e); + }; + return ( + <a href='#' onClick={onClick && handleOnClick} className={className} title={text} {...other} tabIndex='0'> + {iconElement} + <span>{text}</span> + {badgeElement} + </a> + ); + } +}; + +ColumnLink.propTypes = { + icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired, + text: PropTypes.string.isRequired, + to: PropTypes.string, + onClick: PropTypes.func, + href: PropTypes.string, + method: PropTypes.string, + badge: PropTypes.node, + transparent: PropTypes.bool, +}; + +export default ColumnLink; |